Franke Touchless App - COVID-freier Kaffeegenuss dank PWA & IoT

1. Februar 2021 - von Kim Jeker

Das allgegenwĂ€rtige Thema COVID19 beschĂ€ftigt uns nun schon bald ein Jahr lang, sorgt fĂŒr viele VerĂ€nderungen in unserem alltĂ€glichen Leben und stellt uns in verschiedenen Bereichen vor neue Herausforderungen. So wurde das BerĂŒhren von GegenstĂ€nden im öffentlichen Raum, Knöpfen in den öffentlichen Verkehrsmitteln, TĂŒrklinken von öffentlichen GebĂ€uden oder Ampelschalter plötzlich unangenehm. Also sind Lösungen gefragt, die das Anfassen von solchen OberflĂ€chen ĂŒberflĂŒssig machen. Eine solche, nĂ€mlich die Franke Touchless Web-Applikation, stellen wir in diesem Blog Post vor.


Was hat Kaffee mit COVID zu tun?

Eine der zuvor angesprochenen, neuen Herausforderungen ist natĂŒrlich, die Verwendung und Bedienung von öffentlich zugĂ€nglichen GerĂ€ten und Automaten “COVID-sicher" zu machen. Dies ist vor allem deshalb essentiell, weil heutzutage viele dieser GerĂ€te und Automaten mittels Touchscreen bedient werden. Die Herausforderung besteht also darin, den Service, welcher der Automat den Endnutzer*innen anbietet, möglichst ohne direkten, physischen Kontakt zur VerfĂŒgung zu stellen. Sonst besteht das Risiko einer Schmierinfektion, da viele Leute immer wieder die gleichen Stellen des GerĂ€tes mit ihren HĂ€nden anfassen mĂŒssen.

Bei Automaten, welche einen grundsĂ€tzlich “virtuellen” Service fĂŒr Endkund*innen anbieten - wie zum Beispiel ein Ticket-Automat fĂŒr den ÖV - ist es um einiges einfacher, diesen Service auch ohne BerĂŒhrung des GerĂ€tes zur VerfĂŒgung zu stellen. Der Automat fungiert in diesem Fall meist sowieso nur als User Interface fĂŒr einen Service, der bereits irgendwo in der Cloud existiert. Daher ist zum Bezug des Services kein zwingender direkter Kontakt mit dem GerĂ€t notwendig. Beim Ticket-Automat kann das Ticket zum Beispiel auch online von Zuhause aus oder unterwegs via Smartphone gelöst werden.

Anders sieht es mit GerĂ€ten aus, welche den Kund*innen Zugang zu einem physischen Produkt bereitstellen. Zum Beispiel ein Snack-Automat in der Cafeteria, oder eben auch ein öffentlich zugĂ€nglicher Kaffeevollautomat. Hier fungiert das GerĂ€t nicht nur als User Interface, sondern stellt auch gleich das Produkt her, dass die User beziehen möchten. Die meisten solcher GerĂ€te sind daher meist noch nicht mal mit dem Internet verbunden, oder wenn dann nur zu Monitoring-Zwecken oder um Verkaufszahlen oder Störungsmeldungen an ein Online-Service zu melden. Ein Ansteuern des GerĂ€tes aus der Cloud, etwa um einen bestimmten Snack aus dem Snack-Automaten zu kaufen, ist nur bei den wenigsten dieser GerĂ€te bereits vorgesehen. Der Service, der das GerĂ€t den Benutzenden zur VerfĂŒgung stellt, lĂ€sst sich also nicht ganz so problemlos in die virtuelle Online-Welt verlagern, denn frĂŒher oder spĂ€ter ist das Anfassen des GerĂ€tes oder zumindest des produzierten Produktes unvermeidlich und die Nutzer*innen mĂŒssen dafĂŒr vor Ort sein.

Franke A300 Kaffevollautomat

Der Kaffee aus dem Internet

Unser Kunde Franke Kaffeemaschinen AG stand zu Beginn der Corona-Pandemie genau vor dieser Herausforderung: Wie erreicht man, dass die Benutzer*innen von Kaffeevollautomaten so wenig direkten Kontakt wie möglich mit dem GerĂ€t haben und dass sich der physische Kontakt nur auf OberflĂ€chen beschrĂ€nkt, welche im Idealfall von niemand anderem zuvor berĂŒhrt worden sind?

Franke produziert unter anderem Kaffeevollautomaten, welche fĂŒr den Einsatz an öffentlich zugĂ€nglichen Orten konzipiert sind. Diese Maschinen stehen also beispielsweise in der Cafeteria einer Firma, oder als Selbstbedienungs-Automaten in einem Convenience Store. Da Franke ihre Produkte weltweit verkaufen, war und ist das BedĂŒrfnis gross, den Kund*innen eine COVID-sichere Möglichkeit zu bieten, Kaffee und andere GetrĂ€nke von Franke-Automaten zu beziehen. Die Lösung fĂŒr das Problem ist die neue Touchless Dispense PWA (Progressiv Web App), welche das Beziehen von GetrĂ€nken ĂŒber das Smartphone ermöglicht.

Franke Touchless Web-Applikation

Der Use-Case der App ist folgender: Ein*e Kunde*in möchte ein GetrĂ€nk von einem Franke Kaffeevollautomaten beziehen, ohne das GerĂ€t anfassen zu mĂŒssen. Um dies zu bewerkstelligen, soll die Person die Möglichkeit haben, die GetrĂ€nkeauswahl direkt auf ihrem Smartphone zu tĂ€tigen - ohne dabei den Touchscreen des Automaten zu berĂŒhren. NatĂŒrlich sollte es fĂŒr Kund*innen natĂŒrlich möglichst einfach sein, die Auswahl des GetrĂ€nks auf dem Smartphone vorzunehmen. Die Auswahl sollte also möglich sein, ohne dass zuerst umstĂ€ndlich eine App aus dem Appstore heruntergeladen und installiert, oder eine komplizierte URL im Browser des Smartphones eingegeben werden muss.

Daher wurde Franke Touchless als PWA umgesetzt. Auf dem Kaffeevollautomaten wird ein QR-Code angezeigt, welcher die Kund*innen nach dem Abscannen direkt auf die PWA bringt.

Kaffeevollautomat mit QR-Code auf dem Display

In der PWA werden dann die GetrĂ€nke, die bei dem vorliegenden Kaffeevollautomaten zur Auswahl stehen, angezeigt. Die Kund*innen werden nun durch den GetrĂ€nkeauswahl-Prozess geleitet, Ă€hnlich wie das auf dem Touchdisplay des Automaten auch passieren wĂŒrde.

Als erstes kann die gewĂŒnschte GetrĂ€nkeart ausgewĂ€hlt werden: Espresso, Cappuccino, Milchkaffee - je nachdem was die Maschine zur VerfĂŒgung stellt. Danach kann das gewĂ€hlte GetrĂ€nk noch mit diversen Einstellungen angepasst werden. Beispielsweise kann die gewĂŒnschte Grösse gewĂ€hlt, oder ein Aroma hinzugefĂŒgt werden:

Bei MilchgetrĂ€nken besteht je nach Konfiguration und den Rezepten auf dem Kaffeevollautomaten auch noch die Möglichkeit, die Milchsorte zu wĂ€hlen, also zum Beispiel Vollmilch, Sojamilch, und so weiter. Je nach gewĂ€hltem GetrĂ€nk stehen auch noch viele weitere Optionen zur VerfĂŒgung.

Mit der BestĂ€tigung wird nun die Information des gewĂ€hlten GetrĂ€nks mit all den gewĂ€hlten Optionen an den Kaffeevollautomaten ĂŒbermittelt, damit diese das gewĂŒnschte GetrĂ€nk produzieren kann. WĂ€hrend dieser Zeit wird auf dem Smartphone ein Indikator angezeigt, dass die Produktion aktuell lĂ€uft.

Sobald der Kaffeeautomat das GetrĂ€nk produziert hat und der Becher gefĂŒllt ist, erhalten User in der Touchless App die Information, dass der Vorgang erfolgreich abgeschlossen wurde. Sie können nun das GetrĂ€nk geniessen oder einfach nochmals den QR-Code scannen und ein weiteres GetrĂ€nk konfigurieren, falls z.B. noch ein weiterer Cappuccino fĂŒr den Arbeitskollegen rausgelassen werden möchte.  

Kaffeevollautomat ist nicht gleich Kaffeevollautomat

Was die App aus technischer Sicht spannend macht, ist, dass jede Maschine ganz unterschiedliche GetrĂ€nke und GetrĂ€nke-Optionen zur VerfĂŒgung stellt. So können auf der einen Seite unterschiedliche GetrĂ€nke und GetrĂ€nke-Optionen konfiguriert sein: Zum Beispiel hat der eine Automat Rezepte fĂŒr Cappuccino und Espresso konfiguriert, ein anderer fĂŒr Espresso und CaffĂš Crema und wieder ein anderer hat nur Rezepte fĂŒr Teewasser und heisse Schokolade. Auch kann eine Maschine den Cappuccino wahlweise mit Soja Milch oder Vollmilch anbieten, wĂ€hrend eine andere nur Vollmilch anbietet. Und so weiter.

