MCIAU Tech

Cómo Crear un Dashboard de Dispositivo en Datacake

February 06, 2026

Introducción

¡Bienvenido de nuevo!

En esta guía te mostraré cómo crear un dashboard completo en Datacake usando dos tipos de widgets esenciales: value widgets para mostrar valores numéricos y chart widgets para visualizar tendencias históricas. Usaremos como ejemplo un sensor ambiental BME280 que mide temperatura, humedad y presión atmosférica.

Al finalizar, tendrás un dashboard funcional que mostrará tus datos en tiempo real de forma clara y profesional.

Pre-requisitos

Antes de comenzar, asegúrate de tener:

  • Una cuenta de Datacake con un dispositivo HTTP ya configurado (si no lo tienes, revisa el artículo anterior).
  • Al menos un campo creado en tu dispositivo con datos recibidos.
  • Conocimiento básico de JSON y del funcionamiento de Datacake con HTTP.

Paso 1: Entendiendo el Flujo de Datos en Datacake

¿Cómo Funciona Datacake con HTTP?

Cuando tu dispositivo envía datos mediante HTTP, Datacake recibe el JSON y el decoder analiza el cuerpo del mensaje. El decoder busca las claves del JSON y las convierte automáticamente en variables dentro de tu dispositivo en Datacake. Estas variables se almacenan y quedan disponibles para crear campos y visualizarlos en dashboards.

Este proceso es automático y transparente: cada vez que envías un nuevo JSON con datos, las variables se actualizan en tiempo real.

Diagrama de Bloques del Flujo de Datos

Aquí puedes ver cómo fluyen los datos desde tu sensor hasta el dashboard:

mermaid diagram 2026 02 06 072953

El proceso funciona de la siguiente manera:

  1. Sensor BME280 lee los datos del ambiente (temperatura, humedad, presión).
  2. Dispositivo ESP32 envía estos datos mediante una petición HTTP POST con el JSON al endpoint de Datacake.
  3. Datacake API recibe la petición HTTP y la pasa al decoder.
  4. Decoder analiza el cuerpo del mensaje JSON, extrae las claves y las convierte en variables.
  5. Variables se almacenan en tiempo real y quedan disponibles como campos en tu dispositivo.
  6. Dashboard consulta estas variables y las muestra mediante widgets y gráficas actualizadas en tiempo real.

Diagrama de Secuencia: Flujo Completo

El siguiente diagrama muestra el flujo completo desde el envío de datos hasta su visualización:

mermaid diagram 2026 02 06 073340

Paso 2: Preparando los Datos del Sensor BME280

Estructura JSON Recomendada

Para un sensor ambiental BME280, te recomiendo usar esta estructura JSON:

{
  "temperature": 23.5,
  "humidity": 65.2,
  "pressure": 1013.25,
  "altitude": 520.8
}

Cada clave representa una medición del sensor:

  • temperature: Temperatura en grados Celsius (°C)
  • humidity: Humedad relativa en porcentaje (%)
  • pressure: Presión atmosférica en hectopascales (hPa)
  • altitude: Altitud calculada en metros (m)

Código JavaScript para el Decoder Personalizado

Si necesitas personalizar el decoder por defecto, aquí tienes un ejemplo de código JavaScript que puedes usar en la sección HTTP Payload Decoder de tu dispositivo:

function Decoder(request) {
    /*
    This decoder expects JSON data in the format given below.
    Upon receiving the data, it decodes it and forwards it to the database.

    - To simulate, simply copy the following JSON and paste into the "Body" text field below.
    - Click on "Try Decoder" to see the result.

    {
       "device":"REPLACE WITH SERIAL NUMBER",
      "temperature": 23.5,
      "humidity": 65.2,
      "pressure": 1013.25,
      "altitude": 520.8
    }
    */

    // First, parse the request body into a JSON object to process it
    var payload = JSON.parse(request.body)

    // Extract the serial number from the incoming data
    var serialNumber = payload.device

    // Preparing to return data to Datacake...

    // Get the Unix timestamp in seconds to use as the ingestion timestamp
    var timestamp = Math.floor(Date.now() / 1000);

    var result = Object.keys(payload).map(function(key) {
      if (key !== "device") {
        return {
          device: payload.device,
          field: key.toUpperCase(),
          value: payload[key],
          timestamp: timestamp // timestamps are optional but can be useful for data tracking and auditing
        };
      }
    });

    return result

    /*
    Sample return format:
    If you wish to manually return a fixed structure, Datacake API devices require the following format:

    return [
        {
            device: "serialnumber", // Replace with Serial Number or Device ID
            field: "TEST",
            value: 123
        }
    ];
    */
}

Este decoder toma el JSON recibido, extrae cada valor y lo asigna a un campo específico en Datacake.

Paso 3: Configurar el Firmware del ESP32

