Einleitung

Dieses Semesterprojekt wurde im Rahmen der Masterklasse Mobile im 2.Semester durchgeführt. Ich hatte schon länger die Idee einmal einen FoodScanner zu erstellen, einfach um Food Apis zu testen. Ich finde es ziemlich spannend welche Daten man alle zurückbekommt und in sehr vielen verschieden Möglichkeiten verwenden kann. Deswegen will ich dieses Projekt auch länger verfolgen.

Der FoodScanner ist eine Web-App, mit der man Barcodes von Lebensmitteln scannen kann und diese auf Allergene überprüfen kann. Als API verwende ich die OpenFoodFacts API.

Hauptfeatures der Chat-App

1 Benutzer-Authentifizierung

Es gibt eine sichere Anmeldung und Registrierung mit JWT-Token. Diese werde für eine gewisse Dauer in den Cookies gespeichert und dann als ungültig deklariert.

2 Barcode-Scanner

Man kann in Echtzeit die Produkt-Barcodes scannen und, sofern in der API vorhanden, ein Produkt zurückbekommen, welches automatisch auf die ausgewählten Allergene überprüft wird. Man erhält visuelle Warnsignale ob das Produkt „safe“ ist oder nicht. Außerdem wird das gescannte Produkt mit Bild und Inhaltsstoffen angezeigt.

Technologien und Frameworks

Frontent

• Nextjs als React Framework
• TypeScript
• Tailwind CSS
• Shadcn (UI Library)
• React-barcode-scanner als library für den Scanner

Backend

• NestJS
• MySQL

Projektstruktur

Die Projektstruktur ist mir persönlich relativ wichtig und auch in diesem Projekt habe ich versucht eine gute Struktur zu schaffen:

Frontend:

• app/
  • pages/dashboard: Hauptdashboard der App
  • auth/register: Registrierungsseite
  • actions/apiCalls: Api Call an das Backend
• components/
  • ui/: Diverse UI componenten von shadcn + BarcodeScanner
  • AllergyForm/: Button + popup für die Allergenauswahl
• middleware/: Die middleware um Routen zu sichern

Backend:

• src/:
  • auth/: Alles was mit JWT Token + Login zu tun hat
  • food/: Enthält den API call zu OpenFoodFacts + das Filtern der Daten
  • users/: Vorsorglich alles was man für den User braucht

Herausforderungen und Learnings

1 Barcode-Scanner Integration

Der Barcode Scanner war mit Abstand die Größte Hürde. Ich habe mehrere Bibliotheken getestet, wobei mehrere gar nicht funktioniert haben, deprecated waren oder super langsam. Was aber alle gemeinsam hatten, war die komplizierte Dokumentation. Irgendwann habe ich dann den React-barcode-scanner gefunden, der auch relativ kompliziert war, aber eine gute Dokumentation hat. Dieser hat auch erstaunlich schnell funktioniert.

2 API Daten

Die Api Daten zu verarbeiten war auch nicht so trivial wie eigentlich gedacht. Von Openfoodfacts bekommt man nämlich ein 4 Seiten langes JSON zurück, welches sehr komische Pairs enthält. Ich habe dann im Backend die Daten gefiltert, für die die ich wirklich brauche und erst dann schicke ich sie an das Frontend.

3 Allergen Matching

Das Allergen Matching war auch nicht so einfach, auch wenn es nur Dinge wie Array-Filterung enthält. Jedenfalls musste ich es zuerst einmal schaffen alle User-Allergene in einen Array zu speichern, wo wiederum alle mit „en:“ annotiert werden. Die eigentliche Filterung war dann nicht mehr so schwer.

Zukünftige Features

• Erweiterte Allergen-Datenbanken für mehr Quellen
• Speicherung der Allergene in den User-Profilen
• History der gescannten Produkte

Hinweis: Das Titelbild wurde mittels KI generiert.