Lo que aprenderás

Después de leer este artículo, aprenderás a configurar tu aplicación Bubble para que pueda utilizar la API de Ubidots para solicitar dispositivos, variables, etc. Esto te permitirá construir frontends personalizados como este:

Motivación

Ubidots es una plataforma IoT diseñada para manejar la recolección, almacenamiento, visualización y análisis de datos. Al combinar la flexibilidad de las capacidades de diseño frontend de Bubble con las potentes capacidades backend de Ubidots, puedes desbloquear un nuevo nivel de funcionalidad para tus aplicaciones.

Introducción

En la era digital actual, crear aplicaciones amigables para el usuario y visualmente atractivas es una prioridad. Bubble es una plataforma sin código que empodera a individuos y empresas para diseñar impresionantes interfaces frontend sin necesidad de codificación extensa. Sin embargo, cuando se trata de integrar datos en tiempo real, gestionar dispositivos IoT o implementar análisis de datos avanzados, aprovechar una plataforma backend robusta se vuelve crucial. Aquí es donde entra Ubidots.

Parte dos de esta serie de integración: Integrar Bubble con Ubidots: Creando una aplicación web de muestra para usuarios finales

Requisitos

Una cuenta de Bubble
Una cuenta de Ubidots

1. Instalar el plugin API Connector

Comienza iniciando sesión en tu cuenta de Bubble. Luego, crea una nueva aplicación Bubble haciendo clic en el botón como se muestra a continuación:

Una vez que el navegador termine de cargar los recursos, se verá así:

Ve a la sección de Plugins en el panel del lado izquierdo y luego haz clic en el botón + Agregar plugins.

Busca el plugin API Connector e instálalo haciendo clic en el botón Instalar . Luego haz clic en el botón Listo para continuar.

Haz clic en el botón Agregar otra API .

Se mostrará un conjunto de opciones. Completa los campos de la siguiente manera:

Nombre de la API: Cualquier nombre que te ayude a identificar esta API, por ejemplo Ubi API es un nombre adecuado.
Autenticación: Configúralo en Clave privada en el encabezado del menú desplegable.
Nombre de la clave: Configúralo en el encabezado de autenticación de Ubidots, x-auth-token.
Valor de la clave: Configura esto con el token que deseas usar para solicitar la API de Ubidots.

Finalmente, haz clic en el pequeño botón expandir como se muestra a continuación:

2. Crear la llamada API para obtener dispositivos de Ubidots

Al hacer clic en el botón expandir , se mostrarán los ajustes de la llamada API. Completa los campos como se describe a continuación:

Nombre: Configúralo con cualquier nombre que consideres apropiado, OBTENER TODOS los Dispositivos es un nombre adecuado.
Usar como: Configúralo en Datos.
Tipo de datos: Configúralo en JSON.
Método: Configúralo en GET.
Encabezados:
- Clave: search_icontains → Valor: Una etiqueta de dispositivo común.
URL: Configúralo en el endpoint de Ubidots para solicitar dispositivos:
```
https://industrial.api.ubidots.com/api/v2.0/devices/
```

Por ejemplo, supongamos que deseas que tu usuario final visualice todos los dispositivos cuya etiqueta comienza con "HealthDevice", entonces el valor de la clave search_icontains en los encabezados debería ser "HealthDevice".

Haz clic en el botón Inicializar llamada . Al hacerlo, aparecerá una ventana emergente como la que se muestra a continuación. Allí, en el campo resultados, establece el nombre de la llamada API que se está creando.

En nuestro ejemplo, dado que la llamada API se nombró OBTENER TODOS los Dispositivos en el paso anterior (como se muestra en la imagen anterior), así lo llamaremos en el campo resultados.

Después de hacer clic en el botón Guardar , serás llevado a la pantalla que corresponde a la imagen anterior.

3. Crear la llamada API para obtener todas las variables de Ubidots

Sigue exactamente los mismos pasos que en la sección anterior, solo reemplazando la URL por el endpoint de Ubidots para solicitar variables:

https://industrial.api.ubidots.com/api/v2.0/variables/

Además, asegúrate de establecer el valor de la clave search_icontains al nombre común de todas las variables que deseas mostrar.

Por ejemplo, supongamos que los dispositivos considerados en la sección anterior (cuyas etiquetas comenzaban con "HealthDevice") tienen una variable llamada Health y deseas mostrar el valor de esta variable para cada dispositivo, entonces el valor de la clave search_icontains debería ser Health.

Por último, asegúrate de inicializar la llamada como en la sección anterior.

4. Crear la llamada API para obtener el último valor de una variable de Ubidots.

Sigue exactamente los mismos pasos que en la sección anterior, solo reemplazando la URL por el endpoint de Ubidots para solicitar el último valor de una variable:

https://industrial.api.ubidots.com/api/v2.0/devices/[deviceId]/variables

Luego, en la sección de parámetros de URL, establece una etiqueta de clave a deviceId y establece su valor en el de cualquier dispositivo en tu cuenta de Ubidots.

Como en los pasos anteriores, asegúrate de inicializar la llamada.

5. Crear la llamada API para obtener los valores de una variable de Ubidots

Sigue exactamente los mismos pasos que en la sección anterior, solo reemplazando la URL por:

https://industrial.ubidots.com/api/v1.6/variables/[variableId]/values

Luego, en la sección de parámetros de URL, establece una etiqueta de clave a variableId y su valor al ID de cualquier variable en tu cuenta de Ubidots.

Como en los pasos anteriores, asegúrate de inicializar la llamada.

6. Instalar el plugin Unix Timestamp

Necesitarás instalar este plugin para transformar cualquier marca de tiempo enviada desde Ubidots en un formato de fecha. Dirígete al panel del lado izquierdo y haz clic en la opción Instalar más... .

Busca "unix timestamp" en la barra de búsqueda e instala el plugin. Luego haz clic en el botón Listo.

7. Crear la llamada API para autenticar tu aplicación Bubble contra la aplicación Ubidots

Nota: Este paso es opcional y solo está disponible para los titulares de licencias Enterprise, que tienen acceso a los endpoints de OAuth como parte de su plan de características.

Crea una nueva llamada API con los siguientes ajustes:

Método: POST
Encabezados:
- Clave: Content-Type → Valor: application/x-www-form-urlencoded
Cuerpo:
- Clave: grant_type → Valor: password
- Clave: username → Valor: El nombre de usuario de la cuenta de Ubidots que posee la aplicación (admin).
- Clave: password → Valor: La contraseña de la cuenta de Ubidots que posee la aplicación (admin).
- Clave: client_id → Valor: Consulta la nota a continuación.
- Clave: client_secret → Valor: Consulta la nota a continuación.
NOTA IMPORTANTE: El client_id y client_secret deben ser proporcionados por el equipo de soporte de Ubidots. Por favor, contáctanos al siguiente correo electrónico, support@ubidots.com.

Como en la creación de la llamada API anterior, asegúrate de inicializar esta llamada.

Parte dos de esta serie de integración: Integrar Bubble con Ubidots: Creando una aplicación web de muestra para usuarios finales