DEVELOPPEMENT MOBILE

IONIC

Présenté par :
Adjoumani Kouakou
Ado Anicet
Asseke Yan
Bakayoko Cheick Seko
Bama Elysee Dieudonne
Boukoro Armel

Elèves Techniciens Supérieurs en Informatique – 3 ème Année

Enseignant :
Dr. Assalé Adjé Louis

Année Académique : 2019-2020

 DEVELOPPEMENT MOBILE

SOMMAIRE
SOMMAIRE ........................................................................................................................ 2
I. INTRODUCTION......................................................................................................... 4
I. IONIC ...................................................................................................................... 5
II. APACHE CORDOVA ............................................................................................. 5
II – principes et fonctionnement .......................................................................................... 6
1. FONCTIONNEMENT D’IONIC .................................................................... 6
2. L’ARCHITECTURE MVC ............................................................................. 7
III- INSTALLATION ET CONFIGURATION............................................................ 7
1. NodeJS ............................................................................................................. 7
2. Cordova ........................................................................................................... 7
3. IONIC .............................................................................................................. 7
4. ANDOID SDK ................................................................................................ 8
5. EMULATEUR................................................................................................. 8
Iv- exemple D’UNE APPLICATION ........................................................................... 8
1. CREATIONS D’UN PROJET ........................................................................ 8
2. LANCEMENT................................................................................................. 9
3. INTERFACE DU PROJET ............................................................................. 9
4. OUVERTURE DU PROJET DANS UN EDITEUR .................................... 10
CONCLUSION .................................................................................................................. 11
REFERENCES BIBLIOGRAPHIQUES ........................................................................... 12
WEBOGRAPHIE .............................................................................................................. 12
TABLE DES MATIERES ................................................................................................. 13

DEVELOPPEMENT MOBILE Page |2

 DEVELOPPEMENT MOBILE

C’est dans le cadre de notre cours de « Développement Mobile » qu’il nous a été demandé
de faire des recherches sur le Framework Ionic. Ce présent document est donc un rapport
dudit Exposé.

DEVELOPPEMENT MOBILE Page |3

 DEVELOPPEMENT MOBILE

I. INTRODUCTION

Une application est un programme utilisé pour réaliser une tâche, ou un ensemble de tâches
élémentaires d'un même domaine ou formant un tout.

Il existe plusieurs types d’applications à savoir :

Une application hybride est une application utilisant le navigateur web intégré du support
et des technologies web pour fonctionner sur différents OS.

Une application web désigne un logiciel applicatif hébergé sur un serveur et accessible via
un navigateur

DEVELOPPEMENT MOBILE Page |4

 DEVELOPPEMENT MOBILE

Une application native est une application mobile qui est développé spécifiquement pour
un des systèmes d’exploitations par les smartphones et tablettes.

I. IONIC

Ionic est un Framework open-source base initialement sur Angular et Apache Cordova,
Ionic permet de créer un code multi-support en utilisant des outils Web comme HTML,
CSS, JavaScript afin de générer des applications iOS, Android, Chrome, Windows Phone
et bien d’autres.

II. APACHE CORDOVA

DEVELOPPEMENT MOBILE Page |5

 DEVELOPPEMENT MOBILE
Apache Cordova Apache Cordova est un Framework open-source permettant de créer
des applications pour différentes plateformes (Android, Firefox
OS, iOS, Ubuntu, Windows...) en HTML, CSS et JavaScript.

II – principes et fonctionnement

1. FONCTIONNEMENT D’IONIC

Apache Cordova permet, quant à lui, la construction des applications natives. C’est un pont
de développement qui permet d’encapsuler du code client Web (ici Ionic/Angular) dans une
application native telle que Android, IOS ou encore Windows Phone avec Cordova. Il
permet par ailleurs d’avoir certains accès aux fonctionnalités natives des appareils tel que
la caméra ou l’accéléromètre.

DEVELOPPEMENT MOBILE Page |6

 DEVELOPPEMENT MOBILE

2. L’ARCHITECTURE MVC

Le Modèle (Model) contient les données à afficher.

Le Contrôleur permet de capturer des données du modèle pour les transmettre à la vue.
La Vue permet d’afficher des données renvoyées par le contrôleur.
Enfin un fichier de routes permet la configuration de la navigation entre les différentes
pages.

III- INSTALLATION ET CONFIGURATION

1. NodeJS

Ionic s’appuie sur la plateforme Node JS. Il est donc indispensable de l’installer si vous ne
l’avez pas encore. Vous trouverez, sur le lien suivant, le site officiel ou vous pouvez
installer Node JS : https://nodejs.org/en/download/

2. Cordova

Exécuter la suivante commande pour installer Apache Cordova. Si vous l’avez déjà
passez cette étape :

