Projekt
Entwicklung einer PWA für die HTWK Mensa
Projektziel
In einem Zweierteam entwickelten wir eine Progressive Web App für die Mensa der HTWK Leipzig. Das Kernfeature der Anwendung ist ein Sitzplatz-Teilsystem, bei dem die Nutzer einen Code generieren können, der als Link mit Kommilitonen geteilt wird. Sobald der Link geöffnet wird, zeigt er einen dynamischen Sitzplan an, damit Freunde und Kommilitonen problemlos denselben Sitzbereich finden können.
Darüber hinaus haben wir KI-Technologie eingesetzt, um den Speiseplan aufzubereiten. Anhand der Speisetitel generiert die App automatisch ein Vorschaubild des Essens, schätzt Nährwertinformationen und erstellt tägliche Benachrichtigungstexte. die als Push-Notification an die Benutzer ausgeliefert wird.
Ein Ansturm-Timer, der auf Erfahrungswerten basiert, gibt Auskunft darüber, ob der Nutzer sich vor oder nach den Stoßzeiten in der Mensa aufhält.
Für die Entwicklung haben wir ca. 6-8 Wochen gebraucht.
🖥 Frontend-Technologien
React: Fundament der WebApp; effiziente UI-Updates und Component-Struktur.
Redux: Zustandsmanagement; Verwaltung globaler Zustände.
React DOM Router: Dynamisches Routing.
LocalStorage: Datenpersistenz; Speicherung von Benutzerdaten über Sitzungen.
ShareAPI: Gerätespezifische "Teilen"-Funktion.
WebPush API: Echtzeit-Push-Benachrichtigungen.
MUI: Material-Design-Bibliothek; optische Gestaltung.
D3 und Nivo: Datenvisualisierung; Darstellung des Mensa-Grundrisses und des Auslastungsgraphen.
⚙ Backend-Technologien
Nightly: Autmatisierter in Python geschriebener, KI-gestützter Prozess; Generierung von Vorschaubildern und Benachrichtigungstexten.
Firebase: Management und Senden von Push-Benachrichtigungen.
🛠 Dev Ops
CI/CD Pipeline: Automatisierung über GitHub; Versionierung und Docker-Image-Aktualisierung.
Deployment: Automatisiertes Deployment auf Traefik VPS Server via Docker Compose.
📱 PWA Funktionalitäten
Service Worker Caching: Offline-Verfügbarkeit; Option zur manuellen Cache-Leerung.
"Installieren"-Funktion: native App-Installation auf Android; Hilfe Sheet für iOS.
Push Benachrichtigungen: Via Firebase Service Worker und Firebase Functions / Message API.
Screenshots
