Tutoriel pour apprendre à créer votre application mobile avec Ionic 3

Image non disponible

Vous maîtrisez les technos du Web et souhaitez développer une application mobile ? Ne cherchez plus ! Ionic est fait pour vous.

Ionic est un Framework permettant la création d'applications multiplateforme rapidement et facilement en utilisant des technologies web (JavaScript, HTML, CSS). Il s'appuie sur Angular pour la partie web et sur Cordova pour la partie native.

Dans ce tutoriel, nous allons apprendre les bases de l'utilisation d'Ionic. Nous allons créer une application « en partant de zéro » qui nous permettra de faire un tour des fonctionnalités de ce Framework. Vous trouverez sur Github tout le code présenté dans ce tutoriel.

2 commentaires Donner une note à l'article (5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Installation et mise en route du projet

I-A. Prérequis

  • Notions en TypeScript/JavaScript
  • Notions d'Angular (v2+)
  • Notions sur npm, installé avec Node.js

I-A-1. Installation

Tout d'abord, il nous faut installer Ionic avec Cordova, et ce en utilisant npm => npm install -g cordova ionic

I-A-2. Création du projet

Ionic nous met à disposition une CLI (Commande Line Interface) pour, entre autres, la création d'un projet à partir d'un template contenant toutes les dépendances nécessaires pour démarrer => ionic start ionic3-movie-app sidemenu

Cette commande permet de créer le projet “ionic3-movie-app” en se basant sur le template sidemenu.

Image non disponible

Pour lancer l'application, il suffit de se mettre dans le dossier et de lancer la commande ionic serve. Chrome DevTools fournit un outil nous permettant de simuler la taille des écrans sur mobile, ce qui est bien pratique pour tester notre application :

Image non disponible

Il est aussi possible de déployer l'application sur un mobile / émulateur Android, mais pour cela il faut installer le SDK et configurer le chemin. La démarche étant assez fastidieuse et dépassant le cadre de ce tutoriel, vous trouverez toutes les informations nécessaires ici.

Une fois le SDK installé et votre téléphone branché en USB, voici les démarches à suivre pour lancer l'application sur ce dernier :

  • Ajouter Android comme plateforme : ionic cordova platform add android
  • Lancer le build : ionic cordova build android
  • Lancer l'application : ionic cordova run android (la fonction débogage doit être activée)

Vous pouvez aussi créer des appareils virtuels grâce à l'AVD Manager et émuler l'application avec la commande ionic cordova emulate android.

Au moment où j'écris ces lignes, un nouvel outil est sorti, Ionic DevApp, qui permet de lancer et de déboguer l'application sans avoir à installer des SDK complémentaires.

Pour ce tutoriel, un navigateur sera amplement suffisant.

II. Anatomie d'un projet Ionic

Ionic se base sur les components, ce qui veut dire que chaque page est vue comme un composant individuel avec son propre habillage et comportement. Cela facilite la maintenabilité du projet vu que tout le code se trouve au niveau du composant.

Voici la structure de notre projet :

Image non disponible

II-A. /

À la racine de notre projet, nous avons des fichiers de configuration dont les plus importants sont :

  • config.xml : utilisé par Cordova ; contient la configuration essentielle au build de l'application pour les plateformes iOS et Android.
  • package.json : il s'agit du fichier de config de npm, contenant des informations sur le projet (nom, version, auteur, licence…) et ses dépendances en termes de packages npm.

II-A-1. src/

Le code du projet vit ici. C'est ici que nous allons créer des pages et des services. Ce dossier contient plusieurs sous-dossiers :

  • src/app : contient le composant racine (root component), point d'entrée de notre application où l'on définit notre root page (page de démarrage), déclare nos modules, etc.
  • src/assets: contient tous les ressources statiques, que ce soient des images ou des données en JSON.
  • src/pages : contient toutes les pages de l'application. Ionic CLI génèrera automatiquement les pages dans ce dossier
  • src/provider : contient les services (appelés ici provider). Ionic CLI générera automatiquement les providers dans ce dossier.
  • src/theme : contient les variables SCSS pour les couleurs de l'application, etc.

II-A-2. www/

C'est le dossier web qui contient le code compilé de notre application.

II-A-3. resources/

Contient les ressources pour les plateformes Android et iOS, notamment les images utilisées pour le splash screen et les icônes.

Maintenant que tout est installé et que la structure de projet d'Ionic n'a plus aucun secret pour nous, nous pouvons commencer à créer nos premières pages.

III. Création des pages

Notre application contiendra notre home page qui affichera nos films favoris, une page pour afficher la liste des films et une autre page pour le détail du film (image, description, note, trailer…). On peut choisir nos films préférés à partir de la liste et stocker le tout dans une base de données locale. On aura le résultat final suivant :

Image non disponible

Ionic CLI nous permet de générer nos pages avec la commande ionic g page page-name.

Si vous avez déjà utilisé Angular CLI, vous remarquerez que la commande est assez similaire. Pour plus d'informations sur les possibilités de génération de fichiers, je vous invite à lire la doc d'Ionic CLI.
Nous allons donc générer nos fichiers pour chaque page :

ionic g page my-movies
ionic g page movie-list
ionic g page movie-detail

Pour chaque page, nous aurons quatre fichiers : le template (.html), la feuille de style (.scss), le module (module.ts), et la page (.ts). Après cela il faut déclarer les modules dans le tableau des imports de app.module.ts

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
@NgModule({
  declarations: [MyApp],
  imports: [BrowserModule, IonicModule.forRoot(MyApp),  MyMoviesPageModule, MovieListPageModule, MovieDetailPageModule],
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})

Maintenant que nous avons créé nos pages, il faut leur mettre du contenu et naviguer vers ces pages. Mais avant cela il faut que je vous parle du système de navigation d'Ionic.

IV. Navigation Stack

IV-A. Principe

Pour naviguer entre les vues dans Angular 4, on utilise un système de routage. Dans Ionic, on utilise plutôt une pile de navigation (navigation stack), ce qui implique de mettre des vues dans la pile (push) et de les enlever (pop) comme décrit sur le schéma suivant :

Image non disponible

C'est toujours la page se trouvant en haut de la pile qui sera active :

Image non disponible

Ici on est sur la root page et l'on souhaite naviguer vers la Page 1 : on la push dans la stack et vu qu'elle se trouve maintenant en haut de la pile, elle sera donc affichée pour l'utilisateur. Si l'on souhaite revenir en arrière, on pop la page de la stack et c'est la root page qui sera affichée.

Les vues sont créées lorsqu'elles sont ajoutées à la stack de navigation. Par défaut, tant qu'elles y sont, elles sont mises en cache et laissées dans le DOM. Elles seront détruites dès qu'elles sont supprimées de la stack.

IV-B. En pratique

La navigation se fait avec le NavController dont les trois méthodes principales sont :

  • push() : permet d'insérer la vue dans la stack. Si la page contient un ion-navbar, un bouton “Retour” sera automatiquement ajouté. On peut aussi passer des paramètres qui seront récupérés grâce au module NavParams.
  • pop() : permet de supprimer la vue de la stack et de naviguer vers la vue précédente.
  • popToRoot() : permet de supprimer toutes les vues de la stack et de naviguer vers la root page.

Il est souvent nécessaire d'exécuter des tâches au chargement de la page (rafraîchissement du contenu, etc.) ou lorsque l'on quitte la page active (désabonnement aux observables, stockage de données, etc.). C'est là qu'entrent en jeu les lifecycle events.

V. Lifecycle events

Les lifecycle events, comme leur nom l'indique, sont des événements nous informant de l'état d'une page Ionic durant tout son cycle de vie, de sa création à sa destruction. Certains ne sont lancés qu'une seule fois tandis que d'autres sont lancés à chaque fois que la page concernée est active.

Image non disponible
  • ionViewDidLoad : se lance pour signaler que toutes les variables et dépendances sont prêtes à l'emploi, ce qui implique aussi que la page a été ajoutée en mémoire et qu'elle sera en cache. Cet événement n'est lancé qu'une seule fois. C'est ici que l'on met le code d'initialisation et de configuration de la page.
  • ionViewWillEnter : même si la page est complètement chargée, ce n'est pas encore la page active et elle n'est pas encore visible pour l'utilisateur, et Ionic exécute encore des tâches en background. Néanmoins, on peut manipuler les éléments de la page avant qu'elle ne soit affichée. À utiliser pour les actions que l'on souhaite réaliser à chaque fois que l'on affiche la page (mise à jour d'une table…).
  • ionViewDidEnter : cette fonction nous signale que tout s'est bien passé et que notre vue a été correctement affichée. Mais à quoi sert-elle et quand l'utiliser ? Eh bien, c'est l'endroit où l'on déclenche une fonctionnalité de l'application que nous souhaitons montrer à l'utilisateur à l'affichage de la page (animations, changelog de l'appli….).
  • ionViewWillLeave : se lance lorsque l'on est sur le point de quitter la page. Elle est toujours considérée comme étant la page active, mais elle est sur le point d'être supprimée.
  • ionViewDidLeave : cet événement nous signale que la page n'est plus la page active. La fonction se lance après le ionViewDidEnter() de la page suivante. Mais que faire de cette fonction ? C'est un très bon endroit pour sauvegarder des données ou pour lancer des opérations en arrière-plan qui n'ont pas besoin que la vue soit visible.
  • ionViewWillUnload : c'est la dernière fonction à se lancer dans le cycle de vie d'une page. Elle ne se lance qu'une seule fois, et seulement quand on navigue en arrière. Par exemple si l'on navigue de la Page 1 à la Page 2, l'événement ne se lancera pas pour la Page 1, car elle est dans le cache (souvenez-vous de la stack de navigation) ; par contre si l'on fait un retour en arrière de la Page 2 vers la Page 1, cet événement se lancera pour la Page 2, car cette page n'est plus en mémoire ; elle sera donc déchargée (unloaded).

Pour plus d'informations, je vous conseille de lire la doc sur le NavController à la rubrique “Lifecycle events”.

Appliquons ensemble les concepts que nous venons d'apprendre à notre projet.

VI. Application V1.0

VI-A. Création de la root page

Première chose à faire : déclarer notre root page (page de démarrage) dans app.component.ts. Dans notre cas, il s'agit de MyMoviesPage :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
import { MyMoviesPage } from "../pages/my-movies/my-movies";
import { Component, ViewChild } from "@angular/core";
import { Nav, Platform } from "ionic-angular";
import { StatusBar } from "@ionic-native/status-bar";
import { SplashScreen } from "@ionic-native/splash-screen";
 
@Component({
  templateUrl: "app.html"
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
 
        rootPage  = MyMoviesPage;
}

Ensuite, mettons du contenu dans my-movies.html :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
<ion-header>
  <ion-navbar color="primary">
    <button menuToggle ion-button icon-only>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Movie App</ion-title>
  </ion-navbar>
 
  <ion-toolbar color="secondary">
    <ion-title>My favorite movies</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <ion-card>
    <ion-card-content>
      <p>You haven't selected any movie</p>
      <p>Please select one by using the button below</p>
      <button ion-button icon-left full (click)="findMovie()">
        <ion-icon name="search"></ion-icon>
        On going movies
      </button>
    </ion-card-content>
  </ion-card>
</ion-content>

J'ai espacé le code HTML pour bien voir les différentes parties de la page :

  • Header contient un ion-navbar qui est notre barre de navigation avec un hamburger button pour afficher le menu latéral. Il a comme titre le nom (très original) de notre application “Movie App”, mais vu que notre home page contiendra nos films favoris, j'ai donc ajouté, en dessous, un ion-toolbar avec le nom de la page dessus. Vous avez sûrement remarqué les attributs color avec les valeurs “primary” et “secondary” ; ces valeurs sont configurables dans theme/variables.scss.
  • Content est notre body : c'est ici que nous mettrons notre contenu. J'ai choisi d'utiliser ion-card mais vous pouvez utiliser ce que vous souhaitez. Le bouton contient une icône avec du texte, et j'utilise de l'event binding pour faire appel à ma fonction.

Pour plus d'informations sur les composants Ionic, je vous invite à lire la doc qui est assez bien faite et possède pas mal d'exemples.

VI-B. Navigation dans l'application

Voici à quoi ressemblera la stack de navigation de l'application :

Image non disponible

MyMoviesPage sera la page de démarrage. De là on peut soit accéder au détail d'un film favori en naviguant vers MovieDetailPage, soit afficher la liste des films dans MovieListPage et ensuite voir le détail d'un film.

Nous allons développer, un à un, les cas de navigation.

VI-B-1. MyMoviesPage → MovieListPage

Dans notre template, lors du clic sur le bouton, nous faisons appel à la méthode findMovie(). Implémentons cette méthode dans MyMoviesPage :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
export class MyMoviesPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {}
 
  ionViewDidLoad() {
    console.log("ionViewDidLoad MyMoviesPage");
  }
 
  findMovie() {
    this.navCtrl.push(MovieListPage);
  }
}

Avec le NavController on push MovieListPage en haut de la pile. On est donc redirigé vers cette page, et un bouton de retour y est automatiquement ajouté :

Image non disponible

Maintenant, il nous faut ajouter du contenu dans la page Movie List :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<ion-header>
  <ion-navbar color="primary">
       <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Movie List</ion-title>
  </ion-navbar>
</ion-header>
 
 
<ion-content padding>
  <ion-grid *ngIf="movies">
    <ion-row>
      <ion-col col-4 *ngFor="let movie of movies">
        <img [src]="movie.poster_path" (click)="goToDetail(movie)" />
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Créons la variable movies dans movie-liste.ts et mettons-y des valeurs en les copiant depuis le fichier movies.json.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
import { Component } from "@angular/core";
import { IonicPage, NavController, NavParams } from "ionic-angular";
 
@IonicPage()
@Component({
  selector: "page-movie-list",
  templateUrl: "movie-list.html"
})
export class MovieListPage {
  movies: IMovie[] = [
    {
      vote_count: 666,
      id: 19404,
      video: false,
      vote_average: 9.1,
      title: "Dilwale Dulhania Le Jayenge",
      popularity: 50.154262,
      poster_path:
        "https://image.tmdb.org/t/p/w185/2gvbZMtV1Zsl7FedJa5ysbpBx2G.jpg",
      original_language: "hi",
      original_title: "Dilwale Dulhania Le Jayenge",
      genre_ids: [35, 18, 10749],
      backdrop_path: "/nl79FQ8xWZkhL3rDr1v2RFFR6J0.jpg",
      adult: false,
      overview:
        "Chaudhry Baldev Singh est un père de famille installé à Londres. Un jour, il reçoit une lettre d'Inde : son meilleur ami lui écrit, lui rappelant la promesse qu'il avait faite deux décennies auparavant de marier leurs enfants. Chaudhry décide alors de tenir sa promesse, mais donne toutefois un mois libre à sa fille  avant qu'elle ne s'en aille en Inde se marier...",
      release_date: "1995-10-20"
    },
    {
      vote_count: 8482,
      id: 278,
      video: false,
      vote_average: 8.5,
      title: "Les Évadés",
      popularity: 76.107673,
      poster_path:
        "https://image.tmdb.org/t/p/w185/5cIUvCJQ2aNPXRCmXiOIuJJxIki.jpg",
      original_language: "en",
      original_title: "The Shawshank Redemption",
      genre_ids: [18, 80],
      backdrop_path: "/xBKGJQsAIeweesB79KC89FpBrVr.jpg",
      adult: false,
      overview:
        "En 1947, Andy Dufresne, un jeune banquier, est condamné à la prison à vie pour le meurtre de sa femme et de son amant. Ayant beau clamer son innocence, il est emprisonné à Shawshank, le pénitencier le plus sévère de l'Etat du Maine. Il y fait la rencontre de Red, un Noir désabusé, détenu depuis vingt ans. Commence alors une grande histoire d'amitié entre les deux hommes...",
      release_date: "1994-09-23"
    },
    {
      vote_count: 1099,
      id: 372058,
      video: false,
      vote_average: 8.5,
      title: "Your Name",
      popularity: 57.569033,
      poster_path:
        "https://image.tmdb.org/t/p/w185/xq1Ugd62d23K2knRUx6xxuALTZB.jpg",
      original_language: "ja",
      original_title: "君の名は。",
      genre_ids: [10749, 16, 18],
      backdrop_path: "/7OMAfDJikBxItZBIug0NJig5DHD.jpg",
      adult: false,
      overview:
        "Mitsuha est une lycéenne, la fille du maire d'une petite ville nichée entre les montagnes. Vivant avec sa petite sœur et sa grand-mère, c'est une demoiselle franche qui n'hésite pas à dire qu'elle n'a pas envie de participer aux rituels shinto, ou d'aider son père dans ses campagnes électorales. En fait, elle rêve de pouvoir quitter cette ville  elle s'ennuie, pour partir tenter sa chance à la capitale...",
      release_date: "2016-08-26"
    }
  ];
 
  constructor(public navCtrl: NavController, public navParams: NavParams) {}
 
  ionViewDidLoad() {
    console.log("ionViewDidLoad MovieListPage");
  }
 
  goToDetail(movie: IMovie) {
  }
}

Personnellement, j'aime bien typer mes variables. Du coup, j'ai créé une interface IMovie en me basant sur la réponse JSON, en utilisant l'outil en ligne json2ts qui simplifie la tâche.

Et voilà :

Image non disponible

Vous avez dû remarquer la fonction goToDetail(movie: IMovie) (je sais que je ne peux rien vous cacher ^^). Nous allons donc l'implémenter et voir comment récupérer des données de la stack de navigation.

VI-B-2. MovieListPage → MovieDetail

Nous pouvons passer des paramètres supplémentaires au NavController en plus de ceux de la page. Dans notre cas, nous allons lui passer notre objet movie :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
export class MovieListPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) { }
 
  goToDetail(movie: IMovie) {
    this.navCtrl.push(MovieDetailPage, movie);
  }
}

