Framework di seconda generazione per la creazione di app ibride: Ionic

Transcript

1 Università degli Studi Mediterranea di Reggio Calabria Dipartimento di Ingegneria dell Informazione, delle Infrastrutture e dell Energia Sostenibile Corso di Laurea in Ingegneria dell Informazione Tesi di Laurea Framework di seconda generazione per la creazione di app ibride: Ionic Relatore Prof. Domenico Ursino Candidato Giuseppe Sofo Anno Accademico

2

3 Solo quelli che sono così folli da pensare di cambiare il mondo lo cambiano davvero. [Alber9 Einstein]

4

5 Indice Introduzione 1 Capitolo 1 Le app ibride App: definizione e classificazione App native Web app App ibride Vantaggi e limiti delle app ibride Tipologie di app a confronto Capitolo 2 La prima e la seconda generazione di framework per app ibride Framework e loro classificazione Pattern Adapter Framework di prima generazione: Cordova e Titanium Apache Cordova Titanium Differenze e punti di unione Framework di seconda generazione Capitolo 3 Uno sguardo ai framework di seconda generazione Peculiarità dei framework di seconda generazione Il Document Object Model (DOM) Gestione degli eventi Ajax Framework di seconda generazione: jquery Mobile e SenchaTouch jquery Mobile Sencha Touch Ionic: una soluzione di ultima generazione Capitolo 4 Ionic I

6 4.1 Approccio Ibrido Stack di tecnologie usato nel framework Ionic Ionic: framework di interfaccia utente AngularJS: framework di applicazione web Capitolo 5 Esempio di utilizzo di Ionic Contesto della simulazione Struttura del progetto Index.html App.js Style.css Screenshot dell applicazione Capitolo 6 Discussione Considerazioni post implementative Spirito vincente di Ionic Ionic Italia Conclusioni e sviluppi futuri Ringraziamenti Bibliografia. 79 II

7 III

8 Lista delle Figure Figura Skill set delle piattaforme attuali... 6 Figura Esempi di web app... 8 Figura Confronto tra le architetture delle app native, web app e app ibride Figura Grafico di riepilogo delle tre tecniche di sviluppo delle app mobile Figura Scenario dei principali framework multi-piattaforma Figura Diagramma delle classi del pattern Adapter Figura Architettura di un'applicazione ibrida realizzata con Cordova Figura Architettura delle app sviluppate con Titanium per le piattaforme ios e Android Figura File dom.html Figura Rappresentazione ad albero del file dom.html Figura Struttura di una pagina HTML che utilizza jquery Mobile (parte 1) Figura Struttura di una pagina HTML che utilizza jquery Mobile (parte 2) Figura Eventi jquery Mobile più utilizzati per realizzare un'applicazione mobile Figura Esempi di selettori utilizzati in jquery Mobile (parte 1) Figura Esempi di selettori utilizzati in jquery Mobile (parte 2) Figura Esempi di manipolazione degli elementi in jquery Mobile (parte1) Figura Esempi di manipolazione degli elementi in jquery Mobile (parte 2) Figura Struttura di una pagina HTML che utilizza Sencha Touch Figura Esempio di interrogazione effettuata su 41 Figura Stack di tecnologie utilizzato con il framework Ionic Figura Panoramica di come Ionic, Angular e Cordova lavorino in parallelo in un'applicazione ibrida Figura Codice riguardante la definizione di un header Figura Simulazione dell'header di una interfaccia grafica Figura Codice utilizzato per l'inserimento di due button all'interno dell'header Figura Output del codice di Figura Figura Codice utilizzato per l'inserimento di un sub-header inferiormente ad un header Figura Output del codice di Figura Figura Implementazione del footer di un'applicazione Figura Output relativo al codice di Figura Figura Meccanismo di two-way data binding Figura File index.html Figura File app.js Figura Output del file index.html Figura File view1.js Figura File view1.html Figura Output del file view1.html IV

9 Figura terzotest.html Figura terzotest.js Figura Output del file terzotest.html Figura Output del file terzotest.html Figura Struttura del progetto "Simulazione" Figura Sezione head del file index.html Figura Prima parte del body del file index.html Figura Seconda parte del body del file index.html Figura File app.js Figura File style.css Figura Screenshot in fase di pre e post scatto della foto Figura Screenshot relativi al post Figura Grafico Google Trends relativo all'interesse mostrato nei confronti di Ionic Figura Icone di applicazioni realizzate con Ionic V

10 Lista delle tabelle Tabella Tabella di riepilogo degli approcci allo sviluppo mobile Tabella Lista delle classi per definire il colore dell'header VI

11 VII

12 VIII

13 Introduzione L evoluzione vertiginosa delle tecnologie che c è stata negli ultimi anni, ed in particolare la progressiva riduzione delle dimensioni dei componenti hardware, insieme all aumento delle capacità di calcolo e delle possibilità di interconnessione, ha determinato dapprima la diffusione dei pc portatili, e, successivamente, quella di smartphone e tablet. Contestualmente, quindi, è sorta l era del mobile computing, ed è iniziata l evoluzione degli approcci alla programmazione delle applicazioni mobile. Il mobile computing consiste nell interazione uomo-computer in mobilità, e comprende la comunicazione mobile, l hardware mobile e il software mobile. Oggi i dispositivi mobili sono diventati pervasivi; infatti, vi è quasi un dispositivo per ogni persona, e il desiderio sempre più crescente, da parte di utenti e aziende, di sfruttarne al meglio le potenzialità, ha conferito notevole importanza al mobile computing. Attualmente è possibile classificare gli approcci alla programmazione delle applicazioni mobili in tre categorie principali, ovvero: nativi; web-based; ibridi. Gli approcci nativi sono quelli classici, sorti contestualmente allo sviluppo delle piattaforme mobili che, quindi, sfruttano gli strumenti e i linguaggi specificamente messi a disposizione dagli sviluppatori della particolare piattaforma. Tali approcci permettono di sviluppare app perfettamente integrate con la piattaforma sottostante, con la quale interagiscono direttamente attraverso chiamate di sistema, sfruttando al meglio tutte le funzionalità hardware e software del dispositivo, e risultando, così, molto performanti. Il principale svantaggio di tale approccio è la mancanza di portabilità delle app risultanti. Infatti, questa caratteristica vincola gli sviluppatori a realizzare un app per ogni piattaforma mobile per raggiungere le varie categorie di utenti; ciò implica la difficoltà di dover conoscere tutto l insieme vasto ed eterogeneo di strumenti e linguaggi di sviluppo supportati. Gli approcci web-based sono sorti dall evoluzione delle tecnologie web, in particolare HTML5, CSS3 e Javascript sulle quali si basano per astrarre dalle piattaforme mobili sottostanti. Tali approcci consentono di sviluppare app molto portatili, eseguite in parte all interno del browser e in parte su server remoti, alleggerendo il carico computazionale del dispositivo che deve solo mostrare il risultato. Proprio per la loro architettura, le loro performance sono vincolate da quelle del motore di rendering del browser e le funzionalità del dispositivo che si possono sfruttare sono strettamente dipendenti dal grado di evoluzione delle tecnologie web. Gli approcci ibridi sono nati dalla felice combinazione dei due precedenti, per sfruttare al meglio le potenzialità di entrambi, e si concretizzano attraverso lo sviluppo dell essenza dell app tramite le tecnologie web, e di un involucro in linguaggio nativo, per integrarla alla piattaforma. Anche questi approcci permettono di realizzare app molto portatili, che risultano flessibili e in grado di sfruttare

14 molte funzionalità del dispositivo, oltre ad azzerare i tempi di latenza dovuti al caricamento delle pagine, dal momento che l applicazione è installata sul dispositivo. Vantaggi e svantaggi di questi approcci dipendono molto dall architettura e dalla bontà dello strumento utilizzato per lo sviluppo. Data la necessità sempre più crescente di raggiungere gli utenti di piattaforme differenti a minori costi di sviluppo, attualmente esiste una infinità di framework che permettono di realizzare, in modalità più o meno simili, lo sviluppo multi-piattaforma tramite la stesura di un unico codice. In particolar modo, è stato possibile identificare due categorie di framework: wrapper; librerie. La categoria dei wrapper raggruppa tutti i framework di prima generazione che consentono, principalmente, lo sviluppo di app ibride, offrendo agli sviluppatori una certa gamma di funzionalità hardware e software dei dispositivi supportati, come fotocamera, GPS, accelerometro, contatti. Questi strumenti automatizzano la creazione di un involucro nativo, un package nel formato della determinata piattaforma, che racchiude l app creata sfruttando le tecnologie del web. In tal modo, si garantisce all app stessa la capacità di comunicare con il dispositivo sottostante sul quale verrà installata ed eseguita. I framework di seconda generazione consistono principalmente in librerie. Si tratta, cioè, di framework che offrono, tramite i linguaggi del web, componenti per riprodurre e simulare i comportamenti tipici delle interfacce native, in termini di grafica e interattività delle interfacce utenti. Inoltre, essi forniscono funzioni per semplificare lo sviluppo di web app, agevolando la manipolazione del DOM (Document Object Model), la gestione degli eventi, l animazione e l utilizzo dell approccio AJAX, con API di facile utilizzo che funzionano tramite una moltitudine di browser. Tra i framework di prima generazione, i più significativi e degni di nota sono Apache Cordova e Appcelerator Titanium. Entrambi forniscono un set di librerie Javascript (API) che possono essere invocate in modo da permettere ad uno sviluppatore di applicazioni web mobili di richiamare le API native e, dunque, di accedere all hardware del dispositivo in modo indipendente dal tipo di piattaforma supportata. In Apache Cordova ogni chiamata Javascript viene tramutata dal framework stesso nella relativa chiamata in codice nativo, in base al dispositivo di utilizzo. Cordova, dunque, fa da ponte fornendo l aggancio tra l applicazione web e la piattaforma nativa. In Appcelerator Titanium, invece, il codice Javascript non viene tradotto nello specifico linguaggio della piattaforma, bensì viene inserito all interno di un file Objective-C o Java e consegnato al dispositivo mobile dove viene creato un ambiente di esecuzione Javascript in codice nativo. Tra i molteplici framework di seconda generazione, si è scelto di trattare solo quelli che prevedono una piena compatibilità con il browser proprietario della particolare piattaforma mobile. In particolare, la scelta è ricaduta su jquery Mobile e Sencha Touch. Il primo si propone come obiettivo la realizzazione di un unica applicazione fruibile da un gran numero di dispositivi, sposando un approccio nel quale i terminali di destinazione vengono raggruppati in categorie con diversi livelli di supporto. Il secondo, Sencha Touch, si distingue dagli altri framework per funzionalità aggiuntive, 2 Giuseppe Sofo

