Sommaire

1. Introduction
2. Installation
3. Structure du projet IONIC
4. Templates et Customisation
5. Utilisation des composants Ionic
6. Architecture avancée d'une application Ionic : Composants,
Pages, Directives, Providers, Services, Pipes, Modules, Routes,
plugins natifs
7. Persistance des données
8. Tests et débogages avancés
9. Ionic et son écosystème : Appflow, Lab, Dev App, Creator et
market
10. Publication sur les stores
Introduction
 Développement Mobile

• Trois manières pour développer des

applications mobiles :
– Développement mobile natif
– Développement mobile Web
– Développement mobile hybride
 Développement Mobile

Développement mobile natif :

• Une application mobile est dite native, si le
développement effectué pour la créer (et
donc le langage de programmation) est
spécifique à la plateforme cible.
Plateforme cible Langage de Programmation
Android (Google) Java, Kotlin
IOS (Apple) Objective-C, Swift
Windows Phone (Microsoft) C-Sharp (C#)
 Développement Mobile

Développement mobile Web

• Une application web mobile est une version
allégée d'un site internet, optimisée pour les
écrans de petites tailles (smartphone, tablette,
TV connectée,...).
• On parle la plupart du temps de site
responsive, car il s'adapte aux caractériques
de l'écran du navigateur web.
 Développement Mobile

Développement mobile hybride

• Une application est dite hybride si elle est
développée pour les smartphones avec les
outils classiques du web.
• Les applications mobiles hybrides permettent
aux développeurs de réutiliser leurs
compétences existantes en développement
web.
• La méthode la plus attrayante pour la
rentabilité d'une organisation.
Développement Mobile
 Qu’est‐ce que IONIC framework ?

• Ionic est un framework de développement

d'applications mobiles et de bureaux,
performantes et esthétiques à la fois.
• Ionic est centré sur la conception d'interfaces
utilisateur (UI), ce qui permet d'intégrer différents
types de Frameworks JavaScript pour la gestion des
actions de l'utilisateur (UX : User eXperience).
• Ionic propose de nombreux plugins permettant
l’accéder aux fonctionnalités natif d’un appareil tel
que l’accès à la caméra, le Push Notifications, GPS,
Bluetooth et bien d’autres.
• Ionic possède intègre les Framework Angular et
React
 Avantages IONIC framework ?

• Open Source et 100% gratuit

• Fondations solides : s'appuie sur des technologies du
web fiables et normalisées: HTML, CSS et JavaScript)
• Coder une fois, déployer partout
• Des composants qui aide à créer des applications
mobiles élégantes et ergonomiques : en quelques
clics et quelques lignes de codes suffisent.
• Tests et débogage simples
• Un écosystème riche (ionic market, ionic creator,
appflow)
• Une large communauté (Stackoverflow : +40700
questions)
 Autres plateformes de developpement mobile
hybride

• Appcelerator Titanium (gratuit)

• Win Dév mobile (payant)
• IBM Worklight
• Adobe Phone Gap
• Xamarin (.NET)
 Dépendances de IONIC

• NodeJS : est un logiciel permettant de

développer et d’exécuter du code JavaScript côté
serveur.
• NPM : le gestionnaire de paquet de NodeJS
• Angular : un framework Javascript développé
par Google
• TypeScript : un langage de programmation libre
et open source développé par Microsoft qui a
pour but d’améliorer et de sécuriser la
production de code JavaScript.
• SASS : un langage de génération de feuilles de
style (CSS dynamique)
 Edition du projet ionic

• Plusieurs IDE professionnels peuvent être

utilisé pour éditer le code:
– Web Storm, PHP Storm
– Visual Studio Code
– Eclipse avec plugin Angular
• D’autres éditeurs classiques peuvent être aussi
utilisé :
– Atom
– Sublime Text
 Installation de IONIC

• Installer d’abord Node.js 6.

https://nodejs.org/en/download/
• Ensuite, installer Cordova.
npm install ‐g cordova
• Puis, installer Ionic.
npm install ‐g ionic
• Pour les applications Android, il faut installer le
SDK de Android (ou bien utiliser emulateur
Genymotion)
• Pour les application IOS, il faut installer
• XCode.
 Création d’un projet avec IONIC

