Ejemplo de WebApp personalizada para ESP32 - Tutorial de interfaz web simple para principiantes
Visión general
Este ejemplo proporciona una plantilla completa para crear tus propias aplicaciones web personalizadas que se integran a la perfección con la Biblioteca WebApps ESP32 de DIYables.
La plantilla CustomWebApp es perfecta para principiantes que desean añadir su propia interfaz web al ecosistema de DIYables ESP32 WebApps. Este tutorial te muestra cómo construir una página web simple con intercambio de datos bidireccional en tiempo real entre el navegador y el ESP32 a través de WebSocket que puede:
- Enviar mensajes de texto desde un navegador web al ESP32 al instante mediante WebSocket
- Recibir mensajes desde el ESP32 y mostrarlos en tiempo real en la página web
- Mantener una conexión WebSocket persistente para una comunicación continua
- Reconexión automática cuando se pierde la conexión WebSocket
- Trabajar en dispositivos móviles con diseño responsive
Diseñado para ESP32 - esta plantilla se integra perfectamente con las aplicaciones web existentes de DIYables y proporciona la base para construir tus propias interfaces de IoT personalizadas!
Esta plantilla proporciona código mínimo para empezar. Los usuarios pueden desarrollar sus propias aplicaciones web sofisticadas modificando esta plantilla. Se recomienda tener conocimientos básicos de programación web (HTML, CSS, JavaScript) para personalizar la interfaz web y añadir características avanzadas.
Lo que aprenderás
- Cómo crear una aplicación web personalizada que se integre con la Biblioteca DIYables ESP32 WebApps
- Cómo añadir tu página personalizada al ecosistema de aplicaciones web de DIYables
- Cómo enviar mensajes de texto desde el navegador web al ESP32
- Cómo enviar datos desde el ESP32 al navegador web
- Cómo manejar las conexiones WebSocket y la reconexión automática
- Cómo hacer interfaces web que se adapten a dispositivos móviles
- Cómo usar el sistema de plantillas DIYables ESP32 WebApps para desarrollo rápido
Características
- Integración de DIYables ESP32 WebApps: Se integra sin problemas con el ecosistema de la biblioteca DIYables ESP32 WebApps.
- Código de plantilla mínimo: Proporciona una base básica que puedes ampliar y personalizar.
- Desarrollo basado en plantillas: Un punto de partida completo que puedes modificar para crear aplicaciones sofisticadas.
- Mensajería de texto simple: Envía mensajes entre el navegador web y Arduino.
- Reconexión automática: Se reconecta automáticamente cuando se pierde la conexión.
- Diseño móvil adaptable: Funciona perfectamente en teléfonos, tabletas y computadoras.
- Amigable para principiantes: Código limpio y sencillo que es fácil de entender.
- Framework extensible: Se requieren conocimientos básicos de programación web (HTML/CSS/JavaScript) para una personalización avanzada.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 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.
Cómo empezar
Puede comenzar a construir su aplicación web personalizada para la placa ESP32 siguiendo los siguientes pasos principales:
- Ejecutar la plantilla de aplicación personalizada predeterminada en tu placa ESP32
- Probar y verificar que la aplicación web personalizada predeterminada funciona correctamente
- Comprender el protocolo de comunicación y cómo funciona en segundo plano
- Modificar la plantilla para adaptar tu aplicación
- Gestión de múltiples aplicaciones web personalizadas - Guía esencial para prevenir conflictos
Empecemos uno por uno.
Ejecuta la Plantilla de Aplicación Personalizada Predeterminada en tu placa ESP32
Pasos R\u00e1pidos
- Si es la primera vez que usas el ESP32, consulta el tutorial sobre configurar el entorno para ESP32 en el IDE de Arduino
- Conecta la placa ESP32 a tu computadora mediante un cable USB
- Inicia el IDE de Arduino en tu computadora
- Selecciona la placa ESP32 adecuada (p. ej. ESP32 Dev Module) y el puerto COM
- Navega hasta el icono Bibliotecas en la barra izquierda del IDE de Arduino
- Busca "DIYables ESP32 WebApps", luego localiza la biblioteca DIYables ESP32 WebApps de DIYables
- Haz clic en el botón Instalar para instalar la biblioteca
- Se le pedirá instalar algunas dependencias de la biblioteca
- Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca
- En el IDE de Arduino, ve a Archivo > Ejemplos > DIYables ESP32 WebApps > CustomWebApp
- Verás 4 archivos que componen la plantilla completa de la aplicación web personalizada:
- CustomWebApp.ino - Código principal de ESP32 (¡aquí es donde puedes añadir tu lógica personalizada!)
- CustomWebApp.h - Archivo de encabezado (que define la interfaz para la biblioteca WebApps ESP32 de DIYables)
- CustomWebApp.cpp - Archivo de implementación (maneja la integración con el marco de la biblioteca)
- custom_page_html.h - diseño de página web (¡personaliza tu interfaz web aquí!)
- Configura la red WiFi cambiando estas líneas en CustomWebApp.ino:
const char WIFI_SSID[] = "YOUR_WIFI_NAME";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Paso 5: Subir y Probar
- Haz clic en el botón Subir en el IDE de Arduino para subir código al ESP32
- Abre el Monitor Serial para ver el estado de la conexión
- Toma nota de la dirección IP que se muestra en el Monitor Serial
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial. Se muestra a continuación
COM6
Starting Custom WebApp...
INFO: Added app /
INFO: Added app /custom
DIYables WebApp Library
Platform: ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
🔧 Custom WebApp: http://192.168.0.2/custom
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Si no ves nada, reinicia la placa ESP32.
- Toma nota de la dirección IP que se muestre y escribe esta dirección en la barra de direcciones de un navegador web en tu smartphone o PC.
- Ejemplo: http://192.168.0.2
- Verás la página de inicio tal como se muestra en la imagen a continuación:
- Haz clic en el enlace Web Custom, verás la interfaz de usuario de la aplicación Web Custom como se muestra a continuación:
- O también puedes acceder a la página directamente mediante la dirección IP, seguida de /custom. Por ejemplo: http://[IP_ADDRESS]/custom
Probar y Verificar que la Aplicación Web Personalizada Predeterminada Funcione Correctamente
Al ejecutar la plantilla predeterminada de CustomWebApp, esto es lo que deberías ver:
En la interfaz web:
- Estado de la conexión: Muestra "Conectado" en azul cuando WebSocket está activo
- Campo de entrada de mensajes: Campo de texto para escribir mensajes para Arduino
- Botón Enviar: Haz clic para enviar tu mensaje (o pulsa Enter)
- Pantalla de mensajes de Arduino: Muestra mensajes recibidos desde ESP32 en texto azul
Comportamiento del ESP32:
- Respuesta de Eco: Cuando envíes "Hello" desde la web, el ESP32 responde con "Echo: Hello"
- Actualizaciones periódicas: ESP32 envía mensajes de tiempo de actividad cada 5 segundos: "Tiempo de actividad de Arduino: X segundos"
- Monitor serie: Todos los mensajes recibidos se registran para depuración
Prueba la comunicación:
- Escribe un mensaje en la caja de entrada (p. ej., "mensaje de prueba")
- Haz clic en Enviar o pulsa Enter
- Ver el Monitor Serial - deberías ver: "Recibido desde la web: mensaje de prueba"
- Ver la página web - deberías ver: "Eco: mensaje de prueba"
- Espera unos segundos - verás mensajes de tiempo de actividad periódicos actualizados cada 3 segundos (p. ej., "Tiempo de actividad de Arduino: 15 segundos", "Tiempo de actividad de Arduino: 18 segundos", etc.)
Comprender el protocolo de comunicación y cómo funciona en segundo plano
Entender los mecanismos internos te ayuda a personalizar la plantilla de manera efectiva.
Sistema de identificadores de aplicaciones
La plantilla CustomWebApp utiliza etiquetas de mensaje únicas (llamadas "Identificadores de Aplicación") que ayudan al código ESP32 y a los clientes web a filtrar los mensajes que les pertenecen. Esto es esencial porque su aplicación puede incluir varias aplicaciones web, y cada aplicación necesita procesar solo sus propios mensajes mientras ignora los demás:
Lado del ESP32 (CustomWebApp.h y CustomWebApp.cpp)
// In CustomWebApp.h
class CustomWebAppPage : public DIYablesWebAppPageBase {
private:
// WebSocket message identifier for this custom app
static const String APP_IDENTIFIER;
// ...
};
// In CustomWebApp.cpp
const String CustomWebAppPage::APP_IDENTIFIER = "CUSTOM:";
// Usage in handleWebSocketMessage:
if (message.startsWith(APP_IDENTIFIER)) {
String payload = message.substring(APP_IDENTIFIER.length());
// Process clean payload without identifier
}
// Usage in sendToWeb:
broadcastToAllClients(APP_IDENTIFIER + message);
Lado de JavaScript (custom_page_html.h)
// WebSocket message identifier for this custom app
const APP_IDENTIFIER = 'CUSTOM:';
// Usage in receiving:
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Process clean message without identifier
}
// Usage in sending:
ws.send(APP_IDENTIFIER + userInput);
Beneficios de este diseño:
- Fuente única de verdad: Cambiar el identificador en un solo lugar por idioma
- Sin cadenas mágicas: Elimina las cadenas codificadas 'CUSTOM:' en todo el código
- Seguridad de tipos: El uso de constantes previene errores tipográficos
- Extensible: Fácil crear varias aplicaciones personalizadas con identificadores diferentes
- Evitar conflictos de datos entre varias aplicaciones: Cada aplicación utiliza un identificador único para evitar interferencias de mensajes
- Profesional: Sigue principios de diseño orientado a objetos
Notas importantes:
- Puedes mantener el identificador actual "CUSTOM:" al modificar esta plantilla de aplicación web personalizada para adaptarla a tu proyecto. Sin embargo, cuando crees más de una aplicación personalizada, asegúrate de cambiarlo para evitar conflictos.
- Si cambias el identificador, asegúrate de que el valor en JavaScript (.h file) y en el código ESP32 (.cpp file) sean los mismos (p. ej., que ambos usen "TEMP:" o que ambos usen "SENSOR:").
- Identificadores prereservados por aplicaciones integradas: Los siguientes identificadores ya están en uso por las aplicaciones integradas de WebApps de DIYables ESP32 y deben evitarse:
- Identificadores principales de la aplicación: "CHAT:", "MONITOR:", "PLOTTER:", "DIGITAL_PINS:", "JOYSTICK:", "SLIDER:", "TABLE:", "RTC:", "ROTATOR:", "GAUGE:"
- Identificadores de subprotocolo: "TIME:", "DATETIME:", "JOYSTICK_CONFIG:", "PLOTTER_DATA:", "PLOTTER_CONFIG:", "SLIDER_VALUES:", "TABLE_CONFIG:", "TABLE_DATA:", "VALUE_UPDATE:", "PIN_CONFIG:", "PIN_STATES:", "PIN_UPDATE:"
Flujo de Comunicación
De la página web al ESP32:
Cuando escribes un mensaje en la interfaz web y haces clic en el botón Enviar, por ejemplo: Hello, ocurre el siguiente flujo:
- JavaScript agrega identificador: JavaScript agrega automáticamente el identificador de la aplicación (que es "CUSTOM:" en esta plantilla) utilizando la constante APP_IDENTIFIER, luego envía un mensaje al ESP32 vía WebSocket. El mensaje real enviado es: CUSTOM:Hello
- La biblioteca DIYables ESP32 WebApps recibe: La biblioteca DIYables ESP32 WebApps recibe el mensaje CUSTOM:Hello y lo pasa a tu método CustomWebAppPage::handleWebSocketMessage
- La clase CustomWebAppPage elimina el identificador: En handleWebSocketMessage, la clase CustomWebAppPage verifica si el mensaje comienza con su APP_IDENTIFIER, elimina el identificador usando .substring(APP_IDENTIFIER.length()), y luego pasa el mensaje restante Hello invocando la función de callback implementada en tu archivo .ino
- Tu aplicación maneja: Tu aplicación en el archivo .ino recibe únicamente Hello y puede manejar el mensaje según tu lógica personalizada. La plantilla actual solo lo imprime y envía una respuesta
De ESP32 a la página web:
Cuando tu ESP32 quiere enviar datos a la interfaz web, por ejemplo: Temperature: 25°C, se produce el siguiente flujo:
- Tu aplicación llama a sendToWeb(): En tu archivo .ino, llamas a customPage.sendToWeb("Temperature: 25°C") para enviar datos al navegador web
- La clase CustomWebAppPage añade identificador y transmite: La clase CustomWebAppPage añade automáticamente el identificador de la aplicación usando su constante APP_IDENTIFIER a tu mensaje y transmite CUSTOM:Temperature: 25°C a todos los clientes web conectados vía WebSocket
- JavaScript recibe y filtra el mensaje: El navegador web recibe CUSTOM:Temperature: 25°C a través del manejador de eventos ws.onmessage, pero JavaScript solo procesa mensajes que empiezan con APP_IDENTIFIER y elimina el identificador usando .substring(APP_IDENTIFIER.length())
- La página web muestra el mensaje limpio: La plantilla actual muestra el mensaje limpio Temperature: 25°C (sin identificador) en la sección "Mensaje de Arduino". Puedes personalizar el JavaScript para analizar y mostrar los datos de distintas maneras según las necesidades de tu aplicación
Visión general de la arquitectura
El ejemplo de CustomWebApp consta de cuatro archivos principales:
- CustomWebApp.ino - Sketch principal de ESP32 con la lógica de tu aplicación
- CustomWebApp.h - Archivo de cabecera que define la clase de la página personalizada (interfaz de la biblioteca)
- CustomWebApp.cpp - Implementación con la lógica de comunicación (código de la biblioteca)
- custom_page_html.h - Interfaz HTML separada para facilitar la personalización
Modifica la plantilla para adaptar tu aplicación
La plantilla está diseñada para ser fácilmente personalizable para tus necesidades específicas. Así es como puedes adaptarla:
1. Integración de hardware
Añadir inicialización de hardware
En la función setup() de CustomWebApp.ino:
void setup() {
Serial.begin(9600);
// Add your hardware initialization here
pinMode(LED_BUILTIN, OUTPUT); // Built-in LED
pinMode(3, OUTPUT); // PWM output pin
pinMode(4, INPUT_PULLUP); // Button input with pullup
pinMode(A0, INPUT); // Analog sensor input
// Initialize sensors, displays, motors, etc.
// servo.attach(9);
// lcd.begin(16, 2);
// Rest of setup...
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&customPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
Gestión de comandos personalizados
Extienda la función de devolución de llamada para manejar sus comandos personalizados:
customPage.onCustomMessageReceived([](const String& message) {
Serial.println("Received: " + message);
// LED Control
if (message == "led_on") {
digitalWrite(LED_BUILTIN, HIGH);
customPage.sendToWeb("LED turned ON");
}
else if (message == "led_off") {
digitalWrite(LED_BUILTIN, LOW);
customPage.sendToWeb("LED turned OFF");
}
// Servo Control
else if (message.startsWith("servo:")) {
int angle = message.substring(6).toInt(); // Get number after "servo:"
// servo.write(angle);
customPage.sendToWeb("Servo moved to " + String(angle) + " degrees");
}
// Sensor Reading Request
else if (message == "get_temperature") {
float temp = readTemperatureSensor(); // Your sensor function
customPage.sendToWeb("Temperature: " + String(temp) + "°C");
}
// Add more custom commands here
});
Enviar datos de sensores en tiempo real
void loop() {
webAppsServer.loop();
// Send sensor data every 3 seconds
static unsigned long lastSend = 0;
if (millis() - lastSend > 3000) {
// Read your sensors
int lightLevel = analogRead(A0);
bool buttonPressed = !digitalRead(4); // Inverted due to pullup
float temperature = readTemperatureSensor();
// Send to web interface
customPage.sendToWeb("Light: " + String(lightLevel));
customPage.sendToWeb("Button: " + String(buttonPressed ? "Pressed" : "Released"));
customPage.sendToWeb("Temp: " + String(temperature) + "°C");
lastSend = millis();
}
}
2. Personalización de la interfaz web
Modificar el diseño de HTML
Edita el HTML en custom_page_html.h para cambiar la interfaz:
<!-- Add new controls -->
<div>
<h3>🔌 Device Control</h3>
<button onclick="send('led_on')">LED ON</button>
<button onclick="send('led_off')">LED OFF</button>
<br><br>
<label>Servo Angle:</label>
<input type="range" id="servoSlider" min="0" max="180" value="90"
onchange="send('servo:' + this.value)">
<span id="servoValue">90°</span>
</div>
<div>
<h3>📊 Sensor Data</h3>
<div>Temperature: <span id="tempValue">--°C</span></div>
<div>Light Level: <span id="lightValue">--</span></div>
<div>Button Status: <span id="buttonValue">--</span></div>
</div>
Personalizar el procesamiento de JavaScript
Actualiza la función ws.onmessage para manejar tipos de datos específicos:
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Display all messages in general area
document.getElementById('rawMessage').textContent = message;
// Handle specific message types
if (message.startsWith('Temperature:')) {
let temp = message.split(':')[1].trim();
document.getElementById('tempValue').textContent = temp;
}
else if (message.startsWith('Light:')) {
let light = message.split(':')[1].trim();
document.getElementById('lightValue').textContent = light;
}
else if (message.startsWith('Button:')) {
let button = message.split(':')[1].trim();
document.getElementById('buttonValue').textContent = button;
}
}
};
Añadir Estilo
Personaliza el CSS para tu aplicación:
<style>
.control-panel {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
padding: 20px;
margin: 10px 0;
color: white;
}
.sensor-display {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 15px;
margin: 10px 0;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
</style>
Otra personalización
Más allá de modificar la interfaz web y la integración de hardware, también puedes personalizar cómo aparece tu aplicación en el ecosistema de DIYables ESP32 WebApps:
1. Personalizar la ruta de la aplicación
Puede cambiar la ruta de la URL desde la que su aplicación web personalizada es accesible modificando el constructor en su archivo de encabezado:
Ruta predeterminada:
// In CustomWebApp.cpp - Default path is "/custom"
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {
}
Ejemplos de rutas personalizadas:
// Temperature monitoring app
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/new-path") {
}
// Accessible at: http://[IP_ADDRESS]/new-path
Notas importantes:
- La ruta debe empezar con "/": Siempre comience su ruta con una barra diagonal
- Utilice nombres descriptivos: Elija rutas que describan claramente la función de su aplicación
- Evite conflictos: No utilice rutas ya tomadas por aplicaciones integradas como /chat, /monitor, /plotter, etc.
- Utilice minúsculas y guiones: Siga las convenciones de URL web para una mejor compatibilidad
2. Personalizar la tarjeta de la aplicación en la página de inicio
Puedes personalizar cómo aparece tu aplicación en la página de inicio de DIYables ESP32 WebApps modificando el método getNavigationInfo() en tu archivo de implementación:
Tarjeta de la aplicación básica:
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\">"
"<h3>🔧 Custom App</h3>"
"<p>My custom web application</p>"
"</a>";
}
Tarjeta de aplicación avanzada con CSS en línea:
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\" "
"style=\"background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\">"
"<h3>🌡️ Temperature Monitor</h3>"
"<p>Real-time temperature monitoring</p>"
"</a>";
}
Administrar múltiples aplicaciones web personalizadas - Guía esencial para la prevención de conflictos
Al desarrollar varias aplicaciones web personalizadas, es crucial evitar conflictos entre diferentes aplicaciones. Supongamos que queremos agregar tres aplicaciones personalizadas llamadas "Temperature Monitor", "Motor Controller" y "Sensor Dashboard" a nuestro proyecto ESP32. Así es como puedes asegurarte de que funcionen juntas de forma armoniosa:
1. Usar identificadores únicos de la aplicación
Cada aplicación web personalizada debe tener un identificador único para evitar conflictos de mensajes:
Ejemplo: Aplicación de Monitoreo de Temperatura
// In TemperatureApp.cpp
const String TemperatureAppPage::APP_IDENTIFIER = "TEMP:";
// JavaScript in temperature_page_html.h
const APP_IDENTIFIER = 'TEMP:';
Ejemplo: Aplicación de Controlador de Motor
// In MotorApp.cpp
const String MotorAppPage::APP_IDENTIFIER = "MOTOR:";
// JavaScript in motor_page_html.h
const APP_IDENTIFIER = 'MOTOR:';
Ejemplo: Aplicación de panel de sensores
// In SensorApp.cpp
const String SensorAppPage::APP_IDENTIFIER = "SENSOR:";
// JavaScript in sensor_page_html.h
const APP_IDENTIFIER = 'SENSOR:';
2. Utiliza rutas de página únicas
Cada aplicación web necesita una ruta URL única:
// Temperature App
TemperatureAppPage::TemperatureAppPage() : DIYablesWebAppPageBase("/temperature") {
}
// Motor Controller App
MotorAppPage::MotorAppPage() : DIYablesWebAppPageBase("/motor") {
}
// Sensor Dashboard App
SensorAppPage::SensorAppPage() : DIYablesWebAppPageBase("/sensors") {
}
3. Usa nombres de clase únicos
Evita conflictos de nombres usando nombres de clase descriptivos:
// Instead of multiple "CustomWebAppPage" classes
class TemperatureMonitorPage : public DIYablesWebAppPageBase { };
class MotorControllerPage : public DIYablesWebAppPageBase { };
class SensorDashboardPage : public DIYablesWebAppPageBase { };
4. Organizar varias aplicaciones en un solo proyecto
Así es como estructurar un proyecto con varias aplicaciones personalizadas:
// In main .ino file
#include "TemperatureApp.h"
#include "MotorApp.h"
#include "SensorApp.h"
// Create instances
DIYablesHomePage homePage;
TemperatureMonitorPage tempPage;
MotorControllerPage motorPage;
SensorDashboardPage sensorPage;
void setup() {
// Add all pages to server
webAppsServer.addApp(&homePage); // pre-built app
webAppsServer.addApp(&tempPage);
webAppsServer.addApp(&motorPage);
webAppsServer.addApp(&sensorPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
// Set up callbacks for each app
tempPage.onTemperatureMessageReceived([](const String& message) {
// Handle temperature app messages
});
motorPage.onMotorMessageReceived([](const String& message) {
// Handle motor app messages
});
sensorPage.onSensorMessageReceived([](const String& message) {
// Handle sensor app messages
});
}
5. Mejores Prácticas para Múltiples Aplicaciones
Organización de archivos
MyProject/
├── MyProject.ino // Main sketch
├── TemperatureApp.h // Temperature app header
├── TemperatureApp.cpp // Temperature app implementation
├── temperature_page_html.h // Temperature app web page
├── MotorApp.h // Motor app header
├── MotorApp.cpp // Motor app implementation
├── motor_page_html.h // Motor app web page
├── SensorApp.h // Sensor app header
├── SensorApp.cpp // Sensor app implementation
└── sensor_page_html.h // Sensor app web page
Navegación entre aplicaciones
Actualiza el método getNavigationInfo() en cada aplicación para facilitar la navegación:
String TemperatureMonitorPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card temperature\">"
"<h3>🌡️ Temperature Monitor</h3>"
"<p>View real-time temperature data</p>"
"</a>";
}
String MotorControllerPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card motor\">"
"<h3>⚙️ Motor Controller</h3>"
"<p>Control servo and stepper motors</p>"
"</a>";
}
6. Pruebas de varias aplicaciones
Al probar varias aplicaciones:
- Prueba cada aplicación de forma individual primero
- Verifica el Monitor Serial para conflictos de mensajes
- Verifica que los identificadores únicos funcionen correctamente
- Prueba la navegación entre diferentes aplicaciones
- Monitorea el uso de memoria con varias aplicaciones cargadas
Siguiendo estas pautas, puedes crear múltiples aplicaciones web personalizadas que funcionen juntas sin interferir entre sí ni con otras aplicaciones web ESP32 de DIYables.