Come Creare un'App Ibrida con Ionic in 3 Semplici Passaggi

Tra i miei articoli uno di queli che ha più successo è "COME CREARE UN'APPLICAZIONE IBRIDA PER DISPOSITIVI ANDROID", nel caso specifico spiego come realizzarla utilizzando Apache Cordova (Phonegap) preparando l'ambiente di sviluppo per Android su dispositivi Windows.
Da quando scrissi quella guida, tutt'oggi valida a livello di procedura e di comandi da lanciare (anche se l'organizzazione dei file generati nelle cartelle dell'app potrebbe non risultare coerente con le immagini di esempio per via di ottimizzazioni che la piattaforma ha subito nel tempo) sono seguiti Framework che da un certo punto di vista possono facilitare alcuni aspetti importanti, tra questi quello di interesse in questo articolo si chiama IONIC.

Dal mio punto di vista il vantaggio offerto da questo Framework è la facilità di creazione di interfacce grafiche per le applicazioni ibride risultanti che ben si allineano alle aspettative che un'applicazione nativa ha in termini di elementi e usabilità, per Android o iOS che sia. Di contro, a differenza del mero utilizzo di HTML5, Javascript e CSS gestibile con Cordova, il framework Ionic utilizza AngularJS come motore per definire i componenti dell'interfaccia grafica il quale, a differenza ad esempio di jQuery, non è una libreria ed ha un'infrastruttura ed un approccio tutti suoi per la realizzazione delle applicazioni, va detto anche che rispetto all'uso di solo Javascript nativo, o con appoggio a librerie come jQuery Mobile, Angular JS è molto più performante in termini di reattività.
Questa premessa è doverosa per chi intende cimentarsi nella realizzazione di app ibride con Ionic perchè senza una conoscenza, anche generale, di come funziona AngularJS il risultato sperato potrebbe non prendere mai vita.

Veniamo ora ai 3 passaggi per ottenere subito un'applicazione funzionante da utilizzare come base per il proprio progetto:

STEP 1 - INSTALLARE IONIC E CONFIGURARE L'AMBIENTE DI SVILUPPO

L'installazione di Ionic prevede come prerequisito che sul vostro PC o MAC sia installato Node.js.
Successivamente installare lo strumento CLI (Command Line Tools) di Cordova e Ionic, trovate le indicazioni ufficiali su npmjs.com.
A quel punto è necessario configurare l'ambiente di sviluppo. Trovate le indicazioni per le piattaforme di interesse sul sito ufficiale di cordova.apache.org: documentazione per Android, documentazione per iOS.
Faccio presente che per poter sviluppare un'applicazione per dispositivi iOS è necessario disporre di un MAC.

I passaggi di cui sopra sono stati da me descritti in altre guide in italiano presenti sul mio blog che per semplicità (e per evitare che Google mi penalizzi con la duplicazione dei contenuti) non riporto esplicitamente ma rimando ai relativi link che sono:

PREPARARE L'AMBIENTE DI SVILUPPO ANDROID (se non utilizzate Eclipse come IDE, ed immagino di no, potete fare a meno del relativo passaggio all'interno della guida in quanto mirato all'uso dell'IDE per lo sviluppo di applicazioni native. Per di più le linee guida di Ionic invitano gli utenti Windows ad utilizzare Visual Studio per la realizzazioni di progetti con quel sistema operativo).
COME CREARE UN'APPLICAZIONE IBRIDA PER DISPOSITIVI ANDROID (nella prima parte di questa guida è descritta l'installazione di Node.js e di Cordova)

Se qualcuno ha bisogno di aiuto per la preparazione dell'ambiente di sviluppo su MAC mi scriva nei commenti a fine articolo.

Comunque sia, una volta installato Node.js, l'installazione di cordova è delegata al relativo comando npm che sarà semplicemente il seguente:

> npm install -g cordova ionic

 

STEP 2 - CREARE UN PROGETTO IONIC

Terminata la parte di configurazione dell'ambiente di sviluppo, che è anche la più noiosa ma che fortunatamente una volta fatta non vi sarà più necessario intervenire, la strada per la realizzazione del nostro progetto è veramente tutta in discesa.
Suggerisco di creare sul vostro computer una cartella dedicata dove ospitare il primo ma anche i successivi progetti che realizzerete, in questo modo sarà tutto più organizzato e semplice da ritrovare anche dopo un eventuale periodo di inattività. Nel mio caso creo i miei progetti in "D:ionic" in ambiente Windows (sul Mac ho replicato una situazione simile).
A questo punto non resta che aprire la command line (meglio se come amministratore per evitare potenziali problemi di permessi) e spostarsi all'interno della cartella che fungerà da contenitore dei nostri progetti (con Windows tramite il comando "cd").

Ora con un semplice comando da lanciare il nuovo progetto verrà creato:

> ionic start nomeApp blank

Nel caso specifico verrà creata una cartella chiamata "miaApp" con all'interno tutti i file necessari, sia per la successiva compilazione dell'app stessa, sia per la modifica effettiva dei file html, js e css che rappresenteranno la nostra applicazione ibrida.

