Ionic 2 è un framework che permette lo sviluppo di app ibride e cioè applicazioni scritte con tecnologie Web ma eseguite all’interno di un’applicazione nativa e possono interagire con il dispositivo grazie alle librerie CORDOVA.

Lo scopo di questo articolo non è quello di spiegare passo passo come creare la nostra prima applicazione ionic 2, per quello ci sono le guide ufficiali, ma dare alcuni dettagli su aspetti riscontrati in corso d’opera…

Per cominciare con il framework far riferimento alle guide seguenti:
http://ionicframework.com/docs/v2/
http://ionicframework.com/docs/v2/getting-started/
http://ionicframework.com/docs/v2/components/
http://ionicframework.com/docs/v2/api/

Per poter creare un progetto ionic 2 dobbiamo prima di tutto installare il software necessario e cioè:
cordova (> 6.*)
npm (> 3.*)
node (> 6.*)
ionic (> 2.*) 

Per installare ionic 2 utilizziamo il comando:
$ npm install -g ionic@beta

Per creare un progetto:
$ ionic start ionic2-tutorial-github sidemenu –v2
dove –v2 indica un progetto ionic 2
(nota: l’opzione –ts non viene utilizzata perchè viene inclusa di default;  se si vuole utilizzare invece javascript, utilizzare l’opzione –no-ts)

Per simulare il progetto nel browser
$  ionic serve –lab
dove –lab permette di visualizzare il layout per iOS, Android e Windows Phone

La struttura del progetto è la seguente:
-> app
This folder will contain all the code you’re going to write for the app, ie. the pages and services.
-> hooks
This folder contains scripts that can be executed as part of the Cordova build process. This is useful if you need to customize anything when you’re building the app packages.
-> node_modules
Ionic projects use npm to import modules, you’ll find all imported modules here.
-> resources
This folder contains the icon and splash images for the different mobile platforms.
-> typings
This folder contains type definition files for external modules that are not written in TypeScript.
-> www
This folder contains the index.html, remember all the app code should be in the app folder, not in the www folder.
-> config.xml
This file contains the configuration for Cordova to use when creating the app packages.
-> ionic.config.js
Configuration used by the Ionic CLI when excuting commands.
-> package.json
This file contains the list of all npm packages that have been installed for this project.
-> tsconfig.json
Configuration for the TypeScript compiler.
-> webpack.config.js
This file contains the configuration for WebPack, which will create a bundle from the modules in the app.

Il framework permette di generare nuove pagine o provider (tra breve un articolo su Angular 2 e TypeScript) con i comandi:
$ ionic g page about
$ ionic g provider connectivity-service

Quando viene modificato il file package.json (ad esempio per far riferimento ad una nuova versione di angular), per aggiornare il progetto con le nuove librerie e relative dipendenze è necessario il comando:
$ cd PROJECT_PATH
$ npm install

Ionic 2 utilizza gulp, un tool che permette di automatizzare le operazioni più ricorrenti e tediose, come per esempio la minificazione di files css e javascript, la loro concatenazione, l’ottimizzazione delle immagini etc.
Il file è gulpfile.js e si trova nella root del progetto. Vengono definiti dei task che poi verranno richiamati col comando gulp NOME_TASK. Per utilizzare gulp è necessario installarlo:
$ npm install gulp –save-dev
$ npm install gulp-cli –save-dev
$ npm install gulp-concat –save-dev
Un esempio di gulp task è il seguente:
var gulpConcat = require(‘gulp-concat’);

gulp.task(‘extlibs’, function() {
return gulp.src([‘www/extlibs/*.js’])
.pipe(gulpConcat(‘external-libraries.js’))
.pipe(gulp.dest(‘www/extlibs’, {overwrite: true}));
});

Per eseguire questo task viene utilizzato il comando:
$ gulp extlibs

Durante la simulazione dell’app col comando ionic –serve può capitare di visualizzare il problema There is an error in your gulpfile
Per la risoluzione è necessario pulire la cache con i comandi:
$ npm cache clear
$ npm rebuild node-sass
$ ionic serve

Un progetto ionic 2 utilizza typing, file typing.json presente nella root del progetto, per l’installazione di dipendenze varie:
– scarica directory con plugin al path /typings
– inserisce la dipendenza nel file typings.json
Per utilizzare typing bisogna installarlo  e poi è possibile utilizzarlo per ricercare dipendenze e installarle:
npm install typings –global
typings search google-maps
typings install dt~google-maps –global

Visto che con ionic 2 è possibile utilizzare il nuovo linguaggio TypeScript, è necessario utilizzare un editor che supporti questo linguaggio. Gli editor consigliati sono i seguenti:
http://ionicframework.com/docs/v2/resources/editors_and_ides/

Quello utilizzato in questi articoli è Visual Studio Code (VSC) che è gratuito ed è scaricabile al path https://code.visualstudio.com.

A breve nuovi articoli per Ionic 2, Angular 2, VSC e altro ancora.