Tullio Facchinetti

Sviluppo applicazione APPiLL con framework Ionic

by Biagio Calicchio

Categories: article thesis lang_it article_it


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.

appill
Il dispositivo APPill.

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.

ionic
Esempi di widget che possono essere utilizzati tramite Ionic su varie piattaforme.

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.

architettura
Architettura del sistema.

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.

firebase auth
Elenco degli operatori OAuth 2.0 supportati da Firebase per l'autenticazione.

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

fcm
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.

imppush
Una parte del codice che gestisce 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.

uiux
Esempi di interfaccia utente realizzata per soddisfare i criteri di usabilità previsti.

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.

spinner
Alcuni degli spinner disponibili per l'interfaccia utente.

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.

token interceptor
Parte del codice relativo al token interceptor.

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.

login
Schermata di login.

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.

home
Schermata home.

Una nuova terapia può essere creata tramite l’interfaccia mostrata in figura.

create
Schermata per la creazione di una terapia.

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.

edit
Schermata per la modifica di una terapia.


Highlights

  • Students and theses
  • Publications
  • Thesis topics
  • Curated awesome list of CLI apps
  • Last updates (English)

  • Speed up the compilation of LaTex Beamer presentations ()
  • Students and theses ()
  • Students and theses - English ()
  • Learn enough C to survive ()
  • Workflow for writing theses collaboratively ()
  • Guidelines for theses and presentations ()
  • Projects ()
  • Last updates (Italian)

  • Risultati FdI 8 e 11 aprile 2024 ()
  • Risultati FdI 20 Febbraio 2024 ()
  • Risultati FdI 02 Febbraio 2024 ()
  • Risultati FdI 20-27 Novembre 2023 ()
  • Risultati FdI 28 Settembre 2023 ()
  • Risultati FdI 01 Settembre 2023 ()
  • Risultati FdI 27 Luglio 2023 ()
  • List of categories

    Article Article_en Article_it C Courses Fdi Lang_en Lang_it Latex Programming Project Research Results Robotics Software Teaching Thesis Tips