Esta es una guía breve sobre lo que puedes lograr utilizando Ubidots como el backend para una app cuyo frontend se desarrolla en Bubble:

Este artículo no profundizará en todos los componentes mostrados en el GIF anterior, sin embargo, proporcionará las herramientas necesarias para que puedas reproducirlo por tu cuenta.

Esta será la interfaz de usuario que mostrará la información del dispositivo. En este ejemplo particular, se mostrarán los siguientes datos, sin embargo, eres libre de modificar este diseño según tus necesidades.

Ve a la pestaña de Diseño en el panel del lado izquierdo de la pantalla:

Arrastra y suelta la cantidad necesaria de elementos de Texto, de acuerdo a lo que deseas visualizar, luego haz doble clic en cada elemento para abrir su configuración y establecer el texto que deseas mostrar:

Arrastra y suelta un elemento de Grupo Repetido en el área en blanco para crear la "rejilla" para reunir y mostrar los datos del dispositivo.

A continuación, este Grupo Repetido debe configurarse para que pueda utilizar la API de Ubidots para solicitar los datos requeridos. Haz doble clic en el Grupo Repetido para mostrar su configuración y configúralo como muestra el siguiente GIF:

Ten en cuenta que, en la configuración anterior, el nombre de la API configurado puede no ser el mismo que el que has utilizado.

Por último, se recomienda desmarcar la opción Establecer número fijo de filas si no requieres una cantidad fija de filas.

Arrastra y suelta un elemento de Texto dentro de la primera fila del Grupo Repetido. Asegúrate de que se duplique en las otras filas como se muestra a continuación:

Haz doble clic en el elemento de Texto para mostrar su configuración y configúralo como muestra el siguiente GIF:

Como muestra el GIF anterior, los dispositivos cuya etiqueta comienza con "DeviceHealth" se están mostrando al presionar el botón de Vista previa.

Primero, arrastra y suelta un elemento de Marca de tiempo Unix en el lienzo en blanco. Redimensiona para que se ajuste a la rejilla del grupo repetido y arrástralo. Asegúrate de que, una vez colocado en el grupo repetido, se duplique en todas las filas. Después de eso, haz clic en la marca de tiempo Unix en la primera fila y configúralo como muestra el GIF a continuación:

La variable Salud en cada dispositivo se mostrará, no como su valor numérico, sino como un mensaje así como un indicador circular de color, de acuerdo a la siguiente lógica:

Para hacerlo, arrastra y suelta un elemento de texto en el grupo repetido, asegurándote de que se repita en todas las filas. Luego, haz doble clic en el elemento de texto para mostrar su configuración. El siguiente GIF muestra cómo establecer la lógica para que, cuando el valor de la variable Salud sea 1, el elemento de texto mostrará el texto "Saludable":
​

Repite el paso anterior para establecer la lógica para los niveles restantes (en nuestro caso "advertencia", "no saludable" y "desconocido").

Consejo profesional: Puedes hacer clic derecho en la expresión y seleccionar la opción copiar expresión para replicar fácilmente este paso.

Por último, así es como deberían ser las configuraciones:

Eso es todo para mostrar el mensaje.

El siguiente paso es configurar el indicador circular. Para hacerlo, arrastra y suelta un elemento de Círculo dinámico en el grupo repetido, al lado del mensaje. Los pasos son exactamente los mismos que los de configurar el mensaje, la única diferencia es que esta vez la propiedad a cambiar es Color. Luego haz doble clic en él y cambia su configuración como se muestra a continuación:

Repite este paso para cubrir los 4 niveles de lógica:

Por último, ve a la pestaña de Apariencia y establece valor, valor mínimo y valor máximo en 1:

Finalmente, así es como se ve:​

Los datos de la variable Conectividad se mostrarán siguiendo las mismas reglas que para la variable Salud. Esta es la lógica:

Sigue los mismos pasos que en la sección anterior para configurar tanto el mensaje como el indicador circular. Solo necesitas tener en cuenta que en lugar de filtrar por la etiqueta "salud" deberías filtrar por "conectividad".

​Configuraciones del mensaje:

Configuraciones del indicador circular:

Resultado:

El siguiente GIF muestra cómo puedes obtener y visualizar las propiedades de un dispositivo.
Arrastra y suelta un elemento de texto en el grupo repetido, asegurándote de que se duplique en todas las filas del grupo repetido. Haz doble clic en el elemento de Texto para editar su configuración de la siguiente manera:

El siguiente GIF muestra cómo puedes obtener y visualizar las etiquetas de un dispositivo.
Sigue exactamente los mismos pasos que en la sección 6. Lo único que necesitas tener en cuenta es que en lugar de seleccionar la clave properties_city, deberías seleccionar tags:

Comienza agregando un elemento de Forma en el área de diseño. Luego, haz doble clic en él para abrir su configuración. Modifica el color, el estilo del borde, el color del borde y la sombra de acuerdo a tus requisitos:

Agrega un Círculo dinámico y un ícono dentro de la forma:​

Por último, agrega dos elementos de Texto dentro de la forma que acabas de crear. Uno que contenga texto simple como "Dispositivos saludables:" y el otro que contenga el conteo de los dispositivos cuya variable Salud es igual a 1, es decir, "Saludables".

Este es el resultado:

Puedes seguir esta misma lógica para mostrar los diferentes estados de las variables Salud y Conectividad y lograr algo como:

Este es el resultado:

Esto es hasta donde llega este tutorial. ¡Ahora, depende de ti personalizar tu app a tu gusto!