• Ionic Framework propose trois Templates

prédéfinis :
– Blank : création d’une application vide.
ionic start monProjet blank
– SideMenu : création d’une application avec un
menu latéral intégré.
ionic start monProjet sidemenu
– Tabs : création d’une application avec des onglets
ionic start monProjet tabs
 Plateformes et déploiement

Android
• Pour configurer votre application pour les appareils Android. Il suffit d’exécuter
la suivante commande à la racine de votre projet :
ionic cordova platform add android
• 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 :
ionic cordova run android
IOS
• Pour configurer votre application pour les appareils IOS. Il suffit d’exécuter la
suivante commande à la racine de votre projet :
ionic cordova platform add ios
• 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 :
ionic cordova run ios
Web
• Il est par ailleurs possible de déployer l’application sur un serveur local de test.
Pour cela exécuter à la racine de votre projet la commande suivante :
ionic lab
Structure du projet IONIC
Templates et Customisation
 Attributs de style

• Ionic met à disposition un ensemble d'attributs qui peuvent être utilisés sur
n'importe quel élément pour modifier du texte, le centrer ou encore gérer
les marges.
 Grille CSS responsive

• Ionic propose également un système de grille css pour permettre une

meilleur gestion de blocs de contenus. Il est assez similaire dans sa syntaxe à
celui que propose Bootstrap.
 Grille CSS responsive

• Ionic propose également un système de grille css pour permettre une

meilleur gestion de blocs de contenus. Il est assez similaire dans sa syntaxe à
celui que propose Bootstrap. <div>
<ion-grid> 1 of 3
<ion-row> </div>
<ion-col> </ion-col>
<div> <ion-col>
1 of 2 <div>
</div> 2 of 3
</ion-col> </div>
<ion-col> </ion-col>
<div> <ion-col>
2 of 2 <div>
</div> 3 of 3
</ion-col> </div>
</ion-row> </ion-col>
<ion-row> </ion-row>
<ion-col> </ion-grid>
 Utilisation de SASS

• Ionic utilise Sass (Syntactically Awesome Stylesheets) pour sa gestion de

styles CSS. un langage de génération de feuilles de style, robuste et facile à
prendre en main.

pour générer de
manière plus efficace
vos thèmes, vous
pouvez utiliser l'outil
que propose ionic sur
internet :
https://ionicframework.
com/docs/theming/colo
rs#new
 Utilisation des composants Ionic

• Le framework propose pléthore de

composants, du bouton d'action au toast, en
passant par des listes d'éléments pour
développer à peu près tout type d'application.
• Chaque composant à sa propre API, ce qui
permet de l'exploiter au maximum.
• Lliste de tous les composants se trouve à
l'adresse
https://ionicframework.com/docs/components
 Utilisation des composants Ionic

• Composant Bouton :
<ion-button>Mon bouton</ion-button>
• Composant List
<ion-list>
<ion-item>
<ion-label>Pokémon Yellow</ion-
label>
</ion-item>
<ion-item> <ion-label>Mega Man
X</ion-label>
</ion-item>
</ion-list>
 Utilisation des composants Ionic

Composant Select :
<ion-select value="btc">
<ion-select-option
value="btc">Bitcoin
</ion-select-option>
<ion-select-option
value="xrp">Ethereum
</ion-select option>
<ion-select-option
value="xrp">Ripple</ion-select-
option>
<ion-select-option
value="ltc">Litecoin</ion-select-
option>
</ion-select>
 Utilisation des composants Ionic

Composant Cards
<ion-content>
<ion-card>
<ion-card-header>
Charles EDOU NZE
</ion-card-header>
<ion-card-content>
<p>Profession : Ingénieur
informatique</p>
<p>Localisation : Troyes</p>
<p>Site internet :
https://charlesen.fr</p>
</ion-card-content>
</ion-card>
</ion-content>
 Utilisation des composants Ionic

• Composant Fab : Il s'agit d'un élément en

forme de cercle qui permet, au clic, d'afficher
d'autres éléments actionnables eux aussi par
clic.

