Ionic est un Framework de développement d’applications mobiles « hybrides ». Une applications « hybride » contrairement à une application dite « Native » est développée à l’aide des technologies classiques du web, puis à partir d’une WebView peut interagir avec des fonctions du mobile. De nombreux Framework comme Cordova facilite cette interaction. Les applications hybrides ont de nombreux avantages par rapport aux applications natives pures, en particulier en ce qui concerne les plateformes ciblées (Android, iOS, Windows Phone), la vitesse de développement et l’utilisation d’outils tiers (développement modulaire).

On pourrait voir Ionic comme la partie User Interface (UI) du processus de développement, un peu comme le Framework Bootstrap, mais avec en plus la mise à disposition de patterns propres aux mobiles appelés Composants (Components : liste, onglet, menu,…). Utilise le Framework AngularJS pour permettre l’animation des composants visuels.

Contrairement à d’autres Framework UI pour les mobiles, Ionic propose tout un panel de composants très proches du design des principales plateformes mobiles (Android et iOS), ce qui augmente encore plus l’impression d’être devant une application native une fois celle-ci développée.

Ionic s’occupant essentiellement de la partie Interface graphique, il a besoin d’un Framework qui va s’occuper de l’interaction avec les fonctions du mobile comme Cordova ou encore PhoneGap.

Installation

Pré-requis

Pour une installation sous Windows, la première chose à faire est d’installer Git et NodeJS, des exécutables sont disponible sur les différents sites. Pour les utilisateurs de Mac ou de Linux la procédure peut se faire en ligne de commande (Voir les sites). On pourra ensuite exécuter des fonctions Git et NodeJS depuis la console Windows (cmd) ou Bash pour Linux ou Mac.

Installation de Cordova

$ sudo npm install -g cordova 

(Pas besoin de préciser « sudo » dans le cadre de Windows)

 

Installation des SDK pour Android et iOS

Android SDK

Installez le SDK en visitant : http://developer.android.com/sdk/. Il existe différentes versions en fonction de votre système d’exploitation. Un exécutable existe pour Windows.

Il faut ensuite mettre à jour les variables d’environnement du système pour pouvoir utiliser Cordova en ligne de commande.

Sous Mac ou Linux, il faut modifier le fichier ~/.bash_profile en ajoutant la ligne suivante :

export PATH=${PATH}:/Chemin/Vers-SDK/sdk/platform-tools:/Development/adt-bundle/sdk/tools 

Puis executer la commande suivante pour que la modification sois prise en compte immédiatement

$ source ~/.bash_profile

Sous Windows, il faut :

  • Faites un clic-droit sur Ordinateur, puis Propriétés.
  • Cliquer Paramètres systèmes avancés.
  • Choisir Variables d’environnement.
  • Choisir la variable the PATH et cliquer sur éditer.
  • Ajouter le chemin vers le SDK au path actuel : ;C:\Chemin\Vers-SDK\sdk\platform-tools;C:\Chemin\Vers-SDK\sdk\tools.
  • Valider

Pour plus d’information sur la procédure d’installation, visitez le site d’Apache Cordova.

iOS

Si vous ne disposez encore de Xcode, vous pouvez le télécharger depuis l’AppStore ou l’Apple Developer .

Il faut ensuite actver un certain nombre d’outils de lignes commande qui permettront à Cordova de fonctionner. Pour ce faire, depuis Xcode, faites :

PréférencesTéléchargements, Depuis le panneau de Composants, appuyez sur le bouton Installer.

Pour plus d’information sur la procédure d’installation, visitez le site d’Apache Cordova.

Installation d’Ionic

Ionic possède son propre gestionnaire de commande en ligne, qui nous permettra par exemple de créer un nouveau projet, le déployer,… 

Lancez la commande suivante pour installer Ionic :

$ [sudo] npm install -g ionic #Les crochets indiquent que "sudo" n'est pas toujours obligatoire

Création d’un nouveau projet

$ ionic start todo blank

Nous venons de créer un dossier portant le nom « todo » et possédant l’arborescence suivante :

$ cd todo && ls ├── bower.json     // dépendances bower ├── config.xml     // configuration cordova ├── gulpfile.js    // tâches gulp ├── hooks          // actions cordova ├── ionic.project  // configuration ionic ├── package.json   // dépendances node ├── platforms      // Les livrables pour iOS/Android se mettront ici ├── plugins        // Plugins cordova/ionic ├── scss           // code scss code, qui se générera du contenu dans www/css/ └── www            // Coeur de l'application - code JS et librairies, CSS, images, etc. 

