Dans ce tuto Ionic, nous allons voir comment associer votre base de données Firebase à votre application Ionic 4.
Les bases de données sont les éléments essentiels de toutes les applications dynamiques. Elle permettre d’afficher une grande variété de contenu à des millions d’utilisateurs.
Pour créer une application à interface sociale, vous avez absolument besoin d’un service de base de données comme Firebase pour stocker les informations de vos utilisateurs.
Dans ce tuto Ionic 4, nous allons créer votre première base de données Firebase et l’associer à votre application Ionic avec le plugin AngularFire.
Nous allons suivre les étapes suivantes:
- Créer le projet Firebase
- Récupérer les codes de configuration
- Installer le plugin AngularFire
- Associer Ionic et Firebase
- Tester le connexion
Comment créer un projet Firebase pour Ionic ?
La première étape est de créer notre projet Firebase pour pouvoir accéder aux services que propose Firebase.
Firebase est un service de base de données propriété de Google, qui offre tous les services dont un développeur mobile peut avoir besoin.
Dans ce tuto, nous nous concentrerons sur l’association de notre projet Firebase avec notre application Ionic 4.
Pour commencer, rendez-vous sur le site de Firebase pour créer un nouveau projet: https://console.firebase.google.com/
Comme Firebase appartient à Google, vous pouvez vous connecter avec vos identifiants Google et créer votre premier projet.
Firebase est un service gratuit, tant que vous ne dépassez pas un certains seuils de données.
Rassurez-vous, pas besoin d’entrer vos coordonnées bancaire pour se créer un compte, au pire si votre projet dépasse le seuil gratuit, il sera limité par Firebase en termes de requête.
Personnellement, je n’ai jamais payé quoi que ce soit pour Firebase, je me contente du service gratuit.
Si vous n’avez pas encore créé de projet Firebase, vous pouvez en créer un nouveau en cliquant sur « Nouveau projet« .
Donnez ensuite un nom à votre projet, celui de votre application et cochez la case « J’accepte les conditions […] ». Cliquez enfin sur « Créer un projet ».
Maintenant que votre nouveau projet est créé, vous devriez accéder à la console Firebase de ce projet en particulier. Vous pouvez accéder à tous les services de Firebase, comme les bases de données, l’authentification ou en encore le stockage.
Le service Database est le plus important des services de Firebase, il permet de stocker des informations de toutes sortes, pour toutes vos applications.
Par exemple vous pouvez stocker les informations de vos utilisateurs, comme leur pseudo ou la description de leur profil. Vous pouvez aussi stocker le contenu de leur publication par exemple.
Le service d’authentification est lui aussi extrêmement important, car il vous permet de gérer la connexion de vos utilisateurs.
Aujourd’hui quasiment toutes les applications ont besoin d’authentifier les utilisateurs, et Firebase une grande variété de méthode.
Avec Firebase, vous pouvez connecter vos utilisateurs par email et mot de passe, avec Facebook, Google ou encore Twitter et bien d’autre.
Comment récupérer ses identifiants de configuration Firebase ?
Chaque projet Firebase est unique, et ne doit être accessible que par les créateurs du projet.
Firebase vous propose donc un ensemble de codes de configurations à ne surtout pas partager pour vous connecter à Firebase depuis votre application Ionic.
Nous allons voir dans cette partie comment récupérer ces codes de connexion pour Ionic et Firebase.
Pour commencer à associer votre projet Firebase à votre application Ionic, rendez-vous dans le menu « Project Overview« .
C’est dans cet espace que vous allez pouvoir gérer les informations globales à votre projet Firebase, comme vos identifiants ou vos différentes applications associées.
En fait il est possible d’utiliser Firebase sur de multiples surfaces, de Android à iOS en passant par les sites web.
Nous allons aujourd’hui voir la méthode web, car nos applications Ionic sont basées sur les technologies web et notamment le JavaScript.
Cliquez ensuite sur « + Ajouter une application ».
Et cliquez sur l’icône </> qui représente les applications web comme Ionic.
Comme je vous l’ai dit, il est possible d’utiliser Firebase avec toutes les plateformes de développement mobile, natives comme hybrides.
Cela aussi pour vous montrer que Firebase est vraiment dédié aux développement mobile et se concentre quasiment exclusivement aux applications.
Par la suite lorsque vous devrez exporter votre application sur iOS et Android, vous devrez une application iOS et Android dans votre projet Firebase. Et générer par exemple pour iOS les fichiers indispensables à l’association d’Ionic et Firebase sur iOS.
Il vous demande maintenant d’enregistrer cette application. Pour l’instant vous n’avez qu’à entrer le nom de l’application, pas besoin de cocher la configuration avec Firebase Hosting.
Une fois votre application enregistrée, le travail sur le site est terminé, Firebase vous propose maintenant de copier un code pour authentifier votre projet Firebase.
Gardez ce code de côté, vous allez vous en resservir bientôt. La seule partie du code que vous devez garder est la suivante:
apiKey: "AIzaSyDKUcs*********AQzm9jPBA", authDomain: "instagram-*****.firebaseapp.com", databaseURL: "https://instagram-*****.firebaseio.com", projectId: "instagram-*****", storageBucket: "instagram-******.appspot.com", messagingSenderId: "**********"
Ces codes de configuration Firebase sont indispensables pour associer toutes applications mobile avec une base de données, sur Ionic ou iOS et Android.
Nous allons dans la partie suivante associer Ionic et Firebase grâce au plugin AngularFire, qui permet de gérer toutes les fonctionnalités de Firebase sur Angular et pour nous Ionic.
Comment installer le plugin AngularFire sur Ionic ?
Nous allons maintenant passer à la partie Ionic. En particulier, nous allons installer le plugin qui nous permet de faire communiquer Firebase et Ionic : le plugin AngularFire.
Le plugin AngularFire est comme son nom l’indique un plugin Angular, et qui est donc utilisable pour nous avec Ionic.
Rappelez-vous, Ionic n’est qu’un framework ultime pour créer des applications hybrides, il est toujours basé sur d’autres frameworks, dont le principale est Angular.
Angular et Firebase ont tous les deux la particularité d’avoir été développé par Google, le plugin AngularFire est donc optimal.
Rendez-vous dans le terminal de votre projet Ionic et entrez la commande suivante pour l’installer:
npm install firebase @angular/fire --save
Si vous êtes sur Mac, vous devez ajouter le mot clé « sudo » devant la commande pour bien installer le plugin :
sudo npm install firebase @angular/fire --save
Pour plus d’informations à propos d’AngularFire, consultez la documentation officielle sur GitHub: https://github.com/angular/angularfire
Le plugin comme vous allez le voir, s’installe automatique dans votre application Ionic. En revanche nous devons le configurer et l’associer à Firebase grâce aux codes de configuration.
Comment associer son app Ionic et son projet Firebase ?
Une fois le plugin téléchargé, nous allons configurer notre application et lui ajouter les éléments nécessaires. Rendez-vous dans le fichier :
src/app/app.module.ts
C’est dans ce fichier app.module.ts que se passe une grande partie des déclarations et configuration de plugin.
C’est dans ce fichier que vous devez déclarer la plupart des plugins que vous avez installé dans votre application.
Sans ça, vous ne pourrez pas utiliser les différentes fonctions mises à disposition par le plugin, et par exemple pour AngulareFire, vous ne serez pas connecté à une base de données en particulier donc vos fonctions n’auront aucunes actions.
Tout en haut de ce fichier, vous retrouvez tous les plugins utiles au fonctionnement de votre application. C’est ici que nous allons ajouter nos plugins :
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireStorageModule } from '@angular/fire/storage';En fait nous importe plus que simplement un seule plugin, mais plutôt différents modules issus de ce plugin.
Chacun de ces modules est utile à quelques chose de particulier dans notre application et son fonctionnement:
- AngularFireModule: permet d’associer notre application Ionic à notre projet Firebase grâce aux code de configuration
- AngularFireDatabaseModule: donne accès aux fonctions de base de données Firebase ( envoi et récupération d’informations sous forme d’objet et de liste)
- AngularFireAuthModule: contient toutes les fonctions d’authentification, par email et mot de passe, Facebook ou Google
- AngularFireStorageModule: permet de stocker et de récupérer des fichiers et du contenu dans la base de stockage Firebase (photos, vidéos, audio, PDF, etc)
Selon les types d’applications et les fonctionnalités à développer, nous aurons besoins de deux ou plusieurs modules.
Le module AngularFireModule est indispensable, vous êtes obligé de l’importer pour utiliser Firebase.
Ensuite le plugin AngularFireDatabaseModule revient lui très souvent car les bases de données sont au cœur de toutes les application dynamique.
Le plugin AngularFireAuthModule est utile lorsque que vous développez une application à interface sociale pour identifier vos utilisateurs.
Le plugin AngularFireStorageModule revient probablement le moins souvent, il est aussi le plus technique à utiliser, mais permet par exemple le partage de photos entre amis ou la création d’une photo de profil.
À la suite de l’importation de nos plugins, nous déclarons la constante firebaseConfig qui va stocker les identifiants Firebase pour l’associer à Ionic.
Déclarer comme ci-dessous la constante firebaseConfig et remplacez les valeurs par les identifiants de votre projet Firebase.
export const firebaseConfig = {
apiKey: 'AIza********************jPBA',
authDomain: 'instagram-********.firebaseapp.com',
databaseURL: 'https://instagram-********.firebaseio.com',
projectId: 'instagram-******',
storageBucket: 'instagram-********.appspot.com',
messagingSenderId: '5************4'
};Ensuite, il nous faut déclarer ces plugins pour pouvoir les utiliser dans le reste de l’application. Pour cela, nous allons déclarer les quatre plugins suivants :
AngularFireModule.initializeApp(firebaseConfig), AngularFireDatabaseModule, AngularFireAuthModule, AngularFireStorageModule
Dans le tableau imports, qui va s’exécuter au lancement de l’application, et qui devrait ressemblait à cela :
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule,
AngularFireStorageModule
],Notez que vous n’avez besoin de déclarer que les plugins que vous comptez utiliser dans votre applications.
Voter fichier src/app/app.module.ts devrait maintenant ressembler à ça :
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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireStorageModule } from '@angular/fire/storage';
export const firebaseConfig = {
apiKey: 'AIzaSyDKU******************9jPBA',
authDomain: 'instagram-********.firebaseapp.com',
databaseURL: 'https://instagram-********.firebaseio.com',
projectId: 'instagram-******',
storageBucket: 'instagram-********.appspot.com',
messagingSenderId: '5***********34'
};
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule,
AngularFireStorageModule
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}L’association de votre projet Firebase à votre application Ionic est maintenant terminée. Nous n’avons pas encore vérifié que tout fonctionnait bien, nous allons le faire dans la partie suivante.
Comment tester le connexion entre Ionic et Firebase ?
Nous allons maintenant tester le connexion entre Firebase et Ionic en utilisant une petite fonction.
Le but de cet exercice est de vous montrer un exemple simple et concret de ce que permet de faire Firebase.
Pour commencer, rendez-vous dans une page de votre application, par exemple Tab1. Ouvrez les fichiers tab1.page.ts et tab1.page.html.
Dans le fichier tab1.page.ts importez le module AngularFireDatabase avec la ligne de code suivante:
import { AngularFireDatabase } from '@angular/fire/database';Puis déclarez ce plugin dans votre constructor pour pouvoir l’utiliser dans le reste de la page :
constructor(
public afDB: AngularFireDatabase
) {}En fait nous donnons à notre module AngularFireDatabase une nom plus court afDB pour simplifier son affichage. Nous pouvons maintenant faire appel au module et à toutes ses fonctions avec l’écriture:
this.afDB.
Maintenant que le plugin est déclaré, nous allons créer une petite fonction pour ajouter du contenu à notre table Firebase. Nous appelons cette fonction Add() pour « ajouter » et nous utilisons le plugin afDB :
add() {
this.afDG.list('User/').push({
pseudo: 'drissas'
});
}Il existe plusieurs manière de créer et d’ajouter du contenu à notre base de données Firebase, l’une des plus simple et efficace est la fonction push().
Nous créons maintenant un bouton à associer à cette fonction dans notre fichier tab1.pahge.html :
<ion-button (click)="add()">Ajouter</ion-button>
De cette manière en cliquant sur le bouton Ajouter, vous devriez ajouter un nouvel élément à notre table User, avec comme champ le pseudo ‘drissas’.
Bien sûr cette fonction n’est en rien dynamique, et il nous faut aller plus loin dans la création de fonction dynamique, mais vous pouvez voir le lien désormais entre Ionic et Firebase.
Si vous ne l’avez pas encore fait, commencez au plus vite mon programme gratuit IONIC STARTER comme commencer rapidement avec Ionic.
Pour aller plus loin, commencez le programme IONIC FACILE et créez des applications incroyables pour bluffer vos utilisateurs et vos clients.