3. IONIC

DEVELOPPEMENT MOBILE Page |7

 DEVELOPPEMENT MOBILE

4. ANDOID SDK

Pour développer une application pour appareils Android il est indispensable de

disposer des outils Android tel que le SDK Android. Si l’on souhaite cibler
l’application pour d’autres systèmes d’exploitations, il est là aussi indispensable de
disposer du SDK de la plateforme visée. Ceux-ci serviront à la compilation et à la
construction de l’application.

5. EMULATEUR

L’utilisation d’un émulateur pour tester l’application lors de la phase de développement est
une option viable. En effet, utiliser les différents terminaux virtuels proposés par un
émulateur pour tester, par exemple, son adaptation aux différents écrans est recommandé.

L’émulateur Genymotion est une solution viable (https://www.genymotion.com/).

Une alternative est de lancer l’application sur un serveur web local (localhost) et
utiliser les outils de visualisation du navigateur pour simuler un appareil précis.

Iv- exemple D’UNe ApplICATION

Une fois les outils installés, et qu’on dispose d’un environnement de travail opérationnel,
il est maintenant temps de créer notre projet que l’on nommera ‘welcome’.

1. CREATIONS D’UN PROJET

DEVELOPPEMENT MOBILE Page |8

 DEVELOPPEMENT MOBILE

2. LANCEMENT

3. INTERFACE DU PROJET

DEVELOPPEMENT MOBILE Page |9

 DEVELOPPEMENT MOBILE

4. OUVERTURE DU PROJET DANS UN EDITEUR

DEVELOPPEMENT MOBILE P a g e | 10
 DEVELOPPEMENT MOBILE

CONCLUSION

Pour conclure, nous pouvons dire qu’Ionic est un Framework puissant, un mélange d’outils
et de technos pour développer des applications mobiles hybrides rapidement et facilement.
Il s’appuie sur Angular et sur Cordova. Son utilisation demande l’apprentissage de
TypeScript, d’Angular et de Cordova.
Cependant On trouve beaucoup d’avantages à utiliser Ionic pour développer des
applications mobiles et web. On développe une fois et on déploie sur plusieurs
environnements.
Ce rapport comporte sans nul doute certaines erreurs, ainsi nous voudrons au-delà des
imperfections que vous serez amenés à noter, compter sur vos remarques, critiques et
suggestions de spécialiste que vous êtes afin de pouvoir améliorer la qualité dudit rapport
lors de l’élaboration d’éventuels rapport.

DEVELOPPEMENT MOBILE P a g e | 11
 DEVELOPPEMENT MOBILE

REFERENCES BIBLIOGRAPHIQUES

M Salah BENNOUR (SI5-IHM), Tutoriel Ionic framework 15 Pages.

WEBOGRAPHIE

[1] [En Ligne], http://ionicframework.com/, (Page visitée le 27 Décembre 2020).

[2] [En Ligne], http://forum.ionicframework.com/ (Page visitée le 27 Décembre

2020).

[3] [En Ligne], https://cordova.apache.org/, (Page visitée le 27 Décembre 2020).

[4] [En Ligne], http://ngcordova.com/ (Page visitée le 27 Décembre 2020).

DEVELOPPEMENT MOBILE P a g e | 12
 DEVELOPPEMENT MOBILE

TABLE DES MATIERES

SOMMAIRE ........................................................................................................................ 2
INTRODUCTION .................................................................... Erreur ! Signet non défini.
I. INTRODUCTION......................................................................................................... 4
I. IONIC ...................................................................................................................... 5
II. APACHE CORDOVA ............................................................................................. 5
II – principes et fonctionnement .......................................................................................... 6
1. FONCTIONNEMENT D’IONIC .................................................................... 6
2. L’ARCHITECTURE MVC ............................................................................. 7
III- INSTALLATION ET CONFIGURATION............................................................ 7
1. NodeJS ............................................................................................................. 7
2. Cordova ........................................................................................................... 7
3. IONIC .............................................................................................................. 7
4. ANDOID SDK ................................................................................................ 8
5. EMULATEUR................................................................................................. 8
Iv- exemple D’UNE APPLICATION ........................................................................... 8
1. CREATIONS D’UN PROJET ........................................................................ 8
2. LANCEMENT................................................................................................. 9
3. INTERFACE DU PROJET ............................................................................. 9
4. OUVERTURE DU PROJET DANS UN EDITEUR .................................... 10
CONCLUSION .................................................................................................................. 11
REFERENCES BIBLIOGRAPHIQUES ........................................................................... 12
WEBOGRAPHIE .............................................................................................................. 12
TABLE DES MATIERES ................................................................................................. 13

DEVELOPPEMENT MOBILE P a g e | 13