{"id":11543,"date":"2016-01-20T17:00:29","date_gmt":"2016-01-20T16:00:29","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=11543"},"modified":"2016-06-07T14:55:36","modified_gmt":"2016-06-07T12:55:36","slug":"crosswalk-realizzare-app-con-html5-per-qualunque-sistema-operativo","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/crosswalk-realizzare-app-con-html5-per-qualunque-sistema-operativo\/","title":{"rendered":"Crosswalk: realizzare app con HTML5 per qualunque sistema operativo"},"content":{"rendered":"

Immaginiamo di realizzare un’applicazione con HTML5, CSS e Javascript<\/strong>. Funziona bene, \u00e8 utile, ma ha bisogno di un browser per lavorare pertanto la classifichiamo come web application<\/em>. Immaginiamo ora di riuscire ad “impacchettarla” in un suo contenitore che le faccia da ambiente di esecuzione, un runtime<\/strong> 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\u00e0 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”<\/em> che tante tecnologie hanno inseguito.<\/p>\n

Il progetto che vediamo in questo tutorial, Crosswalk Project<\/strong>, fa proprio questo, offre un runtime in cui eseguire applicazioni web su tanti sistemi operativi, soprattutto quelli pi\u00f9 ricercati del momento: iOS e Android.<\/p>\n

Un runtime unico<\/h2>\n

I vantaggi di avere un unico runtime\u00a0sono molteplici. Innanzitutto, come si \u00e8 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\u00a0decuplicare competenze e personale per realizzare il medesimo software su piattaforme differenti.<\/p>\n

Da un punto di vista pi\u00f9 tecnico, si dovr\u00e0 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\u00a0browser o webview ospiti.\u00a0Inoltre le app potranno essere distribuite tramite store on line, anzi il modello di un runtime unico \u00e8 particolarmente adatto allo scopo perch\u00e8 la medesima applicazione verr\u00e0 inglobata in un pacchetto diverso per ogni sistema cui \u00e8 destinata e tale pacchetto sar\u00e0 progettato appositamente per l’ambiente in cui verr\u00e0 a trovarsi.<\/p>\n

Un esempio: creare un’app Android in HTML5<\/h2>\n

Introdotto il concetto che \u00e8 alla base di Crosswalk passiamo subito a sperimentarlo.<\/p>\n

Quello che mostreremo nel seguito sar\u00e0 la realizzazione di una semplice applicazione in HTML5 per Android. L’app in s\u00e8 stessa sar\u00e0 piuttosto banale, di puro carattere esemplificativo: ci\u00f2 su cui concentreremo la nostra attenzione sar\u00e0 il suo impacchettamento in un contenitore Crosswalk.<\/p>\n

La prima cosa da fare \u00e8 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<\/a> presente sul sito di Crosswalk offre tutte le indicazioni in merito ad ogni ambiente praticabile.<\/p>\n

Preparare una macchina di sviluppo Linux<\/h2>\n

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

Alcuni di questi prerequisiti potrebbero essere gi\u00e0 disponibili sulla macchina ma per chiarezza illustreremo qui la procedura completa.<\/p>\n

Il JDK<\/strong> (Java Developement Kit) che metter\u00e0 a disposizione il linguaggio Java pu\u00f2 essere scaricato sul sito ufficiale di Oracle<\/a>\u00a0e l’archivio cos\u00ec ottenuto dovr\u00e0 essere solo decompresso con il comando:<\/p>\n

tar zxvf nome_archivio.tar.gz<\/pre>\n
Il linguaggio Python<\/strong> potr\u00e0 essere recuperato presso il sito ufficiale<\/a>\u00a0o ancora pi\u00f9 semplicemente presso i repository della propria distribuzione. Per il nostro esempio, abbiamo percorso quest’ultima via che su Ubuntu si tradurr\u00e0 nel seguente comando:<\/p>\n
apt-get install python2.7<\/pre>\n
Anche il tool di build automation Ant<\/strong> potr\u00e0 essere scaricato dal sito ufficiale<\/a>\u00a0per poi essere decompresso in una collocazione a scelta nel file system. Infine otterremo una versione del quarto e ultimo strumento, l’Android SDK, reperibile\u00a0a questo link.<\/a><\/p>\n
Nella macchina di sviluppo, a parte Python, gli altri pacchetti sono stati collocati tutti nella cartella \/usr\/lib. Sar\u00e0 utile tenere tali i percorsi a mente perch\u00e8 dovremo ora configurare il path di sistema<\/strong> per trovarli velocemente.<\/p>\n
Nel file .bashrc<\/em> del nostro utente inseriamo le seguenti righe:<\/p>\n
export JAVA_HOME=\/usr\/lib\/jdk1.8.0_60\r\nexport PATH=\/usr\/lib\/jdk1.8.0_60\/bin:\/usr\/lib\/ant\/bin:$PATH\r\nexport PATH=\/usr\/lib\/android-sdk:$PATH\r\nexport PATH=\/usr\/lib\/android-sdk\/tools:$PATH\r\nexport PATH=\/usr\/lib\/android-sdk\/platform-tools:$PATH<\/pre>\n
Tramite il comando EXPORT creeremo la variabile d’ambiente JAVA_HOME che ricondurr\u00e0 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<\/p>\n
Con il comando:<\/p>\n
source .bashrc<\/pre>\n
le invocazioni di EXPORT appena descritte verranno rese operative.<\/p>\n
A questo punto dovremo configurare Android SDK<\/strong> 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:<\/p>\n
android<\/pre>\n
all’interno della sua interfaccia principale sceglieremo almeno un trio degli strumenti nominati, tutti con la stessa versione di API.<\/p>\n
\"crosswalk_img_01\"<\/a><\/p>\n
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…”.<\/p>\n
A questo punto la macchina Linux sar\u00e0 pronta per accogliere il pacchetto Crosswalk<\/strong> che attuer\u00e0\u00a0il build dell’applicazione HTML5. Lo potremo recuperare dalla pagina ufficiale dei download<\/a> e semplicemente decomprimerlo in una collocazione a nostra scelta nel sistema.<\/p>\n
L’applicazione HTML5<\/h2>\n
La pagina HTML che utilizzeremo come base per l’app sar\u00e0 puramente sperimentale. Sar\u00e0 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.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"http:\/\/code.jquery.com\/jquery-1.11.3.min.js\"><\/script>\r\n\r\n<\/head>\r\n<body>\r\n<h1>Scritto in HTML5<\/h1>\r\n<script>\r\n$(document).ready(\r\nfunction()\r\n{\r\n\talert(\"Hello Crosswalk!\");\r\n}\r\n);\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
Tutto ci\u00f2 ovviamente non ha un’utilit\u00e0 pratica: serve solo a provare la capacit\u00e0 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\u00e0 dinamiche.<\/p>\n
Creiamo il pacchetto Crosswalk<\/h2>\n
Il progetto da trasformare in un pacchetto Crosswalk sar\u00e0 costituito, come minimo, dalla pagina HTML vista poc’anzi, da un’immagine che diverr\u00e0 l’icona dell’app ed un file manifest scritto in formato JSON che chiameremo manifest.json ed avr\u00e0 un contenuto simile al seguente:<\/p>\n
{\r\n  \"name\": \"MyApp\",\r\n  \"xwalk_version\": \"1.0.0\",\r\n  \"start_url\": \"index.html\",\r\n  \"icons\": [\r\n    {\r\n      \"src\": \"icon.jpeg\",\r\n      \"sizes\": \"128x128\",\r\n      \"type\": \"image\/jpg\",\r\n      \"density\": \"4.0\"\r\n    }\r\n  ]\r\n}<\/pre>\n
Le informazioni in esso contenute saranno il nome e la versione dell’applicazione e la pagina da cui l’esecuzione avr\u00e0 inizio, l’homepage dell’app per intenderci. Altro aspetto importante sar\u00e0 l’icona che associeremo che ci permetter\u00e0 di riconoscere l’app nel dispositivo una volta installata. Utilizzeremo in questo caso il logo del nostro sito.<\/p>\n
Il pacchetto pu\u00f2 essere creato con il seguente comando:<\/p>\n
python crosswalk\/make_apk.py \r\n--package=it.devapp.mysimpleapp \r\n--manifest=mycrossappsimple\/manifest.json\r\n<\/pre>\n
In pratica con l’interprete Python attiveremo lo script make_apk.py<\/em> fornito dal pacchetto Crosswalk che noi abbiamo collocato nella directory crosswalk<\/em> e come opzioni indicheremo il package che servir\u00e0 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.<\/p>\n
Il build dell’applicazione produrr\u00e0 due pacchetti: uno per architettura ARM e uno per la X86. Per sperimentarlo lo installeremo su un dispositivo reale che dovr\u00e0 essere solo collegato via USB. Il comando adb<\/em>, fornito da Android SDK, verr\u00e0 utilizzato per procedere all’installazione:<\/p>\n
adb install -r Mysimpleapp_1.0.0_arm.apk<\/pre>\n
In alternativa, ovviamente si potr\u00e0 usare l’emulatoreAndroid attivabile mediante Android SDK.<\/p>\n
Una volta avviata, come qualsiasi altra app, verremo accolti dalla seguente schermata:<\/p>\n
\"crosswalk_img_02\"<\/a><\/p>\n
che dimostrer\u00e0 l’effettiva fruibilit\u00e0 dei nostri semplici contenuti prodotti in HTML e Javascript. Come vediamo, jQuery \u00e8 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>.<\/p>\n
Tra l’altro, l’app realizzata con Crosswalk viene trattata nel sistema come una normalissima applicazione. Nel pannello delle Impostazioni<\/em> la troveremo elencata tra tutte le altre applicazioni installate:<\/p>\n
\"crosswalk_img_03\"<\/a><\/p>\n
e come possiamo vedere il nome che la contraddistingue \u00e8 quello impostato nel file manifest.json. La dimensione, nonostante i contenuti ridotti, appare notevole ma ci\u00f2 \u00e8 giustificato dalla presenza degli strumenti di runtime di Crosswalk all’interno del pacchetto.<\/p>\n
Se diamo uno sguardo alle caratteristiche dell’app in dettaglio, vediamo che anche la sua versione \u00e8 impostata a quanto indicato nel file di manifest:<\/p>\n
\"crosswalk_img_04\"<\/a><\/p>\n
L’app ovviamente pu\u00f2 essere disinstallata e configurata a livello di sistema a piacimento.<\/p>\n
Conclusioni<\/h2>\n
Parlare di Crosswalk, non \u00e8 come trattare un qualunque altro strumento. Alla pari di Cordova e degli altri framework – ormai non pochi – che permettono di realizzare app multipiattaforma\u00a0 ci si sente di fronte ad una delle pi\u00f9 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.<\/p>\n
Quanto visto in questo articolo \u00e8 solo un approccio ma che illustra le principali fasi di produzione di un pacchetto Crosswalk: l’approfondimento personale pu\u00f2 partire su queste basi.<\/p>\n","protected":false},"excerpt":{"rendered":"
Immaginiamo di realizzare un’applicazione con HTML5, CSS e Javascript. Funziona bene, \u00e8 utile, ma ha bisogno di…<\/p>\n","protected":false},"author":561,"featured_media":11654,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,1],"tags":[1562,1058,1590,1589,1565,917],"class_list":["post-11543","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-strumenti-di-sviluppo","category-tutorial-pratici","tag-creare-app-android","tag-creare-app-ios","tag-creare-app-windows","tag-cross-platform-development","tag-crosswalk","tag-mobile-developers"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/11543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=11543"}],"version-history":[{"count":14,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/11543\/revisions"}],"predecessor-version":[{"id":12115,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/11543\/revisions\/12115"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media\/11654"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=11543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=11543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=11543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}