Comment stocker, mettre à jour, supprimer et récupérer des données à partir d’une base de données Firebase à l’aide d’Angular

Firebase est une plate-forme qui vous fournit une multitude de services pour vous aider à créer et à faire évoluer une application. Certaines de ces fonctionnalités incluent les services d’hébergement, le stockage de données et la possibilité de suivre l’analyse des données.

Ce didacticiel se concentre principalement sur la création et l’ajout de données à une base de données Firebase, ainsi que sur la manière d’effectuer des opérations de création, de lecture, d’écriture et de suppression dans la base de données à partir d’une application Angular locale.

Comment créer et ajouter des données à une base de données Firebase

En supposant que vous ayez déjà une application Angular configurée et exécutée localement, elle devra être connectée à une base de données Firebase afin de stocker et d’accéder aux données. Si vous n’êtes pas familier avec Angular, vous pouvez en savoir plus sur les concepts, les composants et la structure globale d’un projet Angular.

Si vous ne disposez pas encore d’une base de données Firebase, vous pouvez utiliser les informations d’identification de votre compte Google pour vous connecter à Firebase et suivre les invites. Une fois cela configuré, créez un projet :

1. Sur la page d’accueil de Firebase, sélectionnez Aller à la console dans le coin supérieur droit du site.
2. Sous « Vos projets Firebase », sélectionnez Ajouter un projet.
3. Suivez les invites pour créer un nouveau projet.

4. Une fois terminé, le projet s’ouvrira. Sur le côté gauche de l’écran, un panneau répertorie les fonctionnalités fournies par Firebase. Survolez les icônes jusqu’à ce que vous voyiez Base de données Firestoreet sélectionnez-le.

5. Sélectionner Créer une base de données, et suivez les invites pour créer une base de données.
6. Lors de la sélection des règles de sécurité, sélectionnez Démarrer en mode test. Cela peut être modifié ultérieurement pour garantir la sécurité des données. Vous pouvez en savoir plus sur les règles de sécurité Firestore en suivant la documentation Firebase.

7. Une fois terminé, la base de données s’ouvrira. La structure de la base de données utilise des collections, qui sont essentiellement le même concept que les tables de base de données. Par exemple, si vous aviez besoin de deux tables, une pour stocker les informations de compte et une pour stocker les informations de l’utilisateur, vous créeriez deux collections nommées Compte et Utilisateur.
8. Sélectionner Commencer la collecte et ajoutez un ID de collection appelé « Utilisateur ».

9. Ajoutez le premier enregistrement, avec des informations sur un utilisateur. Cliquer sur Ajouter le champ pour ajouter trois nouveaux champs : firstName (chaîne), lastName (chaîne) et vipMember (booléen). L’ID de document peut être généré automatiquement.

10. Cliquez sur sauvegarder.
11. Pour ajouter d’autres enregistrements à la collection « Utilisateur », cliquez sur Ajouter un document (ajouter un document équivaut à ajouter un nouvel enregistrement ou un nouvel utilisateur). Ajoutez quatre autres utilisateurs avec les trois mêmes champs.

La base de données est maintenant configurée avec quelques données de test.

Comment intégrer Firebase dans votre application angulaire

Pour accéder à ces données dans votre application Angular locale, configurez d’abord certains paramètres de l’application pour vous connecter à la base de données Firebase :

1. Dans Firebase, allez dans le panneau de gauche et cliquez sur Aperçu du projet.
2. Sélectionnez le la toile bouton (indiqué par des crochets angulaires).
3. Enregistrez votre application locale en ajoutant le nom de l’application.

4. Installez Firebase dans votre application Angular locale.

   npm i firebase
   