Auf der anderen Seite sind die GerÀte auch von der Hardware her unterschiedlich ausgestattet. So hat vielleicht die Maschine in einer Tankstelle oder in einem Laden keine sogenannte Flavor Station, mit welcher ein GetrÀnk mit Aromen verfeinert werden kann, wÀhrend der Kaffeevollautomat in der Cafeteria von Firma XY die Möglichkeit bietet, den Cappuccino mit Haselnuss-Aroma zu verfeinern. 

Es kann natĂŒrlich vorkommen, dass ein Automat zwar eine Flavor Station hat und auch ein Rezept fĂŒr einen Cappuccino mit Haselnussaroma, jedoch der Haselnuss-Cappuccino an einem bestimmten Tag besonders beliebt war, das Haselnussaroma bereits ausgegangen ist und der Haselnuss-Cappuccino somit nicht mehr zur VerfĂŒgung steht. Und natĂŒrlich gibt es nicht nur ein Cappuccino-Rezept, denn jeder Betreiber eines Franke Kaffeevollautomaten hat grundsĂ€tzlich die Möglichkeit, ein ganz eigenes GetrĂ€nke-Rezept wie zum Beispiel den "Super Special Winter Cappuccino" zu erstellen. Die Touchless App muss also sicherstellen, dass den Usern nur die GetrĂ€nke zur Auswahl stehen, welche auch tatsĂ€chlich produziert werden können.


Herausforderungen

NatĂŒrlich gab es bei der Umsetzung der App die eine oder andere konzeptionelle oder technische Herausforderung.

Dual-Use-Case

Eine konzeptionelle Herausforderung war beispielsweise, dass ein Kaffeevollautomat nicht nur noch via Touchless App angesteuert werden, sondern die normale GetrĂ€nkeauswahl ĂŒber den Touchscreen weiterhin möglich sein soll. Es ist schliesslich möglich, dass jemand kein Smartphone dabei hat oder nur ĂŒber ein Abo ohne mobile Daten verfĂŒgt. DafĂŒr kann ein “Dual Modus” konfiguriert werden: Die User haben dann auf dem Startbildschirm des Automaten die Möglichkeit, entweder den QR-Code zu scannen und die GetrĂ€nkeauswahl ĂŒber die Touchless App vorzunehmen, oder durch Tippen auf den Touchscreen die normale Auswahl zu starten.


Konflikte und Security Aspekte

Eine andere Herausforderung war auch, sicherzustellen, dass kein “Schabernack” mit der neuen Touchless App getrieben werden kann. Unter anderem sind folgende Szenarien denkbar:

  • Mehrere Kund*innen stehen in einer Warteschlange vor dem Kaffeevollautomaten. Da der QR-Code auf dem Touchscreen des Automaten angezeigt wird, können auch mehrere Leute gleichzeitig den QR-Code abscannen.

  • Ein*e Kund*in scannt den QR-Code und öffnet die App, lĂ€uft dann aber weg und wĂ€hlt spĂ€ter in der noch immer geöffneten App ein GetrĂ€nk aus.

  • Jemand fotografiert den QR-Code, und scannt ihn zu einem spĂ€teren Zeitpunkt ein, oder speichert sich den Link zur Touchless App.

Diese Szenarien zeigen, dass die Touchless App sicherstellen muss, dass immer nur eine Person auf einmal die GetrÀnkeauswahl treffen kann. Ausserdem muss sichergestellt werden, dass die Person mehr oder weniger direkt vor dem Kaffeevollautomaten steht, sprich, dass die GetrÀnkeauswahl nicht von irgendwo sonst getÀtigt werden kann.

Die Touchless App stellt dies sicher, indem der angezeigte QR-Code jeweils ein eindeutiges Transaktions-Token enthĂ€lt. Das Transaktions-Token ist nur fĂŒr ein paar Minuten und genau eine Transaktion gĂŒltig. Sobald eine Transaktion abgeschlossen ist, also das GetrĂ€nk erfolgreich produziert wurde, oder die GĂŒltigkeitsdauer des Tokens ĂŒberschritten wurde, wird ein neuer QR-Code angezeigt und das alte Transaktions-Token (und somit der alte QR-Code) kann nicht mehr verwendet werden.


Internationalisierung

