Oggi vi voglio parlare di una app che abbiamo realizzato recentemente e di cui andiamo molto fieri. L’app si chiama Bernio Workshop Assistant e l’abbiamo realizzata per l’azienda Bernio di Cremona, specializzata nelle lavorazioni meccaniche di precisione. Lo scopo dell’app è quella di assistere gli operatori in tutte le fasi delle lavorazioni: 

  • Redazione dei preventivi
  • Gestione e consultazione della documentazione progettuale
  • Reportistica finale

I vari moduli che compongono l’app sono stati realizzati nell’arco di un anno e ad oggi l’app viaggia a pieno regime: contiene centinaia di progetti e aggiungiamo costantemente nuove funzionalità.

In questo articolo voglio ripercorrere con voi tutti gli step della realizzazione del progetto, dal primo incontro con il cliente ad oggi.

1 – La definizione delle funzionalità

Il primo step nella realizzazione di questo progetto è stato ovviamente quello di definire con il cliente le funzionalità da prevedere nell’app. In un primo step ci siamo concentrati sul modulo progetti; abbiamo poi realizzato il modulo produzioni e per ultimo il modulo dei preventivi. Ci tengo a sottolineare che questo è stato (ed è normale che sia) un processo iterativo: è impossibile che si riescano a definire sin da subito tutte le funzionalità nel dettaglio, anche il cliente stesso non ha istantaneamente tutte le risposte ai dubbi che vengono sollevati. Bisogna procedere per step incrementali: si inizia col definire le macro aree e successivamente si va nel dettaglio di ogni aspetto, sempre confrontandosi e rivedendo anche le priorità di volta in volta. Potrà sembrare banale e scontato, ma so che la fuori qualcuno pensa ancora che il waterfall funzioni per davvero.

Eccovi un piccolo riassunto delle funzionalità che, grazie appunto al processo di analisi iterativa, abbiamo definito con il cliente ed abbiamo infine incluso nell’app:

1.1 – Modulo progetti

Il modulo progetti consiste in un archivio di documentazione progettuale, tramite il quale gli operatori hanno a portata di mano in ogni momento tutte le informazioni e le specifiche necessarie per realizzare una determinata lavorazione. Ogni progetto è diviso in fasi, ed ogni fase è a sua volta suddivisa ulteriormente. In ogni progetto vengono inseriti, oltre agli schemi e al materiale grafico, tutte le informazioni e i riferimenti necessari per completare la lavorazione.

Lo scopo principale di questo modulo è quello di ridurre il bus factor, ovvero l’accentramento di informazioni critiche per l’azienda su determinati operatori, senza che queste vengano condivise con tutto il team.

1.2 – Modulo produzioni

Il modulo produzioni permette agli operatori di tracciare la fase di produzione dei pezzi di un determinato progetto, come ad esempio le misurazioni di verifica a campione che vengono eseguite durante la lavorazione. Per ogni misurazione l’operatore riceve un feedback sulla conformità del pezzo e, al termine della lavorazione, l’operatore può generare un report completo con tutte le misurazioni effettuate e la relativa conformità.

1.3 – Modulo preventivi

Il modulo preventivi, come indica il nome, permette agli addetti di redigere rapidamente e con precisione i preventivi per i clienti, basandosi sui tipi di lavorazione richiesti, sul materiale impiegato ed altri fattori chiave.
Anche in questo caso, al termine dell’inserimento dei dati, l’addetto può generare un preventivo vero e proprio, da inviare poi al cliente.

I diversi moduli che compongono l’app ovviamente si interfacciano a vicenda: è possibile creare un progetto a partire da un preventivo (o viceversa), ed è possibile abbinare le produzioni ai relativi progetti.

2 – Il mockup

La peculiarità di questa app è che viene usata su dei tablet direttamente installati nei pressi dei macchinari di produzione. E’ stato quindi fondamentale studiare un’interfaccia grafica che fosse funzionale, rapida ed intuitiva. Uno strumento di questo tipo, se finisce per rallentare la produzione, viene rapidamente messo nel dimenticatoio. Proprio per questo motivo abbiamo realizzato, prima di scrivere anche solo una riga di codice, un mockup interattivo molto completo. Ci siamo poi confrontati sul mockup con il cliente, in modo da capire con lui se la struttura e l’interfaccia dell’app avessero delle criticità. Abbiamo fatto diverse iterazioni in questa fase e siamo arrivati alla fine ad un mockup soddisfacente per tutti.

Bando alle ciance, si inizia a scrivere del codice!

3 – Lo sviluppo

Da un punto di vista tecnologico, abbiamo scelto di utilizzare Laravel per tutto quello che riguarda la parte di backend (principalmente le API sfruttate dall’app). Ad oggi abbiamo realizzato moltissime app web con Laravel e pensiamo sia un framework validissimo.

Per quanto riguarda invece l’app vera e propria abbiamo scelto di utilizzare Flutter. Flutter è il framework del momento per la realizzazione di app, e permette di realizzare app con performance identiche a quelle delle app native (realizzate quindi con gli SDK di Android e iOS) mantenendo però una unica codebase (come ad esempio le app ibride realizzate con Ionic o React Native). In altre parole con Flutter si riesce ad avere il meglio di entrambi i mondi, senza però le relative problematiche (ovvero le codebase separate per le app native e i problemi di performance per le app ibride). Abbiamo già realizzato molte app con questo framework e siamo entusiasti dei risultati.

