Sådan bruger du komplekse Firebase-forespørgsler i Angular

En af funktionerne i Firebase er, at du kan oprette en NoSQL-database gemt i skyen. Du kan også integrere denne database i applikationer, som du udvikler, og du kan gemme, opdatere og slette data inde i databasen.

Du kan også forespørge Firebase-databasen fra din Angular-applikation. Firebase kræver, at du indekserer feltkombinationer for en forespørgsel, der bruger flere felter. Dette giver Firebase mulighed for nemt at slå dem op, når du kalder forespørgslen på et andet tidspunkt.

Konfigurer din Angular App og Firebase-database

Før du skriver dine Firebase-forespørgsler, skal du oprette en Angular applikation og en Firebase-database. Du skal også konfigurere din Angular-app til at oprette forbindelse til din database.

1. Hvis du ikke har en eksisterende Angular-applikation, kan du bruge
   instagram viewer
   ng nyt kommando for at oprette et nyt projekt med alle de nødvendige Angular-filer.

   ng nyny-kantet-app

2. Lave en ny Firebase-database til Angular-appen ved at logge ind på Firebase og følge anvisningerne for at oprette et nyt Firebase-projekt.
3. I din nye Cloud Firestore-database skal du oprette to samlinger (også kendt som tabeller) for et "produkt" og en "leverandør". En leverandør kan levere flere produkter. Hvert produkt er også forbundet med leverandøren ved hjælp af feltet "supplierId".
4. Indtast følgende data i tabellen "Produkt". Indtast felterne navn, produkt-id og leverandør-id som strenge. Indtast felterne pris og lager som tal.

   Dokument ID	Felter
   produkt1	navn: "Bånd" pris: 12,99 På lager: 10 produkt-id: "P1" leverandør-id: "S1"
   produkt2	navn: "Balloner" pris: 1,5 på lager: 2 produkt-id: "P2" leverandør-id: "S1"
   produkt3	navn: "Papir" pris: 2,99 På lager: 20 produkt-id: "P3" leverandør-id: "S1"
   produkt4	navn: "Tabel" pris: 199,- på lager: 1 produkt-id: "P4" leverandør-id: "S2"

   Her er et eksempel, der viser, hvordan dette skal se ud:
5. Indtast følgende data i tabellen "Leverandør". Indtast alle felter som strenge.

   Dokument ID	Felter
   leverandør 1	navn: "Kunst- og kunsthåndværksleverandør" sted: "Californien, USA" leverandør-id: "S1"
   leverandør 2	navn: "Fantastiske borde" sted: "Sydney, Australien" leverandør-id: "S2"

   Sådan skal leverandør1-posten se ud:
6. Installere kantet/brand ind i din app.

   npm i @vinklet/fire

7. I Firebase skal du åbne Projektindstillinger. Klik på vinkelbeslagslogoet for at tilføje Firebase til din Angular-applikation.
8. Firebase giver dig konfigurationsdetaljer, som du kan bruge til at forbinde din Angular-app til Firebase-databasen.
9. Udskift indholdet i miljøer/miljø.ts med følgende kode. Du bliver nødt til at ændre værdierne indenfor firebaseConfig. Skift disse, så de matcher den konfiguration, som Firebase gav dig i det foregående trin.

   eksportkonst 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:web:9557bfef800caa5cdaf6e1"
    }
   };

10. Importer miljøet fra oven sammen med Angular Firebase-modulerne til src/app/app.module.ts.

    importere { miljø } fra "../miljøer/miljø";
    importere { AngularFireModule } fra '@angular/fire/compat';
    importere { AngularFirestoreModule } fra "@angular/fire/compat/firestore";

11. Tilføj Firebase-modulerne til importarrayet:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(miljø.firebaseConfig)

Sådan skriver du en kompleks Firebase-forespørgsel i en servicefil

Du kan forespørge tabeller i din Firebase-database ved at bruge en servicefil.

1. Opret en ny mappe kaldet "tjenester". Inde i mappen skal du oprette en ny fil kaldet "service.ts".
2. Tilføj AngularFirestore-importen, -konstruktøren og -klassen til filen.

   importere { Injicerbar } fra '@angular/kerne';
   importere { AngularFirestore } fra '@angular/fire/compat/firestore';
   @Injicerbar({
    forudsat i: 'rod'
   })
   eksportklasseService{
   konstruktør(privat db: AngularFirestore) { }
   }

3. I dette forespørgselseksempel skal du angive produkterne baseret på en leverandørs navn. Filtrer desuden listen for kun at vise varen med det laveste lager. Fordi Firebase ikke er en rationel database, bliver vi nødt til at forespørge de to separate tabeller med mere end én forespørgsel.
4. For at gøre dette skal du oprette en ny funktion kaldet getSupplier(), for at håndtere den første forespørgsel. Funktionen returnerer den række i "Supplier"-tabellen, der matcher navnet.

   getSupplier (navn: streng) {
   Vend tilbagenyLøfte((løse)=> {
    denne.db.samling('Leverandør', ref => ref.hvor('navn', '==', navn)).valueChanges().subscribe (leverandør => løse (leverandør))
    })
    }

