Ein junger Mann steht ratlos vor einem Supermarktregal. Säfte der Marke “Hohes C” in verschiedensten Geschmacksrichtungen beanspruchen sein Erinnerungsvermögen. “Wollte meine Frau den milden oder den normalen Multivitaminsaft? Oder war es doch der Multivitaminsaft Rot ihr Lieblingsgetränk?” Nach langer Überlegung trifft er eine Entscheidung. Zuhause angekommen ist die Enttäuschung groß. Schon wieder hat er den falschen Saft mitgebracht. Doch diese Probleme gehören jetzt der Vergangenheit an! Er hat nun einen Telefonjoker in seiner Tasche. Mit der App “Geschmeckt” kann er jederzeit nachschauen welche Produkte seine Familie am liebsten hat.

Verwendung

Aktuell ist die App für Android Smartphones verfügbar. Eine Erklärung wie man das APK baut, befindet sich im Readme file des verlinkten Github Projekts.

Der Startbildschirm begrüßt User mit einer wechselnden Grafik von OpenMoji[*]. Für die Nutzung der App ist ein Account erforderlich. Dieser kann direkt am Startbildschirm angelegt werden. Fertig angemeldet? Nun kann der User Produkte bewerten. Hierzu muss er lediglich den Strichcode der Produkte einscannen. Sofern es in der Geschmeckt Datenbank ist, kann es bewertet werden. Bild 1 zeigt die beschriebene Szene und Bild 2 ist ein Screenshot von der Produktdetailseite mit einer eigenen Bewertung und der eines Gruppenmitglieds.

Wie teilt man die Bewertungen mit seiner Familie oder mit seinen Freunden? Diese Freigaben kann man in Gruppen organisieren. Um eine Gruppe zu erstellen oder eine bestehenden beizutreten, wechselt man über die untere Navigationsleiste auf den “Group” Tab-Eintrag (siehe Bild 3). Ein User kann in mehreren Gruppen sein und somit mit unterschiedlichen Gruppen Bewertungen teilen.

Technische Details

Die App ist mit Ionic gemacht und verwendet das Frontend-Framework Angular. Die App interagiert mit einer REST-API, die mit NestJS geschrieben wurde. Die Backend-Applikation persistiert Daten in einer PostgreSQL Datenbank mittels des object-relational-mapper TypeORM. Dank TypeORM kann die verwendete Datenbanklösung relativ unkompliziert ausgetauscht werden, sodass auch der Betrieb mit MariaDB bzw. MySQL möglich ist.

Die NestJS-Applikation dokumentiert die REST-API mit Swagger. Die generierte OpenAPI-Dokumentation ermöglicht es dem Frontend, dass es mit dem OpenAPI Generator einen API-Client generieren kann. Mit dem API-Client sind Requests wunderbar typisiert und verhindern lästige Tippfehler, die bei Request-Parametern schnell vorkommen können. Dass der generierte API-Client mit dem Request Modul von Capacitor zusammen funktioniert, sind jedoch Tricks anzuwenden. Diese finden sie in meinem anderen Blogbeitrag.

Aktuell wird die Backend-Applikation auf der FH-Cloud gehostet. Aufgrund von unerklärlichen Verbindungsproblemen mit der auf der FH-Cloud gehosteten MariaDB habe ich mich dazu entschieden den Dienst “Supabase” zu verwenden. Dieser stellt mir eine PostgreSQL Datenbank zu Verfügung. Die Erstellung der Datenbank war ausgesprochen unkompliziert und schnell.

Testing

Der Fokus der automatisierten Tests lag auf End-to-end Testing. Nachdem Ionic ein webbasiertes App-Framework ist, kann man auf Tools zurückgreifen, die in der Webentwicklung üblich sind. Für Geschmeckt wurden die drei wichtigen Tasks im User-Flow getestet: Account erstellen, Gruppen erstellen/beitreten und Produkte bewerten bzw. Bewertungen von Gruppenmitgliedern betrachten. Der Screenshot (Bild 4) zeigt das Interface von Cypress beim Testen des Gruppen-Managements. Unit-Tests wurden leider nur in geringem Umfang im Backend geschrieben.

Nächste Schritte

Das App-Entwicklungsframework Ionic ermöglicht es grundsätzlich Applikation für Android und iOS zu bauen. Geschmeckt unterstützt iOS noch nicht, da mir Testgeräte fehlen. Die Verwendung des Simulators ist leider nicht ausreichend, weil Geschmeckt zum Scannen der Strichcodes die Kamera des Smartphone verwendet. Dies ist nur realistisch auf einem echten Gerät testbar.

Aktuell muss eine UUID manuell eingegeben werden um einer Gruppe beizutreten. Dies ist eine provisorische Lösung. Die User Experience wäre deutlich besser durch die Verwendung von Universal links. Ein User könnte dann ganz einfach einen Einladungslink verschicken. Beim Empfänger würde sich dann entweder der App Store öffnen oder er würde direkt in der App auf der Seite der Gruppe landen.

Ein bekanntes Problem ist leider die Navigation mittels Hardware-Zurück-Buttons. Die von Ionic dokumentierte Umsetzung, hat leider in der Geschmeckt App nicht vollständig funktioniert. Der User kann jedoch in keine Sackgasse gelangen, da zu jeder Zeit ein Zurück-Button im Header angeboten wird. Wenn die Kamera zum Scannen geöffnet ist, gibt es keine UI-Elemente. Hier funktioniert glücklicherweise der Hardware-Zurück-Button mit der dokumentierten Lösung.

Welch Features würden der App noch gut tun?

1. Eine Suche von Produkten nach Kategorien und per Name wäre sehr hilfreich, um Produkte zu finden.
2. Für User wäre es praktisch Einkaufslisten in dieser App zusammenzustellen, um die Bewertungen Planung des Einkaufs einfließen zu lassen.
3. Eine praktische Erweiterung könnte auch ein Meal Planer sein. Damit könnte man, basierend auf Rezepten, einen Einkauf planen. Verknüpft mit den Bewertungen, wäre die Zusammenstellung einfach und sogar automatisierbar.
4. Mit der erstellten Einkaufsliste könnte der User eine Bestellung bei einem Lieferdienste wie den BILLA Onlineshop aufgeben.

[*] All emojis designed by OpenMoji – the open-source emoji and icon project. License: CC BY-SA 4.0