Comment utiliser des requêtes Firebase complexes dans Angular

L'une des fonctionnalités de Firebase est que vous pouvez créer une base de données NoSQL stockée dans le cloud. Vous pouvez également intégrer cette base de données dans les applications que vous développez et vous pouvez stocker, mettre à jour et supprimer des données dans la base de données.

Vous pouvez également interroger la base de données Firebase depuis votre application Angular. Firebase vous oblige à indexer les combinaisons de champs pour une requête qui utilise plusieurs champs. Cela permet à Firebase de les rechercher facilement lorsque vous appelez la requête à un autre moment.

Configurez votre application angulaire et votre base de données Firebase

Avant d'écrire vos requêtes Firebase, vous devrez créer une application angulaire et une base de données Firebase. Vous devrez également configurer votre application Angular pour vous connecter à votre base de données.

1. Si vous n'avez pas d'application Angular existante, vous pouvez utiliser le nouveau commande pour créer un nouveau projet avec tous les fichiers angulaires nécessaires.

   ng NouveauNouveau-application angulaire

2. Créer un nouvelle base de données Firebase pour l'application Angular en vous connectant à Firebase et en suivant les invites pour créer un nouveau projet Firebase.
3. Dans votre nouvelle base de données Cloud Firestore, créez deux collections (également appelées tables) pour un "Produit" et un "Fournisseur". Un fournisseur peut fournir plusieurs produits. Chaque produit est également connecté au fournisseur à l'aide du champ "supplierId".
4. Entrez les données suivantes dans le tableau "Produit". Saisissez les champs name, productId et supplierId sous forme de chaînes. Saisissez les champs price et inStock sous forme de nombres.

   Identifiant du document	Des champs
   produit1	nom: "Rubans" prix: 12,99 inStock: 10 ID produit: "P1" ID fournisseur: "S1"
   produit2	nom: "Ballons" prix: 1,5 inStock: 2 ID produit: "P2" ID fournisseur: "S1"
   produit3	nom: "Papier" prix: 2,99 inStock: 20 ID produit: "P3" ID fournisseur: "S1"
   produit4	nom: "Tableau" prix: 199 inStock: 1 ID produit: "P4" ID fournisseur: "S2"

   Voici un exemple montrant à quoi cela devrait ressembler :
5. Entrez les données suivantes dans la table "Fournisseur". Saisissez tous les champs sous forme de chaînes.

   Identifiant du document	Des champs
   fournisseur1	nom: "Fournisseur d'art et d'artisanat" lieu: "Californie, États-Unis" ID fournisseur: "S1"
   fournisseur2	nom: "Tables étonnantes" lieu: "Sydney, Australie" ID fournisseur: "S2"

   Voici à quoi devrait ressembler l'entrée supplier1 :
6. Installer angulaire/feu dans votre application.

   npm je @angulaire/fire

7. Dans Firebase, ouvrez le Paramètres du projet. Cliquez sur le logo des crochets angulaires pour ajouter Firebase à votre application Angular.
8. Firebase vous fournira des détails de configuration que vous pourrez utiliser pour connecter votre application Angular à la base de données Firebase.
9. Remplacez le contenu dans environnements/environnement.ts avec le code suivant. Vous devrez modifier les valeurs dans firebaseConfig. Modifiez-les pour qu'ils correspondent à la configuration fournie par Firebase à l'étape précédente.

   exporterconstante environnement = {
    production: faux,
    firebaseConfig: {
    Clé API: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIandlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    ID de projet: "muo-firebase-queries",
    storageBucket: "muo-firebase-queries.appspot.com",
    messageSenderId: "569911365044",
    ID d'application: "1:569911365044:la toile:9557bfef800caa5cdaf6e1"
    }
   };

10. Importez l'environnement ci-dessus, ainsi que les modules Angular Firebase dans src/app/app.module.ts.

    importer { environnement } de "../environnements/environnement" ;
    importer { AngularFireModule } de '@angular/fire/compat' ;
    importer { AngularFirestoreModule } de "@angular/fire/compat/firestore" ;

11. Ajoutez les modules Firebase au tableau des importations :

    AngularFirestoreModule,
    AngularFireModule.initializeApp(environnement.firebaseConfig)

Comment écrire une requête Firebase complexe dans un fichier de services

Vous pouvez interroger des tables dans votre base de données Firebase à l'aide d'un fichier de services.

1. Créez un nouveau dossier appelé "services". Dans le dossier, créez un nouveau fichier appelé "service.ts".
2. Ajoutez l'importation, le constructeur et la classe AngularFirestore dans le fichier.

   importer { Injectables } de '@angular/core' ;
   importer { Angular Firestore } de '@angular/fire/compat/firestore' ;
   @Injectable({
    Fourni dans: 'racine'
   })
   exporterclasserService{
   constructeur(base de données privée: AngularFirestore) {}
   }