Mettons un peu de HTML dans movie-detail.html :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<ion-header>
  <ion-navbar color="primary">
    <ion-title *ngIf="movie">{{movie.title}}</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content>
   <ion-card *ngIf="movie">
    <img [src]="movie.poster_path" />
    <ion-card-header>
      <h2>Synopsis
        <ion-badge color="primary">{{movie.vote_average}}</ion-badge>
      </h2>
    </ion-card-header>
    <ion-card-content>{{movie.overview}}</ion-card-content>
  </ion-card>
</ion-content>

Pour afficher l'objet dans MovieDetailPage, il nous faudra le récupérer grâce à NavParam. On définit la valeur de la variable movie lors du lifecycle event ionViewDidLoad :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
export class MovieDetailPage {
  movie: IMovie;
 
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams
  ) {}
 
  ionViewDidLoad() {
    this.movie = this.navParams.data;
  }
}

Et voilà la première version de l'application, avec une navigation du début à la fin :

Image non disponible

Dans MovieListPage, nous avons directement initialisé notre liste en utilisant des valeurs fixes, mais ce n'est pas la meilleure chose à faire. On serait plutôt tenté de faire des appels à une WebAPI en utilisant le HttpClient d'Angular. Afin de respecter le SRPSingle Responsibility Principle, nous allons déporter ces appels dans une autre classe et créer ce qu'Ionic appelle un provider, à rapprocher d'un service dans Angular.

