Développement web mobile avec IONIC 2

Développement

Mobile Web  
avec IONIC2
Version du 29/03/2017
Jean David Olekhnovitch
📧 jd@olek.fr
@gidehault

Web et mobile :
deux mondes à part
• Le web est basé depuis la ﬁn des années 90 sur un mode orienté
serveur :

• Un serveur HTTP qui centralise tous les traitements

• Des clients HTML/CSS qui aﬃchent passivement l’information

• De multiples tentatives existent pour ‘dynamiser’ le côté
client, Javascript en tête

• Un handicap : ça rappelle furieusement le modèle mainframe/
client texte des années 60/70

• Un souhait : préserver un standard ouvert
2

Web et mobile :
deux mondes à part
• Le mobile s’appuie sur des outils de
développements plus sophistiqués, mais dédiés à
des plateformes incompatibles entre elles
3
Android
- Langage Java
- Environnement propriétaire
Google, sur base Linux
- Développement Android
Studio
- Distribution : Google Play
iOS
- Langage Swift
- Environnement propriétaire
Apple, sur base NetBSD
- Développement XCode
- Distribution : App Store
FirefoxOS
Windows
Phone
Blackberry
Ubuntu
Tizen
…

Mais la mixité subsiste
• D’un côté, il est possible de faire tourner des
choses assez évoluées dans le navigateur de son
téléphone

• De l’autre, il est aujourd’hui possible d’accéder à
des fonctions ‘natives’ depuis son navigateur
5

1 - Historiquement : les
"sites mobiles"
• A l'époque des premiers smartphones, il était
nécessaire de faire une version spéciﬁque des sites
Internet pour visualisation sur téléphone mobile
6
Avantages
‣ version légère et bien adaptée aux
smartphones peu performants
‣ facilité de développement
Inconvénients
‣ nécessité de gérer deux versions
en parallèle
‣ aucune exploitation des possibilités
natives des téléphones

2 - Vers une version unique des
sites web : le responsive design
• Les possibilités d'élasticité (grille ﬂuide) et d'adaptation aux
devices (media queries) des feuilles de style CSS permettent
de maintenir une version unique des sites web tout en
s'adaptant au format d'aﬃchage
7
Avantages
‣ adaptation relativement simple (que
des hacks CSS)
‣ une seule version des sites web à
maintenir
Inconvénients
‣ aucune exploitation des possibilités
natives des téléphones

3 - Un pas vers les fonctions
natives : HTML5
• La version HTML5 propose, de manière plus ou
moins aboutie, la possibilité d'accéder à certaines
fonctions natives depuis son navigateur web
8
Avantages
‣ possibilité de cumuler avec les
capacités de responsive design
‣ fonctions accessibles en quelques
balises
Inconvénients
‣ toutes les fonctions ne sont pas
présentes
‣ compatibilité aléatoire suivant les
navigateurs

Du HTML à l'app mobile : un
chemin semé d'embuches
9
Site
HTML/
CSS
Déclinaison
site mobile
Site
Responsive
Site HTML5
App mobile
native
App hybride
web/mobile
?
AppsSites
Progressive
Webapps

L’enjeu des fonctions natives
• Stockage oﬄine

• Géolocalisation

• Gestuelles tactiles

• Bluetooth

• Accéléromètre, boussole…

• Notiﬁcations

• Caméra…
10

La barrière des appstore
• Google et Apple ont fait le choix du point d'entrée
unique vers l'application : l'app store (ou playstore)

• Pour diverses raisons de contrôle qualité, de
sécurité… et parfois de censure

• Cette barrière impose des critères techniques
nombreux et peu simples à franchir
11

1ères solutions : Apache
Cordova/Adobe PhoneGap
• Idée : proposer des passerelles entre les fonctions
natives, et des pages conçues en HTML/CSS

• Naissance du concept d’Application Hybride
• Aujourd’hui intégralement en opensource et géré
par l’Apache Foundation
12

Limitations de Cordova
• Ne propose pas de solution pour l’interface
utilisateur (gestuelles tactiles, etc…)

• La publication vers les stores Google/Apple reste
complexe

• A voir plus comme une série de librairies que
comme un framework a part entière
13

Surcouche et structuration:
la solution d'un framework
• Idée : compléter la philosophie (et les briques
techniques) de Cordova par un véritable framework
capable de :

• faciliter le développement

