SENSOREN/AKTOREN

INTERNET DER DINGE (IoT)

ESP32 - Ethernet

ESP32 - GPIO-Unterbrechung

ESP32 benutzerdefiniertes WebApp-Beispiel – Einfaches Tutorial zur Weboberfläche für Anfänger

Überblick

Dieses Beispiel bietet eine vollständige Vorlage zur Erstellung eigener benutzerdefinierter Webanwendungen, die nahtlos in die DIYables ESP32 WebApps-Bibliothek integriert werden.

Arduino benutzerdefiniertes Web-App-Beispiel – Tutorial zum Erstellen Ihrer eigenen Weboberfläche

Die CustomWebApp-Vorlage ist perfekt für Anfänger, die ihre eigene Weboberfläche in das DIYables ESP32 WebApps-Ökosystem integrieren möchten! Dieses Tutorial zeigt dir, wie du eine einfache Webseite mit Echtzeit-Zwei-Wege-Datenaustausch zwischen Webbrowser und ESP32 über WebSocket erstellst, die kann:

Textnachrichten senden vom Webbrowser an ESP32 sofort über WebSocket
Nachrichten empfangen vom ESP32 und sie in Echtzeit auf der Webseite anzeigen
Eine dauerhafte WebSocket-Verbindung aufrechterhalten für kontinuierliche Kommunikation
Automatisches Wiederverbinden, wenn die WebSocket-Verbindung verloren geht
Auf mobilen Geräten mit responsivem Design

Für ESP32 entwickelt - diese Vorlage integriert sich nahtlos in vorhandene DIYables-Web-Apps und bildet die Grundlage für den Aufbau eigener maßgeschneiderter IoT-Schnittstellen!

Dieses Template stellt minimalen Code bereit, um Ihnen den Einstieg zu erleichtern. Benutzer können eigene, anspruchsvolle Webanwendungen entwickeln, indem sie dieses Template anpassen. Grundlegende Kenntnisse der Web-Programmierung (HTML, CSS, JavaScript) werden empfohlen, zur Anpassung der Weboberfläche und zum Hinzufügen fortgeschrittener Funktionen.

Was Sie lernen werden

Wie man eine benutzerdefinierte Web-App erstellt, die sich in die DIYables ESP32 WebApps-Bibliothek integriert
Wie man Ihre benutzerdefinierte Seite dem DIYables WebApps-Ökosystem hinzufügt
Wie man Textnachrichten vom Webbrowser zum ESP32 sendet
Wie man Daten vom ESP32 an den Webbrowser sendet
Wie man WebSocket-Verbindungen verwaltet und eine automatische Wiederverbindung herstellt
Wie man mobil-responsiven Weboberflächen erstellt
Wie man das DIYables ESP32 WebApps-Vorlagensystem für schnelle Entwicklung verwendet

Funktionen

DIYables ESP32 WebApps-Integration: Integriert sich nahtlos in das Ökosystem der DIYables ESP32 WebApps-Bibliothek
Minimaler Template-Code: Bietet eine grundlegende Basis, die Sie erweitern und anpassen können
Vorlagenbasierte Entwicklung: Vollständiger Ausgangspunkt, den Sie anpassen können, um anspruchsvolle Anwendungen zu erstellen
Einfache Textnachrichten: Nachrichten zwischen Webbrowser und Arduino senden
Automatische Wiederverbindung: Stellt automatisch die Verbindung wieder her, wenn sie verloren geht
Mobil-Responsive: Funktioniert perfekt auf Smartphones, Tablets und Computern
Anfängerfreundlich: Sauberer, einfacher Code, der leicht zu verstehen ist
Erweiterbares Framework: Erfordert grundlegende Kenntnisse in der Web-Programmierung (HTML/CSS/JavaScript) für fortgeschrittene Anpassungen

Erforderliche Hardware

1	×	ESP32 ESP-WROOM-32 Entwicklungsmodul
1	×	USB-Kabel Typ-A zu Typ-C (für USB-A PC)
1	×	USB-Kabel Typ-C zu Typ-C (für USB-C PC)
1	×	(Empfohlen) Schraubklemmen-Erweiterungsboard für ESP32
1	×	(Empfohlen) Breakout Expansion Board for ESP32
1	×	(Empfohlen) Stromverteiler für ESP32

Oder Sie können die folgenden Kits kaufen:

1	×	DIYables ESP32 Starter-Kit (ESP32 enthalten)
1	×	DIYables Sensor-Kit (30 Sensoren/Displays)
1	×	DIYables Sensor-Kit (18 Sensoren/Displays)

Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.

