Monitoramento em Tempo Real: Dados do ESP32 e Sensor

Imagine poder acompanhar em tempo real a temperatura da sua sala diretamente pelo navegador do seu smartphone ou computador. Com o ESP32, isso é totalmente possível! Neste artigo, vamos explorar como exibir dados de sensores em tempo real no navegador, transformando seu ESP32 em uma central de monitoramentoSegurança e Autenticação em APPsDescubra estratégias essenciais para implementar HTTPS, autenticação JWT e segurança robusta em APPs conectados ao ESP32 para IoT. acessível de qualquer lugar.

Introdução🔗

O ESP32 é uma poderosa ferramenta para projetos de IoT (Internet das CoisasIntegração do ESP32 com Plataformas de Automação Residencial (ex: Home Assistant)Aprenda a integrar o ESP32 com Home Assistant de forma prática e segura, configurando Wi-Fi, MQTT, sensores e atuadores para uma casa inteligente.). Com ele, é possível ler dados de sensores e transmiti-los de forma eficiente. Nosso objetivo aqui é criar uma interface web que mostre, em tempo real, os valores lidos por um sensor conectado ao ESP32.

Materiais Necessários🔗

Conectando o Sensor ao ESP32🔗

Primeiramente, precisamos conectar o sensor DHT ao ESP32. O DHT11 e o DHT22 são sensores populares para medir temperatura🦠 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.

Esquema de Ligações

Nota: Certifique-se de usar resistoresDesafios Práticos: Experimentando com Múltiplos LEDsAprenda a controlar múltiplos LEDs com ESP32 em projetos IoT. Descubra desafios práticos, montagem de circuitos, programação e efeitos visuais incríveis! pull-up se necessário, conforme especificações do sensor.

Configurando o Ambiente de Desenvolvimento🔗

Antes de começar a codificar, precisamos garantir que o Arduino IDEInstalando 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. esteja configurado para programar o ESP32. Caso ainda não tenha feito isso, siga os passos abaixo:

1. Adicionar o URL do Gerenciador de PlacasInstalando 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.

Abra o Arduino IDEInstalando 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. e vá em Arquivo > Preferências. No campo URLs Adicionais para Gerenciadores de PlacasInstalando 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., adicione:

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

2. Instalar as Placas ESP32Configurando o Ambiente com PlatformIO para ESP32Descubra como configurar o PlatformIO para ESP32 e desenvolver projetos IoT com eficiência, desde a instalação até a depuração. Guia completo e prático!

Vá em Ferramentas > Placa > Gerenciador de PlacasInstalando 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.. Busque por ESP32O 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! e instale a opção esp32O 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! by Espressif Systems.

3. Instalar BibliotecasHospedando Múltiplas Páginas Web no ESP32Descubra como hospedar múltiplas páginas web no ESP32 com um guia passo a passo. Aprenda a configurar rotas e interagir via HTTP. Necessárias

Instale as bibliotecas para o sensor DHT e para a conexão Wi-FiConfigurando 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.. Vá em Sketch > Incluir Biblioteca > Gerenciar BibliotecasHospedando Múltiplas Páginas Web no ESP32Descubra como hospedar múltiplas páginas web no ESP32 com um guia passo a passo. Aprenda a configurar rotas e interagir via HTTP. e pesquise por:

"DHT sensorProgramando o ESP32 para Integração de SensoresAprenda a programar o ESP32 e integrar sensores com técnicas de leitura e controle para projetos de IoT, do hardware ao código. library" por Adafruit
"Adafruit Unified SensorProgramando o ESP32 para Integração de SensoresAprenda a programar o ESP32 e integrar sensores com técnicas de leitura e controle para projetos de IoT, do hardware ao código." por Adafruit

Desenvolvendo o Código🔗

Agora que o ambiente está pronto, vamos ao códigoDesafios Práticos: Experimentando com Múltiplos LEDsAprenda a controlar múltiplos LEDs com ESP32 em projetos IoT. Descubra desafios práticos, montagem de circuitos, programação e efeitos visuais incríveis!. Nosso objetivo é:

Importando Bibliotecas

#include <WiFi.h>
#include <WebServer.h>
#include "DHT.h"

Definindo Constantes e Variáveis

#define DHTPIN 4      // Pino onde o sensor DHT está conectado
#define DHTTYPE DHT22 // Tipo de sensor: DHT11 ou DHT22
const char* ssid = "Seu_SSID";
const char* password = "Sua_Senha";
DHT dht(DHTPIN, DHTTYPE);
WebServer server(80);
float temperatura;
float umidade;

Configurando a Conexão Wi-Fi

void setup()
{
  Serial.begin(115200);
  dht.begin();
  // Conectando ao Wi-Fi
  WiFi.begin(ssid, password);
  Serial.print("Conectando-se ao Wi-Fi");
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nConectado!");
  Serial.print("Endereço IP: ");
  Serial.println(WiFi.localIP());
  // Configurando as rotas do servidor
  server.on("/", handleRoot);
  server.begin();
  Serial.println("Servidor HTTP iniciado");
}

Função para Ler os Dados do Sensor

void lerSensor()
{
  umidade = dht.readHumidity();
  temperatura = dht.readTemperature();
  if (isnan(umidade) || isnan(temperatura))
  {
    Serial.println("Falha ao ler do sensor DHT!");
    return;
  }
}

Manipulador da Página Inicial

Vamos criar uma página web que exibe os dados e atualiza em tempo realExibindo 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. usando JavaScript.

void handleRoot()
{
  lerSensor();
  String pagina = "<!DOCTYPE html><html>";
  pagina += "<head><meta http-equiv='refresh' content='5'/>";
  pagina += "<title>Monitoramento de Temperatura e Umidade</title>";
  pagina += "<style>body { font-family: Arial; text-align: center; margin-top: 50px; }</style>";
  pagina += "</head><body>";
  pagina += "<h1>Dados do Sensor DHT</h1>";
  pagina += "<p>Temperatura: ";
  pagina += String(temperatura);
  pagina += " °C</p>";
  pagina += "<p>Umidade: ";
  pagina += String(umidade);
  pagina += " %</p>";
  pagina += "</body></html>";
  server.send(200, "text/html", pagina);
}

Loop Principal

No loop, apenas mantemos o servidor em execução.

void loop()
{
  server.handleClient();
}

Código Completo

Para facilitar, segue o códigoDesafios Práticos: Experimentando com Múltiplos LEDsAprenda a controlar múltiplos LEDs com ESP32 em projetos IoT. Descubra desafios práticos, montagem de circuitos, programação e efeitos visuais incríveis! completo:

#include <WiFi.h>
#include <WebServer.h>
#include "DHT.h"
#define DHTPIN 4
#define DHTTYPE DHT22
const char* ssid = "Seu_SSID";
const char* password = "Sua_Senha";
DHT dht(DHTPIN, DHTTYPE);
WebServer server(80);
float temperatura;
float umidade;
void setup()
{
  Serial.begin(115200);
  dht.begin();
  WiFi.begin(ssid, password);
  Serial.print("Conectando-se ao Wi-Fi");
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nConectado!");
  Serial.print("Endereço IP: ");
  Serial.println(WiFi.localIP());
  server.on("/", handleRoot);
  server.begin();
  Serial.println("Servidor HTTP iniciado");
}
void lerSensor()
{
  umidade = dht.readHumidity();
  temperatura = dht.readTemperature();
  if (isnan(umidade) || isnan(temperatura))
  {
    Serial.println("Falha ao ler do sensor DHT!");
    return;
  }
}
void handleRoot()
{
  lerSensor();
  String pagina = "<!DOCTYPE html><html>";
  pagina += "<head><meta http-equiv='refresh' content='5'/>";
  pagina += "<title>Monitoramento de Temperatura e Umidade</title>";
  pagina += "<style>body { font-family: Arial; text-align: center; margin-top: 50px; }</style>";
  pagina += "</head><body>";
  pagina += "<h1>Dados do Sensor DHT</h1>";
  pagina += "<p>Temperatura: ";
  pagina += String(temperatura);
  pagina += " °C</p>";
  pagina += "<p>Umidade: ";
  pagina += String(umidade);
  pagina += " %</p>";
  pagina += "</body></html>";
  server.send(200, "text/html", pagina);
}
void loop()
{
  server.handleClient();
}

Explicando o Funcionamento do Código🔗

<meta http-equiv='refresh' content='5'/>

Isso faz com que a página seja recarregada a cada 5 segundos, atualizando os valores exibidos.

Melhorando a Experiência do Usuário🔗

Recarregar a página inteira pode não ser a melhor experiência. Podemos melhorar utilizando técnicas de atualização parcial da página, como AJAXAtualização Dinâmica de Páginas com AJAX no ESP32Atualize páginas ESP32 dinamicamente com AJAX. Este tutorial prático ensina a integrar sensores e melhorar a interatividade em projetos IoT..

Implementando AJAX para Atualização em Tempo Real

Vamos modificar nosso códigoDesafios Práticos: Experimentando com Múltiplos LEDsAprenda a controlar múltiplos LEDs com ESP32 em projetos IoT. Descubra desafios práticos, montagem de circuitos, programação e efeitos visuais incríveis! para que apenas os dados sejam atualizados, sem recarregar toda a página.

Modificando o Manipulador da Página Inicial

Criamos duas rotasHospedando Múltiplas Páginas Web no ESP32Descubra como hospedar múltiplas páginas web no ESP32 com um guia passo a passo. Aprenda a configurar rotas e interagir via HTTP.: uma para servir a página principal e outra para fornecer os dados em formato JSON.

void setup()
{
  // ... Código anterior ...
  server.on("/", handleRoot);
  server.on("/dados", handleDados);
  // ... Resto do código ...
}

Função para Fornecer Dados em JSON

void handleDados()
{
  lerSensor();
  String json = "{";
  json += "\"temperatura\":";
  json += String(temperatura);
  json += ",";
  json += "\"umidade\":";
  json += String(umidade);
  json += "}";
  server.send(200, "application/json", json);
}

Atualizando a Página HTML

No HTMLImplementando Formulários Web para Controle no ESP32Descubra como utilizar formulários web no ESP32 para controlar dispositivos e automatizar seu ambiente de forma simples e eficaz., adicionamos um script JavaScript que faz requisições periódicas ao servidor para obter os dados:

void handleRoot()
{
  String pagina = "<!DOCTYPE html><html>";
  pagina += "<head>";
  pagina += "<title>Monitoramento de Temperatura e Umidade</title>";
  pagina += "<style>body { font-family: Arial; text-align: center; margin-top: 50px; }</style>";
  pagina += "<script>";
  pagina += "function atualizarDados() {";
  pagina += "var xhttp = new XMLHttpRequest();";
  pagina += "xhttp.onreadystatechange = function() {";
  pagina += "if (this.readyState == 4 && this.status == 200) {";
  pagina += "var dados = JSON.parse(this.responseText);";
  pagina += "document.getElementById('temperatura').innerHTML = dados.temperatura + ' °C';";
  pagina += "document.getElementById('umidade').innerHTML = dados.umidade + ' %';";
  pagina += "}";
  pagina += "};";
  pagina += "xhttp.open('GET', '/dados', true);";
  pagina += "xhttp.send();";
  pagina += "}";
  pagina += "setInterval(function() { atualizarDados(); }, 2000);";
  pagina += "</script>";
  pagina += "</head><body onload='atualizarDados()'>";
  pagina += "<h1>Dados do Sensor DHT</h1>";
  pagina += "<p>Temperatura: <span id='temperatura'>-- °C</span></p>";
  pagina += "<p>Umidade: <span id='umidade'>-- %</span></p>";
  pagina += "</body></html>";
  server.send(200, "text/html", pagina);
}

Código Completo com AJAX

#include <WiFi.h>
#include <WebServer.h>
#include "DHT.h"
#define DHTPIN 4
#define DHTTYPE DHT22
const char* ssid = "Seu_SSID";
const char* password = "Sua_Senha";
DHT dht(DHTPIN, DHTTYPE);
WebServer server(80);
float temperatura;
float umidade;
void setup()
{
  Serial.begin(115200);
  dht.begin();
  WiFi.begin(ssid, password);
  Serial.print("Conectando-se ao Wi-Fi");
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nConectado!");
  Serial.print("Endereço IP: ");
  Serial.println(WiFi.localIP());
  server.on("/", handleRoot);
  server.on("/dados", handleDados);
  server.begin();
  Serial.println("Servidor HTTP iniciado");
}
void lerSensor()
{
  umidade = dht.readHumidity();
  temperatura = dht.readTemperature();
  if (isnan(umidade) || isnan(temperatura))
  {
    Serial.println("Falha ao ler do sensor DHT!");
    return;
  }
}
void handleDados()
{
  lerSensor();
  String json = "{";
  json += "\"temperatura\":";
  json += String(temperatura);
  json += ",";
  json += "\"umidade\":";
  json += String(umidade);
  json += "}";
  server.send(200, "application/json", json);
}
void handleRoot()
{
  String pagina = "<!DOCTYPE html><html>";
  pagina += "<head>";
  pagina += "<title>Monitoramento de Temperatura e Umidade</title>";
  pagina += "<style>body { font-family: Arial; text-align: center; margin-top: 50px; }</style>";
  pagina += "<script>";
  pagina += "function atualizarDados() {";
  pagina += "var xhttp = new XMLHttpRequest();";
  pagina += "xhttp.onreadystatechange = function() {";
  pagina += "if (this.readyState == 4 && this.status == 200) {";
  pagina += "var dados = JSON.parse(this.responseText);";
  pagina += "document.getElementById('temperatura').innerHTML = dados.temperatura + ' °C';";
  pagina += "document.getElementById('umidade').innerHTML = dados.umidade + ' %';";
  pagina += "}";
  pagina += "};";
  pagina += "xhttp.open('GET', '/dados', true);";
  pagina += "xhttp.send();";
  pagina += "}";
  pagina += "setInterval(function() { atualizarDados(); }, 2000);";
  pagina += "</script>";
  pagina += "</head><body onload='atualizarDados()'>";
  pagina += "<h1>Dados do Sensor DHT</h1>";
  pagina += "<p>Temperatura: <span id='temperatura'>-- °C</span></p>";
  pagina += "<p>Umidade: <span id='umidade'>-- %</span></p>";
  pagina += "</body></html>";
  server.send(200, "text/html", pagina);
}
void loop()
{
  server.handleClient();
}