Ako používať komplexné dotazy Firebase v Angular

Jednou z funkcií Firebase je, že môžete vytvoriť databázu NoSQL uloženú v cloude. Túto databázu môžete tiež integrovať do aplikácií, ktoré vyvíjate, a údaje v nej môžete ukladať, aktualizovať a mazať.

Databázu Firebase môžete vyhľadávať aj z vašej aplikácie Angular. Firebase vyžaduje, aby ste indexovali kombinácie polí pre dopyt, ktorý používa viacero polí. Firebase ich tak môže jednoducho vyhľadať, keď zavoláte dopyt v inom časovom okamihu.

Nastavte svoju aplikáciu Angular a databázu Firebase

Pred napísaním dopytov Firebase budete musieť vytvoriť uhlová aplikácia a databázu Firebase. Budete tiež musieť nakonfigurovať aplikáciu Angular na pripojenie k vašej databáze.

1. Ak nemáte existujúcu aplikáciu Angular, môžete použiť ng nové príkaz na vytvorenie nového projektu so všetkými potrebnými súbormi Angular.

   ng NovýNový-angular-app

instagram viewer
2. Vytvor nová databáza Firebase pre aplikáciu Angular prihlásením sa do Firebase a podľa výziev na vytvorenie nového projektu Firebase.
3. Vo svojej novej databáze Cloud Firestore vytvorte dve kolekcie (známe aj ako tabuľky) pre „Produkt“ a „Dodávateľ“. Dodávateľ môže dodať viacero produktov. Každý produkt je tiež pripojený k dodávateľovi pomocou poľa „supplierId“.
4. Do tabuľky „Produkt“ zadajte nasledujúce údaje. Zadajte polia name, productId a SupplierId ako reťazce. Do polí cena a na sklade zadajte čísla.

   ID dokumentu	Polia
   produkt1	názov: "Stuhy" cena: 12,99 na sklade: 10 productId: "P1" Id dodávateľa: "S1"
   produkt2	názov: "Balóny" cena: 1.5 na sklade: 2 productId: "P2" Id dodávateľa: "S1"
   produkt3	názov: "Papier" cena: 2,99 na sklade: 20 productId: "P3" Id dodávateľa: "S1"
   produkt4	názov: "Tabuľka" cena: 199 na sklade: 1 productId: "P4" Id dodávateľa: "S2"

   Tu je príklad, ktorý ukazuje, ako by to malo vyzerať:
5. Do tabuľky „Dodávateľ“ zadajte nasledujúce údaje. Zadajte všetky polia ako reťazce.

   ID dokumentu	Polia
   dodávateľ1	názov: "Dodávateľ umeleckých remesiel" miesto: "Kalifornia, USA" Id dodávateľa: "S1"
   dodávateľ2	názov: "Úžasné stoly" miesto: "Sydney, Austrália" Id dodávateľa: "S2"

   Takto by mal vyzerať záznam dodávateľ1:
6. Inštalácia uhlový/požiarny do vašej aplikácie.

   npm i @angular/fire

