Mobile App – vom Konzept in die Stores

Website war gestern. Wer heute seine Kunden erreichen will, muss schon mehr bieten. Mit einer mobilen App ist man diesem Ziel schon ein Stück näher. Besser gesagt, man befindet sich in der Hosentasche der Zielgruppe und kann deren Aufmerksamkeit mit Native-Funktionen wie Push Notifications gewinnen.

Die Bar «Circle Café Underground» hat unregelmässig für Livesportübertragungen, Konzerte, Partys und Bierpong Turniere geöffnet. Da es sich um die einzige Bar im Dorf handelt und sehr abwechslungsreiche Events organisiert werden, wird das Angebot von den Leuten geschätzt. Das Problem dabei ist, die Gäste rechtzeitig über die bevorstehenden Events zu informieren, bzw. diese zu erreichen. In der Informationsflut auf den Sozialen Medien gehen Posts und Informationen zu Events oft unter. Auch ein Websitebesuch hängt mit einer Aktion seitens Kunden zusammen und ist für die meisten Gäste schon zu viel Aufwand.

Genau aus diesem Grund entstand die App «Circle Café Underground». Über die Facebook API werden die entsprechenden Daten der Events geladen und dem Benutzer dargestellt. Daneben hat man den Vorteil, gewünschte Events direkt aus der App in seinem Kalender speichern zu können. Möchte man Push Notifications erhalten, kann man die Funktion für insgesamt drei Event-Kategorien aktivieren und erhält damit nur Informationen zu bevorstehenden Veranstaltungen, welche einen auch interessieren.

Die App soll den Gästen jedoch nicht nur Informationen zu bevorstehenden Events liefern. Die Benutzer erhalten als Gegenleistung die Möglichkeit, ihre konsumierten Getränke im digitalen Drinkpass einzutragen und damit für jede zehnte Konsumation ein Gutschein für ein Gratisgetränk zu erhalten.

Das Endergebnis steht ab sofort in den folgenden Stores zum Download bereit:

(spu)

Kritik
von Yanik Fahrni

Die Idee und das Konzept für die App entstanden bereits vor zwei Jahren. Leider fehlte mir damals das nötige Wissen und die Erfahrung mit dem Framework React Native, um die App umzusetzen. Nach einigen Tutorials und einem Kurs auf Udemy machte ich mich dieses Semester nochmals an die Umsetzung. Diese unterteilte sich in fünf Hauptschritte.

Facebook API

Damit die Events nicht doppelt eingetragen werden müssen, verwendete ich die Facebook API, um die Events von der Facebook Seite des Unternehmens zu laden. Dazu benötigte man einen Token und musste Facebook explizit erklären für welches Vorhaben man die Daten benötigt. Nach einer erfolgreichen Prüfung seitens Facebook hatte ich Zugriff auf die gewünschten Daten.

Event Abfrage und entsprechende Darstellung

Mithilfe des Node Packages Axios konnte ich die Daten der Facebook API in die App laden und anhand einer FlatList darstellen. Dazu verwendete ich die Bibliothek React Navigation, um die Grundstruktur und die verschiedenen Screens der App zu entwickeln. Die Schwierigkeit lag darin verschiedene Navigationsstrukturen miteinander zu kombinieren.  Nebst den drei Hauptscreens Events, Drinkpass und Miete sollte es auch möglich sein, Details über Events zu erhalten und Einstellungen zu Push Notifications vorzunehmen. Dazu kombinierte ich den MaterialTopTabNavigator mit dem StackNavigator.

Drink Pass mit NFC Technologie

Die Grundfunktionalitäten des Drinkpasses enstanden während des Hackathons des Minors Web Tech. Jedoch konnte ich während dem Hackathon nur für Android entwickeln, da ich bei Apple einen Entwickler Account lösen musste, was ein paar Tage dauerte, um auf NFC Funktionalitäten zugreifen zu können. Vor allem bei diesem Schritt gab es grosse Unterschiede bei der Umsetzung der Funktionen und Einrichtung der Libraries von Android zu iOS.

Push Notifications mit Google Firebase

Die Library React Native Firebase half mir in diesem Schritt weiter. Ohne die guten Dokumentationen für Android wie iOS Geräte wäre ich beim Hinzufügen der Push Möglichkeiten nicht weitergekommen. In diesem Schritt musste ich auch Anpassungen an Gerätespezifischen Code machen, welche nichts mehr mit React Native zu tun hatten.

Storeeintrag und Prüfung durch Google und Apple

Zu guter Letzt ging es noch um die Veröffentlichung der App im Play und App Store. Nebst vielen Einträgen und Fragen zum Inhalt und Funktionen der App, musste das Bundle signiert und von Apple und Google geprüft werden. Der Aufwand bei Google war noch überschaubar. Apple hingegen benötigte sehr viel mehr Zertifikate und Profile, bis die App schlussendlich publiziert wurde.

Keine Kommentare

Schreibe einen Kommentar