15 come l utilizzo in modalità offline e, grazie alla geolocalizzazione, la possibilità di integrare dati geografici nei propri progetti. Ma il framework del quale si è deciso di approfondire ulteriormente l analisi è Ionic, nato nel Novembre 2013 ad opera di Ben Sperry, Adam Bradley e Max Lynch. Ionic è un framework di seconda generazione, nato con lo scopo di essere uno strumento di utilizzo potente e versatile nell ambito della creazione di app ibride. Le molteplici e valide funzionalità offerte da Ionic lo rendono una soluzione di gran successo, con feedback eccellenti. Il motivo della sua sempre più crescente popolarità va ricercato nel fatto che il framework è orientato principalmente al design e all interazione dell utente con l app, prediligendo, quindi, le funzionalità di front-end a quelle di backend. Quando si fa riferimento ad Ionic, in realtà, lo stack di tecnologie di cui si fa effettivamente utilizzo sono tre, ovvero: 1. Ionic; 2. AngularJS; 3. Cordova. Ionic, considerato il Bootstrap delle applicazioni ibride, mette a disposizione una serie di classi CSS predefinite per consentire una rapida definizione della grafica dell interfaccia. Le componenti grafiche di Ionic sono state pensate e create per assomigliare il più possibile a quelle native delle piattaforme mobili, permettendo, così, di dare all applicazione un look&feel molto simile a quello di un applicazione nativa. Inoltre, tutte le componenti fornite da Ionic permettono al programmatore di non doversi preoccupare dell aspetto che avranno sui vari dispositivi mobili, in quanto sono progettate per adattarsi al meglio alle varie dimensioni dei display. AngularJS è il framework Javascript utilizzato per creare l applicazione web che viene eseguita dentro la WebView. Seppur molto giovane, AngularJS è molto popolare per lo sviluppo di applicativi web lato client, dei quali implementa la logica e i dati. Esso basa la sua logica sul design pattern MVC (Model-View-Controller) e fornisce tutto ciò che occorre per creare applicazioni moderne che sfruttano le più recenti tecnologie, come le Single Page Application, cioè applicazioni le cui risorse vengono caricate dinamicamente su richiesta, senza la necessità di caricare l intera pagina. Un evidente punto di forza di AngularJS è il supporto al meccanismo di two-way data binding, ovvero la sincronizzazione automatica e bilaterale dei dati tra i componenti del model e quelli della view. Il contenitore nativo all interno del quale viene inserita l applicazione web realizzata con Ionic e AngularJS viene implementato con Cordova, strumento menzionato tra i framework di prima generazione. Al fine di testare il funzionamento di Ionic, si è deciso di implementare un applicazione consistente in una sola vista e che si pone come obiettivo la fedele riproduzione della pubblicazione di un post da parte di un utente su uno spazio comune su Internet (blog, social network, etc.). Ionic ha fornito i componenti grafici necessari alla definizione della UI, ovvero l header, il footer, i vari pulsanti ed il box in cui è contenuto l avatar dell utente, il post e il relativo numero di like e commenti. AngularJS ha permesso di definire il comportamento dell applicazione in seguito ad eventi innescati dall utente. In particolare, è stata implementata la possibilità di scattare una foto in tempo reale e di Giuseppe Sofo 3

16 inserirla come immagine di copertina del post. Cordova, invece, ha fornito il plugin di fotocamera e ha permesso di generare il file APK al fine di testare l appicativo su un dispositivo Android. Inoltre, con lo scopo di dare prova della compatibilità di Ionic con un qualunque linguaggio di scripting, si è deciso di implementare due particolari funzionalità in puro codice Javascript. Infatti, l utente ha la possibilità di mostrare gradimento al post letto inserendo un Like e, inoltre, può procedere con il ricaricamento della pagina mediante un pulsante di refresh situato nell header. La scelta di approfondire l analisi del framework Ionic e di realizzare un test di simulazione non è stata puramente casuale. Nella scelta di privilegiare Ionic sono stati fortemente determinanti la chiarezza e la quantità della documentazione messa a disposizione degli sviluppatori, il potenziale supporto offerto in forum e community e la compatibilità con le piattaforme più diffuse, ovvero ios e Andorid. Grazie all esperienza derivante dalla stesura di questo elaborato, è possibile concludere che Ionic è uno tra i framework più completi e performanti nell ottica di realizzazione di un applicazione ibrida che meglio garantisca un esperienza di utilizzo simil-nativa. Ionic, nel suo insieme, rappresenta uno strumento ottimizzato e necessario alla realizzazione del cambio di tendenza imposto dalle politiche aziendali, secondo cui le applicazioni mobili devono essere in grado di lavorare su qualunque documento con la massima compatibilità possibile tra i dispositivi mobili che operano su varie reti e che utilizzano diversi sistemi operativi. 4 Giuseppe Sofo

17 Capitolo 1 Le app ibride Le app ibride sono una particolare tipologia di applicazioni mobili che unisce i vantaggi di due diverse tecnologie di sviluppo: app nativa e web app. Questa soluzione permette di implementare l applicazione una sola volta e di renderla disponibile su più piattaforme contemporaneamente, oltre che ridurre i costi e i tempi di sviluppo. Inoltre, la riduzione dell impronta nativa e l utilizzo di tecniche web-based rendono questa via più accessibile agli sviluppatori che possiedono conoscenze standard.

18 1.1 App: definizione e classificazione Framework di seconda generazione per la creazione di app ibride: Ionic Il termine app (abbreviazione di applicazione) si riferisce ad un software applicativo sviluppato per funzionare su dispositivi mobili, ovvero su quegli strumenti elettronici che si possono utilizzare seguendo la mobilità dell utente: smartphone, tablet, GPS, smartwatch, etc. Le app possono essere raggruppate secondo diverse tipologie. La classificazione più importante può essere effettuata sulla base della correlazione esistente tra sistema operativo e portabilità su più piattaforme; in tal senso, si distinguono: app native, web app, app ibride App native Le app native sono, al momento, le applicazioni più comuni negli app store. Sono create appositamente per uno specifico sistema operativo utilizzando un linguaggio di programmazione di alto livello come Java per Android, Objective-C per ios e C# per Windows Phone. Per questo motivo, risultano essere single-platform e, dunque, incompatibili con sistemi operativi differenti. In Figura 1.1 vengono riportate le skill set delle attuali piattaforme. Figura Skill set delle piattaforme attuali Le app native hanno un pieno accesso alle caratteristiche del dispositivo (fotocamera, bluetooth, file system, rubrica, etc.), e l interazione diretta con queste permette di avere delle prestazioni ottimali, migliorandone sensibilmente l utilizzo. Usando il kit di sviluppo software (Software Development Kit - SDK) della piattaforma, l app nativa comunica con le API della piattaforma per accedere ai dati del dispositivo o per caricarne altri da un server. Le API sono delle librerie di funzioni che permettono alle app native di interagire con la piattaforma avendo pieno accesso alle 6 Giuseppe Sofo