L'immagine seguente rappresenta la struttura del file system di un nuovo progetto Ionic creato con il comando di cui sopra e dove ho dato "appTrackingTest" come nome per la mia app:

Fig. 1 - Ionic - File system di un nuovo progetto

I file prettamente di interesse per lo sviluppo dell'applicazione si trovano all'interno della cartella "www":

Fig. 1 - Ionic - Struttura dei file della cartella www

Il progetto appena creato, come sottolineato dal termine "blank" all'interno del comando lanciato, risulterà in un'unica pagina bianca con titolo, da utilizzare come base pulita su cui andare a costruire la nostra app. Ionic però mette a disposizione anche alcuni template preimpostati con interfaccia e funzionalità generiche al fine di facilitare alcune implementazioni che, con la stessa semplicità del comando di cui sopra, saranno subito disponibili.
Per ottenere un progetto contenente già un template grafico basterà sostituire il termine "blank" al comando lanciato per la sua creazione con "tabs", per ottenere una base di app con alla base una barra contente icone divise in tab dove alla pressione sulle stesse si passa da una pagina (view) all'altra, oppure "sidemenu" per predisporre la nostra base di un menù a comparsa laterale, l'immagine di esempio seguente, prelevata dalle specifiche di Ionic, mostra quanto appena descritto:

Fig. 1 - Ionic - Tipologie standard di progetto

Ovviamente il contenuto iniziale della cartella "www", nel caso di creazione con uno dei template proposti, sarà più ricco di file rispetto all'esempio con pagina bianca.
L'avvenuta creazione del progetto da CLI dovrebbe mostrare sul terminale qualcosa come questo:

Fig. 1 - Ionic - Nuova applicazione creata con successo

 

STEP 3 - AVVIARE IL PROGETTO

Una volta che il progetto è stato creato sarà necessario aggiungervi le piattaforme su cui si intende farlo girare, come Android e/o iOS. Non è necessario aggiungerle tutte insieme, io ad esempio eseguo la prototipazione su Android e successivamente aggiungo la piattaforma di iOS e faccio le dovute correzioni.
Anche l'aggiunta della piattaforma è un processo semplice, dalla CLI recarsi all'interno della cartella del progetto su cui si intende lavorare (con Windows tramite il comando "cd"), quindi nel mio caso "cd D:ionicappTrackingTest" e lanciare il seguente comando:

> ionic platform add android

Se state lavorando invece in ambiente iOS e volete aggiungere la piattaforma per far girare la vostra app su iPhone, iPad e altri dispositivo che supportano quel sistema operativo dovrete cambiare ovviamente il nome della piattaforma: $ ionic platform add ios

L'avvenuta installazione della piattaforma dovrebbe risultare in un messaggio simile al seguente:

Fig. 1 - Ionic - Piattaforma Android aggiunta con successo

A questo punto compilare la propria app con il comando:

> ionic build android

Stesso discorso di cui sopra nel caso di compilazione di un progetto per iOS: $ ionic build ios

Dovrete attendere che la compilazione giunga al termine, solitamente impiega pochi secondi a completarsi (la prima volta può richiedere qualche secondo in più).
N.B.: se nella vostra CLI visualizzate alcuni messaggi in rosso, legati al fatto che alcuni file utilizzano o sovrascrivono API deprecate, non vi allarmate, non sono messaggi bloccanti per la compilazione bensì informativi. Un esempio potrebbe essere il seguente:

:CordovaLib:compileDebugJavaNote: Some input files use or override  a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

L'importante è che a fine compilazione visualizzate il messaggio:

BUILD SUCCESSFUL

A quel punto potete provate a lanciare la vostra app tramite il seguente comando che la eseguirà all'interno di una finestra del vostro browser:

> ionic serve

Nel caso dell'app creata con template "blank" vedrete qualcosa simile a questo:

Fig. 1 - Ionic - Avvio applicazione blank con comando ionic serve

Come è possibile notare in CLI, per il comando "ionic serve", vengono suggeriti a sua volta ulteriori comandi da utilizzare per riavviare il progetto nel browser (restart o r), per visualizzare l'output in console (consolelogs o c), per uscire dall'applicazione (quit o q) ed altri...

Nel caso invece di utilizzo del template con "sidemenu" avrete una lista di elementi e la possibilità di aprire e chiudere un menù laterale dal quale selezionare altre pagine preimpostate, una tra queste è un modello per la pagina di login:

Fig. 1 - Ionic - Avvio applicazione sidemenu con comando ionic serve

Per questo potrebbe esservi utile il mio articolo su come effettuare il DEBUG DI APPLICAZIONI CORDOVA/PHONEGAP CON CHROME.

Potete far girare la vostra app anche su un emulatore presente sul vostro computer con il comando:

> ionic emulate android

Per questo forse potrebbe interessarvi il mio articolo su come CREARE E CONFIGURARE UN EMULATORE PER ANDROID.

Se invece collegate direttamente il vostro dispositivo potrete far girare l'app direttamente sullo smartphone, il comando per farlo è il seguente:

> ionic run android

 

A questo punto... buona app!
Se avete domande o suggerimenti lasciate un commento qua sotto!