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

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 potente plataforma de monitorización, inmediatamente decidimos utilizar Ubidots para empezar a monitorizar métricas en nuestros propios cuadros de mando, pero lo que realmente queríamos era crear un sistema que pudiera notificar a todos los miembros de nuestro equipo cada vez que consiguiéramos un nuevo cliente para que nos emocionáramos y lo celebráramos.

Una de las primeras preguntas fue: ¿cómo podemos motivar diariamente a todo nuestro equipo recibiendo una notificación cuando conseguimos un nuevo cliente? Era una pregunta fácil de responder: acabamos comprando unas sirenas de policía. Pero en realidad, la parte difícil del proyecto fue averiguar cómo integrar sirenas de policía comunes y baratas en Ubidots. Una característica positiva de los miembros del equipo de Ubidots es que todos somos hackers a tiempo completo, así que pudimos ser creativos fácilmente en este asunto.

Para integrar las sirenas decidimos comprar dos placas de desarrollo ESP8266 personalizadas que nos permitieran manejar un relé para controlar el estado de la luz de cada sirena. Además, queríamos avisar 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 este post es compartir todos los detalles técnicos del proyecto con nuestra comunidad de Ubidots, para que podáis replicarlo y estar informados en tiempo real de todo lo que se pueda medir. (Si estás empezando un canal de YouTube este puede ser un proyecto adecuado para ti ;) )

¡Empecemos a hackear!

Paso a paso

Resumen del proyecto
Configuración de Ubidots
Programación
Cableado
Resumen

Requisitos

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

1. Resumen del proyecto

Como ya hemos comentado, decidimos comprar dos sirenas de policía para que nos avisaran cada vez que consiguiéramos un nuevo cliente o cuando hubiera una baja, diferenciando las sirenas por sus colores. Si se enciende la sirena verde, significa que tenemos un nuevo cliente. Si se enciende la sirena roja, significa que hemos perdido un cliente.

Para poder controlar las sirenas en función del estado de los clientes, integramos las métricas principales de Ubidots en una cuenta de Ubidots utilizando una UbiFunction, una función que te permite crear tu propio API y obtener acceso a datos, API y herramientas mediante HTTPS. Esta guía no cubrirá cómo manejar la UbiFunction, en caso de que estés interesado en obtener más detalles, echa un vistazo a esta guía.

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

2. Configuración de Ubidots

Las variables encargadas de informar del estado de los clientes se van a crear automáticamente tras configurar la UbiFunción. Sólo a modo de prueba, vamos a crear un nuevo dispositivo con las variables deseadas a manejar.

Si quieres manejar los datos de tu canal de YouTube, Twitter, Instagram, o básicamente, echar un ojo a cualquier métrica en el trabajo, todo lo que tienes que hacer es consultar su documentación API para consumirlos usando la UbiFunción. En este punto, podrás obtener las métricas para publicarlas directamente en tu cuenta de Ubidots.

Sin nada más que decir, entremos en detalles sobre cómo configurar un evento Ubidots para evitar resultados falsos positivos. Realmente no queremos que nuestro equipo celebre en vano.

1) Vaya a la sección "Dispositivo" de su cuenta Ubidots y cree un nuevo dispositivo llamado"cliente". Para crear un nuevo dispositivo haga clic en el signo más azul situado en la parte superior derecha de la pantalla. A continuación, seleccione dispositivos "en blanco" y asigne el nombre definido.

2) Entre en el dispositivo creado anteriormente e incluya 2 nuevas variables raw. Para crear las variables, dirígete a la sección del dispositivo, haz clic en "Añadir Variable > Raw" y asigna un nombre a la variable a crear. Para este proyecto, nombramos las variables con:

churn: variable encargada de recibir un flag positivo (1) cada vez que un cliente churn
nuevo-cliente: variable encargada de recibir un flag positivo (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 perdieran la conexión.

3) Los módulos instalados funcionan bajo MQTT como protocolo de comunicación. Si no estás familiarizado con él, te recomendamos encarecidamente que eches un vistazo a la documentación oficial.

Este protocolo tiene una característica especial que se denomina"Mensaje retenido". Básicamente, permite al broker conservar el último mensaje de un tema específico mediante el establecimiento de la bandera de mensaje retenido, por lo que cada vez que un dispositivo establece una suscripción con el tema, el broker devuelve automáticamente el último mensaje retenido.

Basándonos en esto, decidimos configurar un Evento Ubidots para poner la variable"churn" y"new-client" a 0 justo después de recibir la bandera positiva (1). Lo que buscamos con esto es evitar un falso positivo en caso de que las sirenas perdieran la conexión a internet.

Imagina que se activa la sirena verde y de repente el módulo WiFi pierde la conexión. ¿Qué podría estar pasando? Una vez que el módulo WiFi restablezca su conexión, la sirena restablecerá la suscripción también con la variable "nuevo-cliente", y si el último valor fue la bandera positiva - 1, automáticamente se volvería a encender la sirena cuando la notificación para ese cliente fuera una antigua.

Para configurar un evento de Ubidots, vaya a la pestaña "Datos > Eventos" de su cuenta de Ubidots. A continuación, cree un nuevo evento seleccionando"+ Añadir evento". En la configuración del evento, seleccione el Dispositivo y la Variable con la que desea configurar las condiciones para su Evento, en nuestro caso el dispositivo es "cliente" y las variables son "churn" y "nuevo-cliente".

NOTA: Este evento debe crearse para ambas variables de forma independiente.

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

"nuevo-cliente" (variable) - Valor -> es igual a - 1 para 0 minutos.

Para proceder a la configuración de la acción, pulse la flecha derecha situada en la parte inferior derecha de la página. Seleccione"Establecer variable" como acción, elija la misma variable relacionada con el disparador y asígnele"0" como valor.

Para terminar, guarde los cambios pulsando las flechas de la derecha.

Una vez creado el evento con éxito, repita el mismo proceso para crear un segundo evento para la variable que falta.

Después de configurar los eventos, el comportamiento esperado es que cada vez que la variable reciba la bandera positiva un valor igual a 1 pase a 0 automáticamente. Para una mejor comprensión consulte la siguiente imagen:

4. Como ya habrás notado, las variables que reportan los"new-clients" y"churns" solo actualizan una bandera positiva cada vez que Ubidots core actualiza una de las variables, también queremos saber el total de nuevos clientes o churns que tenemos. Para ello, tenemos que configurar una Variable Sintética que sumará el total de banderas recibidas en la variable durante un periodo de tiempo definido.

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

suma(x, rango_datos) : Devuelve la suma de los puntos del rango_datos especificado.

Dónde:

X: es la variable deseada
Rango_datos: el periodo de tiempo deseado para devolver la suma.

La fórmula final para cada variable debe ser:

sum("nuevo-cliente", "1M")
sum("churn", "1M")

Para terminar con la creación de la variable, selecciona "aceptar" y asígnale el nombre que quieras.

En este punto, podrá ver el total de nuevos clientes o bajas que se producen durante un mes.

5. Ahora que ya tienes configurada tu cuenta de Ubidots, es el momento de ser creativo y construir un dashboard personalizado 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 cuenta de Ubidots.

3. Programación

3.1. Control de sirenas

El módulo encargado de manejar el control de estado de las sirenas es el relé ESP8266 + 1 Canal. El código base para ambas sirenas va a ser el mismo, el único cambio que notará es en la etiqueta de la variable. Deberá asignar la etiqueta de la variable respectiva con la que desea que el módulo ESP8266 establezca la conexión para activar la sirena correcta.

1. Para poder trabajar con la plataforma ESP8266 en el IDE Arduino, tendrá que instalar la plataforma ESP8266 utilizando el Administrador de placas Arduino preconfigurado. Si no está familiarizado con la adición de una placa con el IDE Arduino, consulte este artículo para obtener orientación adicional.

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

3. Descargue e instale el UbidotsMQTTESP8266 biblioteca. Para una explicación detallada de cómo instalar bibliotecas utilizando el IDE de Arduino, consulte esta guía.

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

Una vez que haya insertado el código, tendrá que asignar su Ubidots único TOKEN, SSID (Nombre WiFi) y Contraseña de la red disponible. En caso de que tus variables y dispositivo manejen una etiqueta diferente a las utilizadas en esta guía, asegúrate de asignar las correctas.

Ejemplo de código para la Sirena Roja:

/****************************************
 * Include Libraries
 ****************************************/
#include "UbidotsESPMQTT.h"

/****************************************
 * Define Constants
 ****************************************/
#define TOKEN "***" // Your Ubidots TOKEN
#define WIFINAME "***" //Your SSID
#define WIFIPASS "***" // Your Wifi Pass
#define DEVICE_LABEL "customers"  // Put here your Ubidots device label
#define VARIABLE_LABEL "churn"  // Put here your Ubidots variable label 

