Cada vez que conseguimos un nuevo cliente, Mario Bros gana una moneda

María Hernández

2 de agosto de 2019 · 13 min de lectura

Como cualquier startup, nos emocionamos cada vez que nuestras métricas crecen de forma positiva, y a veces incluso podemos emocionarnos más si ganamos una moneda de Mario cada vez que conseguimos un nuevo cliente... Probablemente te estarás preguntando cómo, ¿verdad?

Como una poderosa plataforma de monitoreo , inmediatamente decidimos usar Ubidots para comenzar a monitorear métricas en nuestros propios dashboards , pero lo que realmente queríamos era crear un sistema que pudiera notificar a todos los miembros de nuestro equipo cada vez que obtuviéramos un nuevo cliente para que nos emocionáramos y celebráramos.

Una de las primeras preguntas fue: ¿cómo podemos motivar a todo nuestro equipo a diario recibiendo notificaciones cuando conseguimos un nuevo cliente? Fue fácil responder a la pregunta; terminamos comprando sirenas de policía. Pero, en realidad, la parte difícil del proyecto fue descubrir cómo integrar sirenas de policía comunes y económicas en Ubidots. Una característica positiva de los miembros del equipo de Ubidots es que todos somos hackers a tiempo completo, lo que nos permitió desarrollar nuestra creatividad fácilmente.

Para integrar las sirenas, decidimos comprar dos placas de desarrollo ESP8266 personalizadas que nos permitieran gestionar un relé para controlar el estado de la luz de cada sirena. Además, queríamos notificar al equipo, pero el sonido de una sirena de policía podía resultar algo molesto, así que decidimos reproducir los sonidos de Mario Bros. para hacerlo más emocionante y menos intrusivo.

Al final el resultado que obtuvimos fue el siguiente:

El objetivo principal de esta publicación es compartir todos los detalles técnicos del proyecto con nuestra comunidad de Ubidots, para que puedan replicarlo y mantenerse informados en tiempo real sobre cualquier cosa que se pueda medir. (Si estás iniciando un canal de YouTube, este puede ser un proyecto ideal para ti ;))

¡Comencemos a hackear!

Paso a paso

Descripción general del proyecto
Configuración Ubidots
Programación
Alambrado
Resumen

Requisitos

(1) Cuenta Ubidots
(2) ESP8266 - Módulo de relé de 1 canal
(1) Módulo de sonido MP3 con tarjeta mini SD WTV020-SD-16P
(1) Altavoz metálico con cables - 8 ohmios 0,5 W
Cables eléctricos
(1) Luz policial giratoria - Verde
(1) Luz policial giratoria - roja

1. Descripción general del proyecto

Como mencionamos anteriormente, decidimos comprar dos sirenas de policía para recibir notificaciones cada vez que recibimos un nuevo cliente o cuando hay una pérdida de clientes, diferenciándolas por sus colores. Si se activa la sirena verde, significa que conseguimos un nuevo cliente. Si se activa la sirena roja, significa que perdimos un cliente.

Para controlar las sirenas según el estado de los clientes, integramos Ubidots en una Ubidots mediante una UbiFunction , una función que permite crear una API propia y acceder a datos, API y herramientas mediante HTTPS. Esta guía no explica cómo usar la UbiFunction ; si desea obtener más información, consulte esta guía .

Con las métricas de los clientes ya integradas en una cuenta Ubidots , procedimos a realizar algunas configuraciones en la plataforma para configurar algunas variables. Luego, tuvimos que establecer una suscripción a las variables a través de MQTT para activar el relé correspondiente, la sirena verde o la sirena roja, y aquí es donde surge la magia. Mario gana una moneda o pierde una vida... ¡Hay que ser realistas!

2. Configuración Ubidots

Las variables encargadas de informar el estado de los clientes se crearán automáticamente tras configurar UbiFunction . A modo de prueba, crearemos un nuevo dispositivo con las variables que deseamos gestionar.

Si quieres gestionar datos de tu canal de YouTube , Twitter , Instagram o, básicamente, supervisar cualquier métrica en tu trabajo, solo tienes que consultar la documentación de su API para consumirlos mediante UbiFunction . En este punto, podrás obtener las métricas para publicarlas directamente en tu Ubidots .

Sin más que añadir, veamos los detalles de cómo organizar un evento Ubidots para evitar falsos positivos. No queremos que nuestro equipo celebre en vano.

1) Ve a la sección " Dispositivo " de tu Ubidots y crea un nuevo dispositivo llamado " cliente ". Para crearlo, haz clic en el signo más azul en la esquina superior derecha de la pantalla. Luego, selecciona " en blanco " y asígnale el nombre definido.

2) Acceda al dispositivo creado previamente e incluya dos nuevas variables sin procesar . Para crearlas, vaya a la sección del dispositivo, haga clic en " Agregar variable > Sin procesar " y asígnele un nombre. En este proyecto, las variables se nombran con los siguientes nombres:

churn: variable encargada de recibir una bandera positiva (1) cada vez que un cliente se da de baja
new-client: variable encargada de recibir una bandera positiva (1) cada vez que obtenemos un nuevo cliente.

Con las variables ya recibiendo datos, es hora de manejar algunos trucos para evitar falsos positivos en caso de que nuestros dispositivos pierdan la conexión.

3) Los módulos instalados funcionan con MQTT como protocolo de comunicación. Si no lo conoce, le recomendamos consultar la documentación oficial .

Este protocolo tiene una característica especial llamada " Mensaje Retenido ". Básicamente, permite al intermediario conservar el último mensaje de un tema específico mediante la configuración del indicador de mensaje retenido. De esta manera, cada vez que un dispositivo se suscribe al tema, el intermediario devuelve automáticamente el último mensaje retenido.

Con base en esto, decidimos configurar un evento Ubidots para establecer las variables " churn " y " new-client " a 0 justo después de recibir la bandera positiva (1). Con esto, buscamos evitar un falso positivo en caso de que las sirenas pierdan la conexión a internet.

Imagine que la sirena verde se activara y, de repente, el módulo WiFi perdiera la conexión. ¿Qué podría estar pasando? Una vez que el módulo WiFi restablezca la conexión, la sirena también restablecerá la suscripción con la variable "new-client". Si el último valor fue positivo (1), la sirena se activaría automáticamente de nuevo cuando la notificación para ese cliente fuera antigua.

Para configurar un Ubidots , vaya a la pestaña " Datos > Eventos " en su Ubidots . Luego, cree un nuevo evento seleccionando " + Agregar evento ". En la configuración del evento, seleccione el dispositivo y la variable con la que desea configurar las condiciones de su evento. En nuestro caso, el dispositivo es " cliente " y las variables son " abandono " y " nuevo cliente ".

NOTA : Este evento debe crearse para ambas variables independientemente.

Con la variable ya seleccionada, asegúrese de que el disparador del evento tenga la siguiente configuración:

" new-client " (variable) - Valor -> es igual a - 1 durante 0 minutos.

Para configurar la acción, pulse la flecha derecha en la parte inferior derecha de la página. Seleccione " Establecer variable " como acción, elija la misma variable relacionada con el disparador y asigne " 0 " como valor.

Para finalizar, guarde los cambios presionando las flechas derechas.

Una vez creado exitosamente el evento, repita el mismo proceso para crear un segundo evento para la variable faltante.

Tras configurar los eventos, el comportamiento esperado es que, cada vez que la variable reciba la bandera positiva, un valor igual a 1 pasará automáticamente a 0. Para una mejor comprensión, consulte la imagen a continuación:

4. Como probablemente ya haya notado, las variables que informan sobre " clientes nuevos " y " pérdidas " simplemente actualizan un indicador positivo cada vez que Ubidots actualiza una de ellas. También queremos saber el total de clientes nuevos o perdidos. Para ello, debemos configurar una variable sintética que sume el total de indicadores recibidos en la variable durante un período definido.

Para crear la variable sintética, seleccione "+Añadir variable > Sintética " dentro del dispositivo " cliente ". A continuación, aplique la siguiente fórmula:

suma(x, rango_datos): Devuelve la suma de los dots en el rango_datos especificado.

Dónde:

X: es la variable deseada
Data_range: el período de tiempo deseado para devolver la suma.

La fórmula final para cada variable debe ser:

suma(“nuevo-cliente”, “1M”)
suma(“rotación”, “1M”)

Para finalizar con la creación de la variable, seleccione “aceptar” y asigne el nombre que desee.

En este punto podrás ver el total de nuevos clientes o bajas que ocurren durante un mes.

