Ionic, AngularJS,Cordova,NodeJS,Sass

1. LOGO
Développement
Mobile Hybride
IONIC
Réalisé par :
Baich Marwa
Encadré par :
Mr.Benlahmar
Master SII

2. 1 Introduction General
AngularJS1
Comment ionic fonctionne
NodeJS3
Cordova2
Sass4
2
Première application IONIC
3
4
IONIC exploite plusieurs technologies :

3.  un système d'exploitation open source pour Smartphones, PDA et
terminaux mobiles
Android: c’est quoi ?
 basé sur le noyau Linux et développé actuellement par Google.
 Le système a été lancé en juin 2007 à la suite du rachat par Google en
2005, Android est le système d'exploitation le plus utilisé dans le monde
avec plus de 80 % de parts de marché dans les smartphones.

4. Développement
mobile natif
Développement
mobile Web
Développement
mobile hybride
Développement Mobile
Trois manières pour développer des applications mobiles :

5.  Est une application mobile développée pour un des
systèmes d’exploitation utilisés par les smartphones et
tablettes (iOS, Android, Windows Phone etc.).
 Elle est développée avec un langage spécifique à son
système d’exploitation (App Store, Google Play, Windows
Store, etc.)
Une application native

6. www.themegallery.com
 Les applications natives utilisent toutes les fonctionnalités
offertes par le téléphone (GPS, Local Storage, Push Notifications,
SMS, Appels Téléphoniques, Caméra, Accéléromètre, Mode
connecté et mode non connecté, Gestion de l’énergie, Mémoires
embarquées, etc…)
 Les applications natives pour iPhones sont par exemple
développées avec le langage de développement Objective-C.
Une application native

7.  Une web application est une application mobile
développée en HTML, CSS, Java Script accessible et
exécutable par le biais d’un navigateur Internet pour téléphone
mobile.
 Elle utilise le navigateur du smartphone et ne nécessite pas
forcément de télécharger l'application. Elle est accessible par
tous les smartphones quelques soient leur marque et système
d’exploitation.
Mobile Web Application

8.  Cependant une web application ne prend pas en considération les différents
modèles de Smartphones et les différents systèmes d’exploitation.
 Une Application mobile Web n’utilise pas les fonctionnalités offertes par le
système du téléphone
Mobile Web Application

9. Une application hybride combine des éléments d’une application web
HTML5, CSS, Java Script .
 Pour la partie Présentation des éléments de l’interface on utilise :
• Des Framework CSS créées pour les applications mobiles (Boot Strap)
• Des Framework Java Script ( Angular JS, JQuery Mobile, Dojo, Sencha
Touch)
 Pour la partie Interaction avec le serveur, on utilise des Frameworks Ajax
( AngularJS, JQuery Mobile, …)
Une application hybride

