Tesi applicazione valutazione del dolore per ospedale infantile roberta marsetti

Università degli Studi di Trieste
Dipartimento di Ingegneria e Architettura
Corso di Laurea Magistrale in INGEGNERIA INFORMATICA
Tesi di Laurea in SISTEMI INFORMATIVI
ANALISI, PROGETTAZIONE E SVILUPPO
DI UN’APPLICAZIONE PER ANDROID E iOS
PER L’IRCCS MATERNO-INFANTILE
“BURLO GAROFOLO”
RIGUARDO LA VALUTAZIONE DEL DOLORE
IN NEONATI, BAMBINI E ADULTI.
Candidata: Relatore:
Roberta Marsetti Chiar.mo Prof. Fulvio Sbroiavacca
Anno Accademico: 2014-2015 - Sessione Straordinaria

Indice
1. Introduzione! 7
2. Analisi! 10
2.1 Contesto! 10
2.2 Cos’è la Valutazione del Dolore! 11
2.3 Valutazione del dolore in bambini e infanti! 12
2.4 Tabelle di valutazione del dolore! 13
2.4.1 Neonati prematuri! 13
2.4.2 0 - 1 mese! 14
2.4.3 1 mese - 3 anni! 14
2.4.4 3 - 8 anni! 15
2.4.5 > 8 anni e adulto! 15
2.4.6 Paralisi cerebrale infantile e/o altro deﬁcit cognitivo grave! 16
2.4.7 Paziente non collaborante! 17
2.5 Perchè creare una App per la Valutazione del Dolore! 17
2.6 Chi sarà l’utente tipo della App! 18
2.7 Raggiungibilità e conﬁgurazione della App! 18
2.8 Tipo di dati che sono inviati dalla App all’ospedale! 19
2.9 Modalità di fruizione dei dati relativi ai pazienti! 19
3. Progettazione! 20
3.1 Linee essenziali della struttura del sistema! 20
3

3.2 App per smartphone per i pazienti! 21
3.3 Applicazione per i medici per la lettura dei dati! 22
4. Strumenti utilizzati! 23
4.1 Ionic Framework! 23
4.2 AngularJS! 24
4.2.1 Add some control! 25
4.2.2 Link, form validation and server communication! 25
4.2.3 Create components! 25
4.2.4 Embed and inject! 25
4.3 SASS! 26
4.3.1 Installazione di SASS! 27
4.4 Genymotion! 28
5. Sviluppo! 29
5.1 Download e installazione di Ionic Framework! 29
5.1.1 Prerequisiti software! 29
5.1.2 Ionic Framework! 32
5.1.3 Installazione di Ionic! 35
5.1.4 Creazione di un nuovo progetto Ionic! 35
5.1.5 Build and simulate! 37
5.1.6 Templates! 39
5.1.7 Classi CSS per il layout della app! 48
5.1.8 Classi CSS per i pulsanti! 51
4

5.1.9 Visualizzare le liste con Ionic! 53
5.1.10 Direttive Angular per Ionic: gestione dei contenuti! 55
5.2 Preparazione dell’ambiente di sviluppo! 56
5.2.1 Controllo della versione corrente di Ionic e Cordova! 56
5.2.2 Il Node Server! 56
5.2.3 Creazione dell’applicazione valdol! 57
5.2.4 Creazione del session service! 58
5.2.5 Creazione dei controllers! 59
5.2.6 Creazione dei templates! 61
5.2.7 Implementazione del Routing! 62
5.2.8 Building the Application! 64
5.3 Utilizzo di Genymotion! 66
5.4 Creazione delle componenti principali di valdol! 68
5.4.1 Pagina principale con il login! 68
5.4.2 Implementazione del Google Login per Android con Ionic! 69
5.4.3 Implementazione del Google Login per iOS con Ionic! 79
5.4.4 Test del Login su un dispositivo reale! 83
5.4.5 Implementazione del tasto Logout e bug del “CancelText”! 86
5.4.6 Utilizzo di SASS per il colore tema dell’app! 89
5.4.7 Utilizzo di UI-Router per navigare tra le viste! 91
5.4.8 Scelta dell’età del bambino! 94
6. Conclusioni! 98
7. Sviluppi futuri! 98
5

8. Bibliograﬁa! 100
9. Ringraziamenti! 102
6

1. Introduzione
Oggi, 10 febbraio 2016, ore 11.39 am.
L’informatica vola, sfreccia attraverso il tempo ad altissima velocità, tanto che le date sono
importanti, ciò che scrivo qui oggi potrebbe non valere più da un momento all’altro, svanire
in favore di qualche altra innovazione o tecnologia.
La velocità è importante oggi, tutti sembriamo presi da una folle frenesia che ci trascina da
una parte all’altra del mondo, in luoghi remoti, in luoghi vicini, anche in casa quasi non ci
fermiamo mai. Siamo abituati ad avere accesso a qualsiasi informazione vogliamo in un
click, ovunque ci troviamo, che sia in macchina durante un viaggio, oppure svegli per uno
strano sogno nel cuore della notte. Ci basta prendere in mano il nostro smartphone
sempre acceso e possiamo visitare il mondo con la punta delle dita, senza fatica, senza
quasi renderci conto dell’immensa fortuna che abbiamo tra le mani.
È questo il mondo di oggi, un’abitudine all’immediatezza che non si era mai vista prima in
nessuna civiltà conosciuta della storia, occhi e menti abituate ad avere tutto subito,
pretendendo sempre meno fatica possibile per consumare l’informazione desiderata.
Un ruolo fondamentale in tutto questo lo hanno chiaramente gli smartphone, questi piccoli
dispositivi tascabili capaci di cose fino a poco tempo fa impensabili. Essi sono per noi
ormai un cordone ombelicale inscindibile col resto del mondo, con essi ci nutriamo di
informazioni, contatti, giochi, svago, fotografie, arte, condivisione, in un flusso continuo
che ci accompagna 24 ore al giorno, spesso senza soste.
Assieme agli smartphone, loro compagne e guide verso l’interattività, ci sono le App. Fino
a poco tempo fa questa parola non aveva significato alcuno, mentre adesso è una delle
parole più usate del pianeta. È come se qualsiasi oggetto, attività, necessità degli uomini
avesse trovato uno specchio virtuale in cui catapultarsi e riflettersi, un mondo fatto di etere
che duplica quello reale, e tutti sgomitano per farne parte.
7

Ormai ogni cosa ha una sua App. Le cose reali esistono, certamente, proprio come prima,
ma senza la propria App diventano quasi scomode, irraggiungibili, per un umano del 2016
che è abituato ad avere tutto ciò che desidera in un click, che vuole comodità, velocità e
immediatezza. Un umano che sa che tali desideri sono davvero realizzabili, non una
strana utopia da film di fantascienza.
Per soddisfare i nuovi bisogni di questa società sempre più proiettata verso la
semplificazione dei contatti e delle comunicazioni, gli enti e le organizzazioni si devono
adeguare a questo crescente bisogno di immediatezza, che facilita tutti, non solo gli utenti,
nella gestione della vita quotidiana, del lavoro, della salute e del divertimento.
La salute è una branca importantissima della vita dell’uomo, e sempre più ospedali sono
proiettati sulla via di un’informatizzazione totale, dalla creazione di cartelle cliniche
elettroniche all’utopia di una rete di informazioni condivisa tra gli ospedali di tutto il mondo,
per una collaborazione e uno scambio di informazioni coerenti e rapide al fine di curare al
meglio il paziente.
Ma questo ormai non basta. Oramai non si può più prescindere dall’interazione e dalla
partecipazione attiva degli utenti e dei pazienti, in tutte le attività connesse alla sanità,
dalla prenotazione delle prestazioni, alla ricerca degli specialisti adatti, alla prevenzione, la
cura e una convalescenza seguita attivamente dalla struttura.
E qual metodo migliore al giorno d’oggi per potersi interfacciare coi pazienti e con gli
utenti, se non attraverso quello strumento che ormai fa da specchio alle loro vite, ovvero lo
smartphone?
La creazione di un’ App per smartphone, facile e veloce, che includa in se stessa tutti gli
strumenti che possono essere utili all’utente, in modo immediato e funzionale, è ad oggi il
modo più semplice per gestire la comunicazione tra un utente e la struttura sanitaria.
Se i pazienti di cui si parla in più sono dei bambini, nel caso di ospedali infantili, questa
App sarà ancora più utile in certi campi, poichè si potrà facilmente legare al gioco alcune
attività di cura e prevenzione, e facilitare in questo modo anche la convalescenza a casa
supervisionata dai genitori.
8

Proprio di ciò ci si occuperà in questo lavoro di tesi, ovvero dell’analisi, della progettazione
e dello sviluppo di un prototipo di un App per l’ Ospedale Infantile Burlo Garofolo, con
particolare attenzione al servizio “Valutazione del dolore”, con come obiettivo la
preparazione di una base su cui sviluppare in futuro in modo scalabile varie funzionalità
aggiuntive.
9

2. Analisi
2.1 Contesto
Il contesto in cui la App va a inserirsi è l’IRCCS Materno-Infantile Burlo Garofolo.
Ci si propone di progettare una App “contenitore”, la quale comprenda varie funzionalità di
utilizzo comune da parte degli utenti e dei pazienti dell’ospedale stesso.
Tale App deve essere per sua natura scalabile, nel senso che deve essere possibile
aggiungere nuove funzionalità in futuro, senza necessariamente cambiare quelle già
esistenti.
Alcuni esempi di funzioni che si troveranno disponibili in tale App sono:
• Possibilità di prenotare prestazioni online
• Elenco degli specialisti, delle malattie trattate e contatti
• Alfabeto delle malattie
• Diario del diabetico
• Diario della gravidanza
• Valutazione del dolore
• Altro
Non è importante deﬁnire ora tutte le funzioni che saranno incluse nella App dell’ospedale,
poichè esse potranno variare nel tempo a seconda di nuove esigenze che si
presenteranno. L’importante è la creazione di un contenitore scalabile che possa essere
facilmente modiﬁcato in futuro.
In questa tesi ci si propone di progettare e implementare una delle funzionalità di questa
App, ovvero la Valutazione del Dolore in bambini e infanti.
10

