Sviluppo applicazione APPiLL con framework Ionic
by Biagio Calicchio
APPill è un dispositivo sviluppato da AGEvoluzione s.r.l. che ha lo scopo di facilitare l’assunzione di farmaci, in quanto permette di caricare le pillole da assumere, tipicamente una volta al mese, e di erogarle nel giorno e nella quantità preimpostata.
La tesi di Biagio Calicchio è incentrata sullo sviluppo front-end di un’applicazione che serve per l’autenticazione dell’operatore che deve configurare APPill, che avviene tramite la tecnologia Firebase, e per la creazione e la modifica di una terapia.
La app serve al caregiver del paziente presso la cui abitazione è installato il dispositivo APPiLL.
Framework Ionic
La app è pensata per essere utilizzabile da vari dispositivi, sia computer che mobili. Per questo motivo viene utilizzato il framework open source Ionic/Angular, che permette lo sviluppo di applicazioni per sistemi iOS, Android e web mediante un unico codice sorgente.
Architettura del sistema
L’architettura del sistema è quella rappresentata in figura. Il dispenser APPill non comunica mai direttamente con l’app ma solo tramite cloud. L’app comunica con il cloud di Google usando i servizi Firebase e si appoggia ad un server backend per le varie richieste http. Sia il front-end che il back-end comunicano con Firebase.
Autenticazione tramite Firebase
Firebase permette di scegliere dalla console il social network da utilizzare e configurare per l’autenticazione. Adottando il protocollo OAuth 2.0 viene generato un token di autenticazione, ossia una stringa di oltre mille caratteri che è associata alla sessione autenticata attiva. Nella configurazione scelta, il token ha una durata di 1 ora, dopodiché viene aggiornato rendendo non più valida la stringa di caratteri precedente.
Il meccanismo di OAuth 2.0 permette il riconoscimento dell’utente e rende molto difficile l’accesso ai dati sensibili da parte di malintenzionati, in quanto la probabilità di indovinare il token è quasi nulla. In più, Google limita le richieste provenienti dallo stesso indirizzo IP. Pertanto non si possono perpetrare attacchi di tipo brute-force per tentare di indovinare il token.
Firebase Cloud Messaging
Per le notifiche push è stato utilizzato il servizio Firebase Cloud Messaging (FCM), nel quale il frontend ha il compito di richiedere l’autorizzazione all’utente per la ricezione delle notifiche. Se l’utente accetta viene generato un token FCM (diverso da quello di autenticazione) che rimane lo stesso per sempre per quel dispositivo. Una volta recuperato, il token di registrazione FCM viene mandato al backend che lo associa all’account in una relazione 1 a molti. Sarà sempre il backend a decidere quando e a chi inviare le notifiche.
Usabilità e impaginazione
Per quanto riguarda l’usabilità e la user experience, è stata data importanza alle dimensioni dei pulsanti, ai colori e alle posizioni al fine di non confondere l’utente finale.
Quando vengono premuti tasti per cancellare o per il logout viene chiesta conferma, così nel caso in cui vengano premuti per sbaglio è possibile correggersi.
Quando vengono scaricate informazioni dal server, il ritardo introdotto dalla comunicazione viene compensato mediante il componente <ion-skeleton-text>
, ovvero una composizione di rettangoli che fa capire la struttura della pagina che apparirà successivamente, non appena saranno state scaricate le informazioni necessarie.
Se non si adottasse questo accorgimento, si vedrebbe una pagina bianca che potrebbe far pensare all’utente che l’app non funzioni quando in realtà è soltanto in attesa dei dati da visualizzare.
L’utilizzo del componente <ion-infinite-scroll>
di Ionic permette di non prendere tutti gli elementi della tabella in una sola chiamata al server, ma solo alcuni elementi alla volta raggruppati per pagina.
Questo componente si occupa infatti di far scattare un evento ogni volta che viene raggiunta una soglia dall’alto (o dal basso) dello schermo così da incrementare la pagina e ricevere i nuovi elementi dal back-end, mentre sulla pagina viene mostrato un spinner.
Questo va a ridurre il carico sul dispositivo evitando di raccogliere grandi quantità di dati in una volta sola e velocizzando la visione dell’output finale.
RestAPI e token interceptor
Ogni volta che viene effettuata una richiesta http al backend è necessario inviare il token di autenticazione, al fine di ricevere le informazioni corrette e indirizzarle all’utente giusto. Per fare questo interviene il cosiddetto token interceptor, che intercetta le richieste CRUD e manda, assieme alla richiesta, un header con il token che il back-end avrà il compito di decodificare tramite il metodo della libreria Firebase Admin SDK.
Alcune schermate
Di seguito vengono visualizzate alcune delle schermate che compongono l’interfaccia realizzata.
La login può essere effettuata utilizzando un account Google oppure Facebook.
La schermata “home” permette di visualizzare una sommario delle terapie create.
Come si vede dall’immagine, grazie a Ionic vengono automaticamente generate le interfacce specifiche per le due piattaforme principali che si desidera supportare.
Una nuova terapia può essere creata tramite l’interfaccia mostrata in figura.
E’ possibile modifica ed eventualmente eliminare una terapia. Nella relativa schermata vengono mostrati i dati della terapia in oggetto, in modo da poterli modificare oppure eliminare.