Kaip naudoti sudėtingas „Firebase“ užklausas „Angular“.

Viena iš „Firebase“ funkcijų yra ta, kad galite sukurti „NoSQL“ duomenų bazę, saugomą debesyje. Taip pat galite integruoti šią duomenų bazę į savo kuriamas programas, taip pat galite saugoti, atnaujinti ir ištrinti duomenis duomenų bazėje.

„Firebase“ duomenų bazės užklausą taip pat galite pateikti naudodami „Angular“ programą. „Firebase“ reikalauja, kad užklausoje, kurioje naudojami keli laukai, būtų indeksuojami laukų deriniai. Tai leidžia „Firebase“ lengvai juos ieškoti, kai skambinate į užklausą kitu metu.

Nustatykite „Angular“ programą ir „Firebase“ duomenų bazę

Prieš rašydami „Firebase“ užklausas, turėsite sukurti kampinė programa ir „Firebase“ duomenų bazė. Taip pat turėsite sukonfigūruoti savo Angular programą, kad galėtumėte prisijungti prie duomenų bazės.

1. Jei neturite Angular programos, galite naudoti naujas komanda sukurti naują projektą su visais reikalingais Angular failais.

   ng naujasnaujas-kampinė programa

2. Sukurti nauja „Firebase“ duomenų bazė, skirta „Angular“ programai prisijungę prie „Firebase“ ir vadovaudamiesi raginimais sukurti naują „Firebase“ projektą.
3. Naujojoje „Cloud Firestore“ duomenų bazėje sukurkite du rinkinius (taip pat žinomas kaip lentelės), skirtus „Produktui“ ir „Tiekėjui“. Tiekėjas gali tiekti kelis produktus. Kiekvienas produktas taip pat yra prijungtas prie tiekėjo naudojant lauką „supplierId“.
4. Į lentelę „Produktas“ įveskite šiuos duomenis. Įveskite pavadinimo, produkto ID ir tiekėjo ID laukus kaip eilutes. Įveskite kainos ir atsargų laukelius kaip skaičius.

   Dokumento ID	Laukai
   produktas1	pavadinimas: "Juostos" kaina: 12,99 Sandėlyje: 10 produkto ID: "P1" Tiekėjo ID: "S1"
   produktas2	pavadinimas: "balionai" kaina: 1.5 Sandėlyje: 2 produkto ID: "P2" Tiekėjo ID: "S1"
   produktas3	pavadinimas: "popierius" kaina: 2,99 Sandėlyje: 20 produkto ID: "P3" Tiekėjo ID: "S1"
   produktas 4	pavadinimas: "Stalas" kaina: 199 Sandėlyje: 1 produkto ID: "P4" Tiekėjo ID: "S2"

   Štai pavyzdys, rodantis, kaip tai turėtų atrodyti:
5. Į lentelę „Tiekėjas“ įveskite šiuos duomenis. Įveskite visus laukus kaip eilutes.

   Dokumento ID	Laukai
   tiekėjas1	pavadinimas: "Meno ir amatų tiekėjas" vieta: "Kalifornija, JAV" Tiekėjo ID: "S1"
   tiekėjas2	pavadinimas: "Nuostabios lentelės" vieta: "Sidnėjus, Australija" Tiekėjo ID: "S2"

   Štai kaip turėtų atrodyti tiekėjo1 įrašas:
6. Diegti kampinis/ugnis į savo programą.

   npm i @kampinis/fire

