Referi
Punteggio semi-automatico per i campi da padel: un braccialetto per segnare, un display a bordo campo, un’app per le statistiche.
- Ruolo
- Sviluppatore Flutter su entrambe le app: l’app companion dalle prime schermate di statistiche fino agli store, e gran parte delle schermate di gioco del display del campo
- Cliente
- Referi
- Periodo
- 2025 – oggi
- Piattaforme
- iOS e Android (app companion); un kiosk Linux a bordo campo (display)
Il prodotto
Referi tiene il punteggio di una partita di padel al posto dei giocatori. Ognuno indossa un braccialetto: lo appoggia sul cancello del campo per entrare in partita, poi lo preme per segnare un punto, lo tiene premuto per annullarne uno, lo preme due volte per mettere in pausa. Un display a bordo campo mostra il punteggio in tempo reale e annuncia ogni game, ogni set e ogni cambio campo.
Ogni punto viene registrato, così la partita continua a vivere nell’app companion: risultati, andamento, classifiche e lo storico di ogni partita, per ogni giocatore che ha abbinato un braccialetto. Lavoro su entrambe le app: quella in tasca ai giocatori e quella sullo schermo del campo.
- 75%
- dei commit dell’app companion sono miei (85 su 113)
- 49%
- di quelli del display del campo (69 su 142)
- 24k
- righe di Dart nelle due app, escluso il codice generato
- 3
- gesti sul braccialetto: tutto ciò che serve per tenere il punteggio
Tour guidato
L’app in azione
Scegli una registrazione, o salta direttamente a un capitolo.
Registrate dal codice attuale: il display del campo a 1920 × 1080, con i suoi effetti sonori sotto il video; l’app companion in formato smartphone, senza audio. Un campo virtuale fa le veci del backend.
Cosa fa
Da una pressione sul polso alle statistiche in tasca
01
Si entra, si sceglie chi serve
Tra una partita e l’altra il display trasmette i video del circolo e spiega i tre gesti. Ogni giocatore appoggia il braccialetto sul cancello del campo e prende posto in una delle due squadre, con il suo nome e il suo avatar; un braccialetto estraneo viene respinto. Chi serve per primo preme due volte, e la partita comincia.
02
Un punteggio che si tiene da solo
Ogni pressione diventa un punto per la squadra di chi ha premuto, e il display segue le regole del padel: quindici, trenta, quaranta, parità e vantaggio, game, set, tie-break, il servizio e il cambio campo. Ogni evento ha la sua animazione e il suo suono, e una doppia pressione mette in pausa su un tabellone completo.
03
Game, set e match
L’ultimo punto fa partire gli annunci di game, set e match, poi il punteggio finale con i punti di ciascun giocatore e la coppia vincente, con un promemoria: le statistiche complete sono nell’app.
04
Iscrizione e un braccialetto tutto tuo
L’app companion fa accedere i giocatori con il numero di telefono e chiede un nickname e una foto, da cui Referi crea l’avatar che comparirà sul display. L’abbinamento trova il braccialetto del giocatore via Bluetooth e lo lega all’account.
05
Ogni partita, in numeri
L’ultima partita set per set, le partite giocate per settimana, mese e trimestre, punti e break vinti e persi, i punti di ogni partita recente e le classifiche del circolo, della città e dell’intera rete. Lo storico mostra con chi un giocatore vince e chi lo batte, partita per partita.
Sotto il cofano
Come è stato realizzato
Un display guidato dai messaggi
Il backend del campo pubblica via MQTT cosa il display deve mostrare (uno stato, come il punteggio in diretta) e cosa deve riprodurre (un effetto, come un punto o un cambio campo). Gli effetti si mettono in coda e ognuno trattiene i messaggi successivi finché la sua animazione e il suo suono non sono finiti, o finché non scade il suo tempo; un flag di interruzione permette a un messaggio urgente di passare avanti. Clean architecture con flutter_bloc e injectable; media_kit per i video degli sponsor.
Un kiosk acceso tutto il giorno
Il display gira a schermo intero su un piccolo PC Linux a bordo campo, senza mouse e senza nessuno che lo riavvii. Parte del mio lavoro lì non si vede: capire perché sul chip grafico del kiosk i video comparivano come una schermata blu (la decodifica hardware, il renderer) e perché gli aggiornamenti del punteggio potevano arrivare in ritardo rispetto alla pressione del braccialetto.
L’app companion
Flutter con flutter_bloc, get_it e retrofit, nei flavour development, production e mock. Quello mock l’ho aggiunto io, perché l’app giri, e si possa testare, senza backend. Accesso con il numero di telefono tramite Firebase, notifiche push e una scansione Bluetooth che trova i braccialetti Referi in mezzo a tutto ciò che c’è nei paraggi, tenendo conto dei modi diversi in cui Android e iOS li segnalano. Le build per entrambi gli store girano su Bitbucket Pipelines.
Registrare un sistema in produzione
Un campo virtuale, due app vere
Referi gira su campi veri, con giocatori veri. Niente di tutto questo può finire in un portfolio, quindi entrambe le app sono state registrate dal codice attuale, in autonomia, con un sostituto del backend e giocatori inventati.
- 1
Entrambe le app, compilate per il browser
L’app companion gira in formato smartphone, sul flavour mock che aveva già, con l’accesso sostituito da un’implementazione fittizia in memoria. Il display del campo, un’app per kiosk Linux, gira in una finestra del browser alla risoluzione del televisore.
- 2
Un campo virtuale
Al posto del broker MQTT il display riceve un piccolo campo tutto suo: quattro giocatori inventati, le regole del punteggio del padel e gli stessi messaggi di stato e di effetto inviati dal backend, attraverso la stessa coda. Gli script di registrazione gli dicono cosa succede in campo: un braccialetto appoggiato sul cancello, una pressione su un braccialetto.
- 3
Giocatori e circolo inventati
Avatar disegnati per i quattro giocatori, un video promozionale di un circolo che non esiste e una stagione di partite, classifiche e notifiche scritte per la demo, in inglese.
- 4
Il suono del display
La registrazione di un browser non ha audio, quindi il display annota ogni suono che riproduce, con il suo istante. Dopo ogni ripresa lo script di registrazione mette i file audio del display sotto il video, in quegli istanti.
I loghi, le interfacce, le loro immagini e gli effetti sonori del display sono quelli delle app. Giocatori, avatar, circoli, partite, statistiche, notifiche e video promozionale sono contenuti di esempio creati per questo portfolio.
Qui non c’è una demo da provare: Referi è un prodotto attivo, quindi questa pagina mostra registrazioni con contenuti di esempio.
Ogni schermata
La raccolta completa degli screenshot
Il display del campo
StandbyTra una partita e l’altra il display mostra i video del circolo. Un tap per giocareCome segnare, annullare e mettere in pausa con il braccialetto. I giocatori entranoOgni braccialetto appoggiato sul cancello occupa un posto in una delle due squadre. Chi serveIl giocatore che serve per primo preme due volte. Punteggio in direttaPunti, game e chi è al servizio, aggiornati a ogni pressione dei braccialetti. Cambio campoAnnunciato alla fine dei game dispari, come vuole il regolamento. PausaUna doppia pressione mette in pausa il gioco; il display mostra il punteggio completo. Parità e vantaggioVantaggio, di nuovo parità, ancora vantaggio. Partita vintaGame, set e match, ognuno con il suo annuncio. Punteggio finaleOgni set, e i punti di ciascun giocatore. VincitoriLa coppia vincente, prima che il campo torni in standby.
L’app companion
OnboardingCosa fa Referi, in tre slide. AccessoNumero di telefono, condizioni d’uso e consenso al trattamento dei dati sulla salute. Codice di verificaIl codice inviato via SMS (nella demo vanno bene sei cifre qualsiasi). NicknameIl nome che comparirà sul display del campo. AbbinamentoIl telefono cerca il braccialetto via Bluetooth. AbbinatoOra il braccialetto è la chiave del giocatore per ogni campo. HomeAncora nessuna partita. HomeL’avatar creato dalla foto del giocatore, i numeri del mese, il braccialetto abbinato. NotificheI risultati arrivano appena finisce la partita. PrestazioniL’ultima partita, set per set, e le partite giocate nel tempo. Statistiche avanzatePunti e break vinti e persi, in media per settimana, mese o trimestre. ClassificaClassifica globale, del circolo e della città, con la variazione della settimana. Storico partiteCon chi vince, contro chi perde, e tutte le partite. Dettaglio partitaDurata, tempo di gioco e andamento dei punti. ProfiloAccount, notifiche, condizioni d’uso ed eliminazione dell’account dall’app.
Prossimo caso di studio
Herbarium →