VI-C. Création de notre premier provider

Ionic CLI nous permet de générer des providers assez simplement grâce à la commande ionic g provider movie-api. Cela génère le fichier src/app/providers/movie-api/movie-api.ts et met à jour AppModule en déclarant MovieApiProvider dans le tableau des providers, le mettant à disposition de tous les composants de ce module. Pour plus de détails sur les services/providers et sur l'utilisation du HttpClient, vous trouverez tout ce qu'il faut dans cet article. Je vous conseille de suivre pas à pas la déclaration du module http. Je passe directement à l'implémentation du provider :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Platform } from "ionic-angular";
import { Observable } from "rxjs/Rx";
import { IMovie } from "../../interface/IMovie";
 
@Injectable()
export class MovieApiProvider {
  private baseUrl: string = "../../assets/api/movies.json";
 
  movies: IMovie[];
 
    constructor(
    private readonly http: HttpClient,
    private readonly platform: Platform
  ) {
    console.log("Hello MovieApiProvider Provider");
  }
 
  getMovies(): Observable {
    return this.http.get(`${this.baseUrl}`);
  }
}

Ici, nous récupérons les données à partir d'un JSON, mais vous pouvez bien évidemment faire des appels REST.

Si vous testez l'application sur Android, vous aurez une erreur 404, car l'emplacement de movies.json ne sera pas le même. Pour remédier à cela, il faudra modifier le constructeur comme ceci :
 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
