Kā izmantot sarežģītus Firebase vaicājumus Angular

Viena no Firebase funkcijām ir tā, ka varat izveidot NoSQL datu bāzi, kas tiek glabāta mākonī. Varat arī integrēt šo datu bāzi savās izstrādātajās lietojumprogrammās, kā arī saglabāt, atjaunināt un dzēst datus datu bāzē.

Firebase datu bāzē varat arī veikt vaicājumus no savas Angular lietojumprogrammas. Firebase ir jāindeksē lauku kombinācijas vaicājumam, kurā tiek izmantoti vairāki lauki. Tādējādi Firebase var viegli tos meklēt, kad izsaucat vaicājumu citā brīdī.

Iestatiet savu Angular lietotni un Firebase datu bāzi

Pirms Firebase vaicājumu rakstīšanas jums ir jāizveido leņķiskais pielietojums un Firebase datu bāze. Jums būs arī jākonfigurē lietotne Angular, lai izveidotu savienojumu ar datu bāzi.

1. Ja jums nav esošas Angular lietojumprogrammas, varat izmantot jauns
   instagram viewer
   komandu, lai izveidotu jaunu projektu ar visiem nepieciešamajiem Angular failiem.

   ng jaunsjauns-leņķa lietotne

2. Izveidot a jauna Firebase datu bāze lietotnei Angular piesakoties Firebase un izpildot norādījumus, lai izveidotu jaunu Firebase projektu.
3. Savā jaunajā Cloud Firestore datu bāzē izveidojiet divas kolekcijas (pazīstamas arī kā tabulas) “Produktam” un “Piegādātājam”. Piegādātājs var piegādāt vairākus produktus. Katrs produkts ir savienots arī ar piegādātāju, izmantojot lauku "supplierId".
4. Tabulā "Produkts" ievadiet šādus datus. Ievadiet nosaukumu, productId un SupplierId laukus kā virknes. Ievadiet cenu un krājumu laukus kā skaitļus.

   Dokumenta ID	Lauki
   produkts1	nosaukums: "Lentes" cena: 12.99 Noliktavā: 10 produkta ID: "P1" piegādātāja ID: "S1"
   produkts2	nosaukums: "Baloni" cena: 1.5 Noliktavā: 2 produkta ID: "P2" piegādātāja ID: "S1"
   produkts 3	nosaukums: "papīrs" cena: 2,99 Noliktavā: 20 produkta ID: "P3" piegādātāja ID: "S1"
   produkts 4	nosaukums: "Galds" cena: 199 Noliktavā: 1 produkta ID: "P4" piegādātāja ID: "S2"

   Šeit ir piemērs, kas parāda, kā tam vajadzētu izskatīties:
5. Tabulā "Piegādātājs" ievadiet šādus datus. Ievadiet visus laukus kā virknes.

   Dokumenta ID	Lauki
   piegādātājs1	nosaukums: "Mākslas un amatniecības piegādātājs" vieta: "Kalifornija, ASV" piegādātāja ID: "S1"
   piegādātājs2	nosaukums: "Pārsteidzošie galdi" vieta: "Sidneja, Austrālija" piegādātāja ID: "S2"

   Lūk, kā vajadzētu izskatīties piegādātāja1 ierakstam:
6. Uzstādīt leņķiskais/uguns savā lietotnē.

   npm i @stūrains/fire

