Criluma Viaggi
Un’agenzia di viaggi in tasca: le sue offerte, la ricerca di una vacanza, prenotazione e pagamento, e un appuntamento con un consulente.
- Ruolo
- Sviluppatore Flutter principale: pagamenti, accesso con Google, Facebook e Apple, appuntamenti, notifiche push, la migrazione a null safety e il rilascio della 2.0
- Cliente
- Criluma Viaggi, agenzia di viaggi
- Periodo
- 2018–2022 (ultimo rilascio 2.0.1, novembre 2021)
- Piattaforme
- iOS e Android da un’unica codebase Flutter
Il prodotto
Criluma Viaggi è un’agenzia di viaggi marchigiana, e la sua app metteva l’agenzia in tasca al cliente: le offerte del momento, una ricerca tra le vacanze vendute dal suo sistema di prenotazione (volo più hotel, o solo hotel) e una prenotazione fatta dal telefono, dal preventivo ai dati dei viaggiatori, fino all’assicurazione e al pagamento.
I clienti potevano anche prenotare un incontro con uno dei consulenti di viaggio dell’agenzia, in agenzia o in videochiamata. Sono stato lo sviluppatore principale dell’app, su iOS e Android da un’unica codebase Flutter, fino alla versione 2.0.1 di novembre 2021.
- 183
- dei 222 commit nel repository dell’app sono miei
- 18k
- righe di Dart nell’ultimo rilascio
- 3
- integrazioni di pagamento negli anni: Stripe, Nexi e MyBank
- 4
- modi per accedere: l’account dell’agenzia, Google, Facebook e Apple
Tour guidato
L’app in azione
Scegli una registrazione, o salta direttamente a un capitolo.
Registrate dall’ultimo rilascio dell’app in formato smartphone, con la ricerca e la prenotazione in-app riattivate com’erano nella versione 1.6. Hotel, prezzi e banche sono inventati; le pagine della banca sono disegnate dalla demo.
Cosa fa
Da un’offerta in vetrina a una vacanza pagata
01
Le offerte in vetrina
La home è la vetrina dell’agenzia: un carosello di offerte, ognuna con la destinazione, l’hotel e le sue stelle, le date e il prezzo. Un’offerta si apre con le sue foto, cosa è incluso e un modulo che invia all’agenzia una domanda in merito.
02
Una ricerca che segue ciò che è in vendita
Volo più hotel, solo hotel o ricerca libera. Destinazione, mese e aeroporto di partenza si restringono a vicenda: dopo ogni scelta il server risponde con i paesi, le regioni, i mesi e gli aeroporti che hanno ancora partenze.
03
Hotel, voli e camere
I risultati si ordinano per prezzo, categoria o tipologia. Un hotel si apre con le sue foto, il tour operator, i voli di andata e ritorno e le camere disponibili per il gruppo; si possono aggiungere camere e cambiare voli e date, e il totale si aggiorna.
04
Dal preventivo alla prenotazione
Il preventivo mette su un’unica pagina voli, soggiorno e assicurazione. Alla conferma l’app chiede i dati di ogni viaggiatore di ogni camera (titolo, nome, telefono, data di nascita e codice fiscale), poi l’assicurazione facoltativa, le condizioni e un riepilogo con i consensi richiesti dal contratto.
05
Pagare con MyBank
Il checkout nel codice dell’ultimo rilascio paga con bonifico MyBank: l’app apre la pagina di pagamento dell’agenzia, il cliente sceglie la sua banca, accede e lì autorizza il bonifico, poi torna nell’app con la vacanza pagata. Le versioni precedenti accettavano carte tramite Stripe, e ho realizzato anche un checkout con carta su Nexi.
06
Un consulente, in agenzia o in video
Un cliente che ha effettuato l’accesso trova i suoi dati già compilati: sceglie un giorno, un orario e l’argomento dell’incontro, e un consulente da incontrare in agenzia o in videochiamata. Per l’accesso si usa l’account CriluMy dell’agenzia, oppure Google, Facebook e Apple.
Sotto il cofano
Come è stato realizzato
Dialogare con un sistema di prenotazione viaggi
Tutto arriva dal server di prenotazione dell’agenzia, un web service ASP.NET le cui richieste incapsulano i campi in una stringa JSON dentro un JSON, e le cui risposte fanno lo stesso. L’app le trasforma in modelli tipizzati e BLoC su stream RxDart: la ricerca tiene allineati destinazioni, mesi e aeroporti, e la prenotazione porta gruppo, camere, voli e preventivo da una schermata all’altra.
Pagamenti, e un plugin
Per i pagamenti con carta di Nexi ho scritto nexi_payment, un plugin Flutter sopra gli SDK Android e iOS di Nexi, pubblicato su pub.dev a giugno 2020; lo mantengo tuttora. Nell’app sono arrivate prima le carte tramite Stripe e poi Nexi, quindi MyBank tramite GestPay (2020–2021), con l’app che apre la pagina di pagamento dell’agenzia in una web view e legge l’esito dall’indirizzo a cui la pagina ritorna.
Gli account, e stare al passo con Flutter
Un accesso CriluMy viene verificato dal server dell’agenzia e replicato in Firebase Auth; Google, Facebook e Apple passano da Firebase e vengono associati all’account CriluMy del cliente tramite nome utente o e-mail, oppure ne aprono uno nuovo. Il progetto è nato su una beta di Flutter nel 2018 e ha seguito Flutter fino alla 2.x: il nuovo embedding Android nel 2020, la sound null safety per la 2.0 nel 2021.
Registrare un’app uscita dagli store
L’app è vera. Le vacanze sono inventate.
L’app non è più sugli store, ma l’agenzia è in attività, e il suo sistema di prenotazione, le sue offerte e i suoi clienti le appartengono. Per questo le registrazioni usano una copia dell’ultimo rilascio che funziona in autonomia, con un sostituto per tutto ciò che c’è dietro.
- 1
L’ultimo rilascio, compilato per il browser
La versione 2.0.1, compilata per il web con Flutter 2.10, di qualche mese più recente dell’app, a cui si fa credere di girare su un iPhone. La ricerca e la prenotazione in-app sono riattivate com’erano nella 1.6, dopo aver corretto i pochi errori di null safety in quelle schermate.
- 2
Un server di prenotazione dentro la pagina
A ogni richiesta dell’app risponde, nella pagina, un sostituto che parla il formato del web service, a partire da un catalogo inventato: nove hotel dalla Sardegna alle Maldive, due tour operator, voli da cinque aeroporti, camere e preventivi. L’accesso gira sul Firebase in memoria usato nei test.
- 3
Immagini disegnate, persone inventate
Le fotografie dei fornitori restano fuori: uno script disegna ogni spiaggia, piscina e camera, i ritratti dei consulenti e i loghi dei tour operator. I consulenti, il cliente e le banche sono inventati, e le pagine della banca sono disegnate dalla demo.
- 4
Registrata offline
Lo script di registrazione blocca qualsiasi richiesta diretta fuori dalla macchina, così una ripresa non può raggiungere i sistemi dell’agenzia.
Il logo, l’interfaccia e le sue icone sono quelli dell’app. Offerte, hotel, prezzi, voli, consulenti, cliente, banche e immagini sono contenuti di esempio creati per questo portfolio.
Qui non c’è una demo da provare: l’agenzia è in attività, quindi questa pagina mostra registrazioni con contenuti di esempio.
Ogni schermata
La raccolta completa degli screenshot
OfferteUn carosello di offerte con prezzo, hotel e date. OffertaFoto, prezzo a persona, trattamento, aeroporto di partenza e date. Hotel e serviziL’hotel, le sue stelle e cosa include l’offerta. Chiedi all’agenziaUna richiesta sull’offerta, inviata all’agenzia. RicercaVolo + soggiorno, solo soggiorno o ricerca libera. DestinazioniPrima i paesi, poi le regioni. PartenzaI mesi con partenze disponibili. RisultatiHotel con date e prezzo, ordinati per prezzo, categoria o tipologia. HotelFoto, tour operator, stelle e date. Voli e camereVoli di andata e ritorno, le camere e il loro trattamento. PreventivoVoli, soggiorno e assicurazione, prima della prenotazione. ViaggiatoriOgni viaggiatore di ogni camera: titolo, nome, telefono, data di nascita e codice fiscale. Data di nascitaSi sceglie da un calendario. Assicurazione e condizioniL’assicurazione facoltativa e le condizioni contrattuali. CheckoutIl riepilogo della prenotazione, i consensi e il totale. MyBankIl cliente sceglie la sua banca (pagina disegnata dalla demo). PagatoDi nuovo nell’app: pagamento effettuato, con una conferma via e-mail in arrivo. AppuntamentoI dati del cliente, già compilati, e il giorno e l’ora. ConsulentiIn agenzia o in videochiamata (consulenti inventati). AccessoL’account CriluMy dell’agenzia. RegistrazioneNome, e-mail, un nome utente e una password.
Prossimo caso di studio
TEPY →