IONIC FIRESTORE: Comment gérer les bases de données Firestore avec Ionic ?

Bonjour à tous! Dans ce tutoriel Ionic Firestore nous allons comment gérer nos bases de données Firebase dans Ionic.

Les bases de données Firestore sont la génération la plus récente de Firebase, elles fonctionnent en temps réel et sont parfaitement adaptées aux applications mobiles.

Nous allons voir dans ce tutoriel Ionic Firestore comment les manipuler depuis notre application.

Voilà les étapes à suivre dans ce tuto:

1. Installer et configurer AngularFire
2. Créer une Collection Firestore
3. Récupérer les données d’une Collection
4. Ajouter des données à une Collection
5. Manipuler les données de Firestore

Installer et configurer AngularFire

Pour suivre ce tutoriel vous aurez besoin du package AngularFire: https://github.com/angular/angularfire

Vous pouvez l’installer en entrant la commande suivante dans le terminal à l’adresse de votre application:

npm i @angular/fire

Rendez-vous ensuite dans le fichier de module racine de votre application Ionic:

src/app/app.module.ts

Puis importez les deux modules nécessaires à notre tutoriels aujourd’hui:

• AngularFireModule: pour configurer Firebase
• AngularFirestoreModule: pour accéder à Firestore

Importez donc ces deux modules et déclarez également vos codes de configuration Firebase:

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore/';

export const firebaseConfig = {
  apiKey: "*******************************************",
  authDomain: "**********-**********.firebaseapp.com",
  databaseURL: "https://**********-**********.firebaseio.com",
  projectId: "**********-**********",
  storageBucket: "**********-**********.appspot.com",
  messagingSenderId: "**********",
  appId: "1:**********:web:********************"
};

Déclarez ensuite ces deux modules dans le dossier imports en appliquant la fonction initializeApp() pour associer Ionic & Firebase:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule

Voilà pour l’installation et la configuration du package AngularFire dans notre application Ionic.

Passons maintenant à la création de notre première collection Firestore.

Créer une Collection Firestore avec des Documents

SI vous n’avez pas encore créé de projet Firebase, je vous invite à le faire en vous rendant sur le site de Firebase: https://firebase.google.com/

Dans l’onglet Database de votre menu latéral, choisissez ensuite « Cloud Firestore » qui est le système de base de données que nous allons étudier aujourd’hui.

Voilà l’exemple d’une base Firestore très classique dans laquelle on retrouve plusieurs Collections.

Une Collection est l’équivalent d’une table dans les Realtime Database, et elle contient des Documents c’est-à-dire des sous-objets avec différents champs.

Pour créer une nouvelle Collection, cliquez sur le bouton « + Commencer une collection » pour ouvrir le panneau suivant:

Entrez alors le nom de votre collection, ici « Items » pour ajouter un premier document.

Cliquez sur « Générez automatiquement un ID » pour donner une clé unique à votre document puis créer un premier champ texte.

Voilà le rendu de votre collection « Items » avec son premier document:

Vous pouvez ajouter un deuxième document en cliquant sur « +Ajouter un document » et ouvrir le panneau suivant:

Récupérer les données d’une collection Firestore dans Ionic

Voyons maintenant comment récupérer en premier lieu les données de notre base Firestore.

On commence par se rendre dans le fichier TypeScript de notre page:

src/app/home/home.page.ts

Nous aurons besoin d’importer en premier lieu le module AngularFireStore pour accéder aux fonctions de manipulations des données.

On importera aussi le type d’objet Observable pour pouvoir accéder dynamiquement aux données de Firestore:

import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

On déclare ensuite le module firestore dans notre constructor() pour pouvoir l’utiliser dans notre page:

  constructor(public firestore: AngularFirestore) {}

Et enfin on déclare notre variables items, de type Observable pour venir récupérer par la suite le contenu de notre de manière asynchrone:

items: Observable<any[]>;