7. Vo Firebase otvorte Nastavenia projektu. Kliknutím na logo hranatých zátvoriek pridáte Firebase do svojej aplikácie Angular.
8. Firebase vám poskytne podrobnosti o konfigurácii, ktoré môžete použiť na pripojenie vašej aplikácie Angular k databáze Firebase.
9. Vymeňte obsah v environments/environment.ts s nasledujúcim kódom. Budete musieť zmeniť hodnoty vo vnútri firebaseConfig. Zmeňte ich tak, aby zodpovedali konfigurácii, ktorú vám Firebase poskytla v predchádzajúcom kroku.

   exportkonšt prostredie = {
    výroba: falošný,
    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. Importujte prostredie zhora spolu s modulmi Angular Firebase src/app/app.module.ts.

    importovať { prostredie } od "../životné prostredie/životné prostredie";
    importovať { AngularFireModule } od '@angular/fire/compat';
    importovať { AngularFirestoreModule } od "@angular/fire/compat/firestore";

11. Pridajte moduly Firebase do poľa importov:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(životné prostredie.firebaseConfig)

Ako napísať komplexný dotaz Firebase do súboru služieb

Tabuľky v databáze Firebase môžete dotazovať pomocou súboru služieb.

1. Vytvorte nový priečinok s názvom „services“. V priečinku vytvorte nový súbor s názvom „service.ts“.
2. Pridajte do súboru import, konštruktor a triedu AngularFirestore.

   importovať { Injekčné } od '@angular/core';
   importovať { AngularFirestore } od '@angular/fire/compat/firestore';
   @Injekčné({
    poskytnuté v: 'koreň'
   })
   exporttriedaservis{
   konštruktér(súkromná databáza: AngularFirestore) { }
   }

3. V tomto príklade dopytu uveďte zoznam produktov na základe mena dodávateľa. Okrem toho filtrujte zoznam, aby sa zobrazila iba položka s najnižším skladom. Pretože Firebase nie je racionálna databáza, budeme musieť dotazovať dve samostatné tabuľky pomocou viac ako jedného dotazu.
4. Na tento účel vytvorte novú funkciu s názvom getSupplier(), na spracovanie prvého dotazu. Funkcia vráti riadok v tabuľke „Dodávateľ“, ktorý zodpovedá názvu.

   getSupplier (meno: string) {
   vrátiťNovýSľub((vyriešiť)=> {
    táto.db.kolekcia('dodávateľa', ref => ref.where('názov', '==', meno)).valueChanges().subscribe (dodávateľ => vyriešiť (dodávateľ)
    })
    }

5. Vytvorte ďalšiu funkciu s názvom getProductsFromSupplier(). Tento dotaz zisťuje databázu produktov spojených s konkrétnym dodávateľom. Okrem toho dotaz tiež zoradí výsledky podľa poľa „na sklade“ a zobrazí iba prvý záznam v zozname. Inými slovami, vráti produkt pre konkrétneho dodávateľa s najnižším počtom „na sklade“.

   getProductsFromSupplier (supplierId: string) {
   vrátiťNovýSľub((vyriešiť)=> {
    táto.db.kolekcia('Produkt', ref => ref.where('Id dodávateľa', '==', SupplierId).orderBy('skladom').startAt (0).limit (1)).valueChanges().subscribe (product => vyriešiť (produkt))
    })
    }

6. V src/app/app.component.ts súbor, importujte službu.

   importovať { Služba } od 'src/app/services/service';

7. Pridajte konštruktor do triedy AppComponent a pridajte službu do konštruktora.

   konštruktér(súkromná služba: Služba) { }

8. Vytvorte novú funkciu s názvom getProductStock(). Táto funkcia vytlačí produkt s najnižšou zásobou, akú konkrétny dodávateľ poskytuje. Nezabudnite zavolať novú funkciu v ngOnInit() a deklarujte premennú na uloženie výsledku.

   produkty: akékoľvek;
   ngOnInit(): neplatné {
   toto.getProductStock();
   }
   async getProductStock() {
   }

9. Vnútri getProductStock() použite dva dotazy zo súboru services. Použite prvý dotaz na získanie záznamu dodávateľa na základe mena. Potom použite identifikátor SupplierId ako argument pre druhý dotaz, ktorý nájde produkt od tohto dodávateľa s najnižšou zásobou.

   nech dodávateľ = čakaťtoto.service.getSupplier('Dodávateľ umeleckých remesiel'); 
   toto.produkty = čakaťtoto.service.getProductsFromSupplier (dodávateľ[0].supplierId);

10. Odstráňte obsah v src/app/app.component.html súbor a nahraďte ho nasledujúcim:

    <h2> Produkty s najnižším skladom od "Dodávateľ umeleckých remesiel"</h2>
    <div *ngFor="nechať položku produktov">
    <p> Meno: {{item.name}} </str>
    <p> Číslo na sklade: {{item.inStock}} </str>
    <p> Cena: ${{item.price}} </str>
    </div>

11. Spustite aplikáciu vo webovom prehliadači pomocou ng slúžiť príkaz.

    ng slúžiť

12. Otvorte svoj web pomocou ľubovoľného webového prehliadača. V predvolenom nastavení Angular hosťuje aplikáciu na localhost: 4200.
13. Vaše údaje sa na obrazovke nezobrazia správne. Kliknite pravým tlačidlom myši na webovú stránku a kliknite na Skontrolujte otvorte vývojárske nástroje prehliadača.
14. Prejdite na Konzola tab. Zobrazí sa chyba, ktorá vám oznámi, že dotaz bude vyžadovať index.

Ako vytvoriť zložený index pre váš dopyt

Firebase vytvára indexy pre dopyty, ktoré môžu obsahovať viacero polí. Podľa dokumentácia Firebasefunguje ako mapa, takže Firebase môže vyhľadať umiestnenie polí obsiahnutých v dopyte.

1. V konzole kliknite na odkaz, ktorý zobrazí chyba.
2. Prihláste sa do svojho účtu Firebase.
3. Zobrazí sa výzva na vytvorenie indexu pre dotaz Firebase. Kliknite na Vytvorte index.
4. Firebase bude indexovať polia, ktoré používa váš dopyt. Počkajte niekoľko minút, kým sa stav nezmení z „Building“ na „Enabled“.
5. Obnovte svoj webový prehliadač. Dotaz sa spustí a vráti správny výsledok na domovskú stránku. Ak otvoríte ladiaci nástroj konzoly pomocou vývojárskych nástrojov prehliadača, chyba by sa tam už nemala vyskytovať.

Dopytovanie vašej databázy Firebase

Firebase vám umožňuje vytvoriť databázu NoSQL v cloude. Potom môžete túto databázu integrovať do aplikácií Angular, ktoré vyvíjate. Môžete vytvoriť rôzne typy dotazov na ukladanie, aktualizáciu alebo odstraňovanie údajov. Môžete tiež vytvoriť dotaz, ktorý používa viacero polí naraz.

Keď vytvoríte dotaz, ktorý používa viacero polí, pokus o jeho spustenie spôsobí chybu. Kombináciu polí použitú v dopyte budete musieť indexovať, aby ju Firebase mohla ľahko vyhľadať pri každom spustení dopytu.

Môžete sa tiež dozvedieť o iných spôsoboch nastavenia databázy NoSQL, napríklad ako nastaviť databázu pomocou MongoDB.