19 funzionalità hardware. Esse rappresentano l interfaccia aperta attraverso la quale è possibile interagire con la piattaforma, altrimenti inaccessibile. Poichè le piattaforme SDK sono basate su differenti linguaggi di programmazione, gli sviluppatori hanno bisogno di implementazioni multiple della stessa applicazione per essere in grado di ottenere una ragionevole copertura di mercato. Un ulteriore e importante opportunità delle app native è la possibilità di essere utilizzate anche in modalità off-line, cioè senza una connessione Internet, anche se, alcune, fra queste, richiedono comunque l aggiornamento dei contenuti tramite connessione Internet. I vantaggi delle app native sono legati alla stretta integrazione con la piattaforma del dispositivo. Di seguito riportiamo i più importanti: utilizzo di API native: rende la comunicazione tra app e API più aderente alla piattaforma; rendering grafico accelerato: transizioni fra schermate ed effetti grafici non hanno un aspetto a scatti ; accesso a tutte le funzionalità del dispositivo (fotocamera, geolocalizzazione, cache, file system); user experience e semplicità d uso: la piattaforma nativa rappresenta la scelta più gradita agli utenti che hanno acquisito familiarità con il dispositivo in uso; visibilità, diffusione, guadagno: si aprono opportunità derivate dalla pubblicazione nello store. Gli svantaggi delle app native sono generalmente dati dall alto livello di difficoltà nello sviluppo e dalla loro complessa manutenibilità. Di seguito riportiamo i più rilevanti: requisiti linguistici: richiedono allo sviluppatore competenze nella lingua della piattaforma e relative conoscenze sull utilizzo delle API; single-platform: ciascuna implementazione soddisfa le esigenze di una sola piattafoma; alto livello di costo: per essere sviluppate e manutenute, esse richiedono un lavoro lungo e oneroso che si traduce in un importante incremento dei costi; forte dipendenza dallo store nativo: la pubblicazione e le successive fasi di aggiornamento dell app sono soggette ad approvazione prima che l app stessa venga resa pubblica. Alla luce di quanto appena detto, si può concludere che le app native risultano maggiormente idonee a sviluppatori che hanno una certa padronanza con Java, Objective-C, C# o per i team di sviluppo con risorse rilevanti. Giuseppe Sofo 7

20 1.1.2 Web app Le web app sono siti web progettati per dispositivi mobile abilitati al web. Sono, dunque, dei collegamenti verso un applicativo remoto, accessibile digitando l indirizzo URL nel browser mobile. Proprio per questo motivo, necessitano di una connessione Internet per poter funzionare e, dunque, non richiedono di essere scaricate ed installate. Le web app sono molto simili su tutte le piattaforme perché scritte con il linguaggio di markup HTML, adattabile a diversi dispositivi mobili. Tali applicazioni non possono, in alcun modo, interagire con l hardware e il software del dispositivo per migliorare l esperienza utente. Spesso, però, vengono, comunque, preferite alle app native per i tempi di sviluppo molto più contenuti. I dati necessari al funzionamento delle web app (immagini, audio, video, CSS, etc.) sono dislocati su un server web. Tale aspetto costituisce il loro principale vantaggio tecnico ma, al tempo stesso, anche il loro più rilevante difetto. Il vantaggio sta nel fatto che il funzionamento di una web app non incide in alcun modo sulla capacità di memoria e su quella di calcolo del dispositivo; il potenziale svantaggio, invece, è dovuto al fatto che scaricare tali risorse sul dispositivo potrebbe non solo aumentare il costo associato all uso dei dati, ma anche influire sull esperienza utente a causa delle latenze (intervallo di tempo che intercorre tra il momento in cui arriva l input al sistema e quello in cui è disponibile il suo output; tale intervallo rappresenta un indicatore della velocità di risposta del sistema) implicate in tali reti. Inoltre, le prestazioni dell app dipendono in modo sensibile dalla velocità di connessione Internet di cui, come già detto, essa non può assolutamente fare a meno. In Figura 1.2 si riportano, tramite screenshot, due esempi di web app. Figura Esempi di web app 8 Giuseppe Sofo

21 I vantaggi delle web app sono legati principalmente al livello di costo e alla compatibilità con il dispositivo. Più specificatamente, i principali vantaggi sono i seguenti: nessun processo di approvazione da parte dello store; manutenibilità: i siti web mobile sono semplici da aggiornare e mantenere e non richiedono di passare attraverso un processo di approvazione o di aggiornare le installazioni sul dispositivo; nessuna installazione: essendo accessibili tramite un browser web, non richiedono installazione; cross-platform: qualsiasi dispositivo mobile ha un browser che permette l accessibilità all applicazione; tempi di sviluppo più bassi. I siti web mobile girano all interno di un browser. Da ciò derivano le seguenti limitazioni: nessun accesso nativo: i siti web mobili non hanno accesso alle API native della piattaforma, ma soltanto alle API fornite dal browser; richiesta della tastiera per essere caricate: gli utenti devono digitare l indirizzo in un browser per trovare o usare un sito web mobile, procedura più difficoltosa che tappare un icona; UI (interfaccia utente) limitata: è difficile creare un applicazione touch-friendly specialmente se si ha che fare con un sito responsive che deve lavorare bene su desktop. La quantità di tempo che l utente dedica alla navigazione Internet su un dispositivo mobile sta diminuendo, mentre l uso delle app sta aumentando. 1.2 App ibride Dall incontro tra linguaggio di programmazione nativo e soluzioni web-based, nascono le app ibride, felice fusione dei vantaggi derivati dalle due diverse tecnologie di sviluppo (Figura 1.3). Si tratta di app in cui il linguaggio core di funzionamento è HTML5, mentre, la scatola (ovvero, la struttura base di pubblicazione più esterna) che viene scaricata nel dispositivo è in linguaggio nativo. In altre parole, il programma contenitore è realizzato nativamente, mentre il contenuto è un applicazione in HTML5 che si aggiorna tramite web. Un app ibrida contiene un istanza di browser, chiamata WebView, avvolta da un involucro di app nativa che è in grado di comunicare con la piattaforma nativa del dispositivo e con la WebView stessa. Questo significa che l applicazione web può girare su un dispositivo mobile e avere accesso alle funzionalità di quest ultimo (camera, bluetooth, etc.). Il browser web (la Webview) viene controllato in modalità full screen senza una visibile barra dell indirizzo o altri comandi del browser. Giuseppe Sofo 9