Ubidots client(TOKEN);

byte relayOn[] = {0xA0, 0x01, 0x01, 0xA2}; //0xA00101A2
byte relayOff[] = {0xA0, 0x01, 0x00, 0xA1}; //0xA00100A1

/****************************************
 * Auxiliar Functions
 ****************************************/

void callback(char* topic, byte* payload, unsigned int length) 
{
  if ((char)payload[0]=='1') // Relay on
  { 
    Serial.write(relayOn, sizeof(relayOn));
    delay(10000);
    Serial.write(relayOff, sizeof(relayOff));
  }
}

/****************************************
 * Main Functions
 ****************************************/

void setup() {
  // put your setup code here, to run once:
  client.ubidotsSetBroker("business.api.ubidots.com"); // Sets the broker properly for the business account
  client.setDebug(false); // Pass a true or false bool value to activate debug messages
  client.wifiConnection(WIFINAME, WIFIPASS);
  client.begin(callback);
  client.ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); //Insert the dataSource and Variable's Labels
  Serial.begin(9600);
  }

void loop()
{
  if(!client.connected())
  {
    client.reconnect();
    client.ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); //Insert the dataSource and Variable's Labels
  }
  client.loop();
}

Ejemplo de código para la Sirena Verde:

/****************************************
 * Include Libraries
 ****************************************/
#include "UbidotsESPMQTT.h"

/****************************************
 * Define Constants
 ****************************************/
#define TOKEN "***" // Your Ubidots TOKEN
#define WIFINAME "***" //Your SSID
#define WIFIPASS "***" // Your Wifi Pass
#define DEVICE_LABEL "customers"  // Put here your Ubidots device label
#define VARIABLE_LABEL "new-customer"  // Put here your Ubidots variable label 

Ubidots client(TOKEN);

byte relayOn[] = {0xA0, 0x01, 0x01, 0xA2}; //0xA00101A2
byte relayOff[] = {0xA0, 0x01, 0x00, 0xA1}; //0xA00100A1

/****************************************
 * Auxiliar Functions
 ****************************************/

void callback(char* topic, byte* payload, unsigned int length) 
{
  if ((char)payload[0]=='1') // Relay on
  { 
    Serial.write(relayOn, sizeof(relayOn));
    delay(10000);
    Serial.write(relayOff, sizeof(relayOff));
  }
}

/****************************************
 * Main Functions
 ****************************************/

void setup() {
  // put your setup code here, to run once:
  client.ubidotsSetBroker("business.api.ubidots.com"); // Sets the broker properly for the business account
  client.setDebug(false); // Pass a true or false bool value to activate debug messages
  client.wifiConnection(WIFINAME, WIFIPASS);
  client.begin(callback);
  client.ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); //Insert the dataSource and Variable's Labels
  Serial.begin(9600);
  }

void loop()
{
  if(!client.connected())
  {
    client.reconnect();
    client.ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); //Insert the dataSource and Variable's Labels
  }
  client.loop();
}

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

6. Cargue el código en su "Módulo ESP8266 genérico". Para ello, elija el iconode la "flecha hacia la derecha" situado junto al icono de la "marca de verificación".

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

3.2. Control de sonidos

El módulo encargado de manejar el control del MP3 es el WEMOS D1. Básicamente, el código establece la suscripción con las mismas variables configuradas con cada sirena pero esto 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, estamos trabajando con un "WeMos D1". Para seleccionar su placa desde el IDE Arduino, seleccione Herramientas > Placa "WeMos D1".

2. En caso de que no lo hayas hecho en el paso anterior, descarga e instala la librería UbidotsMQTTESP8266. Para una explicación detallada de cómo instalar librerías usando el IDE de Arduino, consulta esta guía.

3. Coloca el siguiente código en tu IDE Arduino. Una vez pegado el código, asegúrate de asignar tu Ubidots único TOKEN, SSID (Nombre WiFi) y Contraseña de la red disponible.

/****************************************
 * Include Libraries
 ****************************************/
#include "UbidotsESPMQTT.h"

/****************************************
 * Define Constants
 ****************************************/