2.2 Cos’è la Valutazione del Dolore
La misurazione del dolore è parte fondamentale della valutazione e della strategia
terapeutica per il controllo del dolore.
Una corretta valutazione dell’intensità, della gravità e della durata del dolore è il primo
importante passo per scegliere il trattamento farmacologico più adeguato da proporre al
paziente.
L’efficacia e la tollerabilità dei trattamenti analgesici e l’impatto della malattia di base sulle
condizioni fisiche, psicologiche e sociali del paziente devono essere valutati regolarmente
al fine di modificare e personalizzare il trattamento.
Dal momento che il dolore è un’esperienza del tutto soggettiva, analizzarne le
caratteristiche significa raccogliere i giudizi del paziente, aiutato dalle scale di valutazione
del dolore.
Scale di valutazione validate:
■ VAS (scala analogico visiva)
La scala è una retta di 10 cm con due estremità che corrispondono a “nessun
dolore” e il “massimo possibile” (oppure il massimo di cui si ha avuto esperienza).
E’ uno strumento unidimensionale che quantifica ciò che il malato soggettivamente
percepisce come dolore oppure come sollievo nel complesso delle loro variabili
fisiche, psicologiche e spirituali senza distinguere quali di queste componenti abbia
ruolo maggiore. Modo d’uso: se si intende valutare il dolore o il sollievo riferito ad
un periodo la domanda può essere: “ Pensi al dolore e al sollievo dal dolore che
può aver provato in quest’ultima settimana appena trascorsa. Per ciascuna delle
due voci metta poi un segno sul punto che meglio corrisponde alla sua situazione,
rispetto ai due estremi della linea.”. La misura è in millimetri. La scala può essere
usata anche per quantificare il dolore nel momento presente in cui si visita il malato.
La difficoltà per alcuni malati di comprendere le istruzioni per il dolore massimo
possibile può essere facilitato chiedendo di ricordare il dolore “più forte” provato
nella loro vita (dolore massimo).
■ Scala verbale (descrittiva)
La scala verbale semplice, sempre unidimensionale, ripropone l’asta di 10 cm in cui
11

la scelta viene facilitata (ma anche condizionata) dalla presenza di aggettivi che
quantificano il dolore. Risultati soddisfacenti si ottengono quando vi sono almeno
sei livelli di intensità. Modo d’uso: “Quanto dolore ha provato nelle ultime 4
settimane?” Oppure “Quanto è il suo dolore che sta provando in questo momento?”.
■ Scala numerica (NRS)
E’ la più utilizzata, grazie alla sua semplicità. Considerando una scala da 0 a 10 in
cui a 0 corrisponde l’assenza di dolore e a 10 il massimo di dolore immaginabile,
quanto valuta l’intensità del suo dolore?
■ Scala a “faccine”
Si usa prevalentemente nel bambino o nel paziente demente.
Altre valutazioni vengono effettuate mediante questionari sul dolore che valutano
l’intensità ma anche l’interferenza del dolore con le attività della vita quotidiana.
2.3 Valutazione del dolore in bambini e infanti
Nel caso il paziente sia un bambino o un neonato, la valutazione del dolore può risultare
difficoltosa, il motivo è chiaramente la difficoltà da parte del bambino nel far capire
all’adulto il dolore che prova in riferimento a numeri o scale progettate per pazienti adulti.
Nel caso del neonato o di pazienti con paralisi cerebrale o altro deficit cognitivo grave, la
comunicazione diretta è addirittura impossibile.
Si sono quindi sviluppati dei metodi e delle scale appositamente progettati per pazienti con
particolari problemi di comunicazione e per pazienti con età minore di 8 anni, in modo da
facilitare il medico al riconoscimento del dolore provato dal bambino.
Le scale del dolore per questi particolari pazienti sono le seguenti:
• PIPP (neonati prematuri)
• EDIN (0 - 1 mese)
• FLACC (1 mese - 3 anni)
12

• WONG - BAKER ( 3 - 8 anni)
• VAS ( > 8 anni e adulto)
• NCCPC - PV (paralisi cerebrale infantile e/o altro deﬁcit cognitivo grave)
• CHEOPS (paziente non collaborante)
Vediamo ora di analizzare tali scale nel dettaglio, poichè saranno proprio esse l’oggetto
della prima funzione dell’App dell’ospedale che si va a realizzare in questa tesi.
Si noti chiaramente che nei bambini al di sotto dei 3 anni la valutazione del dolore viene
fatta da un genitore o dal medico, o comunque da un adulto che li assiste e prende nota
dei comportamenti del piccolo.
2.4 Tabelle di valutazione del dolore
2.4.1 Neonati prematuri
Figura 1: tabella PIPP
13

2.4.2 0 - 1 mese
Figura 2: tabella EDIN
2.4.3 1 mese - 3 anni
Figura 3: tabella FLACC
14

2.4.4 3 - 8 anni
Figura 4: tabella WONG-BAKER
2.4.5 > 8 anni e adulto
Figura 5: scala VAS
15

2.4.6 Paralisi cerebrale infantile e/o altro deﬁcit cognitivo grave
Figura 6: tabella deﬁcit cognitivo
16

2.4.7 Paziente non collaborante
Figura 7: tabella CHEOPS
2.5 Perchè creare una App per la Valutazione del Dolore
La valutazione del dolore, come descritto sopra, è importantissima per un corretto
trattamento del paziente, e deve essere spesso effettuata in maniera costante durante le
fasi di cura e convalescenza del bambino.
Una App faciliterebbe in modo signiﬁcativo l’immagazzinamento dei dati relativi al dolore di
ogni singolo paziente in un database accessibile dal medico curante, in modo da avere
sempre disponibile lo storico relativo a ogni paziente in cura.
Inoltre faciliterebbe moltissimo la collaborazione del paziente e dei suoi genitori anche
durante la convalescenza, o comunque nei periodi in cui il paziente si trova a casa o
lontano dall’ospedale. Con tale App si potrebbe continuare a seguire l’andamento del
dolore nel piccolo anche quando si trova al di fuori della struttura ospedaliera con
un’immediata visualizzazione in ospedale, da parte del medico curante, dei dati relativi al
paziente di giorno in giorno.
17

Tale App sarebbe dunque un aiuto concreto per i genitori a casa che devono seguire il
bambino giornalmente, e un inestimabile mezzo di collegamento diretto e immediato tra
paziente e medici dell’ospedale.
2.6 Chi sarà l’utente tipo della App
Il pubblico a cui la App è destinata sono i genitori dei bambini in cura all’ Ospedale Infantile
nel caso di bambini al di sotto dei 3 anni, nel caso di pazienti non collaboranti, con paralisi
cerebrale o con deficit di cognitivi gravi. Nel caso di bambini senza difficoltà comunicative
sopra i 3 anni l’utente della App è il bambino stesso, che dovrà interagire con le tabelle del
dolore corrispondenti alla sua età e lo dovrà poter fare in modo autonomo, sempre sotto
supervisione del genitore per la gestione generale della App e per l’invio dei dati. Nel caso
in cui il paziente sia la donna gravida stessa, la App è dotata di una sezione apposita per
la valutazione del dolore anche in pazienti adulti.
2.7 Raggiungibilità e configurazione della App
La App dovrà essere disponibile per il maggior numero di persone possibile.
I sistemi operativi per smartphone più comuni ad oggi sono Android, iOs per IPhone e
Windows per Windows Phone. L’ideale sarebbe sviluppare diverse versioni della App
compatibili con tutti e tre i sistemi. In questa tesi si è deciso di sviluppare la App
compatibile con Android e IOs, poichè presto anche Windows Phone si renderà
compatibile con le App sviluppate per Android, quindi è sembrata la scelta migliore per
iniziare a distribuire la App al maggior numero di utenti.
La App dovrà essere scaricabile dal PlayStore e dall’Apple Store, e per utilizzarla ogni
paziente dovrà fare il login con un account Google. Ogni paziente avrà il suo account
Google personale.
Una volta inserito l’account l’utente avrà accesso alle varie tabelle di valutazione, e dovrà
scegliere quella adatta all’età del bambino.
18

2.8 Tipo di dati che sono inviati dalla App all’ospedale
Una volta selezionata la valutazione del dolore, l’utente tramite un pulsante invio la dovrà
inviare a un database dove sarà memorizzata in una tabella, contenente data, ora, id del
paziente e numero corrispondente alla valutazione del dolore effettuata.
In questa tesi ci si propone di creare un prototipo di tale App fino al momento dell’invio dei
dati, la gestione e la scelta del database saranno oggetto di sviluppi futuri nel momento in
cui la App sarà messa in uso e divulgata al pubblico.
2.9 Modalità di fruizione dei dati relativi ai pazienti
Il fruitore dei dati immagazzinati nel database relativi alla valutazione del dolore del
paziente è il medico curante. Il medico dovrà avere la possibilità, attraverso un’
applicazione da definirsi, di accedere allo storico delle valutazioni del dolore, dopo aver
inserito il nome, cognome, codice fiscale e data di nascita del paziente.
L’applicazione destinata al medico dovrà quindi comunicare con il database che contiene i
dati inviati dalla App e con il database che contiene la coppia id - nome, cognome, codice
fiscale e data di nascita del bambino.
Tale applicazione per il medico dovrà essere di semplice utilizzo e mostrare l’andamento
della valutazione del dolore del bambino nel tempo in modo chiaro, anche attraverso
rappresentazioni grafiche che ne semplifichino la lettura.
Questa applicazione conterrà un disclaimer che specifica che essa non è a scopo
diagnostico ma solo a scopo di valutazione.
19

3. Progettazione
3.1 Linee essenziali della struttura del sistema
Per il corretto funzionamento della App per la valutazione del dolore, oltre alla creazione
della App stessa, ci si dovrà occupare di tutto il sistema all’interno del quale essa lavora e
al quale si appoggia, dal Database in cui immagazzinare i dati, al Server che si occupa
dello scambio di informazioni tra Database e mondo esterno, all’applicazione dedicata ai
medici per la lettura dei dati relativi ai pazienti.
In generale la struttura del sistema completo sarà la seguente:
Figura 8: struttura del sistema completo
La App per smartphone per i pazienti manda i dati relativi alla valutazione del dolore al
Server, il quale li riceve e a sua volta li immagazzina nel Database.
L’ Applicazione per i medici per la lettura dei dati fa una richiesta al server immettendo l’ID
del paziente interessato.
Il Server riceve questi dati e chiede al Database lo storico dei dati riguardanti la
valutazione del dolore di quel paziente, poi manda tale storico all’ Applicazione per i
medici.
20

