Intel XDK NEW: realizzare app multipiattaforma in HTML5

La programmazione Web dagli anni ‘90 ha catalizzato l’attenzione di gran parte degli informatici mondiali. Oltre ad offrire ampie possibilità e sbocchi professionali, aveva il pregio di uniformare in gran parte il bagaglio tecnologico necessario allo sviluppatore, ruotando attorno a tecnologie comuni a molti contesti come HTML, Javascript e CSS. La successiva esplosione, rapidissima, delle applicazioni per dispositivi mobili sembrava un po’ rompere questa uniformità richiedendo strumenti, SDK e conoscenze diverse a seconda del dispositivo per il quale si voleva progettare l’applicazione. Realizzare un’app sia per Android sia per iPhone implicava la risoluzione dei medesimi problemi con ambienti e linguaggi differenti, imponendo spesso alle aziende la duplicazione delle competenze se non addirittura delle risorse umane da impiegare.

Una prospettiva da subito ben accolta perché in grado di riportare la maggiore uniformità del web nello scenario mobile era quella che si rivolgeva alle cosiddette applicazioni ibride: realizzate in HTML5/CSS3/Javascript e compatibili con le maggiori famiglie di dispositivi mobili (Android, Apple, Bada, Tizen, Windows, etc.).

Come in tutti gli ambiti informatici, ciò che in buona parte permette di ottenere grandi risultati ottimizzando gli sforzi è l’ambiente di sviluppo. Ne esiste uno, dedicato alle applicazioni ibride, che ultimamente è stato oggetto di grandi potenziamenti ed estensioni: Intel XDK.

Intel XDK NEW: primo approccio

Intel XDK NEW è un ambiente di sviluppo gratuito e multi-piattaforma che permette a chiunque possieda competenze in HTML5, Javascript e CSS di impiegarle velocemente nella realizzazione di Web app e di applicazioni ibride per dispositivi mobili. Si può utilizzare per scrivere app per Android, iOS, app per Google Chrome oppure per smartphone e tablet.

Soprattutto, Intel XDK è concepito per offrire tutto ciò che serve allo sviluppatore sia nella propria macchina di sviluppo sia con funzionalità remote offerte dalla potente infrastruttura server messa a disposizione da Intel.

Inoltre XDK New presenta un ambiente tipico da IDE con meccanismi di supporto che mettono a proprio agio sia il programmatore che il classico designer anche grazie all’apertura verso progetti “open”, molti dei quali facenti parte del grande “bacino” Apache (Cordova, Ripple e Weinre). Nelle medesime pagine si evidenzia la rapidità di accesso a questo sistema mediante un’installazione snella che non presenta difficoltà. Non resta quindi che provarlo.

Prima app con XDK: installare e provare

Prima di tutto è necessario scaricare ed installare il software. È disponibile per ogni sistema operativo: Windows, Linux e OS X. La procedura di installazione è la medesima e in nessun caso presenta grandi problemi. Verranno scaricati un .exe per Windows, un .dmg per OS X o un .tgz per Linux. Questi file saranno direttamente un eseguibile di installazione o un archivio che lo conterrà al suo interno.

L’installazione seguirà alcuni passi abbastanza ovvi che non richiederanno l’intervento dell’utente se non per l’indicazione della modalità di installazione da seguire, ad esempio in Linux verrà chiesto se si vuole installare il programma come super-utente o come utente standard. L’unico aspetto da considerare è che il programma richiederà una certa quantità di spazio, circa 150 MB, per un’installazione completa. L’utente comunque non rimarrà all’oscuro di questo aspetto in quanto la procedura di installazione dedica una schermata alla relativa comunicazione.

All’apertura del programma, viene presentato un menu, sulla sinistra, che mostra le varie possibilità per avviare il lavoro in XDK. Si può: creare un nuovo progetto da zero, importarne uno precedente, avviarlo mediante una demo o partire con un progetto basato su AppStarter o AppDesigner.

La documentazione di XDK chiarisce innanzitutto “cosa” si intende per progetto. Con questo termine ci si riferisce ad un app HTML5, senza particolari restrizioni, purché rispetti due regole:

• tutti i file devono essere contenuti in una struttura gerarchica di cartelle che si dirama a partire da una cartella root;
• l’applicazione prende il via da un file denominato index.html che deve essere presente nella cartella di progetto e non in sotto-cartelle.

