Criando um Dashboard em Tempo Real: Dados MQTT ESP32

Imagine poder monitorar em tempo real os sensores da sua casa, como temperatura, umidade ou até mesmo o status das luzes, tudo através de um dashboard intuitivo. Neste artigo, vamos explorar como criar um dashboard em tempo real para visualizar dados enviados pelo ESP32 utilizando o protocolo MQTT. Vamos mergulhar desde os conceitos teóricos até a implementação prática💧 Sistema de Reúso de Água Cinza💧 Sistema de Reúso de Água CinzaDescubra como implementar um sistema inteligente de reúso de água cinza com ESP32, monitoramento via sensores e integração IoT para sustentabilidade., passo a passo.

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 MQTTConfigurando um Broker MQTT para Comunicação com o ESP32Configurando um Broker MQTT para Comunicação com o ESP32Aprenda a configurar o broker MQTT e conectar seu ESP32 com segurança e eficiência para desenvolver robustas aplicações IoT., como leituras de sensores ou estados de dispositivos.

Por que Usar MQTT com um Dashboard?🔗

O MQTT é um protocolo de comunicação🌧 Alerta de Enchentes com Sensores de Nível de Rios🌧 Alerta de Enchentes com Sensores de Nível de RiosTutorial sobre sistema IoT com ESP32 e sensores de nível. Descubra a implementação, comunicação robusta e alertas para enchentes em comunidades ribeirinhas. 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:

Preparando o Ambiente🔗

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

Instalando o Node-RED

O Node-RED💧 Sistema de Reúso de Água Cinza💧 Sistema de Reúso de Água CinzaDescubra como implementar um sistema inteligente de reúso de água cinza com ESP32, monitoramento via sensores e integração IoT para sustentabilidade. é uma plataforma baseada em fluxo que permite conectar dispositivos e serviços de forma visual. Para instalá-lo:

1. InstalarInstalando o Arduino IDE para ESP32 no macOSInstalando o Arduino IDE para ESP32 no macOSAprenda passo a passo a instalar e configurar o Arduino IDE no macOS para programar o ESP32. Siga dicas essenciais para solucionar problemas comuns. o Node.js: O Node-RED💧 Sistema de Reúso de Água Cinza💧 Sistema de Reúso de Água CinzaDescubra como implementar um sistema inteligente de reúso de água cinza com ESP32, monitoramento via sensores e integração IoT para sustentabilidade. requer o Node.js. Baixe e instale a versão LTS do site oficial nodejs.org.

2. InstalarInstalando o Arduino IDE para ESP32 no macOSInstalando o Arduino IDE para ESP32 no macOSAprenda passo a passo a instalar e configurar o Arduino IDE no macOS para programar o ESP32. Siga dicas essenciais para solucionar problemas comuns. o Node-RED: Abra o terminal ou prompt de comando e execute:

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

3. Iniciar o Node-RED💧 Sistema de Reúso de Água Cinza💧 Sistema de Reúso de Água CinzaDescubra como implementar um sistema inteligente de reúso de água cinza com ESP32, monitoramento via sensores e integração IoT para sustentabilidade.: No terminal, digite:

node-red

O Node-RED💧 Sistema de Reúso de Água Cinza💧 Sistema de Reúso de Água CinzaDescubra como implementar um sistema inteligente de reúso de água cinza com ESP32, monitoramento via sensores e integração IoT para sustentabilidade. estará disponível em httpProtocolos Nativos: Wi-Fi (2.4 GHz), Bluetooth Classic e BLEProtocolos Nativos: Wi-Fi (2.4 GHz), Bluetooth Classic e BLEDescubra como utilizar os protocolos Wi-Fi, Bluetooth Classic e BLE no ESP32, com exemplos práticos e dicas para projetos IoT inovadores.://localhost:1880.

Configurando o Broker MQTT

Se ainda não tiver um broker MQTTConfigurando um Broker MQTT para Comunicação com o ESP32Configurando um Broker MQTT para Comunicação com o ESP32Aprenda a configurar o broker MQTT e conectar seu ESP32 com segurança e eficiência para desenvolver robustas aplicações IoT., instale o Mosquitto:

sudo apt-get install mosquitto

Após a instalaçãoInstalando o Arduino IDE para ESP32 no macOSInstalando o Arduino IDE para ESP32 no macOSAprenda passo a passo a instalar e configurar o Arduino IDE no macOS para programar o ESP32. Siga dicas essenciais para solucionar problemas comuns., inicie o serviço:

mosquitto

Programando o ESP32 para Enviar Dados🔗

Vamos programar o ESP32 para publicar dadosProgramando o ESP32 para Publicar Dados via MQTTProgramando o ESP32 para Publicar Dados via MQTTConfigure o ESP32 para publicar dados via MQTT com segurança e eficiência. Aprenda a configurar Wi-Fi e sensores para transmitir mensagens em tempo real. de um sensor fictício de temperatura e umidade.

Bibliotecas Necessárias

No Arduino IDEInstalando o Arduino IDE para ESP32 no WindowsInstalando o Arduino IDE para ESP32 no WindowsEste tutorial passo a passo ensina como instalar o Arduino IDE e configurar o ESP32 no Windows, garantindo um ambiente ideal para IoT., instale as seguintes bibliotecas:

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

Carregando o Código no ESP32

Conecte o ESP32 ao computador e carregue o código através do Arduino IDE. Abra o monitor serialConfigurando a Conexão Wi-Fi no ESP32: Guia Passo a PassoConfigurando a Conexão Wi-Fi no ESP32: Guia Passo a PassoAprenda passo a passo a conectar seu ESP32 à rede Wi-Fi com segurança e estabilidade. Descubra dicas práticas e estratégias de otimização. 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 ESP32O que é o ESP32: Introdução e Conceitos BásicosO que é o ESP32: Introdução e Conceitos BásicosDescubra como o ESP32 revoluciona a automação e IoT com dicas práticas e projetos que transformam sua casa conectada. Domine a tecnologia!.

Instalando o Node-RED Dashboard

No Node-RED, precisamos instalarInstalando o Arduino IDE para ESP32 no macOSInstalando o Arduino IDE para ESP32 no macOSAprenda passo a passo a instalar e configurar o Arduino IDE no macOS para programar o ESP32. Siga dicas essenciais para solucionar problemas comuns. o pacote do dashboard:

1. Na interface do Node-RED💧 Sistema de Reúso de Água Cinza💧 Sistema de Reúso de Água CinzaDescubra como implementar um sistema inteligente de reúso de água cinza com ESP32, monitoramento via sensores e integração IoT para sustentabilidade., clique no menu no canto superior direito e selecione "Gerenciar paleta".

2. Vá para a aba "InstalarInstalando o Arduino IDE para ESP32 no macOSInstalando o Arduino IDE para ESP32 no macOSAprenda passo a passo a instalar e configurar o Arduino IDE no macOS para programar o ESP32. Siga dicas essenciais para solucionar problemas comuns." e procure por node-red💧 Sistema de Reúso de Água Cinza💧 Sistema de Reúso de Água CinzaDescubra como implementar um sistema inteligente de reúso de água cinza com ESP32, monitoramento via sensores e integração IoT para sustentabilidade.-dashboard.

3. Clique em "InstalarInstalando o Arduino IDE para ESP32 no macOSInstalando o Arduino IDE para ESP32 no macOSAprenda passo a passo a instalar e configurar o Arduino IDE no macOS para programar o ESP32. Siga dicas essenciais para solucionar problemas comuns.".

Criando o Fluxo

Vamos criar um fluxo que:

Passo 1: Adicionar o Nó MQTT In

Passo 2: Adicionar Nós de Gráfico

Passo 3: Configurar o Dashboard

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 httpProtocolos Nativos: Wi-Fi (2.4 GHz), Bluetooth Classic e BLEProtocolos Nativos: Wi-Fi (2.4 GHz), Bluetooth Classic e BLEDescubra como utilizar os protocolos Wi-Fi, Bluetooth Classic e BLE no ESP32, com exemplos práticos e dicas para projetos IoT inovadores.://localhost:1880/ui.

Ao acessar, você verá os gráficos de temperatura🦠 Analisador de Qualidade da Água Portátil🦠 Analisador de Qualidade da Água PortátilConfira o tutorial completo que integra sensores IoT e ESP32 para monitorar pH, turbidez, condutividade e temperatura em tempo real com relatórios PDF. 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

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

Entendendo o Funcionamento🔗

Fluxo de Dados

1. ESP32O que é o ESP32: Introdução e Conceitos BásicosO que é o ESP32: Introdução e Conceitos BásicosDescubra como o ESP32 revoluciona a automação e IoT com dicas práticas e projetos que transformam sua casa conectada. Domine a tecnologia!: Publica dados nos tópicos MQTTIntrodução ao MQTT: Conceitos Básicos e Benefícios para o ESP32Introdução ao MQTT: Conceitos Básicos e Benefícios para o ESP32Aprenda os fundamentos do MQTT para ESP32, explorando conceitos, benefícios e exemplos práticos para projetos robustos em IoT e automação..

2. Broker MQTTConfigurando um Broker MQTT para Comunicação com o ESP32Configurando um Broker MQTT para Comunicação com o ESP32Aprenda a configurar o broker MQTT e conectar seu ESP32 com segurança e eficiência para desenvolver robustas aplicações IoT.: Recebe e distribui as mensagens para os assinantes.

3. Node-RED💧 Sistema de Reúso de Água Cinza💧 Sistema de Reúso de Água CinzaDescubra como implementar um sistema inteligente de reúso de água cinza com ESP32, monitoramento via sensores e integração IoT para sustentabilidade.: Inscreve-se nos tópicos e manipula os dados.

4. Dashboard: Exibe os dados em gráficos e indicadores em tempo realExibindo Dados no Monitor Serial com ESP32Exibindo Dados no Monitor Serial com ESP32Aprenda a configurar e exibir dados no Monitor Serial com ESP32, utilizando exemplos práticos e técnicas de depuração para otimizar seus projetos IoT..

Comunicação MQTT

O protocolo MQTT utiliza o modelo publish/subscribeIntrodução ao MQTT: Conceitos Básicos e Benefícios para o ESP32Introdução ao MQTT: Conceitos Básicos e Benefícios para o ESP32Aprenda os fundamentos do MQTT para ESP32, explorando conceitos, benefícios e exemplos práticos para projetos robustos em IoT e automação., onde os clientes podem publicar mensagens em tópicos ou se inscrever para receber mensagens de tópicos específicos.

Boas Práticas e Considerações🔗

Segurança

Se o dashboard for acessado remotamente, é importante:

Escalabilidade

Para projetos maiores:

Otimização

Testando o Sistema🔗

Para garantir que tudo está funcionando:

Expandindo o Projeto🔗

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

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🌀 Escultura Cinética Controlada por Voz🌀 Escultura Cinética Controlada por VozDescubra como integrar hardware, TensorFlow Lite e controle de motores para criar uma escultura cinética interativa e cheia de inovações tecnológicas..

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

Autor: Marcelo V. Souza - Engenheiro de Sistemas e Entusiasta em IoT e Desenvolvimento de Software, com foco em inovação tecnológica.

Referências🔗

Compartilhar artigo

Artigos Relacionados