22 Esistono strumenti in grado di facilitare la comunicazione tra la WebView e la piattaforma nativa, rendendo possibili le app ibride; esse non sono parte di una piattaforma ufficiale ios o Android, bensì strumenti di terze parti, come Cordova. Dunque, l app ibrida contiene l insieme di tutte le risorse web necessarie (HTML, CSS, Javascript, immagini, etc.) affinchè possa caricarsi all istante, come fosse nativa, senza dover aspettare che il server web consegni qualcosa, come avviene per le web app. Le app ibride fanno leva sulla forza del browser del dispositivo per interpretare il contenuto web ed elaborare il codice Javascript; quest ultimo linguaggio aggiunge alle pagine HTML la possibilità di essere modificate in modo dinamico, in base all interazione dell utente con il browser. Le app ibride utilizzano un livello di astrazione da web a nativo che permette a Javascript di accedere a molte funzionalità del dispositivo, nonchè alle API native che, altrimenti, non lo sarebbero da browser web. Ciò permette alle app ibride di percepire swipe, pinche e altre gesture, proprio come le app native. La possibilità di garantire sempre più una user experience all altezza delle app native, l adattabilità ad un utilizzo trasversale su diversi sistemi operativi ed il contenimento dei costi di sviluppo sono le ragioni alla base della crescente diffusione delle app ibride. Le stesse hanno una compatibilità multipiattaforma riducendo l impronta del codice nativo necessario e lasciando spazio ai più riutiizzabili HTML, CSS e Javascript, che possono essere condivisi e impiegati su più piattaforme con il minimo adattamento. Questo si ha soprattutto perché WebKit - motore di rendering delle pagine web - è la piattaforma scelta in tutti i maggiori sistemi operativi mobili. Figura Confronto tra le architetture delle app native, web app e app ibride 10 Giuseppe Sofo

23 1.2.1 Vantaggi e limiti delle app ibride L approccio ibrido fornisce agli sviluppatori diversi vantaggi: Indipendenza dallo store: gli sviluppatori hanno la possibilità di eseguire operazioni di update/rollback dei contenuti o dell applicazione stessa senza richiedere agli utenti di aggiornare quest ultima per mezzo dell app store nativo. Cross-platform: gli sviluppatori costruiscono l app una sola volta e la distribuiscono a piattaforme differenti develop once, deploy many, concentrandosi sulla logica di business e non sulla complessità degli SDK di ciascuna piattaforma. Questo è un grosso vantaggio perché permette agli sviluppatori di risparmiare circa il 50% del tempo di sviluppo di un applicazione. Faster time to market: costruire un applicazione ibrida è tipicamente più veloce e richiede conoscenze standard altamente riutilizzabili. Contenimento dei costi: i cicli di sviluppo multipiattaforma aiutano anche a tenere sotto controllo il costo associato allo sviluppo e ai test. Abbondanti risorse umane: le app ibride sono costruite con tecnologie web; ciò significa che ci sono molti sviluppatori che hanno il set di conoscenze base per sviluppare app mobili. Distribuzione attraverso gli app store: le app ibride sono distribuite attraverso gli app store proprio come le app native. Esse, pertanto, fanno leva su un canale ben affermato per contenuti e monetizzazione. Processo di approvazione: la maggior parte degli app store hanno un processo di approvazione per il quale ogni app deve essere autorizzata prima che possa essere resa disponibile per la vendità. Le app ibride, in particolare, richiedono una sola sottomissione allo store; tale sottomissione avviene in fase di prima pubblicazione dell app. Una volta che tale richiesta è stata approvata, è possibile effettuare aggiornamenti successivi attraverso il server. Da notare, però, che è richiesta una nuova sottomissione nel momento in cui lo sviluppatore effettua cambiamenti nel codice nativo associato all app ibrida. Accesso off-line: le app ibride, come quelle native, possono essere eseguite su un dispositivo quando quest ultimo è off-line. Le limitazioni che, invece, si registrano sono le seguenti: Basse performance: le app ibride presentano livelli di performance inferiori a quelli delle app native in quanto Javascript è fondamentalmente single-threaded, cioè consente l esecuzione di una sola operazione per volta. Giuseppe Sofo 11

24 Interfaccia utente inconsistente: potrebbe essere seriamente difficile simulare il look and feel delle interfacce utente delle specifiche piattaforme usando HTML, CSS e Javascript. Non accessibilità tramite sito web: l utente è obbligato a trovare l applicazione in un app store nativo e non può accedervi con un tradizionale browser web a meno che l applicazione stessa non sia stata resa disponibile anche attraverso tale modalità. Nessun controllo nativo dell interfaccia utente: senza un tool opportuno di supporto, gli sviluppatori avrebbero dovuto creare tutti gli elementi dell interfaccia utente. Limitazioni WebView: l applicazione funziona tramite l istanza WebView e, pertanto, le performance sono legate alla qualità del browser della piattaforma. Accesso alle feature via plugin: l accesso alle API native non è disponibile nell immediato se non in presenza di plugin sviluppati addizionalmente che lo supportino. 1.3 Tipologie di app a confronto Si riportano, di seguito, una tabella (Tabella 1.1) e un grafico (Figura 1.4) che riassumono ed esemplificano ulteriormente quanto detto nei precedenti paragrafi. App native Web app App ibride Migliore user experience P Alta velocità di risposta P Costi di sviluppo Alti Bassi Medi Integrazione con il dispositivo P Limitata P Sicurezza P Distribuzione via store P P Processo di approvazione P P Funzionamento offline P In parte Tabella Tabella di riepilogo degli approcci allo sviluppo mobile 12 Giuseppe Sofo

