Intel XDK: il tool per realizzare app multipiattaforma in HTML5

Il panorama dei dispositivi mobile e dei sistemi operativi che animano questi device sono moltissimi, e molto spesso questi sistemi operativi mobile hanno “un linguaggio di programmazione preferito” attraverso il quale i programmatori possono realizzare le proprie applicazioni. A volte può capitare, che qualcuno abbia una bella idea, conosca un solo alcuni linguaggio di programmazione e vorrebbe realizzare della applicazioni multi-piattaforma, però non ci riesce.

Però da ora in poi l’aria è cambiata, perché in vostro aiuto arriva il tool Intel XDK, che vi permetterà di realizzare applicazioni multi-piattaforma in HTML5. Si si, avete capito bene. In questo post parleremo del tool Intel XDK che vi aiuterà a realizzare/sviluppare applicazioni multi-piattaforma direttamente e grazie al linguaggio di markup HTML5.

Intel XDK: Presentazione

Il tool, o meglio l’IDE Intel XDK è in primis un ambiente di sviluppo gratuito e multi-piattaforma, che offre per chi abbia un minimo di competenza, preferibilmente buona in HTML5, Javascript e CSS/CSS3, la realizzazione veloce di una o più Web App e allo stesso tempo può anche sviluppare delle applicazioni ibride per dispositivi mobili. Grazie al tool XDK Intel si possono sviluppare app che lavoreranno allo stesso modo su tutti i sistemi operativi mobile, cioè: Android, iOS, Windows Phone, Tizen, FirefoxOS e Ubuntu Touch.

Intel XDK ha tutto quello di cui uno sviluppatore ha bisogno e in questo post lo scopriremo insieme.

Come dicevo prima il tool Intel XDK ha le tipiche caratteristiche di un IDE, con funzioni e supporto che mettono a proprio agio sia il programmatore medio-basso che il classico programmatore professionale. Basti pensare che potete compilare facilmente applicazioni cross-platform per più app store e diverse piattaforme Web. Si perché Intel XDK offre la compilazione gratuita su Apache Cordova, PhoneGap, Ripple e Weinre.

Intel XDK: installazione e prova sul campo

Non si può parlare di un ambiente di sviluppo e dare tanti dettagli su di esso, senza averlo scaricato e poi installato. Quindi in questo passaggio andiamo a scaricare Intel XDK e poi andremo a scoprirlo insieme.

Va detto sin da subito che Intel XDK è multi-piattaforma, cioè potete installarlo sui sistemi Windows, Mac OS X e GNU/Linux (gira alla grande sulla distro Ubuntu, infatti gli screen presenti nel post sono realizzati sopra questo sistema operativo).

La procedura di installazione di questo ambiente di sviluppo è identica a tutti gli altri tool per lo sviluppo. Quindi andando a questo indirizzo, andate a scaricare il file .exe per Windows, file .dmg per Mac OS X e file .tgz per GNU/Linux.

Una cosa che devo precisare, soprattutto per chi come me utilizzerà il tool Intel XDK sopra GNU/Linux, in fase di installazione riceverete un messaggio in cui vi verrà chiesto se installare il tool come super-utente oppure utente standard. Io vi consiglio di lasciarlo come utente standard.

Per l’installazione completa, dovete avere almeno 250 MB di spazio libero sul vostro hard-disk.

Una volta completata l’installazione, tempo di un caffè veloce ed ecco che potete iniziare a scoprire e poi utilizzare Intel XDK.

All’apertura del programma, dovrete cliccare sul Sing Up per registrarvi e utilizzare il tool, se avete già un account sulla piattaforma Intel potete utilizzare quello. Una volta creato l’account e dopo esservi loggati, siete pronti per scoprire tutto l’ambiente in libertà. La prima schermata che vi troverete davanti è questa:

Intel XDK: ambiente di lavoro

La prima cosa che vi consiglio di fare, una volta avviato il tool è di leggere la documentazione di Intel XDK. All’interno vengono chiarite alcune cose essenziali, quindi prima di iniziare è meglio comprendere meglio che cos’è e cosa si deve fare per avviare un primo progetto. Dopo aver letto la documentazione potete dare il via alla realizzazione della vostra prima applicazione :

Per svolgere il lavoro al meglio, Intel XDK mette a disposizione i seguenti strumenti:

• Funzione Codec o meglio l’editor Brackets, questa funzione vi offre specifiche caratteristiche per la scrittura del codice HTML5, Javascript e CSS. È un vero e proprio editor di codice, attraverso il quale potete implementare manualmente le funzioni della vostra applicazione oppure potete modificarne delle parti.
• Funzione AppDesigner o meglio l’editor grafico, attraverso questa funzione permette di scegliere quale framework utilizzare per la realizzazione delle interfacce della propria applicazione. Quando si andrà a definire una nuova pagina html su cui lavorare si aprirà una finestra di pop-up con il seguente titolo “Select a framework”. All’interno di questa “finestra” si ha la possibilità di scegliere il framework preferito. Le scelte possibili rappresentano una buona parte, queste piattaforme sono molto familiari agli sviluppatori del web:

• Funzione AppStarter, o meglio è un ambiente, anch’esso visuale come AppDesigner, che ha la funzione di far sfruttare al massimo la libreria App Framework. In particolare, questa funzione offre un notevole contributo nella realizzazione di layout multi-view.

L’ambiente di lavoro di Intel XDK, una volta cliccato sopra la voce Design, cioè la funzione prima indicata AppDesigner, vi mostra sulla colonna di sinistra l’architettura del progetto con la sua suddivisione in cartelle e sottocartelle, poi subito dopo trovate una colonna all’interno della quale potete inserire nuove pagine, ma anche trascinare gli elementi necessari per la vostra applicazione. Nelle parte centrale della finestra trovate il corpo della vostra applicazione e la parte dove si potrà appiccicare le cose prese prima a sinistra. Sull’ultima colonna di destra ci sono altre funzioni che vi permettono di modificare la proprietà degli elementi, lo stile e l’interazione.

Nella parte alta della schermata troverete le seguenti schede: Develop, Emulate, Test, Degug, Profile e Build.

In pratica, ogni scheda che vedete nell’immagine rappresenta una fase del ciclo di produzione di una applicazione Web, oppure applicazione “classica”. Questo se si vuole realizzare qualcosa di molto serio e professionale. Vediamo di capire meglio di che cosa si tratta.

Intel XDK: illustrazione schede

• Develop è la scheda dove i tre strumenti di sviluppo indicati prima, cioè: l’editor Brackets, AppDesigner, AppStarter; vanno ad unirsi tra di loro. Quindi grazie alla scheda Develop potrete passare dallo sviluppo grafico a quello basato sul codice direttamente con un click.
• Nella scheda Emulate vi è la possibilità di vedere in tempo reale la propria app al lavoro. Questa funzione è un emulatore che vi mostrerà il comportamento della vostra applicazione sopra vari dispositivi e sistemi operativi.

• La scheda Test rappresenta un ulteriore passo avanti rispetto alla scheda Emulate (emulatore). La funzione “Test” è stata implementata per provare l’applicazione che si sta sviluppando su un dispositivo reale. Per fare questo test è necessario che sul device su cui si farà il test ci sia installata un’applicazione intitolata “Intel App Preview”. Questa applicazione la trovate in tutti market dei sistemi operativi mobile.
• Debug è la scheda dove si va a finalizzare il test della Web App in cantiere. All’interno di questa scheda potete avviare il debugging dell’applicazione e vedere il suo comportamento sopra il vostro dispositivo. Così come per la scheda Test, anche in questo caso dovete collegare un vero dispositivo al vostro PC.
• Quindi dopo aver sviluppato l’applicazione, si passa per l’Emulate, poi si fa un Test, si continua con il Debug e si conclude con il Build. Finalmente si può procedere con la compilazione del progetto e verrà generato un pacchetto di installazione dell’applicazione realizzata. All’interno di questa scheda si può scegliere tra i vari OS mobile oppure la piattaforma ibrida. Questa funzione si basa sul cloud di Intel dedicato.
• Concludo con la scheda Profile, dove potete andare a configurare al meglio il vostro dispositivo Android con il vostro PC e anche con il tool Intel XDK.

Conclusioni

Il viaggio alla scoperta del tool Intel XDK finisce qui, spero di esser stato chiaro e allo stesso tempo spero di avervi incuriosito. Questo è uno di quei strumenti che raccomando principalmente a chi è alle prime armi nel mondo della programmazione, perché è un ambiente di sviluppo all’interno del quale hai tutto a portata di mano. In più se sei nuovo in questo ambito, ha la possibilità di imparare come e quali passaggi fare per sviluppare un’applicazione mobile o web app. In più Intel XDK mette a disposizione degli sviluppatori alle prime armi anche una serie di demo.

Sostanzialmente Intel XDK è un ambiente integrato, completo e gratuito. Quindi che le danze abbiano inizio.

Per il momento questo è tutto, voi continuate a seguirci da vicino per altri dettagli e novità dal mondo della programmazione e vi anticipo che nel prossimo futuro vi saranno delle slide molto più dettagliate su questo tool. Nel mentre io resto a vostra disposizione per qualsiasi domanda o richiesta.

Seguiteci anche su Facebook, Google Plus, Tumblr e Twitter, per restare sempre in contatto con noi e con le nostre guide.

Flavius Florin Harabor

Blogger e Sviluppatore, appassionato sin da piccolo dell’informatica e di tutta la tecnologia.

androidos-lab.it