L’ambiente di sviluppo

7 settembre 2015

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 ionic

In ambiente Windows è sufficiente scrivere

npm install -g ionic

Il 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 myApp

Ecco 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:

CartellaCosa contiene
cssI file CSS derivanti dalla compilazione del codice SASS di Ionic ed eventuali altri CSS specifici per la nostra applicazione.
imgLe risorse grafiche.
libIl codice di Ionic e quello di eventuali librerie di terze parti installate tramite bower.
jsIl 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.
templatePensata 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 android

per abilitare il supporto di Android e:

ionic platform add ios

per 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

Tutte le lezioni

1 2 3 ... 29

Se vuoi aggiornamenti su L'ambiente di sviluppo inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su L'ambiente di sviluppo

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy