1. Introduzione
1.2 Introduzione alle tecnologie mobili di riferimento
1.2.4 La scelta di Apache Cordova
L’applicazione mobile è stata creata con Apache Cordova. Cordova29 è un framework open source
che utilizza HTML5 per la creazione di applicazioni native cross-platform. I creatori di Apache Cordova volevano un modo più semplice per costruire applicazioni mobili cross-platform e hanno deciso di implementarlo come una combinazione di tecnologie native e tecnologie web. Questo tipo di applicazioni mobili sono chiamate applicazioni ibride.
Il vantaggio iniziale di Apache Cordova è la capacità nativa al di sopra di ciò che è normalmente supportato nel browser. Fino al momento della sua nascita il modo migliore per costruire un’applicazione mobile che funziona su più dispositivi mobili era quello di crearla usando solo le 28 Una webview è una view (che sua volta rappresenta l’elemento costitutivo per i componenti dell'interfaccia utente ed è responsabile del disegno e della gestione degli eventi) che visualizza le pagine web. Questa classe è la base su cui è possibile ruotare il proprio browser web o visualizzare semplicemente alcuni contenuti online all'interno della activity corrente.
tecnologie per la progettazione e la programmazione web. Purtroppo per gli sviluppatori mobili, però, per molte applicazioni mobili non era possibile fare più di quello che HTML e browser web potrebbero offrire, ossia semplicemente creare un’applicazione web che ha interagisse con la fotocamera del dispositivo o l’applicazione dei contatti locali. Per aggirare questa limitazione, Cordova implementa una serie di API che estendono le funzionalità del dispositivo nativo (come la fotocamera, l’accelerometro, l’applicazione Contatti e così via) in una applicazione web in esecuzione all’interno di un contenitore nativo.
Apache Cordova è costituito dai seguenti componenti:
Codice sorgente per un contenitore nativo di applicazioni per ciascuna delle piattaforme per dispositivi mobili supportati. Il contenitore renderizza l’applicazione HTML5 sul dispositivo.
Una serie di API che forniscono ad un’applicazione web in esecuzione l’accesso al contenitore delle funzionalità del dispositivo nativo (e alle API) normalmente non supportate da un browser web mobile.
Un insieme di strumenti utilizzati per gestire il processo di creazione di progetti applicativi, la gestione di plugin per la creazione di applicazioni native di SDK30 e per il testing di
applicazioni su simulatori e emulatori di dispositivi mobili.
Per creare un’applicazione di Cordova, viene creata un’applicazione web, successivamente viene confezionata in un contenitore nativo, testata e debuggata ed infine distribuita agli utenti. In genere tramite un servizio di storage di applicazioni). Il processo di packaging (letteralmente “confezionamento”) è illustrato nella seguente figura31:
30 Un SDK (software development kit, traducibile in italiano come "pacchetto di sviluppo per applicazioni") indica genericamente un insieme di strumenti per lo sviluppo e la documentazione di software.
31 Quando molti sviluppatori entrano in contatto per la prima volta con questa tecnologia, presuppongono immediatamente che l’applicazione web sia in qualche modo tradotta nella lingua madre per ogni piattaforma di dispositivi mobili supportati - convertita in Objective C per iOS o Java per Android, per esempio - ma non è ciò che avviene.
All’interno dell’applicazione nativa, l’interfaccia utente dell'applicazione consiste in una singola schermata che contiene solo una singola visualizzazione web che utilizza tutto lo spazio dello schermo disponibile del dispositivo. Quando l'applicazione viene avviata, carica la pagina di avvio dell'applicazione Web (in genere index.html ma può essere facilmente modificata in base alle preferenze dello sviluppatore) e quindi passa il controllo alla visualizzazione web per consentire all'utente di interagire con l'applicazione web. Quando l'utente interagisce con il contenuto dell'applicazione (l'applicazione web), i collegamenti o il codice JavaScript all'interno dell'applicazione possono caricare altri contenuti all'interno dei file di risorse impacchettati con l’applicazione o possono raggiungere la rete e utilizzare i contenuti di un sito o di un'applicazione server-side.
Per alcune piattaforme per dispositivi mobili, quali Bada, Symbian e webOS, un'applicazione nativa è solo un'applicazione web: non esiste un concetto di applicazione nativa compilata che viene distribuita nei dispositivi. Invece, un'applicazione web confezionata appositamente è quella che viene eseguita come un'applicazione sul dispositivo.
L'applicazione web in esecuzione all'interno del contenitore è proprio come qualsiasi altra applicazione web che verrà eseguita in un browser web mobile. Può aprire altre pagine HTML (localmente o da un server web che si trova in rete).
Gli script JavaScript, incorporati all'interno dei file di origine dell'applicazione, implementano la logica dell'applicazione necessaria, nascondono o disattivano il contenuto all'interno di una pagina,
riproducono i file multimediali, aprono nuove pagine, effettuano calcoli e recuperano i contenuti o inviano contenuti a un server.
L'aspetto dell'applicazione è determinato dalle impostazioni dei caratteri, dalle linee, dalla spaziatura, dalla colorazione o dagli attributi di ombreggiatura aggiunti direttamente agli elementi HTML o implementati tramite CSS. Gli elementi grafici applicati alle pagine possono anche contribuire a fornire un tema per l'applicazione. Tutto ciò che uno sviluppatore può fare in un'applicazione web ospitata su un server può essere eseguito anche all'interno di un'applicazione Cordova.
Un'applicazione di un browser web mobile non ha in genere accesso alle applicazioni lato hardware, all’hardware in se e alle API native. Ad esempio, un'applicazione web in genere non è in grado di accedere all'applicazione contatti o interagire con l'accelerometro, la fotocamera, la bussola, il microfono e altre funzionalità, né può determinare lo stato della connessione di rete del dispositivo. Un'applicazione mobile nativa, invece, utilizza frequentemente queste funzionalità. Per essere interessante un'applicazione mobile (interessante per gli utenti delle potenziali applicazioni), probabilmente avrà bisogno di accedere a queste funzionalità dei dispositivi nativi.
Cordova accoglie questa necessità fornendo una suite di API JavaScript che uno sviluppatore può sfruttare per consentire a un'applicazione Web di essere eseguita all'interno del contenitore di Cordova e di accedere alle funzionalità del dispositivo al di fuori del contesto web. Queste API sono state implementate in due parti: una libreria JavaScript che espone le funzionalità native all'applicazione Web e il codice nativo corrispondente in esecuzione nel contenitore che implementa la parte nativa delle API. Il team di sviluppo ha essenzialmente fornito una libreria JavaScript ma implementazioni native separate su ciascuna piattaforma per dispositivi mobili supportati.
Quando uno sviluppatore implementa una funzionalità in un'applicazione che utilizza una delle API di Cordova, l'applicazione chiama una API utilizzando JavaScript. Uno strato speciale all'interno dell'applicazione traduce la chiamata API Cordova nell'API nativa appropriata per la particolare funzionalità. Ad esempio, il modo in cui si accede alla fotocamera su un BlackBerry è diverso da come è fatto su Android, pertanto questo livello comune di API consente a uno sviluppatore di implementare un'unica interfaccia tradotta dietro le quinte nell'API nativa appropriata per ogni piattaforma mobile supportata. Ad esempio, per riconoscere la bussola utilizzando Cordova e le opzioni predefinite per alcune API, il codice JavaScript dovrebbe essere simile a questo:
Come parametri, l'applicazione passa due funzioni di callback32: onSuccess e onError, la prima
viene eseguita nel caso in cui il valore di inclinazione del dispositivo in termini di gradi (heading.magneticHeading) viene restituito senza errori, l’altra viene eseguita se si verifica un
errore nella lettura della bussola del dispositivo:
function onSuccess(heading){ console.log('Heading: ' + heading.magneticHeading); } function onError(error){ console.log('CompassError: ' + error.code); }
Le righe soprastanti contengono blocchi di codice eseguiti dalle funzioni di callback. Esse stampano nella console i gradi di inclinazione del dispositivo nel caso in cui la funzione fosse eseguita correttamente, ed un messaggio di errore nel caso in cui la funzione abbia riscontrato dei problemi nella lettura del dispositivo.
Apache Cordova supporta attualmente le seguenti piattaforme del sistema operativo per dispositivi mobili:
Android (Google, http://developer.android.com/index.html) Bada (Samsung http://developer.bada.com)
BlackBerry 10 (BlackBerry https://developer.blackberry.com) iOS (Apple https://developer.apple.com/devcenter/ios/index.action)
Firefox OS (https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS) Tizen (inizialmente Samsung ora fa parte della the Linux Foundation
https://developer.tizen.org)
Windows Phone 7 and Windows Phone 8 (Microsoft http://developer.windowsphone.com/en-us)
Windows 8 (Microsoft http://msdn.microsoft.com)
Una volta che l'applicazione web è completata, a prescindere dal fatto che venga utilizzata qualche API di Cordova o meno, verrà confezionata in un'applicazione nativa che sarà eseguita sul dispositivo. Ciascuna delle piattaforme per dispositivi mobili supportata dal progetto Cordova ha strumenti proprietari per la creazione di applicazioni native. Per creare un'applicazione Cordova per 32 Una funzione di callback è una funzione che viene passata come argomento ad un'altra funzione e viene invocata dopo qualche tipo di evento. Una volta completata la funzione alla quale viene passata, viene chiamata la funzione passata come argomento.
ogni piattaforma mobile supportata, i contenuti web dell'applicazione (HTML, CSS, JavaScript e altri file che compongono l'applicazione) devono essere aggiunti a un progetto applicativo appropriato per ogni piattaforma mobile. La sfida di questo processo è che ogni piattaforma mobile utilizza strumenti completamente diversi, e i progetti applicativi utilizzano diversi file di configurazione ed una struttura diversa di cartelle di progetto. Inoltre, alcuni degli strumenti di sviluppo della piattaforma mobile supportati verranno eseguiti solo su alcuni sistemi operativi desktop. Per esempio, l’SDK iOS viene eseguito solo su Macintosh OS X, similmente, l’SDK del Windows Phone viene eseguito solo su Microsoft Windows, gli SDK di BlackBerry vengono eseguiti solo su Microsoft Windows e Macintosh OS X, infine l’SDK di Android viene eseguito su Linux, su Microsoft Windows e Macintosh OS X.
Per consentire agli sviluppatori di gestire i loro progetti, il team di progetto di Cordova ha costruito un'unica interfaccia a riga di comando unificata (CLI, command line interface; da ora in avanti verrà utilizzato questo acronimo per indicare l’interfaccia a riga di comando) che è operata su tutte le piattaforme per dispositivi mobili supportati da Cordova. Per lo sviluppo del modello particellare mobile è stata utilizzata sia l’interfaccia da riga di comando, sia gli ambienti di sviluppi propri del sistema operativo per il quale viene creata l’applicazione mobile.
L’approccio a riga di comando può risultare comodo quando non si ha a disposizione ambienti di sviluppo propri per il sistema operativo target dell’applicazione, o quando si vuole utilizzare l’editor preferito per creare le pagine HTML, le regole CSS ed il codice JavaScript. Ha inoltre indubbi vantaggi quando, per una applicazione, si prevede più piattaforme mobile di riferimento evitando di utilizzare diversi strumenti di sviluppo e quindi diversi progetti.
Per poter eseguire i comandi implementati dal pacchetto dobbiamo prima aver installato Node.js33 e
gli SDK per le piattaforme mobile a cui siamo interessati. Una volta preparato il tutto avviamo l’installazione del pacchetto di comandi da CLI con il seguente comando:
sudo npm install -g cordova34
Sudo permette di eseguire programmi con un livello di accesso più elevato, quindi quando verrà rilevato tale comando, verrà chiesta la password prima dell'inizio dell'installazione.
33 Node.js è un ambiente di gestione open-source e cross-platform che implementa porzioni di un modello per l'esecuzione lato server di codice JavaScript. Storicamente, JavaScript è stato utilizzato principalmente per gli script sul lato client, in cui gli script scritti in JavaScript sono incorporati in un HTML di una pagina web per essere eseguiti dal lato client da un motore JavaScript nel browser web dell'utente. Node.js consente di utilizzare JavaScript per lo script sul lato server e di eseguire script sul lato server per produrre contenuti web dinamici prima che la pagina venga inviata al browser web dell'utente.
34 Questo comando è relativo all’installazione su piattaforme Unix like, ovvero quei sistemi operativi simili ai sistemi Unix.
Il processo da CLI installa molteplici cose, per cui sulla finestra del terminale si vedrà scorrere molteplici informazioni.
Quando l’installazione è completata, verrà visualizzato un messaggio che riassume ciò che è stato installato; se si scorre nuovamente l'elenco, si vedrà quanti pacchetti sono stati installati durante il processo.
Durante l’installazione da riga di comando può capitare che l’installazione non vada a buon fine. L’errore principale è stato il non riconoscimento del comando npm, un gestore di pacchetti di Node.js Il problema è stato ovviato digitando il comando sudobrew install npm35. Una volta
che l’istallazione di npm è andata a buon fine, non resta che ripetere il comando di installazione di Cordova e non dovrebbero comparire più alcuni errori.
Una volta installato l’ambiente di sviluppo a riga di comando si può creare una cartella di progetto (vuota) pronta per essere implementata come app.
Per la creazione del progetto si utilizza il comando create, che viene usato per creare un progetto nuovo. Per attuarlo con il terminale, è sufficiente spostarsi nella cartella in cui si desidera creare la cartella di progetto ed immettere un comando di questo tipo:
cordova create <nome_cartella_progetto> <nome_package> <nome_progetto>
Il primo parametro passato al comandocreate indica il nome della cartella del progetto, nella quale viene creata una semplice struttura di progetto Cordova e file di contenuti web necessari per l'applicazione. Il secondo parametro specifica un ID applicazione (o package) che verrà scritto nel file di configurazione config.xml il quale consente di avere un nome di applicazione diverso dal nome della cartella dell’applicazione. Infine l’ultimo parametro indica il nome dell’applicazione vero e proprio, ovvero ciò che andremo a digitare nel caso si volesse scaricare la app da Google play o da Apple store.
Il comando riporta un messaggio che indica la creazione della cartella di progetto; una volta eseguito torna al prompt dei comandi, pronto a ricevere il prossimo comando, che equivale a:
cd nome_cartella_progetto && open .
Il quale produce la seguente schermata:
35 brew equivale asudo apt-get delle distro Linux per quanto concerne l’installazione di pacchetti mancanti su macOS.
Già da questo semplice progetto di esempio vuoto si può osservare le cartelle sulle quali andare a operare a seconda delle molteplici funzionalità utilizzabili. La struttura del progetto che è stata creata ha solo alcune cartelle vuote più una cartella di un progetto di un’applicazione web creata da Cordova. Non ci sono informazioni riguardo alle diverse piattaforme per dispositivi mobili. Il Cordova CLI fornisce un comando per le piattaforme che consente di gestire i file di progetto per ciascuna delle piattaforme per dispositivi mobili supportate dall'applicazione.
Per aggiungere un supporto a una particolare piattaforma per dispositivi mobili all'applicazione Cordova, è necessario immettere la seguente riga di comando:
cordova platform add platform_name
Ovviamente prima di aggiungere una piattaforma, gli strumenti di sviluppo necessari per creare progetti per la particolare piattaforma devono essere installati sul sistema e visibili al CLI. Il CLI utilizza gli strumenti nativi della piattaforma per creare un nuovo progetto, quindi se gli strumenti non sono disponibili per il CLI, il comando non funziona; consequenzialmente gli strumenti sono disponibili all’interno degli SDK di ogni piattaforma.
Ad esempio, se si vuole aggiungere un progetto Android all'applicazione Cordova, si inserisce il seguente comando dalla cartella del progetto Cordova:
cordova platform add android
È anche possibile specificare più piattaforme per dispositivi mobili di destinazione in un singolo comando, come illustrato nell'esempio seguente:
cordova platform add android blackberry ios
Il comando restituisce diversi messaggi sulla finestra del terminale riguardo alla corretta esecuzione della piattaforma aggiunta, quindi, a meno che non si veda un errore evidenziato in rosso, significa che il comando è andato a buon fine. La seguente videata mostra il risultato:
Dalla schermata si può osservare che la cartella platform, rispetto alla versione precedente, contiene adesso una cartella iOS e una cartella Android e di conseguenza queste cartelle contengono:
• un progetto completo Xcode36 chiamato nome_app.xcodeproj, per quanto concerne iOS, con
il quale si può utilizzare Xcode, aprire il progetto e eseguire l'applicazione;
36 Xcode è un ambiente di sviluppo integrato per macOS contenente una suite di strumenti di sviluppo software sviluppati da Apple per lo sviluppo di software per macOS, iOS, watchOS e tvOS. È disponibile gratuitamente tramite App Store. Gli sviluppatori registrati possono scaricare i rilasci di anteprima e le versioni precedenti della suite tramite il sito web di Apple Developer.
• il file AndroidManifest.xml per quanto concerne Android, contenente informazioni dettagliate riguardo all’applicazione come il nome del package, il codice della versione, il nome della versione, la versione del SDK minima per l’utilizzo dell’applicazione (minSdkVersion), l’immagine che rappresenta l’applicazione sul dispositivo (icon), il nome dell’applicazione (label) e il nome delle activity37 presenti nell’applicazione, inoltre
all’interno della cartella src si trova una albero di directory che conduce al file MainActivity.java il quale, come per nome_app.xcodeproj, può essere aperto ed eseguito con Android Studio.
Se si decidesse di rimuove una piattaforma è possibile attuare tale esigenza con il seguente comando:
cordova platform remove nome_piattaforma
È inoltre possibile utilizzare il comando della shell rm di scelta per eliminare direttamente la
piattaforma:
cordova platform rm nome_piattaforma
Quindi, se ad esempio si volesse rimuovere la piattaforma Android, basta eseguire il seguente comando:
cordova platform remove android
E la piattaforma scomparirebbe dalla cartella platfrom. L’esempio implica che l’applicazione mobile non può essere più rilasciata per il sistema Android.
La capacità di gestire la configurazione plugin di un progetto Cordova è una delle funzioni più importanti del CLI. Invece di copiare manualmente i file di plugin e di modificare manualmente i file di configurazione, il CLI ha una serie di comandi dediti alla gestione dei plugin.
Nel paragrafo precedente è stato accennato come accedere all’inclinazione del dispositivo in termini di gradi. Per poter eseguire l’aggiunta del plugin che permette di leggere tale valore basta digitare il seguente comando da CLI:
cordova plugin add cordova-plugin-device-orientation
37 Un’activity è essenzialmente una finestra che contiene l’interfaccia utente di un’applicazione ed il suo scopo è quello di permettere un’interazione con gli utenti. Un’applicazione può avere zero o più activity, anche se solitamente almeno una è presente. Dal momento in cui un’activity compare sullo schermo al momento in cui scompare essa passa attraverso una serie di stati, il cosiddetto ciclo di vita di un’activity (life cycle). Per gli sviluppatori Android nativi (programmazione in C in ambiente Linux) e standard (Java in ambiente Android) comprendere il ciclo di vita di un’activity è fondamentale per assicurarci che le applicazioni funzionino correttamente.
Questo comando si collega al repository di Apache Git e scarica l'ultima versione del plugin38.
Per la creazione del Modello particellare mobile, sono stati utilizzati i seguenti plugin:
cordova-plugin-device-orientation 1.0.7 "Device Orientation" cordova-plugin-screen-orientation 2.0.1 "Screen Orientation" cordova-plugin-whitelist 1.3.2 "Whitelist"
es6-promise-plugin 4.1.0 "Promise"
cordova-plugin-device-motion 1.2.5 "Device Motion"
I primi due plugin servono per l’installazione della bussola, il terzo plugin si occupa della navigazione nella webview delle applicazioni mobili, il quarto si occupa di gestire gli oggetti Promise che sono usati per computazioni in differita e asincrone (una Promise rappresenta un'operazione che non è ancora completata, ma lo sarà in futuro), ed il quinto si occupa di leggere l’accelerometro e tutti valori relativi al movimento dei dispositivi.
Per visualizzare l’elenco dei plugin installati in un progetto Cordova, occorre immettere il seguente comando:
cordova plugins
Il comando restituisce un array JSON come nel paragrafo soprastante.
Per rimuovere un plugin da un progetto Cordova, basta digitare uno dei seguenti comandi:
cordova plugin remove plugin_name cordova plugin rm plugin_name
Il CLI ha inoltre integrazione integrata con simulatori di piattaforme per dispositivi mobili, in modo da poter lanciare applicazioni Cordova direttamente su simulatori o dispositivi fisici.
Il comandoemulate automatizza il processo di building di un'applicazione e la distribuzione su un