Hello Ionic

In questo articolo parleremo di Ionic: un framework per creare app ibride. Un’app ibrida è in pratica un’app multipiattaforma che gira all’interno di una WebView e sono quindi sviluppate utilizzando HTML, CSS e Javascript. Il framework principe per la creazione di questa tipologia di app è Apache Cordova, grazie a questa libreria possiamo interfacciarci con il nostro dispositivo (fotocamera, filesystem, GPS, etc…) tramite delle semplici chiamate Javascript. Il grosso svantaggio di questo approccio allo sviluppo mobile sta nelle prestazioni: considerate che ogni comando dovrà essere interpretrato da un browser, quindi non potrete mai avere la stessa reattività di un’applicazione nativa. D’altro canto con una sola codebase otterrete un’applicazione che girerà non solo su iOS e Android, ma anche su sistemi più di nicchia come Windows Phone e Firefox OS.

La particolarità di Ionic sta nel fatto che raggruppa in unico framework Apache Cordova e , fornisce inoltre una serie di componenti che velocizza di molto la creazione di un’applicazione.

Setup

Per iniziare a lavorare con Ionic è necessario avere sulla vostra macchina e soprattutto il suo package manager: npm. Per installare Ionic ci basterà digitare sul terminale:

npm install -g ionic

Una volta completato il setup possiamo creare e lanciare lo stub di un’app con il seguente comando:

ionic start myApp
cd myApp
ionic platform add ios
ionic run ios

Il risultato che otterrete sarà un’applicazione iOS di esempio, che conterrà molti elementi tipici di Ionic.

Struttura del progetto

Il progetto appena creato avrà la seguente struttura

Come potete vedere l’applicazione AngularJS è tutta all’interno della cartella www, gli altri file di interesse sono:

• config.xml: file di configurazione del progetto dove andiamo a definire le informazioni base come package e nome dell’applicazione e alcuni settings come l’orientamento dello schermo.
• gulpfile.js: il file dove andiamo a configurare gulp.js, il task runner utilizzato da Ionic
• bower.json: in questo file vengono elencate le dipendenze gestite tramite il package manager bower, il quale a differenza di npm viene utilizzato per applicazioni client.

Creiamo un’applicazione

La nostra prima applicazione con Ionic sarà una banale todo-list, formata da un elenco delle nostre attività e una pagina di dettaglio nella quale possiamo inserire un nuovo todo. Cominciamo con l’analizzare la pagina index.html, la quale farà da template per la nostra applicazione

La prima cosa da notare rispetto ad un’applicazione AngularJS “canonica” è che manca proprio l’import di AngularJS. Abbiamo al suo posto il file ionic.bundle.js, composto da una versione AngularJS e le direttive e i service di Ionic. Personalmente questo approccio non mi entusiasma, avrei preferito che la dipendenza da AngularJS fosse stata esplicita.

All’interno del body notiamo delle direttive nella forma , queste direttive sono il marchio di fabbrica di Ionic. La prima delle due è un semplice container. Mentre la direttiva verrà sostituita di volta in volta con il template corrente.

ui-router

Ionic utilizza il sistema di routing ui-router, la sua particolarità è quella di legare i template non ad un URL, bensì ad uno stato. Il vantaggio principale rispetto al classico ngRoute è quello di poter creare degli stati annidati che condivideranno parte del codice HTML. Per definire gli stati della nostra applicazione basta aggiungere il provider $stateProvider come possiamo vedere nel prossimo esempio.

angular.module('todo', ['ionic'])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/list");
    $stateProvider.state('list', {
      url: "/list",
      controller: 'List',
      templateUrl: "templates/list.tpl.html"
    }).state('detail', {
      url: "/detail",
      controller: 'Detail',
      templateUrl: "templates/detail.tpl.html"
    });
  });

Elementi Ionic

Scendiamo nel dettaglio della nostra piccola app per comprendere alcune degli elementi di Ionic, iniziano con il template HTML dell’elenco dei nostri todo

    
ToDo List


    
        
            {{todo.text}}
        
        
            Evviva, non hai nulla da fare!
            

            Clicca su aggiungi per inserire dei ToDo
            

            Oppure leggi CoseNonJaviste!
        
    


    
Aggiungi

Come possiamo vedere quest’applicazione ricorda in tutto e per tutto una normalissima applicazione AngularJS, unica cosa da notare è la direttiva collection-repeat al posto della classica ng-repeat. Come tutti gli sviluppatori Angular sanno, ng-repeat è una delle direttive più pesanti in termini di prestazioni, utilizzando collection-repeat si nota un significativo aumento delle prestazioni. Passiamo ora al codice del controller relativo alla pagina appena analizzata.

angular.module('todo').controller('List', [
        '$scope',
        'ToDoRepository',
        '$ionicPopup',
        function($scope, ToDoRepository, $ionicPopup) {
                $scope.todos = [];

                $scope.$on('$ionicView.enter',function(){
                        $scope.todos = ToDoRepository.list();
                });

                $scope.showConfirm = function(index,todo) {
                        var confirmPopup = $ionicPopup.confirm({
                                cancelText: 'Annulla',
                                okText: 'Fatto!',
                                title: todo.text,
                                template: todo.info
                        });

                        confirmPopup.then(function(result) {
                                ToDoRepository.remove(index);
                                //Refresh
                                $scope.todos = ToDoRepository.list();
                        });
                };
        }
]);

Notiamo subito che tra le nostre dipendenze c’è il service $ionicPopup, che utilizzeremo per visualizzare un popup che conterrà il testo del todo selezionato. Altra particolarità di questo controller è l’ascolto dell’evento $ionicView.enter per ricaricare la lista dei todo: questo evento viene lanciato quando la view legata al controller diventa quella attiva. Ionic prevede un meccanismo di caching dei vari template che visualizzeremo. Questo fa sì che i controller non vengano distrutti al cambio pagina, come invece accade normalmente. Quindi se volete che un’operazione venga effettauta ogni volta che si entra in una pagina, dovrete sfruttare questo evento e non il costruttore del controller, perché questo verrà invocato una volta sola (ricordiamo che il controller non viene distrutto).

Sorvoliamo sull’analisi della pagina di dettaglio e del service ToDoRepository in quanto non hanno caratteristiche peculiari.

Ultimi ritocchi

Prima di concludere il post vediamo come possiamo aggiungere un’icona e uno splashscreen alla nostra applicazione. Iniziamo con il creare una cartella resources nella root del nostro progetto. All’interno copiamoci l’icona e lo spashscreen, chiamandole per l’appunto icon.png e splash.png. Lanciamo infine il comando:

ionic resources

Ionic genererà le icone e lo splashscreen per tutti gli OS e risoluzioni, partendo da quelle che abbiamo appena creato. Dopodiché apriamo il file config.xml e aggiungiamo i seguenti parametri.

Potete impostare il delay con il valore che preferite.

Conclusioni

Ionic è un ottimo framework per creare velocemente dei prototipi di app, se conoscete già AngularJS la curva di apprendimento è praticamente nulla. Può anche essere utilizzata per progetti in produzione a patto che accettiate i limiti delle applicazioni ibride. Se volete saperne di più sul mio blog c’è un post sull’ecosistema di Ionic e su alcune features meno note. Inoltre qui trovate il repository del progetto. A presto!