Prima di addentrarci nel setup dell'ambiente di sviluppo di Ionic, occorre qualche premessa sui requisiti tecnici e sugli strumenti necessari: ad esempio possiamo sviluppare su Windows, Linux o Mac OS X; tuttavia per compilare app per iOS è necessario usare una macchina OS X.
Come prerequisito software, occorre avere installato node.js e Apache Cordova. Per quanto riguarda Cordova, è opportuno assicurarsi di avere installato i tool specifici per le piattaforme Android e iOS, come indicato dalle apposite sezioni della documentazione ufficiale.
>> Leggi come installare Apache Cordova!
A questo punto possiamo installare Ionic Framework scrivendo semplicemente il comando:
sudo npm install -g ionicIn ambiente Windows è sufficiente scrivere
npm install -g ionicIl pacchetto contenente tutto l'occorrente per Ionic sarà scaricato ed installato nell'ambiente node.js della nostra macchina di sviluppo.
Un progetto Ionic
La creazione di un nuovo progetto Ionic è strettamente correlato alla creazione di un progetto Cordova. Infatti, come avremo modo di vedere, Ionic fa da wrapper a diversi comandi Cordova per la gestione dell'ambiente di sviluppo.
Digitanto il seguente comando in una cartella di lavoro creeremo l'infrastruttura necessaria per sviluppare la nostra app ibrida myApp con un layout grafico supportato da Ionic:
ionic start myAppEcco il contenuto della cartella myApp creata in seguito all'esecuzione del comando:
Oltre ad alcuni file e cartelle di configurazione di Cordova, troviamo alcuni elementi specifici di Ionic. In particolare abbiamo:
- il file ionic.project che contiene la configurazione di Ionic per il progetto corrente,
- la cartella scss che contiene il codice SASS per la generazione dei CSS
- la cartella www che conterrà il codice HTML, JavaScript, CSS e tutto l'occorrente per definire la nostra app ibrida.
La cartella www
Il contenuto della cartella www dipende dal template di progetto che utilizziamo per sviluppare la nostra applicazione, come vedremo più avanti. La sua struttura standard prevede la presenza delle seguenti cartelle:
| Cartella | Cosa contiene |
|---|---|
| css | I file CSS derivanti dalla compilazione del codice SASS di Ionic ed eventuali altri CSS specifici per la nostra applicazione. |
| img | Le risorse grafiche. |
| lib | Il codice di Ionic e quello di eventuali librerie di terze parti installate tramite bower. |
| js | Il codice JavaScript della nostra applicazione. In essa troviamo una serie di file che propongono uno schema per la definizione dell'applicazione AngularJS, ma l'utente può cambiare la struttura proposta in base alle proprie esigenze. |
| template | Pensata per ospitare i template delle view Angular |
In particolare, nella cartella js sono presenti i file:
- app.js che contiene la configurazione e l'inizializzazione dell'applicazione Angular
- controllers.js destinato a contenere i controller utilizzati nell'app
- services.js e directives.js sono pensati per ospitare rispettivamente i servizi e le direttive dell'applicazione.
Infine, il file index.html contiene il markup della pagina all'interno della quale saranno visualizzate le view dell'applicazione.
App Android, iOS o entrambe?
Prima di passare a sviluppare la nostra app, non dobbiamo dimenticare di abilitare il nostro ambiente di sviluppo al supporto delle piattaforme mobile di riferimento. Il comando da eseguire è:
ionic platform add androidper abilitare il supporto di Android e:
ionic platform add iosper abilitare il supporto di iOS. Naturalmente quest'ultimo comando può essere eseguito soltanto su una macchina Mac OS X.
Nota: Le app ibride realizzate con l'attuale versione di Ionic hanno come piattaforme mobile di riferimento iOS 6 e Android 4.0 e versioni successive. Ufficialmente non sono supportate le piattaforme Windows e Windows Phone, anche se con qualche accorgimento è possibile fare girare le app Ionic su questi sistemi operativi.
Link utili
- Node.js - Guida Node.js di HTML.it - sito ufficiale
- Apache Cordova - Guida Apache Cordova di HTML.it -sito oufficiale