5. Firebase affichera alors quelques détails de configuration. Enregistrez ces détails et cliquez sur Continuer vers la console.
6. Sur la base des détails fournis à l’étape précédente, copiez le code suivant dans environment.prod.ts et environment.ts dans l’application Angular.

   export const environment = 
   production: true,
   firebaseConfig: 
   apiKey: "your-api-key",
   authDomain: "your-auth-domain",
   projectId: "your-project-id",
   storageBucket: "your-storage-buckey",
   messagingSenderId: "your-messaging-sender-id",
   appId: "your-api-id",
   measurementId: "your-measurement-id"
   
   ;
   

7. AngularFirestore à partir de @angular/feu/firestore sera utilisé pour configurer Firebase dans Angular. Notez qu’AngularFirestore n’est pas compatible avec la version angulaire 9 et supérieure. Dans l’application Angular locale, exécutez :

   npm i @angular/fire
   

8. Ajoutez les modules Firestore et environnement à la section des importations dans app.module.ts.

   import  AngularFireModule  from "@angular/fire";
   import  AngularFirestoreModule  from "@angular/fire/firestore";
   import  environment  from "../environments/environment";
   

9. Les modules Firestore doivent également être inclus dans le tableau des importations dans app.module.ts.

   AngularFireModule.initializeApp(environment.firebaseConfig),
   AngularFirestoreModule,

Comment récupérer des données de Firebase à l’aide d’un service

Il est généralement recommandé d’avoir un ou plusieurs services.ts fichiers que vous utilisez pour interagir spécifiquement avec la base de données. Les fonctions que vous ajoutez dans le fichier de services peuvent ensuite être appelées dans d’autres fichiers, pages ou autres composants TypeScript dans l’application.

1. Créez un fichier appelé service.ts dans le src/application/services dossier.
2. Ajoutez le module AngularFirestore à la section des importations et incluez-le dans le constructeur.

   import  Injectable  from '@angular/core';
   import  AngularFirestore  from '@angular/fire/firestore';
   @Injectable(
   providedIn: 'root'
   )
   export class Service 
   constructor(private db: AngularFirestore)  
   
   

3. Ajoutez une fonction qui renvoie une promesse contenant une liste de tous les utilisateurs. « this.db.collection('User') » fait référence à la collection « Utilisateur » dans la base de données.

   getAllUsers() 
   return new Promise<any>((resolve)=> 
   this.db.collection('User').valueChanges( idField: 'id' ).subscribe(users => resolve(users));
   )
   
   

4. Pour utiliser cette fonction dans un autre fichier TypeScript, importez le nouveau service et ajoutez-le au constructeur.

   import  Service  from 'src/app/services/service
   constructor(private service: Service) 
   

5. Obtenez la liste de tous les utilisateurs utilisant la fonction créée dans le fichier services.

   async getUsers() 
   this.allUsers = await this.service.getAllUsers();
   console.log(this.allUsers);
   
   

Comment ajouter un nouvel enregistrement à la base de données Firebase

Ajoutez un nouvel enregistrement pour un utilisateur dans la base de données Firebase.

1. Dans services.ts, ajoutez une nouvelle fonction pour créer un nouvel enregistrement. Cette fonction prend en compte l’identifiant d’un nouvel utilisateur et tous ses détails. Il utilise la fonction set de Firestore pour envoyer ces informations à Firebase et créer un nouvel enregistrement.

   addNewUser(_newId:any, _fName:string, _lName:string, _vip:boolean) 
   this.db.collection("User").doc(_newId).set(firstName:_fName,lastName:_lName,vipMember:_vip);
   

2. Appelez la fonction addNewUser() dans un autre fichier TypeScript. N’oubliez pas d’importer le service et de l’inclure dans le constructeur, comme indiqué précédemment. N’hésitez pas à utiliser un générateur d’ID aléatoire pour créer le nouvel ID de l’utilisateur.

   this.service.addNewUser("62289836", "Jane", "Doe", true);
   

Comment mettre à jour les données dans la base de données Firebase

Firebase possède de nombreuses fonctions qui en font l’un des meilleurs outils disponibles. Pour mettre à jour certains champs d’un enregistrement particulier, utilisez la fonction de mise à jour de Firestore.