3.2 App per smartphone per i pazienti
La App sarà realizzata usando Ionic Framework unito a AngularJs.
La App sarà scaricabile dal PlayStore di Google e dall’Apple Store.
All’apertura la App avrà una schermata in cui viene richiesto il login con il proprio account
Google.
La schermata successiva a quella in cui inserisce il codice identiﬁcativo del paziente sarà
una schermata in cui si sceglie di quale servizio fornito dall’ospedale si vuole usufruire.
Nel nostro caso sceglieremo “Valutazione del dolore”, e la schermata successiva sarà
un’elenco di età, e si sceglierà a quale schema di valutazione del dolore si vuole fare
riferimento, a seconda appunto dell’età del paziente.
Saranno possibili le seguenti scelte:
Figura 9: età del paziente
Ogni scelta porterà alla tabella corrispondente per la valutazione del dolore.
21

La tabella avrà delle select di tipo radio (non si possono selezionare più caselle
corrispondenti alla stessa riga) selezionabili, dopo aver selezionato tutte le caselle relative
alla valutazione del dolore, l’utente avrà la possibilità di inviare il dato al Server con un
bottone “invia dati”.
Il dato inviato al Server è sempre un unico numero che rappresenta la valutazione del
dolore in quel momento. Nel caso delle tabelle infatti, non verranno inviate le singole
valutazioni dei singoli comportamenti del bambino, bensì il numero finale che risulta dalla
somma delle varie caselle scelte.
Nel caso si volesse accedere con l’account di un altro bambino si dovrà effettuare il logout
e entrare poi successivamente con il nuovo account.
La mail dell’account che ha effettuato il login sarà sempre ben visibile in alto a destra,
cosicchè sia sempre chiaro a quale paziente è riferita la valutazione del dolore corrente.
3.3 Applicazione per i medici per la lettura dei dati
Tale applicazione permetterà al medico di visualizzare lo storico delle valutazioni del
dolore del paziente, anche sotto forma di grafico in modo da visualizzare con immagini
l’andamento del dolore nel bambino.
Non verrà trattata in questa tesi, ma farà parte degli sviluppi futuri.
All’ ingresso dell’Applicazione il medico dovrà inserire il suo Username e la sua Password
identificative, e successivamente l’ID del paziente del quale desidera vedere lo storico
delle valutazioni del dolore.
22

4. Strumenti utilizzati
4.1 Ionic Framework
Figura 10: Ionic Framework
Ionic è un potente HTML5 SDK creato appositamente per creare delle app quanto più
simili a delle app native, usando tecnologie web come HTML, CSS e Javascript.
Ionic è focalizzato molto sull’interfaccia graﬁca, importantissima per garantire all’utente
un’esperienza di utilizzo semplice, lineare e accattivante, in modo da poter utilizzare tutte
le funzioni preposte in maniera naturale e immediata.
Per questo motivo si è scelto di utilizzarlo per la realizzazione della App per la Valutazione
del Dolore, che necessita di essere disponibile su ogni dispositivo in modo che tutti i
pazienti possano essere in grado di utilizzarla con semplicità.
Vedremo nella sezione “sviluppo” come è stato usato tale framework nella app oggetto di
questa tesi.
Pagina ufﬁciale di Ionic: http://ionicframework.com/
23

4.2 AngularJS
Figura 11: angularJS
Ionic è strettamente collegato all’utilizzo di AngularJS, per poter esprimere interamente il
proprio potenziale, bisogna unire i due strumenti, in tal modo si potrà costruire una app
completa, veloce e moderna; come unirli lo vedremo nel seguito di questa tesi.
AngularJS è un framework che permette di creare delle applicazioni web veloci e reattive,
in modo che l’esperienza dell’utente ne tragga molti vantaggi rispetto al semplice uso di
HTML unito a Javascript.
L’HTML è perfetto per creare documenti statici, ma purtroppo non è il massimo quando si
cerca di creare con esso delle viste dinamiche nelle applicazioni web.
AngularJS permette di estendere il vocabolario HTML per la propria applicazione. Il
risultato è estremamente espressivo, leggibile e veloce da sviluppare.
AngularJS è un insieme di funzioni completamente estensibili e lavora molto bene con
altre librerie, ogni funzione può essere modiﬁcata o rimpiazzata per diventare compatibile
con ciò che serve allo sviluppatore.
24

4.2.1 Add some control
Controller: i controller sono i comportamenti dietro gli elementi DOM (Document Object
Model). Il contenuto di una pagina web viene memorizzato nel DOM e ad esso si può
accedere, anche per manipolarlo, usando Javascript. Angular permette di esprimere i
comportamenti in un modo pulito e leggibile senza preoccuparsi di aggiornare il DOM.
4.2.2 Link, form validation and server communication
Deep linking: un deep link riflette dove si trova un user in una app, è molto utile così un
user può mettere un segnalibro alla pagina in cui si trova e mandare per mail il link alla
location.
Form validation: Angular permette di dichiarare le regole di validazione del form senza
dover scrivere codice Javascript.
Server communication: XHR (HMLHttpRequest) semplifica il codice gestendo ritorni di
dati asincroni.
4.2.3 Create components
Directives: è una funzione unica e potente disponibile solo in Angular. Permette di
inventare una nuova sintassi HTML, specifica per l’applicazione che si desidera
sviluppare.
Reusable components: si usano le Directives per crearne. Un component permette di
nascondere complesse strutture DOM e CSS. In questo modo ci si può focalizzare sia su
che cosa fa l’applicazione sia sulla VIEW separatamente.
4.2.4 Embed and inject
Embeddable: Angular lavora bene con altre tecnologie, si può aggiungere Angular a una
pagina già esistente ad esempio.
25

Injectable: la Dependency Injection permette di descrivere dichiarativamente come è
costruita un’applicazione. Questo signiﬁca che la app non ha bisogno del main.
Testable: Angular incoraggia la divisione VIEW-MODEL e ha molti vantaggi con la
Dependency Injection.
Vedremo poi nella parte dedicata allo sviluppo come viene usato AngualrJS nella app
oggetto di questa tesi.
Pagina ufﬁciale di AngularJS:
https://angularjs.org/
4.3 SASS
Figura 12: SASS
SASS è un acronimo e sta per Syntactically Awesome Style Sheets, e già questo spiega
molto sulla natura di questo strumento, che viene ormai utilizzato su larga scala per la
creazione di fogli di stile da applicare al codice HTML desiderato.
26

SASS è completamente compatibile con tutte le versioni di CSS, quindi si possono usare
tutte le librerie già disponibili per i CSS all’interno di SASS. SASS comprende molte
funzioni e strumenti in più rispetto agli altri CSS ed è l’estensione più utilizzata e
importante del linguaggio CSS. Ci sono moltissimi framework costruiti con SASS, noi lo
nominiamo perchè viene utilizzato da Ionic Framework e verrà utilizzato nella app oggetto
di questa tesi.
SASS è un’estensione del linguaggio CSS che permette di utilizzare variabili, di creare
funzioni e di organizzare i fogli di stile in più file. Si basa sempre sul concetto di CSS ma
permette di definire fogli di stile con una forma più semplice, completa e potente rispetto ai
CSS e serve a generare file CSS ottimizzati, aggregando strutture definite anche in modo
complesso.
4.3.1 Installazione di SASS
Per poter installare SASS è necessario installarlo tramite Ruby: dalla pagina ufficiale si
può scaricare la versione adatta al proprio sistema operativo. Completata l’installazione di
Ruby è possibile procedere con l’installazione di SASS tramite il comando:
gem install sass.
Oppure è possibile installarlo tramite Ionic (consigliato) come vedremo nel capitolo
“Sviluppo”.
Pagina ufficiale di SASS:
http://sass-lang.com/
27

4.4 Genymotion
Figura 13: Genymotion
Inizialmente si è preferito non testare la app direttamente su dei dispositivi reali, ma di
avvalersi di un simulatore. Poi questa scelta è stata abbandonata in corso d’opera, ma
vale la pena nominare il simulatore utilizzato per la prima parte del progetto.
È stato scelto di utilizzare un simulatore esterno al simulatore standard utilizzato da Ionic
poichè quest’ultimo peccava in velocità e responsività.
È stato così trovato Genymotion, un simulatore molto veloce e semplice da usare, per
simulare sistemi Android. Tale simulatore ha oltre 3000 configurazioni Android tra cui
scegliere, in modo da poter testare la propria app su più dispositivi diversi.
Purtroppo la versione free ha delle limitazioni, come ad esempio la mancanza del modulo
wifi, quindi quando il progetto in fase avanzata ha avuto bisogno di tale modulo, l’utilizzo di
questo simulatore è stato abbandonato e si è passati ai test su di un dispositivo reale.
Pagina ufficiale di Genymotion:
https://www.genymotion.com/#!/download/freemium/mac/classical.
28

5. Sviluppo
Per lo sviluppo di questa app è stato usato un Mac con sistema operativo Yosemite.
Figura 14: macchina utilizzata per lo sviluppo
Tutte le indicazioni successive si riferiscono al processo di installazione e sviluppo su tale
piattaforma, ma differiscono davvero di poco dalle istruzioni per operare in ambiente
Windows, in alcuni minimi dettagli irrilevanti al ﬁne di questa tesi.
5.1 Download e installazione di Ionic Framework
5.1.1 Prerequisiti software
I prerequisiti software per poter installare e utilizzare Ionic Framework sono:
- aver installato Node.js
- aver installato Apache Cordova.
29

Installazione di Node.js:
Figura 15: NodeJS
si deve scaricare la versione scelta di Node.js dalla pagina ufﬁciale che si trova al link
https://nodejs.org/en/.
Installazione di Apache Cordova:
Figura 16: Apache Cordova
30

Apache Cordova è un framework per lo sviluppo di applicazioni mobile open source. Esso
permette di usare le tecnologie standard del web come ad esempio HTML5, CSS3 e
Javascript per uno sviluppo cross-platform, evitando i linguaggi nativi delle singole
piattaforme diverse. Le applicazioni così sviluppate potranno essere eseguite su ogni
piattaforma e relazionarsi in modo semplice con le API dei dispositivi, avendo accesso ad
ogni sensore, dato e rete del dispositivo stesso.
Nello sviluppo di applicazioni mobile ibride Cordova è senza dubbio uno dei framework più
noti insieme al suo derivato PhoneGap. Si tratta sostanzialmente di framework di sviluppo
che consentono di generare applicazioni native per le diverse piattaforme mobile che
incorporano applicazioni Web.
Per installare Apache Cordova da console eseguire il comando:
$ sudo npm install -g cordova.
Pagina ufﬁciale di Apache Cordova:
https://cordova.apache.org/
Nota: per sviluppare su iOS è necessario sviluppare la app su Mac OS X. Il simulatore
iOS necessita del package ios-sim npm, che può essere installato coi comandi:
$ sudo npm -g install ios-sim
$ sudo npm install -g ios-deploy
31

