Monitor de Temperatura e Umidade com NODEMCU ESP8266 como Servidor Web

Olá pessoal,

Os módulos e placas de desenvolvimento baseados no microcontrolador ESP8266, como a NODEMCU , têm ganhado destaque para soluções de IoT devido à sua relação custo-benefício. Este microcontrolador possui como principal característica o uso da tecnologia de comunicação Wi-Fi, podendo ser programado para ser usado como um servidor Web independente.
Neste tutorial você vai aprender a criar um servidor web com a NODEMCU ESP 8266 para monitorar a temperatura e a umidade lida pelo sensor DHT11.

Vamos começar?

MATERIAIS NECESSÁRIOS

1 x NODEMCU ESP8266;
1 x Cabo micro USB;
1 x Sensor DHT11;
1 x Resistor de 10 kΩ;
1 x Protoboard;
Fios jumper.

ESQUEMÁTICO DE LIGAÇÃO DOS COMPONENTES

Antes de iniciar a montagem elétrica do circuito, certifique-se que a NODEMCU ESP8266 esteja desligada, esta medida evitará possíveis danos a sua placa. Em seguida, monte o circuito da Figura 1.

Ao montar seu circuito observe os seguintes pontos:
• O sensor DHT11 possui 4 terminais. O primeiro (VCC) é o terminal de alimentação, que conforme datasheet do fabricante pode ser entre 3 V e 5,5 V. O segundo (DATA) é o pino de comunicação de dados, será através dele que o valor da temperatura e umidade serão comunicados. O terceiro (NC) é um pino vazio. Por fim, o último (GND) é o terminal de terra do sensor;
• O pino 1 do sensor DHT11 será ligado a alimentação de 3,3 V da placa NODEMCU ESP8266;
• O pino 2 deve ser conectado à porta digital D2 (GPIO4);
• No pino 2 vamos conectar um resistor de 10 kΩ pull-up (resistor conectado ao VCC);
• O pino 4 deve ser conectado ao GND (terra).

ELABORANDO O CÓDIGO

Após a verificação do circuito montado, vamos a programação do nosso Sketch. Inicialmente, vamos proceder a instalação das bibliotecas necessárias para utilização do sensor DHT11. Estas bibliotecas encontram-se disponíveis para download nos seguintes links:

DHT11 Sensor Library

Adafruit Unified Sensor Lib

Após realizar o download da biblioteca, vamos instalá-la por meio do seguinte caminho: Toolbar > Sketch > Incluir biblioteca > Adicionar biblioteca ZIP, conforme ilustra a Figura 2.

Com a biblioteca instalada, vamos a programação do nosso Sketch. Este projeto propõe a criação de um servidor Web que atualiza a temperatura e umidade automaticamente, fazendo uso do sensor DHT11 e da NODEMCU ESP8266.

Para melhor compreensão o código será explicado passo-a-passo a seguir. Neste momento, observe o código abaixo e aproveite para analisar sua estrutura.

#include<ESP8266WiFi.h> //Biblioteca para funcionamento do WiFi do ESP
#include<ESP8266WebServer.h> //Biblioteca para o ESP funcionar como servidor
#include <DHT.h> //Biblioteca para funcionamento do sensor de temperatura e umidade DHT11

const char* ssid = "XXXXXX";  // Rede WiFi
const char* password = "1235678";  //Senha da Rede WiFi

ESP8266WebServer server(80); //server na porta 80

#define DHTPIN 4 //Pino digital D2 (GPIO4) conectado ao DHT11
#define DHTTYPE DHT11 //Tipo do sensor DHT11

DHT dht(DHTPIN, DHTTYPE); //Inicializando o objeto dht do tipo DHT passando como parâmetro o pino (DHTPIN) e o tipo do sensor (DHTTYPE)

float temperatura; //variável para armazenar a temperatura
float umidade; //Variável para armazenar a umidade

void setup() {
  Serial.begin(115200); //Inicializa a comunicação serial
  delay(50); // ?Intervalo para aguardar a estabilização do sistema
  dht.begin(); //Inicializa o sensor DHT11

  Serial.println("Conectando a Rede: "); //Imprime na serial a mensagem
  Serial.println(ssid); //Imprime na serial o nome da Rede Wi-Fi

  WiFi.begin(ssid, password); //Inicialização da comunicação Wi-Fi

  //Verificação da conexão
  while (WiFi.status() != WL_CONNECTED) { //Enquanto estiver aguardando status da conexão
    delay(1000);
    Serial.print("."); //Imprime pontos
  }
  Serial.println("");
  Serial.println("WiFi Conectado");
  Serial.print("IP: ");
  Serial.println(WiFi.localIP()); //Função para exibir o IP da ESP

  server.on("/", handle_OnConnect); //Servidor recebe uma solicitação HTTP - chama a função handle_OnConnect
  server.onNotFound(handle_NotFound); //Servidor recebe uma solicitação HTTP não especificada - chama a função handle_NotFound

  server.begin(); //Inicializa o servidor
  Serial.println("Servidor HTTP inicializado");

}

void loop() {
  server.handleClient(); //Chama o método handleClient()
}

void handle_OnConnect() {
  temperatura = dht.readTemperature();  //Realiza a leitura da temperatura
  umidade = dht.readHumidity(); //Realiza a leitura da umidade
  Serial.print("Temperatura: ");
  Serial.print(temperatura); //Imprime no monitor serial o valor da temperatura lida
  Serial.println(" ºC");
  Serial.print("Umidade: ");
  Serial.print(umidade); //Imprime no monitor serial o valor da umidade lida
  Serial.println(" %");
  server.send(200, "text/html", EnvioHTML(temperatura, umidade)); //Envia as informações usando o código 200, especifica o conteúdo como "text/html" e chama a função EnvioHTML

}

void handle_NotFound() { //Função para lidar com o erro 404
  server.send(404, "text/plain", "Não encontrado"); //Envia o código 404, especifica o conteúdo como "text/pain" e envia a mensagem "Não encontrado"

}

String EnvioHTML(float Temperaturastat, float Umidadestat) { //Exibindo a página da web em HTML
  String ptr = "<!DOCTYPE html> <html>\n"; //Indica o envio do código HTML
  ptr += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n"; //Torna a página da Web responsiva em qualquer navegador Web
  ptr += "<meta http-equiv='refresh' content='2'>";//Atualizar browser a cada 2 segundos
  ptr += "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";
  ptr += "<title>Monitor de Temperatura e Umidade</title>\n"; //Define o título da página

  //Configurações de fonte do título e do corpo do texto da página web
  ptr += "<style>html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #000000;}\n";
  ptr += "body{margin-top: 50px;}\n";
  ptr += "h1 {margin: 50px auto 30px;}\n";
  ptr += "h2 {margin: 40px auto 20px;}\n";
  ptr += "p {font-size: 24px;color: #000000;margin-bottom: 10px;}\n";
  ptr += "</style>\n";
  ptr += "</head>\n";
  ptr += "<body>\n";
  ptr += "<div id=\"webpage\">\n";
  ptr += "<h1>Monitor de Temperatura e Umidade</h1>\n";
  ptr += "<h2>NODEMCU ESP8266 Web Server</h2>\n";

  //Exibe as informações de temperatura e umidade na página web
  ptr += "<p><b>Temperatura: </b>";
  ptr += (float)Temperaturastat;
  ptr += " Graus Celsius</p>";
  ptr += "<p><b>Umidade: </b>";
  ptr += (float)Umidadestat;
  ptr += " %</p>";

  ptr += "</div>\n";
  ptr += "</body>\n";
  ptr += "</html>\n";
  return ptr;

}

Para melhor compreensão do código acompanhe os seguintes passos:

1 – Incluir as bibliotecas
Iniciamos o código do Monitor de Temperatura e Umidade com NODEMCU ESP8266 como Servidor Web incluindo as bibliotecas necessárias para o uso da conexão Wi-Fi pela NODEMCU ESP8266 e para funcionamento do sensor DHT11. Também faz-se necessária a inclusão da biblioteca ESP8266WebServer.h, que possui alguns métodos que nos ajudarão a configurar um servidor e a lidar com solicitações HTTP de entrada.

2 – Incluir as configurações de rede
Como vamos utilizar a NODEMCU ESP8266 no modo Station (STA), que permite que a placa se conecte a uma rede Wi-Fi existente, precisamos fornecer o nome (ssid) e a senha (password) da rede. Desta forma, substitua as informações entre aspas pelas informações da sua rede local.

3 – Definir objetos e declarar variáveis
Em seguida, declaramos um objeto da biblioteca ESPWebServer, para que possamos acessar suas funções. Neste objeto, precisamos passar como parâmetro a porta onde o servidor será executado. Desse modo, passamos como parâmetro a porta 80, que é a porta padrão usada para HTTP.
Logo após, definimos o GPIO ao qual o pino de dados do DHT11 está conectado. Neste caso, ele está conectado ao GPIO 4 (D2).
Posteriormente, selecionamos o tipo de sensor DHT (11 ou 22) que estamos usando. Neste exemplo, estamos usando o sensor DHT11. Feito isso, instanciamos um objeto DHT passando como parâmetros o tipo e o pino definidos anteriormente.
Além disso, declaramos duas variáveis do tipo float para armazenar os valores lidos pelo sensor DHT11, sendo elas: temperatura e umidade.

4 – Configuração do servidor
Na função setup, vamos realizar as configurações do servidor antes de realmente executá-lo. Mas antes disso, inicializamos a comunicação serial e o sensor DHT11.
Em seguida, tentamos conectar a NODEMCU ESP8266 a rede Wi-Fi, por meio da função WiFi.begin() que recebe como parâmetros o nome da rede (ssid) e a senha (password).
Enquanto, a NODEMCU ESP8266 tenta se conectar à rede, vamos verificar o status da conectividade por meio da função WiFi.status(). No momento em que a placa NODEMCU consegue se conectar à rede, será impresso no monitor serial o endereço de IP atribuído à placa.

5 – Solicitações HTTP
Dependendo das solicitações HTTP de entrada precisamos especificar qual código executar quando um URL for atingido. Quando um servidor recebe uma solicitação HTTP no caminho raiz (/), chamamos a função handle_OnConnect, através da instrução server.on(“/”, handle_OnConnect);.
No entanto, quando o servidor recebe qualquer URL diferente do caminho raiz, ele deve responder com um status HTTP 404 (não encontrado) e uma mensagem para o usuário. Para isso, usamos a função server.onNotFound(handle_NotFound);.

6 – Inicializar o servidor
O próximo passo é a inicialização do servidor, que é realizado através da instrução server.begin();

7 – Retorno das solicitações HTTP
Para lidar com as solicitações HTTP precisamos chamar o método handleClient no objeto do servidor na função principal. O método handleClient() faz parte da biblioteca ESP8266WebServer e lida com algumas operações de fundo para ter um cliente conectado ao servidor.

8 – Criar função handle_OnConect()
Em seguida, precisamos criar uma função anexada ao URL raiz (/) com server.on. Nesta função, obteremos os valores lidos pelo sensor DHT11 de temperatura e umidade e armazenaremos nas variáveis umidade e temperatura. Estes valores serão impressos no monitor serial.
Para responder à solicitação HTTP, usamos o método send . Embora o método possa ser chamado com um conjunto diferente de argumentos, sua forma mais simples consiste no código de resposta HTTP, o tipo de conteúdo e o conteúdo.
Em nosso exemplo, estamos enviando o código 200, código de status HTTP que corresponde a resposta OK. Em seguida, especificamos o tipo de conteúdo como “text / html“ e, finalmente, chamamos a função EnvioHTML(), responsável por criar uma página HTML dinâmica contendo valores de temperatura e umidade.

9 – Criar função handle_NotFound()
Da mesma forma, precisamos criar uma função para lidar com a página 404 Error. Sempre que esta função for chamada a página Web exibirá a mensagem “Não encontrado”.

10 – Criara página Web em HTML
A função EnvioHTML() é responsável por gerar uma página da web sempre que o servidor Web NODEMCU ESP8266 obtiver uma solicitação de um cliente. Esta função concatena o código HTML em uma grande string e retorna à server.send(). Além disso, EnvioHTML()  usa valores de temperatura e umidade como parâmetro para gerar dinamicamente o conteúdo HTML.

SERVIDOR EM EXECUÇÃO

Com a programação do Sketch finalizada, faça o upload do código para a sua placa NODEMCU ESP8266. Em seguida, abra o monitor serial do Arduino IDE e defina a taxa de bauds para 115200. A Figura 3 ilustra as mensagem que serão exibidas no monitor serial.

Em seguida, abra o seu navegador de internet e digite na barra de endereços o endereço de IP da NODEMCU ESP8266. Em nosso exemplo, o IP foi 192.168.88.71. A Figura 4 ilustra página Web criada no projeto Monitor de Temperatura e Umidade com NODEMCU ESP8266 como Servidor Web.

Espero que tenham gostado deste tutorial. Em caso de dúvidas deixe seu comentário abaixo.

Att.,

Carol Correia Viana