Kako uporabljati zapletene poizvedbe Firebase v Angularju

Ena od funkcij Firebase je, da lahko ustvarite bazo podatkov NoSQL, shranjeno v oblaku. To zbirko podatkov lahko tudi integrirate v aplikacije, ki jih razvijete, in lahko shranjujete, posodabljate in brišete podatke v zbirki podatkov.

Po bazi podatkov Firebase lahko poizvedujete tudi iz svoje aplikacije Angular. Firebase zahteva, da indeksirate kombinacije polj za poizvedbo, ki uporablja več polj. To omogoča Firebase, da jih preprosto poišče, ko poizvedbo pokličete ob drugem trenutku.

Nastavite svojo aplikacijo Angular in zbirko podatkov Firebase

Pred pisanjem poizvedb Firebase boste morali ustvariti aplikacijo Angular in podatkovno zbirko Firebase. Prav tako boste morali konfigurirati svojo aplikacijo Angular za povezavo z vašo bazo podatkov.

1. Če še nimate obstoječe aplikacije Angular, lahko uporabite
   instagram viewer
   ng novo ukaz za ustvarjanje novega projekta z vsemi potrebnimi datotekami Angular.

   ng novonovo-angular-aplikacija

2. Ustvariti nova zbirka podatkov Firebase za aplikacijo Angular tako, da se prijavite v Firebase in sledite navodilom za ustvarjanje novega projekta Firebase.
3. V svoji novi zbirki podatkov Cloud Firestore ustvarite dve zbirki (znani tudi kot tabeli) za »Izdelek« in »Dobavitelja«. Dobavitelj lahko dobavi več izdelkov. Vsak izdelek je tudi povezan z dobaviteljem s pomočjo polja "supplierId".
4. V tabelo "Izdelek" vnesite naslednje podatke. Vnesite polja name, productId in dobaviteljId kot nize. Polji za ceno in inStock vnesite kot številki.

   ID dokumenta	Polja
   izdelek1	ime: "Trakovi" cena: 12,99 na zalogi: 10 ProductId: "P1" ID dobavitelja: "S1"
   izdelek2	ime: "Baloni" cena: 1,5 na zalogi: 2 ProductId: "P2" ID dobavitelja: "S1"
   izdelek3	ime: "papir" cena: 2,99 na zalogi: 20 ProductId: "P3" ID dobavitelja: "S1"
   izdelek4	ime: "Tabela" cena: 199 na zalogi: 1 ProductId: "P4" ID dobavitelja: "S2"

   Tukaj je primer, ki prikazuje, kako bi to moralo izgledati:
5. V tabelo "Dobavitelj" vnesite naslednje podatke. Vnesite vsa polja kot nize.

   ID dokumenta	Polja
   dobavitelj1	ime: "Dobavitelj umetnosti in obrti" lokacija: "Kalifornija, ZDA" ID dobavitelja: "S1"
   dobavitelj2	ime: "Neverjetne mize" lokacija: "Sydney, Avstralija" ID dobavitelja: "S2"

   Takole bi moral izgledati vnos dobavitelj1:
6. Namestite kotni/ogenj v vašo aplikacijo.

   npm i @kotni/fire

7. V Firebase odprite Nastavitve projekta. Kliknite logotip v kotnih oklepajih, da dodate Firebase svoji aplikaciji Angular.
8. Firebase vam bo zagotovil podrobnosti o konfiguraciji, ki jih lahko uporabite za povezavo vaše aplikacije Angular z zbirko podatkov Firebase.
9. Zamenjajte vsebino v okolje/okolje.ts z naslednjo kodo. Spremeniti boste morali vrednosti znotraj firebaseConfig. Spremenite jih, da se ujemajo s konfiguracijo, ki vam jo je Firebase zagotovil v prejšnjem koraku.

   izvozkonst okolje = {
    proizvodnja: lažno,
    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:splet:9557bfef800caa5cdaf6e1"
    }
   };

10. Uvozite okolje od zgoraj, skupaj z moduli Angular Firebase vanj src/app/app.module.ts.

    uvoz {okolje} od "../environments/environment";
    uvoz { AngularFireModule } od '@angular/fire/compat';
    uvoz { AngularFirestoreModule } od "@angular/fire/compat/firestore";

11. Dodajte module Firebase v matriko uvozov:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(okolju.firebaseConfig)

Kako napisati zapleteno poizvedbo Firebase v datoteko storitev

Po tabelah v zbirki podatkov Firebase lahko poizvedujete z uporabo storitvene datoteke.

1. Ustvarite novo mapo z imenom "storitve". Znotraj mape ustvarite novo datoteko z imenom "service.ts".
2. V datoteko dodajte uvoz, konstruktor in razred AngularFirestore.

   uvoz { Za injiciranje } od '@angular/core';
   uvoz { AngularFirestore } od '@angular/fire/compat/firestore';
   @Za injiciranje({
    podano v: 'korenina'
   })
   izvozrazredStoritev{
   konstruktor(zasebna baza podatkov: AngularFirestore) {}
   }