7. „Firebase“ atidarykite Projekto nustatymai. Spustelėkite kampinių skliaustų logotipą, kad pridėtumėte Firebase prie savo Angular programos.
8. „Firebase“ pateiks išsamią konfigūracijos informaciją, kurią galėsite naudoti „Angular“ programai prijungti prie „Firebase“ duomenų bazės.
9. Pakeiskite turinį aplinkos/aplinka.ts su tokiu kodu. Turėsite pakeisti reikšmes viduje firebaseConfig. Pakeiskite juos, kad atitiktų konfigūraciją, kurią „Firebase“ pateikė atlikdami ankstesnį veiksmą.

   eksportuotikonst aplinka = {
    gamyba: klaidinga,
    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. Importuokite aplinką iš viršaus kartu su Angular Firebase moduliais src/app/app.module.ts.

    importuoti { aplinka } iš "../aplinka/aplinka";
    importuoti { AngularFireModule } iš „@angular/fire/compat“;
    importuoti { AngularFirestoreModule } iš "@angular/fire/compat/firestore";

11. Pridėkite „Firebase“ modulius prie importavimo masyvo:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(aplinką.firebaseConfig)

Kaip paslaugų faile parašyti sudėtingą „Firebase“ užklausą

Naudodami paslaugų failą galite pateikti užklausas apie lenteles savo „Firebase“ duomenų bazėje.

1. Sukurkite naują aplanką „paslaugos“. Aplanke sukurkite naują failą pavadinimu „service.ts“.
2. Pridėkite AngularFirestore importą, konstruktorių ir klasę į failą.

   importuoti { Injekcinis } iš '@kampinis/šerdis';
   importuoti { AngularFirestore } iš '@angular/fire/compat/firestore';
   @Injekcinis({
    pateikta: 'šaknis'
   })
   eksportuotiklasėAptarnavimas{
   konstruktorius(privatus db: AngularFirestore) { }
   }

3. Šiame užklausos pavyzdyje išvardinkite produktus pagal tiekėjo pavadinimą. Be to, filtruokite sąrašą, kad būtų rodoma tik ta prekė, kurios atsargos yra mažiausios. Kadangi „Firebase“ nėra racionali duomenų bazė, turėsime pateikti užklausą dviejose atskirose lentelėse naudodami daugiau nei vieną užklausą.
4. Norėdami tai padaryti, sukurkite naują funkciją, vadinamą gauti tiekėjas (), kad galėtumėte apdoroti pirmąją užklausą. Funkcija lentelėje „Tiekėjas“ pateiks eilutę, atitinkančią pavadinimą.

   getSupplier (pavadinimas: eilutė) {
   grąžintinaujasPažadas((išspręsti)=> {
    this.db.collection('Tiekėjas', ref => ref.where('vardas', '==', pavadinimas)).valueChanges().subscribe (tiekėjas => išspręsti (tiekėjas))
    })
    }

5. Sukurkite kitą funkciją, vadinamą gautiProductsFrom Supplier(). Ši užklausa pateikia produktų, susietų su konkrečiu tiekėju, duomenų bazę. Be to, užklausa taip pat tvarko rezultatus pagal lauką „InStock“ ir rodo tik pirmąjį sąrašo įrašą. Kitaip tariant, jis grąžins prekę tam tikram tiekėjui su mažiausiu „inStock“ kiekiu.

   getProductsFromSupplier (supplierId: string) {
   grąžintinaujasPažadas((išspręsti)=> {
    this.db.collection('Produktas', ref => ref.where('Tiekėjo ID', '==', TiekėjoId).orderBy('prekyboje').startAt (0).limit (1)).valueChanges().subscribe (produktas => išspręsti (produktas))
    })
    }

6. Viduje src/app/app.component.ts failą, importuokite paslaugą.

   importuoti { Paslauga } iš 'src/app/services/service';

7. Pridėkite konstruktorių „AppComponent“ klasėje ir pridėkite paslaugą prie konstruktoriaus.

   konstruktorius(privati ​​paslauga: paslauga) { }

8. Sukurkite naują funkciją, pavadintą getProductStock(). Ši funkcija išspausdins produktą su mažiausiomis atsargomis, kurias pateikia konkretus tiekėjas. Būtinai iškvieskite naują funkciją ngOnInit() funkciją ir paskelbti kintamąjį rezultatui išsaugoti.

   produktai: bet kokie;
   ngOnInit(): tuštuma {
   tai.getProductStock();
   }
   async getProductStock() {
   }

9. Viduje getProductStock() funkciją, naudokite dvi užklausas iš paslaugų failo. Naudokite pirmąją užklausą, kad gautumėte tiekėjo įrašą pagal pavadinimą. Tada naudokite tiekėjo ID kaip argumentą antrajai užklausai, kuri suras to tiekėjo produktą su mažiausiomis atsargomis.

   leisti tiekėjas = lauktitai.service.getSupplier('Meno ir amatų tiekėjas'); 
   tai.produktai = lauktitai.service.getProductsFromSupplier (tiekėjas[0].supplierId);

10. Pašalinkite turinį iš src/app/app.component.html failą ir pakeiskite jį taip:

    <h2> Produktai su mažiausiomis atsargomis nuo "Meno ir amatų tiekėjas"</h2>
    <div *ngFor="leisti prekę">
    <p> Vardas: {{item.name}} </p>
    <p> Numeris sandėlyje: {{item.inStock}} </p>
    <p> Kaina: {{item.price}} USD </p>
    </div>

11. Paleiskite programą žiniatinklio naršyklėje naudodami ng tarnauti komandą.

    ng tarnauti

12. Atidarykite savo svetainę naudodami bet kurią žiniatinklio naršyklę. Pagal numatytuosius nustatymus „Angular“ priglobia programą adresu Localhost: 4200.
13. Jūsų duomenys ekrane nebus rodomi tinkamai. Dešiniuoju pelės mygtuku spustelėkite tinklalapį ir spustelėkite Apžiūrėti kad atidarytumėte naršyklės kūrėjo įrankius.
14. Eikite į Konsolė skirtuką. Bus rodoma klaida, pranešanti, kad užklausai reikės indekso.

Kaip sukurti sudėtinį jūsų užklausos indeksą

„Firebase“ sukuria užklausų, kuriose gali būti keli laukai, indeksus. Pagal Firebase dokumentacija, tai veikia kaip žemėlapis, kad „Firebase“ galėtų ieškoti užklausoje esančių laukų vietos.

1. Konsolėje spustelėkite nuorodą, kurioje rodoma klaida.
2. Prisijunkite prie „Firebase“ paskyros.
3. Bus rodomas raginimas sukurti „Firebase“ užklausos indeksą. Spustelėkite Sukurti indeksą.
4. „Firebase“ indeksuos laukus, kuriuos naudoja jūsų užklausa. Palaukite kelias minutes, kol būsena pasikeis iš „Pastatas“ į „Įjungta“.
5. Atnaujinkite žiniatinklio naršyklę. Užklausa bus paleista ir pagrindiniame puslapyje pateiks teisingą rezultatą. Jei atidarysite konsolės derinimo priemonę naudodami naršyklės kūrėjo įrankius, klaidos neturėtų būti.

Užklausa jūsų „Firebase“ duomenų bazėje

„Firebase“ leidžia sukurti „NoSQL“ duomenų bazę debesyje. Tada galite integruoti tą duomenų bazę į kuriamas Angular programas. Galite kurti įvairių tipų užklausas duomenims saugoti, atnaujinti arba ištrinti. Taip pat galite sukurti užklausą, kurioje vienu metu būtų naudojami keli laukai.

Kai kuriate užklausą, kurioje naudojami keli laukai, bandant ją paleisti bus pateikta klaida. Turėsite indeksuoti užklausoje naudojamą laukų derinį, kad „Firebase“ galėtų lengvai jį ieškoti, kai vykdote užklausą.

Taip pat galite sužinoti apie kitus NoSQL duomenų bazės nustatymo būdus, pvz., kaip nustatyti duomenų bazę naudojant MongoDB.