5.1.2 Ionic Framework
Figura 17: getting started with Ionic
Per iniziare a lavorare con Ionic Framework è consigliato l’utilizzo della guida di Html.it:
http://www.html.it/guide/ionic-framework-la-guida/
Qui di seguito illustreremo i passaggi fondamentali, presi da tale guida, per la sua
istallazione e il primo approccio verso la creazione dell’app oggetto di questa tesi.
Introduzione
Ionic è un framework che consente di sfruttare al meglio le tecnologie Web per creare
applicazioni mobile con look and feel simile a quelle native e in questo ambito si rivela tra
le soluzioni di maggior successo. Ma per capire meglio dove si colloca Ionic Framework
nel panorama dello sviluppo mobile, dobbiamo fare un breve riepilogo dell’attuale stato
dell’arte.
Tipologie di applicazioni mobile
In ambito mobile possiamo individuare tre tipologie di applicazioni:
32

Figura 17: tipologie di applicazioni mobile
Le applicazioni native hanno dalla loro parte il vantaggio di poter sfruttare a pieno le
caratteristiche della piattaforma mobile e le funzionalità del disposivto, di essere
generalmente più efficienti e di avere un aspetto grafico integrato con quello
dell’interfaccia grafica del sistema operativo.
Tuttavia, sviluppare un’app che possa essere eseguita sulle più comuni piattaforme mobile
significa sviluppare applicazioni diverse con linguaggi differenti.
Le applicazioni Web, sfruttando tecnologie standard, consentono di condividere lo stesso
codice tra piattaforme mobile diverse. Dal momento però che si tratta sostanzialmente di
siti Web ottimizzati per il mobile, le loro funzionalità non sono disponibili quando un
dispositivo è offline. Inoltre, le applicazioni Web non possono accedere alle funzionalità del
dispositivo, come ad esempio il file system, ed il loro aspetto grafico è generalmente non
integrato con quello della piattaforma.
Le applicazioni ibride sfruttano il meglio dell’approccio nativo e di quello Web,
consentendo di utilizzare lo stesso codice basato sulle tecnologie Web per le diverse
piattaforme mobile. Tuttavia anche le applicazioni ibride possono soffrire dello stesso
problema delle applicazioni Web: la mancata integrazione dell’aspetto grafico con la
specifica piattaforma mobile.
33

Ionic: il “Bootstrap delle app ibride”
In questo contesto Ionic Framework si pone come un supporto per la creazione di
interfacce grafiche per applicazioni ibride. Infatti, come abbiamo già detto, uno dei
problemi principali delle applicazioni Web e ibride è la mancata o difficile integrazione
dell’aspetto grafico di un’app con il layout grafico della piattaforma ospite. Il risultato può
essere un aspetto totalmente difforme da quello atteso in una certa piattaforma mobile.
Il framework è realizzato dal team Drifty e gli stessi autori affermano che Ionic può essere
considerato “il Bootstrap per le applicazioni ibride”: come Bootstrap ha significato un punto
di riferimento per la creazione di siti e applicazioni Web responsivi, Ionic vuole essere il
punto di riferimento per la creazione di applicazioni mobile ibride con un aspetto il più
possibile vicino ai componenti della piattaforma nativa.
I loro autori hanno raccolto le migliori best practice per lo sviluppo di interfacce mobile con
tecnologie Web e le hanno codificate in questo framework, evitando quindi che ogni
sviluppatore riparta da zero nello sviluppo dell’interfaccia di una nuova applicazione.
AngularJS
Da un punto di vista tecnico, il framework utilizza AngularJS come motore per definire i
componenti dell’interfaccia grafica. In sostanza, Ionic è costituito da un insieme di direttive
Angular riutilizzabili ed eventualmente espandibili per disegnare l’interfaccia grafica con un
approccio dichiarativo.
La conoscenza di AngularJS è quindi un requisito importante per sfruttare al meglio questo
framework.
SASS per la gestione del look’n’feel
L’aspetto grafico predefinito è ispirato al look and feel di iOS7, ma è possibile effettuare
delle personalizzazioni effettuando l’override del CSS e/o impostando variabili e mixin di
SASS.
34

5.1.3 Installazione di Ionic
Per installare Ionic si deve scrivere tale comando da console:
$ sudo npm install -g ionic
Il pacchetto contenente tutto l’occorrente per Ionic sarà scaricato ed installato
nell’ambiente node.js della nostra macchina di sviluppo.
5.1.4 Creazione di un nuovo progetto Ionic
La creazione di un nuovo progetto Ionic è strettamente correlato alla creazione di un
progetto Cordova. Infatti, come avremo modo di vedere, Ionic fa da wrapper a diversi
comandi Cordova per la gestione dell’ambiente di sviluppo.
Digitando il seguente comando in una cartella di lavoro creeremo l’infrastruttura
necessaria per sviluppare la nostra app ibrida myApp con un layout graﬁco supportato da
Ionic:
$ ionic start myApp
Ecco il contenuto della cartella myApp che verrà creata:
Figura 18: cartella MyApp
35

Oltre ad alcuni file e cartelle di configurazione di Cordova, troviamo alcuni elementi
specifici di Ionic. In particolare abbiamo:
• il file ionic.project che contiene la configurazione di Ionic per il progetto corrente,
• la cartella scss che contiene il codice SASS per la generazione dei CSS
• la cartella www che conterrà il codice HTML, JavaScript, CSS e tutto l’occorrente
per definire la nostra app ibrida.
La cartella WWW
Il contenuto della cartella www dipende dal template di progetto che utilizziamo per
sviluppare la nostra applicazione, come vedremo più avanti. La sua struttura standard
prevede la presenza delle seguenti cartelle:
Figura 19: contenuto cartella www
In particolare, nella cartella js sono presenti i file:
• app.js che contiene la configurazione e l’inizializzazione dell’applicazione Angular
• controllers.js destinato a contenere i controller utilizzati nell’app
• services.js e directives.js sono pensati per ospitare rispettivamente i servizi e le
direttive dell’applicazione.
36

Infine, il file index.html contiene il markup della pagina all’interno della quale saranno
visualizzate le view dell’applicazione.
App Android, iOS o entrambe?
Prima di passare a sviluppare la nostra app, non dobbiamo dimenticare di abilitare il
nostro ambiente di sviluppo al supporto delle piattaforme mobile di riferimento.
Per abilitare il supporto di Android:
$ ionic platform add android
Per abilitare il supporto di iOs:
$ ionic platform add ios
Questo ultimo comando può essere eseguito soltanto su una macchina Mac OS X.
Nota: Le app ibride realizzate con l’attuale versione di Ionic hanno come piattaforme
mobile di riferimento iOS 6 e Android 4.0 e versioni successive. Ufficialmente non sono
supportate le piattaforme Windows e Windows Phone, anche se con qualche
accorgimento è possibile fare girare le app Ionic su questi sistemi operativi.
In questa tesi non ci si occuperà della piattaforma Windows Phone.
5.1.5 Build and simulate
Parlando del setup dell’ambiente di sviluppo del framework abbiano citato il comando ionic
start ed abbiamo detto che esso prepara l’infrastruttura necessaria allo sviluppo di un’app
ibrida. Tale comando, in realtà, crea una vera e propria applicazione con un suo layout
grafico predefinito.
37

Avremo modo di tornare sulla gestione e personalizzazione del layout di un’applicazione.
Per il momento vogliamo concentrarci sulle modalità di utilizzo dell’ambiente Ionic per
gestire lo sviluppo e l’esecuzione di un’applicazione. Eseguiamo quindi il comando:
$ ionic start valdol
Valdol è il nome che abbiamo dato alla nostra app.
Test nel browser
Quando avremo una maggiore conoscenza di Ionic potremo modificare questi file con il
nostro editor preferito. Per il momento possiamo limitarci a visualizzare l’applicazione
all’interno di un browser per valutare l’impatto grafico lanciando il comando:
$ ionic serve
La visualizzazione all’interno di un browser è molto comoda e rapida, e rappresenta un
approccio valido per valutare immediatamente l’effetto delle nostre modifiche sul codice
dell’applicazione. Tanto più che le modifiche salvate sui file sorgente vengono
immediatamente caricate e mostrate sul browser senza il nostro intervento.
Generare l’app mobile
Tuttavia, per valutare effettivamente l’applicazione nell’ambiente di destinazione dobbiamo
generare l’app mobile per la la piattaforma mobile di riferimento. Questo si rende tra l’altro
necessario per utilizzare le funzionalità che richiedono un’interazione con il dispositivo.
Dopo aver abilitato la piattaforma o le piattaforme mobile di destinazione tramite l’apposito
comando ionic add platform, avviamo la generazione dell’app tramite il comando
ionic build. Ad esempio, il seguente comando genera l’app per Android:
$ ionic build android
38

Una volta generata l’applicazione possiamo lanciare l’emulatore di Android, sempre
dall’interno dell’ambiente Ionic, tramite il comando:
$ ionic emulate android
È possibile infine installare ed eseguire l’applicazione direttamente su un dispositivo, dopo
averlo collegato alla macchina di sviluppo, semplicemente lanciando il comando:
$ ionic run android
Naturalmente gli stessi comandi valgono per la piattaforma di Apple sostituendo alla
stringa android la stringa ios.
Nota: in questa parte iniziale del progetto è ancora possibile utilizzare tale simulatore,
poichè la app non fa nulla al momento. In ogni caso esso risulta molto molto lento, per
questo si è deciso di trovare un simulatore più veloce in seguito: Genymotion, il cui modo
di utilizzo descriveremo in seguito.
5.1.6 Templates
Il comando ionic start che abbiamo utilizzato per creare il modello di base della nostra
applicazione prevede un parametro obbligatorio, il nome dell’applicazione, ed un
parametro opzionale, il template da utilizzare o starter template. Il comando del nostro
esempio era:
$ ionic start valdol
Esso indica che la nostra applicazione si chiamerà valdol ma non specifica alcun
parametro opzionale. In questo caso viene applicato un template di default tra quelli
previsti da Ionic, come vedremo a breve.
Il template di un’applicazione è lo schema di partenza di un’applicazione, cioè un insieme
di impostazioni che determinano il layout, la grafica ed eventuali funzionalità di base. Lo
39

starter template determina il contenuto della cartella www nell’insieme delle cartelle di un
progetto Ionic.
Allo stato attuale il framework prevede tre starter template predefiniti:
• blank;
• tabs (template di default);
• sidemenu.
Se non viene specificato un template, il comando ionic start creerà un’applicazione a
partire dal template tabs. Analizziamo nel dettaglio ciascuno dei template predefiniti.
Blank template
Il template blank rappresenta un’applicazione senza un layout predefinito. Dopo aver
creato un progetto Ionic di questo tipo troveremo nella cartella www un file index.html
con il seguente contenuto:
Figura 20: file index.html
40