10. www.themegallery.com
• Des éléments d’une application native permettent d’utiliser toutes
les fonctionnalités natives des smartphones ((GPS, Local Storage,
Push Notifications, SMS, Appels Téléphoniques, Caméra,
Accéléromètre, Mode connecté et mode non connecté, Gestion de
l’énergie, Mémoires embarquées, etc.)
Une application hybride

11. Pour utiliser interagir avec les fonctionnalités natives, l’application mobile
native utilise les plugins du Framework CORDOVA (Apache) ou PhoneGap
(Adobe).
 En plus Cordova offre des outils qui permettent de :
• Générer des applications mobiles natives pour les différentes
plateformes
• Tester ces applications sur des émulateurs appropriés
 De plus elle pourra être distribuée en tant qu’application sur les
plateformes d’applications (App Store, Google Play Store, Windows
Store)
Mobile Web Application

12. Appcelera
or
Titanium
(gratuit)
Win Dév
mobile
(payant)
IBM
Worklight
Adobe
Phone Gap
Plateforme de développement mobile hybride
IONIC
(GRATUIT,
OPENSOURC
E)

14. Définition
Ionic Framework : un framework utilisant Apache Cordova et aidant à la création
d’applications mobiles hybrides.
Ionic utilise AngularJS pour le développement backend, et Sass pour la gestion
du thème.

15.  Introduction
Applications SPA
Concepts et fonctionnalités de NG
 Directives & Liaison de données
 Filtres
 Vues, Contrôleurs, Scope
 Modules, Routes, Services

16. Applications SPA

17. Angular.js
 AngularJS est un framework JavaScript open-source développé par Google.
 L'idée de base est d'augmenter le langage HTML pour permettre la
représentation des données métiers, qui sont elles traitées et gérées avec le
langage Javascript.
 Ce framework facilite grandement le développement d'application web selon le
modèle MVC (Modèle Vue Controleur).
 AngularJS va nous permettre de rajouter de nouveaux attributs aux balises
HTML, tous ces nouveaux attributs
commenceront par : ng

18. www.themegallery.com
Les applications créées par AngularJS sont :
o Modulaires (des équipes peuvent travailler séparément su la même application)
o Testables (Encouragent les bonnes pratiques de développement. TDD et Tests unitaires)
o Evolutives (Utilisent des patrons de conceptions confirmés, tels que l’injection de
dépendances, MVC, …)
Angular.js

19. Concepts et fonctionnalités de NG

20. Télécharger AngularJS.

21. Créer page html « index.html ».
<!DOCTYPE html>
<html lang="fr" ng-app>
<head>
<meta charset="UTF-8">
<title>Test AngularJS</title>
<script src="js/angular.js"></script>
</head>
<body>
<input type="text" ng-model="nom"
placeholder="Votre nom">
<hr>
Bonjour : {{nom}}
</body>
</html>
Attacher
AngularJS

22. Directives et Liaison de données
 Une Directive ajoute des fonctionnalités au HTML
 Un Template évalue une expression.
<!DOCTYPE html>
<html lang="fr" ng-app>
<head>
<meta charset="UTF-8">
<title>Test AngularJS</title>
<script src="js/angular.js"></script>
</head>
<body>
<input type="text" ng-model="nom" placeholder="Votre
nom">
<hr>
Bonjour : {{nom}}
</body>
</html>
Directive
Directive
Template et Liaison de
donnée

23.  AngularJS privilégie l’aspect déclaratif
 La plupart des balises sont augmentées par des attributs
« ng-* ».
Exemple pour la
balise <input
type="text" >
Directives et Liaison de données

24. Directives et Liaison de données
Utilisation de boucles « ng-repeat » et « ng-init »
<!DOCTYPE html>
<html lang="fr" ng-app>
<head>
<meta charset="UTF-8">
<title>Test AngularJS</title>
<script src="js/angular.js"></script>
</head>
<body>
<ul ng-init="persons=[‘marwa', ‘rabab', ‘sii']">
<li ng-repeat="person in persons"> {{person}} </li>
</ul>
</body>
</html>
Initialisation du
tableau
« persons »
Parcours du tableau et
affichage

25. Filtres
 Utilisation de l’opérateur « pipe | »
 On peut chainer les filtres. (Expression|filtre1|filtre2…)
<input type="text" ng-model="nom" >
<ul ng-init="persons=[‘marwa', ‘rabab', ‘sii']">
<li ng-repeat="person in persons ">
{{person | uppercase}}
</li>
</ul>
Le contenu est transformé en
majuscule

26. View $scope Controller
Le Scope est un objet qui permet de partager les
données entre la vue et le contrôleur; Le Modèle.
• La vue ne doit rien savoir sur le contrôleur
• Le contrôleur ne doit rien savoir sur la vue
Vues, Contrôleur et Scope

27. <html lang="fr" ng-app="myApp">
…
<body ng-controller="PersonCtrl">
<input type="text" ng-model="nom« placeholder="Filtrer">
<ul> …</ul>
<script>
// Créer un module
var app = angular.module('myApp', [ ] );
// Y ajouter un contrôleur
app.controller('PersonCtrl', function ($scope){
$scope.persons = [‘marwa', ‘rabab', ‘sii'];
});
</script>
</body>
Contrôleurs Définit le la portion du DOM
gérée par le module.
(l’application)
Définit le la portion du DOM
gérée par le contrôleur.
$scope est le
modèle. Il est
injecté
automatiquement
par AngularJS

28. <input type="text" ng-model="newPerson"
placeholder="Ajouter">
<button ng-click="addPerson()">Ajouter</button>
<script>
var app = angular.module('myApp', [] );
app.controller('PersonCtrl', function ($scope){
$scope.persons = [‘marwa', ‘rabab', ‘sii'];
$scope.addPerson = function(){
$scope.persons.push($scope.newPerson);
$scope.newPerson = '';
}
});
</script>

29. Modules
 Un module est un conteneur. Il permet
d’organiser le code.
 Dans un module, on peut enregistrer des :
• Configurations
• Contrôleurs
• Services
• Directives
• Filtres
 Un module peut dépendre d’autres modules :
var app = angular.module('myApp', ['$ngRoute', 'myModule']);
Le module « myApp » dépend des
modules :
1. « $ngRoute »
2. « myModule »
Ceux-ci seront injectés
automatiquement par AngularJS

30. Services
 Les services sont instanciés au moment de leur
première utilisation. Ce sont des « Singleton ».
 Il sont construits à l’aide de la méthode « factory() »
ou « service() » d’un module.
app.factory('serviceStates', function(){
return {
states : ['Alabama','Alaska','Arizona','Arkansas']
};
});
 Un service ainsi défini, peut être utilisé dans n’importe quel
contrôleur du module. Il suffit de le référencer comme une
dépendance.
app.controller('statesCtrl', function($scope,
serviceStates){
$scope.states = serviceStates.states;
});

31. <body ng-controller="statesCtrl">
<h2>USA States</h2>
<ul>
<li ng-repeat="state in states">
{{state | uppercase}}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.factory('serviceStates', function(){
return {
states : ['Alabama','Alaska','Arizona','Arkansas']
};
});
app.controller('statesCtrl', function($scope, serviceStates){
$scope.states = serviceStates.states;
});
</script>
</body>
Injection du service
serviceStates
Services

32. Routes - Structure ?
Module
Config
Route
View $scope Controller

33. Routes – module « ngRoute »
 Les routes sont gérées par le module « ngRoute »
qui n’est pas intégrés dans le « core » de AngularJS.
 Pour l’ajouter :

34. 3 – Routes
 La page index.html :
<html lang="fr" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Test AngularJS</title>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
</head>
<body ng-controller="statesCtrl">
<h2>USA States</h2>
<div ng-view></div>
<script> // et le reste …
Attacher le script du module
ngRoute
L’endroit où les vues
partielles vont s’afficher

35. 1. Notre module « myApp » dépend du module « ngRoute »:
var app = angular.module('myApp', ['ngRoute']);
« ngRoute » fournit le provider : « $routeProvider »
2. Nous utilisons la méthode « config() » du module pour
configurer les routes :
app.config(function($routeProvider){
// configurer les routes ici avec $routeProvider
});
Routes – provider « $routeProvider »

36. Routes
 Configuration des routes :
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider.when( '/', {
templateUrl: ‘xxxx.html',
controller: ‘xxxxCtrl'
} ).when( '/, {
templateUrl: ‘yyyy.html',
controller: ‘yyyyCtrl'
})
});
Injection des
dépendances
Injection des
dépendances