• industrialiser la publication sur les stores

• donner la possibilité de créer des modules
optionnels

• ‘casser’ la logique de page au sens HTTP du terme
14

Côté Facebook : React
• Framework développé en interne

• Destiné au développement des applications
Facebook avant tout

• Essentiellement côté « front »

• Basé sur Javascript

• Fait appel à des composants natifs autant que
possible
15

Autres frameworks
• Onsen UI

• Intel XDK

• Sencha Touch

• Kendo UI

• Framework 7
16
• JQuery Mobile

• Mobile Angular UI

• Famo.us

• Monaca

• Trigger.IO

• Electron (pour applis desktop)

Ionic
• Créé en 2013

• Repose entièrement sur Cordova pour la partie native

• Et sur AngularJS pour la cinématique des pages

• v2 sortie ﬁn 2016

• TypeScript remplace Javascript

• Angular2 remplace AngularJS
17

Angular 2
Architecture d’Ionic2
Apache Cordova
Angular 2
Ionic 2
HTML SCSS Typescript
NPM
NodeJS
Moteur HTML/CSS/JS
Natif
App
native Application
passerelle
vers le monde natif
cinématique des
écrans
framework
gestionnaire de paquets
environnement de
développement
afﬁchage in-app
via un interpréteur web

Installation d’Ionic (1)
• Première étape : installation de NodeJS 6

• Inclut NPM (gestionnaire de paquet Javascript)

• https://nodejs.org/en/download/
19

• Installation d’Ionic et de Cordova

• On se repose sur le gestionnaire de paquets
NPM

• Tout se passe en ligne de commande… comme
ça va être le cas pour toute la suite :

• npm install -g ionic cordova
20

Première app Ionic
• Génération du squelette :

• ionic start premierEssai super --v2
• On va dans le répertoire

• cd premierEssai

• Test dans un navigateur

• ionic serve -c --lab
21
Nom du
template qui sert de
modèle (blank, tabs,
sidemenu, tutorial …)
ionic peut à la fois créer
des apps ionic1 et ionic2
lancement avec
console de debug et choix de
l’émulateur

Visualisation sur un
téléphone
• Problème : on ne peut pas directement télécharger
une app sur un mobile (il faut passer par la
validation du constructeur)

• Contournement : l'app Ionic View qui permet de
visualiser un prototype de son app publié au
préalable sur les serveurs Ionic
22

Fonctionnement
d'Ionic View
23
Poste de travail
Serveur Ionic
Smartphone
App Ionic View
ionic upload
X
synchro
in-app
interdit
Nécessite la création d'un
compte sur http://ionic.io
Dispo sur AppStore
et GooglePlay

• Modules supplémentaires

• Pour chaque module supplémentaire, là aussi on
utilisera npm :

• npm install ionic-native --save
• Les mises à jour se font elles aussi en ligne de
commande :

• npm update -g ionic
24
Gestion des
dépendances
Installation globale

• Environnement iOS

• Il est obligatoire d’être sur Mac !

• Installation de XCode via le Mac App Store

• Déclaration dans ionic :

• sudo xcode-select -s /Applications/Xcode.app/
Contents/Developer
• sudo npm install -g ios-deploy --unsafe-perm=true --
allow-root
25

• Environnement Android

• Passe par l’installation de Java (JDK, pas le JRE) :

• http://www.oracle.com/technetwork/java/javase/downloads/index.html
• Installation d’Android Studio :

• https://developer.android.com/studio/index.html
• Installation des packages via le Open Android SDK Manager (‘android’ en ligne de
commandes)

• Android Platform SDK for vXXX

• Android SDK build-tools

• Android Support Repository

• Créer un Android Virtual Device (AVD) pour déﬁnir un émulateur type qui servira par la suite
26

Génération de l'icône et du
splash screen
• Les ﬁchiers suivants doivent être stockés dans le
répertoire /resources de l'application

• icon.png : taille de 192x192

• splash.png : taille de 2208x2208

• La génération de toutes les déclinaisons de ces
images se fait ensuite par l'instruction suivante, à
lancer avant le build :

ionic resources
27

Lancement de son application
dans un environnement natif
• ionic platform add android
• ionic platform add ios
• ionic build ios
• ionic build android
28

Préparer un build iOS
• Double-cliquer sur

• /platforms/ios/MonApp.xcodeproj
• Créer sur XCode un « Archive »