Analizzando il codice possiamo notare i riferimenti al foglio di stile di Ionic (lib/ionic/
css/ionic.css) e ad un foglio di stile locale (css/style.css) per eventuali
ridefinizioni di impostazioni CSS.
Troviamo quindi il riferimento alla libreria di Ionic che include anche AngularJS.
Oltre al riferimento alla libreria di Cordova troviamo anche il riferimento al codice
JavaScript che definisce la nostra applicazione (js/app.js).
Il markup della pagina contiene la direttiva Angular ng-app associata al body, definendo
quindi il contesto di esecuzione del framework. All’interno del body troviamo la direttiva
ion-pane che rappresenta un contenitore generico all’interno del quale troviamo una
intestazione (direttiva ion-header) e un’area per il contenuto (direttiva ion-content).
Il contenuto del file app.js è anch’esso abbastanza semplice. In esso viene definita
l’applicazione AngularJS starter con l’esecuzione di alcune inizializzazioni:
Figura 21: file app.js
L’inizializzazione standard effettuata all’avvio dell’applicazione riguarda l’inibizione della
visualizzazione della barra accessoria sulla tastiera virtuale.
41

Possiamo notare l’injection del servizio $ionicPlatform che mette a disposizione
alcune funzioni di utilità, compreso il metodo ready() che fa da wrapper all’omonimo
metodo di Cordova per eseguire del codice quando tutta l’infrastruttura è stata caricata.
Come possiamo vedere, lo starter template blank presenta semplicemente una struttura di
base che non ha nessuna resa graﬁca. Gli altri due invece predispongono l’applicazione
con due dei layout graﬁci più comuni.
Tabs template
Il template tabs rappresenta un template con un layout a tab, come quello mostrato dalla
seguente immagine:
Figura 22: tab layout
Si tratta in pratica di un layout con una serie di icone in basso che determinano le view da
mostrare e una intestazione che consente la navigazione tra le view. Se diamo un’occhiata
al markup della pagina index.html vedremo che la parte rilevante, rispetto al template
blank, è quella mostrata di seguito:
42

Oltre ad includere un riferimento al file app.js, abbiamo un riferimento ai
filecontrollers.js e services.js che conterranno rispettivamente i controller e i
servizi Angular dell’applicazione.
Possiamo notare che il markup della pagina è costituito dalla direttiva ion-nav-bar che
definisce la barra di navigazione superiore, all’interno della quale viene visualizzato il
pulsante per la navigazione tra le view (direttiva ion-nav-back-button) e dalla direttiva
ion-nav-view che definisce la view all’interno della quale saranno caricati i template
Angular presenti nella cartella templates.
Ciascun file della cartella templates definisce il markup da visualizzare nella view
principale tramite le direttive ion-view e ion-content come nel seguente esempio:
Figura 24: ion-view
Lasciamo al lettore l’analisi del markup di ciascun template e del relativo codice Angular,
evidenziando invece il codice contenuto in app.js che mette in relazione la view
principale e i template:
43

Figure 25-26: file app.js
Notiamo in questo caso come, oltre all’inizializzazione tramite il metodo run() di
AngularJS, facciamo ricorso al metodo config() per definire il routing tra i template da
visualizzare nella view principale.
Come possiamo vedere, Ionic non utilizza il servizio di routing di AngularJS ngRoute ma
UI-Router, un modulo del progetto AngularUI.
UI-Router consente di definire il passaggio tra una schermata e l’altra di un’applicazione
come le transizioni di una macchina a stati. Quindi, la visualizzazione di un template
all’interno di una view rappresenta un particolare stato dell’applicazione. Inoltre, UI-
44

Router supporta view multiple nella stessa pagina e view annidate, caratteristiche non
supportate dal routing predefinito di Angular.
Tornando al nostro codice vediamo che ciascuno stato, cioè ciascuna schermata della
nostra applicazione, viene definito tramite il metodo state() del servizio
$stateProvider. Ogni stato ha un nome, rappresentato dalla stringa passata come
primo parametro, e da una serie di impostazioni rappresentati dall’oggetto passato come
secondo parametro.
Senza entrare nel dettaglio, le impostazioni di uno stato mappano essenzialmente un
URL ad un template ed al rispettivo controller.
La struttura delle view della nostra applicazione fa uso delle view annidate di UI-Router
con la view tab come view di più alto livello:
Figura 27: state in UI-Router
Essa disegna le icone in basso della nostra applicazione ed essendo definita come
astratta viene attivata quando una qualsiasi delle view contenute in essa viene
visualizzata.
Infine, in assenza di uno stato esplicito o valido, lo stato predefinito è individuato
dall’URL /tab/dash, corrispondente allo stato tab.dash:
Figura 28: stato predefinito
45

Sidemenu template
Lo starter template sidemenu indica un template con un menu a scomparsa, come nel
seguente esempio, ed è il template che sarà usato nella app oggetto di questa tesi:
Figura 29: sidemenu template
Come per il template tabs, anche in questo caso la parte rilevante del markup contenuto
nel ﬁle index.html è molto sintetica:
Esso si limita sostanzialmente ad indicare che il body della pagina è a disposizione per la
visualizzazione delle view dell’applicazione.
46

Nella cartella templates, al solito, abbiamo il markup che definisce i singoli template da
visualizzare all’interno della vista principale e in app.js abbiamo l’inizializzazione e la
mappatura tra view, template e controller:
Figure 31-32: file app.js
Sostanzialmente la struttura del codice non è molto diversa da quella del template tabs.
Per il momento ci basta sapere a grandi linee la struttura generale del codice dei template
predefiniti di Ionic, senza entrare nel dettaglio specifico del markup e del codice. Avremo
modo di approfondire più avanti quando descriveremo le principali direttive e servizi che ci
consentono di creare applicazioni rapidamente e con una interfaccia abbastanza simile a
quella delle applicazioni native.
47

Custom template
Oltre agli starter template predefiniti è possibile creare un’applicazione partendo da uno
starter template personalizzato. È sufficiente in questo caso specificare il percorso
assoluto o relativo sul file system della cartella contenente il template, come mostrato nel
seguente esempio:
$ ionic start myApp ../ionicTemplates/myTemplate
In alternativa è possibile indicare l’URL da cui è possibile scaricare il template. A questo
proposito segnaliamo un repository di starter template su CodePen da cui è possibile
scaricare quello desiderato.
5.1.7 Classi CSS per il layout della app
Introducendo Ionic abbiamo detto che esso può essere considerato il Bootstrap delle
applicazioni ibride. Infatti, allo stesso modo di Bootstrap, Ionic ci mette a disposizione una
serie di classi CSS predefinite per consentire una rapida definizione della grafica di
un’interfaccia.
Consideriamo ad esempio la definizione degli elementi di base di un layout, nel caso non
volessimo utilizzare quello fornito da uno starter template o volessimo semplicemente
modificarlo.
Un classico layout prevede:
• header;
• content area;
• footer.
48

Header
Possiamo deﬁnire un header, cioè un’area dell’interfaccia posizionata sulla parte alta
dello schermo, tramite un <div> con classi CSS bar bar-header, come nel seguente
esempio:
Figura 33: Ionic header code
Figura 34: ionic header screenshot
49

Figura 35: bar types in Ionic
I nomi light, positive, balanced, etc. delle classi CSS li ritroveremo per la definizione dei
colori degli altri elementi dell’interfaccia grafica e possono naturalmente essere ridefiniti a
nostro piacimento.
50

Footer
Per definire un footer, cioè un’area dell’interfaccia posizionata nella parte bassa dello
schermo, possiamo utilizzare la classe bar-footer con le analoghe impostazioni viste
per l’header:
Figura 36: Ionic footer code
Content area
L’area centrale compresa tra header e footer ospita i contenuti dell’applicazione. Ionic
consente di gestire quest’area come una view scrollabile tramite la direttiva ion-content:
Figura 37: ion-content
5.1.8 Classi CSS per i pulsanti
Possiamo controllare lo stile grafico di un pulsante specificando la classe button ed
opzionalmente uno dei diversi colori visti per header e footer.
51

Figura 38: Ionic buttons
Aggiungere icone ai bottoni
È possibile aggiungere un’icona ad un pulsante indicando speciﬁche classi che fanno
riferimento ad un set di icone fornito con il framework, ma è anche possibile utilizzare set
di icone alternative.
Il seguente esempio mostra come visualizzare un pulsante Home con l’icona della casa:
Figura 39: Ionic icons
52

5.1.9 Visualizzare le liste con Ionic
Ionic offre la possibilità di gestire e visualizzare liste di dati in modo flessibile e con
un’interessante impatto visivo. In questa sezione vediamo le modalità grafiche delle liste
mentre più avanti vedremo le modalità di gestione e di interazione.
Il modo più semplice di definire una lista Ionic consiste nell’utilizzare il classico tag HTML
<ul> specificando la classe CSS list:
Figura 40: Ionic list code
Figura 41: Ionic list screenshot
Tuttavia una lista può essere creata anche a partire da tag HTML di tipo diverso, come ad
esempio <div> e <a>, come mostrato nel seguente esempio:
53

Figura 42: Ionic list with anchor
Assegnare icone e testo agli elementi
È possibile arricchire l’impatto graﬁco di una lista assegnando uno o più icone ad un
elemento. Possiamo visualizzare ad esempio un’icona a sinistra dell’elemento di una lista
indicando la classe item-icon-left ed inserendo un elemento con l’icona speciﬁca. Ad
esempio, il seguente codice HTML inserisce l’icona di una busta a sinistra dell’elemento
della lista:
Figura 43: item-icon-left code
Figura 44: item-icon-left screenshot
54

5.1.10 Direttive Angular per Ionic: gestione dei contenuti
Ionic Framework utilizza AngularJS come framework JavaScript per definire gli elementi
dell’interfaccia grafica ed il loro funzionamento interno. La conoscenza delle direttive e dei
servizi Angular messi a disposizione da Ionic ci consente di sfruttare a pieno le potenzialità
del framework per realizzare applicazioni mobile ibride con un look and feel molto vicino a
quelle native.
In questa sezione esploriamo le principali direttive e servizi Angular implementate da Ionic.
ion-content
Come abbiamo avuto modo di vedere quando abbiamo dato un’occhiata al codice HTML
dei vari template Ionic, uno degli elementi di base di una view è la direttiva ion-content.
Questa direttiva delimita l’area di visualizzazione dei contenuti adattandola alle dimensioni
dello schermo corrente e consentendo la personalizzazione dello scrolling.
Il seguente markup definisce un’area il cui contenuto è scrollabile sia orizzontalmente che
verticalmente con la visualizzazione delle barre di scorrimento:
<ion-content direction="xy" locking="true" scrollbar-x="true"
scrollbar-y="true">
...
</ion-content>
Esaminiamo in dettaglio gli attributi principali della direttiva:
Figura 45: ion-content attributes
55

