Jak používat komplexní dotazy Firebase v Angular

Jednou z funkcí Firebase je, že můžete vytvořit databázi NoSQL uloženou v cloudu. Tuto databázi můžete také integrovat do aplikací, které vyvíjíte, a můžete ukládat, aktualizovat a mazat data uvnitř databáze.

Databázi Firebase můžete také dotazovat z aplikace Angular. Firebase vyžaduje, abyste indexovali kombinace polí pro dotaz, který používá více polí. Firebase je tak může snadno vyhledat, když dotaz zavoláte v jiném okamžiku.

Nastavte si Angular aplikaci a databázi Firebase

Před psaním dotazů na Firebase budete muset vytvořit aplikace Angular a databáze Firebase. Budete také muset nakonfigurovat aplikaci Angular pro připojení k databázi.

1. Pokud nemáte existující aplikaci Angular, můžete použít ng nové příkaz k vytvoření nového projektu se všemi potřebnými soubory Angular.

   ng NovýNový-angular-app

instagram viewer
2. Vytvořit nová databáze Firebase pro aplikaci Angular přihlášením do Firebase a následováním výzev k vytvoření nového projektu Firebase.
3. Ve své nové databázi Cloud Firestore vytvořte dvě kolekce (známé také jako tabulky) pro „produkt“ a „dodavatele“. Dodavatel může dodat více produktů. Každý produkt je také připojen k dodavateli pomocí pole „supplierId“.
4. Do tabulky „Produkt“ zadejte následující údaje. Zadejte pole name, productId a SupplierId jako řetězce. Pole cena a skladem zadejte jako čísla.

   ID dokumentu	Pole
   produkt1	název: "stuhy" cena: 12,99 na skladě: 10 productId: "P1" dodavatelId: "S1"
   produkt2	název: "Balónky" cena: 1.5 na skladě: 2 productId: "P2" dodavatelId: "S1"
   produkt3	název: "Papír" cena: 2,99 na skladě: 20 productId: "P3" dodavatelId: "S1"
   produkt4	název: "stůl" cena: 199 na skladě: 1 productId: "P4" dodavatelId: "S2"

   Zde je příklad ukazující, jak by to mělo vypadat:
5. Do tabulky "Dodavatel" zadejte následující údaje. Zadejte všechna pole jako řetězce.

   ID dokumentu	Pole
   dodavatel1	název: "Dodavatel umění a řemesel" místo: "Kalifornie, USA" dodavatelId: "S1"
   dodavatel2	název: "Úžasné stoly" místo: "Sydney, Austrálie" dodavatelId: "S2"

   Takto by měl vypadat záznam dodavatel1:
6. Nainstalujte úhlový/požární do vaší aplikace.

   npm i @angular/fire