constructor(
  private readonly http: HttpClient,
  private readonly platform: Platform
) {
  console.log("Hello MovieApiProvider Provider");
  if (this.platform.is("cordova") && this.platform.is("android")) {
    this.baseUrl = "/android_asset/www/assets/api/movies.json";
  }
}

Une fois la méthode getMovies() créée, nous allons l'appeler dans MovieListPage et supprimer l'initialisation de notre variable movies :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
export class MovieListPage {
  movies  = new Array<Movie>();
 
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private movieApiProvider: MovieApiProvider
  ) {}
 
  ionViewDidLoad() {
    this.movieApiProvider.getMovies().subscribe(data =>{
      this.movies = data;
    })
  }
 
  goToDetail(movie: IMovie) {
    this.navCtrl.push(MovieDetailPage, movie);
  }
}

Nous avons bien évidemment utilisé le lifecycle event ionViewDidLoad pour initialiser notre variable movies à la création de la page. Vous devriez maintenant avoir une liste de films bien plus fournie que précédemment.

VI-D. Gestion des favoris

Le but est de choisir des films favoris à partir de la page de détail, et de les afficher sur la page de démarrage. Commençons par modifier movie-detail.html afin d'y afficher un bouton de favoris, que nous allons mettre sur la navbar à droite :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<ion-header>
  <ion-navbar color="primary">
    <ion-title *ngIf="movie">{{movie.title}}</ion-title>
    <ion-buttons end>
      <button ion-button incon-only style="font-size: 1.7em" (click)=toggleFavorite()>
        <ion-icon [name]="isFavorite ? 'star':'star-outline'"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
 
<-- suite de la page -->

Implémentons maintenant la méthode toggleFavorite() :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
export class MovieDetailPage {
  movie: IMovie;
  isFavorite: boolean = false;
 
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams
  ) {}
 
  ionViewDidLoad() {
    this.movie = this.navParams.data;
  }
 
  toggleFavorite() {
    if (this.isFavorite) {
      this.isFavorite = false;
      // TODO persist data
    } else {
      this.isFavorite = true;
      // TODO persist data
    }
  }
}

C'est une fonction qui permet d'inverser le booléen. Maintenant, le but est de stocker le choix de l'utilisateur. Pour cela nous allons utiliser Ionic Storage.

VII. Ionic storage

Le storage est un moyen facile de stocker des paires clé / valeur et des objets JSON. Storage utilise une variété de moteurs de stockage sous-jacents, en choisissant le meilleur disponible en fonction de la plateforme.

Lorsqu'il est exécuté dans un contexte d'application native, Storage priorise l'utilisation de SQLite si (et seulement si) le plugin est présent dans l'application, car il s'agit d'une base de données stable et qui ne sera pas vidée en cas d'espace disque insuffisant sur le device.

