Exemple de WebApp personnalisée pour ESP32 - Tutoriel d'interface Web simple pour les débutants
Vue d'ensemble
Cet exemple fournit un modèle complet pour créer vos propres applications web personnalisées qui s'intègrent parfaitement à la bibliothèque DIYables ESP32 WebApps.
Le modèle CustomWebApp est parfait pour les débutants qui veulent ajouter leur propre interface Web à l'écosystème des WebApps ESP32 de DIYables !
Ce tutoriel vous montre comment construire une page Web simple avec un échange bidirectionnel de données en temps réel entre le navigateur Web et l'ESP32 via WebSocket qui peut :
- Envoyer des messages texte depuis le navigateur web vers l'ESP32 instantanément via WebSocket
- Recevoir des messages de l'ESP32 et les afficher en temps réel sur la page web
- Maintenir une connexion WebSocket persistante pour une communication continue
- Reconnect automatique lorsque la connexion WebSocket est perdue
- Fonctionne sur les appareils mobiles avec un design réactif
Conçu pour l'ESP32 - ce modèle s'intègre parfaitement aux applications web existantes de DIYables et fournit la base pour créer vos propres interfaces IoT personnalisées!
Ce modèle fournit un code minimal pour vous aider à démarrer. Les utilisateurs peuvent développer leurs propres applications web sophistiquées en modifiant ce modèle. Des connaissances de base en programmation web (HTML, CSS, JavaScript) sont recommandées pour personnaliser l'interface web et ajouter des fonctionnalités avancées.
Ce que vous apprendrez
- Comment créer une application web personnalisée qui s'intègre à la bibliothèque WebApps ESP32 de DIYables
- Comment ajouter votre page personnalisée à l'écosystème des applications Web de DIYables
- Comment envoyer des messages texte depuis le navigateur Web vers l'ESP32
- Comment envoyer des données de l'ESP32 au navigateur Web
- Comment gérer les connexions WebSocket et la reconnexion automatique
- Comment concevoir des interfaces web adaptées aux mobiles
- Comment utiliser le système de templates DIYables ESP32 WebApps pour un développement rapide
Fonctionnalités
- Intégration des WebApps ESP32 DIYables: S'intègre parfaitement à l'écosystème de la bibliothèque DIYables ESP32 WebApps
- Code modèle minimal: Fournit une base de départ minimale que vous pouvez étendre et personnaliser
- Développement basé sur des modèles: Point de départ complet que vous pouvez modifier pour créer des applications sophistiquées
- Messagerie texte simple: Envoyer des messages entre le navigateur Web et l'Arduino
- Reconnect automatique: Se reconnecte automatiquement lorsque la connexion est perdue
- Adapté aux mobiles: Fonctionne parfaitement sur les téléphones, tablettes et ordinateurs
- Convient aux débutants: Un code propre et simple, facile à comprendre
- Cadre extensible: Nécessite des connaissances de base en programmation Web (HTML/CSS/JavaScript) pour une personnalisation avancée
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables ESP32 (ESP32 inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Comment commencer
Vous pouvez commencer à construire votre application web personnalisée pour la carte ESP32 en suivant les principales étapes suivantes :
- Exécutez le modèle d'application personnalisée par défaut sur votre carte ESP32
- Testez et vérifiez que l'application Web personnalisée par défaut fonctionne correctement
- Comprenez le protocole de communication et son fonctionnement en arrière-plan
- Modifiez le modèle pour adapter votre application
- Gérez plusieurs applications Web personnalisées - Guide essentiel de prévention des conflits
Commençons un par un.
Exécuter le modèle d'application personnalisé par défaut sur votre carte ESP32
Étapes rapides
- Si c'est la première fois que vous utilisez l'ESP32, reportez-vous au tutoriel sur la configuration de l'environnement pour l'ESP32 dans l'IDE Arduino (BASE_URL/tutorials/esp32/esp32-software-installation)
- Connectez la carte ESP32 à votre ordinateur à l'aide d'un câble USB
- Ouvrez l'IDE Arduino sur votre ordinateur
- Sélectionnez la carte ESP32 appropriée (par ex. ESP32 Dev Module) et le port COM
- Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino
- Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps par DIYables
- Cliquez sur le bouton Install pour installer la bibliothèque
- On vous demandera d'installer d'autres dépendances de la bibliothèque
- Cliquez sur le bouton Install All pour installer toutes les dépendances de la bibliothèque
- Dans l'IDE Arduino, allez dans Fichier > Exemples > DIYables ESP32 WebApps > CustomWebApp
- Vous verrez 4 fichiers qui constituent le modèle complet d'une application web personnalisée :
- CustomWebApp.ino - Code ESP32 principal (c'est ici que vous ajoutez votre logique personnalisée !)
- CustomWebApp.h - Fichier d'en-tête (définit l'interface de la bibliothèque DIYables ESP32 WebApps)
- CustomWebApp.cpp - Fichier d'implémentation (gère l'intégration avec le cadre de la bibliothèque)
- custom_page_html.h - Conception de page Web (personnalisez votre interface Web ici !)
- Configurez les paramètres Wi-Fi en modifiant ces lignes dans CustomWebApp.ino:
const char WIFI_SSID[] = "YOUR_WIFI_NAME";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Étape 5 : Télécharger et tester
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur l'ESP32
- Ouvrez le Moniteur Série pour voir l'état de la connexion
- Notez l'adresse IP affichée dans le Moniteur Série
- Ouvrez le Moniteur Série
- Découvrez le résultat dans le Moniteur Série. Il ressemble à ce qui suit
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 vous ne voyez rien, redémarrez la carte ESP32.
- Notez l'adresse IP affichée et saisissez cette adresse dans la barre d'adresse d'un navigateur Web sur votre smartphone ou votre PC.
- Exemple : http://192.168.0.2
- Vous verrez la page d'accueil comme sur l'image ci-dessous.
- Cliquez sur le lien Web Custom, vous verrez l'interface utilisateur de l'application Web Custom comme ci-dessous :
- Ou vous pouvez également accéder directement à la page par adresse IP suivie de /custom. Par exemple : http://[IP_ADDRESS]/custom
Tester et vérifier que l'application Web personnalisée par défaut fonctionne correctement
Lorsque vous exécutez le modèle par défaut de CustomWebApp, voici ce que vous devriez voir :
Sur l'interface Web:
- État de la connexion: Affiche « Connecté » en bleu lorsque le WebSocket est actif
- Champ de saisie des messages:Champ de texte pour taper des messages vers l'Arduino
- Bouton Envoyer: Cliquez pour envoyer votre message (ou appuyez sur Entrée)
- Affichage des messages Arduino: Affiche les messages reçus de l'ESP32 en texte bleu
Comportement de l'ESP32:
- Réponse d'écho : Quand vous envoyez « Hello » depuis le web, l'ESP32 répond par « Echo: Hello »
- Mises à jour périodiques : L'ESP32 envoie des messages de temps de fonctionnement toutes les 5 secondes : « Arduino uptime: X seconds »
- Moniteur série : Tous les messages reçus sont enregistrés pour le débogage
Tester la communication:
- Tapez un message dans la zone de saisie (par ex., "test message")
- Cliquez sur Envoyer ou appuyez sur Entrée
- Vérifier le moniteur série - vous devriez voir : "Reçu du web : test message"
- Vérifier la page Web - vous devriez voir : "Écho : test message"
- Attendez quelques secondes - vous verrez des messages de temps de fonctionnement périodiques mis à jour toutes les 3 secondes (par ex., "Temps de fonctionnement d'Arduino : 15 secondes", "Temps de fonctionnement d'Arduino : 18 secondes", etc.)
Comprendre le protocole de communication et comment il fonctionne en arrière-plan
Comprendre les mécanismes internes vous aide à personnaliser le modèle efficacement.
Système d'identifiant d'application
Le modèle CustomWebApp utilise des balises de messages uniques (appelées « Identifiants d’application ») qui aident le code ESP32 et les clients web à filtrer les messages qui leur appartiennent. Cela est essentiel car votre application peut inclure plusieurs applications web, et chaque application doit traiter uniquement ses propres messages tout en ignorant les autres:
Côté ESP32 (CustomWebApp.h et 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);
Côté 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);
Avantages de cette conception:
- Une source unique de vérité: Modifier l'identifiant en un seul endroit par langage
- Pas de chaînes magiques: Élimine les chaînes codées en dur « CUSTOM: » dans tout le code
- Sécurité de type: L'utilisation de constantes empêche les fautes de frappe
- Extensible: Facile de créer plusieurs applications personnalisées avec des identifiants différents
- Éviter les conflits de données entre plusieurs applications: Chaque application utilise un identifiant unique pour éviter les interférences de messages
- Professionnel: Suit les principes de conception orientée objet
Remarques importantes:
- Vous pouvez conserver l'identifiant actuel « CUSTOM: » lors de la modification de ce modèle d'application Web personnalisée pour l'adapter à votre projet. Toutefois, lorsque vous créez plus d'une application personnalisée, assurez-vous de le changer pour éviter les conflits.
- Si vous modifiez l'identifiant, assurez-vous que la valeur dans JavaScript (fichier .h) et le code ESP32 (fichier .cpp) soient les mêmes (par exemple, les deux utilisent « TEMP: » ou les deux utilisent « SENSOR: »).
- Identifiants pré-réservés par les applications intégrées : Les identifiants suivants sont déjà utilisés par les applications WebApps ESP32 intégrées de DIYables et doivent être évités:
- Identifiants principaux de l'application: "CHAT:", "MONITOR:", "PLOTTER:", "DIGITAL_PINS:", "JOYSTICK:", "SLIDER:", "TABLE:", "RTC:", "ROTATOR:", "GAUGE:"
- Identifiants de sous-protocole: "TIME:", "DATETIME:", "JOYSTICK_CONFIG:", "PLOTTER_DATA:", "PLOTTER_CONFIG:", "SLIDER_VALUES:", "TABLE_CONFIG:", "TABLE_DATA:", "VALUE_UPDATE:", "PIN_CONFIG:", "PIN_STATES:", "PIN_UPDATE:"
Flux de communication
De la page Web à l'ESP32:
Lorsque vous tapez un message sur l'interface web et que vous cliquez sur le bouton Envoyer, par exemple : Hello, le flux ci-dessous se produit :
- JavaScript ajoute l'identifiant: JavaScript ajoute automatiquement l'identifiant d'application (qui est CUSTOM: dans ce modèle) en utilisant la constante APP_IDENTIFIER, puis envoie le message à l'ESP32 via WebSocket. Le message réel envoyé est : CUSTOM:Hello
- La bibliothèque DIYables ESP32 WebApps reçoit: La bibliothèque reçoit le message CUSTOM:Hello et le transmet à votre méthode CustomWebAppPage::handleWebSocketMessage
- La classe CustomWebAppPage retire l'identifiant: Dans handleWebSocketMessage, la classe CustomWebAppPage vérifie si le message commence par son APP_IDENTIFIER, retire l'identifiant en utilisant .substring(APP_IDENTIFIER.length()), puis transmet le message restant Hello en appelant la fonction de rappel implémentée dans votre fichier .ino
- Votre application gère: Votre application dans le fichier .ino reçoit simplement Hello et peut gérer le message selon votre logique personnalisée. Le modèle actuel se contente de l'afficher et d'envoyer une réponse
De l'ESP32 à la page Web :
Lorsque votre ESP32 souhaite envoyer des données à l'interface Web, par exemple : Temperature: 25°C, le flux ci-dessous se produit :
- Votre application appelle sendToWeb(): Dans votre fichier .ino, vous appelez customPage.sendToWeb("Temperature: 25°C") pour envoyer des données au navigateur web
- La classe CustomWebAppPage ajoute un identifiant et diffuse: La classe CustomWebAppPage ajoute automatiquement l'identifiant d'application en utilisant sa constante APP_IDENTIFIER à votre message et diffuse CUSTOM:Temperature: 25°C vers tous les clients web connectés via WebSocket
- JavaScript reçoit et filtre le message: Le navigateur web reçoit CUSTOM:Temperature: 25°C via le gestionnaire d'événements ws.onmessage, mais le JavaScript ne traite que les messages qui commencent par APP_IDENTIFIER et retire l'identifiant en utilisant .substring(APP_IDENTIFIER.length())
- La page Web affiche le message épuré: Le modèle actuel affiche le message épuré Temperature: 25°C (sans identifiant) dans la section « Message provenant de l'Arduino ». Vous pouvez personnaliser le JavaScript pour analyser et afficher les données de différentes manières en fonction des besoins de votre application
Vue d'ensemble de l'architecture
L'exemple CustomWebApp se compose de quatre fichiers principaux :
- CustomWebApp.ino - croquis principal ESP32 avec votre logique d'application
- CustomWebApp.h - Fichier d'en-tête définissant la classe de page personnalisée (interface de la bibliothèque)
- CustomWebApp.cpp - Implémentation avec la logique de communication (code de la bibliothèque)
- custom_page_html.h - Interface HTML séparée pour une personnalisation facile
Modifier le modèle pour adapter votre application
Le modèle est conçu pour être facilement personnalisable en fonction de vos besoins spécifiques. Voici comment l'adapter :
1. Intégration du matériel
Ajouter l'initialisation du matériel
Dans la fonction 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);
Gérer les commandes personnalisées
Étendez la fonction de rappel pour gérer vos commandes personnalisées :
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
});
Envoyer des données de capteurs en temps réel
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. Personnalisation de l'interface Web
Modifier la mise en page HTML
Modifiez le HTML dans custom_page_html.h pour changer l'interface :
<!-- 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>
Personnaliser le traitement JavaScript
Mettez à jour la fonction ws.onmessage pour gérer des types de données spécifiques :
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;
}
}
};
Ajouter la mise en forme
Personnalisez le CSS de votre application :
<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>
Autres personnalisations
Au-delà de modifier l'interface web et l'intégration matérielle, vous pouvez également personnaliser l'apparence de votre application dans l'écosystème ESP32 WebApps de DIYables :
1. Personnaliser le chemin de l'application
Vous pouvez changer le chemin d'URL où votre application web personnalisée est accessible en modifiant le constructeur dans votre fichier d'en-tête :
Chemin par défaut:
// In CustomWebApp.cpp - Default path is "/custom"
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {
}
Exemples de chemins personnalisés :
// Temperature monitoring app
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/new-path") {
}
// Accessible at: http://[IP_ADDRESS]/new-path
Notes importantes :
- Le chemin doit commencer par « / » : Commencez toujours votre chemin par une barre oblique
- Utilisez des noms descriptifs : Choisissez des chemins qui décrivent clairement la fonction de votre application
- Évitez les conflits : N'utilisez pas de chemins déjà pris par des applications intégrées telles que « /chat », « /monitor », « /plotter », etc.
- Utilisez des minuscules et des tirets : Suivez les conventions des URL Web pour une meilleure compatibilité
2. Personnaliser la carte d'application sur la page d'accueil
Vous pouvez personnaliser l'apparence de votre application sur la page d'accueil des WebApps ESP32 de DIYables en modifiant la méthode getNavigationInfo() dans votre fichier d'implémentation :
Carte d'application basique:
// 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>";
}
Carte d'application avancée avec CSS en ligne:
// 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>";
}
Gérer plusieurs applications Web personnalisées - Guide essentiel de prévention des conflits
Lors du développement de plusieurs applications web personnalisées, il est crucial d'éviter les conflits entre les différentes applications. Supposons que nous voulions ajouter trois applications personnalisées nommées "Temperature Monitor", "Motor Controller" et "Sensor Dashboard" à notre projet ESP32. Voici comment veiller à ce qu'elles fonctionnent ensemble harmonieusement :
1. Utiliser des identifiants d'application uniques
Chaque application web personnalisée doit disposer d'un identifiant unique pour éviter les conflits de messages :
Exemple : Application de surveillance de la température
// In TemperatureApp.cpp
const String TemperatureAppPage::APP_IDENTIFIER = "TEMP:";
// JavaScript in temperature_page_html.h
const APP_IDENTIFIER = 'TEMP:';
Exemple : Application de contrôle du moteur
// In MotorApp.cpp
const String MotorAppPage::APP_IDENTIFIER = "MOTOR:";
// JavaScript in motor_page_html.h
const APP_IDENTIFIER = 'MOTOR:';
Exemple : Application de tableau de bord des capteurs
// In SensorApp.cpp
const String SensorAppPage::APP_IDENTIFIER = "SENSOR:";
// JavaScript in sensor_page_html.h
const APP_IDENTIFIER = 'SENSOR:';
2. Utiliser des chemins de page uniques
Chaque application web nécessite un chemin d’URL unique :
// Temperature App
TemperatureAppPage::TemperatureAppPage() : DIYablesWebAppPageBase("/temperature") {
}
// Motor Controller App
MotorAppPage::MotorAppPage() : DIYablesWebAppPageBase("/motor") {
}
// Sensor Dashboard App
SensorAppPage::SensorAppPage() : DIYablesWebAppPageBase("/sensors") {
}
3. Utiliser des noms de classes uniques
Évitez les conflits de nommage en utilisant des noms de classes descriptifs :
// Instead of multiple "CustomWebAppPage" classes
class TemperatureMonitorPage : public DIYablesWebAppPageBase { };
class MotorControllerPage : public DIYablesWebAppPageBase { };
class SensorDashboardPage : public DIYablesWebAppPageBase { };
4. Organiser plusieurs applications dans un seul projet
Voici comment structurer un projet avec plusieurs applications personnalisées :
// 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. Bonnes pratiques pour plusieurs applications
Organisation des fichiers
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
Navigation entre les applications
Mettez à jour la méthode getNavigationInfo() dans chaque application pour faciliter la navigation :
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. Tests de plusieurs applications
Lorsque vous testez plusieurs applications :
- Testez d'abord chaque application individuellement
- Vérifiez le Moniteur série pour les conflits de messages
- Vérifiez que les identifiants uniques fonctionnent correctement
- Testez la navigation entre différentes applications
- Surveillez l'utilisation de la mémoire avec plusieurs applications chargées
En suivant ces lignes directrices, vous pouvez créer plusieurs applications Web personnalisées qui fonctionnent ensemble sans accroc et sans interférer les unes avec les autres ni avec d'autres ESP32 WebApps DIYables.