7. Ve Firebase otevřete soubor Nastavení projektu. Kliknutím na logo lomených závorek přidáte Firebase do své aplikace Angular.
8. Firebase vám poskytne podrobnosti o konfiguraci, které můžete použít k připojení aplikace Angular k databázi Firebase.
9. Vyměňte obsah v environments/environment.ts s následujícím kódem. Budete muset změnit hodnoty uvnitř firebaseConfig. Změňte je tak, aby odpovídaly konfiguraci, kterou vám Firebase poskytla v předchozím kroku.

   vývozníkonst prostředí = {
    Výroba: Nepravdivé,
    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 prostředí shora spolu s moduly Angular Firebase src/app/app.module.ts.

    import { životní prostředí } z "../prostředí/prostředí";
    import { AngularFireModule } z '@angular/fire/compat';
    import { AngularFirestoreModule } z "@angular/fire/compat/firestore";

11. Přidejte moduly Firebase do pole importů:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(životní prostředí.firebaseConfig)

Jak napsat komplexní dotaz Firebase do souboru služeb

Tabulky v databázi Firebase můžete dotazovat pomocí souboru služeb.

1. Vytvořte novou složku s názvem „services“. Uvnitř složky vytvořte nový soubor s názvem „service.ts“.
2. Přidejte do souboru import, konstruktor a třídu AngularFirestore.

   import { Injekční } z '@angular/core';
   import { AngularFirestore } z '@angular/fire/compat/firestore';
   @Injekční({
    poskytnuto v: 'vykořenit'
   })
   vývoznítřídaServis{
   konstruktér(soukromá databáze: AngularFirestore) { }
   }

3. V tomto příkladu dotazu uveďte seznam produktů na základě jména dodavatele. Kromě toho filtrujte seznam, aby se zobrazila pouze položka s nejnižším skladem. Protože Firebase není racionální databáze, budeme muset dotazovat dvě samostatné tabulky pomocí více než jednoho dotazu.
4. Chcete-li to provést, vytvořte novou funkci s názvem getSupplier(), pro zpracování prvního dotazu. Funkce vrátí řádek v tabulce "Dodavatel", který odpovídá názvu.

   getSupplier (název: řetězec) {
   vrátit seNovýSlib((vyřešit)=> {
    tato.db.kolekce('Dodavatel', ref => ref.where('název', '==', jméno)).valueChanges().subscribe (dodavatel => vyřešit (dodavatel))
    })
    }

5. Vytvořte další funkci s názvem getProductsFromSupplier(). Tento dotaz dotazuje databázi na Produkty spojené s konkrétním dodavatelem. Kromě toho dotaz také seřadí výsledky podle pole "na skladě" a zobrazí pouze první záznam v seznamu. Jinými slovy, vrátí produkt konkrétnímu dodavateli s nejnižším počtem „na skladě“.

   getProductsFromSupplier (supplierId: string) {
   vrátit seNovýSlib((vyřešit)=> {
    tato.db.kolekce('Produkt', ref => ref.where('dodavatelId', '==', dodavatelId).orderBy('na skladě').startAt (0).limit (1)).valueChanges().subscribe (product => vyřešit (produkt))
    })
    }

6. V src/app/app.component.ts soubor, importujte službu.

   import { Služba } z 'src/app/services/service';

7. Přidejte konstruktor do třídy AppComponent a přidejte službu do konstruktoru.

   konstruktér(soukromá služba: Služba) { }

8. Vytvořte novou funkci s názvem getProductStock(). Tato funkce vytiskne produkt s nejnižšími skladovými zásobami, které konkrétní dodavatel poskytuje. Ujistěte se, že voláte novou funkci v ngOnInit() a deklarujte proměnnou pro uložení výsledku.

   produkty: jakékoli;
   ngOnInit(): prázdnota {
   tento.getProductStock();
   }
   asynchronní getProductStock() {
   }

9. Uvnitř getProductStock() použijte dva dotazy ze souboru služeb. Pomocí prvního dotazu získáte záznam dodavatele na základě jména. Poté použijte dodavatelId jako argument pro druhý dotaz, který najde produkt od tohoto dodavatele s nejnižšími skladovými zásobami.

   nechat dodavatel = čekattento.service.getSupplier('Dodavatel uměleckých řemesel'); 
   tento.produkty = čekattento.service.getProductsFromSupplier (dodavatel[0].supplierId);

10. Vyjměte obsah v src/app/app.component.html soubor a nahraďte jej následujícím:

    <h2> Produkty s nejnižšími skladovými zásobami od "Dodavatel umění a řemesel"</h2>
    <div *ngFor="nechat položku produktů">
    <p> Jméno: {{item.name}} </str>
    <p> Číslo na skladě: {{item.inStock}} </str>
    <p> Cena: ${{item.price}} </str>
    </div>

11. Spusťte aplikaci ve webovém prohlížeči pomocí ng sloužit příkaz.

    ng sloužit

12. Otevřete svůj web pomocí libovolného webového prohlížeče. Ve výchozím nastavení Angular hostí aplikaci na localhost: 4200.
13. Vaše data se na obrazovce nezobrazí správně. Klikněte pravým tlačítkem na webovou stránku a klikněte na Kontrolovat otevřete vývojářské nástroje prohlížeče.
14. Přejděte na Řídicí panel tab. Zobrazí se chyba, která vás informuje, že dotaz bude vyžadovat index.

Jak vytvořit složený index pro váš dotaz

Firebase vytváří indexy pro dotazy, které mohou obsahovat více polí. Podle dokumentace Firebasefunguje jako mapa, takže Firebase může vyhledat umístění polí obsažených v dotazu.

1. V konzole klikněte na odkaz, který se zobrazí chyba.
2. Přihlaste se ke svému účtu Firebase.
3. Zobrazí se výzva k vytvoření indexu pro dotaz Firebase. Klikněte na Vytvořit index.
4. Firebase bude indexovat pole, která váš dotaz používá. Počkejte několik minut, dokud se stav nezmění z „Building“ na „Enabled“.
5. Obnovte svůj webový prohlížeč. Dotaz se spustí a vrátí správný výsledek na domovskou stránku. Pokud otevřete ladicí program konzoly pomocí vývojářských nástrojů prohlížeče, chyba by tam již být neměla.

Dotazování na vaši databázi Firebase

Firebase umožňuje vytvořit NoSQL databázi v cloudu. Tuto databázi pak můžete integrovat do aplikací Angular, které vyvíjíte. Můžete vytvořit různé typy dotazů pro ukládání, aktualizaci nebo odstraňování dat. Můžete také vytvořit dotaz, který používá více polí najednou.

Když vytvoříte dotaz, který používá více polí, pokus o jeho spuštění způsobí chybu. Kombinaci polí použitou v dotazu budete muset indexovat, aby ji Firebase mohla snadno vyhledat, kdykoli dotaz spustíte.

Můžete se také dozvědět o dalších způsobech nastavení databáze NoSQL, například jak nastavit databázi pomocí MongoDB.