Atelier 01

Télécharger au format pdf ou txt
Télécharger au format pdf ou txt
Vous êtes sur la page 1sur 5

DEPARTEMENT TECHNOLOGIES

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.

Le site officiel du développement ionic est : www.ionicframework.com

Ionic utilise un certain nombre d'outils permettant de créer rapidement une application mobile.
Parmi ces outils nous pouvons citer principalement :

Ionic CLI : une fonction disponible en ligne de commandes pour créer,


compiler, déployer, ...des applications Ionic.

Apache Cordova : un framework open-source développé par la


Fondation Apache. Il permet de créer des applications pour différentes
plateformes en HTML, CSS et JavaScript.

NodeJS : est un logiciel permettant de développer et d’exécuter du


code JavaScript côté serveur, contrairement à ce qu’on a l’habitude de
voir avec le javascript côté client.

NPM : le gestionnaire de paquet de NodeJS

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.

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

III. Création d’un nouveau projet


Créer un nouveau projet ionic Pour créer un nouveau projet ionic, taper dans l’invite de
commande :
ionic start mon-projet-ionic --cordova
ou
ionic start mon-projet-ionic [template_name]
Ionic permet de créer un projet en utilisant des modèles intégrés :
● tabs : une application simple avec un onglet.
● sidemenu : une application ionic avec menu latéral.
● blank : une application ionic vierge.

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

Il est possible de lancer directement un terminal réel :


ionic cordova run 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 va à présent ajouter un bouton et au clic la fonction changerValeur() sera appelée.


Fichier home.page.html
<ion-header>
<ion-navbar>
<ion-title>
ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button full (click)="changerValeur()">Click me!</button>
{{ maVariable }}
</ion-content>

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

Vous aimerez peut-être aussi