Inoltre si consideri che una volta creato il progetto apparirà nella cartella root un file con lo stesso nome del progetto ma con estensione .xdk. Questo file non appartiene alla app ma al progetto XDK in se stesso, ne contiene infatti la configurazione ma non è richiesto per l’esecuzione a runtime su dispositivo.

L’ambiente di lavoro in XDK

In XDK il lavoro di sviluppo si svolge per lo più con i seguenti strumenti:

• l’editor Brackets che offre specifiche caratteristiche per la scrittura del codice HTML5, Javascript e CSS. È per lo più un editor di testo, diciamo l’opzione “meno visuale”;
• AppDesigner è un editor molto più visuale che permette di scegliere quale framework per la realizzazione delle interfacce si vuole utilizzare. Al momento di andare a definire una nuova pagina html su cui lavorare si apre una finestra dal titolo “Select a framework” che offre la possibilità di scegliere il framework preferito. Le scelte possibili rappresentano in buona parte piattaforme familiari agli sviluppatori del web, parliamo infatti di Twitter Bootstrap, jQuery Mobile, Topcoat e App Framework. Quest’ultimo probabilmente rappresenta lo strumento più “mobile” in quanto nasce appositamente per lo sviluppo per dispositivi mobili, non ha dipendenze esterne, è progettato per essere più veloce e soprattutto è in grado di modificare il suo aspetto per incontrare maggiormente quello del sistema operativo nativo su cui l’app dovrà essere eseguita;
• App Starter è un ambiente, anch’esso visuale, che nasce per sfruttare al massimo la libreria App Framework. In particolare, offre un notevole contributo nella realizzazione di layout multi-view.

Quindi i tre strumenti appena elencati sono principalmente di due nature differenti: editor di codice – il primo, Brackets – e visuali, orientati all’interfaccia utente, App Starter e App Designer. Durante il lavoro, sarà possibile passare da uno all’altro ma è bene tenere a mente che AppStarter e AppDesigner saranno disponibili solo se il progetto è stato creato in una modalità che dichiara il loro uso, altrimenti sarà disponibile solo Brackets.

L’ambiente di lavoro di XDK mostra sulla sinistra l’architettura del progetto con la sua suddivisione in cartelle e file mentre nella porzione superiore della finestra appare una struttura “a schede”.

Lo sviluppatore si muoverà attraverso una sequenza di pannelli che, nel complesso, tracciano una specie di “processo produttivo”: Develop, Emulate, Test, Build e Services. In pratica ogni scheda rappresenta una fase del ciclo di produzione di un’app. Vediamo brevemente ognuna di esse quale scopo si prefigge e cosa offre.

Intel XDK NEW: Develop

La prima tab – Develop – sarà il terreno in cui si contenderanno il dominio i tre strumenti di sviluppo già menzionati: Brackets, AppDesigner, AppStarter. Il loro alternarsi dipenderà dalle scelte che sono state fatte in fase di inizializzazione del progetto ma anche in base alle esigenze del programmatore, infatti se si sarà reso disponibile anche uno tra AppDesigner o AppStarter in alto a sinistra sarà disponibile una specie di controllo “toggle” che permetterà di lavorare in modalità “Codice” o “Design”, sfruttando quindi Brackets o uno dei due designer.

Intel XDK NEW: Emulate

La tab Emulate invece permette di vedere la propria app al lavoro. Mostra un emulatore che nel display riproduce la propria applicazione. Gli aspetti interessanti di questa scheda sono molti. Uno dei primi che si nota è che il dispositivo dell’emulatore non rappresenta un terminale generico ma mediante un menu a tendina è possibile scegliere il dispositivo che si vuole venga emulato. All’apertura si presenta un Motorola Droid 2 basato su Android ma volendo si può passare ad un iPhone 5 oppure ad un Nokia Lumia 920 con sistema operativo Windows Phone.

Questa tab cerca di offrire maggiori potenzialità di debug rispetto ad un browser. Ciò è richiesto soprattutto quando nelle app ibride si chiamano in causa API riguardanti i sensori del dispositivo o la localizzazione. Inoltre con un semplice click si può testare il software simulando orientamenti diversi del dispositivo, passando dalla posizione landscape a portrait e viceversa.

Intel XDK NEW: Test