37. Node.js

38. Node.js
Descriptions
Avantages
Descriptions de V8
Comment V8 compile le code JS
Architecture de NodeJs
 Qu’est-ce que la programmation par callback ?
 Les méthodes synchrones?
 Les méthodes asynchrones?
Qu’est-ce que NPM ?

39.  Open-source
 Développé en C/C++
 Cross Platform: OS X, Microsoft Windows, Linux,
FreeBSD, IBM AIX ..
 Pour développer en <<server-side>>
 Se base de l’interpréteur JS : V8 de Google
 Utilisé par de grand nom : IBM, Microsoft ,Yahoo,
LinkedIn..
Descriptions

40. Avantages
 NodeJs est base sur une architecture :
• <<Event-driven>>
• <<Non bloking I/O API>>
 NodeJS ect concu pour optimiser et les évolutions d’une
application web en temps réel
 Les possibilités de NodeJS sont sans cesse augmentées
grâce a sa grande communauté

41.  Est un moteur JavaScript libre et open source développé
par Google Il est notamment utilisé dans
les navigateurs Google Chrome, ainsi que sur la
plateforme node.js.
 Il transforme le code JavaScript très rapidement en
code machine
 Codé en C++
Descriptions de V8

42. Commet V8 compile le code JS ?
V8 a deux compilateurs !
 Un compilateur complet <<Full>>
 Un compilateur D’optimisation

