Arduino Nano ESP32 - Servidor Web
Neste tutorial passo a passo, vamos mostrar como programar uma placa Arduino Nano ESP32 para que ela se torne um servidor web. Você poderá acessar páginas web hospedadas no Arduino Nano ESP32 usando um navegador no seu computador ou celular, permitindo ver dados do Arduino Nano ESP32 e controlá-lo. Para facilitar, vamos avançar de passos simples para passos mais desafiadores, como segue:
- Servidor Web Arduino Nano ESP32 - Mostrando texto simples em uma página web.
- Servidor Web Arduino Nano ESP32 - Monitorando valores de sensores do Arduino Nano ESP32 pela web.
- Servidor Web Arduino Nano ESP32 - Controlando o Arduino Nano ESP32 pela web.
- Servidor Web Arduino Nano ESP32 - Separando o conteúdo HTML (HTML, CSS e Javascript) do código do Arduino Nano ESP32 e colocando-o em outros arquivos na Arduino IDE.
- Servidor Web Arduino Nano 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 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.
Arduino Nano ESP32 - Servidor Web Hello World
Isto é relativamente simples. O código do Arduino Nano ESP32 executa as seguintes tarefas:
- Criar um servidor web que escuta requisições HTTP de um navegador.
- Ao receber uma requisição de um navegador, o Arduino Nano ESP32 responde com as seguintes informações:
- Cabeçalho HTTP
- Corpo HTTP: Isso inclui conteúdo HTML com a mensagem "Hello World!".
- Se você é novo no Arduino Nano ESP32, consulte o tutorial sobre como configurar o ambiente para o Arduino Nano ESP32 na Arduino IDE.
- Conecte a placa Arduino Nano ESP32 ao seu computador usando um cabo USB.
- Abra a Arduino IDE no seu computador.
- Selecione a placa Arduino Nano ESP32 e a porta COM correspondente.
- Abra o Library Manager clicando no ícone Library Manager na barra de navegação esquerda da Arduino IDE.
- Pesquise “DIYables ESP32 WebServer”, depois encontre o DIYables ESP32 WebServer.
- Clique no botão Install para instalar a biblioteca Web Server da DIYables.
- Copie o código acima e abra-o com a Arduino IDE
- Altere as informações de wifi (SSID e senha) no código para as suas
- Clique no botão Upload na Arduino IDE para enviar o código ao Arduino Nano ESP32
- Abra o Serial Monitor
- Confira 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 terá a seguinte aparência:
Abaixo está o código do Arduino Nano ESP32 que executa as tarefas acima:
/*
* Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com
* Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-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, Arduino Nano ESP32!</h1></body></html>");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("Arduino Nano 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
Para começar com o Arduino Nano ESP32, siga estes passos:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.5
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.5
Arduino Nano ESP32 Web Server: New request received:
GET /
Lendo o valor do sensor do Arduino Nano ESP32 pela Web
Abaixo está o código do Arduino Nano ESP32 que imprime o valor da temperatura na página web:
/*
* Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com
* Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-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("Arduino Nano 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-o com a Arduino IDE
- Altere as informações de wifi (SSID e senha) no código para as suas
- Envie o código para o Arduino Nano 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 Arduino Nano ESP32. A página terá a seguinte aparência:
Para deixar a página web com uma aparência fantástica, com uma interface gráfica de usuário (UI), confira a seção final deste tutorial.
※ Nota:
Com o código fornecido acima, para obter a atualização da temperatura, você precisa recarregar a página no navegador. Em uma próxima parte, vamos aprender como fazer a página web atualizar o valor da temperatura em segundo plano, sem recarregar a página.
Controlando o Arduino Nano ESP32 pela Web
Controlar algo conectado ao Arduino Nano ESP32 é um pouco mais desafiador do que apenas ler um valor. Isso porque o Arduino Nano 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 na Arduino IDE
Se você quer criar uma página web simples com conteúdo mínimo, pode incorporar o HTML diretamente no código do Arduino Nano ESP32, como explicado anteriormente.
No entanto, se você quer fazer uma página web mais sofisticada e impressionante, com conteúdo maior, fica inconveniente incluir todo o HTML, CSS e Javascript diretamente no código do Arduino Nano ESP32. Nessa situação, você pode usar uma abordagem diferente para organizar o código:
- O código do Arduino Nano 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 Arduino Nano ESP32, facilitando o gerenciamento e a modificação.
Para isso, precisamos dar dois passos principais:
- Preparar o conteúdo HTML
- Programar o Arduino Nano 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, onde os dados do Arduino Nano ESP32 devem ser exibidos, use um valor arbitrário.
- Teste e modifique até ficar satisfeito.
- Vamos colocar o conteúdo HTML no arquivo .h na Arduino IDE. Veja o próximo passo.
Programando o Arduino Nano ESP32
- Abra a 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-o no arquivo criado.
/*
* Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com
* Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-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("Arduino Nano 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 na 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-o no index.h.
/*
* Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com
* Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-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 seu conteúdo HTML preparado antes. Não há problema com o caractere de nova linha. Abaixo está um exemplo de arquivo index.h:
/*
* Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com
* Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano ESP32 Temperature</title>
</head>
<body>
<h1>Arduino Nano 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 na Arduino IDE para enviar o código ao Arduino Nano ESP32
- Acesse a página web da placa Arduino Nano ESP32 pelo navegador como antes. Você a verá como abaixo:
※ 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 a necessidade de recarregar a página manualmente. Você pode ajustar o intervalo de atualização no código de acordo com a sua preferência.
- O código do Arduino Nano ESP32 atende a duas requisições do navegador.
- Uma requisição para retornar o conteúdo HTML da página
- 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 Arduino Nano ESP32 - Sensor de Temperatura DS18B20 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, a Arduino IDE não vai atualizar o conteúdo HTML ao compilar e enviar o código para o Arduino Nano ESP32.
- Para forçar a 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 a IDE reconhecer que houve mudanças no projeto, garantindo que o seu conteúdo HTML atualizado seja incluído no upload.
Servidor Web Arduino Nano ESP32 - Várias Páginas
Confira este tutorial Arduino Nano ESP32 - Servidor Web com Várias Páginas.