La terza scheda di XDK è intitolata Test e rappresenta un ulteriore passo avanti rispetto a “Emulate”. Mentre quest’ultima si occupava di presentare l’applicazione su un dispositivo simulato, “Test” è finalizzato a provare l’app su un dispositivo reale. Per fare ciò è necessario che sul terminale di test sia installata un’app di nome “Intel App Preview”. Esiste per i maggiori sistemi operativi mobile ed è resa disponibile direttamente sugli store primari come Google Play per Android e Apple Store per iPhone. Possiamo dire che AppPreview costituisce la controparte della nostra macchina di sviluppo.

Per chi, ad esempio, proviene dalla programmazione Android, il ruolo svolto da App Preview può ricordare un po’ quello di ADB, un ponte tra il computer con cui programmiamo ed il dispositivo su cui vogliamo provare l’applicazione. Questo procedimento permette di debuggare un’applicazione su dispositivo reale senza effettuare un vero e proprio build. Ciò è consentito dall’infrastruttura remota messa a disposizione da Intel, in pratica l’applicazione viene eseguita su un vero terminale in una container app, attraverso Internet. Per usufruire di questo servizio è necessario possedere un account a Intel XDK che si può ottenere velocemente con una registrazione senza uscire dal programma. Le stesse credenziali devono essere inserite in App Preview sul dispositivo mobile.

Intel XDK NEW: Build

Dopo il test emulato ed il debug su dispositivo reale delle precedenti schede “Emulate” e “Test”, nella scheda Build si può procedere ad una compilazione vera e propria del progetto che porterà a scaricare sul proprio computer un pacchetto di installazione dell’applicazione. Per ottenere questo risultato, in generale, sarebbe necessario un SDK del sistema operativo destinazione, quindi per un app multipiattaforma servirebbe avere a disposizione ambienti di compilazione di ogni possibile sistema. Tutto ciò sarebbe una grossa complicazione. Con Intel XDK non serve perché il supporto al build lo offre ancora Intel, da remoto, mettendo a disposizione il suo cloud. Come si vede in figura, aprendo la tab “Build” appaiono al programmatore una serie di icone ognuna delle quali riportante un pulsante con etichetta “Build” ed un riferimento ad un sistema operativo.

È sufficiente cliccare su uno di questi pulsanti per avviare la produzione di un pacchetto di installazione per il sistema relativo. Il procedimento richiede l’accesso mediante le citate credenziali ed impiegherà qualche secondo proprio perché la compilazione avviene in remoto. Una volta ottenuto l’installer, ad esempio un .apk per Android, lo si potrà usare su dispositivi o per distribuirlo a piacimento. In merito, è bene osservare che l’inserimento della propria app nei market ufficiali – Apple Store, Goole Play, etc. – esula dalle pur vaste competenze di XDK e, allo scopo, è necessario seguire le procedure ufficiali con le consuete condizioni e costi.

Intel XDK NEW: Services

L’ultima tab di XDK è intitolata Services e raccoglie una serie di servizi di terze parti eventualmente integrabili nella propria applicazione come, ad esempio, servizi push per la messaggistica, servizi di analytics per il tracciamento degli utilizzi dell’app, servizi di acquisto in-app e così via.

Conclusioni

Ciò che si dovrebbe evincere da questa presentazione è non tanto la conoscenza delle funzionalità disponibili, quanto la completezza che Intel XDK NEW vuole offrire. Lo sviluppatore dovrebbe poter entrare in XDK e trovare una piattaforma di lavoro dalla quale non ha più bisogno di uscire grazie agli strumenti messi a disposizione e al supporto remoto del possente cloud Intel. Per il neofita che desiderasse sperimentare da vicino come nasce un app ibrida, non resta che creare un nuovo progetto, magari partendo da una demo, ed in serie passare per le varie fasi di emulazione, test e build, tenendo se possibile a portata di mano un dispositivo reale.

Un ambiente integrato, completo e gratuito: questa era la promessa di Intel quando XDK ha mosso i suoi primi passi. Ora che la piattaforma si è evoluta e aggiornata, questa promessa sembra sempre più mantenuta.

I marchi Intel®, Apple®, Google® e Microsoft® sono proprietà intellettuale delle rispettive aziende. Android™, Bada™, Tizen™, Windows™ e Lumia™ sono marchi registrati.