Webserver

Auf dem ESP32 läuft ein Webserver, welcher die Anfragen von dem Client behandelt. Da bereits auch andere Personen vor dem Problem standen, einen funktionsfähigen schnellen Webserver auf dem ESP32 zu betreiben, wurde schnell eine bestehende Bibliothek für dieses Problem gefunden. Zum Einsatz kommt der HttpServer von den cpp_utils von nkolban.

Neben schneller impelementierung besticht dieser durch einfaches Handling und guten Resonanzzeiten.

Nach Importierung der cpp_utils in das Projekt, konnte relativ zügig der Webserver in Betrieb genommen werden. Schon nach wenigen Minuten Arbeit wurden dabei die Anfragen beantwortet. Tests mit python-Tools konnten belegen, dass die Resonanzzeiten um den Faktor 30 geringer als beim bisherigen Webserver sind.

Der Code für den WebServer findet sich in folgender Github-Datei.
Zuerst wird ein WebServer initalisiert. Im init()-Aufruf werden dann die Pathhandler hinzugefügt, welche spezielle Aufrufe handhaben.
So werden Aufrufe auf "/" und "/index.html" auf ".html/index.html" weitergeleitet.
Aufrufe auf "/cocktails" werden auf die Cocktail-Liste geleitet.
Mit einem POST-Request auf "/cocktail" wird ein neues Cocktail im JSON-Format an den Webserver übermittelt und in de Mixer-Warteschlange gegeben.

Dateisystem

Damit der Webserver nicht die Dateien im Source-Code versteckt hat, wurde nach einer Möglichkeit der Speicherung gesucht.

Nachdem Versuche, eine SD-Karte in Betrieb zu nehmen gescheitert sind, wurde auf die Möglichkeit zurückgegriffen, im ESP32 ein SPIFFS-Dateisystem zu initialisieren.
Damit die Dateien auch auf dem ESP32 vorhanden sind, wird dazu mittels dem Tool mkspiffs.exe ein entsprechender Ordner in eine binäre Datei verpackt und diese per Python-Tool auf den ESP32 an die entsprechende Stelle geflasht.

Das Dateiverzeichnis findet sich im Github. Dabei ist das Web als Submodule eingebunden.

Webseite

Für die Programmierung der Webseite wurde Visual Studio Code verwendet, da dieses sehr leicht zu bedienen ist und viele Möglichkeiten bietet. So kann mit diesem Programm sowohl HTML, CSS und JavaScript programmiert werden.
Visual Studio Code kann hier kostenlos heruntergeladen werden.

Mit Visual Studio Code wurde ein Projekt angelegt, um die Bestandteile der Webseite besser organisieren zu können. Da unsere neue Webseite sowohl HTML und CSS als auch JavaScript umfasst. Der gesamte Ordner mit dem Projekt ist in diesem GitHub-Repository zu finden. Dadurch kann jeder das Projekt so übernehmen wie es ist und alle Dateien liegen gut strukturiert vor.

Die Webseite liegt jetzt als separate HTML-Dateien vor, so dass die Webseite leicht angepasst werden kann und insgesamt modularer aufgebaut ist.

Wir haben die Webseite von Bootstrap auf CSS umgestellt, da Bootstrap deutlich mehr Definitionen für Designelemente enthält, als wir für diese Webseite benötigen. Deshalb ist die Datei von Bootstrap deutlich größer, als es sein müsste. Die Bootstrap-Datei ist ca. 120 KB groß, die neue CSS-Datei dagegen nur ca. 8 KB. Somit wird die Übertragungszeit deutlich verringert. Es wurden die benötigten Definitionen aus Bootstrap übernommen, so dass sich das Aussehen der Seite nicht grundlegend verändert hat.

Zusätzlich haben wir die Webseite mit JavaScript ausgestattet, damit so wenig wie möglich auf dem ESP32 gerechnet werden müssen. Dadurch können wir die Reaktionszeiten des Servers deutlich verbessern. Zudem hat man eine bessere Benutzererfahrung mit einer Webseite, die auf JavaScript aufgebaut ist, weil viele Anfragen ohne ein erneutes Laden der Seite durchgeführt werden können. Dies funktioniert über so genannte AJAX-Anfragen (Asynchronous JavaScript and XML). Darüber werden dann Daten im JSON-Format übermittelt. Diese kann das JavaScript im Client verarbeiten und darstellen.
Da jetzt auch kleinere Datenpacke verschickt und bearbeitet werden müssen läuft die Kommunikation schneller ab. Besonders für die CM-IOT ist dieser Aufbau sehr vorteilhaft. Da die Informationen getrennt von der Webseite abgerufen werden können. Denn wir haben hier mehrere ESP32, die verschiedene Komponenten steuern. Wenn jetzt also auf der Webseite die Informationen zur Cocktailmaschine abgefragt werden, kann der ESP32 der Cocktailmaschine die Informationen bereitstellen, während die Webseite weiterhin von der Bezahlstation verwaltet wird.