YB­Hacka­thon

Drbi si weme nid cha hie si

Team Hackantons am YBHackathon 2019
Twitter: @ybhackathon

Bereits zum zweiten Mal hat der BSCYB letztes Wochenende den YBHackathon ausgerichtet. Das Ziel war, innerhalb von 24h als Team ein digitales Produkt zu bauen. Und dieses Jahr nahmen auch Joel und ich teil. Für uns beide eine absolute Premiere. Gemeinsam mit Tim Schoch (Freelance UX Designer), Simon Messerli (Cloud Engineer bei Amanox) und Jonas Niestroj (Fullstack Dev bei Liip) entwickelten wir eine neues Matchcenter für den BSCYB. Und das mit Erfolg: Unsere Lösung “Drbi si weme nid cha hie si” sicherte uns den dritten Platz!

Unser Vorgehen

Das Matchcenter richtet sich grösstenteils an Fans, die das Spiel über den Fernseher oder das Radio verfolgen. Ihnen möchte YB einen echten Mehrwert bieten.

Im Zuge dessen haben wir unser Projekt mit einer intensiven Recherche begonnen. Wir haben Ideen zusammengetragen und Freunde und Bekannte über das Telefon ausgequetscht. Und während die anderen Teams ihre Nasen schon tief in den Laptops steckten, standen wir noch immer am Whiteboard. Ich gebe zu. Mir hat es schon lange in den Fingern gekribbelt. Aber im Nachhinein war die saubere Konzeptphase aber Gold wert.

Das Resultat sah folgendermassen aus. Aus einem “statischen” Informationsbecken sollte ein dynamischer Stream werden. Ähnlich wie in einem Liveticker sollten aktuelle Informationen realtime auf den Geräten der NutzerInnen landen. Um den Spirit des Stadions nun auf das Smartphone zu bringen, wollten wir das Ganze nun mit einer Chat-Funktion verbinden. Diese ermöglicht mir in der Form eines Gruppenchats mit meinen Freunden zu kommunizieren.

Das natürlich neben den zu erwartenden Funktionalitäten wie Live-Tabellenstand und statistischen Auswertungen.

Der Stream

Das Herzstück unserer Appliktion hat natürlich auch am meisten Zeit verschlungen. Aber das war’s Wert. Um den Anmeldeprozess so einfach wie möglich zu gestalten, passiert alles im Hintergrund. Beim Aufruf der App wird direkt ein neuer Nutzer erstellt, der sich gegenüber dem Backend authentifiziert. Diesen kann ich später mit einem Anzeigenamen ergänzen.

Über Websockets werden dann direkt die gewünschten Einträge geladen und stetig aktualisiert. Ausserdem kann ich selber “meinen Senf dazu geben”. Damit das alles reibungslos funktioniert haben Jonas und Simon hinter einem Application Load Balancer einen Producer/Consumer Microservice aufgebaut, welcher auf Fargate läuft und mit einem Kinesis Data Stream kommuniziert. Erweitert wird er durch “Natural Language Processing”, einem Machine Learning Modell, dass Emotionen aus den einzelnen Mitteilung analysiert.

Neben den Spielständen und -ereignissen können nämlich auch Umfragen, Quizzes oder Anzeigen in den Stream geschaltet werden. Ist zum Beispiel ein Tor gefallen, könnten zur Feier des Moments Aktionen auf Produkte angepriesen werden. Ist die Stimmung in den Gruppen am Boden, könnten Erinnerungen an bessere Tage zwischengeschaltet werden. Marketing und Communityarbeit in einem.

Das Profil

Die Webapplikation haben wir konsequent mit Konzepten aus der Welt der nativen Apps entwickelt. Basierend React und Redux werden Interaktionen direkt auf dem Gerät verarbeitet und auch Nutzerinformationen werden über die IndexedDB direkt auf dem Gerät gespeichert. Als Progressive Web App funktionieren die Grundlagen ausserdem auch ohne Internetverbindung und die App kann wie gewohnt installiert werden.

Als besonderes Feature haben wir uns folgendes überlegt. Wäre es nicht super, wenn ich meine Freude über ein Tor mit meinen Freunden im Stadion teilen kann? Mit dem neuen Matchcenter ganz einfach. Direkt in der App kann ein Bier gekauft werden. Dabei wird ein einmaliger Code generiert, mit dem im Stadion ein Bier geholt werden kann.

Statistiken

Hier können mehr aktuelle Informationen über das Spiel angezeigt werden. Neben dem aktuellen Tabellenstand finden hier weitere Spielstände oder Statistiken und historische Daten Platz.

Und für alle Hörer von Radio Gelb-Schwarz haben wir ein kleines aber wichtiges Feature. Neben dem Player wird die aktuelle Spielsekunde des Radios angezeigt. So ist es problemlos möglich, Übertragungslatenzen zu überwinden und das Bild im TV mit den emotionsgeladenen Kommentaren des Kultradios zu synchronisieren.

Die App

 

matchcenter.bscyb.dev

Gruppe: yb

Advanced Gutenberg Nächster Post