43. Architecture de NodeJs
 Qu’est-ce que la programmation par callback ?
 Les méthodes synchrones?
 Les méthodes asynchrones?

44.  Les callbacks sont des fonctions qui sont appelées à la fin
dune tache
 Les callbacks peuvent aussi être désignées par abus de
langage, une fonction anonyme passé en argument
 Une très grande partie du code de NodeJS est développé
avec des callbacks
Programmation par callback

45. <<Errror-first>> callback
 La communauté de NodeJS s’est mis d’accord pour une
standardisation des callbacks:
• Le premier argument est l’erreur.
• Le second est le résultat.
 C’est important de garder cette normalisation pour faciliter
la réutilisation de votre code

46. Exemple :

47.  Chaque tache est traitée une après l’autre
Les méthodes synchrones
 Tant que le fichier 1 n’est pas totalement téléchargé , le
script bloque.
 L’ exécution est complètement bloquée. La méthode de
contournement est de développer un programme
multithreadé

48. Exemple :

49.  Le programme lance plusieurs tache en même temps, on
est averti quand les taches sont finies
Les méthodes asynchrones
 Malgré que le programme soit en train de télécharger
les fichiers , le programme peut continuer à faire
d’autres choses.

51. Synchrones vs asynchrones

52.  NPM est un gestionnaire de module pour NodeJs.
 NPM Gère les dépendances des modules
automatiquement.
 NPM Fonctionne en ligne de commande.
 NPM Permet de rechercher, installer et gérer.
 NPM Est installé avec NodeJS
Qu’est-ce que NPM ?

53.  Les modules locaux sont des modules téléchargés et
installes au niveau de votre projet
 Pour installer un module local , Placez-vous dans le
dossier de votre projet et tapez :
npm install nomdumodule
Module local

54. Module global
 Les modules globaux sont installés dans
 Les modules ne peuvent pas etre accédés avec require()
Mais ils sont accessibles depuis un terminal.
 Pour installer un module local , Placez-vous dans le
dossier de votre projet et tapez :
npm install -g nomdumodule

56. CORDOVA
 Définition
 Les avantages
 Comment cela fonctionne ?
 Composants de base
 Exemples des plugings
 Installation
 Construction d’un pluging

57. Cordova
 Cordova est un framework open source permettant de créer
des applications mobiles avec les technologies du web (HTML,
JavaScript, CSS), tout en bénéficiant des fonctionnalités
natives des appareils (localisation GPS, contacts, caméra).
 L'intérêt est de pouvoir construire des applications sur les
différentes plateformes mobiles.

58. Les avantages de cordova sont nombreux :
Cordova est
OpenSource
(Licence Apache)
1
Cordova est
basée sur les
standards du
Web.
2
Cordova
supporte
la plupart
des plateformes
mobiles du marché
3

59. Comment cela fonctionne ?
 Cordova permet en fait de créer une application qui ouvre
une « WebView » disponible nativement sur les appareils
mobiles. Pour simplifier, il s’agit d’une fenêtre de navigateur
Web, exécutée dans notre application, qui va s’occuper
d’interpréter et d’afficher le contenu de nos scripts. Cette
WebView, dont les possibilités sont étendues par Cordova,
permet d’accéder à un certain nombre de fonctionnalités
natives à l’appareil mobile.

60. www.themegallery.com
La WebView d’Android est basé sur Chromium. Il s’agit de Safari pour iOS,
Internet Explorer Mobile pour Windows Phone, …
Ainsi, Cordova ne permet pas de créer à proprement parler d’applications
natives. On parlera plutôt d’applications hybrides.

61. www.themegallery.com

62. Composants de base :
Un plugin cordova se compose de 3 parties majeures :
 le fichier plugin.xml : il permet de définir et de configurer le
plugin.
 le dossier src/ : il contient le code natif spécifiques aux
différentes plateformes
 le dossier www/ : il contient l’API JavaScript que le plugin
exposera à la webview

63. Exemples des plugings
 cordova-plugin-batterie-état :
 cordova-plugin-caméra
 cordova-plugin-console
 cordova-plugin-contacts
plugman installer --platform <ios | Android | blackberry10 | WP8> --project
<répertoire> --plugin cordova-plugin-batterie-état
plugman installer --platform <ios | Android | blackberry10 | WP8> --project
<répertoire> --plugin cordova-plugin-caméra

64. Exemples des plugings
 cordova-plugin-batterie-état :
 cordova-plugin-caméra
 cordova-plugin-console
 cordova-plugin-contacts
plugman installer --platform <ios | Android | blackberry10 | WP8> --project
<répertoire> --plugin cordova-plugin-batterie-état
plugman installer --platform <ios | Android | blackberry10 | WP8> --project
<répertoire> --plugin cordova-plugin-caméra

65.  Cordova-plugin-device
 cordova-plugin-vibration
 cordova-plugin-splashscreen
 cordova-plugin-réseau d'information
 cordova-plugin-media-capture
 cordova-plugin-media
 cordova-plugin-géolocalisation
 cordova-plugin-transfert de fichiers
 cordova-plugin-fichier
 cordova-plugin-device-mouvement

66. Installation
Exécuter la commande :
◦ npm install -g ionic cordova

67. Construction d'un Plugin
 Les développeurs d'applications utilisent de la CLI « plugin
add ». L'argument de cette commande est l'URL pour un
dépôt gitcontenant le code du plugin. Cet exemple
implémente Device API de Cordova :

68. Exemples des plugings
 cordova-plugin-batterie-état :
 cordova-plugin-caméra
 cordova-plugin-console
 cordova-plugin-contacts
plugman installer --platform <ios | Android | blackberry10 | WP8> --project
<répertoire> --plugin cordova-plugin-batterie-état
plugman installer --platform <ios | Android | blackberry10 | WP8> --project
<répertoire> --plugin cordova-plugin-caméra

69.  Cordova-plugin-device
 cordova-plugin-vibration
 cordova-plugin-splashscreen
 cordova-plugin-réseau d'information
 cordova-plugin-media-capture
 cordova-plugin-media
 cordova-plugin-géolocalisation
 cordova-plugin-transfert de fichiers
 cordova-plugin-fichier
 cordova-plugin-device-mouvement

70. Installation
Exécuter la commande :
◦ npm install -g ionic cordova

71. Construction d'un Plugin
 Les développeurs d'applications utilisent de la CLI « plugin
add ». L'argument de cette commande est l'URL pour un
dépôt gitcontenant le code du plugin. Cet exemple
implémente Device API de Cordova :

72. Définit la configuration et
le comportement du
pluging
Doit être unique parmi
tous les plugin
Permet de définir le
fichier javascript
contenant l’API du
pluging ainsi l’endroit ou
le pluging sera publié
grace « clobers »
API de notre pluging sera
donc accessible dans la
webview grace à l’objet
« device »
qui est injecté dans le
spécifique à la
plateforme config.xml fi
chier pour sensibiliser la
plate-forme de la
bibliothèque de code
supplémentaire
balises spécifient le
chemin d'accès aux
fichiers de composant de
la bibliothèque.

73. L'Interface JavaScript
cordova.exec(function(winParam) {}, function(error) {},
"service", "action", ["firstArgument", "secondArgument",
42, false]);
 Le code JavaScript fournit l'interface de la face, ce
qui en fait peut-être la partie la plus importante du
plugin. Vous structurez votre plugin JavaScript ce
pour cela on doit appller cordova.exec pour
communiquer avec la plate-forme native, à l'aide
de la syntaxe suivante:
Une fonction de rappel
de succès.
Une fonction de rappel
d'erreur.
Le nom de service à
appeler sur le côté natif
Le nom de l'action à
appeler sur le côté natif.
Un tableau d'arguments
à passer dans
l'environnement natif.

75. www.themegallery.com
 SASS c'est quoi ?
 Installation
 Les variables
 L’héritage
 L’imbrication

76.  Sass est un préprocesseur. Lorsque vous écrivez en langage
Sass, vous utilisez un compilateur qui convertit en CSS vos
fichiers Sass
 Les fichiers portent le format .scss
 Sass ajoute à CSS des fonctions pratiques, des variables, et