Une fois nos modules importés et variables déclarées, il ne nous reste plus qu’à utiliser AngularFireStore pour accéder aux données de notre collection.

On utiliser alors la sous fonction collection() pour lui indiquer en paramètre le nom de notre collection, puis la fonction valueChanges() pour littéralement récupérer tout son contenu:

this.items = this.firestore.collection('Items').valueChanges();

Vous pouvez exécuter par exemple cette ligne dans votre constructor() ou dans la fonction ngOnInit():

constructor(public firestore: AngularFirestore) {
  this.items = firestore.collection('items').valueChanges();
}

Nous récupérons maintenant les données de notre collection « Items » en une seule ligne de code.

Les données Firestore sont stockées en tant que tableau d’objet, que nous pouvons parcourir dans le HTML avec la directive *ngFor:

<ion-item *ngFor="let item of items | async">
      <ion-label>{{ item.name }}</ion-label>
</ion-item>

N’oubliez pas d’ajouter le paramètre async à votre requête pour indiquer que celle-ci se fait de manière asynchrone (ici items est un Observable).

Ajouter des données depuis Ionic à une Collection Firestore

On continue avec une deuxième manipulations très courantes qui consiste à ajouter du contenu depuis Ionic.

On créé ainsi rapidement un champ de type texte avec Ionic:

<ion-item>
  <ion-label>Text:</ion-label>
  <ion-input [(ngModel)]="firebaseText" type="text" placeholder="Entrez du texte"></ion-input>
</ion-item>

Ce champ étant associé à la variable firebaseText (de type chaîne de caractère) avec la directive [(ngModel)]:

firebaseText: string;

On créé ensuite un bouton « Ajouter » pour exécuter notre fonction addFirestore():

<ion-button (click)="addFirestore()" expand="block">Ajouter</ion-button>

Cette fonction est ensuite très simple à rédiger, on reprend le module AngularFirestore et sa sous-fonction collection().

On utilise alors la fonction add() qui permet d’ajouter un document à notre collection:

addFirestore() {
	this.firestore.collection('Items').add({
    	text: this.firebaseText
    });
}	

Ici, un identifiant unique pour notre document sera créé à chaque foi que nous exécuterons cette fonction add().

Manipuler depuis Ionic les données de Firestore

On finit ce tutoriel Ionic Firestore avec la possibilité de manipuler les données.

Jusqu’à présent nous nous sommes contentés de récupérer toutes les données de notre collection et de les afficher dans notre HTML.

Pour cela nous utilisions la fonction valueChanges() pour stocker toutes les informations dans une variables Observables.

Cette fois-ci nous allons utiliser la fonction snapshotChanges() pour parcourir les données dans notre TypeScript et lire les données de chaque document.

this.firestore.collection('Items').snapshotChanges(['added'])
  .subscribe(actions => {

});

Ici on renvoie le tableau actions qui contient toutes les données de notre collection Firestore.

On peut alors parcourir ce tableau avec la fonction JavaScript ForEach() et renvoyer indépendamment un objet action.

actions.forEach(action => {
	console.log('Item: ' + action.payload.doc.data()['text']);  
});

Chaque objet action renvoyé correspond à un document de notre collection Firestore.

On peut alors accéder à un champ particulier de notre document en utilisant la syntaxe suivante:

action.payload.doc.data()['text']

Ici le terme entre crochets et le nom de notre champ, par exemple ‘text‘ ou ‘image‘.

Voilà le code final pour par exemple afficher dans la console tous les champs textes de notre collection.

this.firestore.collection('Items').snapshotChanges(['added'])
  .subscribe(actions => {
    actions.forEach(action => {
      console.log('Item: ' + action.payload.doc.data()['text']);  
    });
});

Cette technique peut vous être utile lorsque vous manipuler les données de votre base de données.

Comme dans l’application AirbnMap de Ionic Facile, où nous créons des marqueurs personnalisés à partir de données Firestore.