Kuidas kasutada keerulisi Firebase'i päringuid Angularis

Üks Firebase'i funktsioone on see, et saate luua pilves talletatava NoSQL-i andmebaasi. Samuti saate selle andmebaasi integreerida oma arendatavatesse rakendustesse ning andmebaasis andmeid salvestada, värskendada ja kustutada.

Firebase'i andmebaasist saate päringuid teha ka oma Angulari rakendusest. Firebase nõuab mitut välja kasutava päringu jaoks väljakombinatsioonide indekseerimist. See võimaldab Firebase'il neid hõlpsalt otsida, kui helistate päringule muul ajal.

Seadistage oma Angular App ja Firebase'i andmebaas

Enne Firebase'i päringute kirjutamist peate looma nurkrakendus ja Firebase'i andmebaas. Samuti peate andmebaasiga ühenduse loomiseks konfigureerima rakenduse Angular.

1. Kui teil pole Angular rakendust, saate kasutada uus käsk uue projekti loomiseks kõigi vajalike Angular-failidega.

   ng uusuus-nurk-rakendus

instagram viewer
2. Loo uus Firebase'i andmebaas rakenduse Angular jaoks logides sisse Firebase'i ja järgides viipasid, et luua uus Firebase'i projekt.
3. Looge oma uues Cloud Firestore'i andmebaasis kaks kogu (tuntud ka kui tabelid) toote ja tarnija jaoks. Tarnija võib tarnida mitut toodet. Iga toode on ka tarnijaga ühendatud välja "tarnijaId" abil.
4. Sisestage tabelisse "Toode" järgmised andmed. Sisestage stringidena väljad nimi, productId ja tarnijaId. Sisestage numbritena hind ja laos olevad väljad.

   Dokumendi ID	Väljad
   toode1	nimi: "Paelad" hind: 12.99 Laos: 10 toote ID: "P1" tarnija ID: "S1"
   toode 2	nimi: "Õhupallid" hind: 1,5 Laos: 2 toote ID: "P2" tarnija ID: "S1"
   toode 3	nimi: "Paber" hind: 2.99 Laos: 20 toote ID: "P3" tarnija ID: "S1"
   toode 4	nimi: "Tabel" hind: 199 Laos: 1 toote ID: "P4" tarnija ID: "S2"

   Siin on näide, mis näitab, kuidas see peaks välja nägema:
5. Sisestage tabelisse "Tarnija" järgmised andmed. Sisestage kõik väljad stringidena.

   Dokumendi ID	Väljad
   tarnija1	nimi: "Kunsti- ja käsitöötarnija" asukoht: "California, USA" tarnija ID: "S1"
   tarnija2	nimi: "Imelised lauad" asukoht: "Sydney, Austraalia" tarnija ID: "S2"

   Tarnija1 kirje peaks välja nägema järgmine:
6. Installige nurk/tuli oma rakendusse.

   npm i @nurkne/fire

7. Firebase'is avage Projekti seaded. Firebase'i lisamiseks oma Angulari rakendusse klõpsake nurksulgude logol.
8. Firebase pakub teile konfiguratsiooni üksikasju, mida saate kasutada oma Angulari rakenduse ühendamiseks Firebase'i andmebaasiga.
9. Vahetage sisu sisse keskkonnad/keskkond.ts järgmise koodiga. Peate sees olevaid väärtusi muutma firebaseConfig. Muutke neid, et need vastaksid Firebase'i eelmises etapis pakutud konfiguratsioonile.

   eksportidakonst keskkond = {
    tootmine: vale,
    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:võrk:9557bfef800caa5cdaf6e1"
    }
   };

10. Importige keskkond ülalt koos Angular Firebase'i moodulitega src/app/app.module.ts.

    importida { keskkond } alates "../keskkonnad/keskkond";
    importida { AngularFireModule } alates '@angular/fire/compat';
    importida { AngularFirestoreModule } alates "@angular/fire/compat/firestore";

11. Lisage Firebase'i moodulid impordimassiivi:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(keskkond.firebaseConfig)

Kuidas kirjutada teenuste faili keerulist Firebase'i päringut

Saate päringuid Firebase'i andmebaasis olevate tabelite kohta teha teenuste faili abil.

1. Looge uus kaust nimega "teenused". Looge kaustas uus fail nimega "service.ts".
2. Lisage faili AngularFirestore'i import, konstruktor ja klass.

   importida { Süstitav } alates '@nurk/tuum';
   importida { AngularFirestore } alates '@angular/fire/compat/firestore';
   @Süstitav({
    sätestatud: 'juur'
   })
   eksportidaklassTeenindus{
   konstruktor(privaatne db: AngularFirestore) { }
   }