configuration des plateformes

Il nous faut maintenant ajouter iOS et Android comme plateformes à supporter dans notre projet

$ ionic platform add ios $ ionic platform add android 

Il ne reste plus qu’à compiler notre projet pour l’une au l’autre des plateforme, puis à tester depuis votre apparails (L’émulateur peut être parfois long à démarrer):

$ ionic build ios $ ionic emulate ios 

 

Développez votre application

Maintenant que vous avez configuré Cordova et Ionic, on peut à présent se concentrer sur le développement à proprement parlé.

Dans le dossier www, et si  ce n’est pas déjà fait, créez un fichier index.html contenant les lignes suivantes

<span class="cp" style="color: #999999; font-weight: bold;"><!DOCTYPE html></span><span class="nt" style="color: #000080;"><html></span>   <span class="nt" style="color: #000080;"><head></span>     <span class="nt" style="color: #000080;"><meta</span> <span class="na" style="color: #008080;">charset=</span><span class="s" style="color: #dd1144;">"utf-8"</span><span class="nt" style="color: #000080;">></span>     <span class="nt" style="color: #000080;"><title></span>Todo<span class="nt" style="color: #000080;"></title></span>     <span class="nt" style="color: #000080;"><meta</span> <span class="na" style="color: #008080;">name=</span><span class="s" style="color: #dd1144;">"viewport"</span> <span class="na" style="color: #008080;">content=</span><span class="s" style="color: #dd1144;">"initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"</span><span class="nt" style="color: #000080;">></span>     <span class="nt" style="color: #000080;"><link</span> <span class="na" style="color: #008080;">href=</span><span class="s" style="color: #dd1144;">"lib/ionic/css/ionic.css"</span> <span class="na" style="color: #008080;">rel=</span><span class="s" style="color: #dd1144;">"stylesheet"</span><span class="nt" style="color: #000080;">></span>     <span class="nt" style="color: #000080;"><script </span><span class="na" style="color: #008080;">src=</span><span class="s" style="color: #dd1144;">"lib/ionic/js/ionic.bundle.js"</span><span class="nt" style="color: #000080;">></script></span>     <span class="c" style="color: #999988; font-style: italic;"><!-- Needed for Cordova/PhoneGap (will be a 404 during development) --></span>     <span class="nt" style="color: #000080;"><script </span><span class="na" style="color: #008080;">src=</span><span class="s" style="color: #dd1144;">"cordova.js"</span><span class="nt" style="color: #000080;">></script></span>   <span class="nt" style="color: #000080;"></head></span>   <span class="nt" style="color: #000080;"><body></span>   <span class="nt" style="color: #000080;"></body></span><span class="nt" style="color: #000080;"></html></span><span class="nt" style="color: #000080;"></span>
</p>

Le fichier ionic.css contient les styles spécifiques à Ionic, tandis que le fichier ionic.bundle.js contient des modules Angular : ngAnimate (pour les animations, transitions,…) et ngSanitize (qui gère notamment l’affichage html). Pour ajouter d’autres modules Angular, il faudra le faire de façon manuelle depuis le dossier lib/js/angular par exemple. 

Le fichier cordova.js (ou phonegap.js) doit toujours être le dernier script à appeler dans l’entête de votre page.

Playground

Ionic propose sa propre plateforme de teste en ligne. Vous pourrez développer des vues et les tester directement ligne depuis http://play.ionic.io/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Mobile-tuts!</h1>
</ion-header-bar>
<ion-content class="padding">
<button class="button button-assertive">Je suis un bouton</button>
</ion-content>
</ion-pane>
</body>
</html>

Initialisation de l’application

Maintenant que nous avons démarrer notre projet, nous pouvons commencer à développer avec Angular. Créez le fichier www/js/app.js contenant le code d’initialisation suivant :

<span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1" style="color: #dd1144;">'todo'</span><span class="p">,</span> <span class="p">[</span><span class="s1" style="color: #dd1144;">'ionic'</span><span class="p">])</span>
</p>

Ceux qui connaissent un peu Angular auront compris que cette ligne permet la création d’une application Angular dont le nom est « todo ». On précise au passage que l’on aura besoin du module « ionic », contenu dans le fichier bundles.  

On peut à présent rajouter le fichier app.js au fichier principal index.html

