Guida alla realizzazione di App Android ibride con Apache Cordova, in ambiente Windows

In questa semplice guida vedremo come installare tutta la toolchain necessaria per sviluppare App Android ibride HTML5 con Apache Cordova, comodamente, fino al deployment finale.

Innanzitutto una precisazione: tutti quelli che mi conoscono sanno benissimo che non lavoro sotto Windows (salvo casi di estrema necessità). Tranquilli, non sono impazzito: ultimamente sto tenendo dei corsi di sviluppo App in HTML5 in alcuni istituti superiori pubblici, nei quali, ahimè, l’uso di sistemi GNU/Linux non è per niente contemplato, o comunque poco praticabile…
Questa guida infatti è diretta principalmente a loro. Avrei dovuto produrre delle slides da distribuire, ma ho pensato che sarebbe stato più semplice scrivere tutto qui.

Ok, detto questo, iniziamo a vedere inizialmente cosa si intende per “App ibrida”.

Le App “ibride”

Gli smartphone sono dispositivi nati espressamente per interagire con internet. Per questo motivo integrano dei browser web sempre aggiornati, e allo stato dell’arte.
Sulla base di questo un’azienda, la Nitobi, ebbe, qualche anno fa, un’intuizione geniale: utilizzare una finestra browser a fullscreen (quindi senza barre di navigazione ed altro) per visualizzare applicazioni scritte in tecnologia HTML5/CSS/JavaScript come se fossero delle applicazioni native, integrando inoltre nel framework un bridge di funzionalità per accedere dall’ambiente javascript alle funzioni e ai dispositivi nativi dello smartphone (camera, accelerometro, microfono…).

Questo ci offre dei vantaggi importantissimi:

  • poter sviluppare usando tecnologie comode e semplici (HTML5/CSS/JavaScript) invece di usare i linguaggi di programmazione proprietari delle piattaforme (chi ha mai sviluppato un’app nativa in Java per Android, può capire di cosa sto parlando);
  • massima personalizzabilità dell’interfaccia grafica: non siamo infatti costretti ad utilizzare i layout nativi del dispositivo. Abbiamo tutta la libertà che vogliamo, proprio come se fosse una normale pagina web. Possiamo usare bootstrap, jQuery, AngularJS, e tutte le tecnologie che useremmo solitamente per delle normali web applications e web pages. Questo inoltre ci consente di avere lo stesso look and feel anche su diverse versioni del sistema operativo presente sui dispositivi;
  • poter scrivere l’applicazione una sola volta ed essere compatibili con tutti i dispositivi supportati da Cordova;
  • tempi ridotti di sviluppo: è possibile sviluppare e testare gran parte dell’applicazione solo ed esclusivamente utilizzando il browser del computer di sviluppo, e poi fare il deployment sul dispositivo di destinazione solo in fase finale (qualora ovviamente non si usino funzionalità native dello smartphone). Grazie inoltre alla natura stessa delle tecnologie utilizzate, non abbiamo tempi morti dovuti alla compilazione, in quanto le applicazioni vengono lanciate e interpretate al volo dal browser;

