Atelier 01
Atelier 01
Atelier 01
ISET SFAX
DE L’INFORMATIQUE
Atelier 1
Matière : ATELIER FRAMEWORK CROSS-PLATFORM
DSI3
Enseignants : S. Hadhri & M. Hadiji
I. Présentation d’ionic
Ionic est un Framework gratuit et Open Source créé en 2013, permettant de développer rapidement
des applications mobiles multi-plateforme notamment pour Android, iOS et le web, à partir d’une
seule base de code (langages web). Grâce à Cordova, on peut utiliser les propriétés natives des
mobiles, comme la géolocalisation, l’appareil photo, …
Ionic s’appuie énormément sur Angular. C’est pour cela que ionic utilise le système de routage
d’Angular pour la navigation. Il est également utilisé pour le cycle de vie des pages et dans la
structure du projet. A partir de ionic 5, il devient possible d’utiliser d’autres Framework comme
Vue.JS et React ou bien du javascript pur.
Ionic utilise un certain nombre d'outils permettant de créer rapidement une application mobile.
Parmi ces outils nous pouvons citer principalement :
Ionic a développé son propre IDE nommé ionic Studio. Malheureusement, cet IDE est uniquement
disponible en version entreprise, donc payant. À la place, on peut utiliser d’autres IDE comme :
• VS Code
• Atom
• WebStorm
AFCP Page 1 / 5
Atelier 1
II. Installation
Pour travailler avec ionic, nous devons installer quelques paquets sur la machine.
1. NODE.JS
Téléchargez et installez la dernière version LTS de Node.js https://nodejs.org/en/download/
2. NPM
Pour pouvoir jouer avec ionic, il faut utiliser NPM, le manager de paquets de Node.js.
npm install -g npm@latest
3. IONIC
npm install -g @ionic/cli
4. CORDOVA
npm install -g cordova
Exemple :
ionic start mon-projet-ionic blank
AFCP Page 2 / 5
Atelier 1
IV. Exécution du projet
1. Sur le navigateur
Pour lancer l’application, il suffit de se mettre dans le dossier et de lancer la commande ionic serve.
cd mon-projet-ionic
ionic serve
➔ Cette commande met en place un serveur web. Ce dernier publie l’application ionic et la
rend accessible depuis un navigateur internet.
2. Sur mobile / émulateur
Il est possible de déployer l’application sur un mobile / émulateur mais pour cela il faut installer SDK
et gradle puis configurer le PATH.
a. L'installation de SDK et de gradle
SDK est le kit de développement nécessaire et ce pour chaque plateforme qu’on souhaite supporter.
Nous allons par la suite nous focaliser sur la plateforme Android. Pour cela, nous avons besoin de
gradle qui est utilisé pour construire et gérer des projets Android grâce à plusieurs modules et
dépendances de librairies.
Cordova a besoin que certaines variables utilisateur d'environnement soient définies pour
fonctionner correctement. Il faut :
• Ajouter l’emplacement du dossier bin relatif à l'emplacement d’installation du JDK au PATH
• Définir la variable d'environnement ANDROID_SDK_ROOT sur l'emplacement d’installation
du SDK Android
• Télécharger gradle et ajouter au PATH gradle/bin
• Ajouter les dossiers suivants de l'Android SDK au PATH : tools, tools/bin et platform-tools
b. Ajouter des plateformes au projet
Pour ajouter des plateformes au projet il faut se placer dans le dossier du projet. Ensuite, on va
rajouter la plateformes Android
ionic cordova platform add android
Pour vérifier l'ensemble des plateformes supportées :
ionic cordova platforms ls
Pour supprimer une plateforme
ionic cordova platform rm ios
c. Build de l'application
La commande suivante compile la brique native, exécute plusieurs traitements sur les ressources
web et crée un projet utilisable sur mobile.
ionic cordova build android
Une fois exécutée, un fichier apk est généré dans platforms /android /app /build /outputs /apk
/debug
d. Tester l'application sur un emulateur ou un mobile
AFCP Page 3 / 5
Atelier 1
Il est possible de lancer directement l'emulateur Android :
ionic cordova emulate android
Pour activer une mise à jour automatique de l’application dès que le code source est modifié :
ionic cordova run android -l
V. Codage
Chaque page se compose de ces 3 parties liées :
● Un fichier CSS pour définir le style de la vue
● Une page HTML qui représente la vue
● Un fichier TypeScript contient la classe associée à la vue
Fichier home.page.ts
import {Component} from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor() {
}
}
Le décorateur @Component est utilisé en interne par ionic et Angular et les importations en haut
importent différents composants d'autres packages NPM.
Dans la classe HomePage, on peut définir une variable :
Fichier home.page.ts
import {Component} from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
maVariable: string = 'Bonjour!';
constructor() {
}
}
On peut désormais accéder à cette variable via le mécanisme d’interpolation d’Angular en utilisant
les doubles accolades «{{» et «}}» dans la page HTML.
Fichier home.page.html
<ion-header>
<ion-navbar>
AFCP Page 4 / 5
Atelier 1
<ion-title>
ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
{{ maVariable }}
</ion-content>
On souhaite ajouter un bouton et appeler une fonction pour changer la chaîne de caractères.
Dans la classe HomePage, on va implémenter une fonction qui change la valeur de la variable. On
peut accéder à toutes les variables d'une page en utilisant this.
Fichier home.page.ts
export class HomePage {
maVariable: string = ' Bonjour!';
constructor() {
}
changerValeur() {
this.maVariable = 'Comment allez-vous ?';
}
}
On remarque maintenant que lorsque le bouton est cliqué, la valeur de la vue est directement
mise à jour. Cela fonctionne à nouveau automatiquement grâce à la liaison de données
d'Angular entre la vue et la classe !
AFCP Page 5 / 5
Atelier 1