<ion-fab vertical="bottom"
<ion-fab-button>
<ion-icon name="arrow
</ion-fab-button>
</ion-fab>
Architecture avancée d'une
application Ionic
 Composants

• Les composants permettent une meilleure

décomposition de l'application, facilitent le
refactoring et le testing.
• L’application est formée par un ensemble de
composants.
• Chaque composant peut imbriquer d’autres
composants définissant ainsi une structuré
hiérarchique.
• Le composant racine s’appelle Root Component
• Un composant est une classe, qui contrôle une vue
 Pages

• Une page est aussi considérée comme un

composant
• Une Page est un composant qui agira comme
une vue entière (elle peut avoir des
composants imbriqués).
• Pour créer une page :
ng generate page nom_de_la_page
 Directives

• Une directive est un élément qui va nous permettre d'étendre

des fonctionnalité html. Il en existe différents types :
– Directive de type attribut : vous en avez déjà vu, elles
permettent de modifier du html. Citons par exemple color, une
directive qui permet d'attribuer la couleur passée en paramètre à
l'élément concerné, ou encore la directive padding, qui permet
d'ajouter un padding à l'élément qui l'invoque.
– Directive de type composant : oui au risque de vous embrouiller
un peu, un composant est en réalité une directive, mais dotée
d'un template html. La directive est en quelque sorte l'atome, le
composant la molécule.
– Directive de type structure : Ce type de directive est fait pour la
manipulation du DOM et commence toujours par un "*". On peut
citer parmi celles-ci deux que nous avons déjà utilisées à savoir
*ngIf et *ngFor
 Pipes

• est une classe décorée par le décorateur @pipe

• permet de modifier l’affichage d’une donnée
• peut être utilisé dans le HTML, ou dans le code
applicatif
• doit implémenter la méthode transform(value: any,
args?: any) de l’interface PipeTransform
• peut prendre des paramètres
Exemple :
 Routage et Navigation
• La version 4 de Ionic a vu l'arrivée d'un tout nouveau système de
routage inspirée d'Angular.
• Désormais chaque url est associée à une page de l'application, tout
comme tout url dans un navigateur est associé à une page web.
Exemple :
 Services/Providers
• Un service permet de factoriser et de centraliser du code
qui peut être utile ailleurs dans l'application.
• une classe TypeScript décorée par @Injectable
• Les composants se limite à l’affichage et à la gestion des
événements utilisateurs dans la vue du composant.
L’exécution des traitements en local ou en backend sont
attribués aux services.
• Les service qui interagissent avec la partie backend de
l’application en envoyant des requêtes HTTP.
• Les composants qui consomme les services, toutefois, un
service peut consommer d’autres services.
 Services/Providers
• Pour créer un service
ng generate service nom-service
Ou aussi
ng g s nom-service
• Créons un service personne dans un répertoire
services
ng g s services/personne
Remarque : deux fichiers sont créés
– personne.service.ts
– personne.service.spec.ts
 Modules

• Un module angular permet de regrouper en un

seul endroit des composants, des directives,
des pipes et des services d'une application.
• Prenons par exemple le module racine de notre
application défini comme ceci
 Plugins natifs

• En plus de composants purement visuel qui vous

permettent de mettre en forme votre application, Ionic
propose également des plugins natifs cette fois-ci pour
interagir avec les fonctions dites natives de votre téléphone
mobile.
• Ces plugins Ionic sont en réalité des wrappers des plugins
Cordova/Phonegap.
• La liste de tous les plugins Ionic disponibles actuellement se
trouve à l'adresse https://ionicframework.com/docs/native
• Chaque plugin possédant sa propre documentation il est
recommandé de suivre les instructions d'installation à partir
de la documentation de chaque plugin,
 Plugins natifs

Exemple plugin camera :

• Ce plugin permet de
prendre une photo ou
d'enregistrer une vidéo en
utilisant l'objet
navigator.camera
introduit avec l'arrivée du
HTML5
Installation
• Pour l'installation, il suffit
simplement de lancer les
commandes suivantes :
ionic cordova plugin add
cordova
npm install --save @ionic
• On le déclare ensuite
dans NgModule :