A cada novo cliente, o Mario Bros ganha uma moeda

María Hernández

02 de agosto de 2019 · 13 minutos de leitura

Como qualquer startup, ficamos animados sempre que nossas métricas crescem de forma positiva, e às vezes ficamos ainda mais animados se ganharmos uma moeda do Mario cada vez que conquistamos um novo cliente... Provavelmente você deve estar se perguntando como, certo?

Como uma plataforma de monitoramento poderosa , decidimos imediatamente usar Ubidots para começar a monitorar as métricas em nossos próprios dashboards , mas o que realmente queríamos era criar um sistema que pudesse notificar todos os membros da nossa equipe sempre que conquistássemos um novo cliente, para que pudéssemos ficar animados e comemorar.

Uma das primeiras perguntas foi: como podemos motivar toda a nossa equipe diariamente, sendo notificados sempre que conseguirmos um novo cliente? A resposta foi fácil: acabamos comprando algumas sirenes de polícia. Mas, na verdade, a parte mais difícil do projeto foi descobrir como integrar sirenes de polícia comuns e baratas ao Ubidots. Uma característica positiva dos membros da equipe Ubidots é que todos nós somos hackers em tempo integral, então conseguimos ser criativos com facilidade nesse sentido.

Para integrar as sirenes, decidimos comprar duas placas de desenvolvimento ESP8266 personalizadas que nos permitiriam controlar um relé para determinar o estado da luz de cada sirene. Além disso, queríamos alertar a equipe, mas o som de uma sirene policial poderia ser um pouco irritante, então decidimos reproduzir os sons do Mario Bros para tornar a experiência mais interessante e menos intrusiva.

No final, o resultado obtido foi o seguinte:

O principal objetivo desta publicação é compartilhar todos os detalhes técnicos do projeto com a nossa comunidade Ubidots, para que vocês possam replicá-lo e se manterem informados em tempo real sobre tudo o que pode ser medido. (Se você está começando um canal no YouTube, este pode ser um projeto adequado para você ;) )

Vamos começar a hackear!

Passo a passo

Visão geral do projeto
Configuração Ubidots
Programação
Fiação
Resumo

Requisitos

(1) Conta Ubidots
(2) ESP8266 - Módulo de relé de 1 canal
(1) Módulo de som MP3 para cartão Mini SD WTV020-SD-16P
(1) Alto-falante metálico com fios - 8 ohms 0,5 W
Cabos elétricos
(1) Luz policial giratória - Verde
(1) Luz policial giratória - Vermelha

1. Visão geral do projeto

Como já mencionamos, decidimos comprar duas sirenes de polícia para sermos notificados sempre que conquistarmos um novo cliente ou quando houver uma perda de cliente, diferenciando as sirenes por suas cores. Se a sirene verde ligar, significa que conquistamos um novo cliente. Se a sirene vermelha ligar, significa que perdemos um cliente.

Para poder controlar as sirenes com base no status dos clientes, integramos Ubidots a uma Ubidots usando uma UbiFunction , um recurso que permite criar sua própria API e obter acesso a dados, APIs e ferramentas usando HTTPS. Este guia não abordará como lidar com a UbiFunction ; caso tenha interesse em obter mais detalhes, consulte este guia .

Com as métricas dos clientes já integradas a uma conta Ubidots , procedemos a algumas configurações na plataforma para definir algumas variáveis. Em seguida, tivemos que estabelecer uma assinatura para as variáveis via MQTT para acionar o respectivo relé, a sirene verde ou vermelha, e é aqui que a mágica acontece. - Mario ganha uma moeda ou perde uma vida... Temos que ser realistas!

2. Configuração Ubidots

As variáveis responsáveis por reportar o status dos clientes serão criadas automaticamente após a configuração da UbiFunction . Apenas para fins de teste, vamos criar um novo dispositivo com as variáveis desejadas para serem gerenciadas.

Se você deseja gerenciar dados do seu canal do YouTube , Twitter , Instagram ou, basicamente, monitorar qualquer métrica no trabalho, basta consultar a documentação da API para consumi-la usando a UbiFunction . A partir daí, você poderá obter as métricas para publicá-las diretamente na sua Ubidots .

Sem mais delongas, vamos aos detalhes de como configurar um evento Ubidots para evitar resultados falsos positivos. Não queremos que nossa equipe comemore em vão.

