Kako koristiti složene Firebase upite u Angularu

Jedna od značajki Firebasea je da možete stvoriti NoSQL bazu podataka pohranjenu u oblaku. Također možete integrirati ovu bazu podataka u aplikacije koje razvijate i možete pohranjivati, ažurirati i brisati podatke unutar baze podataka.

Također možete postavljati upite Firebase bazi podataka iz svoje Angular aplikacije. Firebase zahtijeva da indeksirate kombinacije polja za upit koji koristi više polja. To omogućuje Firebaseu da ih jednostavno potraži kada pozovete upit u nekoj drugoj točki u vremenu.

Postavite svoju Angular aplikaciju i Firebase bazu podataka

Prije pisanja Firebase upita morat ćete izraditi Angular aplikacija i baza podataka Firebase. Također ćete morati konfigurirati svoju Angular aplikaciju za povezivanje s vašom bazom podataka.

1. Ako nemate postojeću Angular aplikaciju, možete koristiti
   instagram viewer
   ng novo naredba za stvaranje novog projekta sa svim potrebnim Angular datotekama.

   ng novinovi-kutna-aplikacija

2. Stvoriti nova Firebase baza podataka za aplikaciju Angular prijavom u Firebase i praćenjem upita za izradu novog Firebase projekta.
3. U svojoj novoj bazi podataka Cloud Firestore stvorite dvije zbirke (poznate i kao tablice) za "Proizvod" i "Dobavljač". Dobavljač može isporučiti više proizvoda. Svaki proizvod također je povezan s dobavljačem pomoću polja "supplierId".
4. Unesite sljedeće podatke u tablicu "Proizvod". Unesite polja name, productId i supplierId kao nizove. Unesite cijene i inStock polja kao brojeve.

   ID dokumenta	Polja
   proizvod1	naziv: "Vrpce" cijena: 12,99 kn na zalihama: 10 ID proizvoda: "P1" ID dobavljača: "S1"
   proizvod2	naziv: "Baloni" cijena: 1.5 na zalihama: 2 ID proizvoda: "P2" ID dobavljača: "S1"
   proizvod3	naziv: "Papir" cijena: 2,99 kn na zalihama: 20 ID proizvoda: "P3" ID dobavljača: "S1"
   proizvod4	naziv: "Stol" cijena: 199kn na zalihama: 1 ID proizvoda: "P4" ID dobavljača: "S2"

   Evo primjera koji pokazuje kako bi to trebalo izgledati:
5. U tablicu "Dobavljač" unesite sljedeće podatke. Unesite sva polja kao nizove.

   ID dokumenta	Polja
   dobavljač1	naziv: "Dobavljač umjetnina i obrta" lokacija: "Kalifornija, SAD" ID dobavljača: "S1"
   dobavljač2	naziv: "Nevjerojatni stolovi" mjesto: "Sydney, Australija" ID dobavljača: "S2"

   Evo kako bi trebao izgledati unos dobavljača1:
6. Instalirati kutni/vatra u svoju aplikaciju.

   npm i @kutni/fire

7. U Firebaseu otvorite Postavke projekta. Kliknite logotip uglatih zagrada kako biste dodali Firebase svojoj Angular aplikaciji.
8. Firebase će vam pružiti pojedinosti o konfiguraciji koje možete koristiti za povezivanje vaše Angular aplikacije s bazom podataka Firebase.
9. Zamijenite sadržaj u okruženja/okoliš.ts sa sljedećim kodom. Morat ćete promijeniti unutarnje vrijednosti firebaseConfig. Promijenite ih tako da odgovaraju konfiguraciji koju vam je Firebase pružio u prethodnom koraku.

   izvozkonst okruženje = {
    proizvodnja: lažno,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase-upiti",
    storagebucket: "muo-firebase-queries.appspot.com",
    messagingSenderId: "569911365044",
    appId: "1:569911365044:mreža:9557bfef800caa5cdaf6e1"
    }
   };

10. Uvezite okruženje odozgo, zajedno s modulima Angular Firebase src/app/app.module.ts.

    uvoz { okoliš } iz "../environments/environment";
    uvoz { AngularFireModule } iz '@angular/fire/compat';
    uvoz { AngularFirestoreModule } iz "@angular/fire/compat/firestore";

11. Dodajte Firebase module u niz uvoza:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(okoliš.firebaseConfig)

Kako napisati složen Firebase upit u datoteci usluga

Možete postavljati upite tablicama u svojoj Firebase bazi podataka pomoću datoteke usluga.

1. Napravite novu mapu pod nazivom "usluge". Unutar mape stvorite novu datoteku pod nazivom "service.ts".
2. Dodajte AngularFirestore import, konstruktor i klasu u datoteku.

   uvoz { Injekcioni } iz '@angular/core';
   uvoz { AngularFirestore } iz '@angular/fire/compat/firestore';
   @Injekcioni({
    pruženo u: 'korijen'
   })
   izvozrazredaServis{
   konstruktor(privatna baza podataka: AngularFirestore) { }
   }

