Università degli Studi di Trieste

Dipartimento di Ingegneria e ArchitetturaCorso 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

2

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 deficit 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 configurazione 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! 985

8. Bibliografia ! 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 definire 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 modificato 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 deficit 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 deficit cognitivo grave

Figura 6: tabella deficit 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 significativo 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 identificativo 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 utilizzati4.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 grafica, 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 ufficiale 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 modificata 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 significa 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 ufficiale 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 fine 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 ufficiale 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 ufficiale 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 grafico 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 grafica. Gli altri due invece predispongono l’applicazione con due dei layout grafici 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

Figura 23: file index.html

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 file index.html è molto sintetica:

Figura 30: file index.html

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 definire 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 specifiche 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 grafico 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 specifica. 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 file 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 definito 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 specifica

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

Definizione della app.sessions route

- Aprire app.js in valdol/www/js

- Cancellare lo stato app.playlists

- Rimpiazzarlo con uno stato app.sessions definito 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/templates63

- Modificare 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 fino 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 configurazione, 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 è sufficiente tale versione.Quando invece sarà necessario il modulo wifi (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 ufficiale:

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 fino 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 modifiche 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 profilo 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 figura:

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 Configuration 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 configurare 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%3Dtrue&cntlbl=Continue%20with%20Try%20Sign-In

80

Figura 63: Google Developers Console

Bundle Id nel file config.xml:

Figura 64: file config.xml

81

Una volta scaricato il file di configurazione, 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 wifi, 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 definisce 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 figura:

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 file 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 file.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: file 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. ConclusioniLo sviluppo del prototipo di una app “contenitore” per l’Ospedale Infantile Burlo Garofolo si è concluso con successo e tutti gli obiettivi prefissati 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 futuriLa 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 fila del pronto soccorso

- Notifiche 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. BibliografiaTutti 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%3Dtrue&cntlbl=Continue%20with%20Try%20Sign-In

100

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

101

9. RingraziamentiRingrazio 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. Infine, 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 infine 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