1) Acesse a seção “ Dispositivo ” da sua Ubidots e crie um novo dispositivo chamado “ cliente ”. Para criar um novo dispositivo, clique no sinal de mais azul localizado no canto superior direito da tela. Em seguida, selecione “ em branco ” e atribua o nome definido.

2) Acesse o dispositivo criado anteriormente e inclua 2 novas variáveis brutas . Para criar as variáveis, vá para a seção de dispositivos, clique em “ Adicionar Variável > Bruta ” e atribua um nome à variável a ser criada. Para este projeto, nomeamos as variáveis com:

churn: variável responsável por receber um sinal positivo (1) sempre que um cliente cancela o serviço
novo-cliente: variável responsável por receber um sinalizador positivo (1) sempre que obtemos um novo cliente.

Com as variáveis já recebendo dados, é hora de aplicar alguns truques para evitar falsos positivos caso nossos dispositivos percam a conexão.

3) Os módulos instalados funcionam com o protocolo de comunicação MQTT. Caso não esteja familiarizado com ele, recomendamos fortemente que consulte a documentação oficial .

Este protocolo possui uma característica especial chamada " Mensagem Retida ". Basicamente, ela permite que o broker mantenha a última mensagem de um tópico específico, definindo o sinalizador de mensagem retida. Assim, sempre que um dispositivo se inscreve no tópico, o broker retorna automaticamente a última mensagem retida.

Com base nisso, decidimos configurar um evento Ubidots para definir as variáveis " churn " e " new-client " como 0 logo após o recebimento do sinalizador positivo (1). O objetivo disso é evitar um falso positivo caso as sirenes percam a conexão com a internet.

Imagine que a sirene verde fosse ativada e, de repente, o módulo Wi-Fi perdesse a conexão. O que poderia estar acontecendo?... Assim que o módulo Wi-Fi restabelecer a conexão, a sirene também restabelecerá a assinatura com a variável "novo-cliente" e, se o último valor fosse o indicador positivo -1, ela ligaria automaticamente a sirene novamente quando a notificação para aquele cliente fosse antiga.

Para configurar um Ubidots , acesse a aba “ Dados > Eventos ” na sua Ubidots . Em seguida, crie um novo evento selecionando “ + Adicionar evento ”. Na configuração do evento, selecione o Dispositivo e a Variável com os quais deseja configurar as condições do seu evento. No nosso caso, o dispositivo é “ cliente ” e as variáveis são “ churn ” e “ novo-cliente ”.

NOTA : Este evento precisa ser criado para ambas as variáveis independentemente.

Com a variável já selecionada, certifique-se de que o gatilho do evento tenha a seguinte configuração:

" novo-cliente " (variável) - Valor -> é igual a - 1 por 0 minutos.

Para prosseguir com a configuração da ação, pressione a seta para a direita localizada no canto inferior direito da página. Selecione " Definir variável " como ação, escolha a mesma variável relacionada ao gatilho e atribua " 0 " como valor.

Para finalizar, salve as alterações pressionando as setas à direita.

Após a criação bem-sucedida do evento, repita o mesmo processo para criar um segundo evento para a variável ausente.

Após configurar os eventos, o comportamento esperado é que, sempre que a variável receber um sinal positivo (flag) e o valor atual (1) passar automaticamente para 0. Para melhor compreensão, consulte a imagem abaixo:

4. Como você provavelmente já percebeu, as variáveis que reportam os " novos clientes " e " cancelamentos " apenas atualizam um indicador positivo cada vez que Ubidots atualiza uma das variáveis. Também queremos saber o total de novos clientes ou cancelamentos que temos. Para isso, precisamos configurar uma variável sintética que somará o total de indicadores recebidos na variável durante um período de tempo definido.

Para criar a variável sintética, selecione "+Adicionar variável > Sintética " dentro do dispositivo " cliente ". Em seguida, aplique a seguinte fórmula:

sum(x, data_range): Retorna a soma dos dots no intervalo de dados especificado.

Onde:

X: é a variável desejada
Intervalo_de_dados: o período de tempo para o qual se deseja retornar a soma.

A fórmula final para cada variável deve ser:

soma(“novo-cliente”, “1M”)
soma(“churn”, “1M”)

Para finalizar a criação da variável, selecione “aceitar” e atribua o nome que desejar.

