Ionic Framework

Prsent par Dr. Mohammed REZGUI

SOMMAIRE
1 Introduction ................................................................................................................. 3
1.1 Quest-ce que IONIC framework ? ............................................................................... 3
1.2 Avantages ........................................................................................................................... 3
1.3 Inconvnient ..................................................................................................................... 4

2 Dpendances ................................................................................................................ 4

3 Installation .................................................................................................................... 5
3.1 Node JS ................................................................................................................................. 5
3.2 Apache Cordova ................................................................................................................ 5
3.3 Ionic ...................................................................................................................................... 5
3.4 Android SDK ...................................................................................................................... 5
3.5 Emulateur ........................................................................................................................... 6

4 Crer un projet ............................................................................................................ 7

4.1 Blank .................................................................................................................................... 7
4.2 SideMenu ............................................................................................................................ 7
4.3 Tabs ...................................................................................................................................... 7

5 Plateformes et dploiement .................................................................................... 8

5.1 Android ............................................................................................................................... 8
5.2 IOS ......................................................................................................................................... 8
5.3 Web ....................................................................................................................................... 8

6 Architecture MVC ........................................................................................................ 9

6.1 Modle ................................................................................................................................. 9
6.2 Contrleur .......................................................................................................................... 9
6.3 Vue ........................................................................................................................................ 9
6.4 Routes ................................................................................................................................ 10

7 Accs aux fonctionnalits natif ........................................................................... 11

7.1 ngCordova ........................................................................................................................ 11
7.2 Camera et librairies dimages .................................................................................... 11
7.3 Autres plugins ................................................................................................................. 12

8 Adapter linterface aux diffrents crans ........................................................ 13

8.1 Responsive ....................................................................................................................... 13
8.2 Media queries .................................................................................................................. 13
8.3 Visibilit du menu latral ........................................................................................... 14

9 Bibliographie ............................................................................................................ 15

2
1 Introduction

1.1 Quest-ce que IONIC framework ?

Ionic est un framework de dveloppement qui permet de crer des applications
hybrides en HTML5, CSS, Javascript.

Il est bas sur des frameworks/technologies qui ont fait leurs preuves telles que
AngularJS et Apache Cordova.

Comment Ionic utlise AngularJS et Apache Cordova ?

Ionic est dvelopp avec AngularJS, il est utilis pour limplmentation de la partie
applicative web (backend). Apache Cordova permet, quant lui, la construction des
applications natives. Cest un pont de dveloppement qui permet dencapsuler du
code client Web (ici Ionic/AngularJS) dans une application native telle que Android,
IOS ou encore Windows Phone. Il permet par ailleurs davoir certains accs aux
fonctionnalits natives des appareils tel que la camra ou lacclromtre.

1.2 Avantages

Le Ionic Framework dispose de plusieurs avantages :

- Le cross-plateforme. A partir dun socle de dveloppement pouvoir dploy

(en une seule ligne de commande) une application sur plusieurs
environnements (IOS, Android, Windows Phone). Cela permet de rduire les
couts et dlais de dveloppement pour proposer plusieurs applications
natives pour les diffrents systmes dexploitation mobile.
- Il est bas sur Apache Cordova et AngularJS qui disposent dune grande
communaut et par consquence de nombreux plugins de dveloppement.
- En quelques lignes de commande (trois) il est possible de crer une
application multiplateforme.
- Les documentations des technologies AngularJS et Apache Cordova sont
compltes.
- Le Framework sappuie sur AngularJS, gage de stabilit puisque le
Framework est maintenant largement utilis et surtout dvelopp par Google.
- Le dploiement de lapplication vers un appareil mobile connect se fait en
une ligne de code (agrable pour les tests).
- La prise en main des technologies est relativement rapide, mme pour des
dveloppeurs ayant peu dexprience avec les technologies Web.

3
 1.3 Inconvnient
Lapprhension de larchitecture MVC (Modle Vue Controller) propos par
AngularJS et qui est la structure de lapplication, peut-tre un inconvnient pour les
dveloppeurs peu laise avec celle-ci.

2 Dpendances
Comme cit prcdemment Ionic intgre des frameworks/technologies. Voici la liste
des principales :

Gulp qui est un outil destin lorganisation et lexcution des

tches composant un build. Il est utilis pour l'automatisation
des compilations.

Apache Cordova dvelopp par Fondation Apache est utilis

pour la construction des applications natives.

AngularJS, dvelopp par Google, gre la structure de

l'application.

Sass qui est langage de gnration dynamique de feuilles de

style est utilis pour la gestion de thme.

4
3 Installation

3.1 Node JS
Comme cit prcdemment, Ionic sappui sur la plateforme Node JS. Il est donc
indispensable de linstaller si vous ne lavez pas encore.