So fängt man an

Sie können beginnen, Ihre benutzerdefinierte Webanwendung für das ESP32-Board zu erstellen, indem Sie die folgenden Hauptschritte durchlaufen:

Führen Sie die Standardvorlage für benutzerdefinierte Apps auf Ihrem ESP32-Board aus.
Testen und Verifizieren Sie, dass die Standard-Web-App für benutzerdefinierte Apps ordnungsgemäß funktioniert.
Verstehen Sie das Kommunikationsprotokoll und wie es im Hintergrund funktioniert.
Passen Sie die Vorlage an, um Ihre Anwendung zu konfigurieren.
Verwalten mehrerer benutzerdefinierter Web-Apps – Wesentlicher Leitfaden zur Konfliktvermeidung

Lassen Sie uns der Reihe nach anfangen.

Führen Sie die Standard-Benutzerdefinierte App-Vorlage auf Ihrem ESP32-Board aus

Schnelle Schritte

Wenn Sie den ESP32 zum ersten Mal verwenden, konsultieren Sie das Tutorial zur Einrichtung der ESP32-Umgebung in der Arduino-IDE.
Schließen Sie das ESP32-Entwicklungsboard mit einem USB-Kabel an Ihren Computer an.
Starten Sie die Arduino-IDE auf Ihrem Computer.
Wählen Sie das passende ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
Gehen Sie zum Libraries-Symbol in der linken Leiste der Arduino-IDE.
Suchen Sie "DIYables ESP32 WebApps", dann finden Sie die DIYables ESP32 WebApps-Bibliothek von DIYables.
Klicken Sie auf die Installieren-Schaltfläche, um die Bibliothek zu installieren.

Sie werden aufgefordert, einige andere Bibliotheksabhängigkeiten zu installieren
Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren

Abhängigkeit von DIYables ESP32 Web-Apps

Gehen Sie in der Arduino-IDE zu Datei > Beispiele > DIYables ESP32 WebApps > CustomWebApp
Sie sehen 4 Dateien, die die vollständige Vorlage der benutzerdefinierten Webanwendung bilden:
CustomWebApp.ino - Haupt-ESP32-Code (hier fügen Sie Ihre benutzerdefinierte Logik hinzu!)
CustomWebApp.h - Header-Datei (definiert die Schnittstelle zur DIYables ESP32 WebApps-Bibliothek)
CustomWebApp.cpp - Implementierungsdatei (übernimmt die Integration mit dem Bibliotheks-Framework)
custom_page_html.h - Webseitendesign (passen Sie hier Ihre Weboberfläche an!)
Konfigurieren Sie die WLAN-Einstellungen, indem Sie diese Zeilen in CustomWebApp.ino ändern:

const char WIFI_SSID[] = "YOUR_WIFI_NAME"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";

Schritt 5: Hochladen und Testen

Klicken Sie auf die Upload-Schaltfläche in der Arduino IDE, um Code auf den ESP32 hochzuladen
Öffnen Sie den Serial Monitor, um den Verbindungsstatus anzuzeigen
Notieren Sie die im Serial Monitor angezeigte IP-Adresse
Öffnen Sie den Serial Monitor
Prüfen Sie das Ergebnis im Serial Monitor. Es sieht unten so aus

COM6

Send

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 Show timestamp

Clear output

9600 baud

Newline

Wenn Sie nichts sehen, starten Sie das ESP32-Board neu.
Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
Beispiel: http://192.168.0.2
Sie sehen die Startseite wie im untenstehenden Bild:

ESP32 DIYables Web-App-Startseite mit einer benutzerdefinierten Web-App.

Klicken Sie auf den Web Custom-Link, dann sehen Sie die Benutzeroberfläche der Web Custom-App wie unten dargestellt:

ESP32 DIYables Web-App Web-Benutzerdefinierte-App

Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /custom. Zum Beispiel: http://[IP_ADDRESS]/custom

Testen und Verifizieren, dass die standardmäßige benutzerdefinierte Webanwendung korrekt funktioniert

Wenn Sie die Standardvorlage CustomWebApp ausführen, sehen Sie hier Folgendes:

In der Weboberfläche:

Verbindungsstatus: Zeigt 'Verbunden' in Blau, wenn der WebSocket aktiv ist
Nachrichten-Eingabefeld: Textfeld zum Eingeben von Nachrichten an den Arduino
Senden-Button: Klicken Sie, um Ihre Nachricht zu senden (oder die Eingabetaste drücken)
Arduino-Nachrichtenanzeige: Zeigt Nachrichten, die vom ESP32 empfangen werden, in blauem Text

ESP32-Verhalten:

Echo-Antwort: Wenn Sie vom Web aus "Hello" senden, antwortet der ESP32 mit "Echo: Hello"
Periodische Aktualisierungen: ESP32 sendet alle 5 Sekunden Betriebszeitmeldungen: "Arduino Betriebszeit: X Sekunden"
Serieller Monitor: Alle empfangenen Nachrichten werden zum Debuggen protokolliert

Kommunikation testen:

Geben Sie im Eingabefeld eine Nachricht ein (z. B. "Testnachricht")
Senden klicken oder Enter drücken
Seriellen Monitor prüfen – Sie sollten sehen: "Empfangen vom Web: Testnachricht"
Webseite prüfen – Sie sollten sehen: "Echo: Testnachricht"
Warten Sie ein paar Sekunden – Sie werden periodische Betriebszeitmeldungen sehen, die alle 3 Sekunden aktualisiert werden (z. B. "Arduino-Betriebszeit: 15 Sekunden", "Arduino-Betriebszeit: 18 Sekunden", usw.)

Verständnis des Kommunikationsprotokolls und wie es im Hintergrund funktioniert

Das Verständnis der inneren Funktionsweisen hilft Ihnen, die Vorlage effektiv anzupassen.

System der App-Identifikatoren

Die CustomWebApp-Vorlage verwendet eindeutige Nachrichten-Tags (genannt 'App-Identifikatoren'), die dem ESP32-Code und Web-Clients helfen, Nachrichten zu filtern, die ihnen gehören. Das ist wesentlich, weil Ihre Anwendung möglicherweise mehrere Web-Apps umfasst, und jede App muss nur ihre eigenen Nachrichten verarbeiten und andere ignorieren:

ESP32-Seite (CustomWebApp.h & 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);

JavaScript-Seite (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);

Vorteile dieses Designs:

Einzige Quelle der Wahrheit: Ändern Sie den Bezeichner an einer Stelle pro Sprache
Keine magischen Zeichenfolgen: Entfernt hartkodierte "CUSTOM:" im gesamten Code
Typensicherheit: Die Verwendung von Konstanten verhindert Tippfehler
Erweiterbar: Einfach, mehrere benutzerdefinierte Apps mit unterschiedlichen Identifikatoren zu erstellen
Datenkonflikte zwischen mehreren Apps vermeiden: Jede App verwendet einen eindeutigen Identifikator, um Nachrichtenstörungen zu verhindern
Professionell: Befolgt objektorientierte Designprinzipien

Wichtige Hinweise:

Sie können den aktuellen Bezeichner "CUSTOM:" beibehalten, wenn Sie diese benutzerdefinierte Web-App-Vorlage an Ihr Projekt anpassen. Wenn Sie jedoch mehr als eine benutzerdefinierte App erstellen, stellen Sie sicher, ihn zu ändern, um Konflikte zu vermeiden.
Wenn Sie den Bezeichner ändern, stellen Sie sicher, dass der Wert in JavaScript (.h-Datei) und dem ESP32-Code (.cpp-Datei) derselbe ist (z. B. verwenden beide "TEMP:" oder beide "SENSOR:").
Vorab reservierte Bezeichner durch integrierte Apps: Die folgenden Bezeichner werden bereits von den integrierten Anwendungen der DIYables ESP32 WebApps verwendet und sollten vermieden werden:
Hauptanwendungs-Identifikatoren: "CHAT:", "MONITOR:", "PLOTTER:", "DIGITAL_PINS:", "JOYSTICK:", "SLIDER:", "TABLE:", "RTC:", "ROTATOR:", "GAUGE:"
Unterprotokoll-Identifikatoren: "TIME:", "DATETIME:", "JOYSTICK_CONFIG:", "PLOTTER_DATA:", "PLOTTER_CONFIG:", "SLIDER_VALUES:", "TABLE_CONFIG:", "TABLE_DATA:", "VALUE_UPDATE:", "PIN_CONFIG:", "PIN_STATES:", "PIN_UPDATE:"

Kommunikationsfluss

Von der Webseite zum ESP32:

Wenn Sie eine Nachricht in der Weboberfläche eingeben und auf die Senden-Schaltfläche klicken, zum Beispiel: Hello, erfolgt der folgende Ablauf:

JavaScript fügt App-Bezeichner hinzu: JavaScript fügt unter Verwendung der APP_IDENTIFIER-Konstante automatisch den App-Bezeichner hinzu (der in dieser Vorlage "CUSTOM:" ist) und sendet dann die Nachricht über WebSocket an den ESP32. Die eigentliche gesendete Nachricht lautet: CUSTOM:Hello
DIYables ESP32 WebApps-Bibliothek empfängt: Die Bibliothek erhält die Nachricht CUSTOM:Hello und übergibt sie an Ihre CustomWebAppPage::handleWebSocketMessage-Methode
CustomWebAppPage-Klasse entfernt Bezeichner: In handleWebSocketMessage prüft die Klasse CustomWebAppPage, ob die Nachricht mit ihrem APP_IDENTIFIER beginnt, entfernt den Bezeichner mit .substring(APP_IDENTIFIER.length()), und übergibt dann die verbleibende Nachricht Hello durch Aufruf der in Ihrer .ino-Datei implementierten Callback-Funktion
Ihre Anwendung verarbeitet: Ihre Anwendung in der .ino-Datei empfängt nur Hello und kann die Nachricht je nach Ihrer benutzerdefinierten Logik verarbeiten. Die aktuelle Vorlage gibt sie einfach aus und sendet eine Antwort zurück

Vom ESP32 zur Webseite:

Wenn Ihr ESP32 Daten an die Weboberfläche senden möchte, zum Beispiel: Temperatur: 25°C, erfolgt der folgende Ablauf:

Ihre Anwendung ruft sendToWeb() auf: In Ihrer .ino-Datei rufen Sie customPage.sendToWeb("Temperature: 25°C") auf, um Daten an den Webbrowser zu senden
Die CustomWebAppPage-Klasse fügt automatisch die App-Identifikation hinzu und sendet: Die CustomWebAppPage-Klasse fügt automatisch die App-Identifikation mithilfe ihrer APP_IDENTIFIER-Konstante zu Ihrer Nachricht hinzu und sendet CUSTOM:Temperature: 25°C an alle verbundenen Web-Clients über WebSocket
JavaScript empfängt und filtert Nachrichten: Der Webbrowser empfängt CUSTOM:Temperature: 25°C über den ws.onmessage-Event-Handler, aber das JavaScript verarbeitet nur Nachrichten, die mit APP_IDENTIFIER beginnen, und entfernt den Identifikator mit .substring(APP_IDENTIFIER.length())
Webseite zeigt saubere Nachricht an: Die aktuelle Vorlage zeigt die saubere Nachricht Temperature: 25°C (ohne Identifikator) im Abschnitt "Nachricht vom Arduino". Sie können das JavaScript anpassen, um die Daten je nach Bedarf Ihrer Anwendung auf unterschiedliche Weise zu parsen und anzuzeigen

Architekturübersicht

Das CustomWebApp-Beispiel besteht aus vier Hauptdateien:

CustomWebApp.ino - Haupt-ESP32-Skizze mit Ihrer Anwendungslogik
CustomWebApp.h - Header-Datei, die die benutzerdefinierte Seitenklasse (Bibliotheksschnittstelle) definiert
CustomWebApp.cpp - Implementierung mit Kommunikationslogik (Bibliothekscode)
custom_page_html.h - HTML-Schnittstelle separat für einfache Anpassung

Passen Sie die Vorlage an, um Ihre Anwendung anzupassen

Die Vorlage ist so gestaltet, dass sie sich leicht an Ihre spezifischen Bedürfnisse anpassen lässt. So passen Sie sie an:

1. Hardware-Integration

Hardware-Initialisierung hinzufügen

In der setup()-Funktion von 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);

Benutzerdefinierte Befehle verarbeiten

Erweitern Sie die Callback-Funktion, um Ihre benutzerdefinierten Befehle zu verarbeiten:

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 });

Echtzeit-Sensordaten senden

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. Anpassung der Weboberfläche

HTML-Layout ändern

Bearbeiten Sie den HTML-Code in custom_page_html.h, um die Benutzeroberfläche zu ändern:

<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>

JavaScript-Verarbeitung anpassen

Aktualisiere die Funktion ws.onmessage, um bestimmte Datentypen zu verarbeiten:

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

Styling hinzufügen

Passen Sie das CSS für Ihre Anwendung an:

Weitere Anpassungen

Darüber hinaus können Sie auch anpassen, wie Ihre App im DIYables ESP32 WebApps-Ökosystem erscheint:

1. App-Pfad anpassen

Sie können den URL-Pfad ändern, unter dem Ihre benutzerdefinierte Webanwendung erreichbar ist, indem Sie den Konstruktor in Ihrer Header-Datei ändern.

Standardpfad:

// In CustomWebApp.cpp - Default path is "/custom" CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") { }

Benutzerdefinierte Pfadbeispiele:

// Temperature monitoring app CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/new-path") { } // Accessible at: http://[IP_ADDRESS]/new-path

Wichtige Hinweise:

Pfad muss mit einem führenden Schrägstrich beginnen: Beginnen Sie Ihren Pfad immer mit einem führenden Schrägstrich
Verwenden Sie aussagekräftige Namen: Wählen Sie Pfade, die die Funktion Ihrer App eindeutig beschreiben
Vermeiden Sie Konflikte: Verwenden Sie keine Pfade, die bereits von integrierten Apps wie /chat, /monitor, /plotter usw. belegt sind
Verwenden Sie Kleinbuchstaben und Bindestriche: Folgen Sie den Web-URL-Konventionen für eine bessere Kompatibilität

2. App-Karte auf der Startseite anpassen

Sie können anpassen, wie Ihre App auf der DIYables ESP32 WebApps-Startseite angezeigt wird, indem Sie die Methode getNavigationInfo() in Ihrer Implementierungsdatei ändern:

Grundlegende App-Karte:

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

Fortgeschrittene App-Karte mit Inline-CSS:

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

Mehrere benutzerdefinierte Web-Apps verwalten - Wesentlicher Leitfaden zur Konfliktvermeidung

Bei der Entwicklung mehrerer maßgeschneiderter Webanwendungen ist es entscheidend, Konflikte zwischen verschiedenen Anwendungen zu vermeiden. Nehmen wir an, wir möchten drei maßgeschneiderte Apps mit den Namen "Temperature Monitor", "Motor Controller" und "Sensor Dashboard" zu unserem ESP32-Projekt hinzufügen. So stellen Sie sicher, dass sie harmonisch zusammenarbeiten:

1. Verwenden Sie eindeutige App-Identifikatoren

Jede benutzerdefinierte Webanwendung muss einen eindeutigen Bezeichner haben, um Nachrichtenkonflikte zu vermeiden:

Beispiel: Temperaturüberwachungs-App

// In TemperatureApp.cpp const String TemperatureAppPage::APP_IDENTIFIER = "TEMP:"; // JavaScript in temperature_page_html.h const APP_IDENTIFIER = 'TEMP:';

Beispiel: Motorsteuerungs-App

// In MotorApp.cpp const String MotorAppPage::APP_IDENTIFIER = "MOTOR:"; // JavaScript in motor_page_html.h const APP_IDENTIFIER = 'MOTOR:';

Beispiel: Sensor-Dashboard-App

// In SensorApp.cpp const String SensorAppPage::APP_IDENTIFIER = "SENSOR:"; // JavaScript in sensor_page_html.h const APP_IDENTIFIER = 'SENSOR:';

2. Verwenden Sie eindeutige Seitenpfade

Jede Webanwendung benötigt einen eindeutigen URL-Pfad:

// Temperature App TemperatureAppPage::TemperatureAppPage() : DIYablesWebAppPageBase("/temperature") { } // Motor Controller App MotorAppPage::MotorAppPage() : DIYablesWebAppPageBase("/motor") { } // Sensor Dashboard App SensorAppPage::SensorAppPage() : DIYablesWebAppPageBase("/sensors") { }

3. Verwenden Sie eindeutige Klassennamen

Vermeiden Sie Namenskonflikte, indem Sie beschreibende Klassennamen verwenden:

// Instead of multiple "CustomWebAppPage" classes class TemperatureMonitorPage : public DIYablesWebAppPageBase { }; class MotorControllerPage : public DIYablesWebAppPageBase { }; class SensorDashboardPage : public DIYablesWebAppPageBase { };

4. Mehrere Apps in einem Projekt organisieren

So strukturieren Sie ein Projekt mit mehreren benutzerdefinierten Apps:

// 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. Bewährte Praktiken für mehrere Apps

Datei-Organisation

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 zwischen Apps

Aktualisieren Sie die getNavigationInfo()-Methode in jeder App, um eine einfache Navigation zu ermöglichen:

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 mehrerer Apps

Beim Testen mehrerer Apps:

Teste jede App zuerst einzeln
Teste den Serial Monitor auf Nachrichtenkonflikte
Teste, ob eindeutige Identifikatoren korrekt funktionieren
Teste die Navigation zwischen verschiedenen Apps
Teste den Speicherverbrauch bei mehreren geladenen Apps

Indem Sie diese Richtlinien befolgen, können Sie mehrere benutzerdefinierte Webanwendungen erstellen, die nahtlos zusammenarbeiten, ohne sich gegenseitig oder andere DIYables ESP32 WebApps zu stören.