• Publier ensuite sur le compte (payant !) Developer Apple
créé via

• https://developer.apple.com

• Gestion de la publication sur

• https://itunesconnect.apple.com
29

Préparer un build Android
• Création d’une clé :

• keytool -genkey -v -keystore MonApp.keystore -alias
MonApp -keyalg RSA -keysize 2048 -validity 10000
• Création du build (ﬁchier .apk) prêt à être importé :

• ionic build android --release
• Création d’un compte puis publication sur

• https://play.google.com/apps/publish/
30

Structuration d’une
app ionic
• /src : code source de l’application

• /resources : stockage de l’icône et du
splashscreen

• /platforms : version compilée par plateforme

• config.xml : fichier principal de configuration de
l’app
31

Structuration du  
répertoire /src
• /app : fichiers principaux de l’application

• /pages : les pages de l’application

• /assets : divers fichiers statiques (css, js, images…)

• /providers : les ‘providers’ (‘moteurs’) de l’application

• /theme : définition d’un thème pour l’application

• index.html : fichier de démarrage de l'app
32

Création d’une nouvelle
page
• Création des fichiers :

• ionic g page MonEssai
• J’obtiens un dossier /src/pages/mon-essai,

• et 3 fichiers :

• mon-essai.html : interface de la page

• mon-essai.scss : style de la page

• mon-essai.ts : fonctions de traitement en amont et en aval
de la page (avec une classe qui s'appelle MonEssaiPage)
33
MonEssai
MonEssaiPage
nom de la classe
mon-essai
nom des fichiers

Déclaration d’une
nouvelle page
• Cette déclaration se fait dans le ﬁchier global  
/src/app/app.module.ts :
import { MonEssaiPage } from '../pages/mon-essai/mon-essai';
• Le nom « MonEssaiPage » doit également être
mentionné dans les paragraphes :

• ‘declarations’

• ‘entryComponents’
34

Structure d'un fichier .ts
• Chaque fichier .ts d'une page (ici : mon-essai.ts) est
avant tout une classe

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'monEssai',
templateUrl: 'mon-essai.html'
})
export class MonEssaiPage {
// attributs
// méthodes
constructor(public navCtrl: NavController) {
}
} 35
Import
de librairies et fichiers
externes utiles
Les attributs sont
les variables utilisées
dans la classe
Les
méthodes sont des
fonctions utilisées dans
la classe
Le constructeur est la
méthode appelée au
démarrage de la page
Divers
paramétrages
Fin de la
classe

Liens entre .ts et .html
• Le ﬁchier mon-essai.ts contient une classe (et
donc des attributs et méthodes) représentant la
partie dynamique de la page

• Le ﬁchier mon-essai.html contient la description
des éléments visuels de la page

• Les deux communiquent intimement par le biais
des mécanismes d’Angular
36

TS, HTML, et MVC
On est en fait ici très proche du pattern MVC bien connu des
développeurs d'interface utilisateur

• Mais le contrôleur est ici géré de manière transparente par le
framework Angular
37
Vue
mon-essai.html
Contrôleur
Ionic/Angular
Modèle
mon-essai.ts

Afﬁchage d’une variable
dans la page
• Prenons l’exemple d’un attribut de la classe  
(dans mon-essai.ts) :