25 Figura Grafico di riepilogo delle tre tecniche di sviluppo delle app mobile Comunque, nella scelta della tipologia di app da realizzare, gli aspetti positivi e negativi dovrebbero essere considerati in relazione al compito che l app dovrà assolvere. Giuseppe Sofo 13

26

27 Capitolo 2 La prima e la seconda generazione di framework per app ibride In questo capitolo si effettuerà una indagine sui principali strumenti a disposizione degli sviluppatori per la realizzazione di app multi-piattaforma. In particolare, si concentrerà l attenzione sui framework di prima generazione, ovvero quelli che, in anticipo rispetto agli altri, sono stati in grado di offrire una potenziale strategia di sviluppo di app mobili.

28 2.1 Framework e loro classificazione Framework di seconda generazione per la creazione di app ibride: Ionic Data la necessità sempre più crescente di raggiungere gli utenti di piattaforme differenti a minori costi di sviluppo, oggi esiste una infinità di framework che permettono di realizzare, in modalità più o meno simili, lo sviluppo multi-piattaforma tramite la stesura di un unico codice. La Figura 2.1 mette in evidenza i linguaggi di sviluppo supportati dai framework, e il target, ovvero l obiettivo che è possibile raggiungere sfruttando ciascuno di essi e che, in questo caso, corrisponde alla tipologia di app che permette di sviluppare. Figura Scenario dei principali framework multi-piattaforma Dopo aver raccolto informazioni sulla loro architettura e sul loro funzionamento, è stato possibile identificare due categorie di framework, ovvero: wrapper; librerie. 16 Giuseppe Sofo

29 In questa fase si concentrerà l attenzione sui wrapper poichè hanno segnato la prima generazione di framework, tematica di maggiore interesse in questo capitolo. La categoria dei wrapper raggruppa tutti i framework che consentono principalmente lo sviluppo di app ibride, offrendo agli sviluppatori una certa gamma di funzionalità hardware e software dei dispositivi supportati, come fotocamera, GPS, accelerometro, contatti. Questi strumenti automatizzano la creazione di un involucro nativo, un package nel formato della determinata piattaforma, che racchiude l app creata sfruttando le tecnologie del web, fornendo all app stessa la capacità di comunicare con il dispositivo sottostante sul quale verrà installata ed eseguita. In genere, lo sviluppatore può sfruttare funzionalità e/o componenti di UI nativi dei dispositivi utilizzando API appositamente messe a disposizione e automaticamente mappate in codice nativo dal wrapper, senza doversi preoccupare di conoscere il linguaggio della piattaforma sottostante. Quindi, il funzionamento dei wrapper si basa sul pattern Adapter che fornisce una soluzione astratta al problema dell interoperabilità tra interfacce differenti, in questo caso quelle dei linguaggi del web e quelle delle specifiche piattaforme Pattern Adapter L Adapter (detto anche Wrapper) è un design pattern di tipo strutturale, basato sulle classi e sugli oggetti, che ha lo scopo di convertire l interfaccia di una classe in un altra tipologia. Questo pattern permette a classi diverse di operare insieme anche nel caso in cui ciò non sarebbe possibile per via delle interfacce tra loro non compatibili. Questa soluzione trova una forte applicabilità soprattutto in quegli scenari in cui oggetti simili appartenenti ad ambienti o sistemi diversi hanno la necessità di operare tra loro. In questi casi, l utilizzo di un oggetto wrapper consente di adattare tra loro oggetti strutturalmente organizzati in modo diverso e di metterli in comunicazione. In Figura 2.2 viene riportato il diagramma delle classi del pattern Adapter. Figura Diagramma delle classi del pattern Adapter Come si evince dalla figura, i partecipanti a questo pattern sono: Giuseppe Sofo 17

30 Target: definisce l interfaccia di riferimento alla quale l oggetto Adaptee si deve adattare; Adaptee: rappresenta l interfaccia che deve essere adattata; Adapter: adatta l interfaccia di Adaptee all interfaccia di Target; Client: utilizza unicamente oggetti compatibili con l interfaccia di Target. 2.2 Framework di prima generazione: Cordova e Titanium Tra i framework di prima generazione si è scelto di trattare Cordova e Titanium, in quanto già popolari tra gli sviluppatori e particolarmente supportati. Ciò consente di prendere in considerazione le loro valutazioni e le eventuali problematiche riscontrate. Le caratteristiche ritenute più rilevanti nella scelta sono state: la popolarità ed il potenziale supporto, proprietario e non, offerto in forum e community; la chiarezza e la quantità della documentazione che mettono a disposizione degli sviluppatori, ritenendo più interessanti quelli con la documentazione più completa e più comprensibile; la possibilità di fornire animazioni e interattività; la possibilità di gestire dati offline; le piattaforme supportate, giudicando più importanti quelli che permettono la creazione di app supportate da ios, Android e Windows Phone, perché sono le piattaforme per dispositivi mobili al momento più diffuse Apache Cordova Storia Apache Cordova nasce da un progetto di successo, PhoneGap, avviato da un azienda canadese, Nitobi Software, e venduto nel 2011 ad Adobe. Contestualmente alla trattativa con Adobe, Nitobi ha donato alla fondazione Apache il progetto che, in un primo tempo, aveva assunto il nome di Apache Callback e che, successivamente, è stato modificato nell attuale Apache Cordova. Si tratta, quindi, di un software open source 18 Giuseppe Sofo