Da Franke ihre Produkte auf der ganzen Welt verkaufen, muss die App natĂŒrlich fĂŒr Benutzer*innen in allen LĂ€ndern bedienbar sein. Da jedoch praktisch alles was auf dem Kaffeevollautomaten wĂ€hrend der GetrĂ€nke-Selektion angezeigt wird, durch die Betreiber komplett konfigurierbar ist und diese KomplexitĂ€t nicht vollstĂ€ndig in der App abgebildet werden sollte, wurde die App bewusst mit so wenigen Texten wie möglich konzipiert. Das ist auch der Grund, wieso bei der Auswahl der GetrĂ€nke-Optionen nur Icons, jedoch kein Text dazu angezeigt wird.

Mehr als nur eine App

Wichtig zu erwĂ€hnen ist, dass die Touchless App kein geschlossenes System ist: Die App wurde von Anfang an so konzipiert, dass Kunden von Franke ihre eigene Integration fĂŒr das Touchless System entwickeln können. Kunden können das Sytem also beispielsweise in ihre bestehenden Apps integrieren, so dass Benutzer*innen die Funktionen direkt nutzen können. Die Franke Touchless App ist demnach quasi die Referenz-Implementation, welche von den Betreibern der Franke Kaffeevollautomaten genutzt werden kann, die keine eigene Integration implementieren wollen oder können.

Wenn Vorbereitung auf Gelegenheit trifft

Ein wichtiger Grund, weshalb Franke in der Lage war, so schnell die Touchless App auf den Markt zu bringen - trotz den Schwierigkeiten mit GerĂ€ten dieser Art, welche in der Einleitung dieses Blogposts erlĂ€utert wurden - ist sicherlich, dass Franke zusammen mit Partner*innen wie Apps with love schon seit bald 3 Jahren stetig die FunktionalitĂ€t und Integration der IoT-fĂ€higen Kaffeevollautomaten am Erweitern und Weiterentwickeln sind. Dadurch war die Hardware (also sprich die Kaffeevollautomaten selbst), welche bereits bei Kund*innen auf der ganzen Welt steht, schon in der Lage, die fĂŒr die Touchless App benötigten Funktionen bereit zu stellen. Einige davon sind beispielsweise Remote-Dispense ĂŒber die Cloud, Ansteuerung des angezeigten QR-Codes auf der Maschine und die RĂŒckmeldung der verfĂŒgbaren/installierten Rezepte und Produkte an die Cloud. 


Und so sieht das dann aus: Die Franke Touchless App im Testing

Die technische Umsetzung der App

FĂŒr alle, die sich nun Fragen, wie denn das Ganze technisch aufgebaut ist, hier eine kurze Zusammenfassung zur Architektur und zur technischen Umsetzung der App:

GrundsĂ€tzlich beginnt alles beim Kaffeevollautomaten selbst, denn dieser ist schlussendlich sowohl fĂŒr das Produzieren der GetrĂ€nke als auch fĂŒr das Anzeigen des QR-Codes verantwortlich. Damit der Automat von der Cloud (und damit auch von der Touchless App) aus angesteuert werden kann, ist er mittels Microsoft Azure IoT mit dem Internet verbunden.

WĂ€hrend des Betriebes sendet der Kaffeevollautomat kontinuierlich Events und Daten an die Cloud: Wann ein GetrĂ€nk rausgelassen wurde, wenn ein Fehler auftritt weil zum Beispiel ein GetrĂ€nk nicht produziert werden konnte weil Kaffeebohnen ausgegangen sind, was die aktuell installierten Produkte sind, oder welche Ressourcen (Kaffebohnen, Milch, Wasser, Aromas, etc.) verfĂŒgbar oder nicht verfĂŒgbar sind. Gleichzeitig kann die Cloud auch Befehle senden, wie etwa einen QR-Code anzeigen, oder die Produktion eines GetrĂ€nks starten.

Diese Grund-Architektur bildet das Fundament fĂŒr die Touchless App. Die Touchless App selbst ist, wie oben schon erwĂ€hnt, eine PWA, welche mit Vue aufgebaut ist. Die App kommuniziert via Ajax mit dem sogenannten Touchless Webservice, welcher das Transaktionsmanagement und die Kommunikation mit der Franke Cloud handelt.


Touchless App Architektur

Wenn nun eine Person den QR-Code auf dem Kaffeevollautomaten scannt, landet sie auf der URL der Touchless App. Die URL enthÀlt ein eindeutiges Transaktions-Token, welches von der App an den Touchless Webservice gesendet wird. Mittels diesem Transaktions-Token kann der Touchless Webservice sowohl sicherstellen, dass die Person berechtigt ist, ein GetrÀnk auszuwÀhlen und zu produzieren (Authentifizierung und Transaktions-Management), als auch den richtigen Kaffeevollautomaten identifizieren, von welchem die Person den QR-Code gescannt hat.

Als erstes fragt die Touchless App beim Touchless Webservice die verfĂŒgbaren Rezepte ab. Der Webservice leitet diese Anfrage ĂŒber die Franke Cloud an den richtigen Kaffeevollautomaten weiter, welcher seine installierten Rezepte inklusive der Information, welche dieser Rezepte denn tatsĂ€chlich auch produziert werden können, zurĂŒckmeldet. Ein Rezept auf der Maschine ist grundsĂ€tzlich ein eindeutiges, vollstĂ€ndiges GetrĂ€nk, wie zum Beispiel “Cappuccino mit Sojamilch, Erdbeeraroma, dunkler Röstung und einer doppelten Menge Kaffee”, oder “Doppelter Espresso mit Vanille Aroma”. Das Rezept beinhaltet auch alle Einstellungen des Automaten, die dieser benötigt, um das GetrĂ€nk zu produzieren wie Mengen, Wassertemperatur, und so weiter.

FĂŒr die Touchless App sind vor allem die sogenannten Filter-Attribute des Rezepts wichtig. Die Filter-Attribute sind Metadaten auf einem Rezept, welche angeben, was fĂŒr Optionen ein Rezept hat. Filter-Attribute sind zum Beispiel die GetrĂ€nke-Familie (Espresso, Cappuccino, Heisse Schokolade etc.), die Tassengrösse (Klein, Mittel, Gross), das Aroma (Erdbeere, Vanille, etc.) und der Milchtyp (Vollmilch, Fettarme Milch, Sojamilch, etc.). Jedes Rezept hat nun diese Filter-Attribute zugewiesen:

Franke Rezepte Filter Attribute

Aus diesen zurĂŒckgemeldeten Rezepten baut nun die Touchless App einen Entscheidungsbaum auf, durch welchen die Kund*innen in der App Schritt fĂŒr Schritt durchgefĂŒhrt werden. Auf jedem Schritt können Benutzer*innen eine Option zu einem Filter-Attribut wĂ€hlen. Mit jeder gewĂ€hlten Option wird die Auswahl der Rezepte weiter eingeschrĂ€nkt, bis schlussendlich nur noch ein Rezept ĂŒbrig bleibt. Sobald nur noch ein Rezept zur Auswahl steht, ist die GetrĂ€nke-Selektion abgeschlossen und Kund*innen werden dazu aufgefordert, die Auswahl zu bestĂ€tigen. Mit der BestĂ€tigung sendet nun die App das selektierte Rezept an den Touchless Webservice, welcher dies via Franke Cloud an den Kaffeevollautomaten weiterleitet. Sobald das GetrĂ€nk fertig produziert ist, meldet dies der Kaffeevollautomat via Franke Cloud an den Touchless Webservice zurĂŒck. Dieser markiert dann die Transaktion als beendet, sendet einen neuen QR-Code an den Kaffeevollautomaten und gibt der Touchless App RĂŒckmeldung, dass die Transaktion erfolgreich beendet wurde.


Schnelle Lösung durch gute Zusammenarbeit

Wir hoffen, wir konnten einen guten Einblick geben, wie wir fĂŒr eine ungewohnte und so nicht vorhergesehene Herausforderung in Zusammenarbeit mit der Franke Kaffeemaschinen AG eine praktische Lösung finden konnten. Das ganze Projekt hat von der Entscheidung, dass es durchgefĂŒhrt wird, bis die Touchless App zur VerfĂŒgung stand nur wenige Monate gedauert. Wie oben geschrieben war das nur möglich, weil wir seit lĂ€ngerem eng mit Franke zusammenarbeiten und man sich daher schon kannte und wusste, wer am besten was zur Lösung beitragen konnte. Wir freuen uns auf alle FĂ€lle auf die Umsetzung von weiteren clever Lösungen zusammen mit Franke und wĂŒnschen weiterhin gefahrlosen Kaffeegenuss. 

Wir haben grad gemerkt, dass du mit Internet Explorer surfst. Unsere Webseite sieht damit leider nicht so schön aus.

Du willst erfahren warum das so ist?
Wir haben darĂŒber geschrieben.

Zum Blog

Du brauchst Hilfe bei der Umstellung?
Melde dich. Wir helfen gern.

Kontakt

Einen neuen Browser installieren?
Hier gibt es Auswahl.

Browser