Introduction
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:
- Installer et configurer AngularFire
- Créer une Collection Firestore
- Ajouter des données à une Collection
- Récupérer les données d’une Collection
- Manipuler les données de Firestore
Installation et configuration de angularfire
Pour la première étape, je vous invite à regarder le tutoriel suivant lien pour comprendre comment intégrer firebase et donc firestore à votre application. Juste à titre de rappel , il faut installer firebase et angular firestore. c'est possible en tapant la commande suivant dans votre projet sur le terminal
Pour la configuration, nous allons tous simplement copier le code de configuration de notre projet firebase le mettre dans le fichier app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
export const firebaseConfig = {
apiKey: "*******************************************",
authDomain: "**********-**********.firebaseapp.com",
databaseURL: "https://**********-**********.firebaseio.com",
projectId: "**********-**********",
storageBucket: "**********-**********.appspot.com",
messagingSenderId: "**********",
appId: "1:**********:web:********************"
};
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Déclarez ensuite ces deux modules dans l'objet imports du même fichier en appliquant la fonction initializeApp() pour associer Ionic & Firebase:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
//Importation des modules
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:********************"
};
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule],
//Ajout de la configuration
AngularFireModule.initializeApp(firebaseConfig),
AngularFirestoreModule
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Une fois cette configuration faite, nous pouvons désormais utiliser firebase dans notre projet ionic.
N'oublier pas de remplacer les valeurs des champs de cette object firebaseConfig par de vrais valeurs .
Créer une collection firestore.
Nous allons commencer par créer une base de donnée Firestore dans notre projet firebase. Si vous ne savez comment créer une projet Firebase, veillez consulter ce tutoriel que j'ai rédigé et traitant du sujet lien .
Pour créer une base de donnée firestore, je vous invite à cliquer sur Cloud Firestore sur le menu latéral et en suite sur créer une base de donnée comme l'indique cette image :
Sur le popup ci-dessous je vous invite à démarrer en mode test
Une fois fait, je vous invite à créer une collection en cliquant sur le lien Commencer une collection
Sur l'interface ci-dessous, je vous invite à donner un nom à votre collection. Ici je vais mettre paysage car je veux y stocker les données de différent paysages.
Stockage des données sur firestore.
Nous allons créer notre formulaire sur une page de notre application reservée à cette effet. Ici moi je vais travailler dans la page home. Donc je vais créer mon formulaire dans le page home.page.ts.
<div>
<ion-item>
<ion-label for="paysage">Paysage :</ion-label>
<ion-input type="text"> </ion-input>
</ion-item>
<ion-item>
<ion-label for="lien">Lien :</ion-label>
<ion-input type="text" > </ion-input>
</ion-item>
<ion-button expand="block" color="dark" (click)='onAddContry()'> Nouveau paysage </ion-button>
</div>
Comme vous le voyez nous aurons deux champs de texte. Un champs de texte pour avoir le lien vers l'image sur google et un champs pour le nom de l'image. Pour le moment le code complet de ma page est le suivant :
<ion-header>
<ion-toolbar color="warning">
<ion-title>
Ionic Firestore
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-item>
<ion-label for="paysage">Paysage :</ion-label>
<ion-input type="text" [(ngModel)]="paysageName"> </ion-input>
</ion-item>
<ion-item>
<ion-label for="lien">Lien :</ion-label>
<ion-input type="text" [(ngModel)]="paysageLink"> </ion-input>
</ion-item>
<ion-button expand="block" color="dark" (click)='onAddContry()'> Nouveau paysage </ion-button>
</div>
</ion-content>
Notre formulaire est prêt, nous pouvons passer au code de notre fonction de sauvegarde des données mais avant il est important de dire que dans notre formulaire, nous avons les attributs [(ngModel)]="paysageLink" et [(ngModel)]="paysageName" qui permettent de récupérer les données entrées par l'utilisateur et (click)='onAddContry()' au niveau du bouton qui est l'événement qui sera déclenché quand l'utilisateur va appuyer sur le bouton.
Je vais revenir sur ces notions angular dans un prochain tutoriel.
Envoyé des données sur firestore
Nous allons maintenant travailler dans le fichier home.page.ts.Nous allons créer nos variables correspondantes à ceux du formulaire, nous allons également importer firestore dans notre classe et en fin créer notre fonction de stockage
- Pour la déclaration des variables, on va le faire directement dans la classe typescript avec les mêmes noms que ceux du html: paysageLink et paysageName
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
paysageName:string;
paysageLink:string;
constructor() {}
onAddContry(){}
}
- Une fois fait, nous allons maintenant créer un objet du service firestore pour pouvoir utiliser les fonctions de ce service.
import { Component } from '@angular/core';
//Importation du service
import {AngularFirestore} from "@angular/fire/firestore"
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
paysageName:string;
paysageLink:string;
//Déclaration de l'objet dans le constructeur
constructor(public firestore: AngularFirestore) {}
onAddContry(){}
}
Comme vous l'avez remarqué certainement, j'ai crée une fonction onAddContry() qui sera la fonction exécutée au déclenchement de l'événement. Nous allons utiliser cette fonction pour rédiger notre fonction de stockage.
Notre fonction de stockage ressemble à ça.
onAddContry(){
this.firestore.collection('paysages').add({
name: this.paysageName,
link: this.paysageLink
});
}
Nous avons utilisé l'objet de notre service firestore pour faire appel à la fonction collection() qui définit ou crée une collection qui dans laquelle elle va stocker nos data envoyées par la methode add().
Ici nous définissons le nom de la collection en paramètre dans la fonction collection(). Le code de notre classe pour le moment est le suivant.
import { Component } from '@angular/core';
//Importation du service
import {AngularFirestore} from "@angular/fire/firestore"
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
paysageName:string;
paysageLink:string;
//Déclaration de l'objet dans le constructeur
constructor(public firestore: AngularFirestore) {}
onAddContry(){
this.firestore.collection('paysages').add({
name: this.paysageName,
link: this.paysageLink
});
}
}
Nous pouvons désormais tester la sauvegarde des données dans notre collection. Notre application ressemble à ça.
Après le test voici ce nous obtenons sur firestore.
La sauvegarde des données est maintenant opérationnelle. Nous allons maintenant essayer de récupérer les données.
Récupération des données
Nous allons repartir dans notre fichier home.page.ts pour écrire le code de récupération de nos données.
- Créons tout d'abord un tableau d'object qui contiendras tous les paysage récupérer de firestore.
paysages:any[];
- Créons ensuite la fonction de récupération de des paysages.
onGetContries(){
this.firestore.collection('paysages').valueChanges()
.subscribe(response => {
console.log(response);
})
}
Console.log() permet de visualiser le résultat pour le moment sur la consule de notre navigateur.
- Test de la récupération
Pour tester ce que nous venons de faire, nous allons tous simplement appeler notre fonction dans le constructeur de notre page.
constructor(public firestore: AngularFirestore) {
this.onGetContries();
}
Nous pouvons donc voir dans la console de notre navigateur, le résultat suivant :
Nous avons pu récupérer nos différents données. Nous pouvons donc les afficher dans notre page home.page.html
Code finale de notre fichier home.page.ts
import { Component } from '@angular/core';
//Importation du service
import {AngularFirestore} from "@angular/fire/firestore"
//importation de l'observable
import { Observable } from 'rxjs';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
paysageName:string;
paysageLink:string;
paysages:any[];
//Déclaration de l'objet dans le constructeur
constructor(public firestore: AngularFirestore) {
this.onGetContries();
}
onAddContry(){
this.firestore.collection('paysages').add({
name: this.paysageName,
link: this.paysageLink
});
}
onGetContries(){
this.firestore.collection('paysages').valueChanges()
.subscribe(response => {
this.paysages = response;
})
}
}
Code de notre page html
<ion-header>
<ion-toolbar color="warning">
<ion-title>
Ionic Firestore
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-item>
<ion-label>Paysage :</ion-label>
<ion-input type="text" [(ngModel)]="paysageName" [ngModelOptions]="{standalone: true}"> </ion-input>
</ion-item>
<ion-item>
<ion-label>Lien :</ion-label>
<ion-input type="text" [(ngModel)]="paysageLink" [ngModelOptions]="{standalone: true}"> </ion-input>
</ion-item>
<ion-button expand="block" color="dark" (click)='onAddContry()'>
Nouveau paysage
</ion-button>
</div>
<ion-card *ngFor="let paysage of paysages">
<img [src]="paysage.link">
<ion-card-content>
{{paysage.name}}
</ion-card-content>
</ion-card>
</ion-content>
Juste en bas du formulaire que nous avons créé, j'ai ajouté un ion-card pour afficher les informations du paysage.
<ion-card *ngFor="let paysage of paysages">
<img [src]="paysage.link">
<ion-card-content>
{{paysage.name}}
</ion-card-content>
</ion-card>
#Code final de notre fichier app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
//Importation des modules
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:********************"
};
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFirestoreModule
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Résultat de l'interface
Conclusion
Les amis nous sommes à la fin de ce tutoriel. Nous avons vu comment faire pour stocker et récupérer nos données sur firestore avec ionic. Dans le tutoriel qui vient, nous allons voir comment améliorer notre code en utilisant des services.
Code Github du projet : Ionic-firestore