Abbiamo iniziato gli sviluppi dalla parte di backend: abbiamo definito tutte le API da sviluppare e ci siamo messi all’opera. Per quanto riguarda l’autenticazione degli utenti dell’app abbiamo scelto di utilizzare i token JWT, praticamente uno standard nel mondo API.

4 – Jobs e task asincroni

In diverse situazioni l’app deve poter generare dei documenti (ad esempio PDF o Excel) a partire dai dati inseriti a sistema (ad esempio per una produzione o per un preventivo). Queste operazioni vengono demandate al backend e vengono gestite, essendo operazioni potenzialmente lunghe, in maniera asincrona tramite una coda di job. Anche in questo caso Laravel ci viene incontro fornendoci l’infrastruttura di base per la gestione asincrona dei task. In questo modo l’app non deve restare in attesa del risultato (che verrà inviato via email non appena disponibile) permettendo agli operatori di riprendere subito il lavoro senza tempi morti.

5 – Test automatici

Contestualmente allo sviluppo delle API abbiamo scritto i relativi test automatici end to end: può sembrare un’attività molto onerosa all’inizio, ma Laravel offre già tutti gli strumenti necessari e, su un progetto come questo i vantaggi di avere una codebase ben testata sono presto tangibili:

  • vengono abbattuti nel medio periodo i tempi per effettuare i test
  • viene ridotto il rischio di inserire delle regression nel codice
  • permettono di testare in maniera semplice delle casistiche che, manualmente, risultano complesse (perché ad esempio richiedono determinate situazioni difficili da ricreare usando l’app)
  • permettono di testare con maggiore precisione (una volta definito il test, viene eseguito sempre allo stesso modo)
  • i test automatici ci permettono di sviluppare il backend anche se la relativa controparte nell’app non è ancora pronta, evitando così di vincolare temporalmente i due sviluppi tra di loro.

Verifichiamo sempre anche il coverage dei nostri test, non tanto perché desideriamo raggiungere una copertura del 100%, ma perché grazie al coverage è possibile individuare i punti del codice che hanno un indice CRAP (Change Risk Anti-Patterns) troppo alto, e che richiedono quindi o di essere semplificati, o di aumentare la copertura dei test.

Arrivati a questo punto abbiamo quindi le nostre API sviluppate e ben testate, è il momento di dedicarci all’app vera e propria.

6 – L’app in Flutter

L’app può essere utilizzata in due modalità: consultazione e modifica. Abbiamo quindi creato un pattern che viene richiamato in ogni parte dell’app che permette di poter usare l’app in consultazione senza doversi preoccupare di modificare inavvertitamente i dati inseriti (cosa che, considerando che l’app viene usata durante la produzione, può succedere). Tramite il Floating Action Button in basso a destra l’utente può passare dalla modalità consultazione (in cui non si possono modificare i dati) alla modalità di modifica e viceversa. Questo semplice pattern si è rivelato molto importante per l’usabilità dell’app.

Nell’app sono inoltre presenti delle policy di accesso a determinate sezioni, per cui alcune operazioni sono disponibili solo per alcuni utenti designati.

Per quanto riguarda l’interfaccia grafica, avendo già definito dei mockup abbastanza precisi il lavoro principale è stato quello di “calare” i mockup nel material design (con i dovuti adattamenti per richiamare le forme ed i colori del brand).

7 – Responsive

Come abbiamo detto all’inizio, l’app verrà utilizzata principalmente su tablet, ma ciò non toglie che debba essere fruibile anche su smartphone. Tutte le interfacce dell’app quindi si adattano ad ogni tipologia di schermo: abbiamo realizzato un widget in Flutter che ci ha permesso di gestire in maniera semplice l’aspetto responsive dell’app, in maniera del tutto similare a quanto accade sul web con le media query. Nel caso ad esempio degli elenchi (che costituiscono una parte importante dell’app) abbiamo addirittura gestito due visualizzazioni completamente differenti: su smartphone l’elenco è composto da delle tiles, su tablet invece l’elenco viene visualizzato sotto forma tabellare (avendo a disposizione più spazio).

Ne abbiamo parlato anche in questo articolo:

Widget responsive in Flutter

8 – Monitoring

Per tenere sotto controllo le performance dell’app e eventuali errori a runtime abbiamo integrato nell’app l’SDK di Firebase, più precisamente i moduli di Analytics, Performance monitoring e Crashlytics. Grazie a questi strumenti è possibile, avere sotto controllo tutte le metriche relative al funzionamento dell’app e risulta quindi più semplice individuare i problemi (anche prima che il cliente se ne accorga).

Concludendo

E’ sempre bello lavorare con degli imprenditori che vedono nella digitalizzazione (e in particolare nelle app) una opportunità per migliorare la produttività della propria azienda, in questo caso poi la soddisfazione è doppia perché l’app è molto attiva ed è in continua espansione, e questo può solo significare che sta generando per davvero un valore aggiunto per chi la utilizza.