Slik bruker du komplekse Firebase-søk i Angular

En av funksjonene til Firebase er at du kan lage en NoSQL-database lagret i skyen. Du kan også integrere denne databasen i applikasjoner du utvikler, og du kan lagre, oppdatere og slette data inne i databasen.

Du kan også spørre Firebase-databasen fra Angular-applikasjonen din. Firebase krever at du indekserer feltkombinasjoner for en spørring som bruker flere felt. Dette gjør at Firebase enkelt kan slå dem opp når du ringer søket på et annet tidspunkt.

Sett opp Angular-appen og Firebase-databasen din

Før du skriver Firebase-spørringene dine, må du opprette en Angular-applikasjon og en Firebase-database. Du må også konfigurere Angular-appen for å koble til databasen din.

1. Hvis du ikke har en eksisterende Angular-applikasjon, kan du bruke ng nytt kommandoen for å lage et nytt prosjekt med alle nødvendige Angular-filer.

   ng nyny-angular-app

instagram viewer
2. Lage en ny Firebase-database for Angular-appen ved å logge på Firebase og følge instruksjonene for å opprette et nytt Firebase-prosjekt.
3. I den nye Cloud Firestore-databasen din oppretter du to samlinger (også kjent som tabeller) for et "produkt" og en "leverandør". En leverandør kan levere flere produkter. Hvert produkt er også koblet til leverandøren ved å bruke "supplierId"-feltet.
4. Skriv inn følgende data i "Produkt"-tabellen. Skriv inn feltene navn, produkt-ID og leverandør-ID som strenger. Skriv inn feltene pris og lagerbeholdning som tall.

   Dokument-ID	Enger
   produkt1	navn: "Bånd" pris: 12,99 på lager: 10 produkt-ID: "P1" leverandør-ID: "S1"
   produkt2	navn: "Ballonger" 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: "Tabell" pris: 199,- på lager: 1 produkt-ID: "P4" leverandør-ID: "S2"

   Her er et eksempel som viser hvordan dette skal se ut:
5. Skriv inn følgende data i tabellen "Leverandør". Skriv inn alle feltene som strenger.

   Dokument-ID	Enger
   leverandør1	navn: "Leverandør for kunst og håndverk" sted: "California, USA" leverandør-ID: "S1"
   leverandør2	navn: "Fantastiske bord" sted: "Sydney, Australia" leverandør-ID: "S2"

   Slik skal leverandør1-oppføringen se ut:
6. Installere vinkel/brann inn i appen din.

   npm i @angular/fire

