Ionic est un framework qui va vous permettre de créer des applications mobiles en utilisant des technologies Web. Ionic se base pour cela sur d'autres frameworks / technologies qui ont fait leurs preuves.

  • Gulp, pour la partie automatisation des compilations.
  • AngularJS, pour la partie front-end avec l'utilisation d'Angular UI Router pour la gestion des stats.
  • Apache Cordova, pour la création d'une application fonctionnelle sur mobile.

Ma première application

Avant de pouvoir commencer, il nous faut évidemment commencer par installer l'outil. Pour cela il faut utiliser npm

npm install -g ionic

Cette commande va permettre d'installer Ionic de manière globale et nous donnera accès à la commande ionic. On va d'ailleurs pouvoir utiliser cette dernière pour créer notre premier projet.

ionic start NomDuProjet blank

Cette commande va permettre de créer un dossier qui va contenir un projet vide. Il est possible de partir d'un template comme tabs ou sidemenu. Maintenant vous pouvez vous rendre dans le dossier que vous venez de créer et lancer différentes commandes (comme ionic run, ionic platform add android... Beaucoup sont directement issues de Cordova donc vous ne devriez pas être dépaysé. Si vous souhaitez prévisualiser votre application sur votre navigateur web il vous suffit de taper la commande serve

ionic serve

Petit tour du propriétaire

Globalement ionic offre une série de directive et de service construit par dessus angular qui vous permettront de créer rapidement des éléments d'interface. Il suffit de faire un rapide tour sur la documentation pour voir les différents éléments disponibles. Ceci étant dit il est important de comprendre ce qui est important

Le routing

Le routing se base sur Angular UI Router du coup il n'y a pas de code propre à ionic. Par contre le contenu sera automatiquement chargé dans l'élément <ion-nav-view></ion-nav-view>.

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider.state('home', {
    url: '/home',
    views: {
      templateUrl: 'templates/home.html', 
      controller: 'HomeCtrl'
    }

  })
  $stateProvider.state('about', {
    url: '/about',
    views: {
      templateUrl: 'templates/about.html'
    }
  })
  $stateProvider.state('weather', {
    url: '/weather/:city',
    views: {
      templateUrl: 'templates/weather.html',
      controller: 'WeatherCtrl'
    }
  })

  $urlRouterProvider.otherwise('/home')

});

Quelques petites astuces :

  • Il est possible de nommer les ion-nav-view (surtout utile si on a des onglets). Dans ce cas-là il faudra indiquer dans le state quelle vue on souhaite remplir (il est même possible de remplir plusieurs vues à la fois)
  • On peut créer un state qui dépend d'un autre un utilisant un . dans le nom de l'état.

L'interface de base

Évidemment toutes les applications n'ont pas la même interface, mais la structure principale reste sensiblement la même (une barre en haut avec la flèche retour et le contenu en dessous).

  <body ng-app="starter">

  <ion-nav-bar class="bar-positive">
      <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>

Si on veut un slide menu le code sera un poil plus complexe, mais on retrouvera toujours les éléments <ion-nav-bar> et <ion-nav-view>

<ion-side-menus>
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button></ion-nav-back-button>
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>
  <ion-side-menu side="left">
    <ion-list>
      <ion-item menu-close ui-sref="home">
      Accueil
      </ion-item>
      <ion-item menu-close ui-sref="about">
      About
      </ion-item>
    </ion-list>
  </ion-side-menu>
</ion-side-menus>

Le comportement de la navbar est automatisé par le reste de l'application

  • Les titres seront insérés à partir de l'attribut view-title qui sera chargé à l'intérieur.
  • Le bouton <ion-nav-back-button> sera automatiquement affiché suivant l'état de notre navigation

Je veux toucher le style

Forcément vous avez envie de personnaliser l'interface un minimum pour que votre application ne ressemble pas à ce qui est proposé par défaut. Pour cela vous pouvez utiliser le CSS qui est fourni ou utiliser SASS qui vous permettra une configuration plus aisée grâce à l'utilisation de variable. Dans ce cas-là il faudra préparer votre projet pour l'utilisation de SASS.

 ionic setup sass

Cette commande aura pour effet de créer un dossier SCSS à la racine qui sera automatiquement observé lorsque vous utiliserez la commande serve.

Achitecture d'une vue

Comme on l'a vu dans la partie router, on va charger différents fichiers HTML pour créer les différentes parties de notre application. Pour construire nos vues, on va principalement utiliser 2 éléments :

  • <ion-view>, qui permet de contenir la vue et qui contiendra différentes informations qui vont affecter l'élément ionNavBar parent. Par exemple on utilisera l'attribut view-title pour changer le titre affiché dans la nav-bar.
  • <ion-content>, qui permet de créer rapidement une zone de contenu qui utilisera la système de scroll de ionic. Cet élément dispose de nombreux attributs qui vous permettront de personnaliser le comportement de ce dernier

    Voilà pour la structure de base, n'hésitez pas à faire un tour sur la documentation pour voir les différents modules disponibles.

    La compilation

    Pour la partie compilation et publication rien de vraiment nouveau. En effet, ionic se repose sur Apache Cordova pour la gestion de la création d'une application mobile. Il sera possible de compiler en utilisant les commandes que l'on connait déjà avec Cordova (ou phonegap) en remplaçant par ionic.

ionic platform add android
ionic plugin add ....
ionic build android
ionic emulate android
ionic run android