Indennizzo Diretto
La constatazione amichevole su carta, trasformata in un percorso guidato sul telefono.
- Ruolo
- Sviluppatore Flutter: l’intera app client
- Cliente
- LC Solutions
- Periodo
- 2021–2023
- Piattaforme
- iOS, Android e web da un’unica codebase
Il prodotto
Dopo un incidente stradale i due conducenti compilano la constatazione amichevole, il modulo CAI: due colonne fitte su un foglio che quasi tutti si trovano davanti per la prima volta a bordo strada, di solito scossi e di fretta.
Indennizzo Diretto trasformava quel modulo in otto passaggi guidati sul telefono (il GPS per il luogo, la fotocamera per le prove, un dito per le firme), poi prendeva in carico il sinistro con l’assicurazione per conto del conducente e lo teneva aggiornato su come procedeva.
- 8
- passaggi guidati al posto del modulo cartaceo
- 3
- piattaforme da un’unica codebase Flutter
- 18k
- righe di Dart nel client
- 96%
- dei commit dell’app sono miei (239 su 248)
Tour guidato
L’app in azione
Scegli una registrazione, o salta direttamente a un capitolo.
Registrate dall’app vera, in esecuzione sul suo backend dimostrativo. Senza audio.
Cosa fa
Dal bordo della strada a una constatazione firmata
01
Un modulo che si compila da solo, dove può
Data e ora arrivano dall’orologio, l’indirizzo dal GPS tramite geocodifica inversa, i dati anagrafici dal profilo. Marca, modello e compagnia vengono cercati sul server mentre si digita. La prima risposta (due veicoli, un tamponamento a catena o un pedone) decide quali dei passaggi successivi servono davvero.
02
Le prove, raccolte sul posto
Le foto della patente, scatti guidati dei danni dalle angolazioni suggerite, un tocco sulla sagoma dell’auto per segnare il punto d’urto iniziale, un memo vocale che racconta cosa è successo e i testimoni con i loro documenti. Ogni allegato viene caricato appena acquisito e riscaricato come miniatura quando si riapre la pratica.
03
Il modulo ufficiale, trasposto sul telefono
Le diciassette circostanze standard della constatazione mantengono la logica a due colonne del modulo cartaceo, con i colori dell’originale: blu per il veicolo A, giallo per il veicolo B. Nelle sezioni della controparte l’intero schermo diventa giallo, così entrambi i conducenti sanno sempre di chi sono i dati che hanno davanti.
04
Firmata sul vetro, consegnata in PDF
Entrambi i conducenti firmano sul telefono, sfruttando il lato lungo dello schermo per avere una firma a tutta larghezza. Dopo l’accettazione del mandato la pratica viene inviata e la constatazione ufficiale torna indietro come PDF, compilata e firmata, visualizzata dentro l’app.
05
Seguire la pratica
Le pratiche inviate passano in sola lettura e tra i passaggi ci si muove liberamente. I cambi di stato arrivano come notifiche push, e da ogni schermata l’assistenza è a un tocco di distanza, su WhatsApp o via SMS.
06
Come si entra
Un’introduzione in tre pagine, una modalità ospite con una pratica di prova da esplorare prima di registrarsi, la registrazione con verifica dell’e-mail e l’accesso con e-mail, Facebook, Google o Apple.
Responsive
Una codebase, tre piattaforme
Lo stesso codice Flutter è stato pubblicato per iOS e Android e girava anche sul web. Oltre gli 800 px la barra in basso diventa un menu laterale e i moduli stanno in una colonna leggibile; le differenze tra piattaforme (archiviazione sicura, fotocamera, registrazione audio, notifiche push) sono isolate dietro piccoli wrapper.
Layout web: praticheSugli schermi larghi la navigazione laterale prende il posto della barra in basso. Layout web: modulo della praticaGli stessi widget, contenuti in una colonna leggibile. Layout web: riepilogoRiepilogo, stato e firme su uno schermo largo.
Sotto il cofano
Come è stato realizzato
Stato e struttura
Le schermate sono guidate da BLoC scritti a mano su stream RxDart (22 in tutto, uno per schermata o passaggio del modulo), con un inherited widget che porta la sessione. Un BLoC padre possiede la pratica in modifica; ogni passaggio valida, salva la sua parte tramite l’API e restituisce il modello aggiornato, così una pratica si può abbandonare e riprendere da qualsiasi passaggio.
Il dialogo con il backend
Un sottile strato REST con bearer token e riautenticazione trasparente, upload multipart per foto, firme e audio, e mapper espliciti di richiesta e risposta tra il JSON del server e i modelli dell’app.
Funzioni del dispositivo
Geolocalizzazione con la geocodifica di OpenStreetMap e il completamento automatico degli indirizzi, acquisizione dalla fotocamera, registrazione e riproduzione audio, un riquadro per la firma, visualizzazione dei PDF nell’app, e Firebase Cloud Messaging con notifiche locali.
L’app vera, in autonomia
Non un mock-up: l’app originale, di nuovo in funzione
Senza i suoi server l’app non va oltre la schermata di accesso, e quei server sono un servizio attivo che custodisce le pratiche di incidenti di persone reali. Invece di ricostruirla con delle immagini, ho fatto girare il codice vero in autonomia: in un browser, senza niente dietro.
- 1
Un backend che vive nell’app
Il livello di rete ora passa ogni richiesta a un mock in memoria che risponde sugli stessi endpoint e con lo stesso JSON dell’API originale. Servizi, modelli e BLoC girano senza modifiche: quello che vedi è la UI di produzione che fa il suo vero lavoro su dati fittizi.
- 2
Documenti generati al volo
I PDF della constatazione e del mandato venivano prodotti lato server. La demo li impagina in Dart a partire da ciò che è stato inserito nel modulo, comprese le due firme, lo schizzo dell’urto e le foto.
- 3
Sostituti per l’hardware
Fotocamera, microfono e GPS sono sostituiti da foto di esempio, un memo vocale preregistrato e una posizione fissa, così l’intero percorso funziona in una scheda del browser senza chiedere un solo permesso.
- 4
Registrato da uno script, non a mano
Flutter disegna su un canvas, quindi non c’è un DOM su cui cliccare. Uno storyboard Playwright trova i widget attraverso l’albero di accessibilità di Flutter, li pilota con veri eventi touch e registra lo screencast di Chrome alla risoluzione del dispositivo. Ogni clip e ogni screenshot di questa pagina si possono rigenerare con un solo comando.
Persone, targhe e pratiche mostrate sono tutte fittizie. Contatti e chiavi API sono stati rimossi dalla build della demo.
Gira interamente nel tuo browser. Accedi con un’e-mail e una password qualsiasi, oppure esplora la pratica di prova come ospite. Trascina per scorrere, come su un telefono.
Ogni schermata
La raccolta completa degli screenshot
OnboardingLa prima delle tre pagine introduttive mostrate al primo avvio. Onboarding: compila la CAI direttamente nell’appL’idea in una frase: la constatazione amichevole cartacea, compilata sul telefono. Modalità ospiteSenza account, l’app propone una pratica di prova da esplorare in sola lettura. AccessoE-mail e password, oppure accesso con i social. Le mie CAIOgni pratica con la sua data e lo stato attuale. Le bozze si eliminano con uno swipe. RegistrazioneOgni campo viene validato; il consenso all’informativa privacy e alle condizioni è obbligatorio. Verifica dell’e-mailUn codice di quattro cifre inviato via e-mail conferma l’indirizzo. Elenco vuotoUn account nuovo non ha ancora pratiche: il pulsante centrale avvia la prima. Passo 1: Quando e doveData, ora e indirizzo sono precompilati dall’orologio e dal GPS (geocodifica inversa). Selettore della dataSelettori a rotella per data e ora. Passo 1: Cosa è successoLa risposta decide quali dei passi successivi servono. Passo 2: AssicuratoDati anagrafici precompilati dal profilo, indirizzo con completamento automatico. Passo 2: Il mio veicoloMarca, modello e compagnia assicurativa vengono cercati sul server mentre si digita. Passo 3: Conducente, foto, punto d’urtoFoto della patente, un tocco sull’auto per segnare il primo urto, foto guidate dei danni. Passo 4: L’altro veicoloLa sezione della controparte è in giallo, come nel modulo cartaceo. Passo 6: CircostanzeLe 17 circostanze standard, una colonna per veicolo. Passo 7: Memo vocaleSi racconta a voce cosa è successo; la registrazione viene allegata alla pratica. Passo 7: Aggiungere un testimoneTestimoni e feriti, ognuno con le foto del documento d’identità. Passo 8: RiepilogoTutti i dati inseriti, raggruppati in sezioni espandibili, modificabili prima della firma. FirmaEntrambi i conducenti firmano sul telefono; il riquadro della firma sfrutta il lato lungo dello schermo. Mandato e invioSi accettano il mandato e l’informativa privacy, poi si invia la pratica. MandatoLa lettera di mandato, visualizzata come PDF all’interno dell’app. Constatazione amichevole generataIl modulo CAI ufficiale, compilato e firmato, in PDF. Pratica inviataTornati all’elenco, la nuova pratica risulta “Richiesta inoltrata”. Pratica inviata: veicoloLe pratiche inviate sono in sola lettura; tra i passaggi ci si muove liberamente. Pratica inviata: foto e urtoGli allegati vengono scaricati su richiesta, come miniature. Pratica inviata: circostanzeIl veicolo A era fermo, il veicolo B l’ha urtato. Pratica inviata: riepilogo e statoBanner di stato, firme e documenti generati. Firma salvataLa firma così come è salvata sul server. PDF della constatazioneLa constatazione visualizzata nell’app. NotificheI cambi di stato inviati dal back office (in produzione, con Firebase Cloud Messaging). ProfiloDati dell’account, cambio password, disconnessione. ImpostazioniContatti e documenti legali. Scorciatoia per l’assistenzaWhatsApp o SMS all’assistenza, a portata di tocco.
Prossimo caso di studio
nexi_payment →