Altri attributi della direttiva consentono di eseguire del codice in corrispondenza dell’evento
di scrolling (on-scroll) e quando tale evento è completato (on-scroll-complete), cioè
quando l’utente ha terminato l’operazione di scrolling.
5.2 Preparazione dell’ambiente di sviluppo
Come base di partenza per la app si è scelto di usare un tutorial che si può trovare al
seguente indirizzo:
https://ccoenraets.github.io/ionic-tutorial/install-ionic.html
Vediamo ora i passi fondamentali per la creazione dei file necessari come base per la app.
5.2.1 Controllo della versione corrente di Ionic e Cordova
Dopo aver installato Ionic Framework e Cordova usando npm (Node Package Manager),
assicuriamoci di averli aggiornati all’ultima versione:
$ sudo npm install -g cordova ionic
$ sudo npm update -g cordova ionic
5.2.2 Il Node Server
In questo tutorial viene usato un Node Server per prendere dei dati da iniettare nella app.
Nella app finale non verrà usato tale Server poichè ci si fermerà prima dell’effettivo invio
dei dati a un database, ma in vista degli sviluppi futuri dell’applicazione si ritiene opportuno
aggiungere questa parte di tutorial che testa i servizi REST.
- Scaricare i file di supporto al tutorial:
git clone https://github.com/ccoenraets/ionic-tutorial
56

- Aprire un terminale e navigare fino alla cartella ionic-tutorial/server, e installare
le server dependencies:
$ npm install
- Far partire il server:
$ node server
- Testare i servizi REST, aprendo un browser e andando al seguente indirizzo:
http://localhost:5000/sessions
Sarà ritornata una lista di sessioni come documento JSON.
5.2.3 Creazione dell’applicazione valdol
In questo modulo si crea una nuova applicazione usando la Ionic CLI (Command Line
Interface), il template scelto è sidemenu.
- Aprire un terminale e navigare fino alla cartella ionic-tutorial
- Usando la Ionic CLI, creare un’app chiamata valdol basata sul template sidemenu:
$ ionic start valdol sidemenu
- Navigare fino alla cartella valdol:
$ cd valdol
- Far partire l’app nel browser:
$ ionic serve
57

- Nell’app, aprire il side menu (l’icona ad “hamburger” in alto a sinistra) e selezionare
Playlists. Selezionare una playlist nella lista e vedere i dettagli della vista (non molti
ancora a questo punto del tutorial). Nel prossimo passo saranno rimpiazzate le playlist
con una lista di sessioni prese dal server usando i REST services visti nel passo
precedente.
- Il login non è ovviamente ancora implementato, nella app oggetto di questa tesi verrà
implementato il login con Google, come descritto successivamente.
5.2.4 Creazione del session service
Come già accennato in precedenza, nella app valdol oggetto di questa tesi non useremo i
servizi REST, ma per eventuali sviluppi futuri si ritiene opportuno descrivere questo
passaggio ugualmente.
- Nella cartella conference/www/js creare un file chiamato services.js
- In services.js definire un modulo chiamato starter.services con una dipendenza
con ngResource:
angular.module(‘starter.services’, [‘ngResource’])
- In questo modulo, definire un service chiamato Session che usa l’ Angular resource
module per permettere l’accesso ai servizi REST all’endpoint specificato:
angular.module(‘starter.services’, [‘ngResource’])
.factory(‘Session’, function($resource) {
return $resource(‘http”//localhost:5000/
sessions/:sessionId’);
});
Di solito per l’uso tipicamente i parametri del server sono definiti esternamente in un config
module.
58

- Lo starter.service module appena creato ha una dipendenza con l’Angular
resource module che non è incluso di default. Aprire dunque index.html e
aggiungere uno script tag per includere angular-resource.min.js:
<script src=”lib/ionic/js/angular/angular-resource.min.js”></
script>
- Aggiungere uno script tag per includere il ﬁle services.js appena creato:
<script src=”js/services.js”></script>
5.2.5 Creazione dei controllers
Gli AngularJS controllers sono il collante tra le views e i services. Un controller spesso
invoca un metodo in un service per avere dei dati che poi salva in una variabile scope,
cosicchè possano essere visti dalle view. In questo passaggio saranno creati due
controllers: SessionsCtrl che si occupa di gestire la session list view e SessionCtrl
che si occupa dei dettagli di ogni singola sessione.
Dichiarare starter.services come una Dependency
- I due controller che saranno creati in questo passo usano il Session service deﬁnito nello
starter.service module. Per aggiungere starter.service come una dipendenza allo
starter.controller module:
1. Aprire conference/www/js/controllers.js
2. Aggiungere starter.service come una dipendenza per rendere il Session service
disponibile ai controllers:
angular.module(‘starter.controllers’, [‘starter.services’])
59

Implementare il Session List Controller
- In controllers.js, cancellare PlayListsCtrl
- Rimpiazzarlo con un controller chiamato SessionsCtrl che recupera la lista delle
conference sessions usando il Session service e le salva in una scope variable
chiamata sessions:
.controller(‘SessionsCtrl’, function($scope, Session) {
$scope.sessions = Session.query();
})
Implementare il Session Details Controller
- In controllers.js, cancellare PlayListCtrl
- Rimpiazzarlo con un controller chiamato SessionCtrl che recupera una speciﬁca
sessione usando il Session service e la salva in una scope variable chiamata session:
.controller(‘SessionCtrl’, function($scope, $stateParams, Session)
{
$scope.session = Session.get({sessionId:
$stateParams.sessionId});
});
60