export class MonEssaiPage { 
unAttribut: string="un contenu";
• On aﬃche ensuite l'attribut au milieu du code de la page
mon-essai.html de la manière suivante :

<p>{{unAttribut}}</p>
• Nul besoin de préciser le nom de la classe ou de l’instance

• On verra plus tard que cette liaison est dynamique, et permet
la mise à jour du contenu de cette variable
38

Aller d’une page à l’autre (1)
• Pour aller à la nouvelle page, on commence par créer un
bouton dans le ﬁchier .html de la page principale :

<button ion-button>Cliquez ici</button>
• On rajoute ensuite une mention '(click)' qui permet
d'indiquer le comportement à avoir lors d'un clic sur le
bouton

<button ion-button (click)="boutonClic()">Cliquez ici</button>
39
Fonction qui sera
appelée lors du 'clic'

Aller d’une page à l’autre (2)
• On crée la fonction correspondante dans le ﬁchier .ts de la page
principale:

boutonClic() { 
this.navCtrl.push(MonEssaiPage); 
}
• Pour fonctionner, ce code a besoin au préalable de deux éléments :

• La page MonEssaiPage doit être importée pour être connue

import {MonEssaiPage} from '../mon-essai/mon-essai';
• Le contrôleur de navigation ‘navCtrl’ doit être connu et déclaré :

import { NavController} from 'ionic-angular';
constructor(public navCtrl: NavController) {
40

Schéma récapitulatif
Cliquez ici
home.html
class HomePage
{
boutonClic()
{
this.navCtrl.push
(MonEssaiPage);
}
home.ts
{{unAttribut}}
mon-essai.html mon-essai.ts
class MonEssaiPage
{
unAttribut : string;
}
Démarrage
de l'app

Le constructeur d'une
classe de page
• Ce constructeur a des paramètres d'entrée qui fonctionnent de manière
"magique" : il suﬃt de les mentionner pour qu'ils :

• soient renseignés avec des objets déjà initialisés

• remplissent un attribut du même nom (rendant l'objet accessible dans toute
la classe)

• Cette 'magie' est en fait le pattern injection, géré par le framework

• Ces providers sont :

• Soit des contrôleurs standards d'ionic-angular (ex : NavController)

• soit déclarés dans app.module.ts (providers globaux à l'app)

• soit dans le bloc @Component de la page
42

Afficher des traces dans la
console
• Lancer ionic serve avec le paramètre -c permet
d'avoir une trace de la console dans le terminal, ce
qui est bien pratique pour débugger

• Vous pouvez n'importe où dans le code afficher
des éléments dans la console :

console.log("valeur de x :"+x);
• Vous pouvez également afficher des structures
complexes avec JSON.stringify :

console.log("erreur :"+JSON.stringify(err));
43

Composants ionic
• ionic2 est fourni avec de très très très nombreux
composants, pour gérer à peu près toute l’interface de
son app mobile

• Nous allons voir sur la suite de ce cours quelques uns de
ces composants, mais une bonne idée est de
commencer par les découvrir en regardant la page :

• http://ionicframework.com/docs/v2/components/
44

Rafraichissement d'une
page
• Pour proposer un rafraichissement d'une page, on
passe par le composant <ion-refresher>, à
positionner en tête de son <ion-content> :

<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Tirer pour mettre à jour"
refreshingSpinner="circles"
refreshingText="Mise à jour...">
</ion-refresher-content>
</ion-refresher>
45

Récupérer la saisie d'un
champ de saisie
• On commence par créer dans la classe (côté .ts,
donc), un attribut nom qui récupérera le contenu

nom : string = "";
• Ensuite, dans la page (côté .html), on utilise le
component ion-input avec la propriété ngModel
qui va permettre de faire le lien avec l'attribut

<ion-input [(ngModel)]="nom"></input>
46

Créer une barre de
navigation (1)
• On peut passer par le template ‘tabs’ lors de la création de son
projet

• Mais il est également possible de construire manuellement sa
barre de navigation :

• On commence par créer une ‘page’ qui ne contiendra que les
données de la barre de navigation :

• ionic g page Tabs
• On crée ensuite deux pages qui compléteront Home en tant
que pages pointées par la barre de navigation (pour
l'exemple : Actus, Pratique)
47

Créer une barre de
navigation (2)
• Cette page Tabs contient côté HTML la liste des entrées de la
barre :

<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Actus" tabIcon="actus"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Pratique" tabIcon="pratique"></ion-tab>
</ion-tabs>
• Le ﬁchier .ts va permettre de lier à chaque entrée une page :

import { HomePage } from '../home/home';
import { ActusPage } from '../actus/actus';
import { PratiquePage } from '../pratique/pratique';
export class TabsPage {
tab1Root: any = HomePage;
tab2Root: any = ActusPage;
tab3Root: any = PratiquePage; 48

Créer une barre de
navigation (3)
• Dernière étape, cette page Tabs doit être déclarée
comme étant la page d’entrée de l’application, en
remplacement de Home

• Cette opération se fait dans le ﬁchier
app.components.ts :

import { TabsPage } from '../pages/tabs/tabs';
export class MyApp {
rootPage = TabsPage;
// rootPage = HomePage; // ancienne page d'entrée
49

Créer un menu latéral
• On peut passer par le template ‘sidemenu’ lors de
la création de son projet

• Mais il est également possible de construire
manuellement son menu
50

API REST et JSON
• Une API REST est un moyen de faire communiquer
un serveur et un client d’une manière souple,
simple et légère, en se basant :

• Sur le protocole de transfert HTTP (compatible
sur tous réseaux, léger, sécurisable) via ses
diverses déclinaisons : GET, POST, PUT, DELETE

• Sur l’encodage JSON des trames, pour pouvoir
transférer tout type de structure de données
51

JSON
• Ce format est une alternative plus légère à XML pour structurer des
données

• donnée simple : "name" : "Jean Dupont"

• données multiples : "movies": ["titre1", "titre2"]
• structure complexe :

{
"name":"paul rudd",
"movies":[
"I Love You Man",
"Role Models"
],
}
52

Exemple d’API REST
• Nous allons partir sur l’exemple complet en ligne 
https://reqres.in

• Cet exemple permet à la fois de trouver des exemples de
fonctionnement pour comprendre ce qu’est une API REST

• mais aussi de source pour pouvoir construire ses
premiers projets sans se soucier de la partie serveur

• NB : le CMS WordPress est depuis sa version 4.7 un
bon support pour diﬀuser facilement des données via
une API REST
53

Exemple de requête REST
simple
https://reqres.in/api/users/2

avec la méthode GET permet de récupérer les données
du user 2

Données retournées :

{
"data": {
"id": 2,
"first_name": "lucille",
"last_name": "bluth",
"avatar": "https://s3.amazonaws.com/jstein/128.jpg"
}
}
54
L’id est directement
présent dans l’URL

Exemple de requête REST
de liste
• https://reqres.in/api/users/ (sans préciser d’id user) permet de
récupérer une liste

"page": "1",
"per_page": 3,
"total": 12,
"total_pages": 4,
"data": [
{
"id": 4,
"first_name": "eve",
"last_name": "holt",
"avatar": "https://s3.amazonaws.com/marcoramires/128.jpg"
},
{
"id": 5,
"first_name": "gob",
"avatar": "https://s3.amazonaws.com/stephenmoon/128.jpg"
},
{
"id": 6,
"first_name": "tracey",
"avatar": "https://s3.amazonaws.com/bigmancho/128.jpg"
}
]
} 55

Méthodes HTTP
• Même si ces méthodes sont indépendantes des
traitements, on les utilise communément pour les
usages suivants dans le cadre d’une API REST :

• GET : lecture de données

• POST : création de données

• PUT : mise à jour de données

• DELETE : suppression de données
56
Les codes d'erreur sont également  
mis à contribution :

• 200 : lecture ou traitement OK

• 201 : création OK

• 404 : aucune donnée

• 401 : connexion refusée

Lecture d’une API REST (1)
• On commence par créer un ‘provider’, classe
réservée à un traitement qui n’est pas un aﬃchage

• ionic g provider ApiTest
• Tant qu'on y est, on va également créer la page qui
nous servira à aﬃcher la liste des utilisateurs

• ionic g page ListUsers
57

• Le provider contient le code de base pour appeler
l’API :

import { Http } from '@angular/http';
export class ApiTest {
baseurl: string;
constructor(public http: Http) {
this.baseurl = ‘https://reqres.in/api';
}
getURL(url)
{
url=this.baseurl + url;
return this.http.get(url).map(res => res.json());
}
58
L’adresse de l’API est
importante car elle doit être
stockée en dur dans le
code
Ce traitement est
asynchrone ; on y reviendra
/providers/api-test.ts
/pages/list-users/list-users.ts
/pages/list-users/list-users.html

• On peut ensuite utiliser le provider dans une page pour
peupler une liste

import {ApiTest} from '../../providers/api-test';
@Component({
providers: [ApiTest]
})
export class UnePage {
users: Array<any>;
constructor(public navCtrl: NavController, public apiTest:ApiTest) {
}
59
toute
variable passée en
entrée du constructeur
est ensuite accessible
en tant qu’attribut
attribut
qui stockera
la liste
Utilisation du
provider

• On complète ensuite la classe d'une initialisation consistant
à lire les données

ngOnInit() {
this.apiTest.getURL('/users/').subscribe(
data => {
this.users = data.data;
},
err => {
console.log("erreur :"+JSON.stringify(err));
},
() => console.log('Load Complete')
);
}
60
les données lues sont
ensuite stockées dans
l'attribut users
Traitement
asynchrone
"data": [
{
"id": 4,
…
},
{
"id": 5,
…
},
…
]

• On gère ensuite l’aﬃchage de la liste dans la partie HTML
de la page

• <button> est un élément ﬁxe, mais l'attribut *ngFor va
provoquer sa répétition

<ion-list>
<button ion-item *ngFor="let user of users">
{{user.first_name}}
</button>
</ion-list>
61
"data": [
{
"id": 4,
"first_name": "eve",
"last_name": "holt",
"avatar": "…"
},

Rendre les items
de la liste cliquables (1)
• On va maintenant modiﬁer nos <button> pour qu'ils
soient cliquables

• chaque clic lance un appel à la méthode itemTapped(),
en passant en paramètre le user courant

<button ion-item *ngFor="let user of users"  
(click)="itemTapped($event, user)">
…
</button>
62

Rendre les items
• Un clic sur un élément provoquera l’appel à une
méthode de la classe

itemTapped(event, user) {
this.navCtrl.push(UserPage, {
param_user: user
});
}
63
C'est l'objet user
complet qui est envoyé en
paramètre d’entrée de la
page UserPage

Rendre les items
• On va ensuite créer une page User

• Cette page contiendra le code nécessaire pour récupérer
le paramètre qu'on lui a fourni

user:any;
constructor(public navCtrl:NavController, public navParams: NavParams)
{
this.user = navParams.get('param_user');
}
64
/pages/user/user.ts
/pages/user/user.html

Rendre les items
• La page va ensuite pouvoir aﬃcher le contenu à partir de
l'objet user qu'on a reçu en paramètre, sans
rechargement nécessaire

<ion-card>
<ion-card-content>
<ion-card-title>
Bonjour, {{user.first_name}} {{user.last_name}} !
</ion-card-title>
</ion-card-content>
</ion-card>
65
/pages/user/user.ts
/pages/user/user.html

Schéma récapitulatif
Serveur
Héberge des API
REST
HTTPapi-test.ts
provider de
lecture de l'API
list-users.ts
• Appel du
provider
• Stockage
dans
l'attribut
'users'
list-users.html
boucle sur
'users'
user.ts
Stockage de
'user' en
attribut
data
param_user : useritemTapped(user)
user.html
afﬁche 'user'

Créer un traitement
asynchrone
• Contrairement à ce qui se passe avec un
développement web classique, tout dans Ionic/
Angular fonctionne de manière asynchrone :

• On commence par afficher la page

• On s'occupe ensuite d'afficher les éléments
dynamiques au fur et à mesure de leur récupération

• L'objectif est de fluidifier au maximum la réactivité de
l'application
67

Subscribe
• Les appels aux API REST étaient asynchrones :

this.apiTest.getURL('/users/').subscribe(
data => {
this.users = data;
},
err => {
},
);
}
68
Traitement
asynchrone
N'est exécuté
qu'une fois la
lecture achevée
<ion-card *ngFor="let user of users">
…
</ion-card> L'afﬁchage
est lui aussi
asynchrone

Créer ses propres
traitements asynchrones
getMedia(id)
{
return Observable.create(s => {
// traitement prenant du temps
var retour = /* retour préparé */;
s.next(retour);
s.complete();
},
err => {
console.log(JSON.stringify(err));
},
() => console.log('getMedia terminé')
);
}
69
this.apiTest.getMedia(id).subscribe(
data => {
this.users = data;
},
err => {
},
);
}
s.next() permet
d'envoyer des données en
retour de getMedia()

Afﬁcher du contenu HTML
• Dans certains cas (par exemple en récupérant un
article de Wordpress), l'API peut vous retourner du
code HTML

• Pour que ce code soit interprété (et non pas
aﬃché), il faut utiliser une balise particulière :

<p [innerHTML]="user.descriptif"></p>
70
Pas besoin de
mettre des accolades
pour préciser qu'il s'agit
d'un attribut

Gestion des styles
• Le look des pages s'eﬀectue via des styles CSS
situés :

• de manière globale, dans /src/app/app.scss

• pour chacune des pages, dans nom-page.scss
• Il est possible de lier un thème à son application
71

SCSS
• Il s'agit d'une déclinaison du langage CSS, avec
quelques rajouts bien utiles

• Chaque code SCSS est ensuite transformé en CSS

• Par exemple :
72
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.3em;
}
}
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.3em;
}

L'héritage en SCSS
• Permet de simpliﬁer l'écriture de certains blocs
73
.error
border: 1px #f00
background: #fdd
.error.intrusion
font-size: 1.3em
font-weight: bold
.badError
@extend .error
border-width: 3px
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}

Insertion d'animations
• On peut utiliser la bibliothèque animate.css 
https://daneden.github.io/animate.css/

1. Téléchargement et stockage dans  
/src/assets/css

2. Chargement dans /src/index.html

<link href="assets/css/animate.css" rel="stylesheet">
3. Utilisation dans le code HTML des pages. Ex :

<ion-card class="animated fadeInLeftBig">
74

Plugins natifs
• Ces plugins sont la raison d'être même d'Ionic :
permettre de tirer le meilleur du hardware des
smartphones tout en restant dans un contexte web

• C'est Cordova qui est en charge de la partie native,
par toute une série de plugins développés dans les
langages natifs des environnements (iOS, Android)

• Liste complète des plugins (plus de 2000 !)
disponibles à l'adresse suivante : 
https://cordova.apache.org/plugins/
75

Prise de photo
• On utilise le plugin natif cordova-plugin-camera :

ionic plugin add cordova-plugin-camera
• La page dédiée à la prise de photo sera ainsi constituée :

import {Camera} from 'ionic-native';
export class CapturePicPage {
public base64Image: string;
}
• L'attribut base64Image permettra de stocker la dernière photo prise
sous forme binaire

• On pourra bien sûr stocker ensuite cette photo en base de
données
76

Interface de prise de photo
• Dans cet exemple minimaliste, on se contente d'un bouton
pour lancer le capteur, et pour aﬃcher la dernière photo
prise :

<ion-card>
<ion-card-content>
<h1>Prise de photo</h1>
<button ion-button (click)="takePicture()">Prendre une photo</button>
<h2>Dernière photo prise :</h2>
<img *ngIf="base64Image" [src]="base64Image" />
</ion-card-content>
</ion-card>
77
Le "src" est ici à
prendre au sens large
(donnée binaire, pas nom
de ﬁchier)
La balise ne sera
présente que si l'attribut
base64Image n'est pas
vide

Méthode de prise de photo
• Dernière étape : créer la méthode takePicture() qui
sera appelée lors du clic sur le bouton :

takePicture(){
Camera.getPicture({
destinationType: Camera.DestinationType.DATA_URL,
targetWidth: 1000,
targetHeight: 1000
}).then((data) => {
this.base64Image = "data:image/jpeg;base64," + data;
}, (err) => {
console.log(err);
});
}
78

Stockage local de données
• On commence par créer un Provider qui centralisera
l'accès aux données. Il aura pour rôle :

• de stocker de manière centralisée les principales
données de l'application pendant son fonctionnement

• d'accéder à la base de données pour stocker des
données de manière persistante

• Attention, pour écrire les tests permettant de déterminer
la source des données, il faudra en permanence penser
aux traitements asynchrones
79

Créer un provider global
• Pour stocker des données qui seront accessibles tout au long
du fonctionnement de l'application :

• Créer un provider doté d'attributs dans lesquels on stocke
les données

• Déclarer ce provider directement dans le bloc @NgModule
de app.module.ts
• On pourra ensuite créer dans ce même provider des
méthodes d'accès à la base de données, pour apporter une
pérennité aux données au delà de la présence en mémoire
de l'application
Mettre en priorité les moteurs les plus performants
80

Différents styles de
stockage
• Il existe plusieurs moteurs de stockage de données pour
une app Ionic :

• SQLite (mini-SGBD embarqué sous forme de plugin
natif)

• IndexedDB (mini-SGBD conçu par Mozilla)

• WebSQL (API vers un SGBD porté sur Chrome et Safari)

• localstorage (stockage de données key->value
standardisé dans HTML5)
81

Installation
• Le seul élément essentiel est le module gérant le
frontal d'accès au stockage de données

npm install --save @ionic/storage
• Vous pouvez également installer le plugin (natif)
SQLite

cordova plugin add cordova-sqlite-storage --save
82

Conﬁguration du module
• Tout se passe dans app.module.ts

import { IonicStorageModule } from '@ionic/storage';
…
@NgModule({
declarations: ...,
imports: [
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql','localstorage']
})
],
83
Mettre en priorité les
moteurs les plus
performants

Utilisation de base
• Le principe universel est celui dit "key/value" : on stocke
une valeur, indexée par une clé

import { Storage } from '@ionic/storage';
…
constructor(……, public storage:Storage) {
this.storage.ready().then(() => {
// stockage d'une valeur
this.storage.set('name', 'Jean David');
//Lecture d'une valeur par sa clé
this.storage.get('session_ID').then((val) => {
console.log('votre ID session :', val);
})
});
84
Key Value
name Jean David
client 1
session_ID
enGHumY%2C-2De-F-
TDzNHVmE%2ChY5

Utilisation avec SQL
• Lorsque le moteur de base de données le permet, on peut
utiliser des requêtes SQL (simpliﬁées) pour structurer de
manière plus complexe ses données

import {SqlStorage, Storage} from '@ionic/storage';
export class HomePage {
private storage: Storage;
public constructor() {
this.storage = new Storage(SqlStorage);
this.storage.query("CREATE TABLE IF NOT EXISTS users
(id INTEGER PRIMARY KEY AUTOINCREMENT,
first_name TEXT,
last_name TEXT)");
}
85

Insertion de données
avec SQL
• Les traitements sont asynchrones

this.storage.query("INSERT INTO users (first_name,
last_name) VALUES (?, ?)", ["JD", "Olek"]).then((data) => {
console.log("ok!");
}, (error) => {
console.log(error);
});
86
Cette partie n'est
exécutée qu'une fois
l'insertion terminée

Lecture de données
avec SQL
• Là aussi, la lecture est asynchrone

let liste:Array<Object>;
this.storage.query("SELECT * FROM users").then((data) => {
if(data.res.rows.length > 0) {
liste = [];
for(let i = 0; i < data.res.rows.length; i++) {
liste.push({
"id": data.res.rows.item(i).id,
"first_name": data.res.rows.item(i).first_name,
"last_name": data.res.rows.item(i).last_name,
});
}
}
}, (error) => {
console.log(error);
});
87

Géolocalisation
• Une fois encore, on va utiliser un plugin natif

ionic plugin add cordova-plugin-geolocation
• La récupération des coordonnées est un simple traitement asynchrone

import { Geolocation } from 'ionic-native';
export class MaPage {
latitude : number;
longitude : number;
…
ionViewDidLoad() {
Geolocation.getCurrentPosition().then((position) => {
this.latitude=position.coords.latitude;
this.longitude=position.coords.longitude;
}
}

88
On peut aussi
imaginer faire plutôt un
provider pour gérer la
localisation

Géoloc et Google Maps
• Cette partie va être l'occasion de montrer l'usage
d'une librairie Javascript directement au sein d'une
app Ionic

• Le chargement de la librairie Google Maps se fait
directement dans le ﬁchier index.html :

<script src="http://maps.google.com/maps/api/js"></script>
89
En production, il faut
rajouter ?key=MACLE en
mentionnant une clé
d'utilisateur
de Google Maps

Affichage de la map
• L'affichage sera une simple zone avec un marqueur #map qui
permettra au traitement de remplir plus tard cette zone avec
la carte

<ion-content>
<div #map id="carte"></div>
</ion-content>
• Du côté du fichier .ts, on utilise ViewChild et ElementRef
pour pouvoir manipuler ce bloc #map plus tard

import { Component, ViewChild, ElementRef } from '@angular/core';
declare var google;
export class HomePage {
@ViewChild('map') mapElement: ElementRef;
map: any;
90
.scroll-content {
height: 100%
}
#carte {
width: 100%;
height: 100%;
}
Le CSS permettra de
s'assurer du bon
affichage de la carte

Génération de la map
• Il nous reste encore à aﬃcher la map. On le fait à la
suite de la géolocalisation

ionViewDidLoad(){
…
let mapOptions = {
center: new google.maps.LatLng(this.latitude,this.longitude),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(
this.mapElement.nativeElement, mapOptions);
}
91
Coordonnées
précédemment obtenues
par le plugin de
géolocalisation
Pointage vers
l'emplacement #map de la
vue

Développement web mobile avec IONIC 2

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Développement web mobile avec IONIC 2

Similaire à Développement web mobile avec IONIC 2 (20)

Plus de Jean David Olekhnovitch

Plus de Jean David Olekhnovitch (12)

Développement web mobile avec IONIC 2