3. Dans cet exemple de requête, répertoriez les produits en fonction du nom d'un fournisseur. De plus, filtrez la liste pour n'afficher que l'article avec le stock le plus bas. Étant donné que Firebase n'est pas une base de données rationnelle, nous devrons interroger les deux tables distinctes à l'aide de plusieurs requêtes.
4. Pour ce faire, créez une nouvelle fonction appelée getFournisseur(), pour gérer la première requête. La fonction renverra la ligne de la table "Fournisseur" qui correspond au nom.

   getSupplier (nom: chaîne) {
   revenirNouveauPromettre((résoudre)=> {
    this.db.collection('Le fournisseur', réf => réf.où('Nom', '==', nom)).valueChanges().subscribe (fournisseur => résoudre (fournisseur))
    })
    }

5. Créez une autre fonction appelée getProductsFromSupplier(). Cette requête interroge la base de données sur les produits associés à un fournisseur particulier. De plus, la requête classe également les résultats par le champ "inStock" et affiche uniquement le premier enregistrement de la liste. En d'autres termes, il renverra le produit pour un fournisseur particulier, avec le nombre "inStock" le plus bas.

   getProductsFromSupplier (ID fournisseur: chaîne) {
   revenirNouveauPromettre((résoudre)=> {
    this.db.collection('Produit', réf => réf.où('ID du fournisseur', '==', fournisseurId).orderBy('en stock').startAt (0).limit (1)).valueChanges().subscribe (produit => résoudre (produit))
    })
    }

6. Dans le src/app/app.component.ts fichier, importez le service.

   importer { Service } de 'src/app/services/service' ;

7. Ajoutez un constructeur dans la classe AppComponent et ajoutez le service au constructeur.

   constructeur(service privé: Service) { }

8. Créez une nouvelle fonction appelée getProductStock(). Cette fonction imprimera le produit avec le stock le plus bas fourni par un fournisseur particulier. Assurez-vous d'appeler la nouvelle fonction dans le ngOnInit() fonction et déclarez une variable pour stocker le résultat.

   produits: tous ;
   ngOnInit(): annuler {
   cette.getProductStock();
   }
   asynchrone getProductStock() {
   }

9. À l'intérieur de getProductStock() fonction, utilisez les deux requêtes du fichier services. Utilisez la première requête pour obtenir l'enregistrement d'un fournisseur en fonction du nom. Ensuite, utilisez le supplierId comme argument pour la deuxième requête, qui trouvera le produit de ce fournisseur, avec le stock le plus bas.

   laisser fournisseur = attendrecette.service.getSupplier('Fournisseur d'art et d'artisanat'); 
   cette.produits = attendrecette.service.getProductsFromSupplier (fournisseur[0].ID du fournisseur);

10. Supprimez le contenu du src/app/app.component.html fichier et remplacez-le par ce qui suit :

    <h2> Produits avec le stock le plus bas de "Fournisseur d'art et d'artisanat"</h2>
    <div *ngFor="laisser article de produits">
    <p> Nom: {{item.name}} </p>
    <p> Quantité en stock: {{item.inStock}} </p>
    <p> Prix: {{item.price}} $ </p>
    </div>

11. Exécutez l'application dans un navigateur Web à l'aide de ng servir commande.

    ng servir

12. Ouvrez votre site Web à l'aide de n'importe quel navigateur Web. Par défaut, Angular héberge l'application sur hôte local: 4200.
13. Vos données ne s'afficheront pas correctement à l'écran. Faites un clic droit sur la page Web et cliquez sur Inspecter pour ouvrir les outils de développement de votre navigateur.
14. Naviguez vers le Console languette. Une erreur s'affichera pour vous informer que la requête nécessitera un index.

Comment créer un index composite pour votre requête

Firebase crée des index pour les requêtes pouvant contenir plusieurs champs. Selon le Documentation Firebase, cela agit comme une carte, afin que Firebase puisse rechercher l'emplacement des champs contenus dans la requête.

1. Dans la console, cliquez sur le lien affiché par l'erreur.
2. Connectez-vous à votre compte Firebase.
3. Une invite s'affichera vous demandant de créer un index pour la requête Firebase. Cliquer sur Créer un index.
4. Firebase indexera les champs utilisés par votre requête. Attendez quelques minutes jusqu'à ce que l'état passe de "Building" à "Enabled".
5. Actualisez votre navigateur Web. La requête s'exécutera et renverra le résultat correct sur la page d'accueil. Si vous ouvrez le débogueur de la console à l'aide des outils de développement de votre navigateur, l'erreur ne devrait plus être présente.

Interroger votre base de données Firebase

Firebase vous permet de créer une base de données NoSQL dans le cloud. Vous pouvez ensuite intégrer cette base de données dans les applications angulaires que vous développez. Vous pouvez créer différents types de requêtes pour stocker, mettre à jour ou supprimer des données. Vous pouvez également créer une requête qui utilise plusieurs champs à la fois.

Lorsque vous créez une requête qui utilise plusieurs champs, essayer de l'exécuter produira une erreur. Vous devrez indexer la combinaison de champs utilisée dans la requête, afin que Firebase puisse facilement la rechercher chaque fois que vous exécutez la requête.

Vous pouvez également découvrir d'autres façons de configurer une base de données NoSQL, par exemple comment configurer une base de données à l'aide de MongoDB.