d'autres aides de type script qui vous permettent d'écrire plus
rapidement votre CSS et de faciliter sa maintenance.
SASS

77. Installation

78. o Sass est écrit en Ruby, et distribué via le package
manager de Ruby

84. o Première chose très utile lorsqu’on utilise un langage de
programmation quel qu’il soit, c’est de pouvoir déclarer des
constantes et variables afin de centraliser les « propriétés » qui
seront communes dans tout le programme.
o Ici, SASS ne déroge pas à la règle. La syntaxe est simple et
l’on peut définir plusieurs types de variable. Le nom de la
variable sera délimité par le caractère « $ » et le caractère
« : ». Voici quelques exemples de déclaration.
Les variables

85. Exemple 1:

87. L’héritage
 Comme beaucoup de langages objet, SASS introduit et utilise
lui aussi la notion d’héritage. De cette manière, il est plus
facile de rajouter un attribut à une classe CSS sans pour
autant répéter les autres attributs de la classe mère. Attention
toutefois aux différentes répercussions sur votre design
lorsque vous modifiez la classe mère.

88. Exemple 2 :

89. L’imbrication
 A la manière de CSS, il est possible d’imbriquer des blocs
dans d’autres. Cependant, là où il peut être illisible de
faire ça dans CSS, SASS apporte une nouvelle façon de
faire qui rend le code plus court et plus facile à lire et
surtout moins laborieux à écrire.

90. Exemple 3 :

92. www.themegallery.com

93. Les directives
Ionique possède également ses propres directives à utiliser dans les
vues.
Il existe des directives pour la navigation, le contenu, les onglets,
les listes et les boutons.
 Pour headers and Footers on trouve :
<ion-header-bar> :ajoute un en-tête fixe au-dessus du contenu .
<ion-header-bar> : ajoute un pied de page fixe ci-dessous du contenu.
 Pour le navigateur :
<ion-side-menu> : conteneur de menu qui contient des liens de navigateur
<ion-nav-view> : utilisation des modèles dans notre application .
<ion-tabs> :
place des onglets de navigation en bas de l'écran

94.  Pour le Conteneur et le Contenu :
<ion-view> : le conteneur de la vue .
<ion-pane> :le conteneur de Contenu .
<ion-content>:ajoute du contenu à une zone
 Pour les listes :
<ion-list> :le contenu des listes ( actes <ul>).
<ion-item> :un éléments de liste ( actes <li>).
 Pour la saisie des formulaires:
<ion-checkbox>:Ajout d’un icône de sélection sous forme d'entrée .
<ion-radios>: Ajout l'icône de la radio pour la sélection sous forme
d'entrée .
<ion-toggle>: interrupteur d'animation lié à un booléen.

95.  Pour les gestes:
<ion-touch =« function() »> : appelle une fonction lorsque
l'utilisateur touche un élément
<ion-swipe-right=« function() »>: appelle une fonction
lorsque l'utilisateur glisse à droite
 Pour les buttons :
<ion-delete-button>: supprimer un élément sur une liste
<ion-option-button>: crée une option d’un bouton dans une
liste .

96. Structure d’un projet ionic

97. Comment cela fonctionne ?
 Ionic est un framework complet, c’est-à-dire
qu’il propose de vous aider dans le
développement de votre interface graphique
(frontend), mais aussi dans le développement de
toute la logique métier (backend).

98. D’un point de vue front end
 Le framework possède son propre thème HTML/CSS afin de
pouvoir disposer rapidement d’une application fonctionnelle.
L’utilisation de Sass permet notamment de modifier les variables
du thème afin de changer les couleurs, les polices et tout autre
paramètre disponible.
 Comme on peut le voir sur la documentation CSS, le framework
met à disposition un certain nombre d’éléments comme le fait
également Twitter Bootstrap. On note par exemple la présence
d’une grille, de tabs (en version iOS et Android), et de tous les
éléments que l’on a l’habitude de retrouver sur l’UI d’une
application mobile.

99. www.themegallery.com
 L’intérêt de disposer de tels éléments est d’avoir une base de travail pouvant
être par la suite personnalisée selon votre charte graphique. En effet, l’interface
des applications mobiles reste plus ou moins toujours la même, c’est donc
beaucoup plus simple de travailler en ayant une base.
D’un point de vue front end

