Università degli Studi di Padova Dipartimento di Matematica Corso di Laurea in Informatica Sviluppo di applicazioni native per iOS in JavaScript Tesi di laurea triennale Relatore Prof. Claudio Enrico Palazzi Laureando Giacomo Manzoli Anno Accademico 2014-2015 Sommario Il presente documento descrive il lavoro svolto durante il periodo di stage, della durata di circa trecento ore, dal laureando Giacomo Manzoli presso l’azienda WARDA S.r.l.. L’obiettivo di tale attività di stage è l’analisi dei vari framework disponibili per lo sviluppo di applicazioni native utilizzando il linguaggio JavaScript, al fine di creare un’applicazione nativa per iOS simile alla gallery sviluppata dall’azienda. iii Ringraziamenti Innanzitutto, vorrei ringraziare il relatore della mia tesi, il Prof. Claudio Enrico Palazzi, per l’aiuto e il sostegno fornitomi durante la stesura del lavoro. Un ringraziamento speciale va ad Alberto e in generale a tutto il team di WARDA S.r.l., che mi hanno permesso di vivere questa bella esperienza in un settore dell’informatica così interessante. Desidero inoltre ringraziare con affetto i miei genitori e i miei zii che mi hanno aiutato e sostenuto durante il mio percorso di studi. Infine, non posso non ringraziare tutti gli amici e compagni di corso che mi hanno sopportato per tutto questo tempo, sperando che continuino a farlo, perché senza di loro non sarei riuscito a raggiungere questo obiettivo. Padova, Ottobre 2015 Giacomo Manzoli v Indice 1 Il contesto aziendale 1 1.1 L’azienda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.1.1 WARDA - Work on what you see . . . . . . . . . . . . . . . . . 1 1.2 Il progetto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 Framework analizzati 3 2.1 Considerazioni generali . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2.1.1 Differenze con le applicazioni ibride . . . . . . . . . . . . . . . 4 2.2 Tabris.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2.2.1 Come funziona . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.2.2 Pregi e difetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.2.3 Prototipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.3 NativeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.3.1 Come funziona . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.3.2 Pregi e difetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.3.3 Prototipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.4 React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 2.4.1 Come funziona . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 2.4.2 Pregi e difetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 2.4.3 Prototipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 2.5 Confronto finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 2.6 Framework scelto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 3 Strumenti e tecnologie legate a React Native 13 3.1 React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 3.1.1 La sintassi JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 3.1.2 Oggetti JavaScript per la definizione dello stile . . . . . . . . . 15 3.1.3 JavaScript ES6 e ES7 . . . . . . . . . . . . . . . . . . . . . . . 15 3.1.4 Animazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 3.1.5 Componenti esterni . . . . . . . . . . . . . . . . . . . . . . . . 16 3.1.6 Creazione di un progetto . . . . . . . . . . . . . . . . . . . . . 17 3.1.7 Packager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 3.1.8 Developer Menu . . . . . . . . . . . . . . . . . . . . . . . . . . 17 3.2 Flux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 3.2.1 Sequenza delle operazioni . . . . . . . . . . . . . . . . . . . . . 19 3.2.2 Differenze con MVC . . . . . . . . . . . . . . . . . . . . . . . . 20 3.2.3 flux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.3 Atom e Nuclide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 vii viii Indice 3.4 Xcode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.5 Google Chrome Dev Tools . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.6 Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 3.7 Jest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 4 Analisi dei Requisiti 25 4.1 Applicazione attuale . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 4.1.1 Pagina di visualizzazione della gallery . . . . . . . . . . . . . . 25 4.1.2 Pagina di dettaglio di un asset . . . . . . . . . . . . . . . . . . 29 4.2 Requisiti individuati . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 4.2.1 Requisiti Funzionali . . . . . . . . . . . . . . . . . . . . . . . . 30 4.2.2 Requisiti di Vincolo . . . . . . . . . . . . . . . . . . . . . . . . 32 4.3 Riepilogo requisiti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 5 Progettazione 35 5.1 API REST di WARDA . . . . . . . . . . . . . . . . . . . . . . . . . . 35 5.1.1 Autenticazione . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 5.1.2 Gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 5.2 Architettura generale dell’applicazione . . . . . . . . . . . . . . . . . . 39 5.2.1 Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 5.2.2 Utils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 5.2.3 Stores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 5.2.4 Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 5.2.5 Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 5.2.6 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 5.2.7 Navigazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 6 Realizzazione 49 6.1 Dal prototipo alla gallery . . . . . . . . . . . . . . . . . . . . . . . . . 49 6.2 Sistema di navigazione . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 6.3 Sistema dei filtri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 6.4 Visualizzazione di dettaglio . . . . . . . . . . . . . . . . . . . . . . . . 53 6.5 Animazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 6.6 Gestione degli errori . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 7 Conclusioni 59 7.1 Valutazione del risultato e di React Native . . . . . . . . . . . . . . . . 59 7.1.1 Requisiti soddisfatti . . . . . . . . . . . . . . . . . . . . . . . . 60 7.2 Aspetti critici e possibili estensioni . . . . . . . . . . . . . . . . . . . . 60 7.3 Conoscenze acquisite . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Glossario 63 Riferimenti 65 Elenco delle figure 1.1 Logo di WARDA S.r.l. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2.1 Screenshot del prototipo realizzato con Tabris.js . . . . . . . . . . . . 6 2.2 Schema rappresentante il runtime di NativeScript . . . . . . . . . . . . 7 2.3 Architettura di NativeScript . . . . . . . . . . . . . . . . . . . . . . . . 8 2.4 Screenshot del prototipo realizzato con NativeScript . . . . . . . . . . 9 2.5 Screenshot del prototipo realizzato con React Native . . . . . . . . . . 11 3.1 Developer menu di React Native . . . . . . . . . . . . . . . . . . . . . 18 3.2 Diagramma del pattern Flux . . . . . . . . . . . . . . . . . . . . . . . 18 3.3 Funzionamento del pattern Flux . . . . . . . . . . . . . . . . . . . . . 19 3.4 Tools di debug di Xcode . . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.5 Debug di un’applicazione con Google Chrome . . . . . . . . . . . . . . 22 4.1 Screenshot della gallery dell’applicazione attuale . . . . . . . . . . . . 26 4.2 Screenshot della lista dei nodi dell’applicazione attuale . . . . . . . . . 27 4.3 Dettaglio della griglia degli assets dell’applicazione attuale . . . . . . . 27 4.4 Popover che mostra i dettagli di un asset . . . . . . . . . . . . . . . . . 28 4.5 Screenshot della lista dei filtri dell’applicazione attuale . . . . . . . . . 28 4.6 Pagina di dettaglio di un asset . . . . . . . . . . . . . . . . . . . . . . 29 4.7 Pagina di dettaglio di un asset con i dettagli visibili . . . . . . . . . . 30 4.8 Requisiti per importanza . . . . . . . . . . . . . . . . . . . . . . . . . . 33 4.9 Requisiti per tipologia . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 6.1 Immagine all’inzio dello swipe . . . . . . . . . . . . . . . . . . . . . . . 55 6.2 Immagine durante lo swipe . . . . . . . . . . . . . . . . . . . . . . . . 55 ix 7.1 Screenshot dell’applicazione realizzata . . . . . . . . . . . . . . . . . . 59 Elenco delle tabelle 2.1 Tabella comparativa dei framework analizzati . . . . . . . . . . . . . . 12 4.1 Requisiti Funzionali . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 4.2 Requisiti di Vincolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 4.3 Numero di requisiti per importanza . . . . . . . . . . . . . . . . . . . . 33 4.4 Numero di requisiti per tipologia . . . . . . . . . . . . . . . . . . . . . 33 Elenco dei frammenti di codice 2.1 Esempio di creazione di un oggetto nativo con NativeScript . . . . . . 7 3.1 Esempio della sintassi JSX di React Native . . . . . . . . . . . . . . . 14 3.2 Esempio della definizione dello stile di un componente di React Native 15 3.3 Utilizzo di LayoutAnimation . . . . . . . . . . . . . . . . . . . . . . . 16 3.4 Esempio della notazione di Flow . . . . . . . . . . . . . . . . . . . . . 23 3.5 Esempio di mock creato da Jest . . . . . . . . . . . . . . . . . . . . . . 24 5.1 JSON Schema di GET /g/{galleryCode}/nodi/{args} . . . . . . . . . 36 5.2 JSON Schema di GET /g/galleryCode/contents/args . . . . . . . . . . 37 5.3 Esempio dell’array da utilizzare per applicare dei filtri alla risorsa /g/galleryCode/contents/args . . . . . . . . . . . . . . . . . . . . . . . 38 5.4 JSON Schema di GET /g/galleryCode/filtro/filtro/args . . . . . . . . 38 5.5 JSON Schema di GET /g/galleryCode/filtro/filtro/args . . . . . . . . 39 5.6 Action - load nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 5.7 Action - load assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 5.8 Action - load more assets . . . . . . . . . . . . . . . . . . . . . . . . . 42 5.9 Action - clear assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 5.10 Action - load asset details . . . . . . . . . . . . . . . . . . . . . . . . . 43 5.11 Action - load filter items . . . . . . . . . . . . . . . . . . . . . . . . . . 44 5.12 Action - apply filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 5.13 Action - remove filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 x