1. Dans le fichier service.ts, créez une fonction appelée updateUserFirstName(). Cette fonction mettra à jour le prénom d’un enregistrement d’utilisateur choisi. La fonction prend l’ID de l’enregistrement qui doit être mis à jour et la nouvelle valeur du prénom de l’utilisateur.

   updateUserFirstName(_id:any, _firstName:string) 
   this.db.doc(`User/$_id`).update(firstName:_firstName);
   

2. Pour mettre à jour plusieurs champs pour le même enregistrement, développez simplement les champs saisis dans la fonction de mise à jour de Firestore. Au lieu de simplement firstName, ajoutez lastName pour le mettre également à jour avec une nouvelle valeur.

   updateUserFullName(_id:any, _firstName:string, _lastName:string) 
   this.db.doc(`User/$_id`).update(firstName:_firstName,lastName:_lastName);
   

3. Toutes les fonctions ci-dessus peuvent être utilisées dans d’autres fichiers TypeScript.

   this.service.updateUserFirstName("vLBnSegFl1pD7XQ42TBv", "Kay");
   this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "Kay", "Jones");

Comment supprimer un enregistrement de la base de données Firebase

Pour supprimer un enregistrement, utilisez la fonction de suppression de Firestore.

1. Dans le fichier service.ts, créez une fonction appelée deleteUser(). Cette fonction prend l’ID de l’enregistrement qui doit être supprimé.

   deleteUser(_id:any) 
   this.db.doc(`User/$_id`).delete();
   
   

2. La fonction ci-dessus peut ensuite être utilisée dans d’autres fichiers TypeScript.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Récupérer des données Firebase à l’aide de requêtes et de filtres

Le filtre « où » peut filtrer les résultats renvoyés en fonction d’une condition spécifique.

1. Dans services.ts, créez une fonction qui récupère tous les utilisateurs VIP (si le champ vipMember est défini sur true). Ceci est indiqué par la partie « ref.where(‘vipMember’, ‘==’, true) » de l’appel Firebase ci-dessous.

   getAllVipMembers() 
   return new Promise<any>((resolve)=> 
   this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe(users => resolve(users))
   )
   

2. Utilisez cette fonction dans un autre fichier TypseScript.

   async getAllVipMembers() 
   this.vipUsers = await this.service.getAllVipMembers();
   console.log(this.vipUsers);
   

3. La requête peut être modifiée pour ajouter d’autres opérations telles que Trier par, Commencer à ou Limiter. Modifiez la fonction getAllVipMembers() dans services.ts pour trier par nom de famille. L’opération Trier par peut nécessiter la création d’un index dans Firebase. Si tel est le cas, cliquez sur le lien fourni dans le message d’erreur de la console.

   getAllVipMembers() 
   return new Promise<any>((resolve)=> 
   this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe(users => resolve(users))
   )
   

4. Modifiez la requête pour renvoyer uniquement les trois premiers enregistrements. Les opérations Start At et Limit peuvent être utilisées pour cela. Ceci est utile si vous devez implémenter la pagination, c’est-à-dire lorsqu’un certain nombre d’enregistrements sont affichés par page.

   getAllVipMembers() 
   return new Promise<any>((resolve)=> 
   this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt(0).limit(3)).valueChanges().subscribe(users => resolve(users))
   )
   

Ajouter plus de données à Firebase et plus de requêtes dans l’application Angular

Il existe de nombreuses autres combinaisons de requêtes que vous pouvez explorer lorsque vous essayez de récupérer des données à partir d’une base de données Firebase. J’espère que vous comprenez maintenant comment configurer une base de données Firebase simple, comment la connecter à une application angulaire locale et comment lire et écrire dans la base de données.

Vous pouvez également en savoir plus sur les autres services fournis par Firebase. Firebase est l’une des nombreuses plates-formes que vous pouvez intégrer à Angular, et que vous soyez débutant ou avancé, il y a toujours beaucoup plus à apprendre.

Lire la suite

A propos de l’auteur