Immaginiamo di realizzare un’applicazione con HTML5, CSS e Javascript. Funziona bene, è utile, ma ha bisogno di un browser per lavorare pertanto la classifichiamo come web application. Immaginiamo ora di riuscire ad “impacchettarla” in un suo contenitore che le faccia da ambiente di esecuzione, un runtime come si dice, e che questo involucro la renda installabile ed eseguibile su un qualunque sistema operativo, sia mobile (Android, iOS, Tizen) sia desktop come Windows o Linux. Avremmo ottenuto la possibilità di realizzare applicazioni portabili ovunque, sviluppate sempre con le stesse tecnologie – quelle del web che conosciamo bene – mettendo in pratica quel sogno sintetizzato alla perfezione da espressioni come “write once, run everywhere” che tante tecnologie hanno inseguito.

Il progetto che vediamo in questo tutorial, Crosswalk Project, fa proprio questo, offre un runtime in cui eseguire applicazioni web su tanti sistemi operativi, soprattutto quelli più ricercati del momento: iOS e Android.

Un runtime unico

I vantaggi di avere un unico runtime sono molteplici. Innanzitutto, come si è detto, si potranno usare le stesse tecnologie per realizzare software per qualunque sistema operativo, mobile e non, permettendo a tutti coloro che ne sono esperti di non dover imparare nulla di nuovo e alle aziende di non essere costrette a decuplicare competenze e personale per realizzare il medesimo software su piattaforme differenti.

Da un punto di vista più tecnico, si dovrà imparare a conoscere un unico ambiente di esecuzione, quello offerto da Crosswalk, con le sue caratteristiche senza dover tenere in considerazione le differenze tra i vari browser o webview ospiti. Inoltre le app potranno essere distribuite tramite store on line, anzi il modello di un runtime unico è particolarmente adatto allo scopo perchè la medesima applicazione verrà inglobata in un pacchetto diverso per ogni sistema cui è destinata e tale pacchetto sarà progettato appositamente per l’ambiente in cui verrà a trovarsi.

Un esempio: creare un’app Android in HTML5

Introdotto il concetto che è alla base di Crosswalk passiamo subito a sperimentarlo.

Quello che mostreremo nel seguito sarà la realizzazione di una semplice applicazione in HTML5 per Android. L’app in sè stessa sarà piuttosto banale, di puro carattere esemplificativo: ciò su cui concentreremo la nostra attenzione sarà il suo impacchettamento in un contenitore Crosswalk.

La prima cosa da fare è approntare l’ambiente di lavoro. Per farlo, dobbiamo, da un lato, preparare la macchina di sviluppo con gli strumenti che Crosswalk in generale richiede, e dall’altro fornirlo di eventuali ambienti dovuti alla scelta del sistema operativo destinazione: nel caso di Android, un SDK ufficiale. La documentazione presente sul sito di Crosswalk offre tutte le indicazioni in merito ad ogni ambiente praticabile.

Preparare una macchina di sviluppo Linux

Svolgeremo l’esempio su una macchina Linux la quale per poter far lavorare Crosswalk avrà bisogno essenzialmente di tre cose: Java, Python e Ant per la build automation. Completeremo il tutto aggiungendo l’Android SDK.

Alcuni di questi prerequisiti potrebbero essere già disponibili sulla macchina ma per chiarezza illustreremo qui la procedura completa.

Il JDK (Java Developement Kit) che metterà a disposizione il linguaggio Java può essere scaricato sul sito ufficiale di Oracle e l’archivio così ottenuto dovrà essere solo decompresso con il comando:

tar zxvf nome_archivio.tar.gz

Il linguaggio Python potrà essere recuperato presso il sito ufficiale o ancora più semplicemente presso i repository della propria distribuzione. Per il nostro esempio, abbiamo percorso quest’ultima via che su Ubuntu si tradurrà nel seguente comando:

apt-get install python2.7

Anche il tool di build automation Ant potrà essere scaricato dal sito ufficiale per poi essere decompresso in una collocazione a scelta nel file system. Infine otterremo una versione del quarto e ultimo strumento, l’Android SDK, reperibile a questo link.

Nella macchina di sviluppo, a parte Python, gli altri pacchetti sono stati collocati tutti nella cartella /usr/lib. Sarà utile tenere tali i percorsi a mente perchè dovremo ora configurare il path di sistema per trovarli velocemente.

Nel file .bashrc del nostro utente inseriamo le seguenti righe:

export JAVA_HOME=/usr/lib/jdk1.8.0_60
export PATH=/usr/lib/jdk1.8.0_60/bin:/usr/lib/ant/bin:$PATH
export PATH=/usr/lib/android-sdk:$PATH
export PATH=/usr/lib/android-sdk/tools:$PATH
export PATH=/usr/lib/android-sdk/platform-tools:$PATH

Tramite il comando EXPORT creeremo la variabile d’ambiente JAVA_HOME che ricondurrà alla collocazione del JDK e aggiorneremo la variabile PATH che definisce i percorsi di sistema in cui vengono cercati per default i comandi. D’ora in poi, tutti i tool inclusi nel JDK, in Ant e Android SDK saranno prontamente attivabili senza indicarne il percorso

Con il comando:

source .bashrc

le invocazioni di EXPORT appena descritte verranno rese operative.