3. Selles päringunäites loetlege tooted tarnija nime alusel. Lisaks filtreerige loend, et kuvada ainult kõige väiksema laoseisuga üksus. Kuna Firebase ei ole ratsionaalne andmebaas, peame tegema päringuid kahest eraldi tabelist, kasutades rohkem kui ühte päringut.
4. Selleks looge uus funktsioon nimega hanki tarnija(), et käsitleda esimest päringut. Funktsioon tagastab tabelis "Tarnija" rea, mis vastab nimele.

   getSupplier (nimi: string) {
   tagasiuusLubadus((lahendada)=> {
    this.db.collection('Tarnija', ref => ref.where('nimi', '==', nimi)).valueChanges().subscribe (tarnija => lahendama (tarnija))
    })
    }

5. Looge teine ​​funktsioon nimega hanki tooted tarnijalt(). See päring teeb andmebaasist päringu konkreetse tarnijaga seotud toodete kohta. Lisaks järjestab päring tulemused ka välja "inStock" järgi ja kuvab ainult loendi esimese kirje. Teisisõnu tagastab see toote konkreetse tarnija jaoks madalaima laosolevate toodete arvuga.

   getProductsFromSupplier (supplierId: string) {
   tagasiuusLubadus((lahendada)=> {
    this.db.collection('Toode', ref => ref.where('tarnija ID', '==', tarnijaId).orderBy('Laos').startAt (0).limit (1)).valueChanges().subscribe (toode => lahendada (toode))
    })
    }

6. Aastal src/app/app.component.ts faili, importige teenus.

   importida { Teenus } alates 'src/app/services/service';

7. Lisage AppComponent klassi konstruktor ja lisage konstruktorile teenus.

   konstruktor(erateenus: teenus) { }

8. Looge uus funktsioon nimega hankigeProductStock(). See funktsioon prindib toote väikseima laoseisuga, mida konkreetne tarnija pakub. Kutsuge kindlasti välja uus funktsioon ngOnInit() funktsiooni ja deklareerige tulemuse salvestamiseks muutuja.

   tooted: mis tahes;
   ngOnInit(): tühine {
   see.getProductStock();
   }
   asünkr getProductStock() {
   }

9. Sees getProductStock() funktsiooni, kasutage teenuste faili kahte päringut. Kasutage esimest päringut, et hankida nime põhjal tarnija kirje. Seejärel kasutage tarnijaId argumendina teise päringu jaoks, mis leiab selle tarnija toote, millel on kõige väiksem laovaru.

   lase tarnija = ootamasee.service.getSupplier('Kunsti- ja käsitöötarnija'); 
   see.tooted = ootamasee.service.getProductsFromSupplier (tarnija[0].supplierId);

10. Eemaldage seadmest sisu src/app/app.component.html faili ja asendage see järgmisega:

    <h2> Väikseima laoseisuga tooted alates "Kunsti ja käsitöö tarnija"</h2>
    <div *ngFor="lase üksus tooteid">
    <lk> Nimi: {{item.name}} </lk>
    <lk> Laos olev number: {{item.inStock}} </lk>
    <lk> Hind: {{item.price}} $ </lk>
    </div>

11. Käivitage rakendus veebibrauseris, kasutades teenida käsk.

    teenida

12. Avage oma veebisait mis tahes veebibrauseriga. Vaikimisi hostib Angular rakendust aadressil kohalik host: 4200.
13. Teie andmeid ei kuvata ekraanil õigesti. Paremklõpsake veebilehel ja klõpsake nuppu Kontrollige brauseri arendajatööriistade avamiseks.
14. Navigeerige konsool sakk. Kuvatakse tõrketeade, mis annab teile teada, et päring nõuab indeksit.

Kuidas luua oma päringu jaoks liitindeks

Firebase loob indeksid päringutele, mis võivad sisaldada mitut välja. Vastavalt Firebase'i dokumentatsioon, toimib see kaardina, nii et Firebase saab otsida päringus sisalduvate väljade asukohta.

1. Klõpsake konsoolis lingil, mis kuvab vea.
2. Logige sisse oma Firebase'i kontole.
3. Kuvatakse viip, mis palub teil luua Firebase'i päringu jaoks register. Kliki Loo indeks.
4. Firebase indekseerib väljad, mida teie päring kasutab. Oodake mõni minut, kuni olek "Ehitamine" muutub olekuks "Lubatud".
5. Värskendage oma veebibrauserit. Päring käivitub ja tagastab avalehel õige tulemuse. Kui avate konsooli siluri oma brauseri arendajatööriistade abil, ei tohiks viga enam olla.

Päringute esitamine Firebase'i andmebaasist

Firebase võimaldab luua pilves NoSQL-i andmebaasi. Seejärel saate selle andmebaasi integreerida arendatavatesse Angulari rakendustesse. Andmete salvestamiseks, värskendamiseks või kustutamiseks saate luua erinevat tüüpi päringuid. Samuti saate luua päringu, mis kasutab korraga mitut välja.

Kui loote mitut välja kasutava päringu, põhjustab selle käivitamine veateate. Peate päringus kasutatud väljakombinatsiooni indekseerima, et Firebase saaks seda päringu käivitamisel hõlpsasti otsida.

Samuti saate teada muude NoSQL-i andmebaasi seadistamise viiside kohta, näiteks andmebaasi seadistamise kohta MongoDB abil.