Vous trouverez, sur le lien suivant, le site officiel ou vous pouvez installer Node JS :

https://nodejs.org/en/download/

Remarque : Sous Windows la commande npm ne fonctionnera pas sans les

variables denvironnements de systme JAVA_HOME, ANDROID_HOME et NPM.

Sous Unix, les variables denvironnement JAVA_HOME et ANDROID_HOME sont

ncessaires.

3.2 Apache Cordova

Excuter la suivante commande pour installer Apache Cordova. Si vous lavez dj
passez cette tape :

$ npm install -g cordova

3.3 Ionic
Installez maintenant Ionic avec cette ligne de commande :

$ npm install -g ionic

3.4 Android SDK

Pour dvelopper une application pour appareils Android il est indispensable de
disposer des outils Android tel que le SDK Android. Si lon souhaite cibler
lapplication pour dautres systmes dexploitations, il est l aussi indispensable de
disposer du SDK de la plateforme vise. Ceux-ci serviront la compilation et la
construction de lapplication.

5
 3.5 Emulateur
Lutilisation dun mulateur pour tester lapplication lors de la phase de
dveloppement est une option viable. En effet, utiliser les diffrents terminaux
virtuels proposs par un mulateur pour tester, par exemple, son adaptation aux
diffrents crans est recommand.

