Hur man använder komplexa Firebase-frågor i Angular

En av funktionerna i Firebase är att du kan skapa en NoSQL-databas lagrad i molnet. Du kan också integrera denna databas i applikationer som du utvecklar, och du kan lagra, uppdatera och ta bort data inuti databasen.

Du kan också fråga i Firebase-databasen från din Angular-applikation. Firebase kräver att du indexerar fältkombinationer för en fråga som använder flera fält. Detta gör att Firebase enkelt kan slå upp dem när du ringer frågan vid en annan tidpunkt.

Konfigurera din Angular App och Firebase Database

Innan du skriver dina Firebase-frågor måste du skapa en Angular applikation och en Firebase-databas. Du måste också konfigurera din Angular-app för att ansluta till din databas.

1. Om du inte har en befintlig Angular-applikation kan du använda ng ny kommando för att skapa ett nytt projekt med alla nödvändiga Angular-filer.

   ng nyny-vinkel-app

instagram viewer
2. Skapa en ny Firebase-databas för Angular-appen genom att logga in på Firebase och följa anvisningarna för att skapa ett nytt Firebase-projekt.
3. I din nya Cloud Firestore-databas skapar du två samlingar (även känd som tabeller) för en "Produkt" och en "Leverantör". En leverantör kan leverera flera produkter. Varje produkt kopplas också till leverantören med hjälp av fältet "leverantörsId".
4. Ange följande data i tabellen "Produkt". Ange fälten namn, produkt-ID och leverantörs-ID som strängar. Ange fälten pris och lager som nummer.

   Dokument-ID	Fält
   produkt1	namn: "Ribbons" pris: 12,99 i lager: 10 produkt-id: "P1" leverantörs-ID: "S1"
   produkt2	namn: "Ballonger" pris: 1,5 i lager: 2 produkt-id: "P2" leverantörs-ID: "S1"
   produkt3	namn: "Papper" pris: 2,99 i lager: 20 produkt-id: "P3" leverantörs-ID: "S1"
   produkt4	namn: "Bord" pris: 199 kr i lager: 1 produkt-id: "P4" leverantörs-ID: "S2"

   Här är ett exempel som visar hur detta ska se ut:
5. Ange följande data i tabellen "Leverantör". Ange alla fält som strängar.

   Dokument-ID	Fält
   leverantör1	namn: "Konst och hantverksleverantör" plats: "Kalifornien, USA" leverantörs-ID: "S1"
   leverantör2	namn: "Fantastiska bord" plats: "Sydney, Australien" leverantörs-ID: "S2"

   Så här ska posten leverantör1 se ut:
6. Installera vinkel/brand i din app.

   npm i @vinkel/fire

7. I Firebase öppnar du Projektinställningar. Klicka på logotypen för vinkelhakarna för att lägga till Firebase i din Angular-applikation.
8. Firebase kommer att förse dig med konfigurationsdetaljer som du kan använda för att ansluta din Angular-app till Firebase-databasen.
9. Byt ut innehållet i miljöer/miljö.ts med följande kod. Du måste ändra värdena inom firebaseConfig. Ändra dessa för att matcha konfigurationen som Firebase gav dig i föregående steg.

   exporterakonst miljö = {
    produktion: falsk,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase-queries",
    storageBucket: "muo-firebase-queries.appspot.com",
    messagingSenderId: "569911365044",
    appId: "1:569911365044:webb:9557bfef800caa5cdaf6e1"
    }
   };

10. Importera miljön från ovan, tillsammans med Angular Firebase-modulerna till src/app/app.module.ts.

    importera { miljö } från "../miljöer/miljö";
    importera { AngularFireModule } från '@angular/fire/compat';
    importera { AngularFirestoreModule } från "@angular/fire/compat/firestore";

11. Lägg till Firebase-modulerna i importmatrisen:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(miljö.firebaseConfig)

Hur man skriver en komplex Firebase-fråga i en tjänstfil

Du kan fråga tabeller i din Firebase-databas genom att använda en tjänstefil.

1. Skapa en ny mapp som heter "tjänster". Inuti mappen skapar du en ny fil som heter "service.ts".
2. Lägg till AngularFirestore-importen, konstruktorn och klassen i filen.

   importera { Injicerbar } från '@angular/kärna';
   importera { AngularFirestore } från '@angular/fire/compat/firestore';
   @Injicerbar({
    tillhandahålls i: 'rot'
   })
   exporteraklassService{
   konstruktör(privat db: AngularFirestore) { }
   }