#define TOKEN "***" // Your Ubidots TOKEN
#define WIFINAME "***" //Your SSID
#define WIFIPASS "***" // Your Wifi Pass
#define DEVICE_LABEL "customers"  // Put here your Ubidots device label
#define RED_SIREN "churn"  // Put here your Ubidots variable label
#define GREEN_SIREN "new-customer"  // Put here your Ubidots variable label 

#define RESET D5
#define NEXT D6
#define PLAY D7

Ubidots client(TOKEN);

/****************************************
 * Auxiliar Functions
 ****************************************/
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);
  }
}

/****************************************
 * Main Functions
 ****************************************/

void setup() {

  pinMode(RESET, OUTPUT);  
  pinMode(NEXT, OUTPUT);
  pinMode(PLAY, OUTPUT);

  digitalWrite(RESET, HIGH);
  digitalWrite(NEXT, HIGH);
  digitalWrite(PLAY, HIGH);
  
  // put your setup code here, to run once:
  client.ubidotsSetBroker("industrial.api.ubidots.com"); // Sets the broker properly for the business account
  client.setDebug(false); // Pass a true or false bool value to activate debug messages
  client.wifiConnection(WIFINAME, WIFIPASS);
  client.begin(callback);
  client.ubidotsSubscribe(DEVICE_LABEL, GREEN_SIREN); //Insert the dataSource and Variable's Labels
  client.ubidotsSubscribe(DEVICE_LABEL, RED_SIREN);
  Serial.begin(9600);
  }

void loop()
{
  if(!client.connected())
  {
    client.reconnect();
    client.ubidotsSubscribe(DEVICE_LABEL, GREEN_SIREN); //Insert the dataSource and Variable's Labels
    client.ubidotsSubscribe(DEVICE_LABEL, RED_SIREN);
  }
  client.loop();
}

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

5. Cargue el código en su "WeMos D1". Para ello, selecciona el iconode la "flecha hacia la derecha" situado junto al icono de la "marca de verificación".

6. Si no estás familiarizado con el módulo MP3, te recomendamos que consultes esta guía, una de las mejores para empezar.

Según nuestra experiencia, asegúrate de que estás utilizando el formato adecuado para la SD y también para las canciones que se van a reproducir.

Tamaño de la 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 las 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.

Según 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 gane 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 en conjunto, asegúrate de que las placas tienen el código de ejemplo ya cargado. Además, asegúrate de que funcionan correctamente con tu cuenta de Ubidots.

Para que el cableado sea fácil de entender, he dividido este proceso en diferentes pasos. Sigue el diagrama y la tabla de cableado que se muestran a continuación para establecer las conexiones adecuadas.

Control del módulo MP3

Para integrar el módulo de relé ESP8266 + 1 canal con las sirenas hemos tenido que hacer algunas modificaciones en el cableado original de cada sirena. Básicamente, hemos eliminado el interruptor manual de cada sirena para sustituirlo por el módulo de relés.

Para poder alimentar cada módulo de relé ESP8266 + 1 canal, utilizamos un cargador de móvil para regular la tensión de entrada de 110V a 5V.

Por favor, consulte el siguiente diagrama para tener una referencia de cómo establecer la modificación del cableado original de las sirenas, también sobre cómo alimentar los módulos ESP8266.

Control del módulo MP3

El módulo MP3 tiene diferentes configuraciones. Basándonos en los requisitos necesarios para este proyecto, decidimos utilizar el "circuito de aplicación del modo MP3".

Consulte la tabla y el diagrama de cableado siguientes para establecer las configuraciones adecuadas:

Todo el sistema

Para terminar, alimenta la placa WEMOS con la salida de 5V del regulador utilizado:

Con las conexiones de cables adecuadas ya establecidas, coloque todos los componentes en el interior 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 reconstruyendo 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 forma divertida usando sonidos de Mario Bros.

Sabemos que se trata de un proyecto interno que podría no ser tan útil para todo el mundo, pero nos parece relevante para todos aquellos que están empezando sus canales de YouTube, blogs o incluso en una empresa y quieren realizar un seguimiento de las métricas de una manera amigable y en tiempo real cada vez que se consigue un nuevo suscriptor, visitante o un cliente.

Si eres un maker apasionado como nosotros y decides reproducir este proyecto, siéntete totalmente libre de compartirlo, pero no olvides etiquetarnos en @ubidots a través de nuestras redes sociales(facebook, linkedin, twitter, instagram). Será un placer para nosotros compartirlo con la Comunidad de Ubidots.

Más proyectos IoT útiles: