ESP32 - Servidor Web
Neste tutorial passo a passo, vamos mostrar como programar uma placa ESP32 para que ela se torne um servidor web. Você poderá acessar páginas web hospedadas no ESP32 usando um navegador no seu computador ou celular, o que permite ver dados do ESP32 e controlá-lo. Para facilitar, vamos avançar do mais simples para o mais desafiador, da seguinte forma:
- Servidor Web ESP32 - Mostrando um texto simples em uma página web.
- Servidor Web ESP32 - Monitorando valores de sensores do ESP32 pela web.
- Servidor Web ESP32 - Controlando o ESP32 pela web.
- Servidor Web ESP32 - Separando o conteúdo HTML (HTML, CSS e Javascript) do código do ESP32 e colocando-o em outros arquivos no Arduino IDE.
- Servidor Web ESP32 - Criando várias páginas, como index.html, temperature.html, led.html, error_404.html e error_405.html..., e mais.
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Lendo o valor do sensor do ESP32 pela Web
Isso é relativamente simples. O código do ESP32 faz as seguintes tarefas:
- Cria um servidor web que escuta requisições HTTP de um navegador.
- Ao receber uma requisição de um navegador, o ESP32 responde com as seguintes informações:
- Cabeçalho HTTP
- Corpo HTTP: inclui o conteúdo HTML e o valor lido do sensor.
- Se esta é a primeira vez que você usa o ESP32, veja como configurar o ambiente para ESP32 no Arduino IDE.
- Conecte a placa ESP32 ao seu PC por um cabo micro USB
- Abra o Arduino IDE no seu PC.
- Selecione a placa ESP32 correta (por exemplo, ESP32 Dev Module) e a porta COM.
- Abra o Library Manager clicando no ícone Library Manager na barra de navegação à esquerda do Arduino IDE.
- Pesquise por “DIYables ESP32 WebServer” e encontre a biblioteca Web Server criada pela DIYables.
- Clique no botão Install para instalar a biblioteca Web Server.
- Copie o código acima e abra no Arduino IDE
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Clique no botão Upload no Arduino IDE para fazer o upload do código para o ESP32
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor.
- Anote o endereço IP exibido e digite esse endereço na barra de endereços de um navegador no seu celular ou PC.
- Como resultado, você verá a seguinte saída no Serial Monitor.
- Ao acessar o navegador usando o endereço IP, você verá uma página web bem básica exibindo "Hello, ESP32!". A página ficará assim:
Abaixo está o código do ESP32 que realiza as tarefas acima:
/*
* Este código de ESP32 foi desenvolvido por pt.newbiely.com
* Este código de ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp32/esp32-web-server
*/
#include <DIYables_ESP32_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, "<html><body><h1>Hello, ESP32!</h1></body></html>");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Passos Rápidos
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web Server: New request received:
GET /
Lendo o valor do sensor do ESP32 pela Web
Abaixo está o código do ESP32 que imprime o valor da temperatura na página web:
/*
* Este código de ESP32 foi desenvolvido por pt.newbiely.com
* Este código de ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp32/esp32-web-server
*/
#include <DIYables_ESP32_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Passos Rápidos
- Copie o código acima e abra no Arduino IDE
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Faça o upload do código para o ESP32
- Ao acessar o navegador usando o endereço IP, você verá uma página web bem básica exibindo informações sobre a placa ESP32. A página ficará assim:
Para deixar a página web com um visual incrível, com uma interface gráfica (UI), confira a seção final deste tutorial.
※ Nota:
Com o código fornecido acima, para atualizar a temperatura você precisa recarregar a página no navegador. Em uma próxima parte, vamos aprender a fazer a página web atualizar o valor da temperatura em segundo plano, sem recarregar a página.
Controlando o ESP32 pela Web
Controlar algo conectado ao ESP32 é um pouco mais desafiador do que apenas ler um valor. Isso acontece porque o ESP32 precisa entender a requisição que recebe do navegador para saber qual ação tomar.
Para um exemplo mais completo e detalhado, recomendo conferir os tutoriais listados abaixo:
Separando o conteúdo HTML em outro arquivo no Arduino IDE
Se você quer criar uma página web simples com pouco conteúdo, pode embutir o HTML diretamente no código do ESP32, como explicado antes.
No entanto, se você quer fazer uma página web mais sofisticada e impressionante, com mais conteúdo, fica inconveniente incluir todo o HTML, CSS e Javascript diretamente no código do ESP32. Nesse caso, você pode usar uma abordagem diferente para organizar o código:
- O código do ESP32 será colocado em um arquivo .ino, como antes.
- O código HTML (HTML, CSS, Javascript) será colocado em um arquivo .h separado. Isso permite manter o conteúdo da página web separado do código do ESP32, o que facilita o gerenciamento e a modificação.
Para isso, precisamos fazer dois passos principais:
- Preparar o conteúdo HTML
- Programar o ESP32
Preparando o conteúdo HTML
- Crie um arquivo HTML no seu PC local que contenha o conteúdo HTML (HTML, CSS e Javascript) do design da sua UI.
- No arquivo HTML, nos lugares onde os dados do ESP32 devem aparecer, use um valor qualquer.
- Teste e modifique até ficar satisfeito.
- Vamos colocar o conteúdo HTML no arquivo .h no Arduino IDE. Veja o próximo passo.
Programando o ESP32
- Abra o Arduino IDE e crie um novo sketch. Dê um nome a ele, por exemplo, newbiely.com.ino.
- Copie o código fornecido abaixo e cole no arquivo criado.
/*
* Este código de ESP32 foi desenvolvido por pt.newbiely.com
* Este código de ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp32/esp32-web-server
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, webpage);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
server.sendResponse(client, temperatureStr.c_str(), "text/plain");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Crie o arquivo index.h no Arduino IDE da seguinte forma:
- Clique no botão logo abaixo do ícone do Serial Monitor e escolha New Tab, ou use as teclas Ctrl+Shift+N.
- Dê ao arquivo o nome index.h e clique no botão OK
- Copie o código abaixo e cole no arquivo index.h.
/*
* Este código de ESP32 foi desenvolvido por pt.newbiely.com
* Este código de ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp32/esp32-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
REPLACE_YOUR_HTML_CONTENT_HERE
)=====";
#endif
- Substitua a linha REPLACE_YOUR_HTML_CONTENT_HERE pelo conteúdo HTML que você preparou antes. Não há problema com caracteres de nova linha. Abaixo está um exemplo de arquivo index.h:
/*
* Este código de ESP32 foi desenvolvido por pt.newbiely.com
* Este código de ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp32/esp32-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Temperature</title>
</head>
<body>
<h1>ESP32 Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
</script>
</body>
</html>
)=====";
#endif
- Agora você tem o código em dois arquivos: newbiely.com.ino e index.h
- Clique no botão Upload no Arduino IDE para fazer o upload do código para o ESP32
- Acesse a página web da placa ESP32 pelo navegador como antes. Você a verá assim:
※ Nota:
Nos códigos acima:
- O código HTML foi projetado para atualizar a temperatura em segundo plano em intervalos regulares, atualmente definidos para cada 4 segundos no código. Isso significa que o valor da temperatura é atualizado automaticamente, sem precisar recarregar a página manualmente. Você pode ajustar o intervalo de atualização no código como preferir.
- O código do ESP32 atende a duas requisições do navegador.
- Uma requisição para retornar o conteúdo HTML da página web
- A outra para retornar o valor da temperatura solicitado pela página em segundo plano
Para uma ilustração mais completa e detalhada, consulte o tutorial ESP32 - DS18B20 Temperature Sensor via Web
※ Nota:
- Se você fizer alterações no conteúdo HTML dentro do arquivo index.h, mas não modificar nada no arquivo newbiely.com.ino, o Arduino IDE não vai atualizar o conteúdo HTML quando você compilar e fazer o upload do código para o ESP32.
- Para forçar o Arduino IDE a atualizar o conteúdo HTML nessa situação, você precisa fazer uma modificação no arquivo newbiely.com.ino. Por exemplo, você pode adicionar uma linha vazia ou inserir um comentário. Essa ação faz o IDE reconhecer que houve mudanças no projeto, garantindo que seu conteúdo HTML atualizado seja incluído no upload.
Servidor Web ESP32 - Várias Páginas
Confira este tutorial ESP32 - Web Server Multiple Pages.