31 distruibuito con licenza Apache 2.0. Allo stato attuale, il progetto PhoneGap portato avanti da Adobe non è altro che una distribuzione di Apache Cordova con la possibilità di usufruire di servizi aggiuntivi. Architettura di un applicazione Cordova Cordova si propone di focalizzare gli sforzi degli sviluppatori sull applicazione piuttosto che far perdere tempo ad adattarla ad ogni piattaforma. Per fare ciò un applicazione realizzata tramite Cordova richiede solo la conoscenza di tecnologie standard, ovvero HTML, CSS e Javascript. Questi tre linguaggi contribuiscono a creare la struttura della pagina web (HTML), a personalizzare il suo aspetto (CSS), e a renderla dinamica ed interattiva mediante il codice Javascript. Quindi, Cordova si basa sull utilizzo di tecnologie web, situate sul dispositivo stesso e non su un server remoto. L architettura di Apache Cordova si presenta come una sorta di contenitore di applicazioni Web (realizzate dallo sviluppatore) eseguite localmente. Cordova fornisce un set di librerie Javascript (API Cordova) che possono essere invocate in modo da permettere ad uno sviluppatore di applicazioni mobili di invocare le API native e di accedere alle funzioni native del dispositivo (fotocamera, coordinate GPS, file system, etc.) in modo indipendente dal tipo di piattaforma supportata. Ogni chiamata Javascript verrà, poi, tramutata dal framework stesso nella relativa chiamata in codice nativo, in base al dispositivo di utilizzo. Dunque, Cordova fa da ponte fornendo l aggancio tra l applicazione web e la piattaforma nativa. HTML, CSS e Javascript vengono incorporati dentro una Webview nativa che occupa l intero schermo del dispositivo; sempre all interno vengono visualizzati l HTML e il CSS e viene eseguito il codice Javascript. Pertanto, Webview e API sono le componenti dell applicazione che dipendono dalla specifica piattaforma mobile e vengono messe a disposizione dello sviluppatore dal framework. In Figura 2.3 è mostrata l architettura di un applicazione ibrida realizzata con Apache Cordova. Figura Architettura di un'applicazione ibrida realizzata con Cordova Giuseppe Sofo 19

32 Un ruolo determinante in Apache Cordova è ricoperto dai plugin. Un plugin è una parte di codice che permette alla Webview dentro cui avviene la formattazione delle pagine di comunicare con la piattaforma nativa su cui viene eseguita. Tutte le principali API Cordova sono implementate come plugin. Ciascun plugin comprende una singola interfaccia Javascript insieme alle corrispondenti librerie in codice nativo per ogni piattaforma supportata. In sostanza, il plugin nasconde le varie implementazioni in codice nativo dietro una comune interfaccia Javascript. Apache Cordova fornisce un registro nel quale ricercare ed aggiungere nuovi plugin da usare per le proprie applicazioni. Nonostante il framework si basi sul principio di unicità del codice, è, comunque, inevitabile che la fase ultima di deployment dell applicazione debba essere effettuata su una piattaforma di sviluppo nativa; una volta completato lo sviluppo basato su HTML, CSS e Javascript, la fase finale prevede la creazione, su X-Code per ios o su Eclipse per Android, di un progetto, in modo tale che le applicazioni generate con l uso di Apache Cordova vengano, come le applicazioni native, compilate. In tal modo, le app potranno essere rese disponibili sui tradizionali store nativi. Ecco una rassegna delle classi di funzionalità a cui è possibile accedere: Accelerometro: cattura il movimento del dispositivo misurando la sua accelerazione lungo le direzioni x, y e z. Bussola: permette di ottenere la direzione verso cui il dispositivo punta. Camera: permette l accesso alla fotocamera e alle immagini già presenti nella libreria fotografica del dispositivo. Contatti: consente di accedere alle informazioni relative ai contatti, di crearne di nuovi o modificarli. Info dispositivo: permette di raccogliere informazioni hardware e software sul dispositivo in uso. Eventi: permette di gestire diversi tipi di eventi: pausa (quando l applicazione va in background), online (quando viene rilevata la connettività), off-line (quando viene rilevata mancanza di connettività), pressione del tasto back (se presente), rilevazione del livello critico di batteria, etc. File: permette l accesso al file system. Geolocalizzazione: permette l accesso al sensore GPS e, dunque, la rilevazione della posizione corrente del dispositivo che corrisponderà alle coordinate fornite dal sensore. Le coordinate vengono restituite sotto forma di latitudine e longitudine. Network: controlla lo stato della rete. Notifica: permette di eseguire azioni di notifica come la visualizzazione dei messaggi, la vibrazione ed i suoni. Storage: permette l utilizzo della memoria del dispositivo. A dispetto di tutti i vantaggi apportati dal framework, derivanti dalla possibilità di fruire di linguaggi di programmazione universali basati sugli standard web, è necessario evidenziare anche un grosso difetto, ovvero l impossibilità di utilizzo delle funzioni di debugging native dell ambiente di 20 Giuseppe Sofo

33 sviluppo, necessarie per l individuazione di errori a tempo di esecuzione. Nonostante ciò, gli sviluppatori di Cordova hanno cercato, tramite la piattaforma Weinre, di creare un debugger fruibile online. L idea è quella di includere nel proprio codice HTML un riferimento ad un codice Javascript situato online e che abbia un riferimento del progetto stesso. Il codice da incorporare è il seguente: <script src=" Successivamente, visitando la pagina ed eseguendo contemporaneamente l applicazione, sarà possibile, in tempo reale, vedere via browser una schermata di debugger Titanium Appcelerator Titanium, introdotto nel Dicembre 2008, è una piattaforma software open source di sviluppo, con la quale è possibile creare applicazioni multipiattaforma per dispositivi mobili utilizzando Javascript, HTML e CSS. Le applicazioni create con Titanium risultano essere un ibrido tra le applicazioni web-based e quelle native: sono scritte principalmente in Javascript, ma, grazie all utilizzo di API Titanium, si integrano con le componenti native dei vari sistemi operativi. Infatti, piuttosto che dover studiare come si implementa una lista di elementi scorrevoli su diverse piattaforme e diversi linguaggi, uno sviluppatore che utilizza Titanium, può, ad esempio, richiamare la funzione Javacript messa a disposizione dal framework per indicare la sua intenzione di posizionare una lista scorrevole. Una volta terminata la scrittura dell applicazione ed inserite le risorse nell apposita directory, la compilazione e la trasformazione da codice in app nativa vengono gestite totalmente da Titanium rendendo ogni passaggio totalmente trasparente allo sviluppatore. Il grosso vantaggio rispetto ad Apache Cordova sta nel fatto che Titanium permette di creare app ibride senza essere vincolati all utilizzo di una WebView. Inoltre, diversamente da Cordova, il codice Javascript non viene più tradotto in Objective-C o Java. In un primo momento, il codice Javascript viene compilato ed inserito all interno di un file Objective-C o Java, a seconda della piattaforma di destinazione. Tale file viene, quindi, compilato e consegnato al dispositivo mobile dove viene creato un ambiente di esecuzione Javascript in codice nativo, possibile grazie alla presenza nei dispositivi mobili di interpreti Javascript, ovvero JavaScriptCore su ios, V8 Javascript su Android e BlackBerry. Quando nel codice Javascript viene chiamata una funzione su un oggetto, questo viene abbinato con un oggetto nativo della piattaforma sottostante; tale associazione viene effettuata in maniera stringente essendo di tipo uno ad uno. In sostanza, nell ambiente runtime di Javascript, vengono iniettati oggetti proxy, cioè oggetti che esisteranno sia in ambiente Javascript che in ambiente nativo per i quali il proxy fungerà da ponte. Giuseppe Sofo 21