5.2.6 Creazione dei templates
In questo passo saranno creati due templates: sessions.html per mostrare una lista di
sessioni, e session.html per mostrare i dettagli di una particolare sessione. Nella app
valdol deﬁnitiva poi questi template saranno sostituiti con la lista delle età del bambino e
con le rispettive viste concernenti le singole età.
Creazione del template sessions
- Nella cartella conference/www/templates, rinominare playlists.html con
sessions.html
- Implementare il template nel modo seguente:
<ion-view view-title=”Sessions”>
<ion-content>
<ion-list>
<ion-item ng-repeat=”session in sessions”
href=”(#/app/sessions/
{{session.id}}”>{{session.title}}</ion-item>
</ion-list>
<ion-content>
<ion-view>
Creazione del template session
- Rinominare playlist.html con session.html
- Implementare il template nel seguente modo:
61

Figura 46: session template
5.2.7 Implementazione del Routing
In questo passo saranno aggiunte due nuove routes (stati) all’applicazione:
app.sessions che carica la view delle sessions, e app.session che carica il dettaglio
della view session.
Deﬁnizione della app.sessions route
- Aprire app.js in valdol/www/js
- Cancellare lo stato app.playlists
- Rimpiazzarlo con uno stato app.sessions deﬁnito nel modo seguente:
62

Figura 47: app.sessions route
Definizione della app.session route
- Cancellare lo stato app.single
- Rimpiazzarlo con lo stato app.session definito come segue:
Figura 48: app.session route
Modifica della route di default
Modificare la route di default reindirizzandola alla lista delle sessions:
$urlRouterProvider.itherwise(‘/app/sessions’);
Modifica del side menu
- Aprire menu.html in valdol/www/templates
63

- Modiﬁcare l’item Playlists menu come segue:
<ion-item menu-close href=”#/app/sessions”>
Sessions
</ion-item>
Test dell’applicazione
Assicurarsi che ionic serve sia ancora in esecuzione.
- Se è ancora in esecuzione ma è stata chiusa la pagina nel browser, si ricarichi la app al
seguente url: http://localhost:8100
- Se non è più in esecuzione, aprire un terminale, navigare ﬁno alla cartella ionic-
tutorial e scrivere:
$ ionic serve
- Nella app valdol, aprire il side menu e selezionare Sessions, selezionare una session per
vederne i dettagli.
5.2.8 Building the Application
Per compilare l’applicazione per iOs e/o Android, è necessario avere installato iOs SDK e/
o Android SDK sulla propria macchina.
Building for iOS
- Aprire un terminale dalla cartella ionic-tutorial/valdol
64

- Aggiungere il supporto per la piattaforma iOs:
$ ionic platform add ios
- Build the project:
$ ionic build ios
- Aprire valdol/xcodeproj nella cartella valdol/platforms/ios
- In Xcode, eseguire l’applicazione su un dispositivo connesso alla propria macchina o sul
simulatore iOS.
Building for Android
- Assicurarsi che Android SDK e ant build tool siano installati sulla propria macchina. Per
testare la propria conﬁgurazione, si dovrebbe riuscire ad eseguire sia android che ant
dal terminale.
- Da terminale, assicurarsi di essere nella cartella ionic-tutorial/valdol
- Aggiungere il support per la piattaforma Android:
$ ionic platform add android
- Build the project:
$ ionic build android
Il progetto è stato compilato nella cartella valdol/platforms/android.
- Per compilare ed eseguire l’applicazione su un dispositivo Android connesso al tuo
computer tramite un cavo USB:
65

$ ionic run Android
- Per compilare ed eseguire l’applicazione sul simulatore (non Genymotion!):
$ ionic emulate android
5.3 Utilizzo di Genymotion
Figura 49: Genymotion
Come precedentemente anticipato, il simulatore per Android utilizzato da Ionic di default è
molto lento e non ottimale per effettuare test sulla app realizzata.
Genymotion è un’ottima alternativa veloce e facile da usare.
Ricordiamo che la versione gratuita ha delle limitazioni, ma per i test sulla prima parte
dell’app oggetto di questa tesi è sufﬁciente tale versione.
Quando invece sarà necessario il modulo wiﬁ (al momento del test del login con Google
che vedremo in seguito), tale simulatore non sarà più utilizzabile e sarà necessario
eseguire i test su un dispositivo reale.
66

Dopo aver scaricato e installato Genymotion dalla pagina ufﬁciale:
https://www.genymotion.com/
Si può eseguire il simulatore e si avrà davanti tale schermata:
Figura 50: Genymotion simulator
Si scelga un dispositivo da simulare e si prema “start”.
Per eseguire l’applicazione scelta, si navighi ﬁno alla cartella della app, nel nostro caso
valdol, e da terminale si scriva:
$ ionic run android
La macchina vedrà il dispositivo simulato da Genymotion come se fosse un dispositivo
reale collegato con cavo USB.
67

A questo punto apparirà sul monitor del computer il dispositivo scelto per la simulazione,
con in esecuzione la app scelta.
5.4 Creazione delle componenti principali di valdol
A partire dal progetto descritto nei punti precedenti, vengono create le componenti
principali della app valdol oggetto di questa tesi.
Vediamo nel dettaglio le modiﬁche apportate.
5.4.1 Pagina principale con il login
Ecco come appare la pagina principale della app valdol oggetto di questa tesi.
Figura 51: pagina principale della app
68

Questa app, come accennato in precedenza, si propone di essere una app “contenitore”
per i servizi dell’ospedale materno infantile “IRCCS Burlo Garofolo”.
La pagina principale è una pagina di Login, alla app si può accedere solamente essendo
in possesso di un account Google con cui entrare.
Una volta entrati si potrà accedere ai vari servizi offerti dalla app, in questa tesi ci si è
proposti di sviluppare un prototipo per il servizio di “Valutazione del dolore”, gli altri servizi
invece saranno oggetto di sviluppi futuri della app.
Vediamo come è stata implementata la procedura di Login, che ha procedure di
implementazione differenti per Android e per iOS, vediamo ora entrambe le modalità.
L’utente non si accorgerà della differenza, poichè la app risulta identica come esperienza
utente sia su Android che su iOS.
La guida seguita per implementare il login si trova al seguente link:
https://ionicthemes.com/tutorials/about/google-plus-login-with-ionic-framework#next-steps
5.4.2 Implementazione del Google Login per Android con Ionic
Premesse
In questa parte verrà illustrato come aggiungere un login nativo all’applicazione creata con
Ionic, in modo da ottenere un facile ed elegante modo per autenticare l’utente che accede
ai servizi dell’ospedale.
Perchè usare il Google Login?
- Il Login con Google aiuta gli utenti a loggarsi velocemente senza doversi ricordare
ulteriori username e password relativi all’applicazione.
- Dà il controllo all’utente delle informazioni che vuole condividere con l’app.
69

- Permette all’app di avere accesso alle informazioni del proﬁlo come ad esempio il nome
e la mail senza doverle chiedere più volte.
Google+ Authentication e Cordova Plugin
Nel nostro caso andremo ad usare un plugin di Cordova per interagire con la native
google sdk.
Questo plugin si chiama Google+ Cordova/PhoneGap Plugin e permette di effettuare il
login sia con Android che con iOS. Esso è stato sviluppato da Eddy Verbruggen.
Prerequisiti software necessari
- Una applicazione Ionic in cui integrare il login.
- L’ultima versione di Android SDK, inclusi gli SDK Tools components. La SDK è
disponibile dall’Android SDK Manager in Android Studio.
- Il Google+ Cordova/PhoneGap Plugin per interagire con le API native del dispositivo,
scaricabile a questo link:
https://github.com/EddyVerbruggen/cordova-plugin-googleplus.
Step1: Setup per comunicare con Google+
- Sono necessari i Google Play Services, che si possono scaricare tramite l’Android SDK
Manager, come in ﬁgura:
70

Figura 52: Android SDK manager
- Creazione di un file di configurazione: il file di configurazione contiene delle
informazioni sui servizi specifiche per la app. Per averlo, bisogna selezionare un progetto
esistente o crearne uno nuovo. Inoltre bisogna assegnare un package name alla app.
Dopo aver generato il file di configurazione, ci si deve anche procurare lo SHA-1 hash
del signing certificate.
- Per creare il file di configurazione si segua tale link:
https://developers.google.com/mobile/add?
platform=android&cntapi=signin&cntapp=Default%20Demo
%20App&cntpkg=com.google.samples.quickstart.signin&cnturl=https:%2F
%2Fdevelopers.google.com%2Fidentity%2Fsign-in%2Fandroid%2Fstart%3Fconfigured
%3Dtrue&cntlbl=Continue%20with%20Try%20Sign-In
che porterà alla pagina Google Developers Console, a cui accedere col proprio account
Google da sviluppatore.
71

Figura 53: Google Developers Console
Si continuerà poi abilitando il Google Sign-in e richiedendo il Conﬁguration File:
Figura 54: abilitazione Google Sign-In
72

Figura 55: generate configuration files
Nota: per ottenere il Configuration File verrà chiesto l’Android Package Name, che si trova
nel file config.xml nella cartella della app Ionic. Tale nome corrisponde alla Bundle Id
che viene richiesta nella configurazione per iOs, come vedremo successivamente.
Ecco il file config.xml, nella seconda riga “id” corrisponde all’ Android Package Name:
73

Figura 56: file config.xml
- Per abilitare il Google Sign-in serve lo SHA-1 del Signing Certificate, in modo da poter
creare un client OAuth2 e una API Key per la app.
74

- Come trovare lo SHA-1:
Figura 57: come trovare lo SHA1
75

Step 2: Installare il Plugin di Cordova per interagire con la Google+
Native SDK
Dopo aver finito tutte le configurazioni descritte nello step precedente, bisogna installare il
plugin nella app. Seguire i seguenti passi:
- Aprire un terminale ed andare nella cartella della app di Ionic, nel nostro caso valdol
- Eseguire i seguenti comandi cambiando la variabile REVERSE_CLIENT_ID con quella
presente nel file di configurazione scaricato ai punti precedenti:
$ cordova plugin add cordova-plugin-googleplus --variable
REVERSE_CLIENT_ID=myreversedclientid
$ cordova prepare
In questo modo GooglePlus.js è installato automaticamente, non c’è bisogno di cambiare
o aggiungere nulla nei nostri file html.
76

Step 3: Aggiungere le funzionalità di LOGIN/LOGOUT
LOGIN
Si crei un controller di questo tipo:
Figura 58: login controller
Collegato al bottone del Sign-in:
Figura 59: login button code
77

LOGOUT
Si crei un controller di questo tipo:
Figura 60: logout controlller
Collegato al bottone del Logout:
Figura 61: login button code
78

SERVICES
Sono inoltre necessari alcuni services per salvare e prelevare i dati dell’utente. In
questa app salviamo gli user data nello storage locale del dispositivo, ma si
potrebbero salvare anche in un database.
Figura 62: UserService code
5.4.3 Implementazione del Google Login per iOS con Ionic
Prima di poter integrare il Google Sign-in nella app, bisogna scaricare le dipendenze e
conﬁgurare il progetto XCode.
Prima di iniziare
- Installare XCode 6 o successivo (XCode 7 è consigliato)
- Installare CocoaPods
79

Set up delle CocoaPods dependencies
Google Sing-in usa CocoaPods per installare e gestire le dipendenze. Aprire un terminale
e navigare fino alla location del progetto XCode. Creare un Podfile per la app:
$ pod init
Aprire il Podfile creato e aggiungere il seguente:
$ pod ‘Google/SignIn’
Salvare il file ed eseguire:
$ pod install
Questo crea un file .xcworkspace per la app, che servirà successivamente.
Creazione del file di configurazione
Seguire il link qui sotto per creare un file di configurazione, tale file serve ad avere delle
informazioni specifiche sui servizi della app. Per crearlo bisogna selezionare un progetto
esistente oppure crearne uno nuovo. È anche necessario avere una Bundle Id per la
propria app. La Bundle Id si trova nel file config.xml nella cartella della app alla riga2,
come mostrato precedentemente per il Login con Android.
Link per creare il file di configurazione:
https://developers.google.com/mobile/add?platform=ios&cntapi=signin&cntapp=Default
%20Demo%20App&cntpkg=com.google.samples.quickstart.SignInExample&cnturl=https:
%2F%2Fdevelopers.google.com%2Fidentity%2Fsign-in%2Fios%2Fstart%3Fconfigured
80

Figura 63: Google Developers Console
Bundle Id nel file config.xml:
Figura 64: file config.xml
81

Una volta scaricato il ﬁle di conﬁgurazione, esso contiene una REVERSE_CLIENT_ID,
che servirà durante l’installazione del Plugin.
Da questo punto in poi si prosegue con l’installazione del Plugin e con l’implementazione
dei controllers e dei services come descritto in precedenza per il Login con Android.
Se lo si è già fatto con Android, non servirà farlo due volte.
Una volta implementato il Google Login, la schermata che si vedrà apparire cliccando sul
bottone “Sign In with Google” sarà la seguente:
Figura 65: schermata di login con Google
82

5.4.4 Test del Login su un dispositivo reale
Sì è provato ad effettuare dei test con il simulatore Genymotion, purtroppo essi non hanno
avuto successo poichè la versione free di Genymotion non contiene il modulo wiﬁ,
fondamentale per collegarsi a Google ed effettuare il Login.
Si è deciso così di effettuare i test su alcuni dispositivi reali collegati tramite porta USB al
computer.
Set up del dispositivo per testare una app
Non basta collegare il dispositivo scelto al computer ed eseguire la app per testare la
stessa, bisogna prima mettere il dispositivo in modalità sviluppatore, altrimenti la
direttiva
$ ion run android
non vedrà il dispositivo collegato e cercherà di eseguire la app sul simulatore.
Per mettere il proprio dispositivo in modalità sviluppatore bisogna seguire questi passi:
- Andare su impostazioni > info telefono
- Premere 7 volte sul numero di serie del telefono:
83

Figura 66: numero di serie del telefono
- A questo punto si attiveranno le “opzioni sviluppatore” nella schermata precedente:
Figura 67: opzioni sviluppatore
- In queste “opzioni sviluppatore” attivare la funzione “debug USB”:
84

Figura 68: debug USB
- Attaccare il dispositivo al computer con un cavo USB
- Disattivare Genymotion
- Dalla cartella valdol eseguire:
$ ionic run android
- Accettare la modalità debug sul dispositivo
- Ora la app viene eseguita sul dispositivo scelto!
85

5.4.5 Implementazione del tasto Logout e bug del “CancelText”
Si riveda il codice del controller che deﬁnisce la funzione chiamata dal tasto “Logout”:
Figura 69: logout controller
La funzione showLogOutMenu alla riga 124, viene chiamata quando l’utente seleziona il
tasto “Logout”, e fa apparire un menù a tendina dal quale l’utente può scegliere se
effettuare davvero il Logout oppure può annullare l’azione.
Il risultato è quello nella seguente ﬁgura:
86

Figura 70: logout screenshot
Come si vede dalla riga 125 del codice, viene usata una feature di Ionic chiamata
$ionicActionSheet, di cui riportiamo in seguito la documentazione, che si può trovare
al seguente link: http://ionicframework.com/docs/api/service/$ionicActionSheet/
87

Figura 71: Ionic Action Sheet documentation
Si è trovato un problema per la piattaforma Android nell’utilizzo del cancelText, ovvero il
button “cancel” non veniva visualizzato anche se nel codice era previsto ci fosse.
Si è scoperto che il problema stava nel foglio di stile, ovvero _action-sheet.scss
aveva come regola:
.platform-android .action-sheet-cancel {
display: none;
}
Quindi ovviamente il bottone non veniva visualizzato.
Per ovviare a questo problema si è aggiunta tale regola nel ﬁle style.css:
.platform-android .action-sheet .action-sheet-title, .platform-
android .action-sheet .button {
text-align: center;
border-color: transparent;
88

font-size: 16px;
color: inherit;
}
In questo modo il bottone “cancel” è finalmente visualizzabile.
5.4.6 Utilizzo di SASS per il colore tema dell’app
Questo capito descrive come fare il set up per SASS per un progetto Ionic Framework.
Verrà descritto poi come fare l’ovverride delle variabili in Ionic per personalizzare ad
esempio i colori a piacere.
Con i normali CSS è necessario scorrere centinaia di righe per isolare il colore che si
vuole cambiare e inoltre si deve sperare di averli cambiati tutti. Con SASS invece si può
cambiare una sola variabile (nel nostro caso sarà quella chiamata $positive) in un file
preposto.
Si inizi con il setup di SASS, ovvero dalla cartella della app eseguire:
$ ionic setup sass
$ sudo npm install -g gulp
Ora abbiamo le dipendenze di SASS installate.
Si apra il file ionic.app.scss che si trova nella stessa cartella della app.
Di default, Ionic presenta queste nove variabili SASS ognuna associata a dei colori di
default:
Figura 72: variabili SASS in Ionic
89

Con queste variabili, è possibile ridisegnare completamente una app semplicemente
cambiando i colori di default. Nella app oggetto di questa tesi è stata cambiata la variabile
$positive nel modo seguente:
$positive: #08C3A7 !default;
Tutti gli Ionic Item contrassegnati come “positive” adesso avranno il colore scelto in questo
ﬁle.
Vediamo ad esempio il codice della schermata principale che si raggiunge dopo il login,
ovvero la scelta del servizio che si vuole utilizzare:
Figura 73: uso di item-positive
Ed il risultato nella app:
90

Figura 74: item-positive screenshot
Si veda come guida di riferimento quella al seguente link:
http://learn.ionicframework.com/formulas/working-with-sass/.
5.4.7 Utilizzo di UI-Router per navigare tra le viste
Come già accennato in precedenza, per navigare tra le viste si è utilizzato UI-Router.
Il primo passo per l’utilizzo di questo modulo è assegnare ad ogni vista uno stato e un
template, come nel codice seguente, preso dalla app oggetto di questa tesi:
91

Figura 75: ﬁle app.js
Dopo aver assegnato lo stato ed il rispettivo controller ad ogni vista, si può raggiungere
una vista con l’istruzione $state.go(), come nel seguente codice del controller del
bottone “Login”, che dalla pagina di login, dopo aver effettuato l’autenticazione, porta alla
pagina principale dell’app di scelta del servizio:
92

Figura 76: login controller
93

5.4.8 Scelta dell’età del bambino
Una volta selezionato il servizio “Valutazione del dolore”, si visualizza tale schermata:
Figura 77: scelta dell’età del bambino
Selezionando l’età del bambino scelta avremo un elenco di select tra cui selezionare
successivamente i sintomi che presenta il bambino. Nel caso di bambini troppo piccoli o
non collaboranti la procedura di selezione dovrà essere effettuata dal genitore o
dall’operatore medico se ci si trova in ospedale:
94

Figura 78: schermata di selezione
Cliccando su “seleziona” ci si trova davanti alle varie opzioni sui sintomi dell’infante:
Figura 79: selezione sintomi del bambino
95

Una volta selezionati tutti i dati riguardanti i sintomi del bambino, si dovrà premere il
bottone “invia dato”, e il dato sarà inviato al database.
In questa tesi non ci si occupa dell’invio del dato al database, che sarà oggetto degli
sviluppi futuri del progetto.
Figura 80: invio del dato
96

Nel caso dei bambini da 3 a 8 anni, la app si propone di far usare al bambino stesso il
dispositivo, in modo che indichi da solo il suo stato di dolore:
Figura 81: bambini 3-8 anni
97

6. Conclusioni
Lo sviluppo del prototipo di una app “contenitore” per l’Ospedale Infantile Burlo Garofolo si
è concluso con successo e tutti gli obiettivi preﬁssati sono stati raggiunti.
La parte della app relativa alla “Valutazione del dolore” è pronta per essere collegata ad un
database e messa in funzione quando sarà ritenuto opportuno dalla struttura stessa.
Si è ora quindi in possesso di una base per aggiungere tutte le eventuali funzionalità che
saranno descritte nel prossimo capitolo.
7. Sviluppi futuri
La app oggetto di questa tesi si propone come un “contenitore” di servizi per l’ospedale
materno-infantile IRCCS Burlo Garofolo, in questo contesto è stato sviluppato solo uno dei
servizi che saranno offerti da tale app, appunto la “Valutazione del dolore”.
Il primo sviluppo futuro e più immediato sarà il collegamento di tale app a un database
sicuro per il trattamento dei dati sensibili del paziente, argomento molto importante e
fondamentale per un’applicazione legata ad un ente pubblico come un’ospedale, che tratta
dati personali strettamente riservati.
Successivamente sarà in programma un’espansione della app, con l’aggiunta di altri
servizi come ad esempio:
- Il diario del diabetico
- Il diario della gravidanza
- L’alfabeto delle malattie
- Servizio di prenotazione visite
- Mezzi per raggiungere l’ospedale
- Alloggi convenzionati per genitori dei pazienti
98

- Monitoraggio ﬁla del pronto soccorso
- Notiﬁche per notizie importanti
Insomma il progetto è molto grande e ricco di sviluppi futuri, che si spera di poter riuscire a
raggiungere in un tempo breve in modo di fornire al più presto all’utente uno strumento
utile, facile e immediato per la continuità della cura dall’ospedale a casa e viceversa, in un
contatto sempre più stretto tra struttura e paziente.
99

8. Bibliografia
Tutti i link sono da riferirsi aggiornati al 15 febbraio 2016.
[1] Ionic Framework documentation: http://ionicframework.com/docs/
[2] AngularJS documentation: https://angularjs.org/
[3] Apache Cordova documentation: https://cordova.apache.org/
[4] SASS documentation: http://sass-lang.com/
[5] Genymotion documentation: https://www.genymotion.com/
[6] NodeJS documentation: https://nodejs.org/en/
[7] HTML.IT guide for Ionic Framework: http://www.html.it/guide/ionic-framework-la-guida/
[8] Ionic tutorial for app development: https://ccoenraets.github.io/ionic-tutorial/install-
ionic.html
[9] Ionic tutorial for Google Login implementation: https://ionicthemes.com/tutorials/about/
google-plus-login-with-ionic-framework#next-steps
[10] Google+ Cordova Plugin: https://github.com/EddyVerbruggen/cordova-plugin-
googleplus.
[11] Google developers guide for configuration file: https://developers.google.com/mobile/
add?platform=android&cntapi=signin&cntapp=Default%20Demo
%20App&cntpkg=com.google.samples.quickstart.signin&cnturl=https:%2F
%2Fdevelopers.google.com%2Fidentity%2Fsign-in%2Fandroid%2Fstart%3Fconfigured
100

[12] Ionic guide for SASS setup: http://learn.ionicframework.com/formulas/working-with-
sass/.
101

9. Ringraziamenti
Ringrazio il mio relatore Fulvio Sbroiavacca per avermi sostenuto per la seconda volta
nella mia tesi di laurea, dopo la positivissima esperienza alla laurea triennale. Ringrazio
Michele Bava per il suo importantissimo contributo nella realizzazione di questa tesi,
insieme al direttore generale del’IRCCS Materno Infantile Burlo Garofolo Gianluigi
Scannapieco, Elisabetta Danielli e Riccardo Zangrando. Ringrazio Daniel Zotti per avermi
inconsciamente mandato nella direzione giusta per la realizzazione di tutto ciò e per il suo
prezioso aiuto durante il tirocinio. Inﬁne, dopo tutti questi anni di studio, ringrazio la mia
famiglia per avermi sostenuto sempre in tutto e per tutto, mamma Lucia, papà Roberto e
mio fratello Raffaele, anche per i suoi consigli fondamentali durante il mio lavoro di tesi.
Ringrazio i miei nonni, dovunque si trovino in questo momento, per tutto ciò che mi hanno
dato e insegnato, e che porterò sempre con me. Ringrazio Pinoz per la persona speciale
che è, per essermi stato vicino e avermi dato coraggio quando non ne avevo più, in tutti
questi anni. Ringrazio Ambra per essere una persona meravigliosa e sempre vicina a me.
Ringrazio anche Zinco per spuntare fuori sempre nei momenti giusti, sempre col sorriso.
Ringrazio tutti i miei compagni di corso per aver studiato assieme a me con passione e a
volte compassione, Alessandra, Simone, Paolo, e i miei più vecchi compagni con cui ho
iniziato questa avventura, anche se non li sento da anni, ma mi sono rimasti e saranno
sempre nel mio cuore, per tutte le avventure passate assieme, per il nostro entusiasmo e i
nostri destini legati, David, Diego, Federica. Ringrazio le mie amiche di sempre, a volte
vicine, a volte lontane, loro sanno chi sono. Ringrazio inﬁne anche chi ho conosciuto da
pochissimo, ma che in qualche modo hanno reso questo mio ultimo mese di scrittura della
tesi più piacevole, in un’armonia tutta loro, e poi si sa che un po’ sono veggente, e non
avrò altre tesi per ringraziarli in futuro (o no?) Martina, Dok, Davide.
Abbandona le grandi strade, prendi i sentieri.
(Pitagora)
102

Tesi applicazione valutazione del dolore per ospedale infantile roberta marsetti

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Similar to Tesi applicazione valutazione del dolore per ospedale infantile roberta marsetti

Similar to Tesi applicazione valutazione del dolore per ospedale infantile roberta marsetti (20)

Tesi applicazione valutazione del dolore per ospedale infantile roberta marsetti