Az összetett Firebase-lekérdezések használata Angularban

A Firebase egyik funkciója, hogy létrehozhat egy felhőben tárolt NoSQL-adatbázist. Ezt az adatbázist az általa fejlesztett alkalmazásokba is integrálhatja, és adatokat tárolhat, frissíthet és törölhet az adatbázison belül.

A Firebase adatbázist az Angular alkalmazásból is lekérdezheti. A Firebase megköveteli a mezőkombinációk indexelését a több mezőt használó lekérdezéshez. Ez lehetővé teszi a Firebase számára, hogy könnyedén megkeresse őket, amikor egy másik időpontban felhívja a lekérdezést.

Állítsa be az Angular alkalmazást és a Firebase adatbázist

Mielőtt megírná a Firebase-lekérdezéseket, létre kell hoznia egy szögletes alkalmazás és egy Firebase adatbázis. Az Angular alkalmazást is konfigurálnia kell az adatbázishoz való csatlakozáshoz.

1. Ha nem rendelkezik már meglévő Angular alkalmazással, használhatja a
   instagram viewer
   új parancsot egy új projekt létrehozásához az összes szükséges Angular fájllal.

   ng újúj-szögletes app

2. Hozzon létre egy új Firebase-adatbázis az Angular alkalmazáshoz jelentkezzen be a Firebase-be, és kövesse az utasításokat egy új Firebase-projekt létrehozásához.
3. Az új Cloud Firestore-adatbázisban hozzon létre két gyűjteményt (más néven táblázatokat) egy „Termék” és egy „Beszállító” számára. Egy szállító több terméket is szállíthat. Minden termék a szállítóhoz is kapcsolódik a „supplierId” mező segítségével.
4. Írja be a következő adatokat a "Termék" táblázatba. Írja be a nevet, a termékazonosítót és a beszállítóazonosító mezőket karakterláncként. Írja be az árat és a raktáron lévő mezőket számként.

   Dokumentumazonosító	Mezők
   termék1	név: "szalagok" ár: 12.99 Raktáron: 10 termékazonosító: "P1" szállítóazonosító: "S1"
   termék2	név: "Léggömbök" ár: 1.5 Raktáron: 2 termékazonosító: "P2" szállítóazonosító: "S1"
   termék3	név: "Papír" ár: 2.99 Raktáron: 20 termékazonosító: "P3" szállítóazonosító: "S1"
   termék4	név: "Asztal" ára: 199 Raktáron: 1 termékazonosító: "P4" szállítóazonosító: "S2"

   Íme egy példa, amely bemutatja, hogyan kell kinéznie:
5. Írja be a következő adatokat a "Beszállító" táblázatba. Írja be az összes mezőt karakterláncként.

   Dokumentumazonosító	Mezők
   szállító1	név: "Művészeti és kézműves beszállító" Helyszín: "Kalifornia, USA" szállítóazonosító: "S1"
   szállító2	név: "Csodálatos asztalok" Helyszín: "Sydney, Ausztrália" szállítóazonosító: "S2"

   Így kell kinéznie a beszállító1 bejegyzésnek:
6. Telepítés szögletes/tűz az alkalmazásodba.

   npm i @szögletes/fire