3. U ovom primjeru upita navedite proizvode na temelju imena dobavljača. Osim toga, filtrirajte popis kako biste prikazali samo artikl s najnižim zalihama. Budući da Firebase nije racionalna baza podataka, morat ćemo postaviti upit u dvije odvojene tablice koristeći više od jednog upita.
4. Da biste to učinili, stvorite novu funkciju pod nazivom getSupplier(), za obradu prvog upita. Funkcija će vratiti redak u tablici "Dobavljač" koji odgovara nazivu.

   getSupplier (naziv: niz) {
   povrataknoviObećanje((razriješi)=> {
    this.db.collection('Dobavljač', ref => ref.gdje('Ime', '==', naziv)).valueChanges().pretplati se (dobavljač => riješiti (dobavljač))
    })
    }

5. Stvorite drugu funkciju tzv getProductsFromSupplier(). Ovaj upit ispituje bazu podataka za proizvode povezane s određenim dobavljačem. Osim toga, upit također poreda rezultate prema polju "inStock" i prikazuje samo prvi zapis na popisu. Drugim riječima, vratit će proizvod za određenog dobavljača, s najnižim brojem "inStock".

   getProductsFromSupplier (supplierId: niz) {
   povrataknoviObećanje((razriješi)=> {
    this.db.collection('Proizvod', ref => ref.gdje('dobavljačId', '==', ID dobavljača).orderBy('na zalihama').startAt (0).limit (1)).valueChanges().subscribe (product => riješiti (proizvod))
    })
    }

6. u src/app/app.component.ts datoteku, uvezite uslugu.

   uvoz { Usluga } iz 'src/aplikacija/usluge/usluga';

7. Dodajte konstruktor unutar klase AppComponent i dodajte uslugu konstruktoru.

   konstruktor(privatna usluga: Usluga) { }

8. Napravite novu funkciju tzv getProductStock(). Ova funkcija će ispisati proizvod s najnižom zalihom koju nudi određeni dobavljač. Obavezno pozovite novu funkciju u ngOnInit() funkciju i deklarirajte varijablu za pohranu rezultata.

   proizvodi: bilo koji;
   ngOnInit(): poništiti {
   ovaj.getProductStock();
   }
   asinkroni getProductStock() {
   }

9. Unutar getProductStock() funkciju, koristite dva upita iz datoteke usluga. Upotrijebite prvi upit da dobijete zapis dobavljača na temelju imena. Zatim upotrijebite dobavljačId kao argument za drugi upit, koji će pronaći proizvod tog dobavljača s najnižim zalihama.

   neka dobavljač = čekatiovaj.service.getSupplier('Dobavljač umjetnosti i obrta'); 
   ovaj.proizvodi = čekatiovaj.service.getProductsFromSupplier (dobavljač[0].Id dobavljača);

10. Uklonite sadržaj u src/app/app.component.html datoteku i zamijenite je sa sljedećim:

    <h2> Proizvodi s najnižim zalihama od "Dobavljač umjetnina i obrta"</h2>
    <div *ngFor="neka stavka proizvoda">
    <str> Naziv: {{item.name}} </str>
    <str> Broj na zalihi: {{item.inStock}} </str>
    <str> Cijena: ${{item.price}} </str>
    </div>

11. Pokrenite aplikaciju u web pregledniku pomoću ng poslužiti naredba.

    ng poslužiti

12. Otvorite svoju web stranicu pomoću bilo kojeg web preglednika. Prema zadanim postavkama, Angular hostira aplikaciju na lokalni host: 4200.
13. Vaši se podaci neće ispravno prikazati na zaslonu. Desnom tipkom miša kliknite web stranicu i kliknite na Pregledati da otvorite razvojne alate vašeg preglednika.
14. Idite do Konzola tab. Prikazat će se pogreška koja vas obavještava da će upit zahtijevati indeks.

Kako stvoriti kompozitni indeks za vaš upit

Firebase stvara indekse za upite koji mogu sadržavati više polja. Prema Firebase dokumentacija, ovo djeluje kao karta, tako da Firebase može potražiti lokaciju polja sadržanih u upitu.

1. U konzoli kliknite vezu koju prikazuje pogreška.
2. Prijavite se na svoj Firebase račun.
3. Prikazat će se upit s upitom da izradite indeks za Firebase upit. Kliknite na Stvorite indeks.
4. Firebase će indeksirati polja koja koristi vaš upit. Pričekajte nekoliko minuta dok se status ne promijeni iz "Izgradnja" u "Omogućeno".
5. Osvježite svoj web preglednik. Upit će se pokrenuti i vratiti točan rezultat na početnoj stranici. Ako otvorite alat za ispravljanje pogrešaka konzole pomoću razvojnih alata preglednika, pogreška više ne bi trebala biti prisutna.

Postavljanje upita vašoj Firebase bazi podataka

Firebase vam omogućuje stvaranje NoSQL baze podataka u oblaku. Zatim možete integrirati tu bazu podataka u Angular aplikacije koje razvijate. Možete stvoriti različite vrste upita za pohranu, ažuriranje ili brisanje podataka. Također možete stvoriti upit koji koristi više polja odjednom.

Kada izradite upit koji koristi više polja, pokušaj njegovog pokretanja proizvest će pogrešku. Morat ćete indeksirati kombinaciju polja koja se koristi u upitu, tako da je Firebase može lako potražiti kad god pokrenete upit.

Također možete naučiti o drugim načinima postavljanja NoSQL baze podataka, kao što je kako postaviti bazu podataka koristeći MongoDB.