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 Concepts angulaires, composants et structure globale d'un projet angulaire.

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. À partir de 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 Firestore, et 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 le 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 je 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.

   exporter l'environnement const = {
    réalisation: vrai,
    firebaseConfig: {
    apiKey: "votre-clé-api",
    authDomain: "votre-domaine-auth",
    projectId: "votre-identifiant-de-projet",
    storageBucket: "votre-stockage-buckey",
    messagerieSenderId: "votre-identifiant-expéditeur-de-messagerie",
    appId: "votre-identifiant d'API",
    measureId: "votre-identifiant-de-mesure"
    }
   };
   

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 je @angulaire/feu
   

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

   import { AngularFireModule } de "@angular/fire" ;
   import { AngularFirestoreModule } de "@angular/fire/firestore" ;
   import { environnement } depuis "../environnements/environnement" ;
   

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 } de '@angular/core' ;
   import { AngularFirestore } de '@angular/fire/firestore' ;
   @Injectable({
    fourni dans: 'racine'
   })
   service de classe d'exportation {
    constructeur (base de données privée: AngularFirestore) {}
   }
   

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

   getAllUsers() {
    retourner une nouvelle promesse((résoudre)=> {
    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.

   importer {Service} à partir de 'src/app/services/service
   constructeur (service privé: Service) {}
   

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

   asynchrone getUsers() {
    this.allUsers = attendre 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: tout, _fName: chaîne, _lName: chaîne, _vip: booléen) {
    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 a beaucoup de fonctions qui en faire 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: n'importe lequel, _firstName: chaîne) {
    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: tout, _firstName: chaîne, _lastName: chaîne) {
    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: n'importe lequel) {
    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() {
    retourner une nouvelle promesse((résoudre)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (utilisateurs => résoudre (utilisateurs))
    })
    }

2. Utilisez cette fonction dans un autre fichier TypseScript.

   asynchrone getAllVipMembers() {
    this.vipUsers = attendre 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() {
    retourner une nouvelle promesse((résoudre)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (utilisateurs => résoudre (utilisateurs) )
    })
    }

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() {
    retourner une nouvelle promesse((résoudre)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (utilisateurs => résoudre (utilisateurs))
    })
    }

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 Angular 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.

Top 8 des cours angulaires pour débutants et utilisateurs avancés

Lire la suite

A propos de l'auteur