Template Strings sind eine einfache und effektive Möglichkeit, dynamische Inhalte in HTML-Seiten einzufügen. Das sogenannte Template-Rendering wird in der Webentwicklung sehr häufig genutzt - dafür wird in der Regel eine Template-Engine verwendet. Wer bereits Webprojekte umgesetzt hat, wird sehr wahrscheinlich bereits damit zutun gehabt haben. Eine Übersicht über gängige Template-Engines findest du hier - auch wenn es in freier Wildbahn weitaus mehr Auswahl gibt.

In diesem Tutorial geht es um die Verwendung von Template-Strings mit Mikrocontrollern wie dem ESP8266 und dem ESPAsyncWebServer. Im Gegensatz zu klassischen Template-Engines, die komplexe HTML-Dateien rendern und Code einbetten können, fungiert die Implementierung auf dem ESP8266 als eher einfacher String-Processor und ermöglicht keine Codeausführung im Frontend. Dennoch bietet das Processing von Template Strings eine effiziente und professionelle Möglichkeit, dein Projekt um vielfältige Darstellungsoptionen zu erweitern.

Bevor wir tiefer in das Thema einsteigen, ist es hilfreich, den Blog-Artikel ESP8266 Webserver mit echten HTML Dateien zu kennen. In diesem Beitrag haben wir bereits die Grundlagen zur Einrichtung eines ESP8266 Webservers mit HTML-Dateien erläutert. Wir werden nun darauf aufbauen und zeigen, wie man mit Template Strings dynamische Inhalte in HTML-Seiten einfügen kann. Das Tutorial ist also Vorraussetzung für den Umgang mit Template-Strings auf dem ESP8266.

Zum Kapitel springen Was sind Template Strings?

Ein Template String ist im Wesentlichen ein Platzhalter innerhalb des HTML-Dokuments. Dieser Platzhalter wird noch vor dem Senden an den Client durch einen tatsächlichen Wert ersetzt. Nehmen wir als Beispiel eine gekürzte Fassung des esp8266-webserver-html-template.zip aus meinem anderen Tutorial.

<div class="content">
  <h1>Webserver HTML-Template</h1>
  <h3>MAC-Adresse: %MAC_ADDRESS%</h3>      
</div>

In diesem Beispiel wird der Platzhalter %MAC_ADDRESS% durch die MAC-Adresse des ESPs ersetzt. Der Webserver übernimmt diese Ersetzung, wie bereits erwähnt, bevor die HTML-Seite an den Client gesendet wird. Das heißt: Wir sehen direkt und ohne weitere Ladezeit die MAC-Adresse in unserem HTML-Dokument sobald wir es aufrufen.

Wir nutzen in diesem Tutorial die MAC-Adresse, damit keine zusätzliche Hardware benötigt wird und jeder das Beispiel nachmachen kann. Was letztendlich verarbeitet wird, liegt in eurer Hand – zum Beispiel Sensordaten oder andere Werte. Dies ist besonders nützlich für Anwendungen, bei denen aktuelle Daten angezeigt werden sollen, ohne dass eine kontinuierliche Aktualisierung erforderlich ist.

Zum Kapitel springen Programmcode

Zum Kapitel springen Client

Wie das HTML-Dokument aussehen muss, um mit Template-Strings zu arbeiten, wurde bereits dargestellt. Auf der Clientseite muss nichts weiter unternommen werden – die Platzhalter werden an den gewünschten Stellen platziert und entsprechend durch die Logik auf dem ESP vor dem Ausliefern ersetzt.

Zum Kapitel springen Server

Der Programmcode für das Ersetzen der Template-Strings ist überraschend übersichtlich. Wir müssen lediglich eine Funktion zur Ersetzung der Platzhalter und eine Anpassung in der Server-Route vornehmen, um die HTML-Seite korrekt auszuliefern. Diese Funktion überprüft den übergebenen Platzhalter und ersetzt ihn durch den entsprechenden Wert, in diesem Fall die MAC-Adresse des ESP:

// Funktion zur Ersetzung der Template Strings
String processor(const String& var) {
  if (var == "MAC_ADDRESS") {
    return WiFi.macAddress();
  }
  return String();
}

Diese Funktion kann an einer beliebigen Stelle im Programmcode eingefügt werden, sollte jedoch idealerweise vor ihrem ersten Aufruf definiert werden.

Zusätzlich muss diese Funktion in der entsprechenden Server-Route übergeben werden. Da wir das Rendering nur in der index.html-Seite vornehmen, reicht es, den Prozessor dort zu übergeben:

// Datei `index.html` wird ausgeliefert
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(LittleFS, "/index.html", String(), false, processor);
});

Das war es eigentlich schon! Das geänderte Programm kann nun auf den ESP geladen werden. Sobald der ESP läuft und mit dem WLAN verbunden ist, wird die HTML-Seite mit den ersetzten Template-Strings ausgeliefert.

Zum Kapitel springen Template Strings, Javascript & Websockets

Template Strings bieten eine einfache und effektive Methode, um dynamische Inhalte in Webseiten zu integrieren, die von einem ESP8266-Webserver bereitgestellt werden. Sie sind besonders nützlich für Anfänger, die schnell Ergebnisse erzielen möchten, und für erfahrene Nutzer, die eine einfache Lösung für die Anzeige dynamischer Daten suchen. Durch die Kombination von Template Strings mit AJAX oder Websockets können Seiten zudem nach dem initialen Laden aktuell gehalten werden, was die Vorteile beider Ansätze vereint.