7. Programmā Firebase atveriet Projekta iestatījumi. Noklikšķiniet uz leņķa kronšteina logotipa, lai pievienotu Firebase savai Angular lietojumprogrammai.
8. Firebase sniegs jums informāciju par konfigurāciju, ko varat izmantot, lai savienotu savu Angular lietotni ar Firebase datu bāzi.
9. Nomainiet saturu vide/vide.ts ar šādu kodu. Jums būs jāmaina vērtības FirebaseConfig. Mainiet tos, lai tie atbilstu Firebase sniegtajai konfigurācijai iepriekšējā darbībā.

   eksportētkonst vide = {
    ražošana: viltus,
    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. Importējiet vidi no augšas kopā ar Angular Firebase moduļiem src/app/app.module.ts.

    imports { vide } no "../vide/vide";
    imports { AngularFireModule } no '@angular/fire/compat';
    imports { AngularFirestoreModule } no "@angular/fire/compat/firestore";

11. Pievienojiet Firebase moduļus importēšanas masīvam:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(vidi.firebaseConfig)

Kā pakalpojumu failā uzrakstīt sarežģītu Firebase vaicājumu

Varat vaicāt tabulas savā Firebase datubāzē, izmantojot pakalpojumu failu.

1. Izveidojiet jaunu mapi ar nosaukumu "pakalpojumi". Mapē izveidojiet jaunu failu ar nosaukumu "service.ts".
2. Pievienojiet failam AngularFirestore importu, konstruktoru un klasi.

   imports {Injicējams} no '@leņķa/kodols';
   imports { AngularFirestore } no '@angular/fire/compat/firestore';
   @Injicējams({
    sniegts: 'sakne'
   })
   eksportētklasēapkalpošana{
   konstruktors(privāts db: AngularFirestore) { }
   }

3. Šajā vaicājuma piemērā norādiet produktus, pamatojoties uz piegādātāja nosaukumu. Turklāt filtrējiet sarakstu, lai tiktu parādīta tikai prece ar viszemāko krājumu. Tā kā Firebase nav racionāla datu bāze, mums būs jāveic vaicājumi divās atsevišķās tabulās, izmantojot vairāk nekā vienu vaicājumu.
4. Lai to izdarītu, izveidojiet jaunu funkciju ar nosaukumu getSupplier(), lai apstrādātu pirmo vaicājumu. Funkcija atgriezīs rindu tabulā “Piegādātājs”, kas atbilst nosaukumam.

   getSupplier (nosaukums: virkne) {
   atgrieztiesjaunsApsolīt((atrisināt)=> {
    this.db.collection('Piegādātājs', ref => ref.where('nosaukums', '==', nosaukums)).valueChanges().abonēt (piegādātājs => atrisināt (piegādātājs))
    })
    }

5. Izveidojiet citu funkciju, ko sauc getProductsFromSupplier(). Šis vaicājums vaicā datu bāzi par produktiem, kas saistīti ar konkrētu piegādātāju. Turklāt vaicājumā rezultāti tiek sakārtoti arī pēc lauka "inStock" un tiek rādīts tikai pirmais ieraksts sarakstā. Citiem vārdiem sakot, tas atgriezīs preci konkrētam piegādātājam ar zemāko "inStock" skaitu.

   getProductsFromSupplier (supplierId: string) {
   atgrieztiesjaunsApsolīt((atrisināt)=> {
    this.db.collection('Produkts', ref => ref.where('piegādātāja ID', '==', piegādātāja ID).orderBy('noliktavā').startAt (0).limit (1)).valueChanges().abonēt (produkts => atrisināt (produkts))
    })
    }

6. Iekš src/app/app.component.ts failu, importējiet pakalpojumu.

   imports { Apkalpošana } no 'src/app/services/service';

7. Pievienojiet konstruktoru klasē AppComponent un pievienojiet pakalpojumu konstruktoram.

   konstruktors(privātais pakalpojums: pakalpojums) { }

8. Izveidojiet jaunu funkciju ar nosaukumu getProductStock(). Šī funkcija izdrukās produktu ar viszemāko krājumu, ko nodrošina konkrēts piegādātājs. Noteikti izsauciet jauno funkciju ngOnInit() funkciju un deklarēt mainīgo, lai saglabātu rezultātu.

   produkti: jebkura;
   ngOnInit(): nederīgs {
   šis.getProductStock();
   }
   asinhrons getProductStock() {
   }

9. Iekšpusē getProductStock() funkciju, izmantojiet divus pakalpojumu faila vaicājumus. Izmantojiet pirmo vaicājumu, lai iegūtu piegādātāja ierakstu, pamatojoties uz nosaukumu. Pēc tam izmantojiet piegādātāja ID kā argumentu otrajam vaicājumam, kurā tiks atrasta šī piegādātāja prece ar mazāko krājumu.

   ļaut piegādātājs = gaidītšis.service.getSupplier('Mākslas un amatniecības piegādātājs'); 
   šis.produkti = gaidītšis.service.getProductsFromSupplier (piegādātājs[0].supplierId);

10. Noņemiet saturu no src/app/app.component.html failu un aizstājiet to ar šādu:

    <h2> Produkti ar viszemāko krājumu no "Mākslas un amatniecības piegādātājs"</h2>
    <div *ngFor="ļaujiet preces vienībai">
    <lpp> Nosaukums: {{item.name}} </lpp>
    <lpp> Numurs noliktavā: {{item.inStock}} </lpp>
    <lpp> Cena: ${{item.price}} </lpp>
    </div>

11. Palaidiet lietojumprogrammu tīmekļa pārlūkprogrammā, izmantojot ng kalpot komandu.

    ng kalpot

12. Atveriet savu vietni, izmantojot jebkuru tīmekļa pārlūkprogrammu. Pēc noklusējuma Angular mitina lietojumprogrammu vietnē vietējais saimnieks: 4200.
13. Jūsu dati netiks pareizi parādīti ekrānā. Ar peles labo pogu noklikšķiniet uz tīmekļa lapas un noklikšķiniet uz Pārbaudīt lai atvērtu pārlūkprogrammas izstrādātāja rīkus.
14. Dodieties uz Konsole cilne. Tiks parādīts kļūdas ziņojums, lai informētu, ka vaicājumam būs nepieciešams rādītājs.

Kā savam vaicājumam izveidot saliktu indeksu

Firebase izveido indeksus vaicājumiem, kuros var būt vairāki lauki. Saskaņā ar Firebase dokumentācija, tā darbojas kā karte, lai Firebase varētu meklēt vaicājumā ietverto lauku atrašanās vietu.

1. Konsolē noklikšķiniet uz saites, kurā tiek parādīta kļūda.
2. Pierakstieties savā Firebase kontā.
3. Tiks parādīta uzvedne ar aicinājumu izveidot Firebase vaicājuma indeksu. Klikšķiniet uz Izveidot indeksu.
4. Firebase indeksēs laukus, kas tiek izmantoti jūsu vaicājumā. Pagaidiet dažas minūtes, līdz statuss mainās no “Ēka” uz “Iespējots”.
5. Atsvaidziniet savu tīmekļa pārlūkprogrammu. Vaicājums tiks izpildīts un sākumlapā parādīs pareizo rezultātu. Ja atverat konsoles atkļūdotāju, izmantojot pārlūkprogrammas izstrādātāja rīkus, kļūdai vairs nevajadzētu būt.

Vaicājumi jūsu Firebase datu bāzē

Firebase ļauj izveidot NoSQL datu bāzi mākonī. Pēc tam varat integrēt šo datu bāzi Angular lietojumprogrammās, kuras izstrādājat. Varat izveidot dažāda veida vaicājumus, lai saglabātu, atjauninātu vai dzēstu datus. Varat arī izveidot vaicājumu, kurā vienlaikus tiek izmantoti vairāki lauki.

Kad veidojat vaicājumu, kurā tiek izmantoti vairāki lauki, mēģinot to palaist, tiks parādīta kļūda. Jums būs jāindeksē vaicājumā izmantotā lauku kombinācija, lai Firebase varētu to viegli meklēt ikreiz, kad izpildāt vaicājumu.

Varat arī uzzināt par citiem veidiem, kā iestatīt NoSQL datu bāzi, piemēram, kā iestatīt datu bāzi, izmantojot MongoDB.