Bilder mit freundlicher Genehmigung der Feuerwehr Kirchweyhe:
https://www.feuerwehr-kirchweyhe.org/osterfeuer-am-19-april-2025-in-kirchweyhe/
Der Anlass für diese Software und wissenschaftlich, technische Ausarbeitung ist das Osterfeuer in Kirchweyhe. Wie man schon im Flyer erkennt, wird es ausreichend Speisen und Getränke geben und eben genau darum geht es auch in der Entwicklung meiner Anwendung. Aber kommt gerne zum Osterfeuer dazu und schaut euch das Projekt in Aktion an.
Der Durstrechner
Die Feuerwehr Kirchweyhe kam neulich bei einer Gruppenführer-Weiterbildung auf mich zu, ob ich denn nicht bis zum anstehenden Osterfest eine kleine Anwendung basteln könnte, die den Getränkeverkauf bei Veranstaltungen enorm erleichtert. Bei einer riesigen Getränkekarte und einem hohen Ansturm der Gäste kann es dann doch mal etwas schwerfallen, die Verkaufspreise inklusive und abzüglich Pfand richtig zu berechnen. Die Lösung: Der Durstrechner. Doch es gab ein paar Besonderheiten zu beachten:
- Die Anwendung muss auch ohne Internetverbindung laufen können und aufgerufen werden können.
- Das wird mittels Service-Worker realisiert, die ein Abbild der Anwendung abspeichern.
- Bilder und Daten werden im LocalStorage abgelegt, Bilder z.B. in Base64
- Die Seite soll auf Mobilgeräten, als auch auf Desktop- und Desktopähnlichen Geräten gut aussehen
- Ich habe das Rad nicht neu erfunden und mich an den Bootstrap Komponenten bedient.
- Einstellungen und Bilder müssen auf Geräten ausgetauscht werden können via JSON.
- Dies war zwecks Base64 einfach umsetzbar, auch wenn Bilder nicht allzu viel Größe beanspruchen dürfen, denn der LocalStorage hat auch ein Größenlimit in der Speichergröße (5MB – 10MB), was deutlich mehr ist als wie z.B. bei Cookies (4KB)
Ich entwarf also ein grobes HTML-Konstrukt und machte mir Gedanken zur Umsetzung als PWA. Die Anwendung sollte offlinefähig, performant und plattformunabhängig laufen, weshalb ich mich für den Einsatz von ECMA-JavaScript und einem ServiceWorker entschied, der sämtliche Ressourcen cached und bei Bedarf offline zur Verfügung stellt.
Der Aufbau erfolgte modular: Zentrale Komponenten wie die Berechnungslogik, UI-Komponenten und Datenhaltung im LocalStorage wurden voneinander getrennt, was eine leichtere Wartung und Erweiterung der Anwendung erlaubt. Bilder wurden direkt als Base64-Strings eingebettet, um Ladezeiten zu verringern und das Hosting zu vereinfachen.
Optisch habe ich auf das Bootstrap-Framework zurückgegriffen. Die Entscheidung fiel bewusst darauf, da es eine einfache Umsetzung responsiver Oberflächen ermöglicht und somit sowohl auf dem Smartphone als auch auf Tablets oder Desktop-Geräten gut aussieht.
Zur Synchronisation von Einstellungen und Bildern zwischen Geräten habe ich einen JSON-Export/-Import implementiert. So kann z.B. ein Gerät als zentrale Konfigurationseinheit fungieren, von dem aus andere Geräte die benötigten Infos erhalten. Dabei musste natürlich auf die Speichergröße des LocalStorage geachtet werden.
Den Quellcode habe ich auf GitHub veröffentlicht und einen CI-Workflow mittels GitHub Actions erstellt, der bei jedem Commit automatisch die Anwendung auf GitHub Pages deployt. Damit ist der Durstrechner nun jederzeit und ohne Installationsaufwand nutzbar.