100. D’un point de vue backend
 Le framework est basé sur AngularJS, gage de stabilité
puisque le framework est maintenant largement utilisé et
surtout développé par Google.
 Ionic apporte un lot de fonctionnalités très poussées afin de
pouvoir développer une application “web” au plus proche du
natif.
 Comme indiqué dans la documentation JS, nous retrouvons
notamment un “Side menu”, des tabs, la possibilité de
gérer l’intégralité des gestures et évènements présents sur
mobile (onTap, onDoubleTap..). Autant de fonctionnalités
indispensables pour développer une application mobile, et
se rapprocher ainsi au maximum d’une application
développée “nativement”.

101. L’écosystème
 Ionic Lab : Comme évoqué précédemment, Ionic met à
disposition un “lab” : il s’agit d’un serveur de développement local
émulant l’interface Android et iOS côte à côte et disposant d’un
livereload.
Cette fonctionnalité est vraiment très intéressante lors du
développement de l’application puisqu’elle permet de voir les
différences entre les deux plateformes, mais également de
développer à l’aide du livereload comme on le ferait sur un projet
web.
 ngCordova : Extensions AngularJS permettant d’intégrer les
plugins Apache Cordova et d’avoir ainsi accès aux fonctionnalités
du device, telles que l’appareil photo, le touch id, ou encore
l’accéléromètre, depuis un service Angular.

102. www.themegallery.com
 Ionic creator : Il s’agit d’un assistant à la création d’applications Ionic,
permettant de créer des interfaces graphiques via de simples “drag and drop”
puis de créer votre projet Ionic grâce à l’identifiant de votre projet “creator”.
L’écosystème

103. Installation
 Installer d’abord Node.js 4.
 Ensuite, installer Cordova et Ionic.
 Pour les applications Android, il faut
installer le SDK de Android
 Pour les application IOS, il faut
installer XCode.

104. Premier outil à installer : NodeJS

105. Installer Node JS
Le chemin de NodeJS devrait être déclaré
dans la variable d’environnement Path

106. Installer Androïde SDK
Pour générer une application androide, il faudrait installer
Androïde SDK
Créer une variable d’environnement
ANDROIDE_HOME Qui indique le chemin
de anndoid-sdk

107. Créer une variable d’environnement
JAVA_HOME Qui indique le chemin de du
kit de développement java

108. Installation de cordova et ionic :
Exécuter la commande :
Exécuter la commande :

109. Première application IONIC
Le premier et le plus basique est la création d’une
application vide. Pour cela, tapez la commande
suivante dans le terminal:
Blank

110. Première application IONIC
Le second et certainement le plus utile, est la création d’une
application avec un menu latéral intégré. Pour cela taper la
commande suivante dans le terminal :
$ionic start monProjet sidemenu
 SideMenu

111. Enfin, le dernier Template proposé qui est celui par défaut
lorsqu’on ne spécifie pas le Template est la création d’une
application avec des onglets. Pour cela tapez la commande
suivante dans le terminal :
Première application IONIC
 Tabs

112. Structure du projet

113. • Visualiser l’application en utilisant un serveur
local
Plateformes et déploiement
Ionic est un framework permettant la création d’applications
hybrides. De ce fait il est possible de cibler les plateformes
(systèmes d’exploitations) que l’on souhaite viser

114. Résultat

115. Générer une application android
Pour configurer votre application pour les
appareils Android. Il suffit d’exécuter la
suivante commande à la racine de votre
projet :
Pour pouvoir générer une application de type Android, il ne
nous reste plus qu’à ajouter la plateforme avec la
commande:

116. IOS
Pour configurer votre application pour les appareils IOS. Il
suffit d’exécuter la suivante commande à la racine de
votre projet :
Ensuite, pour compiler puis lancer et déployer votre
application sur un appareil connecté ou depuis un
émulateur, il suffit d’exécuter la commande suivante :

117. Construire l’application android : .APK
Pour construire l’application on utilise la commande :
ionic build android

119. 1- création de projet

120. 2- spécifier la Platforme de déploiement

121. 3-Génère l'application en android

122. 4- Structure de notre projet