Referi
Halbautomatische Spielstandserfassung für Padelplätze: ein Armband zum Zählen, eine Anzeige am Platz, eine App für die Statistiken.
- Rolle
- Flutter-Entwickler für beide Apps: die Begleit-App von den ersten Statistikbildschirmen bis in die Stores und die meisten Spielbildschirme der Anzeige am Platz
- Auftraggeber
- Referi
- Zeitraum
- 2025 – heute
- Plattformen
- iOS und Android (Begleit-App); ein Linux-Kiosk am Platz (Anzeige)
Das Produkt
Referi führt den Spielstand eines Padel-Matches, damit die Spieler es nicht müssen. Jeder Spieler trägt ein Armband: Um einem Match beizutreten, hält er es an den Eingang des Platzes; ein Druck zählt einen Punkt, langes Drücken nimmt ihn zurück, ein Doppeldruck pausiert. Eine Anzeige am Rand des Platzes zeigt den Spielstand in Echtzeit und sagt jedes Spiel, jeden Satz und jeden Seitenwechsel an.
Jeder Punkt wird aufgezeichnet, sodass das Match in der Begleit-App weiterlebt: Ergebnisse, Entwicklungen, Ranglisten und der Verlauf jedes Matches, für jeden Spieler, der ein Armband gekoppelt hat. Ich arbeite an beiden Apps: der in der Hosentasche der Spieler und der auf dem Bildschirm am Platz.
- 75%
- der Commits der Begleit-App stammen von mir (85 von 113)
- 49%
- der Commits der Anzeige am Platz (69 von 142)
- 24k
- Zeilen Dart in beiden Apps, ohne generierten Code
- 3
- Gesten am Armband: mehr braucht es nicht, um den Spielstand zu führen
Rundgang
Die App in Aktion
Wählen Sie eine Aufnahme oder springen Sie direkt zu einem Kapitel.
Aufgezeichnet aus dem aktuellen Code: die Anzeige am Platz in 1920 × 1080, mit ihren eigenen Soundeffekten unter dem Video; die Begleit-App in Smartphone-Größe, ohne Ton. Ein virtueller Platz übernimmt die Rolle des Backends.
Funktionen
Vom Druck aufs Handgelenk zur Statistik in der Hosentasche
01
Einchecken, Aufschlag wählen
Zwischen den Matches spielt die Anzeige die Videos des Clubs ab und erklärt die drei Gesten. Jeder Spieler hält sein Armband an den Eingang des Platzes und nimmt mit Namen und Avatar einen Platz in einem der beiden Teams ein; ein Armband, das nicht dazugehört, wird abgewiesen. Wer zuerst aufschlägt, drückt zweimal, und das Match beginnt.
02
Ein Spielstand, der sich selbst führt
Jeder Druck wird zum Punkt für das Team des Drückenden, und die Anzeige folgt den Padel-Regeln: fünfzehn, dreißig, vierzig, Einstand und Vorteil, Spiele, Sätze, Tiebreak, Aufschläger und Seitenwechsel. Jedes Ereignis hat seine Animation und seinen Klang, und ein Doppeldruck pausiert mit einer vollständigen Anzeigetafel.
03
Spiel, Satz und Sieg
Der letzte Punkt löst die Ansagen für Spiel, Satz und Sieg aus, dann folgen der Endstand mit den Punkten jedes Spielers und das siegreiche Paar, mit dem Hinweis, dass die vollständigen Statistiken in der App stehen.
04
Registrierung und ein eigenes Armband
Die Begleit-App meldet Spieler mit ihrer Telefonnummer an und fragt nach einem Spitznamen und einem Foto, aus dem Referi den Avatar für die Anzeige erstellt. Die Kopplung findet das Armband des Spielers per Bluetooth und verknüpft es mit dem Konto.
05
Jedes Match in Zahlen
Das letzte Match Satz für Satz, gespielte Matches pro Woche, Monat und Quartal, gewonnene und verlorene Punkte und Breaks, die Punkte jedes der letzten Matches und Ranglisten im Club, in der Stadt und im gesamten Netzwerk. Der Verlauf zeigt Match für Match, mit wem ein Spieler gewinnt und wer ihn schlägt.
Unter der Haube
So wurde es entwickelt
Eine Anzeige, gesteuert über Nachrichten
Das Backend des Platzes veröffentlicht per MQTT, was die Anzeige zeigen soll (einen Zustand, etwa den Live-Spielstand) und was sie abspielen soll (einen Effekt, etwa einen Punkt oder einen Seitenwechsel). Effekte reihen sich in eine Warteschlange ein, und jeder hält die nächsten Nachrichten zurück, bis seine Animation und sein Klang durchgelaufen sind oder seine Zeit abgelaufen ist; ein Interrupt-Flag lässt eine dringende Nachricht vorziehen. Clean Architecture mit flutter_bloc und injectable; media_kit für die Videos der Sponsoren.
Ein Kiosk, der den ganzen Tag läuft
Die Anzeige läuft im Vollbild auf einem kleinen Linux-PC am Platz, ohne Maus und ohne jemanden, der sie neu startet. Ein Teil meiner Arbeit dort ist unsichtbar: herauszufinden, warum Videos auf dem Grafikchip des Kiosks als blauer Bildschirm erschienen (Hardware-Dekodierung, der Renderer) und warum Aktualisierungen des Spielstands dem Druck aufs Armband hinterherhinken konnten.
Die Begleit-App
Flutter mit flutter_bloc, get_it und retrofit, in den Flavours Development, Production und Mock. Den Mock-Flavour habe ich hinzugefügt, damit die App ohne das Backend läuft und getestet wird. Anmeldung per Telefonnummer mit Firebase, Push-Benachrichtigungen und ein Bluetooth-Scan, der Referi-Armbänder unter allem anderen in Reichweite findet, obwohl Android und iOS sie auf unterschiedliche Weise melden. Die Builds für beide Stores laufen auf Bitbucket Pipelines.
Ein Live-System aufzeichnen
Ein virtueller Platz, zwei echte Apps
Referi läuft auf echten Plätzen mit echten Spielern. Nichts davon gehört in ein Portfolio, deshalb wurden beide Apps aus ihrem aktuellen Code aufgezeichnet, eigenständig laufend, mit einem Ersatz für das Backend und erfundenen Spielern.
- 1
Beide Apps, gebaut für den Browser
Die Begleit-App läuft in Smartphone-Größe, im Mock-Flavour, den sie bereits hatte, die Anmeldung durch einen In-Memory-Fake ersetzt. Die Anzeige am Platz, eine Linux-Kiosk-App, läuft in einem Browserfenster in der Auflösung des Fernsehers.
- 2
Ein virtueller Platz
Anstelle des MQTT-Brokers bekommt die Anzeige einen kleinen eigenen Platz: vier erfundene Spieler, die Zählregeln des Padel und dieselben Zustands- und Effektnachrichten, die das Backend sendet, durch dieselbe Warteschlange. Die Aufnahmeskripte sagen ihm, was auf dem Platz passiert: ein Armband am Eingang, ein Druck auf ein Armband.
- 3
Erfundene Spieler und ein Club
Gezeichnete Avatare für die vier Spieler, ein Werbevideo eines Clubs, den es nicht gibt, und eine Saison mit Matches, Ranglisten und Benachrichtigungen, für die Demo geschrieben, auf Englisch.
- 4
Der Ton der Anzeige
Eine Browseraufnahme hat keinen Ton, deshalb protokolliert die Anzeige jeden Klang, den sie abspielt, mit dem Zeitpunkt. Nach jeder Aufnahme legt das Aufnahmeskript die eigenen Sounddateien der Anzeige zu diesen Zeitpunkten unter das Video.
Logos, Oberflächen, ihre Bilder und die Soundeffekte der Anzeige stammen aus den Apps. Spieler, Avatare, Clubs, Matches, Statistiken, Benachrichtigungen und das Werbevideo sind Beispielinhalte, die für dieses Portfolio erstellt wurden.
Hier gibt es keine Demo zum Ausprobieren: Referi ist ein Live-Produkt, deshalb zeigt diese Seite Aufnahmen mit Beispielinhalten.
Alle Bildschirme
Alle Screenshots im Überblick
Die Anzeige am Platz
StandbyZwischen den Matches zeigt die Anzeige die Videos des Clubs. Einchecken zum SpielenWie man mit dem Armband Punkte zählt, rückgängig macht und pausiert. Die Spieler checken einJedes Armband, das an den Eingang gehalten wird, füllt einen Platz in einem der beiden Teams. Wer schlägt aufWer zuerst aufschlägt, drückt zweimal. Live-SpielstandPunkte, Spiele und Aufschläger, aktualisiert bei jedem Druck auf ein Armband. SeitenwechselAngesagt am Ende der ungeraden Spiele, wie es die Regeln verlangen. PauseEin Doppeldruck pausiert das Match; die Anzeige zeigt den kompletten Spielstand. Einstand und VorteilVorteil, zurück zum Einstand, wieder Vorteil. Match gewonnenSpiel, Satz und Sieg, jeweils mit eigener Ansage. EndstandAlle Sätze und die Punkte jedes Spielers. SiegerDas siegreiche Paar, bevor der Platz wieder in den Standby geht.
Die Begleit-App
OnboardingWas Referi macht, in drei Folien. AnmeldungTelefonnummer, Nutzungsbedingungen und die Einwilligung für Gesundheitsdaten. BestätigungscodeDer per SMS gesendete Code (in der Demo beliebige sechs Ziffern). SpitznameDer Name, den die Anzeige am Platz zeigen wird. KopplungDas Smartphone sucht das Armband per Bluetooth. GekoppeltDas Armband ist jetzt der Schlüssel des Spielers zu jedem Platz. StartseiteNoch keine Matches. StartseiteDer Avatar aus dem Foto des Spielers, die Zahlen des Monats, das gekoppelte Armband. BenachrichtigungenDie Ergebnisse kommen, sobald das Match endet. LeistungDas letzte Match, Satz für Satz, und die gespielten Matches im Zeitverlauf. Erweiterte StatistikenGewonnene und verlorene Punkte und Breaks, gemittelt pro Woche, Monat oder Quartal. RanglisteGesamt-, Club- und Stadtrangliste, mit der Veränderung der Woche. Match-VerlaufMit wem sie gewinnt, gegen wen sie verliert, und jedes einzelne Match. Match-DetailsDauer, reine Spielzeit und der Verlauf der Punkte. ProfilKonto, Benachrichtigungen, Nutzungsbedingungen und die Kontolöschung direkt in der App.
Nächste Fallstudie
Herbarium →