3. I det här frågeexemplet listar du produkterna baserat på en leverantörs namn. Filtrera dessutom listan för att bara visa artikeln med det lägsta lagret. Eftersom Firebase inte är en rationell databas måste vi fråga de två separata tabellerna med mer än en fråga.
4. För att göra detta, skapa en ny funktion som heter getSupplier(), för att hantera den första frågan. Funktionen returnerar raden i tabellen "Leverantör" som matchar namnet.

   getSupplier (namn: sträng) {
   lämna tillbakanyLöfte((lösa)=> {
    this.db.collection('Leverantör', ref => ref.var('namn', '==', namn)).valueChanges().subscribe (leverantör => lösa (leverantör))
    })
    }

5. Skapa en annan funktion som heter getProductsFromSupplier(). Denna fråga frågar databasen efter produkter som är associerade med en viss leverantör. Dessutom ordnar frågan också resultat efter fältet "i lager" och visar bara den första posten på listan. Med andra ord kommer den att returnera produkten för en viss leverantör, med det lägsta antalet "i lager".

   getProductsFromSupplier (supplierId: string) {
   lämna tillbakanyLöfte((lösa)=> {
    this.db.collection('Produkt', ref => ref.var('leverantörs-ID', '==', supplierId).orderBy('i lager').startAt (0).limit (1)).valueChanges().subscribe (produkt => lösa (produkt))
    })
    }

6. I den src/app/app.component.ts fil, importera tjänsten.

   importera { Tjänst } från 'src/app/tjänster/tjänst';

7. Lägg till en konstruktor i klassen AppComponent och lägg till tjänsten i konstruktorn.

   konstruktör(privat tjänst: Tjänst) { }

8. Skapa en ny funktion som heter getProductStock(). Denna funktion kommer att skriva ut produkten med det lägsta lagret som en viss leverantör tillhandahåller. Se till att anropa den nya funktionen i ngOnInit() funktion och deklarera en variabel för att lagra resultatet.

   produkter: alla;
   ngOnInit(): tomhet {
   detta.getProductStock();
   }
   asynkron getProductStock() {
   }

9. Inuti getProductStock() funktion, använd de två frågorna från servicefilen. Använd den första frågan för att få posten för en leverantör baserat på namnet. Använd sedan leverantörs-ID som argument för den andra frågan, som kommer att hitta produkten från den leverantören med det lägsta lagret.

   låta leverantör = väntadetta.service.getSupplier('Konst- och hantverksleverantör'); 
   detta.produkter = väntadetta.service.getProductsFromSupplier (leverantör[0].supplierId);

10. Ta bort innehållet i src/app/app.component.html fil och ersätt den med följande:

    <h2> Produkter med lägst lager från "Konst- och hantverksleverantör"</h2>
    <div *ngFor="låt objekt av produkter">
    <sid> Namn: {{item.name}} </s>
    <sid> Antal i lager: {{item.inStock}} </s>
    <sid> Pris: ${{item.price}} </s>
    </div>

11. Kör programmet i en webbläsare med hjälp av ng tjäna kommando.

    ng tjäna

12. Öppna din webbplats med valfri webbläsare. Som standard är Angular värd för applikationen på lokal värd: 4200.
13. Dina data visas inte korrekt på skärmen. Högerklicka på webbsidan och klicka på Inspektera för att öppna webbläsarens utvecklarverktyg.
14. Navigera till Trösta flik. Ett felmeddelande visas för att meddela dig att frågan kräver ett index.

Hur man skapar ett sammansatt index för din fråga

Firebase skapar index för frågor som kan innehålla flera fält. Enligt Firebase-dokumentation, fungerar detta som en karta så att Firebase kan slå upp platsen för fälten i frågan.

1. I konsolen klickar du på länken som felet visar.
2. Logga in på ditt Firebase-konto.
3. En prompt visas som ber dig att skapa ett index för Firebase-frågan. Klicka på Skapa index.
4. Firebase indexerar fälten som din fråga använder. Vänta några minuter tills statusen ändras från "Byggnad" till "Aktiverad".
5. Uppdatera din webbläsare. Frågan körs och returnerar rätt resultat på hemsidan. Om du öppnar konsolfelsökaren med webbläsarens utvecklarverktyg bör felet inte längre finnas där.

Fråga din Firebase-databas

Firebase låter dig skapa en NoSQL-databas i molnet. Du kan sedan integrera den databasen i Angular-applikationer som du utvecklar. Du kan skapa olika typer av frågor för att lagra, uppdatera eller radera data. Du kan också skapa en fråga som använder flera fält samtidigt.

När du skapar en fråga som använder flera fält kommer det att ge ett fel när du försöker köra den. Du måste indexera fältkombinationen som används i frågan, så att Firebase enkelt kan slå upp den när du kör frågan.

Du kan också lära dig om andra sätt att ställa in en NoSQL-databas, till exempel hur du ställer in en databas med MongoDB.