7. A Firebase-ben nyissa meg a Projektbeállítások. Kattintson a szögletes zárójelre, hogy hozzáadja a Firebase-t Angular alkalmazásához.
8. A Firebase megadja a konfigurációs részleteket, amelyek segítségével összekapcsolhatja Angular alkalmazását a Firebase-adatbázissal.
9. Cserélje ki a tartalmat környezetek/környezet.ts a következő kóddal. Módosítania kell az értékeken belül firebaseConfig. Módosítsa ezeket, hogy megfeleljenek a Firebase előző lépésben megadott konfigurációjának.

   exportconst környezet = {
    Termelés: hamis,
    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álja felülről a környezetet az Angular Firebase modulokkal együtt src/app/app.module.ts.

    import { környezet } tól től "../environments/environment";
    import { AngularFireModule } tól től '@angular/fire/compat';
    import { AngularFirestoreModule } tól től "@angular/fire/compat/firestore";

11. Adja hozzá a Firebase modulokat az importálási tömbhöz:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(környezet.firebaseConfig)

Összetett Firebase-lekérdezés írása szolgáltatásfájlban

A Firebase-adatbázisban lévő táblákat szolgáltatásfájl használatával kérdezheti le.

1. Hozzon létre egy új mappát "szolgáltatások" néven. A mappán belül hozzon létre egy új fájlt "service.ts" néven.
2. Adja hozzá az AngularFirestore importálást, konstruktort és osztályt a fájlhoz.

   import { Injekciós } tól től '@szögletes/mag';
   import { AngularFirestore } tól től '@angular/fire/compat/firestore';
   @Injektálható({
    feltéve: 'gyökér'
   })
   exportosztálySzolgáltatás{
   konstruktőr(privát db: AngularFirestore) { }
   }

3. Ebben a lekérdezési példában listázza ki a termékeket a beszállító neve alapján. Ezenkívül szűrje le a listát, hogy csak a legalacsonyabb készlettel rendelkező cikk jelenjen meg. Mivel a Firebase nem racionális adatbázis, a két különálló táblát egynél több lekérdezéssel kell lekérdeznünk.
4. Ehhez hozzon létre egy új, nevű függvényt getSupplier(), az első lekérdezés kezeléséhez. A függvény a „Beszállító” táblázatban a névnek megfelelő sort adja vissza.

   getSupplier (név: string) {
   VisszatérésújÍgéret((megold)=> {
    this.db.collection('Támogató', ref => ref.where('név', '==', név)).valueChanges().subscribe (szállító => megoldani (szállító))
    })
    }

5. Hozzon létre egy másik nevű függvényt getProductsFromSupplier(). Ez a lekérdezés lekérdezi az adatbázist egy adott szállítóhoz társított termékekről. Ezenkívül a lekérdezés az "inStock" mező alapján is rendezi az eredményeket, és csak az első rekordot jeleníti meg a listán. Más szóval, visszaküldi a terméket egy adott szállítóhoz, a legalacsonyabb "inStock" számmal.

   getProductsFromSupplier (supplierId: string) {
   VisszatérésújÍgéret((megold)=> {
    this.db.collection('Termék', ref => ref.where('beszállítói azonosító', '==', SupplierId).orderBy('raktáron').startAt (0).limit (1)).valueChanges().subscribe (termék => megoldani (termék))
    })
    }

6. Ban,-ben src/app/app.component.ts fájlt, importálja a szolgáltatást.

   import { Szolgáltatás } tól től 'src/app/services/service';

7. Adjon hozzá egy konstruktort az AppComponent osztályon belül, és adja hozzá a szolgáltatást a konstruktorhoz.

   konstruktőr(magánszolgáltatás: szolgáltatás) { }

8. Hozzon létre egy új függvényt, melynek neve getProductStock(). Ez a funkció az adott szállító által biztosított legalacsonyabb raktárkészlettel nyomtatja ki a terméket. Ügyeljen arra, hogy az új függvényt a ngOnInit() függvényt, és deklaráljon egy változót az eredmény tárolására.

   termékek: bármilyen;
   ngOnInit(): üres {
   ez.getProductStock();
   }
   async getProductStock() {
   }

9. Benne getProductStock() függvényt, használja a két lekérdezést a szolgáltatások fájlból. Használja az első lekérdezést egy szállító rekordjának lekéréséhez a név alapján. Ezután használja a beszállítóazonosítót argumentumként a második lekérdezéshez, amely az adott szállítótól származó, legalacsonyabb raktárkészlettel rendelkező terméket találja meg.

   hagyja szállító = várjákez.service.getSupplier('Művészet és kézműves beszállító'); 
   ez.termékek = várjákez.service.getProductsFromSupplier (szállító[0].supplierId);

10. Távolítsa el a tartalmat a src/app/app.component.html fájlt, és cserélje ki a következőre:

    <h2> A legalacsonyabb raktárkészlettel rendelkező termékek -tól "Művészeti és kézműves beszállító"</h2>
    <div *ngFor="árucikk">
    <p> Név: {{elem.név}} </p>
    <p> Raktáron lévő szám: {{item.inStock}} </p>
    <p> Ár: ${{item.price}} </p>
    </div>

11. Futtassa az alkalmazást egy webböngészőben a ng szolgálni parancs.

    ng szolgálni

12. Nyissa meg webhelyét bármely webböngészővel. Alapértelmezés szerint az Angular a következő helyen tárolja az alkalmazást localhost: 4200.
13. Az adatok nem jelennek meg megfelelően a képernyőn. Kattintson a jobb gombbal a weboldalra, majd kattintson a gombra Vizsgálja meg a böngésző fejlesztői eszközeinek megnyitásához.
14. Navigáljon a Konzol lapon. Hibaüzenet jelenik meg, jelezve, hogy a lekérdezéshez indexre lesz szükség.

Összetett index létrehozása a lekérdezéshez

A Firebase indexeket hoz létre a több mezőt tartalmazó lekérdezésekhez. Szerint a Firebase dokumentáció, ez térképként működik, így a Firebase meg tudja keresni a lekérdezésben szereplő mezők helyét.

1. A konzolban kattintson a hibaüzenetet megjelenítő hivatkozásra.
2. Jelentkezzen be Firebase-fiókjába.
3. Megjelenik egy kérdés, amely arra kéri, hogy hozzon létre indexet a Firebase-lekérdezéshez. Kattintson Index létrehozása.
4. A Firebase indexeli a lekérdezés által használt mezőket. Várjon néhány percet, amíg az állapot „Épület”-ről „Engedélyezve” állapotra vált.
5. Frissítse webböngészőjét. A lekérdezés lefut, és a megfelelő eredményt adja vissza a kezdőlapon. Ha megnyitja a konzol hibakeresőjét a böngésző fejlesztői eszközeivel, akkor a hiba már nem jelenhet meg.

A Firebase-adatbázis lekérdezése

A Firebase lehetővé teszi NoSQL-adatbázis létrehozását a felhőben. Ezt az adatbázist ezután integrálhatja a fejlesztés alatt álló Angular alkalmazásokba. Különféle típusú lekérdezéseket hozhat létre adatok tárolására, frissítésére vagy törlésére. Létrehozhat olyan lekérdezést is, amely egyszerre több mezőt használ.

Ha több mezőt használó lekérdezést hoz létre, a futtatási kísérlet hibát fog eredményezni. Indexelnie kell a lekérdezésben használt mezőkombinációt, hogy a Firebase könnyen megkereshesse a lekérdezés futtatásakor.

Megtudhatja a NoSQL-adatbázis beállításának egyéb módjait is, például arról, hogyan állíthat be adatbázist a MongoDB használatával.