Plattformübergreifende Frameworks für die mobile App-Entwicklung gibt es schon seit vielen Jahren, doch häufig konnten sie in Sachen Performance oder Wartung nicht vollends überzeugen. Für mich persönlich änderte sich dies mit Flutter und ich bekam das Gefühl, dass ich mich nicht mehr nur auf die native iOS Entwicklung konzentrieren sollte.
Seit knapp 3 Jahren beschäftige ich mich nun mit Flutter, habe mir viele Tutorials angesehen, vieles ausprobiert und mir so, sehr gute Kenntnisse angeeignet. Doch ich war schon immer sehr praktisch veranlagt und wollte Flutter in einem konkreten Projekt anwenden. Durch mein großes Interesse am Fußball und meinem Heimatverein SV Lippstadt 08, entstand schnell das Hobby-Projekt. Aber wie sollte ich anfangen? Was wollte ich umsetzen? Und wie weit sollte die Entwicklung gehen?
Die Idee
Nachdem der Entschluss für dieses Hobby-Projekt feststand, machte ich mir Gedanken darüber, was alles in der App umgesetzt werden sollte und was technisch möglich war. So entstand schnell das Feature-Set für die 1.0.0 Version der App:
Der Nutzer hat die Möglichkeit, alle News der Website in der App zu sehen. Zudem gibt es Push-Benachrichtigungen für neue News.
Saison der 1. Mannschaft: Der Nutzer kann die Tabelle und den Spielplan der 1. Mannschaft einsehen sowie den Kader der 1. Mannschaft betrachten.
Automatisierter Liveticker: Der Nutzer kann im Ticker laufende Spiele der 1. Mannschaft verfolgen. Es gibt Push-Nachrichten für die wichtigsten Events wie Anstoß, Abpfiff, Tore und Karten. Das Backend führt dies automatisch aus.
Banner: Eine Möglichkeit, gezielte Angebote oder Sponsoren zu platzieren.
Das Minimum Testable Product (MTP)
Continous Integration/Continous Delivery (CI/CD)
Da ich dieses persönliche Hobby-Projekt alleine umsetze, habe ich entschieden, zunächst keine CI/CD Pipeline einzurichten und diese Schritte manuell durchzuführen. Durch den frühen Entwicklungsstand und die überschaubare angestrebte Funktionalität, halte ich es nicht für notwendig, eine CI/CD Pipeline zu konfigurieren. Man sollte diesen Schritt aber im Hinterkopf behalten, wenn die Komplexität des Projekts steigt und mehrere Entwickler an diesem Projekt arbeiten würden.
Backend
Um eine schnelle lauffähige Version zu erhalten, entschied ich mich zunächst für Cloud Functions for Firebase mit einem Firestore. So konnte ich schnell ein erstes Backend erstellen, das für die App erreichbar war. Cloud Functions for Firebase ermöglichte es mir, Scripts und APIs sehr einfach zu entwickeln, was gerade im frühen Entwicklungsstadium sehr nützlich war und mir schnell Ergebnisse lieferte. Für die Push-Nachrichten nutzte ich Firebase Cloud Messaging, welches einfache Möglichkeiten bietet, um plattformübergreifend Push-Benachrichtigungen an Android & iOS-Geräte zu versenden.
Design
Beim Design recherchierte ich zunächst, wie andere Apps ähnliche Features umsetzten und konnte dabei auch von meiner Erfahrung mit der Fortuna Düsseldorf App profitieren, die ich während meiner Anstellung bei einer Agentur nativ für iOS umgesetzt habe.Nachdem ich eine grobe Vorstellung hatte, begann ich das Design in Figma zu realisieren. Dabei entstand schnell eine erste Version, die mir als Vorlage diente. Es war wichtig zu beachten, dass diese Vorlage nicht 1:1 umgesetzt wurde, da dies aufgrund der verschiedenen Bildschirmgrößen zu unnötiger Komplexität führen würde.
App
Nachdem ich Backend und Design vorbereitet habe, begann ich mit der App-Entwicklung. Da ich bereits viel mit dem Bloc-Pattern experimentiert hatte, entschied ich mich, die App auf dieser Basis umzusetzen. Zuerst entwickelte ich die UI-Komponenten, dann den Netzwerk-Layer und verband schließlich alles mit dem Bloc-Pattern. Nach kurzer Zeit entstand eine erste lauffähige Version, zu welcher ich mir erstes Feedback holte und erste Verbesserungen umsetzte.
Herausforderungen
Motivation
Die wohl größte Herausforderung meines Hobby-Projekts war es, mich nach einem langen Arbeitstag, in dem ich bereits bis zu 8 Stunden programmierte, mich immer wieder selbst zu motivieren, daran weiterzuarbeiten. Dabei lernte ich die Bedeutung von Auszeiten kennen, um den Spaß an meinem Projekt nicht zu verlieren. Die eigene Motivation zu erhalten, war entscheidend.
Automatisierter Liveticker
Auf der Programmier-Seite begegneten mir ebenfalls spannende Herausforderungen, insbesondere bei der Umsetzung des automatisierten Livetickers mit zugehörigen Push-Nachrichten. Dieser Liveticker setzt sich aus verschiedenen Komponenten zusammen:
Anbindung Text-Liveticker von derpatriot.de
Anbindung des Sportdaten-Anbieters sportmonks.com
Aufbereitung der Daten und senden der Push-Nachrichten zu neuen Ereignissen wie z.B. Tore
Die Generalisierung der Daten und das präzise Senden der Push-Nachrichten erwiesen sich als äußerst komplex und zeitaufwendig. Bis heute ist dies der anspruchsvollste Teil des Projekts.
Um die Funktionalität des Livetickers zu testen, bot sich der Tag eines Spiels am besten an. Dadurch konnte ich genau verfolgen, wie sich die Daten während eines Live-Spiels verhalten und welche möglichen Edge-Cases auftreten können.
Der Zwischenstand
Nach knapp zwei Monaten hatte ich eine erste lauffähige App-Version, die ich in meinem Alltag testete. Jeden Samstag konnte ich bereits via Liveticker mit dem SVL mitfiebern und die App funktionierte so, wie ich es mir vorgestellt hatte. Ich war so zufrieden, dass ich beschloss, Kontakt mit den Verantwortlichen des Vereins aufzunehmen und ihnen die App zu zeigen. Das überaus positive Feedback führte dazu, dass wir eine Pilotphase der App starten wollen, sobald sie production-ready ist. Also arbeite ich in den nächsten Monaten daran, die App production-ready zu machen.
Vom MTP zum MVP
Backend
Einer der größten Schritte, um das ganze System der SVL App production-ready zu machen, war die Entscheidung, nicht länger auf Cloud Functions for Firebase zu setzen, sondern ein Backend-System mit NodeJS zu nutzen. Hier besitze ich die beste Expertise und entschied mich für strapi, ein Headless CMS, das sich hervorragend für das Projekt eignete. Ich übertrug die bereits erstellte Logik von Cloud Functions for Firebase mit wenig Aufwand in das strapi-Backend. Als Hoster wählte ich DigitalOcean, da ich bereits in der Vergangenheit Projekte mit diesem Hoster umgesetzt hatte und das Backend hier ohne größere Aufwände hosten konnte.
App
In der App konzentrierte ich mich darauf, das bereits umgesetzte zu optimieren und dem Design den letzten Schliff zu verpassen. So konnte ich auch hier mit wenig Aufwand eine erste App-Version erstellen, die für die App-Stores bereit war.
Der Release
Nachdem technisch alles für den Release bereit war, musste ich die AppStore-Einträge vorbereiten und mit Inhalten füllen. Das Ziel war es, die App noch vor Ende der Saison 2022/2023 zu veröffentlichen, um möglichst früh Feedback, insbesondere im Bereich des Livetickers, zu erhalten. Leider konnten wir dieses Ziel nicht erreichen, da wir mehrere Schleifen im App-Review-Prozess drehen mussten. Doch im Juni war es schließlich soweit, und die erste Version der SVL App war in den Stores verfügbar.
App veröffentlicht, was nun?
Mit dem ersten Release der App, auch wenn die Saison vorbei war, konnten wir erstes Feedback sammeln und für die Weiterentwicklung nutzen. In der "Sommerpause" arbeitete ich an Verbesserungen und neuen Features. Mittlerweile ist die App in der Version 1.1.0 verfügbar und hat zwei neue Features erhalten:
Digitales Ticket: Ein absolutes Muss für eine Sportvereins-App in der heutigen Zeit. Der Nutzer hat die Möglichkeit, seine Dauerkarte in der App zu hinterlegen und sie somit immer griffbereit zu haben.
Social News: Häufig müssen Sportfans verschiedene Quellen besuchen, um alle Informationen zu ihrem Verein zu erhalten. Mit der Integration von Social-News ist ein weiterer Schritt gemacht, um zukünftig möglichst viele Informationen in der App bereitzustellen. Dies schafft einen großen Mehrwert für den Nutzer, da er die App als zentrale Anlaufstelle nutzen kann.
Fazit
In knapp einem halben Jahr, als Hobbyprojekt gestartet und nur in der Freizeit umgesetzt, habe ich ein System für eine Vereins-App entwickelt. Mit einem sehr iterativen Ansatz, der mir schnell lauffähige Versionen der App brachte, konnte dies erreicht werden. Die Unterstützung von Freunden, die mir frühzeitig Feedback gaben, sowie der Support des SV Lippstadt haben dieses Projekt zu einem schnellen Erfolg und zur Veröffentlichung in den Stores geführt. Ich hoffe, dass wir dieses Projekt weiter vorantreiben können und noch weitere tolle Features implementieren werden.
Hier findest du die App:
Comments