Neste ponto, você poderá ver o total de novos clientes ou cancelamentos ocorridos durante um mês.

5. Agora que sua Ubidots já está configurada, é hora de usar a criatividade e criar um dashboard para exibir todos os seus dados em um só lugar. Confira este guia para saber todos os detalhes sobre os diferentes widgets que você pode configurar na sua Ubidots .

3. Programação

3.1. Controle de sirenes

O módulo responsável pelo controle de status das sirenes é o ESP8266 + 1 relé de canal. O código base para ambas as sirenes será o mesmo; a única diferença que você notará será no rótulo da variável. Você deve atribuir o rótulo da variável correspondente à qual deseja que o módulo ESP8266 estabeleça a conexão para ativar a sirene correta.

1. Para poder trabalhar com a ESP8266 na IDE do Arduino, você precisará instalar a plataforma ESP8266 usando o Gerenciador de Placas do Arduino pré-configurado. Se você não estiver familiarizado com a adição de uma placa com a IDE do Arduino, consulte este artigo para obter mais orientações .

2. Com a plataforma ESP8266 instalada, selecione o dispositivo ESP8266 com o qual você está trabalhando. Neste caso, estamos trabalhando com um " Módulo ESP8266 Genérico ". Para selecionar sua placa na IDE do Arduino, selecione Ferramentas > Placa > "Módulo ESP8266 Genérico" .

3. Baixe e instale a Ubidots MQTTESP8266 . Para obter uma explicação detalhada de como instalar bibliotecas usando a IDE do Arduino, consulte este guia .

4. Agora, com os seguintes exemplos de código, você poderá se inscrever nas variáveis que estão relatando os valores.

Após inserir o código, você precisará atribuir seu TOKEN Ubidots exclusivo , o SSID (nome da rede Wi-Fi) e a senha da rede disponível. Caso suas variáveis e dispositivo estejam usando um nome diferente dos apresentados neste guia, certifique-se de atribuir os valores corretos.

Exemplo de código para a Sirene Vermelha:

/**************************************** * Incluir Bibliotecas ****************************************/ #include "UbidotsESPMQTT.h" /**************************************** * Definir Constantes ****************************************/ #define TOKEN "***" // Seu TOKEN Ubidots #define WIFINAME "***" // Seu SSID #define WIFIPASS "***" // Sua Senha do Wi-Fi #define DEVICE_LABEL "customers" // Insira aqui o rótulo do seu dispositivo Ubidots #define VARIABLE_LABEL "churn" // Insira aqui o rótulo da sua variável Ubidots Ubidots client(TOKEN); byte relayOn[] = {0xA0, 0x01, 0x01, 0xA2}; //0xA00101A2 byte relayOff[] = {0xA0, 0x01, 0x00, 0xA1}; //0xA00100A1 /**************************************** * Funções Auxiliares ****************************************/ void callback(char* topic, byte* payload, unsigned int length) { if ((char)payload[0]=='1') // Ligar o relé { Serial.write(relayOn, sizeof(relayOn)); delay(10000); Serial.write(relayOff, sizeof(relayOff)); } } /**************************************** * Funções Principais ****************************************/ void setup() { // Insira seu código de configuração aqui, para executar uma vez:ubidotsSetBroker("ubidots"); // Define o broker corretamente para a conta comercial client.setDebug(false); // Passe um valor booleano verdadeiro ou falso para ativar as mensagens de depuração client.wifiConnection(WIFINAME, WIFIPASS); client.begin(callback);ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); //Insere o dataSource e os rótulos das variáveis Serial.begin(9600); } void loop() { if(!client.connected()) { client.reconnect();ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); //Insere o dataSource e os rótulos das variáveis } client.loop(); }

Código de exemplo para a Sirene Verde:

/**************************************** * Incluir Bibliotecas ****************************************/ #include "UbidotsESPMQTT.h" /**************************************** * Definir Constantes ****************************************/ #define TOKEN "***" // Seu TOKEN Ubidots #define WIFINAME "***" // Seu SSID #define WIFIPASS "***" // Sua Senha do Wi-Fi #define DEVICE_LABEL "customers" // Insira aqui o rótulo do seu dispositivo Ubidots #define VARIABLE_LABEL "new-customer" // Insira aqui o rótulo da sua variável Ubidots Ubidots client(TOKEN); byte relayOn[] = {0xA0, 0x01, 0x01, 0xA2}; //0xA00101A2 byte relayOff[] = {0xA0, 0x01, 0x00, 0xA1}; //0xA00100A1 /**************************************** * Funções Auxiliares ****************************************/ void callback(char* topic, byte* payload, unsigned int length) { if ((char)payload[0]=='1') // Ligar o relé { Serial.write(relayOn, sizeof(relayOn)); delay(10000); Serial.write(relayOff, sizeof(relayOff)); } } /**************************************** * Funções Principais ****************************************/ void setup() { // coloque seu código de configuração aqui, para executar uma vez:ubidotsSetBroker("ubidots"); // Configura o broker corretamente para a conta comercial client.setDebug(false); // Passa um valor booleano verdadeiro ou falso para ativar as mensagens de depuração client.wifiConnection(WIFINAME, WIFIPASS); client.begin(callback);ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); // Insere o dataSource e os rótulos das variáveis Serial.begin(9600); } void loop() { if(!client.connected()) { client.reconnect();ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); // Insere o dataSource e os rótulos das variáveis } client.loop(); }

5. Verifique seu código na IDE do Arduino. Para isso, no canto superior esquerdo da IDE do Arduino, você verá o ícone de " Marca de seleção "; selecione-o para verificar seu código.

6. Carregue o código no seu “Módulo ESP8266 Genérico” . Para fazer isso, selecione o ícone de “ seta para a direita” ao lado do ícone de “marca de seleção”.

7. Para verificar a conectividade do dispositivo e os dados enviados, abra o monitor serial selecionando o ícone de "lupa" no canto superior direito da IDE do Arduino para visualizar os logs .

3.2. Controle de sons

O módulo responsável pelo controle do MP3 é o WEMOS D1. Basicamente, o código estabelece a assinatura com as mesmas variáveis configuradas para cada sirene, mas isso também reproduziria os sons do Mario Bros. Lembre-se:

Se a sirene verde for acionada, o alto-falante reproduzirá o som de Mario Bros ganhando uma moeda - Ubidots ganha um novo cliente.
Se a sirene vermelha for acionada, o alto-falante reproduzirá o som de Mario Bros perdendo uma vida - Ubidots perde um novo cliente.

1. Com a plataforma ESP8266 instalada, selecione o dispositivo ESP8266 com o qual você está trabalhando. Neste caso, estamos trabalhando com um “ WeMos D1 ”. Para selecionar sua placa na IDE do Arduino, selecione Ferramentas > Placa “WeMos D1” .

2. Caso não tenha feito isso na etapa anterior, baixe e instale a Ubidots MQTTESP8266 . Para obter uma explicação detalhada de como instalar bibliotecas usando a IDE do Arduino, consulte este guia .

3. Cole o seguinte código no seu ambiente de desenvolvimento Arduino (IDE). Depois de colar o código, certifique-se de atribuir seu token Ubidots exclusivo , o SSID (nome da rede Wi-Fi) e a senha da rede disponível.

/**************************************** * Incluir Bibliotecas ****************************************/ #include "UbidotsESPMQTT.h" /**************************************** * Definir Constantes ****************************************/ #define TOKEN "***" // Seu TOKEN Ubidots #define WIFINAME "***" // Seu SSID #define WIFIPASS "***" // Sua Senha de Wi-Fi #define DEVICE_LABEL "customers" // Insira aqui o rótulo do seu dispositivo Ubidots #define RED_SIREN "churn" // Insira aqui o rótulo da sua variável Ubidots #define GREEN_SIREN "new-customer" // Insira aqui o rótulo da sua variável Ubidots #define RESET D5 #define NEXT D6 #define PLAY D7 Cliente Ubidots (TOKEN); /**************************************** * Funções 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); } } /**************************************** * Funções Principais ****************************************/ void setup() { pinMode(RESET, OUTPUT); pinMode(NEXT, OUTPUT); pinMode(PLAY, OUTPUT); digitalWrite(RESET, HIGH); digitalWrite(NEXT, HIGH); digitalWrite(PLAY, HIGH); // Insira seu código de configuração aqui, para ser executado uma vez:ubidotsSetBroker("ubidots"); // Define o broker corretamente para a conta comercial client.setDebug(false); // Passe um valor booleano verdadeiro ou falso para ativar as mensagens de depuração client.wifiConnection(WIFINAME, WIFIPASS); client.begin(callback);ubidotsSubscribe(DEVICE_LABEL, GREEN_SIREN); // Insira o dataSource e os rótulos das variáveisubidotsSubscribe(DEVICE_LABEL, RED_SIREN); Serial.begin(9600); } void loop() { if(!client.connected()) { client.reconnect(); client.ubidotsSubscribe(DEVICE_LABEL, GREEN_SIREN); //Insere o dataSource e os rótulos das variáveis client.ubidotsSubscribe(DEVICE_LABEL, RED_SIREN); } client.loop(); }

4. Verifique seu código na IDE do Arduino. Para isso, no canto superior esquerdo da IDE do Arduino, você verá o ícone de " Marca de seleção "; selecione-o para verificar seu código.

5. Carregue o código no seu “WeMos D1” . Para fazer isso, selecione o ícone de “ seta para a direita” ao lado do ícone de “marca de seleção”.

6. Se você não estiver familiarizado com o módulo MP3, recomendamos fortemente que você consulte este guia , um dos melhores para começar.

Com base na nossa experiência, certifique-se de estar usando o formato correto para o cartão SD e também para as músicas que serão reproduzidas.

Tamanho do cartão Micro SD: 1 ou 2 GB como máximo.
Formato do cartão Micro SD: FAT - Recomendamos que você formate seu cartão SD usando o SD Card Formatter .
Formato das músicas: AD4 - Recomendamos que você use o AD4Converter .

Para poupar alguns minutos de trabalho, nesta pasta você encontrará os sons do Mario Bros usados no projeto.

Com base na lógica utilizada no código, a primeira música identificada no cartão Micro SD como "0000" reproduzirá o som do Mario Bros quando ele ganha uma moeda, e a segunda, identificada como "0001", reproduzirá o som do Mario Bros quando ele perde uma vida.

4. Fiação

NOTA IMPORTANTE: Antes de estabelecer todas as conexões, certifique-se de que as placas já tenham o código de exemplo carregado. Além disso, verifique se elas estão funcionando corretamente com sua conta Ubidots

Para facilitar a compreensão da fiação, dividi este processo em diferentes etapas. Siga o diagrama e a tabela de fiação abaixo para fazer as conexões corretas.

Controle do módulo MP3

Para integrar o ESP8266 + módulo de relé de 1 canal com as sirenes, tivemos que fazer algumas modificações na fiação original de cada sirene. Basicamente, removemos o interruptor manual de cada sirene para substituí-lo pelo módulo de relé.

Para alimentar cada módulo ESP8266 + relé de 1 canal, utilizamos um carregador de celular para regular a tensão de entrada de 110V para 5V.

Consulte o diagrama abaixo para ter uma referência de como modificar a fiação original das sirenes e também como ligar os módulos ESP8266.

Controle do módulo MP3

O módulo MP3 possui diferentes configurações . Com base nos requisitos necessários para este projeto, decidimos utilizar o "circuito de aplicação do modo MP3".

Consulte a tabela de fiação e o diagrama abaixo para estabelecer as configurações adequadas:

Todo o sistema

Para finalizar, ligue a placa WEMOS com a saída de 5V do regulador utilizado:

Com as conexões de fios já feitas, coloque todos os componentes dentro das sirenes e prossiga com a instalação. No nosso caso, decidimos colocá-las na parede principal do nosso escritório.

5. Resumo

Nós realmente nos divertimos muito programando e reconstruindo a funcionalidade das sirenes da polícia para notificar toda a equipe sobre o status dos clientes em tempo real, mas de uma forma divertida, usando sons do Mario Bros.

Sabemos que este é um projeto interno que pode não ser tão útil para todos, mas consideramos relevante para todos aqueles que estão começando seus canais no YouTube,logs ou mesmo em uma empresa e desejam acompanhar as métricas de forma amigável e em tempo real sempre que conquistam um novo inscrito, visitante ou cliente.

Se você é um criador apaixonado como nós e decidir reproduzir este projeto, fique à vontade para compartilhá-lo, mas não se esqueça de nos marcar em @ubidots ubidots nossas redes sociais ( Facebook , LinkedIn , Twitter , Instagram ). Será um prazer compartilhá-lo com Ubidots .

Mais projetos úteis IoT :