3. V tem primeru poizvedbe navedite izdelke na podlagi imena dobavitelja. Poleg tega filtrirajte seznam tako, da bo prikazan le artikel z najnižjo zalogo. Ker Firebase ni racionalna zbirka podatkov, bomo morali poizvedovati po dveh ločenih tabelah z uporabo več kot ene poizvedbe.
4. Če želite to narediti, ustvarite novo funkcijo, imenovano getSupplier(), za obdelavo prve poizvedbe. Funkcija bo vrnila vrstico v tabeli "Dobavitelj", ki se ujema z imenom.

   getSupplier (ime: niz) {
   vrnitevnovoObljuba((razreši)=> {
    this.db.collection('Dobavitelj', ref => ref.where('ime', '==', ime)).valueChanges().subscribe (supplier => razrešiti (dobavitelj))
    })
    }

5. Ustvarite drugo funkcijo, imenovano getProductsFromSupplier(). Ta poizvedba poizveduje v bazi podatkov za izdelke, povezane z določenim dobaviteljem. Poleg tega poizvedba tudi razvrsti rezultate po polju »inStock« in prikaže samo prvi zapis na seznamu. Z drugimi besedami, vrnil bo izdelek za določenega dobavitelja z najmanjšim številom "inStock".

   getProductsFromSupplier (supplierId: niz) {
   vrnitevnovoObljuba((razreši)=> {
    this.db.collection('Izdelek', ref => ref.where('dobaviteljId', '==', Id dobavitelja).orderBy('na zalogi').startAt (0).limit (1)).valueChanges().subscribe (product => razrešiti (izdelek))
    })
    }

6. V src/app/app.component.ts datoteko, uvozite storitev.

   uvoz { Storitev } od 'src/aplikacija/storitve/storitev';

7. Dodajte konstruktor znotraj razreda AppComponent in konstruktorju dodajte storitev.

   konstruktor(zasebna storitev: Storitev) { }

8. Ustvarite novo funkcijo, imenovano getProductStock(). Ta funkcija bo natisnila izdelek z najnižjo zalogo, ki jo ponuja določen dobavitelj. Ne pozabite poklicati nove funkcije v ngOnInit() funkcijo in deklarirajte spremenljivko za shranjevanje rezultata.

   izdelki: katerikoli;
   ngOnInit(): praznina {
   to.getProductStock();
   }
   asinh getProductStock() {
   }

9. Znotraj getProductStock() uporabite dve poizvedbi iz storitvene datoteke. S prvo poizvedbo pridobite zapis dobavitelja na podlagi imena. Nato uporabite Id dobavitelja kot argument za drugo poizvedbo, ki bo našla izdelek tega dobavitelja z najnižjo zalogo.

   pustiti dobavitelj = čakatito.service.getSupplier('Dobavitelj umetnosti in obrti'); 
   to.izdelki = čakatito.service.getProductsFromSupplier (dobavitelj[0].Id dobavitelja);

10. Odstranite vsebino v src/app/app.component.html datoteko in jo nadomestite z naslednjim:

    <h2> Izdelki z najnižjo zalogo od "Dobavitelj umetnosti in obrti"</h2>
    <div *ngFor="naj postavka izdelkov">
    <str> Ime: {{item.name}} </str>
    <str> Število na zalogi: {{item.inStock}} </str>
    <str> Cena: ${{item.price}} </str>
    </div>

11. Zaženite aplikacijo v spletnem brskalniku z uporabo ng služijo ukaz.

    ng služijo

12. Odprite svoje spletno mesto s katerim koli spletnim brskalnikom. Angular privzeto gosti aplikacijo na lokalni gostitelj: 4200.
13. Vaši podatki se ne bodo pravilno prikazali na zaslonu. Z desno miškino tipko kliknite spletno stran in kliknite na Preglejte da odprete orodja za razvijalce brskalnika.
14. Pomaknite se do Konzola zavihek. Prikaže se napaka, ki vas obvešča, da bo poizvedba zahtevala indeks.

Kako ustvariti sestavljeni indeks za vašo poizvedbo

Firebase ustvari indekse za poizvedbe, ki lahko vsebujejo več polj. Glede na Dokumentacija Firebase, to deluje kot zemljevid, tako da lahko Firebase poišče lokacijo polj, ki jih vsebuje poizvedba.

1. V konzoli kliknite povezavo, ki jo prikaže napaka.
2. Prijavite se v svoj račun Firebase.
3. Prikaže se poziv, da ustvarite indeks za poizvedbo Firebase. Kliknite na Ustvari indeks.
4. Firebase bo indeksiral polja, ki jih uporablja vaša poizvedba. Počakajte nekaj minut, dokler se status ne spremeni iz "Building" v "Enabled".
5. Osvežite spletni brskalnik. Poizvedba se bo zagnala in na domači strani vrnila pravilen rezultat. Če odprete razhroščevalnik konzole z orodji za razvijalce brskalnika, napake ne bi smelo biti več.

Poizvedovanje po vaši zbirki podatkov Firebase

Firebase vam omogoča ustvarjanje baze podatkov NoSQL v oblaku. To bazo podatkov lahko nato integrirate v aplikacije Angular, ki jih razvijate. Ustvarite lahko različne vrste poizvedb za shranjevanje, posodabljanje ali brisanje podatkov. Ustvarite lahko tudi poizvedbo, ki uporablja več polj hkrati.

Ko ustvarite poizvedbo, ki uporablja več polj, bo poskus zagona povzročil napako. Kombinacijo polj, uporabljeno v poizvedbi, boste morali indeksirati, tako da jo bo Firebase zlahka poiskal, ko boste zagnali poizvedbo.

Izvedete lahko tudi o drugih načinih za nastavitev baze podatkov NoSQL, na primer o tem, kako nastaviti bazo podatkov z uporabo MongoDB.