Gen
9
2016

Ionic Framework: sviluppare App cross-platform

Il mondo delle App (abbreviazione per Applicazione) è sicuramente quello in maggiore espansione. Basti pensare che ormai tutti o quasi abbiamo uno smartphone o un tablet che ci consente di navigare in rete, accedere ai social network, inviare messaggi, eccetera, eccetera, eccetera.

La tendenza degli ultimi mesi, che probabilmente continuerà ad estendersi in futuro (sicuramente nel 2016), è che gli addetti ai lavori (software house, programmatori freelance, ecc) sono sempre più orientati ad utilizzare framework che consentono la creazione di applicazioni cross-platform. Perché? Semplicemente perché sviluppare un’App che funzioni per dispositivi iOS ed Android, significa coprire circa l’80% del mercato degli smartphone.  Attualmente per sviluppare un’App per iOS bisogna conoscere il linguaggio Swift, mentre per Android l’attuale linguaggio richiesto è Java. E allora perché non utilizzare qualcosa che vada bene per entrambi? Per rispondere a questa domanda negli ultimi tempi sono nati diversi framework che utilizzando linguaggi adattai al web come HTML5 e Javascript, consento di sviluppare App cross-platform.

Da alcuni mesi ho iniziato a lavorare con Ionic Framework  che come come si definisce lui stesso è “is the beautiful, open-souce frontend SDK for developing hybrid mobile apps with web tecnologies“. Oggi dunque (e anche nei posts futuri) voglio descrivervi come si fa a creare un progetto con Ionic Framework partendo proprio dalla base, ovvero l’installazione, la configurazione è l’avvio di un progetto di esempio.

Prima di iniziare è giusto fare alcune premesse:

  1. Ionic utilizza, come già accennato, HTML5 ed il framework AngulaJS (by Google). Quindi è importante che si abbiamo quantomeno delle nozioni di entrambi per approfondire meglio la conoscenza di Ionic. Per oggi basterà seguire i semplici passi che seguono.
  2. Per sviluppate App per iOS è assolutamente necessario avere un Mac. Se non ne possedete uno, potrete sviluppate App solo per Android.
  3. Serve avere dimestichezza anche con un Terminale a riga di comando.

 

STEP 1: installiamo node.js

Prima di poter installare Ionic Framework è necessario installare Node.js, una runtime Javascript. Andiamo dunque sul sito https://nodejs.org/en/download/ e scarichiamo ed installazione la versione di Node.js per il nostro sistema operativo.

STEP 2: installiamo Ionic Framework

Apriamo il Terminale e scriviamo il comando (togliete ‘sudo’ se state utilizzando Windows):

sudo npm install -g cordova ionic

L’installazione durerà qualche minuto (dipende anche dalla vostra connessione Internet) e se tutto è andato bene avrete installato Ionic Framework.

STEP 3: creiamo una cartella per i progetti

E’ opportuno creare un cartella dentro cui conserveremo tutti i nostri progetti riguardanti Ionic. Possiamo creare la cartella sia da Terminale, sia utilizzando il Finder (o Esplora Risorse). Da terminale:

mkdir ProgettiIonic 

STEP 4: creiamo il primo progetto con Ionic

Ionic Framework, HTML5, AngularJS, App, iOS, Android, MobileUtilizzando il Terminale entriamo nella cartella che conterrà i nostri progetti:

cd ProgettiIonic

Quindi creiamo il nostro primo progetto che chiameremo “FirstIonic” tramite il comando:

ionic start FirstIonic tabs

La parola “tabs” serve ad indicare il template di base che verrà utilizzato per creare la nostra App. In alternativa si può utilizzare “blank” (progetto vuoto) o “sidemenu” (con menu laterale).

Durante la creazione del progetto vi verrà chiesto se creare o meno un account su “ionic.io”. Digitiamo “n”, premiamo INVIO e andiamo avanti.

Al termine della creazione Ionic avrà creato una cartella che con il nome del progetto, in questo caso “FirstIonic”.

Accediamo alla cartella del progetto con il comando:

cd FirstIonic

Per completare questo step non ci resta che aggiungere le piattaforme alle quali vogliamo destinare la nostra App. In questo caso iOS e Android (anche se Ionic consente di aggiungere anche Windows Phone). Lanciamo i comandi:

ionic platform add ios (solo su Mac)

ionic platform add android

Ionic Framework, HTML5, AngularJS, App, iOS, Android, Mobile

STEP 5: proviamo la nostra App.

Fermi! Non c’è bisogno di prendere il vostro smartphone. Almeno per il momento. Con Ionic infatti possiamo provare il funzionamento della nostra App direttamente con il browser. Io vi consiglio Google Chrome per il semplice motivo che vi consente di visualizzare la vostra App con la risoluzione di uno smartphone. Vediamo in dettaglio.

Ionic ha al suo interno un server di sviluppo che è possibile avviare con un semplice comando. Questo è molto utile in fase di sviluppo perché all’inizio non è necessario provare l’App su un dispositivo fisico, ci basta il browser. Lanciamo il server di sviluppo con il comando:

ionic serve -c

Automaticamente si aprirà il vostro browser impostato come default e potrete già vedere la prima schermata della vostra prima App sviluppata con Ionic. Prima di concludere e di lasciarvi agli screen di esempio, vi indico come visualizzare l’App su Google Chrome come se utilizzaste uno smartphone:

  1. Aprite l’indirizzo http://localhost:8100/ su Google Chrome [screen 1]
  2. Cliccate sul bottone delle opzioni in alto a destra e selezionate Altri Strumenti -> Strumenti per sviluppatori. Lo schermo verrà dunque diviso in due parti. [screen 2]
  3. Nella nuova parte che si è aperta cliccate sul bottone a form di smartphone [screen 3]
  4. Quindi selezionate lo smartphone che preferite, le relative dimensioni ed orientamento. [screen 4]

Potete navigare sui tabs dell’App presenti in basso per vedere le varie view di esempio.

Be Sociable, Share!

Informazioni sull'autore Mauro Zambito

Mi sono laureato in Informatica all'Università degli Studi di Palermo nel 2009. Da circa 10 anni sviluppo siti web, software gestionali e ultimamente anche App. Nel tempo libero mi piace andare in MTB ascoltando buona musica!

Lascia il tuo commento

Codice di Sicurezza * Time limit is exhausted. Please reload the CAPTCHA.