Tutti i progetti
Sugli store · registrazioni su una copia autonomaCaso di studio

TEPY

Fisioterapia con l’AI per il dolore muscolare: indichi dove fa male, ricevi un piano di automassaggio ed esercizi e lo segui in video.

Ruolo
Sviluppatore fullstack: l’intera app mobile e le sue Cloud Functions
Cliente
TEPY
Periodo
2023 – oggi
Piattaforme
iOS e Android da un’unica codebase Flutter
  • Flutter
  • Dart
  • Riverpod
  • go_router
  • Firebase Auth
  • Firestore
  • Cloud Functions
  • In-app subscriptions
  • Video player
  • Patrol

Il prodotto

TEPY trasforma la prima visita dal fisioterapista in una conversazione con il telefono. Gli mostri su un corpo 3D dove fa male, quanto, da quando, che sensazione dà e quali movimenti lo scatenano; l’app risponde con un piano di sessioni di automassaggio e di esercizi, distribuite nelle settimane successive.

Ogni sessione è una playlist di brevi video con timer, serie e ripetizioni e indicazioni vocali. Intorno al piano ci sono le routine per la giornata (riscaldamento, defaticamento, mobilità, recupero muscolare, una pausa alla scrivania) e una schermata dei progressi che tiene il conto.

95%
dei commit dell’app sono miei (547 su 574)
65k
righe di Dart, escluso il codice generato
7
lingue nell’interfaccia
3 anni
di sviluppo continuo, da maggio 2023

Tour guidato

L’app in azione

Scegli una registrazione, o salta direttamente a un capitolo.

Dal punto doloroso al piano, primo fotogramma
0:00 / 1:23

Registrate dal codice attuale in formato smartphone, su un backend sostitutivo con gli esercizi e i video originali dell’app. Senza audio.

Cosa fa

Da “mi fa male qui” a un piano da seguire

01

Un onboarding che imposta il piano

Accesso con Apple o Google, oppure con un codice aziendale per i dipendenti delle aziende partner. Il consenso arriva insieme a una spiegazione semplice di cosa fa l’algoritmo e cosa non fa. Poi un breve profilo (età, corporatura, tipo di giornata lavorativa, quanto si è attivi, sport praticati e attrezzi posseduti), che il backend usa per scegliere gli esercizi.

02

Il dolore, localizzato su un corpo 3D

Il corpo si può ruotare e ingrandire finché il tocco non cade sul punto esatto, che il backend riconduce a una zona. Poi l’intensità su una scala da 0 a 10 con una descrizione per ogni livello, da quanto tempo dura, le sensazioni intorno, quali movimenti fanno male e in che punto, con ogni test mostrato come video in loop.

03

Un piano che segue il dolore

Il livello di dolore più alto decide la durata del piano, da tre a circa sette settimane, e quali giorni sono di automassaggio, di esercizi o di riposo. Quando i punti dolorosi cambiano, il piano chiede di essere ricalcolato; la striscia della settimana mostra cosa resta da fare e cosa è già fatto.

04

Sessioni in video a schermo intero

Una sessione è una playlist. Ogni esercizio va a schermo intero con un timer o un contatore di ripetizioni, i dettagli a portata di swipe e le indicazioni vocali; per passare al successivo basta scorrere verso l’alto. Se si esce a metà, i progressi restano salvati per dopo.

05

Routine per il resto della giornata

Riscaldamento, defaticamento, mobilità e recupero muscolare vengono costruiti su richiesta a partire dalle zone del corpo da allenare e dagli attrezzi a disposizione. L’area benessere aggiunge brevi routine per il mattino, la scrivania e la sera.

06

Progressi e abbonamento

Giorni consecutivi, tempo dedicato, esercizi svolti e un punteggio di benessere aiutano a tenere fede al piano. L’accesso completo è un abbonamento tramite App Store o Google Play, verificato sul server prima che qualsiasi contenuto si sblocchi.

Sotto il cofano

Come è stato realizzato

Stato e navigazione

Riverpod ovunque, con provider generati e modelli immutabili (freezed, json_serializable). Un unico redirect di go_router decide ogni punto di ingresso (accesso, consenso, completamento del profilo, aggiornamento obbligatorio), così un deep link o un riavvio portano sempre allo stato in cui l’account si trova davvero.

Firebase, e le funzioni dietro le quinte

Auth per l’accesso con Apple, Google e link via e-mail; Firestore per il piano, le sessioni e i progressi dell’utente; Crashlytics e Analytics. Le Cloud Functions che ho scritto insieme all’app verificano sul server gli abbonamenti App Store e Google Play, sintetizzano le indicazioni vocali e inviano i promemoria programmati. La logica clinica (valutazioni, programmi, scelta degli esercizi) sta in un’API REST sviluppata dal team backend.

Un’app sanitaria sempre pronta per gli store

