Arduino Nano ESP32 - Servidor Web
En este tutorial paso a paso, te mostraremos cómo programar para que una placa Arduino Nano ESP32 se convierta en un servidor web. Podrás acceder a las páginas web alojadas en la placa Arduino Nano ESP32 usando un navegador web en tu ordenador o móvil, lo que te permitirá ver datos del Arduino Nano ESP32 y controlarlo. Para facilitarlo, avanzaremos de pasos simples a otros más desafiantes, tal como se detalla a continuación:
- Servidor Web Arduino Nano ESP32 - Mostrando texto simple en la página web.
- Servidor Web Arduino Nano ESP32 - Monitoreando valores de sensores desde el Arduino Nano ESP32 a través de una página web.
- Servidor Web Arduino Nano ESP32 - Controlando el Arduino Nano ESP32 a través de una página web.
- Servidor Web Arduino Nano ESP32 - Separando el contenido HTML (HTML, CSS y JavaScript) del código del Arduino Nano ESP32 y colocándolo en otros archivos en el IDE de Arduino.
- Servidor Web Arduino Nano ESP32 - Creando múltiples páginas como index.html, temperature.html, led.html, error_404.html, y error_405.html..., y más.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Arduino Nano ESP32 - Servidor Web Hola Mundo
Esto es relativamente simple. El código de Arduino Nano ESP32 realiza las siguientes tareas:
- Crear un servidor web que escuche solicitudes HTTP de un navegador web.
- Al recibir una solicitud de un navegador web, el Arduino Nano ESP32 responde con la siguiente información:
- Cabecera HTTP
- Cuerpo HTTP: Esto incluye contenido HTML con el mensaje "¡Hola, Mundo!".
- Si eres nuevo en Arduino Nano ESP32, consulta el tutorial sobre cómo configurar el entorno para Arduino Nano ESP32 en el IDE de Arduino.
- Conecta la placa Arduino Nano ESP32 a tu ordenador usando un cable USB.
- Abre el IDE de Arduino en tu ordenador.
- Selecciona la placa Arduino Nano ESP32 y su puerto COM correspondiente.
- Abre el Administrador de Bibliotecas haciendo clic en el icono del Administrador de Bibliotecas en la barra de navegación izquierda del IDE de Arduino.
- Busca “DIYables ESP32 WebServer”, luego localiza el DIYables ESP32 WebServer.
- Haz clic en el botón Instalar para instalar la biblioteca Web Server de DIYables.
- Copia el código anterior y ábrelo con Arduino IDE
- Cambia la información de wifi (SSID y contraseña) en el código por la tuya
- Haz clic en el botón Subir en Arduino IDE para subir el código a Arduino Nano ESP32
- Abre el Monitor Serial
- Revisa el resultado en el Monitor Serial
- Toma nota de la dirección IP que se muestra y escribe esa dirección en la barra de direcciones de un navegador web en tu teléfono inteligente o PC.
- Como resultado, verás la siguiente salida en el Monitor serie.
- Una vez que acceda al navegador web utilizando la dirección IP, se le mostrará una página web muy básica que muestra "¡Hola, ESP32!". La página se verá como la siguiente:
A continuación se muestra el código de Arduino Nano ESP32 que realiza las tareas anteriores:
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.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();
}
Pasos R\u00e1pidos
Para empezar con Arduino Nano ESP32, siga estos pasos:
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
COM6
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 /
Autoscroll
Clear output
9600 baud
Newline
Lectura del valor del sensor desde Arduino Nano ESP32 a través de la web
A continuación se muestra el código de Arduino Nano ESP32 que imprime el valor de la temperatura en la página web:
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.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();
}
Pasos R\u00e1pidos
- Copia el código anterior y ábrelo con Arduino IDE.
- Cambia la información de Wi‑Fi (SSID y contraseña) en el código por la tuya.
- Carga el código en Arduino Nano ESP32.
- Una vez que accedas al navegador web usando la dirección IP, se te presentará una página web muy básica que mostrará información sobre la placa Arduino Nano ESP32. La página se verá como la siguiente:
Para que la página web luzca fantástica con una interfaz gráfica de usuario (IGU), consulta la sección final de este tutorial.
※ Nota:
Con el código proporcionado arriba, para obtener la actualización de la temperatura, debes recargar la página en el navegador. En la próxima parte, aprenderemos cómo hacer que la página web actualice el valor de la temperatura en segundo plano sin recargar la página.
Controlar el Arduino Nano ESP32 a través de la web
Controlar algo conectado al Arduino Nano ESP32 es un poco más desafiante que simplemente leer un valor. Eso se debe a que el Arduino Nano ESP32 tiene que entender la solicitud que recibe del navegador web para saber qué acción tomar.
Para un ejemplo más completo y detallado, recomiendo consultar los tutoriales que se enumeran a continuación:
Separando contenido HTML en otro archivo en el IDE de Arduino
Si quieres crear una página web simple con contenido mínimo, puedes incrustar el HTML directamente en el código del Arduino Nano ESP32, como se explicó anteriormente.
Sin embargo, si quieres crear una página web más sofisticada e impresionante con más contenido, se vuelve inconveniente incluir todo el HTML, CSS y JavaScript directamente en el código del Arduino Nano ESP32. En esta situación, puedes usar un enfoque diferente para gestionar el código:
- El código de Arduino Nano ESP32 se colocará en un archivo .ino, como antes.
- El código HTML (HTML, CSS, Javascript) se colocará en un archivo separado .h. Esto permite mantener separado el contenido de la página web del código de Arduino Nano ESP32, lo que facilita su gestión y modificación.
Para ello, necesitamos realizar dos pasos importantes:
- Preparando contenido HTML
- Programación de Arduino Nano ESP32
Preparando contenido HTML
- Crear un archivo HTML en tu PC local que contenga el contenido HTML (HTML, CSS y JavaScript) para el diseño de la interfaz de usuario.
- En el archivo HTML, donde deben mostrarse los datos del Arduino Nano ESP32, usa un valor arbitrario.
- Prueba y modifícalo hasta que estés satisfecho.
- Colocaremos el contenido HTML en el archivo .h en el IDE de Arduino. Consulta el siguiente paso.
Programación de Arduino Nano ESP32
- Abre el IDE de Arduino y crea un nuevo sketch. Ponle un nombre, por ejemplo, newbiely.com.ino.
- Copia el código que se proporciona a continuación y pégalo en el archivo creado.
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.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();
}
- Cambia la información de WiFi (SSID y contraseña) en el código por la tuya
- Crea el archivo index.h en el IDE de Arduino siguiendo:
- O haz clic en el botón justo debajo del icono del monitor serie y elige Nueva pestaña, o usa Ctrl+Shift+N teclas.
- Escribe el nombre del archivo index.h y haz clic en el botón Aceptar.
- Copia el código de abajo y pégalo en el index.h.
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.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
- Reemplace la línea REPLACE_YOUR_HTML_CONTENT_HERE por el contenido HTML que preparó antes. No hay problema con el carácter de nueva línea. A continuación se muestra un ejemplo del archivo index.h:
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.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
- Ahora tienes el código en dos archivos: newbiely.com.ino y index.h
- Haz clic en el botón Subir en la IDE de Arduino para cargar el código al Arduino Nano ESP32
- Accede a la página web de la placa Arduino Nano ESP32 a través de un navegador web como antes. La verás tal como se muestra a continuación:
※ Nota:
En los códigos anteriores:
- El código HTML está diseñado para actualizar la temperatura en segundo plano a intervalos regulares, actualmente establecido cada 4 segundos en el código. Esto significa que el valor de la temperatura se actualiza automáticamente sin necesidad de recargar la página web manualmente. Puede ajustar el intervalo de actualización en el código para adaptarlo a sus preferencias.
- El código de Arduino Nano ESP32 sirve dos solicitudes desde el navegador web.
- Una solicitud para devolver el contenido HTML de la página web
- La otra para devolver el valor de la temperatura solicitado por la página web en segundo plano
Para una ilustración más completa y detallada, por favor consulte el Arduino Nano ESP32 - Sensor de temperatura DS18B20 vía Web tutorial
※ Nota:
- Si realizas cambios en el contenido HTML dentro del archivo index.h pero no modificas nada en el archivo newbiely.com.ino, el IDE de Arduino no actualizará ni refrescará el contenido HTML cuando compilas y cargas el código al Arduino Nano ESP32.
- Para forzar al IDE de Arduino a actualizar el contenido HTML en esta situación, debes realizar una modificación en el archivo newbiely.com.ino. Por ejemplo, puedes añadir una línea vacía o insertar un comentario. Esta acción desencadena que el IDE reconozca que ha habido cambios en el proyecto, asegurando que tu contenido HTML actualizado se incluya en la subida.
Arduino Nano ESP32 Servidor Web - Múltiples Páginas
Consulta este tutorial Arduino Nano ESP32 - Web Server Multiple Pages.