Para enviar datos desde tu ESP32 a Datacake, necesitas configurar el firmware en tu dispositivo. Puedes usar el proyecto de ejemplo disponible en GitHub que incluye todo lo necesario para conectarte a Datacake mediante HTTP.

Repositorio del Firmware

El firmware completo para ESP32 con integración a Datacake está disponible en el siguiente repositorio:

ESP32 + Datacake IoT Dashboard

Este proyecto incluye:

  • Conexión WiFi automática
  • Envío de datos cada 10 segundos (configurable)
  • Integración con Datacake API mediante HTTP POST
  • Formato JSON estructurado
  • Soporte para múltiples sensores

Configuración del Firmware

Sigue estos pasos para configurar el firmware en tu ESP32:

1. Configurar WiFi

Edita src/main.cpp y actualiza tus credenciales WiFi:

const char* ssid = "TU_WIFI_SSID";
const char* password = "TU_WIFI_PASSWORD";

2. Configurar Datacake

Antes de actualizar el código, necesitas tener tu dispositivo configurado en Datacake:

  1. Crea una cuenta en Datacake (si aún no la tienes).

  2. Crea un nuevo dispositivo siguiendo el artículo anterior o el Paso 4 de esta guía.

  3. Agrega los siguientes campos en tu dispositivo:

    • temperature (tipo: Float)
    • battery (tipo: Float)
    • humidity (tipo: Float)
    • co2 (tipo: Integer)

  4. Copia la URL de integración API de tu dispositivo. La encontrarás en la sección HTTP Payload Decoder de tu dispositivo.

  5. Actualiza la variable serverName en src/main.cpp:

const char* serverName = "https://api.datacake.co/integrations/api/TU_URL_AQUI";

3. Obtener Device ID

Reemplaza el Device ID en el código. Puedes encontrarlo en la configuración de tu dispositivo en Datacake:

jsonDoc["device"] = "TU_DEVICE_ID_AQUI";

4. Compilar y Subir

Una vez configurados todos los parámetros:

  1. Compila el proyecto en PlatformIO o Arduino IDE.
  2. Conecta tu ESP32 por USB.
  3. Sube el firmware a tu dispositivo.
  4. Abre el Serial Monitor (115200 baud) para ver los logs de conexión.

Tu ESP32 comenzará a enviar datos automáticamente a Datacake cada 10 segundos. Puedes verificar que los datos están llegando revisando los logs en la sección Show Logs de tu dispositivo en Datacake.

Paso 4: Crear un Nuevo Producto y Dispositivo

Si aún no tienes un dispositivo configurado, sigue estos pasos:

  1. Inicia sesión en Datacake y haz clic en Add Device.

create device 1

  1. Selecciona API como tipo de dispositivo y haz click en Next

create device 2

  1. Crea un Nuevo Producto con el nombre "Sensor Ambiental BME280" y haz clic en Next.

create device 3

  1. Añade un dispositivo, nómbralo "BME280 Sensor 01" y selecciona el Plan Gratuito.
  2. Haz clic en Add One Device para finalizar.

create device 4

Paso 5: Crear los Campos del Dispositivo

Ahora es momento de crear los campos para nuestro dispositivos:

  1. En la página principal de tu dispositivo, haz clic en Configuration en el menú superior. Haz clic en Product & Hardware.

fields1

  1. Haz una prueba para probar el decoder simulando el JSON del dispositivo en el campo Body. Presiona el botón Try Decoder.

fields2

  1. Datacake mostrará las claves del JSON en la sección Suggested Fields. Haz clic en cada una para crear los campos correspondientes:
  • TEMPERATURE (tipo: Number, unidad: °C)
  • HUMIDITY (tipo: Number, unidad: %)
  • PRESSURE (tipo: Number, unidad: hPa)
  • ALTITUDE (tipo: Number, unidad: m)

fields3

Paso 6: Crear un Dashboard

Ahora vamos a crear el dashboard donde visualizarás tus datos:

  1. En la página principal de tu dispositivo, haz clic en Dashboard en el menú superior.

dashboard1

  1. Activa el modo editor. Para entrar en el modo Editar de tu panel de control, pulsa el icono situado en el extremo derecho de la pantalla, después de Permissions.

dashboard2

Ahora que estamos en modo edición, vamos a crear unos widgets.

Paso 7: Crear Value Widgets

Los value widgets muestran el valor actual de una variable. Para el sensor BME280, crearemos widgets que muestren temperatura y humedad.

En este tutorial usaremos los widget presets que Datacake ofrece, que simplifican mucho el proceso ya que solo necesitas seleccionar el campo de datos correspondiente. Los presets ya vienen preconfigurados con el tipo de widget, unidades, colores y rangos apropiados para cada tipo de medición.