Sulla pagina wikipedia di Apache/Cordova ( https://it.wikipedia.org/wiki/Apache_Cordova) infatti troviamo questo:

Apache Cordova (ex PhoneGap) è un framework per lo sviluppo di applicativi per dispositivi mobili originariamente creato da Nitobi. Adobe Systems acquisì Nitobi nel 2011 e creò il nuovo marchio “PhoneGap”, che fu poi successivamente rilasciato in versione open source e chiamato nuovamente Apache Cordova[1][2].

Apache Cordova permette ai programmatori di creare applicazioni mobili usando CSS3, HTML5 e Javascript invece di affidarsi ad API specifiche delle piattaforme Android, iOS o Windows Phone[3]. Il framework incapsula poi il codice CSS, HTML e JavaScript generato all’interno delle predette piattaforme. Le applicazioni generate dal framework non possono né considerarsi puramente native (il rendering della struttura grafica è fatto con visualizzazioni web) né basate completamente sul web (Il programma viene impacchettato come una applicazione per la distribuzione e hanno accesso alle API native dei dispositivi mobili). Mescolare snippet di codice nativo e ibrido è possibile dalla versione 1.9. Apache Cordova incapsula i programmi in applicativi mobili con Appery.io o Intel XDK.

Al progetto Apache Cordova contribuiscono: Adobe, BlackBerry, Google, IBM, Intel, Microsoft, Mozilla e altri.[4]

Installazione della toolchain di sviluppo

Per ogni lavoro, abbiamo bisogno di usare degli strumenti necessari. Per toolchain, infatti, si intende tutto l’insieme di strumenti necessari a realizzare uno specifico task di programmazione.

Gli strumenti che andremo ad installare sono quelli di seguito. La guida è per sistemi Windows 7 (avevo già una macchina virtuale installata…). I passi descritti di seguito non dovrebbero essere molto diversi, per nuove versioni di Windows.

  • AndroidStudio: l’IDE ufficiale di sviluppo di Google per dispositivi Android. E’ basato sul meraviglioso IDE IntelliJ. In realtà non avremmo bisogno dell’IDE in quanto tale, ma l’installazione integra automaticamente l’Android SDK, che altrimenti dovremmo installare a mano;
  • NodeJS: si tratta di un ambiente di runtime per applicazioni server in JavaScript. E’ basato sul motore JavaScript V8 (integrato in Google Chrome), attualmente lo stato dell’arte nei runtime JavaScript;
  • GIT for Windows: si tratta del tool di versionamento GIT, per sistemi Windows. In pratica potremmo farne anche a meno, ma vi consiglio vivamente di installarlo, in quanto il pacchetto include una versione della Bash shell per ambienti Windows: uno strumento estremamente necessario, in quanto la shell di Windows (quel giocattolo chiamato “Prompt dei comandi”), è poco più di un giocattolo (e lo sto trattando bene…);
  • Apache Cordova: lo installeremo tramite la Bash shell di cui sopra;

Step 1: Installiamo Android Studio

Apriamo un browser all’indirizzo https://developer.android.com/studio/index.html e scarichiamo l’installer per windows:

AndroidStudio_web_screenshot

L’installer è piuttosto grosso (alla data attuale 1.8 Gigabytes!) in quanto la maggior parte è occupata dall’Android SDK. Nota: al termine dell’installazione, non è necessario lanciare Android Studio.

AndroidStudio_Screenshot_20170507_193552

AndroidStudio_Screenshot_20170507_194148

Step 2: Installiamo NodeJS

Apriamo un browser all’indirizzo https://nodejs.org e scarichiamo, dalla pagina dei downloads, il pacchetto Windows Installer per la nostra versione del sistema operativo:

NodeJS_Screenshot_20170507_195155

Quindi facciamo partire l’installazione:

NodeJS_Screenshot_20170507_195448

NodeJS_Screenshot_20170507_195600

Step 3: Installiamo GIT For Windows

Apriamo un browser all’indirizzo https://git-scm.com/download/win . Partirà in automatico il download per la versione windows in esecuzione. Una volta scaricato, facciamo partire l’installazione.

GITForWindows_Screenshot_20170507_195814

GITForWindows_Screenshot_20170507_200145

GITForWindows_Screenshot_20170507_200255

GITForWindows_Screenshot_20170507_200406

Step 4: Installiamo Apache Cordova

Individuate o create la vostra directory dove creare il progetto, quindi cliccatela col tasto destro del mouse. Se avete installato correttamente il pacchetto GIT For Windows, dovreste avere una voce “GIT Bash Here”. Cliccate su quella, e si aprirà una Bash Shell nella directory selezionata.

GITBash_Screenshot_20170507_200720

GITBash_Screenshot_20170507_201115

Per installare Apache Cordova, digitate nella shell il comando:

npm install -g cordova

e battete invio. Con questo comando state ordinando al gestore di pacchetti di NodeJS (npm, NodeJS Package Manager) di installare il pacchetto cordova. Il parametro -g serve a specificare di installarlo globalmente (cioè per tutti gli utenti).  

CordovaInstall_Screenshot_20170507_201432

dopo un pò otterrete questo (il ritorno del prompt alla fine indicherà che l’operazione è terminata):

CordovaInstall_Screenshot_20170507_202051

Step 5: creiamo il nostro primo progetto Cordova!

Sempre dalla stessa Bash shell, controllando di essere nel path giusto, vi basterà digitare il comando:

cordova create <nome_del_vostro_progetto>

CordovaCreate_Screenshot_20170507_202454

CordovaCreate_Screenshot_20170507_202604

Infatti potrete vedere che Cordova ha inizializzato il progetto con già tutto il contenuto necessario:

CordovaCreate_Screenshot_20170507_202829

Tornate quindi nella Bash shell, spostatevi nella directory del progetto (cd <nome_del_vostro_progetto>) e quindi date il comando:

cordova platform add browser

CordovaCreate_Screenshot_20170507_203014

in pratica in questo modo abbiamo ordinato a Cordova di aggiungere una piattaforma target al nostro progetto (in questo caso, il target browser).

A questo punto possiamo lanciare la nostra applicazione. Per farlo, basta digitare in console il comando:

cordova run browser

il quale lancerà un webserver locale sulla porta 8000 (http://localhost:8000) e aprirà il browser di sistema a quell’indirizzo. Dovreste vedere questo:

CordovaRunBrowser_Screenshot_20170507_203954

Significa che l’applicazione è attiva e funzionante 😉 Possiamo quindi iniziare a sviluppare il nostro codice.

Step 6: personalizziamo il codice

Andando a guardare nella directory del progetto, potremo notare che è presente una directory “www”, la quale ha questo contenuto:

CordovaCreate_Screenshot_20170507_204630

quelli sono i files HTML, CSS e JavaScript della nostra applicazione. Proviamo infatti a modificare il contenuto del file index.html con un editor di testo:

CordovaCreate_Screenshot_20170507_205303

quindi salviamo il file, arrestiamo il server locale di cordova premendo CTRL+C in console, e rilanciamo (ci basta premere cursore “su” per richiamare il comando). Si riaprirà il browser con la nostra applicazione modificata:

CordovaCreate_Screenshot_20170507_205607

semplicissimo 😉

Bonus: installiamo la funzionalità di live reload

Siccome è molto antipatico dover stoppare e riavviare il server locale di Cordova ad ogni modifica, e visto che uno dei principali motivi per cui usiamo tecnologie HTML5 e JavaScript è proprio la velocità di sviluppo, ci aspettiamo di vedere, ad ogni modifica del codice, un risultato immediato.

Per ottenere questo con Cordova, ci basta installare un semplice plugin, chiamato browsersync (il progetto è visibile qui: https://github.com/nparashuram/cordova-plugin-browsersync).

L’installazione è semplicissima:

  1. sempre dalla console bash, digitiamo il comando:
    cordova plugin add cordova-plugin-browsersync

    il quale provvederà automaticamente a scaricare ed installare il plugin nell’ambiente cordova.

  2. fatto questo, dobbiamo aggiungere la proprietà

    ws: ‘unsafe-inline’
    

    nel tag meta del file html principale dell’applicazione, in questo modo:

    CordovaBrowsersync_Screenshot_20170509_213308
    (l’immagine è presa dal video di documentazione del plugin. Nel primo tag <meta> si può vedere la proprietà ws: ‘unsafe-inline’)
  3. infine, ci basta rilanciare il webserver di cordova con il comando:

    cordova run -- --live-reload

Modificando e salvando i files della nostra applicazione, potremo notare con grande piacere che il browser aggiornerà automaticamente la pagina:

CordovaBrowsersync_Screenshot_20170509_214049

Step 7: installiamo la platform Android

Siamo finalmente pronti per creare il nostro pacchetto .apk da installare su Android. Per fare questo, dobbiamo installare la target platform Android in Cordova, con il comando:

cordova platform add android

CordovaAddAndroid_Screenshot_20170509_215521

Step 8: testiamo l’applicazione su Android

Il test dell’applicazione, come per gli altri passaggi, è molto semplice. Infatti basta dare il comando (sempre nella bash console):

cordova emulate android

per lanciare l’applicazione nell’emulatore Android.

Se invece avessimo voluto eseguire l’applicazione direttamente su un device collegato al sistema via cavo usb, il comando sarebbe stato:

cordova run android

Nota: lanciando per la prima volta questi comandi, Cordova scaricherà automaticamente dalla rete dei files di dipendenza, per poter compilare l’app. L’operazione impiegherà un pò di tempo.

Step 9: build finale dell’applicazione (generazione file .apk)

Il build è altrettanto semplice. Ci basta digitare il comando:

cordova build android

e in un attimo avremo il nostro apk (in versione debugunsigned, attenzione) da poter installare sui nostri device android.

CordovaBuildScreenshot_20170516_174934

Attenzione: come specificato, l’apk è in versione unsigned. Ciò significa che non possiamo pubblicarlo sul Play Store. Per farlo, dobbiamo sottoscrivere un’account da sviluppatore, ottenere le chiavi uniche di cifratura, e fare il build in versione signed.
Vi invito quindi a seguire la documentazione ufficiale, in merito.

Buona programmazione!

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...