Ir al contenido principal
Todas las coleccionesGuías de usuario
Usando contexto para mostrar texto en los widgets de Ubidots
Usando contexto para mostrar texto en los widgets de Ubidots

Aprende cómo almacenar metadatos en las variables de Ubidots.

David Sepúlveda avatar
Escrito por David Sepúlveda
Actualizado hace más de 2 meses

Los valores numéricos no son el único tipo de dato soportado por Ubidots; también puedes almacenar datos de tipo string dentro de lo que llamamos contexto. ¿Qué queremos decir exactamente con contexto? En pocas palabras, es un objeto clave-valor que te permite almacenar no solo valores numéricos sino también valores de tipo string, por ejemplo, si deseas enviar tu nombre y apellido a Ubidots y luego recuperarlos, construirías un contexto de la siguiente manera: context = {"name" : "John", "last-name" : "Smith"} . Con este string, Ubidots almacenará una clave "name" con el valor "John" y una clave "last name" con el valor "Smith".

Requisitos

1. Enviando datos de contexto a una variable de Ubidots

Para enviar tu información de contexto utilizando una solicitud HTTP, necesitas implementar un método POST. A continuación, encontrarás la especificación para hacerlo:

  • Endpoint :

https://industrial.api.ubidots.com/api/v1.6/devices/{LABEL_DEVICE}/
  • Payload:

{"VARIABLE_LABEL" : {"value" : 30 , "context" : {"key" : "KEY-VALUE"}}}

Para el caso aquí presentado, crearemos un dispositivo llamado "my-device-test" con una variable etiquetada como "test" que almacenará nuestra información de contexto. Enviaremos un valor arbitrario ya que es obligatorio, pero no importante para el propósito del artículo.

La solicitud POST utilizando cURL se verá de la siguiente manera:

curl -X POST https://industrial.api.ubidots.com/api/v1.6/devices/device-test \ -H "X-Auth-Token: PUT_YOUR_TOKEN_HERE" \ -H "Content-Type: application/json" \-d '{"test": {"value" : 30, "context":{"name":"my-new-device"}}}'

NOTA: Tus datos pueden ser enviados utilizando solicitudes HTTP o cualquiera de nuestros protocolos soportados. Para saber más al respecto, consulta la documentación de la API de Ubidots.

El comando cURL anterior envía el payload especificado con nuestras claves de contexto, en este caso solo una que contiene el nombre del dispositivo– "my-device-name".

2. Mostrar datos de contexto utilizando el widget métrico

Ahora es el momento de personalizar tu widget métrico. Primero, selecciona el dashboard apropiado en el que trabajar y sigue los siguientes pasos para crear un widget métrico:

Paso 1: Haz clic en el botón "+" en la parte superior derecha.
Paso 2: Selecciona la opción de widget métrico.
Paso 3: Agrega la variable que contiene los datos de contexto que deseas mostrar.
Paso 4: Habilita la opción “Usar el editor HTML”.
Paso 5: Abre el editor:
– En el editor HTML, agrega ##{{context.name}} (Si no sabes cómo editar tus configuraciones, consulta este artículo)

– Para completar, solo guarda el widget y el contexto de tu variable se mostrará en el widget.

¿Qué pasa con el código? ¿Qué hice?
Nos alegra que preguntes. Usamos la palabra clave 'context' para recuperar el contexto de tu variable. Necesitas llamarlo con la clave de contexto que deseas mostrar, en este caso 'name'. Este es el valor de contexto único que se enviará, pero podría ser cualquier clave de contexto que envíes dentro de tu solicitud. Así que, en resumen, usa ##{{context.name}} para llamar al nombre almacenado dentro del contexto de la variable (el operador de punto, '.', te permite llamar a cualquier clave de un objeto de contexto).

3. Mostrar datos de contexto utilizando el widget de tablas

Similar a la sección 2, selecciona el dashboard apropiado en el que trabajar y sigue los siguientes pasos para crear un widget de tabla:

Paso 1: Haz clic en el botón "+" en la parte superior derecha.
Paso 2: Selecciona el widget de tabla de dispositivos o variables.
Paso 3: Agrega como fila una variable o dispositivo que contenga los datos de contexto que deseas mostrar.
Paso 4: Agrega una columna de contexto.
Paso 5: Configura todos los campos disponibles:
– Nombre de la columna
– Ingresa la clave de contexto
– Selecciona el comportamiento del color

Pasando a la sección de Apariencia:
Paso 6: Configura todos los campos disponibles:
Nombre de la tabla.
– Configura los decimales.
– Configura el formato de fecha.
– Selecciona borde y ancho del borde.
– Selecciona variables por página.
– Si hay alguno, ingresa un Estilo Personalizado para tu widget.

NOTA IMPORTANTE: Al hacer clic en cualquiera de las columnas puedes ordenar los valores. Alfabéticamente para palabras, ya sea ascendente (A a Z) o descendente (Z a A), y números de menor a mayor y viceversa.

OBJETIVO ALCANZADO:

Con el código completado en tu widget, el nombre de nuestro dispositivo ahora se refleja en el dashboard y funciona perfectamente. ¡Ahora es tu turno de intentarlo!

No olvides dejarnos tus comentarios en nuestros foros comunitarios o puedes conectarte con nosotros a través de las redes sociales en Facebook, Twitter, Hackster, o en el canal de chat de la aplicación de Ubidots.

¿Ha quedado contestada tu pregunta?