5. Ahora que tu Ubidots ya está configurada, es hora de ser creativo y crear un dashboard para mostrar todos tus datos en un solo lugar. Consulta esta guía para conocer todos los detalles sobre los diferentes widgets que puedes configurar en tu Ubidots .

3. Programación

3.1. Control de sirenas

El módulo encargado de controlar el estado de las sirenas es el relé ESP8266 + 1 canal. El código base para ambas sirenas será el mismo; el único cambio que notará está en la etiqueta de la variable. Debe asignar la etiqueta de la variable correspondiente con la que desea que el módulo ESP8266 establezca la conexión para activar la sirena correcta.

1. Para trabajar con la ESP8266 en el IDE de Arduino, deberá instalarla mediante el Administrador de Placas Arduino preconfigurado. Si no está familiarizado con la adición de una placa con el IDE de Arduino, consulte este artículo para obtener más información .

2. Con la plataforma ESP8266 instalada, seleccione el dispositivo ESP8266 con el que está trabajando. En este caso, se trata de un " Módulo ESP8266 genérico ". Para seleccionar su placa desde el IDE de Arduino, seleccione Herramientas > Placa "Módulo ESP8266 genérico" .

3. Descargue e instale la Ubidots MQTTESP8266 . Para obtener una explicación detallada sobre cómo instalar bibliotecas con el IDE de Arduino, consulte esta guía .

4. Ahora, con los siguientes códigos de muestra, podrá suscribirse a las variables que informan los valores.

Una vez que hayas insertado el código, deberás asignar tu token Ubidots , SSID (nombre de WiFi) y contraseña únicos de la red disponible. Si tus variables y dispositivo utilizan una etiqueta diferente a la utilizada en esta guía, asegúrate de asignar las correctas.

Código de muestra para la Sirena Roja:

/**************************************** * Incluir bibliotecas ****************************************/ #include "UbidotsESPMQTT.h" /************************************* * Definir constantes ****************************************/ #define TOKEN "***" // Su TOKEN Ubidots #define WIFINAME "***" // Su SSID #define WIFIPASS "***" // Su contraseña Wifi #define DEVICE_LABEL "customers" // Coloque aquí la etiqueta de su dispositivo Ubidots #define VARIABLE_LABEL "churn" // Coloque aquí la etiqueta de su variable de Ubidots Ubidots client(TOKEN); byte relayOn[] = {0xA0, 0x01, 0x01, 0xA2}; //0xA00101A2 byte relayOff[] = {0xA0, 0x01, 0x00, 0xA1}; //0xA00100A1 /****************************************** * Funciones auxiliares ****************************************/ void callback(char* topic, byte* payload, unsigned int length) { if ((char)payload[0]=='1') // Retransmisión activada { Serial.write(relayOn, sizeof(relayOn)); delay(10000); Serial.write(relayOff, sizeof(relayOff)); } } /**************************************** * Funciones principales ****************************************/ void setup() { // coloca aquí tu código de configuración, para ejecutar una vez: client.ubidotsSetBroker("business.api.ubidots.com"); // Establece el broker correctamente para la cuenta empresarial client.setDebug(false); // Pasa un valor booleano verdadero o falso para activar los mensajes de depuración client.wifiConnection(WIFINAME, WIFIPASS); client.begin(callback);ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); //Insertar la fuente de datos y las etiquetas de las variables Serial.begin(9600); } void loop() { if(!client.connected()) { client.reconnect();ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); //Insertar la fuente de datos y las etiquetas de las variables } client.loop(); }

Código de muestra para la Sirena Verde:

/**************************************** * Incluir bibliotecas ****************************************/ #include "UbidotsESPMQTT.h" /************************************* * Definir constantes ****************************************/ #define TOKEN "***" // Su TOKEN Ubidots #define WIFINAME "***" // Su SSID #define WIFIPASS "***" // Su contraseña Wifi #define DEVICE_LABEL "customers" // Coloque aquí la etiqueta de su dispositivo Ubidots #define VARIABLE_LABEL "new-customer" // Coloque aquí la etiqueta de su variable de Ubidots Ubidots client(TOKEN); byte relayOn[] = {0xA0, 0x01, 0x01, 0xA2}; //0xA00101A2 byte relayOff[] = {0xA0, 0x01, 0x00, 0xA1}; //0xA00100A1 /****************************************** * Funciones auxiliares ****************************************/ void callback(char* topic, byte* payload, unsigned int length) { if ((char)payload[0]=='1') // Retransmisión activada { Serial.write(relayOn, sizeof(relayOn)); delay(10000); Serial.write(relayOff, sizeof(relayOff)); } } /**************************************** * Funciones principales ****************************************/ void setup() { // coloca aquí tu código de configuración, para ejecutar una vez: client.ubidotsSetBroker("business.api.ubidots.com"); // Establece el broker correctamente para la cuenta empresarial client.setDebug(false); // Pasa un valor booleano verdadero o falso para activar los mensajes de depuración client.wifiConnection(WIFINAME, WIFIPASS); client.begin(callback);ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); //Insertar la fuente de datos y las etiquetas de las variables Serial.begin(9600); } void loop() { if(!client.connected()) { client.reconnect();ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); //Insertar la fuente de datos y las etiquetas de las variables } client.loop(); }

