Criando um Dashboard em Tempo Real para Dados MQTT do ESP32

O que é um Dashboard em Tempo Real?🔗

Um dashboard em tempo real é uma interface gráfica que exibe dados atualizados instantaneamente, permitindo monitorar processos e tomar decisões rápidas. No contexto do ESP32 e MQTT, ele serve para visualizar os dados que o ESP32 está publicando em um broker MQTT, como leituras de sensores ou estados de dispositivos.

Por que Usar MQTT com um Dashboard?🔗

O MQTT é um protocolo de comunicação leve e eficiente, ideal para dispositivos com recursos limitados, como o ESP32. Ele permite a publicação e assinatura de tópicos, facilitando a troca de mensagens entre dispositivos. Ao integrar o MQTT com um dashboard, podemos:

• Monitorar dados em tempo real: Receber atualizações instantâneas dos sensores.
• Controlar dispositivos remotamente: Enviar comandos ao ESP32 através do dashboard.
• Analisar e visualizar dados: Utilizar gráficos e indicadores para interpretar as informações.

Preparando o Ambiente🔗

Antes de iniciar, certifique-se de ter os seguintes itens:

• ESP32: A placa que irá coletar e enviar os dados.
• Broker MQTT: Pode ser um serviço local ou na nuvem, como o Mosquitto ou o HiveMQ.
• Computador: Para programação e configuração.
• Software de Dashboard: Usaremos o Node-RED, uma ferramenta poderosa para criação de dashboards.

Instalando o Node-RED

O Node-RED é uma plataforma baseada em fluxo que permite conectar dispositivos e serviços de forma visual. Para instalá-lo:

1. Instalar o Node.js: O Node-RED requer o Node.js. Baixe e instale a versão LTS do site oficial nodejs.org.

2. Instalar o Node-RED: Abra o terminal ou prompt de comando e execute:

npm install -g --unsafe-perm node-red

3. Iniciar o Node-RED: No terminal, digite:

node-red

Configurando o Broker MQTT

Se ainda não tiver um broker MQTT, instale o Mosquitto:

• Para Windows: Baixe o instalador do site oficial mosquitto.org/download.
• Para Linux: Use o comando:

sudo apt-get install mosquitto

Após a instalação, inicie o serviço:

mosquitto

Programando o ESP32 para Enviar Dados🔗

Vamos programar o ESP32 para publicar dados de um sensor fictício de temperatura e umidade.

Bibliotecas Necessárias

No Arduino IDE, instale as seguintes bibliotecas:

• PubSubClient: Para comunicação MQTT.
• WiFi.h: Para conectar à rede Wi-Fi.

Código Fonte

#include <WiFi.h>
#include <PubSubClient.h>
const char* ssid = "SEU_SSID";
const char* password = "SUA_SENHA";
const char* mqtt_server = "ENDEREÇO_DO_BROKER";
WiFiClient espClient;
PubSubClient client(espClient);
unsigned long lastMsg = 0;
void setup()
{
  Serial.begin(115200);
  setup_wifi();
  client.setServer(mqtt_server, 1883);
}
void setup_wifi()
{
  delay(10);
  Serial.println();
  Serial.print("Conectando-se a ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi conectado");
  Serial.print("Endereço IP: ");
  Serial.println(WiFi.localIP());
}
void reconnect()
{
  while (!client.connected())
  {
    Serial.print("Tentando se conectar ao MQTT...");
    if (client.connect("ESP32Client"))
    {
      Serial.println("Conectado");
    }
    else
    {
      Serial.print("Falhou, rc=");
      Serial.print(client.state());
      Serial.println(" Tentando novamente em 5 segundos");
      delay(5000);
    }
  }
}
void loop()
{
  if (!client.connected())
  {
    reconnect();
  }
  client.loop();
  unsigned long now = millis();
  if (now - lastMsg > 2000)
  {
    lastMsg = now;
    float temperatura = random(20, 30);
    float umidade = random(50, 70);
    char tempString[8];
    char umidString[8];
    dtostrf(temperatura, 1, 2, tempString);
    dtostrf(umidade, 1, 2, umidString);
    Serial.print("Publicando temperatura: ");
    Serial.println(tempString);
    client.publish("casa/sala/temperatura", tempString);
    Serial.print("Publicando umidade: ");
    Serial.println(umidString);
    client.publish("casa/sala/umidade", umidString);
  }
}

Explicação do Código

• Incluindo Bibliotecas: Importamos as bibliotecas necessárias para Wi-Fi e MQTT.
• Configurações de Rede: Definimos as credenciais da rede Wi-Fi e o endereço do broker MQTT.
• Inicialização: No setup(), conectamos ao Wi-Fi e configuramos o cliente MQTT.
• Reconexão: A função reconnect() garante que o ESP32 esteja sempre conectado ao broker.
• Loop Principal: A cada 2 segundos, simulamos a leitura de temperatura e umidade e publicamos nos tópicos correspondentes.

Carregando o Código no ESP32

Conecte o ESP32 ao computador e carregue o código através do Arduino IDE. Abra o monitor serial para verificar se a conexão está sendo estabelecida e se as mensagens estão sendo publicadas.

Configurando o Dashboard no Node-RED🔗

Agora, vamos criar um dashboard para visualizar os dados enviados pelo ESP32.

Instalando o Node-RED Dashboard

