Complexe Firebase-query's in Angular gebruiken

Een van de kenmerken van Firebase is dat u een NoSQL-database kunt maken die in de cloud is opgeslagen. U kunt deze database ook integreren in toepassingen die u ontwikkelt, en u kunt gegevens in de database opslaan, bijwerken en verwijderen.

U kunt de Firebase-database ook opvragen vanuit uw Angular-toepassing. Firebase vereist dat u veldcombinaties indexeert voor een query die meerdere velden gebruikt. Hierdoor kan Firebase ze gemakkelijk opzoeken wanneer u de query op een ander tijdstip aanroept.

Stel uw Angular-app en Firebase-database in

Voordat u uw Firebase-query's schrijft, moet u een een hoektoepassing en een Firebase-database. U moet ook uw Angular-app configureren om verbinding te maken met uw database.

1. Als u geen bestaande Angular-toepassing heeft, kunt u de ng nieuw commando om een ​​nieuw project te maken met alle benodigde Angular-bestanden.
   instagram viewer

   ng nieuwenieuwe-hoekige-app

2. Maak een nieuwe Firebase-database voor de Angular-app door u aan te melden bij Firebase en de aanwijzingen te volgen om een ​​nieuw Firebase-project te maken.
3. Maak in uw nieuwe Cloud Firestore Database twee verzamelingen (ook wel tabellen genoemd) voor een "Product" en een "Leverancier". Een leverancier kan meerdere producten leveren. Elk product is ook verbonden met de leverancier via het veld "supplierId".
4. Voer de volgende gegevens in de tabel "Product" in. Voer de velden naam, product-ID en leverancier-ID in als tekenreeksen. Voer de velden prijs en inStock in als getallen.

   Document-ID	Velden
   product1	naam: "linten" prijs: 12,99 op voorraad: 10 product-ID: "P1" leverancier-ID: "S1"
   product2	naam: "Ballonnen" prijs: 1.5 op voorraad: 2 product-ID: "P2" leverancier-ID: "S1"
   product3	naam: "Papier" prijs: 2.99 op voorraad: 20 product-ID: "P3" leverancier-ID: "S1"
   product4	naam: "Tafel" prijs: 199 op voorraad: 1 product-ID: "P4" leverancier-ID: "S2"

   Hier is een voorbeeld dat laat zien hoe dit eruit zou moeten zien:
5. Vul de volgende gegevens in de tabel "Leverancier" in. Voer alle velden in als tekenreeksen.

   Document-ID	Velden
   leverancier1	naam: "Kunsten en Ambachten Leverancier" locatie: "Californië, VS" leverancier-ID: "S1"
   leverancier2	naam: "Geweldige Tafels" locatie: "Sydney, Australië" leverancier-ID: "S2"

   Dit is hoe de invoer van leverancier1 eruit zou moeten zien:
6. Installeren hoekig/vuur in uw app.

   npm ik @hoekig/fire

7. Open in Firebase de Projectinstellingen. Klik op het logo van de punthaken om Firebase toe te voegen aan uw Angular-toepassing.
8. Firebase geeft u configuratiegegevens die u kunt gebruiken om uw Angular-app te verbinden met de Firebase-database.
9. Vervang de inhoud in omgevingen/omgeving.ts met de volgende code. U moet de waarden wijzigen binnen firebaseConfig. Wijzig deze zodat ze overeenkomen met de configuratie die Firebase u in de vorige stap heeft verstrekt.

   exporterenconst omgeving = {
    productie: vals,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBianDlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase-query's",
    storageBucket: "muo-firebase-queries.appspot.com",
    messagingSenderId: "569911365044",
    app-ID: "1:569911365044:web:9557bfef800caa5cdaf6e1"
    }
   };

10. Importeer de omgeving van bovenaf, samen met de Angular Firebase-modules in src/app/app.module.ts.

    importeren { omgeving } van "../omgeving/omgeving";
    importeren {AngularFireModule} van '@hoekig/vuur/compat';
    importeren {AngularFirestoreModule} van "@angular/fire/compat/firestore";

11. Voeg de Firebase-modules toe aan de importarray:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(omgeving.firebaseConfig)

Een complexe Firebase-query schrijven in een servicesbestand

U kunt tabellen in uw Firebase-database doorzoeken met behulp van een servicesbestand.

1. Maak een nieuwe map met de naam "services". Maak in de map een nieuw bestand met de naam "service.ts".
2. Voeg de import, constructor en klasse van AngularFirestore toe aan het bestand.

   importeren { Injecteerbaar } van '@hoekig/kern';
   importeren { AngularFirestore } van '@hoekig/vuur/compat/firestore';
   @Injectable({
    Voorzien in: 'wortel'
   })
   exporterenklasOnderhoud{
   constructeur(privé db: AngularFirestore) { }
   }

