Tutorial: Do Sensor à Tela do Celular com ESP8266 e DHT11

Olá! Neste tutorial, vamos construir um projeto de Internet das Coisas (IoT) do zero. Criaremos um monitor de temperatura e umidade sem fio que você poderá acessar diretamente do seu celular, sem precisar de internet!

Objetivo do Projeto: Construir um dispositivo que lê os dados de um sensor de temperatura e umidade (DHT11) e os exibe em uma página da web, hospedada no próprio microcontrolador ESP8266.

O que Vamos Aprender:

• Como conectar componentes eletrônicos (hardware).
• Como ler dados de um sensor usando um microcontrolador.
• Como transformar o ESP8266 em um Ponto de Acesso Wi-Fi (Access Point).
• Como criar um servidor web simples para exibir informações.

Pré-requisitos

Antes de começar, certifique-se de que você tem tudo o que precisa.

Materiais (Hardware):

1. Microcontrolador NodeMCU ESP8266.
2. Sensor de Temperatura e Umidade DHT11.
3. Protoboard (ou Matriz de Contatos).
4. Jumpers (fios de conexão macho-macho).
5. Cabo Micro-USB para conectar o ESP8266 ao computador.

Software:

1. Arduino IDE instalada e configurada para o ESP8266.
2. Biblioteca do Sensor DHT: Precisaremos instalar a biblioteca DHT sensor library da Adafruit.

Parte 1: A Base – Conectando e Testando o Sensor

O primeiro passo em qualquer projeto é garantir que a parte mais fundamental está funcionando: a leitura do sensor. Vamos montar o circuito e fazer um teste simples.

Passo 1.1: Montagem do Circuito

Conecte os componentes na protoboard conforme a imagem e a tabela abaixo.

Atenção: A ordem dos pinos no seu sensor DHT11 pode variar. Verifique as inscrições no próprio sensor.

Passo 1.2: Instalação da Biblioteca DHT

1. Abra a Arduino IDE.
2. Vá em Ferramentas > Gerenciar Bibliotecas….
3. Na barra de busca, digite DHT sensor library.
4. Encontre a biblioteca da Adafruit e clique em Instalar. A IDE pode pedir para instalar outras dependências (como a Adafruit Unified Sensor); aceite e instale todas.

Passo 1.3: O Código de Teste

Copie o código abaixo e cole na sua Arduino IDE. Este código serve apenas para ler os dados do sensor e exibi-los no seu computador.

#include <DHT.h> // Inclui a biblioteca para o sensor DHT

// ▼▼▼ PROF. WASHINGTON PAIVA ▼▼▼

// --- Configuração do Sensor DHT11 ---
#define DHTPIN 5      // Define o pino D1 (GPIO 5) como pino de dados do sensor.
#define DHTTYPE DHT11 // Define o tipo do sensor.

// Inicializa o objeto do sensor.
DHT dht(DHTPIN, DHTTYPE);

void setup() {
  // Inicia a comunicação com o computador para podermos ver os resultados.
  Serial.begin(115200); 
  Serial.println("Iniciando teste do sensor DHT11...");

  // Inicia o sensor DHT.
  dht.begin();
}

void loop() {
  // Espera 2 segundos entre as medições.
  delay(2000);

  // Lê a umidade e a temperatura do sensor.
  float h = dht.readHumidity();
  float t = dht.readTemperature();

  // Verifica se a leitura falhou. É importante para garantir dados válidos.
  if (isnan(h) || isnan(t)) {
    Serial.println("Falha ao ler os dados do sensor DHT!");
    return;
  }

  // Se a leitura foi bem-sucedida, imprime os valores no Monitor Serial.
  Serial.print("Umidade: ");
  Serial.print(h);
  Serial.print("%  |  ");
  Serial.print("Temperatura: ");
  Serial.print(t);
  Serial.println(" °C");
}

Passo 1.4: Verificando o Funcionamento

1. Conecte o ESP8266 ao computador.
2. Na Arduino IDE, selecione a placa e a porta corretas em Ferramentas.
3. Clique no botão Carregar (seta para a direita).
4. Após o carregamento, abra o Monitor Serial (ícone de lupa no canto superior direito).
5. Certifique-se de que a velocidade esteja em 115200 bps.

Você deverá ver as leituras de temperatura e umidade aparecendo a cada 2 segundos. Se isso aconteceu, parabéns! A base do seu projeto está funcionando.

Parte 2: A Mágica – Transformando o ESP8266 em um Servidor Web

Agora que sabemos ler o sensor, vamos fazer o ESP8266 criar sua própria rede Wi-Fi e uma página da web para mostrar esses dados.

⭐ AVISO IMPORTANTE PARA A TURMA! ⭐

Como todos estarão criando redes Wi-Fi ao mesmo tempo, precisamos garantir que cada dispositivo tenha um nome de rede único. Do contrário, será impossível saber a qual dispositivo se conectar.

Antes de carregar o código, cada aluno deve personalizar a linha abaixo.

Sugestão: const char* ssid = "Sensor-[SeuNome]"; (Exemplo: const char* ssid = "Sensor-Carlos";)

Passo 2.1: O Código do Servidor Web

Apague o código anterior e substitua por este código completo, lembrando de personalizar o nome da rede (SSID).

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DHT.h>
// ▼▼▼ PROF. WASHINGTON PAIVA ▼▼▼

// --- Configuração da Rede Wi-Fi que o ESP irá criar ---
// ▼▼▼ PERSONALIZE ESTA LINHA! ▼▼▼
const char* ssid = "SensorESP-DHT11"; // TROQUE ESTE NOME! Ex: "Sensor-SeuNome"
const char* password = "12345678";   // A senha da rede (mínimo 8 caracteres)

// --- Configuração do Sensor DHT11 ---
#define DHTPIN 5      // Pino D1 no NodeMCU/ESP8266
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);

// Cria o objeto do servidor web na porta 80 (padrão para HTTP)
ESP8266WebServer server(80);

// Esta função será chamada quando um navegador acessar o IP do ESP
void handleRoot() {
  // Lê os dados do sensor
  float h = dht.readHumidity();
  float t = dht.readTemperature();

  // Verifica se a leitura falhou
  if (isnan(h) || isnan(t)) {
    server.send(200, "text/plain", "Falha ao ler dados do sensor!");
    return;
  }

  // Monta a página HTML que será exibida no navegador
  String html = "<!DOCTYPE html><html><head>";
  html += "<title>Monitor DHT11</title>";
  html += "<meta http-equiv='refresh' content='5'>"; // Atualiza a página a cada 5 segundos
  html += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
  html += "<style>body{font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0;}";
  html += "h1{color: #333;} .sensor{background-color: white; border-radius: 15px; padding: 20px; margin: 20px; display: inline-block; box-shadow: 0px 0px 10px rgba(0,0,0,0.1);}";
  html += ".temp{font-size: 3em; color: #ff5722;} .hum{font-size: 3em; color: #2196f3;}</style>";
  html += "</head><body>";
  html += "<h1>Monitor de Temperatura e Umidade</h1>";
  html += "<div class='sensor'><h2>Temperatura</h2><p class='temp'>" + String(t) + " &deg;C</p></div>";
  html += "<div class='sensor'><h2>Umidade</h2><p class='hum'>" + String(h) + " %</p></div>";
  html += "</body></html>";

  // Envia a página HTML para o navegador
  server.send(200, "text/html", html);
}

void setup() {
  Serial.begin(115200);
  dht.begin();
  
  Serial.println("Configurando o Ponto de Acesso (AP)...");
  
  // Inicia o ESP no modo Access Point
  WiFi.softAP(ssid, password);

  // Imprime o endereço IP do Ponto de Acesso
  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);

  // Define qual função chamar quando o navegador pedir a página principal ("/")
  server.on("/", handleRoot);
  
  // Inicia o servidor web
  server.begin();
  Serial.println("Servidor HTTP iniciado!");
}

void loop() {
  // Permite que o servidor verifique se algum cliente está se conectando
  server.handleClient();
}

Passo 2.2: Colocando para Funcionar

1. Carregue este novo código para o seu ESP8266 (após personalizar o SSID).
2. Pegue seu celular e vá para as configurações de Wi-Fi.
3. Procure e se conecte à rede com o nome que você criou.
4. A senha é 12345678.
5. Seu celular pode avisar que a rede não tem internet. Ignore e permaneça conectado.
6. Abra o navegador de internet do seu celular (Chrome, Safari, etc.).
7. Na barra de endereço, digite exatamente 192.168.4.1 e pressione “Enter”.

Passo 2.3: O Resultado Final

Se tudo deu certo, você verá uma página da web no seu celular mostrando a temperatura e a umidade em tempo real. A página irá se atualizar sozinha a cada 5 segundos!