Widget de Temperatura usando Preset

  1. En el editor del dashboard, haz clic en Add Widget.

  2. Selecciona Value como tipo de widget.

  3. En la sección de configuración, busca y selecciona el Widget Preset de tipo "Temperatura" o "Temperature".

  4. Selecciona el campo TEMPERATURE de tu dispositivo.

  5. El preset ya viene configurado con:

    • Widget Type: Gauge (medidor circular)
    • Unidad: °C
    • Rango mínimo y máximo apropiados
    • Color cálido (rojo/naranja)

  6. Haz clic en Save para guardar el widget.

dashboard3

Widget de Humedad usando Preset

  1. Haz clic nuevamente en Add Widget.

  2. Selecciona Value como tipo de widget.

  3. Selecciona el Widget Preset de tipo "Humedad" o "Humidity".

  4. Selecciona el campo HUMIDITY de tu dispositivo.

  5. El preset ya viene configurado con:

    • Widget Type: Text o Number (muestra el valor y la unidad)
    • Unidad: %
    • Color frío (azul/verde azulado)

  6. Haz clic en Save para guardar el widget.

dashboard4

Configuración Manual (Alternativa)

Si prefieres configurar los widgets manualmente en lugar de usar presets, puedes hacerlo de la siguiente manera:

Para Temperatura:

  • Name: "Temperatura"
  • Field: Selecciona "TEMPERATURE"
  • Widget Type: Elige "Gauge"
  • Unit: "°C"
  • Min Value: 0
  • Max Value: 50
  • Color: Selecciona un color (por ejemplo, rojo para temperatura)

Para Humedad:

  • Name: "Humedad"
  • Field: Selecciona "HUMIDITY"
  • Widget Type: Elige "Text" o "Number"
  • Unit: "%"
  • Color: Selecciona un color (por ejemplo, azul para humedad)

Paso 8: Crear Chart Widgets

Los chart widgets muestran la evolución histórica de tus datos. Crearemos gráficas para temperatura y humedad.

Gráfica de Temperatura

  1. Haz clic en Add Widget.

  2. Selecciona Chart como tipo de widget.

  3. En la pestaña Basic, configura:

    • Name: "Gráfica de Temperatura"

  4. En la pestaña Data, configura:

    • Field: Selecciona "TEMPERATURE"
    • Chart Type (kind): Elige "Line Chart" (gráfica de líneas)
    • Color: Selecciona un color que coincida con el widget de valor

  5. Ve a la pestaña Appearance y activa las siguientes opciones:

    • Show button to export current view: Permite exportar la vista actual del gráfico
    • Allow timeframe selection on dashboard: Permite a los usuarios seleccionar el rango de tiempo directamente desde el dashboard

  6. Haz clic en Save para guardar el gráfico.

dashboard5

Gráfica de Humedad

Repite el proceso anterior para crear una gráfica de humedad, cambiando solo el Name en la pestaña Basic a "Gráfica de Humedad" y el Field en la pestaña Data a "HUMIDITY". El resto de la configuración permanece igual.

dashboard6

Paso 9: Organizar el Dashboard

Una vez que tengas todos los widgets creados, puedes organizarlos arrastrándolos y redimensionándolos en el editor:

  • Coloca los widgets de valor (gauge y número) en la parte superior.
  • Coloca las gráficas debajo, una al lado de la otra o en filas separadas.
  • Ajusta el tamaño de cada widget según tu preferencia.

dashboard7

Paso 10: Personalizar Estilos y Colores

Para un proyecto de sensor ambiental como el BME280, te recomiendo estos estilos:

  • Temperatura: Usa tonos cálidos (rojo, naranja) para representar calor.
  • Humedad: Usa tonos fríos (azul, verde azulado) para representar agua/humedad.
  • Presión: Usa tonos neutros (gris, morado) para diferenciarlo de los otros valores.

Estos colores ayudan a identificar rápidamente qué tipo de dato estás viendo.

Conclusión

Has aprendido a crear un dashboard completo en Datacake con widgets de valor y gráficas. Ahora puedes visualizar tus datos del sensor BME280 en tiempo real y observar las tendencias históricas de temperatura y humedad.

El proceso es simple pero poderoso: Datacake recibe tus datos JSON, los decodifica automáticamente y los convierte en variables que puedes visualizar de múltiples formas. Con los widgets de valor obtienes información instantánea, y con las gráficas puedes analizar patrones y tendencias a lo largo del tiempo.

Mensaje de Continuación

En los próximos artículos exploraremos temas más avanzados como alertas automáticas, widgets personalizados y cómo integrar múltiples sensores en un solo dashboard. También aprenderás a exportar tus datos y a crear visualizaciones más complejas.

¡Sigue experimentando con diferentes tipos de widgets y configuraciones para encontrar la visualización que mejor se adapte a tu proyecto!

Profile picture

Written by Marco Ciau Software Engineer focused on Backend Development, Embedded Systems, and Industrial IoT. I build scalable systems that connect hardware and software using modern web technologies and low-level programming.

Connect:💼 LinkedIn•💻 GitHub•📺 YouTube