Ahora puedes desarrollar widgets o interfaces que se vean y funcionen como Ubidots, ya sea para ahorrar tiempo en el proceso de desarrollo o para asegurar que esos componentes se integren con el resto de la plataforma. Esto es posible gracias a Vulcan, nuestro sistema de diseño desarrollado internamente que se centra en ser limpio y funcional, yendo de átomos a partículas.
En los últimos meses hemos estado introduciendo gradualmente Vulcan en Ubidots para actualizar diferentes páginas y componentes en la plataforma y ahora lo estamos poniendo a tu disposición. Aprende cómo en esta guía.
Requisitos
Cuenta de Ubidots (prueba o licenciada).
1. Cómo usar Vulcan
Usar Vulcan dentro de Ubidots es tan fácil como ir a esta documentación para encontrar el componente que te gustaría usar y luego invocarlo en tu código. Actualmente, Vulcan se puede usar en el HTML Canvas al habilitar el uso de React en la configuración del widget. Más adelante será posible usar Vulcan en otras partes de Ubidots.
Si deseas usar Vulcan en tus proyectos personales, por favor contacta al soporte en support@ubidots.com.
2. Ejemplo de Vulcan usado en un HTML Canvas
En este ejemplo, hemos utilizado Vulcan para desarrollar un widget de HTML Canvas que nos permite enviar valores y contexto seleccionados de una lista a una variable.
Ve a un dashboard y crea un widget de HTML Canvas.
En su configuración, habilita React.js.
Haz clic en el campo “editar código” junto a “editor de código”.
Toma el siguiente código y pégalo en la pestaña “JavaScript (JSX)” del editor.
const { Button, VulcanUIProvider, Switch, Text, Dropdown, Input, createTheme, InputCombo, Flex } = VulcanUIconst { Suspense, useState } = Reactconst $root = document.getElementById("root");function Spinner(){ return <div className="spinner-container"><div className="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>}const root = ReactDOM.createRoot($root)root.render( <Suspense fallback={<Spinner />}> <App /> </Suspense>)const axiosInstance = axios.create({ baseURL: "https://industrial.api.ubidots.com/api", headers: { "X-Auth-Token": "TOKEN-HERE", "Content-Type": "application/json", Authorization: "Bearer TOKEN-HERE", },});function createResource(promise) { const state = { status: "loading", data: null, error: null }; let response = promise .then((data) => { state.status = "success"; state.data = data; state.error = null; }) .catch((error) => { state.status = "error"; state.error = error; }); return { get() { if (state.status === "loading") throw response; if (state.status === "error") throw state.error; if (state.status === "success") return state.data; throw new Error("La solicitud falló, por favor intenta de nuevo."); }, };}async function getDevice(id) { const { data } = await axiosInstance.get(`/v2.0/devices/${id}`); return data;}async function getVariables(id) { const { data } = await axiosInstance.get(`/v2.0/devices/${id}/variables`); return data.results;}async function sendDot(deviceLabel, dot) { await axiosInstance.post(`/v1.6/devices/${deviceLabel}`, dot);}const deviceResource = createResource(getDevice("DEVICE-ID-HERE"));const variablesResource = createResource( getVariables("DEVICE-ID-HERE"));const theme = createTheme({});const contextOptions = [ { label: "Healthy", value: "healthy", }, { label: "Operational", value: "operational", }, { label: "Degraded", value: "degraded", }, { label: "Maintenance", value: "maintenance", }, { label: "Damaged", value: "damaged", }];function App() { const device = deviceResource.get(); const variables = variablesResource.get(); const [selectedVariable, setSelectedVariable] = useState(null); const [value, setValue] = useState(""); const [contextValue, setContextValue] = useState(""); const [loading, setLoading] = useState(false); const sendDotHandler = async () => { if (!selectedVariable) return alert("Selecciona una variable"); if (!value) return alert("Ingresa un valor"); if (!contextValue) return alert("Ingresa un valor de contexto"); try { setLoading(true); const dot = { [selectedVariable?.label]: { value: Number(value), context: { "status": contextValue.value, }, }, }; await sendDot(device.label, dot); } finally { setLoading(false); } };return ( <VulcanUIProvider theme={theme} injectFonts> <div className="container"> <Text as="h1">{device.name}</Text> <InputCombo label="Variable" > {({ id }) => ( <Dropdown onSelect={setSelectedVariable} placement="bottom-start"> <Dropdown.Trigger fullWidth id={id}> {selectedVariable?.name ?? "- Seleccionar variable -"} </Dropdown.Trigger> <Dropdown.Menu> {variables.map((variable) => ( <Dropdown.Item key={variable.id} value={variable}> {variable.name} </Dropdown.Item> ))} </Dropdown.Menu> </Dropdown> )} </InputCombo> <InputCombo label="Valor"> <Input startContent="Valor:" type="number" value={value} onValueChange={setValue} placeholder="Ingresa valor" fullWidth /> </InputCombo> <InputCombo label="Estado" description={`Selecciona el estado del dispositivo`} > {({ id }) => ( <Dropdown onSelect={setContextValue} placement="bottom-start"> <Dropdown.Trigger fullWidth id={id}> {contextValue?.label ?? "- Seleccionar contexto -"} </Dropdown.Trigger> <Dropdown.Menu> {contextOptions.map((option) => ( <Dropdown.Item key={option.value} value={option}> {option.label} </Dropdown.Item> ))} </Dropdown.Menu> </Dropdown> )} </InputCombo> <br /> <Button disabled={loading} onPress={sendDotHandler} color="success"> Enviar </Button> </div> </VulcanUIProvider> );}Nota:
En el código, reemplaza los textos “TOKEN-HERE” con tu token.
También reemplaza el “DEVICE-ID-HERE” con el ID del dispositivo al que te gustaría enviar valores.