<span class="nt" style="color: #000080;"><script </span><span class="na" style="color: #008080;">src=</span><span class="s" style="color: #dd1144;">"js/app.js"</span><span class="nt" style="color: #000080;">></script></span> 

Il faut également ajouter l’attribut ng-app à la balise body dans le fichier index.html

</p>
<span class="nt" style="color: #000080;"><body</span> <span class="na" style="color: #008080;">ng-app=</span><span class="s" style="color: #dd1144;">"todo"</span><span class="nt" style="color: #000080;">></span>

 

Rajoutons un peu de contenu au corps de notre application :

<span class="nt" style="color: #000080;"><body</span> <span class="na" style="color: #008080;">ng-app=</span><span class="s" style="color: #dd1144;">"todo"</span><span class="nt" style="color: #000080;">></span>   <span class="nt" style="color: #000080;"><ion-side-menus></span>     <span class="c" style="color: #999988; font-style: italic;"><!-- Center content --></span>     <span class="nt" style="color: #000080;"><ion-side-menu-content></span>       <span class="nt" style="color: #000080;"><ion-header-bar</span> <span class="na" style="color: #008080;">class=</span><span class="s" style="color: #dd1144;">"bar-dark"</span><span class="nt" style="color: #000080;">></span>         <span class="nt" style="color: #000080;"><h1</span> <span class="na" style="color: #008080;">class=</span><span class="s" style="color: #dd1144;">"title"</span><span class="nt" style="color: #000080;">></span>Todo<span class="nt" style="color: #000080;"></h1></span>       <span class="nt" style="color: #000080;"></ion-header-bar></span>       <span class="nt" style="color: #000080;"><ion-content></span>       <span class="nt" style="color: #000080;"></ion-content></span>     <span class="nt" style="color: #000080;"></ion-side-menu-content></span>     <span class="c" style="color: #999988; font-style: italic;"><!-- Left menu --></span>     <span class="nt" style="color: #000080;"><ion-side-menu</span> <span class="na" style="color: #008080;">side=</span><span class="s" style="color: #dd1144;">"left"</span><span class="nt" style="color: #000080;">></span>       <span class="nt" style="color: #000080;"><ion-header-bar</span> <span class="na" style="color: #008080;">class=</span><span class="s" style="color: #dd1144;">"bar-dark"</span><span class="nt" style="color: #000080;">></span>         <span class="nt" style="color: #000080;"><h1</span> <span class="na" style="color: #008080;">class=</span><span class="s" style="color: #dd1144;">"title"</span><span class="nt" style="color: #000080;">></span>Projets<span class="nt" style="color: #000080;"></h1></span>       <span class="nt" style="color: #000080;"></ion-header-bar></span>     <span class="nt" style="color: #000080;"></ion-side-menu></span>   <span class="nt" style="color: #000080;"></ion-side-menus></span><span class="nt" style="color: #000080;"></body></span><span class="nt" style="color: #000080;"></span>
</p>

 

Qui donne le résultat suivant depuis le Playground Ionic

Tester votre application

Il existe 4 façons de tester votre application : depuis un navigateur web,  depuis un navigateur mobile, depuis un emulateur Android/iOS ou comme application native depuis votre smartphone.

Depuis un navigateur Web et Mobile

Depuis votre terminal, lancez la commande suivante :

<span class="nv" style="color: #008080;">$ </span>ionic serve

Visitez ensuite l’adresse http://localhost:8000 depuis votre navigateur pour voir les changements en temps réels. Quand vous effectuez des changements dans vos pages HTML, CSS, Javascript,..ceux-ci sont rechargées automatiquement après sauvegarde des fichiers.

Depuis un simulateur

Lancez la commande suivante pour démarrer un nouvel émulateur :

<span class="nv" style="color: #008080;">$ </span>ionic build ios<span class="nv" style="color: #008080;">$ </span>ionic emulate ios 
</p>

cd

Depuis votre smartphone

Pour tester votre application sous Android, il vous faut simplement branchez votre smartphone en USB, puis de lancer la commande suivante :

<span class="nv" style="color: #008080;">$ </span>ionic run android 

 

</p>

Sous iOS, c’est un peu plus compliqué car vous devez obligatoirement disposé d’un compte sur l’Apple Developer et ça coute la modique (:D) somme de 99$ seulement.

Vous devriez ensuite générer un certificat depuis l’Apple Developper que vous pourrez configurer sur XCode.