5. Verifique su código en el IDE de Arduino. Para ello, en la esquina superior izquierda del IDE de Arduino verá el icono de la " Marca de verificación "; selecciónelo para verificar su código.

6. Cargue el código en su módulo genérico ESP8266 . Para ello, seleccione el de la flecha derecha junto al icono de la marca de verificación.

7. Para verificar la conectividad del dispositivo y los datos enviados, abra el monitor serial seleccionando el ícono de "lupa" en la esquina superior derecha del IDE de Arduino para ver los logs .

3.2. Control de sonidos

El módulo encargado de controlar el MP3 es el WEMOS D1. Básicamente, el código establece la suscripción con las mismas variables configuradas para cada sirena, pero esta también reproduciría los sonidos de Mario Bros. Recuerda:

Si se enciende la sirena verde, el altavoz reproducirá el sonido de Mario Bros ganando una moneda: Ubidots consigue un nuevo cliente.
Si se enciende la sirena roja, el altavoz reproducirá el sonido de Mario Bros perdiendo una vida: Ubidots pierde un nuevo cliente.

1. Con la plataforma ESP8266 instalada, seleccione el dispositivo ESP8266 con el que está trabajando. En este caso, se trata de un " WeMos D1 ". Para seleccionar su placa desde el IDE de Arduino, seleccione Herramientas > Placa "WeMos D1" .

2. Si no lo hiciste en el paso anterior, descarga e instala la Ubidots MQTTESP8266 . Para obtener una explicación detallada sobre cómo instalar bibliotecas usando el IDE de Arduino, consulta esta guía .

3. Inserta el siguiente código en tu IDE de Arduino. Una vez pegado, asegúrate de asignar tu token Ubidots , SSID (nombre de WiFi) y contraseña únicos de la red disponible.

/**************************************** * Incluir bibliotecas ****************************************/ #include "UbidotsESPMQTT.h" /*************************************** * Definir constantes ****************************************/ #define TOKEN "***" // Su TOKEN Ubidots #define WIFINAME "***" // Su SSID #define WIFIPASS "***" // Su Wifi Pass #define DEVICE_LABEL "customers" // Coloque aquí la etiqueta de su dispositivo Ubidots #define RED_SIREN "churn" // Coloque aquí la etiqueta de su variable Ubidots #define GREEN_SIREN "new-customer" // Coloque aquí la etiqueta de su variable Ubidots #define RESET D5 #define NEXT D6 #define PLAY D7 Ubidots client(TOKEN); /**************************************** * Funciones auxiliares ****************************************/ void activate(int pin) { digitalWrite(pin, LOW); delay(500); digitalWrite(pin, HIGH); } void callback(char* topic, byte* payload, unsigned int length) { char val = payload[0]; //Serial.println(topic); if (strstr(topic,"new-customer") && val == '1') { activate(RESET); activate(PLAY); delay(2000); } else if (strstr(topic,"churn") && val == '1') { activate(RESET); activate(NEXT); delay(2000); } } /**************************************** * Funciones principales ****************************************/ void setup() { pinMode(RESET, OUTPUT); pinMode(NEXT, OUTPUT); pinMode(PLAY, OUTPUT); digitalWrite(RESET, HIGH); digitalWrite(NEXT, HIGH); digitalWrite(PLAY, HIGH); // coloque aquí su código de configuración, para ejecutarlo una vez:ubidotsSetBroker("industrial.api.ubidotsubidots"); // Establece el broker correctamente para la cuenta comercial client.setDebug(false); // Pase un valor booleano verdadero o falso para activar los mensajes de depuración client.wifiConnection(WIFINAME, WIFIPASS); client.begin(callback);ubidotsSubscribe(DEVICE_LABEL, GREEN_SIREN); // Inserte la fuente de datos y las etiquetas de las variablesubidotsSubscribe(DEVICE_LABEL, RED_SIREN); Serial.begin(9600); } void loop() { if(!client.connected()) { client.reconnect(); client.ubidotsSubscribe(DEVICE_LABEL, GREEN_SIREN); //Insertar la fuente de datos y las etiquetas de las variables cliente.ubidotsSubscribe(DEVICE_LABEL, RED_SIREN); } cliente.loop(); }

