Home
Arduino UNO R4

Ejemplo de WebApp personalizado de Arduino - 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 sin problemas con la biblioteca DIYables WebApps.

Ejemplo de WebApp personalizada de Arduino: Tutorial para crear tu propia interfaz web

¡La plantilla CustomWebApp es perfecta para principiantes que quieren añadir su propia interfaz web al ecosistema de WebApps de DIYables! Este tutorial te muestra cómo construir una página web simple con intercambio de datos bidireccional en tiempo real entre el navegador web y Arduino a través de WebSocket que puede:

  • Enviar mensajes de texto desde el navegador web al Arduino al instante a través de WebSocket
  • Recibir mensajes desde el Arduino 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 la conexión WebSocket se pierde
  • Funciona en dispositivos móviles con diseño responsive

Diseñado para Arduino Uno R4 WiFi y DIYables STEM V4 IoT - esta plantilla se integra perfectamente con las aplicaciones web existentes de DIYables y proporciona la base para construir tus propias interfaces IoT personalizadas!

Esta plantilla ofrece código mínimo para empezar. Los usuarios pueden desarrollar sus propias aplicaciones web sofisticadas modificando esta plantilla. Se recomiendan conocimientos básicos de programación web (HTML, CSS, JavaScript) para personalizar la interfaz web y agregar características avanzadas.

Qué aprenderás

  • Cómo crear una aplicación web personalizada que se integre con la librería DIYables WebApps
  • Cómo añadir tu página personalizada al ecosistema de aplicaciones web DIYables
  • Cómo enviar mensajes de texto desde el navegador web al Arduino
  • Cómo enviar datos desde Arduino al navegador web
  • Cómo gestionar las conexiones WebSocket y la reconexión automática
  • Cómo hacer interfaces web adaptables para móviles
  • Cómo usar el sistema de plantillas de DIYables WebApps para un desarrollo rápido

Características

  • Integración de DIYables WebApps: Se integra sin problemas con el ecosistema de bibliotecas de DIYables 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: Enviar mensajes entre el navegador web y Arduino
  • Reconexión automática: Se reconecta automáticamente cuando se pierde la conexión
  • Diseño adaptable a dispositivos móviles: Funciona perfectamente en teléfonos, tabletas y computadoras
  • Amigable para principiantes: Código limpio y sencillo que es fácil de entender
  • Marco de trabajo extensible: Requiere conocimiento básico de programación web (HTML/CSS/JavaScript) para una personalización avanzada
  • Plataforma extensible: Actualmente implementado para Arduino Uno R4 WiFi, pero puede ampliarse para otras plataformas de hardware. Ver DIYables_WebApps_ESP32

Hardware Requerido

1×Arduino UNO R4 WiFi
1×Alternatively, DIYables STEM V4 IoT
1×Cable USB Tipo-A a Tipo-C (para PC USB-A)
1×Cable USB Tipo-C a Tipo-C (para PC USB-C)
1×(Recomendado) Shield de Bloque de Terminales de Tornillo para Arduino Uno R4
1×(Recomendado) Shield de Protoboard para Arduino Uno R4
1×(Recomendado) Carcasa para Arduino Uno R4
1×(Recomendado) Divisor de Alimentación para Arduino Uno R4
1×(Recomendado) Placa Base de Prototipado y Kit de Protoboard para Arduino Uno

Or you can buy the following kits:

1×DIYables STEM V4 IoT Starter Kit (Arduino 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 Arduino Uno R4/DIYables STEM V4 IoT siguiendo los siguientes pasos principales:

  • Ejecuta la plantilla predeterminada de la aplicación personalizada en tu placa Arduino
  • Prueba y verifica que la aplicación web personalizada predeterminada funcione correctamente
  • Comprende el protocolo de comunicación y cómo funciona en segundo plano
  • Modifica la plantilla para adaptar tu aplicación
  • Gestiona varias aplicaciones web personalizadas - guía esencial para prevenir conflictos

Empecemos uno por uno.

Ejecuta la plantilla de la aplicación personalizada predeterminada en tu placa Arduino

Pasos R\u00e1pidos

  • Si es la primera vez que usa el Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulte el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/DIYables STEM V4 IoT en el IDE de Arduino
  • Conecte la placa Arduino Uno R4/DIYables STEM V4 IoT a su computadora usando un cable USB
  • Inicie el IDE de Arduino en su computadora
  • Seleccione la placa Arduino Uno R4 adecuada (p. ej., Arduino Uno R4 WiFi) y el puerto COM
  • Vaya al ícono Bibliotecas en la barra izquierda del IDE de Arduino
  • Busque "DIYables WebApps", luego encuentre la biblioteca DIYables WebApps de DIYables
  • Haga clic en el botón Instalar para instalar la biblioteca
Biblioteca WebApps de DIYables para Arduino UNO R4
  • Se le pedirá instalar algunas otras dependencias de la biblioteca
  • Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca
Dependencia de WebApps DIYables para Arduino UNO R4
  • En el IDE de Arduino, ve a File > Examples > DIYables WebApps > CustomWebApp
  • Verás 4 archivos que componen la plantilla completa de la aplicación web personalizada:
  • CustomWebApp.ino - Código principal de Arduino (¡aquí es donde agregas tu lógica personalizada!)
  • CustomWebApp.h - Archivo de encabezado (que define la interfaz de la biblioteca WebApps de DIYables)
  • CustomWebApp.cpp - Archivo de implementación (se encarga de la integración con el framework de la biblioteca)
  • custom_page_html.h - Diseño de página web (¡personaliza aquí tu interfaz web!)
  • Configura los ajustes de 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

  • Haga clic en el botón Cargar en el IDE de Arduino para subir el código al Arduino UNO R4/DIYables STEM V4 IoT
  • Abra el Monitor Serial para ver el estado de la conexión
  • Observe la dirección IP que se muestra en el Monitor Serial
  • Abra el Monitor Serial
  • Revise el resultado en el Monitor Serial. Se muestra a continuación
COM6
Send
Starting Custom WebApp... INFO: Added app / INFO: Added app /custom DIYables WebApp Library Platform: Arduino Uno R4 WiFi 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 Show timestamp
Clear output
9600 baud  
Newline  
  • Si no ves nada, reinicia la placa Arduino.
  • Toma nota de la dirección IP que aparezca y escribe esta dirección en la barra de direcciones de un navegador web en tu teléfono inteligente o PC.
  • Ejemplo: http://192.168.0.2
  • Verás la página de inicio como en la imagen de abajo:
Página de inicio de la WebApp DIYables para Arduino UNO R4 con la aplicación web personalizada
  • Haz clic en el enlace Web Custom; verás la interfaz de usuario de la aplicación Web Custom como se muestra abajo.
Arduino UNO R4 DIYables Aplicación Web Web App Aplicación personalizada
  • 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 por defecto 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 el WebSocket está activo
  • Cuadro de entrada de mensajes para Arduino: Campo de texto para escribir mensajes para Arduino
  • Botón Enviar: Haz clic para enviar tu mensaje (o pulsa Enter)
  • Visualización de mensajes de Arduino: Muestra mensajes recibidos desde Arduino en texto azul

Comportamiento de Arduino:

  • Respuesta de Eco: Cuando envíes "Hola" desde la web, Arduino responde con "Eco: Hola"
  • Actualizaciones Periódicas: Arduino 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:

  1. Escribe un mensaje en la caja de entrada (p. ej., "mensaje de prueba")
  2. Haz clic en Enviar o pulsa Enter
  3. Ver Monitor Serial - deberías ver: "Recibido desde la web: mensaje de prueba"
  4. Ver página web - deberías ver: "Eco: mensaje de prueba"
  5. 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

Comprender los mecanismos internos te ayuda a personalizar la plantilla de manera efectiva.

Sistema de identificadores de aplicaciones

La plantilla CustomWebApp utiliza etiquetas de mensajes únicas (llamadas "Identificadores de la App") que ayudan al código de Arduino y a los clientes web a filtrar los mensajes que les pertenecen. Esto es esencial porque tu aplicación puede incluir varias aplicaciones web, y cada app necesita procesar solo sus propios mensajes mientras ignora a los demás:

Lado de Arduino (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 para cada lenguaje
  • 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 múltiples aplicaciones personalizadas con identificadores diferentes
  • Evitar conflictos de datos entre múltiples 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 adaptar 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 el código de Arduino (.cpp file) sean el mismo (p. ej., que ambos usen "TEMP:" o que ambos usen "SENSOR:").
  • Identificadores pre-reservados por las aplicaciones integradas: Los siguientes identificadores ya están siendo utilizados por las aplicaciones integradas de DIYables WebApps 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 a Arduino:

Cuando escribes un mensaje en la interfaz web y haces clic en el botón de enviar, por ejemplo: Hello, se produce el siguiente flujo:

  1. JavaScript agrega identificador: JavaScript agrega automáticamente el identificador de la aplicación (que es "CUSTOM:" en esta plantilla) usando la constante APP_IDENTIFIER, y luego envía el mensaje a Arduino a través de WebSocket. El mensaje real enviado es: CUSTOM:Hello
  2. La biblioteca DIYables WebApps recibe: La biblioteca recibe el mensaje CUSTOM:Hello y lo pasa a tu método CustomWebAppPage::handleWebSocketMessage
  3. La clase CustomWebAppPage elimina el identificador: En handleWebSocketMessage, la clase CustomWebAppPage verifica si el mensaje empieza con su APP_IDENTIFIER, elimina el identificador usando .substring(APP_IDENTIFIER.length()), y luego pasa el mensaje restante Hello llamando a la función de callback implementada en tu archivo .ino.
  4. Tu aplicación maneja: Tu aplicación en el archivo .ino recibe solo Hello y puede manejar el mensaje según tu lógica personalizada. La plantilla actual solo lo imprime y envía una respuesta.

De Arduino a la página web:

Cuando tu Arduino quiere enviar datos a la interfaz web, por ejemplo: Temperatura: 25°C, ocurre el siguiente flujo:

i. Tu aplicación llama a sendToWeb(): En tu archivo .ino, llamas customPage.sendToWeb("Temperature: 25°C") para enviar datos al navegador web

i. La clase CustomWebAppPage añade identificador y transmite: La clase CustomWebAppPage añade automáticamente el identificador de la aplicación utilizando su constante APP_IDENTIFIER a tu mensaje y transmite CUSTOM:Temperature: 25°C a todos los clientes web conectados a través de WebSocket

i. 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 comienzan con APP_IDENTIFIER y recorta el identificador usando .substring(APP_IDENTIFIER.length())

i. 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 diferentes maneras según las necesidades de tu aplicación

Visión general de la arquitectura

El ejemplo de CustomWebApp consta de cuatro archivos principales:

  1. CustomWebApp.ino - Sketch principal de Arduino con la lógica de tu aplicación
  2. CustomWebApp.h - Archivo de cabecera que define la clase de la página personalizada (interfaz de la biblioteca)
  3. CustomWebApp.cpp - Implementación con la lógica de comunicación (código de la biblioteca)
  4. 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 sus necesidades específicas. Así es como puede 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);

Manejar comandos personalizados

Extiende la función de devolución de llamada para manejar tus 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 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 de 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 WebApps de DIYables:

1. Personalizar la ruta de la aplicación

Puede cambiar la ruta de la URL desde la cual su aplicación web personalizada es accesible modificando el constructor en su archivo de encabezado:

Ruta por defecto:

// 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 empieza tu ruta con una barra diagonal
  • Usa nombres descriptivos: Elige rutas que describan claramente la función de tu aplicación
  • Evita conflictos: No uses rutas ya ocupadas por aplicaciones integradas como /chat, /monitor, /plotter, etc.
  • Usa minúsculas y guiones: Sigue las convenciones de URL para una mejor compatibilidad

2. Personalizar la Tarjeta de la Aplicación en la Página de Inicio

Puedes personalizar cómo se ve tu aplicación en la página de inicio de DIYables WebApps modificando el método getNavigationInfo() en tu archivo de implementación:

Tarjeta básica de la aplicación:

// 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>"; }

Gestión de 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 las diferentes aplicaciones. Supongamos que queremos añadir tres aplicaciones personalizadas llamadas "Temperature Monitor", "Motor Controller" y "Sensor Dashboard" a nuestro proyecto de Arduino. A continuación se explica cómo asegurar que funcionen de forma armoniosa:

1. Utiliza 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 Motores

// 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 utilizando 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 se estructura 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. Buenas prácticas para varias 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:

  1. Prueba cada aplicación individualmente primero
  2. Verifica el Monitor Serial para conflictos de mensajes
  3. Verifica que los identificadores únicos funcionen correctamente
  4. Prueba la navegación entre diferentes aplicaciones
  5. Monitorea el uso de memoria con varias aplicaciones cargadas

Al seguir estas pautas, puedes crear varias aplicaciones web personalizadas que funcionen juntas de forma fluida, sin interferir entre sí ni con otras DIYables WebApps.

Tutoriales Relacionados

※ NUESTROS MENSAJES

  • No dude en compartir el enlace de este tutorial. Sin embargo, por favor no use nuestro contenido en otros sitios web. Hemos invertido mucho esfuerzo y tiempo en crear el contenido, ¡por favor respete nuestro trabajo!
DIVULGACIÓN
es.newbiely.com es participante del Programa de Asociados de Amazon Services LLC, un programa de publicidad de afiliados diseñado para proporcionar un medio para que los sitios web ganen tarifas publicitarias mediante publicidad y enlaces a Amazon.com, Amazon.it, Amazon.de, Amazon.co.uk, Amazon.ca, Amazon.de, Amazon.es, Amazon.nl, Amazon.pl y Amazon.se
Copyright © 2025 es.newbiely.com. Todos los derechos reservados.
Términos y Condiciones | Política de Privacidad
Email: newbiely.com@gmail.com