34 Più precisamente, se in Javascript viene invocata una funzione sull oggetto globale Titanium o Ti, come var b=ti.ui.createbutton();, questo invocherà un metodo nativo che creerà un oggetto di UI nativo, e un oggetto proxy che espone in Javascript le proprietà e i metodi dell oggetto nativo della UI sottostante. Kroll, parte dell SDK, è il particolare componente che traduce le chiamate alle funzioni nei loro equivalenti nativi. Quindi, ad esempio, quando si modifica un Titanium Button, Kroll applica le modifiche corrispondenti all equivalente nativo; analogamente, quando si verifica un evento in ambiente nativo, Kroll lo cattura, lo gestisce e, poi, lo propaga all ambiente Javascript. Concludendo, a runtime, l app sviluppata con Titanium è composta da tre elementi principali: il codice sorgente Javascript, inglobato in un file nativo e compilato; l interprete Javascript, JavaScriptCore o V8 Javascript; l implementazione in linguaggio nativo delle API Titanium per una specifica piattaforma. In Figura 2.4 si riassume graficamente lo stack della struttura di un app per due differenti piattaforme, ovvero ios e Android. Figura Architettura delle app sviluppate con Titanium per le piattaforme ios e Android Differenze e punti di unione Cordova e Titanium, seppur appartenenti alla categoria dei framework wrapper, seguono approcci differenti nella realizzazione di un app ibrida: Cordova cerca di uniformare lo sviluppo, passando attraverso l astrazione del browser; Titanium, invece, abbandona il concetto di WebView e basa l intero sviluppo dell app sull utilizzo delle sue API. Queste strade diverse si traducono in vantaggi e svantaggi per ciascuna delle due soluzioni. Il più grande vantaggio di Cordova sta nella sua semplicità: utilizzando l approccio di programmazione web diffuso e consolidato, anche uno sviluppatore alle prime armi è in grado di realizzare applicazioni installabili su tutti i sistemi operativi mobili esistenti, accedendo anche alle 22 Giuseppe Sofo

35 funzionalità del dispositivo. In tal modo, però, la realizzazione dell interfaccia grafica resta totalmente a carico dello sviluppatore che, per quanto possa applicarsi, non potrà mai raggiungere un risultato fedele all originale. Titanium, invece, ha il grande vantaggio di realizzare interfacce grafiche completamente fedeli al sistema operativo di destinazione, in quanto vengono sfruttate le stesse librerie grafiche della piattaforma nativa. Riassumendo, non è possibile affermare quale framework sia migliore tra i due. Entrambi svolgono bene il compito per cui sono stati realizzati. Se non si hanno vincoli sull interfaccia grafica, Cordova è la soluzione preferibile, considerando anche il fatto che man mano che i browser integreranno gli standard di accesso ai sensori del dispositivo, il codice scritto per Cordova potrà essere utilizzato direttamente nel browser. 2.3 Framework di seconda generazione I framework di seconda generazione consistono principalmente in librerie, piuttosto che in wrapper. Si tratta, cioè, di framework che offrono, tramite i linguaggi del web, componenti per riprodurre e simulare i comportamenti tipici delle interfacce native, in termini di grafica e interattività delle UI. Essi, inoltre, forniscono funzioni per semplificare lo sviluppo di web app, agevolando la manipolazione del DOM (Document Object Model), la gestione degli eventi, l animazione e l utilizzo dell approccio AJAX, con API di facile utilizzo che funzionano attraverso una moltitudine di browser. Questi framework permettono di realizzare web app con grafica Touch-Optimized per i dispositivi mobili, identificando il nome e la versione del browser e della piattaforma mobile del dispositivo per dedurre se Javascript e alcune funzionalità HTML5 e CSS3 sono supportate. Essi consentono, altresì, di adattare automaticamente il layout dell app al display del dispositivo, in accordo con le tecniche di RWD (Responsive Web Design). In questo modo la web app può funzionare in modo ottimale in funzione dell ambiente nel quale viene eseguita (PC, tablet, smartphone, con una vasta gamma di risoluzioni di dispositivi, di densità dello schermo e di modalità di interazione) con la stessa base di codice sottostante. Alcune di queste librerie permettono di sfruttare il pattern architetturale MVC (Model-View- Controller); esse sono tutte più o meno compatibili con uno o più wrapper, e gratuite. La trattazione dei framework di seconda generazione è rimandata al capitolo successivo, in cui verranno discussi alcuni tra i più importanti. Giuseppe Sofo 23

36

37 Capitolo 3 Uno sguardo ai framework di seconda generazione In questo capitolo verrano discusse le caratteristiche fondamentali dei framework di seconda generazione, delineando principalmente i vantaggi apportati allo sviluppo di un applicazione web per dispositivi mobili. Inoltre, saranno oggetto di discussione due tra i principali framework di seconda generazione, jquery Mobile e Sencha Touch.