A questo punto dovremo configurare Android SDK dotandolo almeno di una piattaforma di sviluppo Android e dei relativi Platform-tools e Build-tools. Attiveremo l’Android SDK Manager da riga di comando:

android

all’interno della sua interfaccia principale sceglieremo almeno un trio degli strumenti nominati, tutti con la stessa versione di API.

Per chi non fosse particolarmente pratico, Android SDK Manager richiede solo di selezionare le checkbox relative alla componente da scaricare e cliccare il pulsante in basso a destra “Install…”.

A questo punto la macchina Linux sarà pronta per accogliere il pacchetto Crosswalk che attuerà il build dell’applicazione HTML5. Lo potremo recuperare dalla pagina ufficiale dei download e semplicemente decomprimerlo in una collocazione a nostra scelta nel sistema.

L’applicazione HTML5

La pagina HTML che utilizzeremo come base per l’app sarà puramente sperimentale. Sarà costituita da uno schema di base HTML in cui includeremo la libreria Javascript jQuery tramite CDN e, una volta avvenuto il caricamento della pagina, le chiederemo di aprire un semplice alert.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

</head>
<body>
<h1>Scritto in HTML5</h1>
<script>
$(document).ready(
function()
{
	alert("Hello Crosswalk!");
}
);
</script>
</body>
</html>

Tutto ciò ovviamente non ha un’utilità pratica: serve solo a provare la capacità di Crosswalk di creare veri software portabili con le tecnologie web e verificare che la nostra app di prova sia in grado di attivare funzionalità dinamiche.

Creiamo il pacchetto Crosswalk

Il progetto da trasformare in un pacchetto Crosswalk sarà costituito, come minimo, dalla pagina HTML vista poc’anzi, da un’immagine che diverrà l’icona dell’app ed un file manifest scritto in formato JSON che chiameremo manifest.json ed avrà un contenuto simile al seguente:

{
  "name": "MyApp",
  "xwalk_version": "1.0.0",
  "start_url": "index.html",
  "icons": [
    {
      "src": "icon.jpeg",
      "sizes": "128x128",
      "type": "image/jpg",
      "density": "4.0"
    }
  ]
}

Le informazioni in esso contenute saranno il nome e la versione dell’applicazione e la pagina da cui l’esecuzione avrà inizio, l’homepage dell’app per intenderci. Altro aspetto importante sarà l’icona che associeremo che ci permetterà di riconoscere l’app nel dispositivo una volta installata. Utilizzeremo in questo caso il logo del nostro sito.

Il pacchetto può essere creato con il seguente comando:

python crosswalk/make_apk.py 
--package=it.devapp.mysimpleapp 
--manifest=mycrossappsimple/manifest.json

In pratica con l’interprete Python attiveremo lo script make_apk.py fornito dal pacchetto Crosswalk che noi abbiamo collocato nella directory crosswalk e come opzioni indicheremo il package che servirà a identificare l’app nel sistema ospite ed il file manifest che rappresenta il collante della nostra applicazione. Per eseguire il comando nel proprio sistema si faccia attenzione a riprodurre esattamente i percorsi corretti di installazione e non quelli qui riportati che sono validi nel nostro sistema di prova.

Il build dell’applicazione produrrà due pacchetti: uno per architettura ARM e uno per la X86. Per sperimentarlo lo installeremo su un dispositivo reale che dovrà essere solo collegato via USB. Il comando adb, fornito da Android SDK, verrà utilizzato per procedere all’installazione:

adb install -r Mysimpleapp_1.0.0_arm.apk

In alternativa, ovviamente si potrà usare l’emulatoreAndroid attivabile mediante Android SDK.

Una volta avviata, come qualsiasi altra app, verremo accolti dalla seguente schermata:

che dimostrerà l’effettiva fruibilità dei nostri semplici contenuti prodotti in HTML e Javascript. Come vediamo, jQuery è stata attivata con successo anche tramite CDN e, al caricamento della pagina, ha mostrato una finestra di alert mentre sullo sfondo si vede il testo scritto tramite tag <h1>.

Tra l’altro, l’app realizzata con Crosswalk viene trattata nel sistema come una normalissima applicazione. Nel pannello delle Impostazioni la troveremo elencata tra tutte le altre applicazioni installate:

e come possiamo vedere il nome che la contraddistingue è quello impostato nel file manifest.json. La dimensione, nonostante i contenuti ridotti, appare notevole ma ciò è giustificato dalla presenza degli strumenti di runtime di Crosswalk all’interno del pacchetto.

Se diamo uno sguardo alle caratteristiche dell’app in dettaglio, vediamo che anche la sua versione è impostata a quanto indicato nel file di manifest:

L’app ovviamente può essere disinstallata e configurata a livello di sistema a piacimento.

Conclusioni

Parlare di Crosswalk, non è come trattare un qualunque altro strumento. Alla pari di Cordova e degli altri framework – ormai non pochi – che permettono di realizzare app multipiattaforma  ci si sente di fronte ad una delle più grandi sfide che il mobile possa affrontare: superare i confini della programmazione nativa e capire fino a che punto un’app scritta in HTML e Javascript possa essere realmente una soluzione a tutte le problematiche.

Quanto visto in questo articolo è solo un approccio ma che illustra le principali fasi di produzione di un pacchetto Crosswalk: l’approfondimento personale può partire su queste basi.