3. In dit queryvoorbeeld geeft u de producten weer op basis van de naam van een leverancier. Filter bovendien de lijst om alleen het artikel met de laagste voorraad weer te geven. Omdat Firebase geen rationele database is, moeten we de twee afzonderlijke tabellen doorzoeken met meer dan één query.
4. Maak hiervoor een nieuwe functie aan met de naam getSupplier(), om de eerste query af te handelen. De functie retourneert de rij in de tabel "Leverancier" die overeenkomt met de naam.

   getSupplier (naam: string) {
   opbrengstnieuweBelofte((oplossen)=> {
    deze.db.collectie('Leverancier', ref => ref.waar('naam', '==', naam)).valueChanges().subscribe (leverancier => oplossen (leverancier))
    })
    }

5. Maak een andere functie genaamd getProductsFromSupplier(). Deze query doorzoekt de database voor Producten die zijn gekoppeld aan een bepaalde leverancier. Bovendien ordent de query resultaten ook op het veld "inStock" en geeft alleen het eerste record op de lijst weer. Met andere woorden, het retourneert het product voor een bepaalde leverancier, met het laagste aantal "op voorraad".

   getProductsFromSupplier (supplierId: string) {
   opbrengstnieuweBelofte((oplossen)=> {
    deze.db.collectie('Product', ref => ref.waar('Leverancier ID', '==', leverancier-ID).orderBy('op voorraad').startAt (0).limiet (1)).valueChanges().subscribe (product => oplossen (product))
    })
    }

6. In de src/app/app.component.ts bestand, importeer de service.

   importeren { Onderhoud } van 'src/app/diensten/dienst';

7. Voeg een constructor toe binnen de AppComponent-klasse en voeg de service toe aan de constructor.

   constructeur(privédienst: Dienst) { }

8. Maak een nieuwe functie met de naam getProductStock(). Deze functie drukt het product af met de laagste voorraad die een bepaalde leverancier levert. Zorg ervoor dat u de nieuwe functie aanroept in de ngOnInit() functie, en declareer een variabele om het resultaat op te slaan.

   producten: alle;
   ngOnInit(): leegte {
   deze.getProductStock();
   }
   asynchrone getProductStock() {
   }

9. Binnen in de getProductStock() functie, gebruikt u de twee query's uit het services-bestand. Gebruik de eerste query om het record van een leverancier op basis van de naam te krijgen. Gebruik vervolgens de supplierId als argument voor de tweede zoekopdracht, die het product van die leverancier met de laagste voorraad zal vinden.

   laten leverancier = wachtendeze.service.getSupplier('Arts and Crafts Supplier'); 
   deze.producten = wachtendeze.service.getProductsFromSupplier (leverancier[0].Leverancier ID);

10. Verwijder de inhoud in de src/app/app.component.html bestand en vervang het door het volgende:

    <h2> Producten met de laagste voorraad vanaf "Leverancier van kunstnijverheid"</h2>
    <div *ngFor="laat item van producten">
    <p> Naam: {{item.name}} </p>
    <p> Aantal op voorraad: {{item.inStock}} </p>
    <p> Prijs: ${{item.price}} </p>
    </div>

11. Voer de applicatie uit in een webbrowser met behulp van de ng serveren opdracht.

    ng serveren

12. Open uw website met een willekeurige webbrowser. Standaard host Angular de applicatie op localhost: 4200.
13. Uw gegevens worden niet correct op het scherm weergegeven. Klik met de rechtermuisknop op de webpagina en klik op Inspecteren om de ontwikkelaarstools van uw browser te openen.
14. Navigeer naar de Troosten tabblad. Er wordt een foutmelding weergegeven om u te laten weten dat de query een index vereist.

Een samengestelde index voor uw zoekopdracht maken

Firebase maakt indexen voor query's die meerdere velden kunnen bevatten. Volgens de Firebase-documentatie, fungeert dit als een kaart, zodat Firebase de locatie van de velden in de query kan opzoeken.

1. Klik in de console op de link die de fout weergeeft.
2. Meld u aan bij uw Firebase-account.
3. Er wordt een prompt weergegeven waarin u wordt gevraagd een index voor de Firebase-query te maken. Klik op Index maken.
4. Firebase indexeert de velden die door uw zoekopdracht worden gebruikt. Wacht een paar minuten totdat de status verandert van "Gebouw" in "Ingeschakeld".
5. Vernieuw uw webbrowser. De zoekopdracht wordt uitgevoerd en geeft het juiste resultaat op de startpagina. Als u de console-foutopsporing opent met de ontwikkelaarstools van uw browser, zou de fout er niet meer moeten zijn.

Uw Firebase-database opvragen

Met Firebase kunt u een NoSQL-database in de cloud maken. U kunt die database vervolgens integreren in Angular-applicaties die u aan het ontwikkelen bent. U kunt verschillende typen query's maken om gegevens op te slaan, bij te werken of te verwijderen. U kunt ook een query maken die meerdere velden tegelijk gebruikt.

Wanneer u een query maakt die meerdere velden gebruikt, zal een fout optreden als u deze probeert uit te voeren. U moet de veldcombinatie die in de query wordt gebruikt, indexeren, zodat Firebase deze gemakkelijk kan opzoeken wanneer u de query uitvoert.

U kunt ook leren over andere manieren om een ​​NoSQL-database op te zetten, zoals het opzetten van een database met MongoDB.