Lmulateur Genymotion est une solution viable (https://www.genymotion.com/).

Une alternative est de lancer lapplication sur un serveur web local (localhost) et
utiliser les outils de visualisation du navigateur pour simuler un appareil prcis.

6
4 Crer un projet

Une fois les outils installs, et quon dispose dun environnement de travail
oprationnel, il est maintenant temps de crer notre projet que lon nommera
monProjet.

Pour cela Ionic Framework propose trois Templates prdfinis.

4.1 Blank
Le premier et le plus basique est la cration dune application vide. Pour cela, tapez
la commande suivante dans le terminal :

$ ionic start monProjet blank

Il peut tre intressant de commencer par un projet vide lorsque lon a une certaine
exprience de la technologie. Pour des dbutants, il est conseill dutiliser un des
deux autres Templates.

4.2 SideMenu
Le second et certainement le plus utile, est la cration dune application avec un
menu latral intgr. Pour cela taper la commande suivante dans le terminal :

$ ionic start monProjet blank

4.3 Tabs
Enfin, le dernier Template propos qui est celui par dfaut lorsquon ne spcifie pas
le Template est la cration dune application avec des onglets. Pour cela tapez la
commande suivante dans le terminal :

$ ionic start monProjet tabs

7
5 Plateformes et dploiement

Ionic est un framework permettant la cration dapplications hybrides. De ce fait il est

possible de cibler les plateformes (systmes dexploitations) que lon souhaite viser.

5.1 Android
Pour configurer votre application pour les appareils Android. Il suffit dexcuter la
suivante commande la racine de votre projet :

$ ionic platform add android

Ensuite, pour compiler puis lancer et dployer votre application sur un appareil
connect ou depuis un mulateur, il suffit dexcuter la commande suivante :

$ ionic run android

5.2 IOS
Pour configurer votre application pour les appareils IOS. Il suffit dexcuter la
suivante commande la racine de votre projet :

$ ionic platform add ios

Ensuite, pour compiler puis lancer et dployer votre application sur un appareil
connect ou depuis un mulateur, il suffit dexcuter la commande suivante :

$ ionic run ios

5.3 Web
Il est par ailleurs possible de dployer lapplication sur un serveur local de test. Pour
cela excuter la racine de votre projet la commande suivante :

$ ionic serve

Ds lors une page du navigateur souvre la racine du projet.

8
6 Architecture MVC

Le projet Ionic bas sur AngularJS a une architecture MVC. Cette architecture 3-tier
est intressante de part la sparation des donnes (le modle), de la gestion de
linterface (la vue) et des actions (le contrleur).

6.1 Modle
Le modle dans le cadre du projet ralis, le model sest restreint un fichier
Javascript contenant de simples listes de donnes statiques. Le contrleur accdait
directement aux donnes peut les variables.

6.2 Contrleur
Le contrleur permet de capturer des donnes du modle pour les transmettre la
vue.

Figure 1 : Exemple contrleur simple

Dans cet exemple, le contrleur est nomm MainCtrl dispose dune variable prnom
dont la vue pourra consommer. La donne prnom aurait tout autant pu tre
capture depuis le modle.

6.3 Vue
La vue permet dafficher des donnes renvoyes par le controleur.

Figure 2 : Exemple d'une vue simple

Dans cet exemple, la vue est associe au contrleur MainCtrl grce la balise ng-
controller. Celle-ci peut dont consommer ses services. Ici on ne rcupre le prnom.

9
Il est tout autant possible de remonter linformation dans lautre sens ; de la vue vers
le contrleur.

6.4 Routes
Enfin un fichier de routes permet la configuration de la navigation entre les
diffrentes pages. Voici un exemple :

Figure 3 : Exemple de configuration de routes

Lorsque lutilisateur demande la page /view2, la route va le rediriger vers la page

view2.html et appel le contrleur View2Ctr qui lui est associ.

Lorsque quune page demande nest pas reconnue, cest alors la fonction
otherwise qui se charge de rediriger lutilisateur vers la page view1.html.

10
7 Accs aux fonctionnalits natif

7.1 ngCordova
La librairie ngCordova soutenu par une communaut active, propose de nombreux
plugins permettant laccder aux fonctionnalits natif dun appareil tel que laccs
la camra, le TouchID, le Push Notifications et bien dautres.

Il est difficile de ne pas trouver son besoin dans cette librairie qui regroupe plus de
70 plugins.

Pour tlcharger la librairie entire il suffit dexcuter la suivante commande depuis

la racine de votre projet :

$ bower install ngCordova

O de tlcharger la librairie depuis le site officiel (http://ngcordova.com/) puis

importer la librairie dans le projet.

Les plugins sont aussi tlchargeable lunit.

7.2 Camera et librairies dimages

Pour tlcharger le plugin permettant laccs natif la camera, excuter la suivante
commande depuis la racine de votre projet :

$ cordova plugin add org.apache.cordova.camera

Le code (ci-dessous figure 4) permettant dimplmenter laccs la camera.

Lorsque la vue associe au contrleur PhotoCtrl fait appel la mthode takePhoto,

celui-ci peut accder la camra de son mobile.

Le contrleur se doit davoir le paramtre $cordovaCamera qui est le service de

camera. Celui-ci peut appeler la mthode getPicture avec des options en
paramtres.

Les options sont modifiables selon les besoins de lutilisateur. Dans le cas prsent
les options permettent de redfinir la taille de la photo en 100px par 100px. La photo
nest pas sauvegarde dans la librairie de photo ou encore la photo est convertie en
JPEG.

11
Figure 4 : Accs camera depuis un contrleur

Pour accder la librairie de photos, il suffit de change dans les options la

sourceType par Camera.DestinationType.PHOTOLIBRARY.

7.3 Autres plugins

Il existe bien dautres plugins permettant laccs aux fonctionnalits natif dun
appareil. Veuillez consulter la page officiel ngCordova pour plus de dtails :

http://ngcordova.com/docs/plugins/

12
8 Adapter linterface aux diffrents crans

8.1 Responsive
Ionic propose des tableaux (ou grilles) avec des colonnes responsives. Celles-ci
peuvent tre utiles pour reformer linterface dune page lorsque la largeur de
lappareil est restreinte.

Voici la liste des proprits proposes :

Proprits Cible

.responsive-sm Les colonnes passe sur une ligne quand la largeur de lcran est
infrieure la taille dun Smartphone en mode paysage

.responsive-md Les colonnes passe sur une ligne quand la largeur de lcran est
infrieure la taille dun Tablette en mode portrait

.responsive-lg Les colonnes passe sur une ligne quand la largeur de lcran est
infrieure la taille dun Tablette en mode paysage

8.2 Media queries

Il est par ailleurs possible dadapter le contenu dune page avec des mdia queries.

Voici la liste des mdia queries et de leur association avec les appareils :

MEDIA QUERIES CIBLE

@media (min-width:320px)
Smartphones portrait

@media (min-width:481px)
Smartphones paysages

@media (min-width:641px)
Tablettes portrait

@media (min-width:961px)
Tablettes paysage

@media (min-width:1025px)
Grande tablettes paysage et PC

@media (min-width:1281px)
Haute rsolution PC

13
 8.3 Visibilit du menu latral
Le menu latral Ionic peut-tre configurer pour tre visible de manire forc partir
dune certaines largeur de lcran. Pour cela, il suffit de dfinir lattribut lintrieur de
la balise de menu.

Par exemple pour forcer la visibilit du menu lorsque lappareil est au moins une
tablette en portrait paysage :

expose-aside-when="(min-width:961px)"

14
9 Bibliographie

Documentation Ionic :

- http://ionicframework.com/
- http://forum.ionicframework.com/

Documentation Apache Cordova :

- https://cordova.apache.org/
- http://ngcordova.com/

Documentation AngularJS :

- https://angularjs.org/
- https://openclassrooms.com/courses/developpez-vos-applications-web-avec-
angularjs

Documentation media queries :

- http://stackoverflow.com/questions/6370690/media-queries-how-to-target-
desktop-tablet-and-mobile

- https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-
html5-et-css3/mise-en-page-adaptative-avec-les-media-queries

Mise niveau Javascript :

- https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-
javascript

Recherches de solutions :

http://stackoverflow.com/

15