No Node-RED, precisamos instalar o pacote do dashboard:

1. Na interface do Node-RED, clique no menu no canto superior direito e selecione "Gerenciar paleta".

2. Vá para a aba "Instalar" e procure por node-red-dashboard.

3. Clique em "Instalar".

Criando o Fluxo

Vamos criar um fluxo que:

• Se inscreve nos tópicos MQTT do ESP32.
• Exibe os dados em tempo real no dashboard.

Passo 1: Adicionar o Nó MQTT In

• Arraste um nó mqtt in para o fluxo.
• Dê um duplo clique para configurar:
  • Servidor: Endereço do broker MQTT.
  • Tópico: casa/sala/temperatura.
• Repita o processo para o tópico casa/sala/umidade.

Passo 2: Adicionar Nós de Gráfico

• Arraste dois nós chart (gráfico) para o fluxo.
• Conecte a saída do nó MQTT de temperatura ao primeiro gráfico.
• Conecte a saída do nó MQTT de umidade ao segundo gráfico.

Passo 3: Configurar o Dashboard

• Dê um duplo clique em cada nó chart para configurar:
  • Título: Defina como "Temperatura" e "Umidade".
  • Grupo: Crie um grupo chamado "Sala".
  • Tipo de Gráfico: Selecione "Linha".

Passo 4: Implantar o Fluxo

Clique em "Deploy" no canto superior direito para implantar o fluxo.

Acessando o Dashboard

O dashboard estará disponível em http://localhost:1880/ui.

Ao acessar, você verá os gráficos de temperatura e umidade atualizados em tempo real conforme o ESP32 publica os dados.

Personalizando o Dashboard🔗

Para tornar o dashboard mais informativo, podemos adicionar:

Indicadores Numéricos

• Adicione nós gauge (medidor) para exibir os valores instantâneos.
• Conecte-os aos nós MQTT correspondentes.
• Configure o intervalo de valores, por exemplo, 0 a 50 para temperatura.

Alertas Visuais

• Use nós switch para verificar se os valores excedem certos limites.
• Adicione nós text para exibir mensagens de alerta no dashboard.

Histórico de Dados

• Utilize nós function para armazenar os dados em uma variável.
• Exiba gráficos históricos com períodos mais longos.

Entendendo o Funcionamento🔗

Fluxo de Dados

1. ESP32: Publica dados nos tópicos MQTT.

2. Broker MQTT: Recebe e distribui as mensagens para os assinantes.

3. Node-RED: Inscreve-se nos tópicos e manipula os dados.

4. Dashboard: Exibe os dados em gráficos e indicadores em tempo real.

Comunicação MQTT

O protocolo MQTT utiliza o modelo publish/subscribe, onde os clientes podem publicar mensagens em tópicos ou se inscrever para receber mensagens de tópicos específicos.

• Tópicos: São strings hierárquicas como casa/sala/temperatura.
• QoS (Quality of Service): Níveis de garantia de entrega das mensagens. Para aplicações em tempo real, o QoS 0 (no mínimo uma vez) é geralmente suficiente.

Boas Práticas e Considerações🔗

Segurança

Se o dashboard for acessado remotamente, é importante:

• Configurar autenticação no broker MQTT: Para evitar acessos não autorizados.
• Utilizar TLS/SSL: Criptografar a comunicação MQTT.

Escalabilidade

Para projetos maiores:

• Organizar tópicos de maneira hierárquica: Facilita a gestão dos dados.
• Usar bancos de dados: Armazenar dados históricos para análise posterior.

Otimização

• Filtrar dados no Node-RED: Evitar sobrecarga no dashboard.
• Ajustar intervalos de publicação: Balancear entre a atualização em tempo real e o uso de banda.

Testando o Sistema🔗

Para garantir que tudo está funcionando:

• Verifique as conexões: Certifique-se de que o ESP32 está conectado ao Wi-Fi e ao broker MQTT.
• Monitore o broker: Utilize ferramentas como o MQTT Explorer para inspecionar os tópicos e mensagens.
• Teste diferentes valores: Altere os valores simulados no código do ESP32 para verificar a atualização no dashboard.

Expandindo o Projeto🔗

Com a estrutura básica pronta, você pode:

• Adicionar mais sensores: Como luminosidade, presença ou qualidade do ar.
• Implementar controle: Enviar comandos ao ESP32 através do dashboard para controlar dispositivos, como acender uma luz.
• Integrar com outros serviços: Conectar o Node-RED com APIs externas, enviar notificações ou armazenar dados em serviços de nuvem.

Conclusão🔗

Criar um dashboard em tempo real para dados MQTT do ESP32 é uma maneira eficaz de monitorar e interagir com seus projetos de IoT. Com ferramentas como o Node-RED, esse processo se torna acessível mesmo para quem tem pouco conhecimento em informática ou eletrônica. Ao seguir os passos deste artigo, você estará apto a desenvolver sistemas personalizados que atendam às suas necessidades, expandindo as possibilidades de automação e monitoramento em tempo real.

Desejamos sucesso em suas experimentações e projetos futuros!

Referências🔗

• Arduino IDE Official Website arduino.cc
• Documentação da Espressif docs.espressif.com
• Documentação de Apresentação do ESP32 espressif.com/en/products/socs/esp32
• Documentação do ESP32 Arduino Core docs.espressif.com/projects/arduino-esp32