Arduino Nano ESP32 - Servidor web en tarjeta microSD
En este tutorial, exploraremos el proceso de crear un servidor web con Arduino Nano ESP32 alojado en una tarjeta MicroSD. Todos los archivos HTML, CSS, JavaScript e imágenes necesarios residirán en la tarjeta MicroSD.
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.
Acerca de Arduino Nano ESP32 y el servidor web
Tenemos tutoriales específicos sobre Arduino Nano ESP32, Servidor Web y Tarjeta microSD. Cada tutorial contiene información detallada y instrucciones paso a paso sobre la disposición de pines de hardware, principio de funcionamiento, conexiones de cableado al Arduino Nano ESP32, código para Arduino Nano ESP32... Obtén más información sobre ellos en los siguientes enlaces:
Diagrama de Cableado
This image is created using Fritzing. Click to enlarge image
Copiar contenidos HTML a la tarjeta MicroSD
- Por favor, asegúrese de que su tarjeta microSD esté formateada en FAT32 como se muestra a continuación (en Windows, haga clic derecho → Formatear):
- Crea un archivo HTML index.html y agrega el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arduino Nano ESP32 Web Page</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Web Page hosted on MicroSD Card</h1>
<img src="luffy.jpg" alt="A beautiful image">
<p>Sponsored by <a href="https://amazon.com/diyables">DIYables</a></p>
</div>
</body>
</html>
- Crea un archivo CSS styles.css y añade el siguiente código:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: white;
}
h1 {
font-size: 28px;
}
.container {
max-width: 800px;
margin: 20px auto;
text-align: center;
}
img {
max-width: 80%;
height: auto;
display: block;
margin: 20px auto;
}
- Preparar una imagen. Este tutorial utiliza luffy.jpg, que se usa en código HTML. Puedes descargar esta imagen aquí:
- (Opcional) Preparar la imagen de favicon. Este tutorial usa este favicon.ico
- Coloca todos los archivos en el directorio raíz de la tarjeta MicroSD, como se muestran en las imágenes a continuación:
Tenga en cuenta que puede agregar otros archivos, como JavaScript, txt, csv...
Código de Arduino Nano ESP32 - Servidor web en tarjeta microSD
/*
* 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-on-sd-card
*/
#include <FS.h>
#include <SD.h>
#define PIN_SPI_CS D4 // The Arduino Nano ESP32 pin connected to the CS pin of SD card module
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
void setup() {
Serial.begin(9600);
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// init MicroSD Card
if (!SD.begin(PIN_SPI_CS)) {
while (1) {
Serial.println(F("SD CARD FAILED, OR NOT PRESENT!"));
delay(1000);
}
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
request->send(SD, "/index.html", "text/html");
});
server.serveStatic("/", SD, "/");
server.begin();
}
=================
#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;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
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
- Si es la primera vez que usas ESP32, consulta cómo configurar el entorno para Arduino Nano ESP32 en Arduino IDE.
- Conecta la placa Arduino Nano ESP32 a tu PC mediante un cable micro USB
- Abre el IDE de Arduino en tu PC.
- Selecciona la placa Arduino Nano ESP32 y el puerto COM.
- Abre el icono Administrador de Bibliotecas en la barra de navegación izquierda del IDE de Arduino haciendo clic.
- Busca “DIYables ESP32 WebServer”, luego encuentra la biblioteca Web Server creada por DIYables.
- Haz clic en el botón Instalar para instalar la biblioteca Web Server.
- 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
- Haz clic en Subir en Arduino IDE para subir el código al ESP32
- Abre el Monitor Serial
- Verifica el resultado en el Monitor Serial.
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Al acceder al Monitor Serial, encontrarás una dirección IP, como: 192.168.0.3.
- Ingresa la dirección IP proporcionada en la barra de direcciones de un navegador web, ya sea en tu teléfono inteligente o en tu PC.
- Ten en cuenta que debes sustituir '192.168.0.3' por la dirección IP que se muestra en el Monitor Serial.
- Al ingresar la dirección IP, se cargará una página con HTML, CSS e imágenes desde la tarjeta SD.
- Al inspeccionarlo, notarás que el navegador web carga con éxito HTML, CSS e imágenes almacenadas en la tarjeta SD.
Siéntete libre de personalizar el código HTML y CSS, y de incluir imágenes adicionales y JavaScript para crear tu propia página web única.