Lorsqu'il s'exécute sur le Web ou sous la forme d'une application Web progressive, Storage tente d'utiliser IndexedDB, WebSQL et localstorage, dans cet ordre.

VII-A. Installation

Pour cela, nous allons nous baser sur la doc. Nous allons installer le plugin SQLite :
ionic cordova plugin add cordova-sqlite-storage

Ensuite nous allons ajouter IonicStorageModule.forRoot() à la liste d'imports de app.module.ts :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
@NgModule({
  declarations: [MyApp],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    MyMoviesPageModule,
    MovieListPageModule,
    MovieDetailPageModule,
    HttpClientModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    MovieApiProvider
  ]
})
export class AppModule {}

Maintenant que l'installation est finie, nous allons créer un provider pour y centraliser toutes les opérations de CRUD.

VII-B. Provider pour les opérations de CRUD

Sur le même principe que pour movie-api.ts, nous allons créer un provider favorite-movie.ts où l'on écrira toute la logique liée au stockage des films :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
import { Injectable } from "@angular/core";
import { Storage } from "@ionic/storage";
import { IMovie } from "../../interface/IMovie";
 
const MOVIE_KEY = "movie_";
 
@Injectable()
export class FavoriteMovieProvider {
  constructor(private storage: Storage) {
    console.log("Hello UserPreferencesProvider Provider");
  }
 
  addFavoriteMovie(movie: IMovie) {
    this.storage.set(this.getMovieKey(movie), JSON.stringify(movie));
  }
 
  removeFavoriteMovie(movie: IMovie) {
    this.storage.remove(this.getMovieKey(movie));
  }
 
  isFavortieMovie(movie: IMovie) {
    return this.storage.get(this.getMovieKey(movie));
  }
 
  toogleFavoriteMovie(movie: IMovie) {
    this.isFavortieMovie(movie).then(
      isFavorite =>
        isFavorite
          ? this.removeFavoriteMovie(movie)
          : this.addFavoriteMovie(movie)
    );
  }
 
  getMovieKey(movie: IMovie) {
    return MOVIE_KEY + movie.id.toString();
  }
 
  getFavoriteMovies(): Promise<IMovie[]> {
    return new Promise(resolve => {
      let results: IMovie[] = [];
      this.storage
        .keys()
        .then(keys =>
          keys
            .filter(key => key.includes(MOVIE_KEY))
            .forEach(key =>
              this.storage.get(key).then(data => results.push(JSON.parse(data)))
            )
        );
      return resolve(results);
    });
  }
}

Tout d'abord, nous injectons dans notre constructeur le Storage qui nous permettra de stocker, récupérer et supprimer des données. Pour plus d'informations sur les méthodes et l'utilisation de Storage, je vous conseille de lire la doc qui est assez détaillée.

Maintenant que notre provider est prêt à gérer des données, utilisons-le.

VII-C. Application

Remettons-nous sur movie-detail.ts et améliorons ensemble la méthode toggleFavorite() en lui ajoutant la persistance des données. Il nous faut bien évidemment lui injecter FavoriteMovieProvider :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
export class MovieDetailPage {
  movie: IMovie;
  favorite: boolean = false;
 
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private favoriteMovieProvider: FavoriteMovieProvider
  ) {}
 
  ionViewDidLoad() {
    this.movie = this.navParams.data;
    this.favoriteMovieProvider
      .isFavoriteMovie(this.movie.id)
      .then(value => (this.favorite = value));
  }
 
  toggleFavorite(): void {
    this.isFavorite = !this.isFavorite;
    this.favoriteMovieProvider.toogleFavoriteMovie(this.movie);
  }
}

