Drink Genie
Das Eis ist gefroren, die Bar gut gefüllt. Und trotzdem mische ich mir den selben Drink seit anbeginn der Zeit: Gin Tonic, Genuss in seiner reinsten Form. Ist das nicht langweilig? Die Bar hat viel mehr zu bieten, all die Flaschen, die man für nur einen Abend und einen bestimmten Drink brauchte, stehen jetzt da – schade eigentlich.
Nicht ganz ohne Eigennutzen programmierten und gestalteten Beni und ich die Web-App Drink Genie. In den Interaktiven Medien II hatten wir die Möglichkeit, mit APIs zu arbeiten und programmierten in dieser Woche einen Proof of Concept. In den kommenden Monaten arbeiteten wir viele weitere Stunden daran und entwickelten die einzelnen Funktionen weiter. Ebenfalls optimierten wir die Web-App für Mobile-Devices, da wir aus eigener Erfahrung nur selten mit dem Laptop in der Küche hantieren. Trotzdem ist sie von Desktop unterstützt. Doch bevor wir anstossen, hier ein Überblick der Funktionen:
- Anzeige eines zufälligen Drinks (aus mehr als 3’000 Drinks)
- Anzeige der 20 meistgeklickten Drinks
- Nach Drinks suchen und nach Zutaten filtern
- Anzeige der eigenen Favoriten
Mit Drink Genie wurden wir unserer eigenen Hausbar wieder Herr und konnten, auch ohne etliche Minuten im Internet nach dem besten Drink suchen zu müssen, schnell und bequem einen auswählen und dann auch geniessen.
Na, schon Feierabend? Dann probier Drink Genie doch hier aus – salud!
(hil)
Idee
Beni kam in dieser zweiten Blockwoche mit der Idee, mit dieser Drink-API eine App zu entwickeln. Da ich auch ein nettes alkoholisches Getränk schätze, war ich natürlich sofort dabei. Wir wollten eine Web-App entwickeln, die wir selber im Alltag benutzen und auch unseren KollegInnen ungeniert weiterempfehlen würden. Drink Genie wurde geboren.
Umsetzung
Die unterschiedlichen Funktionen mussten zuerst definiert werden: Was vermissten wir selber, wenn wir im Internet nach neuen, coolen Drinks suchten? War es die nervige Suchfunktion, die unübersichtliche Gestaltung, die viele Werbung? Oder einfach alles? Daraus ergaben sich die vier Hauptfunktionen:
- Random Drink
Die API hat eine eigene URL um zufällige Drinks abzurufen. Diese Funktion war auch der Umfang des Proof of Concepts in der Blockwoche. Dort wird der Name des Drinks, ein Bild, die Zutaten und deren Menge und das Rezept angezeigt. Direkt in dieser “Rezept-Karte” kann dann mit Buttons vorwärts und rückwärts gesprungen werden. Der Back-Button zeigt dabei die Drinks an, die bereits besucht wurden und der Next-Button zeigt den nächsten zufälligen Drink an. Ein Herz für die Favoriten-Funktion kann auch ausgewählt werden. - Top 20 Drinks
Eine einfache Liste mit dem Namen und einem kleinen Vorschaubild des Drinks. Wenn man auf den Drink klickt wird man zur selben “Rezept-Karte” weitergeleitet und kann von dort durch die Top 20 klicken und diese ebenfalls favorisieren. - Search & Filter
Hier kann man ein Rezept suchen, wenn man den Namen kennt. Mit einer bequemen Live-Suche werden alle Resultate angezeigt, die diese Buchstaben in Namen haben. Klickt man den Namen an, wird man wieder zur “Rezept-Karte weitergeleitet. Filtern kann man nach den beliebtesten Spirituosen. Auch Mehrfachauswahlen sind möglich. - My Favorites
Wird das Herz angeklickt, wird die aktuelle Drink-ID in den Local Storage gespeichert und kann dann über den Favoriten-Tab abgerufen werden. Dies funktioniert natürlich nur so lange, bis die Browserdaten gelöscht werden – dann sind die Favoriten weg.
Bei dem definieren der Funktionen waren Beni und ich beide lange beschäftigt: Wie setzen wir das um, wie sieht es dann aus und bringt es überhaupt einen Mehrwert für den User? Waren die Grundlagen festgelegt, hat sich Beni an die Umsetzung mit den üblichen Verdächtigen, nämlich HTML, CSS und Javascript gemacht.
Währenddessen gestaltete ich die App. Mit Adobe XD hatte ich einen wundervollen Begleiter kennengelernt, mit dem man super einfach seine Ideen aufzeichnen und auch schon zum Leben erwecken kann. Auch das Logo, eine Mischung von Typographie und einer kleinen Aladin-Wunderlampe entsprach meiner Vorstellung des Looks sehr gut. Die tropischen Farben, die funky Header-Font und die analoge Paragraph-Font haben einen starken 80er-Vibe.
Herausforderungen
Da Beni in der Programmierung viel stärker ist als ich, haben wir uns die Arbeit so aufteilen müssen, dass er praktisch nur den Code schreiben muss und mache alles andere. Am Anfang wollten wir noch zusammen und gleichzeitig am Code arbeiten, doch wegen nicht zufriedenstellend arbeitenden Kollaborations-Tools mussten wir diesen Wunsch leider schnell aufgeben. Stattdessen bereitete ich die SVG-Grafiken auf, beantwortete Fragen zum Layout und unterstützte ihn dort wo nötig und möglich.
Da das ganze App-Entwickeln für uns noch Neuland war, ging es nur langsam und sehr harzig vorwärts. Es standen ja schliesslich noch genug andere Projekte an und so versuchten wir, jeweils an mindestens einem Abend in der Woche daran zu arbeiten. Auch mit den Servern hatten wir Probleme und mussten deswegen mehrmals eine andere Lösung suchen. Doch am Schluss klappte dann doch alles.
Fazit
Würden wir das Projekt nochmals machen? Auf jeden Fall. Würden wir es genau so umsetzen wie jetzt? Sicher nicht. Der Sinn hinter den Digezz-Projekten ist ja, sich auch einmal aus seiner Komfortzone zu bewegen und mit Technologien oder Prozessen zu arbeiten, die einem nicht so vertraut sind. Bei Drink Genie machten wir leider genau das Gegenteil: jeder von uns arbeitete entlang seiner Stärken. Und da wir von Anfang an die Aufgaben so starr aufgeteilt haben, konnten nicht einfach ein paar Zeilen Code von mir geschrieben oder eine neue Schriftfarbe von Beni eingefügt werden.
Es gilt, auch einmal den Sprung ins kalte Wasser zu wagen und die Abende mit googeln nach for-Schlaufen in JavaScript oder Flexboxen in CSS zu verbringen. Doch um diesen Sprung zu wagen, muss man sicher sein, dass die Rahmenbedingungen stimmen. Und bei diesem Projekt war das Eis definitiv noch zu dick, um einen Schwumm zu nehmen.