7. I Firebase åpner du Prosjektinnstillinger. Klikk på logoen for vinkelparentesene for å legge til Firebase i Angular-applikasjonen din.
8. Firebase vil gi deg konfigurasjonsdetaljer som du kan bruke til å koble Angular-appen din til Firebase-databasen.
9. Bytt ut innholdet i miljøer/miljø.ts med følgende kode. Du må endre verdiene innenfor firebaseConfig. Endre disse for å samsvare med konfigurasjonen som Firebase ga deg i forrige trinn.

   eksportkonst miljø = {
    produksjon: 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 ovenfra, sammen med Angular Firebase-modulene til src/app/app.module.ts.

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

11. Legg til Firebase-modulene i importmatrisen:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(miljø.firebaseConfig)

Hvordan skrive en kompleks Firebase-forespørsel i en tjenestefil

Du kan søke etter tabeller i Firebase-databasen din ved å bruke en tjenestefil.

1. Opprett en ny mappe kalt "tjenester". Inne i mappen oppretter du en ny fil kalt "service.ts".
2. Legg til AngularFirestore-importen, konstruktøren og klassen i filen.

   import { Injiserbar } fra '@angular/kjerne';
   import { AngularFirestore } fra '@angular/fire/compat/firestore';
   @Injiserbar({
    gitt i: 'rot'
   })
   eksportklasseService{
   konstruktør(privat db: AngularFirestore) { }
   }

3. I dette spørringseksemplet viser du produktene basert på en leverandørs navn. Filtrer i tillegg listen for å kun vise varen med lavest lagerbeholdning. Fordi Firebase ikke er en rasjonell database, må vi spørre de to separate tabellene med mer enn én spørring.
4. For å gjøre dette, opprette en ny funksjon kalt getSupplier(), for å håndtere det første søket. Funksjonen vil returnere raden i "Leverandør"-tabellen som samsvarer med navnet.

   getSupplier (navn: streng) {
   komme tilbakenyLove((løse)=> {
    this.db.collection('Leverandør', ref => ref.hvor('Navn', '==', navn)).valueChanges().subscribe (leverandør => løse (leverandør))
    })
    }

5. Lag en annen funksjon kalt getProductsFromSupplier(). Denne spørringen spør databasen etter produkter knyttet til en bestemt leverandør. I tillegg bestiller spørringen også resultater etter "på lager"-feltet og viser bare den første posten på listen. Med andre ord vil den returnere produktet for en bestemt leverandør, med det laveste antallet "inStock".

   getProductsFromSupplier (supplierId: string) {
   komme tilbakenyLove((løse)=> {
    this.db.collection('Produkt', ref => ref.hvor('leverandør-ID', '==', leverandørId).orderBy('på lager').startAt (0).limit (1)).valueChanges().subscribe (produkt => løse (produkt))
    })
    }

6. I src/app/app.component.ts fil, importer tjenesten.

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

7. Legg til en konstruktør i AppComponent-klassen, og legg til tjenesten til konstruktøren.

   konstruktør(privat tjeneste: tjeneste) { }

8. Opprett en ny funksjon kalt getProductStock(). Denne funksjonen vil skrive ut produktet med den laveste beholdningen som en bestemt leverandør tilbyr. Sørg for å kalle opp den nye funksjonen i ngOnInit() funksjon, og erklære en variabel for å lagre resultatet.

   produkter: alle;
   ngOnInit(): tomrom {
   dette.getProductStock();
   }
   asynkron getProductStock() {
   }

9. Inne i getProductStock() funksjon, bruk de to spørringene fra tjenestefilen. Bruk den første spørringen for å få posten til en leverandør basert på navnet. Deretter bruker du leverandør-ID som argument for den andre spørringen, som vil finne produktet fra den leverandøren med lavest lagerbeholdning.

   la leverandør = avventedette.service.getSupplier('Leverandør for kunst og håndverk'); 
   dette.produkter = avventedette.service.getProductsFromSupplier (leverandør[0].supplierId);

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

    <h2> Produkter med lavest lager fra "Leverandør av kunst og håndverk"</h2>
    <div *ngFor="la vare av produkter">
    <s> Navn: {{item.name}} </s>
    <s> Antall på lager: {{item.inStock}} </s>
    <s> Pris: ${{item.price}} </s>
    </div>

11. Kjør programmet i en nettleser ved å bruke ng tjene kommando.

    ng tjene

12. Åpne nettstedet ditt med en hvilken som helst nettleser. Som standard er Angular vert for applikasjonen på lokal vert: 4200.
13. Dataene dine vises ikke riktig på skjermen. Høyreklikk på nettsiden og klikk på Undersøke for å åpne nettleserens utviklerverktøy.
14. Naviger til Konsoll fanen. Det vises en feilmelding for å fortelle deg at spørringen vil kreve en indeks.

Hvordan lage en sammensatt indeks for søket ditt

Firebase oppretter indekser for spørringer som kan inneholde flere felt. Ifølge Firebase-dokumentasjon, fungerer dette som et kart, slik at Firebase kan slå opp plasseringen av feltene i spørringen.

1. I konsollen klikker du på lenken som feilen viser.
2. Logg på Firebase-kontoen din.
3. Det vises en melding som ber deg opprette en indeks for Firebase-spørringen. Klikk på Opprett indeks.
4. Firebase vil indeksere feltene som søket ditt bruker. Vent noen minutter til statusen endres fra "Bygning" til "Aktivert".
5. Oppdater nettleseren din. Spørringen vil kjøre og returnere riktig resultat på hjemmesiden. Hvis du åpner konsollfeilsøkeren ved hjelp av nettleserens utviklerverktøy, skal feilen ikke lenger være der.

Spørre Firebase-databasen din

Firebase lar deg lage en NoSQL-database i skyen. Du kan deretter integrere databasen i Angular-applikasjoner du utvikler. Du kan opprette forskjellige typer søk for å lagre, oppdatere eller slette data. Du kan også opprette en spørring som bruker flere felt samtidig.

Når du oppretter en spørring som bruker flere felt, vil det gi en feil å prøve å kjøre den. Du må indeksere feltkombinasjonen som brukes i spørringen, slik at Firebase enkelt kan slå den opp når du kjører spørringen.

Du kan også lære om andre måter å sette opp en NoSQL-database, for eksempel hvordan du setter opp en database ved hjelp av MongoDB.