La première chose que l'on fait lors du chargement de la page est d'appeler this.favoriteMovieProvider.isFavoriteMovie(movie). Cette méthode vérifie si l'élément se trouve en base ou pas. Si c'est le cas, cela veut dire que c'est un film de la liste des favoris de l'utilisateur et donc on fixe la valeur de this.favorite à true. Pour ce qui est de la persistance des données, on fait simplement appel à this.favoriteMovieProvider.toogleFavoriteMovie(this.movie), qui va gérer cela.

Maintenant que les données sont stockées, il faut les afficher sur la page de démarrage.

La question à se poser est : “Quel lifecycle event vais-je utiliser ?”
Eh non, ce n'est pas ionViewDidLoad(), car la page de démarrage n'est chargée (loaded) qu'une seule fois (sauf si l'on tue l'application) et elle sera toujours en bas de la pile (stack). Dans notre cas, on souhaite mettre à jour la liste des films favoris à chaque fois que l'on entre dans la page, on utilisera alors ionViewWillEnter().

Alimentons notre liste dans my-movies.ts

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
export class MyMoviesPage {
  favoriteMovies: IMovie[] = [];
 
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private favoriteMovieProvider: FavoriteMovieProvider
  ) {}
 
  ionViewDidLoad() {
    console.log("ionViewDidLoad MyMoviesPage");
  }
 
  ionViewWillEnter() {
    this.initFavoriteMovies();
  }
 
  private initFavoriteMovies() {
    this.favoriteMovieProvider
      .getFavoriteMovies()
      .then(favs => (this.favoriteMovies = favs));
  }
 
  findMovie() {
    this.navCtrl.push(MovieListPage);
  }
 
  goToDetail(movie: IMovie) {
    this.navCtrl.push(MovieDetailPage, movie);
  }
}

Il ne reste plus qu'à mettre à jour le template my-movies.html :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
<br /><!-- Header ne change pas -->
 
<ion-content>
 
    <ion-card *ngIf="favoriteMovies && favoriteMovies.length; else noFavorite">
      <ion-list>
        <ion-list-header class="my-movies-header">Favorite Movies</ion-list-header>
        <ion-item *ngFor="let movie of favoriteMovies" (click)="goToDetail(movie)">
          <ion-row>
            <ion-col col-1>
              <ion-icon name="star"></ion-icon>
            </ion-col>
            <ion-col col-6 text-wrap>
              <h4>{{movie.title}}</h4>
            </ion-col>
            <ion-col col-3>
              <h4>{{movie.release_date}}</h4>
            </ion-col>
            <ion-col col-2>
              <ion-badge color="primary">{{movie.vote_average}}</ion-badge>
            </ion-col>
          </ion-row>
        </ion-item>
      </ion-list>
      <ion-card-content>
        <p>To choose more movies, click on this button.</p>
        <button icon-left ion-button full (click)="findMovie()">
          <ion-icon name="search"></ion-icon>
          Find a movie
        </button>
      </ion-card-content>
    </ion-card>
 
    <ng-template #noFavorite>
      <ion-card>
        <ion-card-content>
          <p>You haven't selected any movie</p>
          <p>Please select one by using the button below</p>
          <button ion-button icon-left full (click)="findMovie()">
            <ion-icon name="search"></ion-icon>
            Find a movie
          </button>
        </ion-card-content>
      </ion-card>
    </ng-template>
 
  </ion-content>

J'ai utilisé ion-list pour afficher la liste des films, et voilà :

Image non disponible

VIII. Conclusion

Dans ce tutoriel, nous avons développé une application Ionic de bout en bout. Nous avons appris à utiliser Ionic CLI pour la création de pages, la création de providers, le build, le lancement de l'appli… Nous avons passé en revue le principe de navigation utilisé dans Ionic, l'utilité des lifecycle events, et pour finir nous avons appris à utiliser les fonctionnalités de stockage d'Ionic.

Nous n'avons vu qu'une petite partie des possibilités de ce Framework. Je vous laisse aller plus loin, notamment en ajoutant une SearchBar, des Alerts, des Toasts et bien plus encore.

Pour rappel, le code lié à ce tutoriel est disponible dans son intégralité sur Github.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2018 Soat. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.