4. Verifique su código en el IDE de Arduino. Para ello, en la esquina superior izquierda del IDE de Arduino verá el icono de la " Marca de verificación "; selecciónelo para verificar su código.

5. Sube el código a tu "WeMos D1" . Para ello, selecciona el de la flecha derecha junto al icono de la marca de verificación.

6. Si no está familiarizado con el módulo MP3, le recomendamos que consulte esta guía , una de las mejores para comenzar.

Según nuestra experiencia, asegúrese de estar utilizando el formato correcto para la tarjeta SD y también para las canciones que se reproducirán.

Tamaño Tarjeta Micro SD: 1 o 2 GB como máximo.
Formato Micro SD: FAT - Le recomendamos que formatee su tarjeta SD utilizando SD Card Formatter .
Formato de canciones: AD4 - Le recomendamos que utilice AD4Converter .

Para ahorrarte unos minutos de trabajo, en esta carpeta encontrarás los sonidos de Mario Bros utilizados para el proyecto.

Basándose en la lógica utilizada en el código, la primera canción identificada en la tarjeta Micro SD como "0000" reproducirá el sonido de Mario Bros cuando esté ganando una moneda, y la segunda identificada como "0001" reproducirá el sonido de Mario Bros cuando pierda una vida.

4. Cableado

NOTA IMPORTANTE: Antes de establecer todas las conexiones, asegúrese de que las placas ya tengan cargado el código de muestra. Además, asegúrese de que funcionen correctamente con su Ubidots .

Para facilitar la comprensión del cableado, dividí este proceso en diferentes pasos. Siga el diagrama y la tabla de cableado que se muestran a continuación para establecer las conexiones correctas.

Control del módulo MP3

Para integrar el módulo de relé ESP8266 + 1 canal con las sirenas, tuvimos que realizar algunas modificaciones en el cableado original de cada sirena. Básicamente, eliminamos el interruptor manual de cada sirena para reemplazarlo con el módulo de relé.

Para poder alimentar cada módulo de relé de 1 canal ESP8266 +, utilizamos un cargador de celular para regular el voltaje de entrada de 110V a 5V.

Consulte el diagrama a continuación para tener una referencia de cómo establecer la modificación al cableado original de las sirenas, también de cómo encender los módulos ESP8266.

Control del módulo MP3

El módulo MP3 tiene diferentes configuraciones . En función de los requisitos de este proyecto, decidimos utilizar el circuito de aplicación en modo MP3.

Consulte la tabla de cableado y el diagrama a continuación para establecer las configuraciones adecuadas:

Todo el sistema

Para finalizar, encendemos la placa WEMOS con la salida de 5V del regulador utilizado:

Con las conexiones de cables correctas ya establecidas, coloque todos los componentes dentro de las sirenas y proceda a su instalación. En nuestro caso, decidimos colocarlas en la pared principal de nuestra oficina.

5. Resumen

Disfrutamos mucho el tiempo de hackeo para reconstruir la funcionalidad de las sirenas de policía para notificar a todo el equipo sobre el estado de los clientes en tiempo real, pero de una manera divertida usando sonidos de Mario Bros.

Sabemos que este es un proyecto interno que podría no ser menos útil para todos, pero lo encontramos relevante para todos aquellos que están iniciando sus canales de YouTube,logs o incluso en una empresa y quieren rastrear métricas de forma amigable y en tiempo real cada vez que obtienen un nuevo suscriptor, visitante o cliente.

Si te apasiona crear como nosotros y decides replicar este proyecto, compártelo con total libertad, pero no olvides etiquetarnos como @ubidots ubidots nuestras redes sociales ( Facebook , LinkedIn , Twitter , Instagram ). Será un placer compartirlo con Ubidots .

Más proyectos IoT útiles: