Gestern wurde ein Projekt fertig, an dem ich schon länger gebastelt habe. Es war ein Projekt das mir sehr am Herzen liegt, wobei die Dringlichkeit immer mal wieder zu und abgenommen hat. Es handelt sich um eine Einkaufsliste die mehrere Personen nutzen können. „Ach, da gibt es ja hunderte im App-Store!“ könnte man mir sagen. Ja das stimmt, ist meine nüchterne Antwort, aber keine die so auf meine Wünsche und Bedürfnisse zugeschnitten ist.

Ich habe mir einige davon angeschaut, aber am Schluss bin ich dann mit meinem Schatz doch wieder in der WhatsApp Einkaufsgruppe gelandet.

Was sind denn nun meine Anforderungen?

• Schnelles und einfaches hinzufügen von Produkten.
• Wenig Traffic, kein Polling
• trotzdem mehrere User auf einer Liste, also gemeinsames Einkaufen möglich

Aber jetzt kommt das wichtigste. Die Produkte sollen in der Reihenhole in der Liste stehen, wie sie auch im Supermarkt platziert sind. Und zwar für die Supermärkte in denen ich am liebsten einkaufe.
Achja, und eine Rezeptdatenbank mit Produktverwaltung ist kurzfristig auch noch dazugekommen.

Aber schauen wir’s doch einfach an. Die Einkaufsliste läuft auf meiner Webpräsenz. Es wird unterschieden ob der Client ein Desktop- oder Mobil-Browser ist. Die Konfiguration ist am einfachsten über den Desktop zu erledigen. Produkte kann man entweder in der Produktverwaltung anlegen, über eine API, oder indem man sie einfach der Einkaufsliste hinzufügt. Hier entsteht zunächst ein Schattenartikel, dem man einen Namen und zusätzliche Informationen sowie ein Foto mitgeben kann. Nicht spezifizierte Produkte erscheinen immer am Ende der Einkaufsliste, sind aber für die Auswahl beim nächsten hinzufügen Auswählbar.

Bei vorhandenen Produkten bekommt man beim Tippen bereits Vorschläge gemacht und kann diese übernehmen.

Danach optional noch die gewünschte Anzahl und welche Maßeinheit.

Schon ist der Artikel in der Einkaufsliste. Gleiche Produkte mit gleicher Maßeinheit werden automatisch aufsummiert. Optionale Informationen und Fotos werden durch die Icons dargestellt und können angeklickt werde, wodurch sie in einem Overlay angezeigt werden. Ganz oben kann man seinen Wunschsupermarkt einstellen, wodurch sich die Sortierung der Produkte entsprechend anpasst.
In der Produktverwaltung kann man Produkte direkt anlegen.

Beim Schreiben erhält man ebenfalls Hinweise, welches Produkt bereits vorhanden ist. Bei der Kategorie wird es nun interessant. Denn auf der Kategorie basiert die Navigation im Supermarkt. In der Produktverwaltung angelegten Produkten muss man gleich die Kategorie einstellen. Auch hier kann man Fotos knipsen, Bilder einfügen, und Notizen machen. Beliebte Produkte kann man als Favorit markieren. Hierfür gibt es auch eine Toggle Funktion in der Favoritenspalte. Fährt man mit der Maus drüber wird das Feld hervorgehoben und durch klicken kann man den Favoriten setzen oder entfernen. Anderweitig hinzugefügte Produkte haben die Kategorie „undefined“. Diese werden rot hervorgehoben und müssen von Zeit zu Zeit einer Kategorie zugewiesen werden. Die Kategorien müssen einmalig angelegt werden.

Hierzu habe ich in der Supermarkt-Scene recherchiert. Wie Supermärkte organisiert werden, welche Produkte wie platziert werden, und welche Produktgruppen daraus abgeleitet werden können. Diese habe ich angelegt und mit einem für mich passenden Emoji versehen.

Dann muss man diese Produktgruppen nur noch in der richtigen Reihenfolge für den Supermarkt per Drag & Drop hinschieben.

Supermarkt wählen! Grüne Kacheln sind sortiert, weiße nicht. Nun ist alles eingestellt.

Für mobile Geräte habe ich das als Web-App gebaut.
Nachdem die App auf dem Bildschirm ist

kann sie geöffnet werden. Hier ist das Funktionsprinzip das gleiche, nur eben auf Touch optimiert. Nachdem alles eingestellt ist, kommt eine weitere interessante Funktion dazu. Beim klick auf das + öffnet sich ein weiteres Overlay. Hier kann man die Produkte direkt aus der Kategorie auswählen. Produkte die man häufiger benötigt findet man auch in den Favoriten wenn man diese gesetzt hat.

Zu guter Letzt gibt es noch den Barcodescanner den man in dieser Auswahl findet. Hier habe ich bereits erklärt worauf ich hinaus will. Ein weiterer Menüpunkt ist die Rezeptverwaltung.

Hier kann man Rezepte anlegen, und diesen Produkte zuweisen.

Hier gibt es das Produkt welches eine Zutat, eine optionale Zutat oder ein Gewürz sein kann. Mange, Einheit und Zusätzliche Informationen. Die Reihenfolge im Rezept kann man zudem noch einstellen.
Hierfür habe ich die oben erwähnte API eingebaut. Man kann json in der richtigen Struktur direkt an die Schnittstelle schicken. Dann wird ein Rezept angelegt und die dazugerigen Produkte. Diese werden sofort geprüft, und wenn noch nicht vorhanden angelegt. So hat mein Rezept-Agent bisher 150 Rezepte mit den passenden Produkten in die Datenbank geschrieben. Zurück zum Scanner.

Barcode scannen. Wenn das Rezept richtig angelegt ist, findet er die Produkte.

Zutaten und Optionale Produkte werden zum Einkaufen vorselektiert, Gewürze nicht. Mit einem klick kann man korrigieren was man in der Einkaufsliste haben will. Über den Button Übernehmen werden die Markierten Produkte zur Einkaufsliste hinzugefügt. Das System lässt sich vielseitig einsetzen.

So, nun zum Einkaufen. Durch einen klick auf den Einkaufswagen hat man das Produkt in den Einkaufswagen gelegt. Hier gibt es wieder einen Toggle Mechanismus. Stellt man fest das man etwas falsches in den Einkaufswagen gelegt hat, kann man dieses durch erneutes klicken wieder Herausnehmen. Rausgehend werden nur die Daten des einen Produkts an den Webserver geschickt, eingehend bekommt man die gesamte Liste, um zu synchronisieren, wer sonst noch etwas eingekauft hat, oder gegebenenfalls etwas zusätzliches in die Einkaufsliste getan hat. Alles läuft über AJAX wodurch die Datenmenge stark reduziert ist. Es soll ja auch gehen wenn man mal schlechten Empfang hat.

Sind zu guter Letzt alle Produkte als Eingekauft markiert, werden diese in eine andere Tabelle verschoben, und die Einkaufsliste ist leer. Die historischen Einkäufe kann man sich dann auf einer weiteren Seite anschauen.

Wer Verbesserungsvorschläge hat, immer her damit.