5. Opret en anden funktion kaldet getProductsFromSupplier(). Denne forespørgsel forespørger i databasen efter produkter tilknyttet en bestemt leverandør. Derudover bestiller forespørgslen også resultater efter feltet "på lager" og viser kun den første post på listen. Med andre ord vil den returnere produktet til en bestemt leverandør med det laveste antal "på lager".

   getProductsFromSupplier (supplierId: string) {
   Vend tilbagenyLøfte((løse)=> {
    denne.db.samling('Produkt', ref => ref.hvor('leverandør-id', '==', leverandør-id).orderBy('på lager').startAt (0).limit (1)).valueChanges().subscribe (produkt => løse (produkt))
    })
    }

6. I den src/app/app.component.ts fil, skal du importere tjenesten.

   importere { Service } fra 'src/app/services/service';

7. Tilføj en konstruktør i AppComponent-klassen, og tilføj tjenesten til konstruktøren.

   konstruktør(privat service: Service) { }

8. Opret en ny funktion kaldet getProductStock(). Denne funktion vil udskrive produktet med det laveste lager, som en bestemt leverandør leverer. Sørg for at kalde den nye funktion i ngOnInit() funktion, og erklære en variabel for at gemme resultatet.

   produkter: enhver;
   ngOnInit(): ugyldig {
   dette.getProductStock();
   }
   asynkron getProductStock() {
   }

9. Inde i getProductStock() funktion, skal du bruge de to forespørgsler fra servicefilen. Brug den første forespørgsel til at få posten for en leverandør baseret på navnet. Brug derefter supplierId som argument for den anden forespørgsel, som vil finde produktet fra den leverandør med det laveste lager.

   lade leverandør = ventedette.service.getSupplier('Kunst- og håndværksleverandør'); 
   dette.produkter = ventedette.service.getProductsFromSupplier (leverandør[0].supplierId);

10. Fjern indholdet i src/app/app.component.html fil, og erstat den med følgende:

    <h2> Produkter med laveste lager fra "Leverandør af kunst og håndværk"</h2>
    <div *ngFor="lade vare af produkter">
    <s> Navn: {{item.name}} </s>
    <s> Antal på lager: {{item.inStock}} </s>
    <s> Pris: ${{item.price}} </s>
    </div>

11. Kør programmet i en webbrowser ved hjælp af ng tjene kommando.

    ng tjene

12. Åbn dit websted ved hjælp af en hvilken som helst webbrowser. Som standard hoster Angular applikationen på lokalvært: 4200.
13. Dine data vises ikke korrekt på skærmen. Højreklik på websiden og klik på Inspicere for at åbne din browsers udviklerværktøjer.
14. Naviger til Konsol fanen. Der vises en fejl for at fortælle dig, at forespørgslen kræver et indeks.

Sådan opretter du et sammensat indeks til din forespørgsel

Firebase opretter indekser til forespørgsler, der kan indeholde flere felter. Ifølge Firebase dokumentation, fungerer dette som et kort, så Firebase kan finde placeringen af ​​felterne i forespørgslen.

1. I konsollen skal du klikke på det link, som fejlen viser.
2. Log ind på din Firebase-konto.
3. Der vises en prompt, der beder dig om at oprette et indeks for Firebase-forespørgslen. Klik på Opret indeks.
4. Firebase indekserer de felter, som din forespørgsel bruger. Vent et par minutter, indtil status ændres fra "Bygning" til "Aktiveret".
5. Opdater din webbrowser. Forespørgslen vil køre og returnere det korrekte resultat på hjemmesiden. Hvis du åbner konsol-debuggeren ved hjælp af din browsers udviklerværktøjer, skulle fejlen ikke længere være der.

Forespørgsel i din Firebase-database

Firebase giver dig mulighed for at oprette en NoSQL-database i skyen. Du kan derefter integrere databasen i Angular-applikationer, som du er ved at udvikle. Du kan oprette forskellige typer forespørgsler for at gemme, opdatere eller slette data. Du kan også oprette en forespørgsel, der bruger flere felter på én gang.

Når du opretter en forespørgsel, der bruger flere felter, vil et forsøg på at køre den give en fejl. Du skal indeksere den feltkombination, der bruges i forespørgslen, så Firebase nemt kan slå den op, hver gang du kører forespørgslen.

Du kan også lære om andre måder at opsætte en NoSQL-database på, såsom hvordan man opsætter en database ved hjælp af MongoDB.