Test di integrazione con Patrol sul simulatore iOS e su un emulatore Android con pagine da 16 KB, la configurazione che ora Google Play richiede. Una revisione di conformità all’AI Act europeo e alle norme sui dispositivi medici: avvisi di trasparenza, testi del consenso e niente che possa sembrare una diagnosi.

Registrare un’app in produzione

L’app è vera. Tutto ciò che mostra, no.

Dietro TEPY ci sono utenti veri, dati sanitari veri e un abbonamento a pagamento. Niente di tutto questo può finire in un portfolio, quindi le registrazioni usano una copia del codice attuale che funziona in autonomia.

  1. 1

    Il codice attuale, compilato per il browser

    Una build web di Flutter in formato smartphone, a cui si fa credere di girare su un iPhone. Ciò che esiste solo su un telefono (l’App Store, le notifiche push, la richiesta di tracciamento, il crash reporting) è sostituito da piccoli surrogati.

  2. 2

    Firebase senza Firebase

    Accesso e database girano sulle implementazioni fittizie in memoria che il progetto usa già nei test; una di queste ha avuto bisogno di una patch di due righe per funzionare in una build di release. Un parametro nell’indirizzo carica un primo avvio oppure un utente che torna, con qualche settimana di storico.

  3. 3

    Un sostituto dell’API REST

    Il client HTTP è sostituito da uno che risponde dall’interno dell’app, con gli endpoint e le strutture JSON che i modelli si aspettano: zone del dolore, test di movimento, piani, routine e venti esercizi del servizio, con i nomi e i punti chiave che hanno nel suo catalogo.

  4. 4

    I contenuti dell’app, registrati offline

    Le immagini e il video della schermata di accesso sono quelli inclusi nell’app. I video degli esercizi, dei test di movimento e dell’automassaggio, le loro miniature e le icone vengono dalla CDN da cui l’app li riceve in streaming: scaricati una volta da uno script, ridimensionati e inclusi nella demo. Lo script di registrazione blocca qualsiasi richiesta diretta fuori dalla macchina, così una ripresa non può raggiungere il servizio reale.

Il logo, l’interfaccia, il modello 3D del corpo, le immagini, gli esercizi e i loro video sono quelli dell’app. L’utente, i punti dolorosi, i piani e i progressi sono contenuti di esempio creati per questo portfolio.

Player

Qui non c’è una demo da provare: TEPY è un prodotto attivo, quindi questa pagina mostra le registrazioni di una copia autonoma.

Ogni schermata

La raccolta completa degli screenshot

  • AccessoApple, Google o un codice aziendale. Lo sfondo è un video in loop.
  • Come funziona, e il consensoCosa fa l’algoritmo e cosa non fa, prima di ogni altra cosa.
  • ProfiloData di nascita, peso e altezza con selettori in stile nativo.
  • Giornata lavorativaLa postura che si tiene durante il giorno orienta il programma.
  • SportElenco con ricerca; la scelta calibra riscaldamento e recupero.
  • Profilo completoProssimo passo: indicare dove fa male, subito o più tardi.
  • AbbonamentoProdotti dello store con prezzi localizzati (nella demo, prezzi di esempio).
  • Abbonamento attivoL’acquisto viene confermato dal backend prima che l’app si sblocchi.
  • HomeIl piano della settimana, a partire da oggi.
  • OggiIl piano della settimana e la sessione di oggi.
  • Il punto esattoVista ingrandita: è il backend a ricondurre il punto a una zona del corpo.
  • QuantoIntensità del dolore su una scala da 0 a 10, con una descrizione per ogni livello.
  • Che sensazione dàLe sensazioni intorno alla zona dolorosa.
  • Quali movimenti fanno maleOgni test proposto è un video in loop.
  • In che punto del movimentoIl punto del movimento in cui comincia il dolore.
  • RiepilogoTutto ciò che è stato inserito per questo punto doloroso, modificabile prima della conferma.
  • Piano da aggiornareI punti dolorosi sono cambiati: il piano va ricalcolato.
  • Nuovo pianoI giorni di automassaggio e di esercizi seguono il livello del dolore.
  • La sessione di oggiLa playlist del giorno, con tempi e indicazioni.
  • PlayerA schermo intero: si scorre verso l’alto per l’esercizio successivo, con timer e indicazioni vocali.
  • Area fitnessMobilità, recupero muscolare, riscaldamento e defaticamento.
  • Zone da allenareLa routine nasce dalle zone del corpo scelte…
  • Attrezzi a disposizione…e dagli attrezzi che l’utente possiede.
  • Routine di mobilitàLa playlist generata.
  • EsercizioTimer, serie e ripetizioni, dettagli dell’esercizio su richiesta.
  • Area benessereAutomassaggio, esercizi guidati e brevi routine per la giornata.
  • ProgressiGiorni consecutivi, tempo dedicato, esercizi svolti e un punteggio di benessere.
  • MenuPiano e abbonamento, tutorial, note legali.

Prossimo caso di studio

Re.corder →