So verwenden Sie komplexe Firebase-Abfragen in Angular

Eine der Funktionen von Firebase ist, dass Sie eine in der Cloud gespeicherte NoSQL-Datenbank erstellen können. Sie können diese Datenbank auch in Anwendungen integrieren, die Sie entwickeln, und Sie können Daten in der Datenbank speichern, aktualisieren und löschen.

Sie können die Firebase-Datenbank auch von Ihrer Angular-Anwendung aus abfragen. Firebase erfordert, dass Sie Feldkombinationen für eine Abfrage indizieren, die mehrere Felder verwendet. Dadurch kann Firebase sie einfach nachschlagen, wenn Sie die Abfrage zu einem anderen Zeitpunkt aufrufen.

Richten Sie Ihre Angular-App und Firebase-Datenbank ein

Bevor Sie Ihre Firebase-Abfragen schreiben, müssen Sie create eine Angular-Anwendung und eine Firebase-Datenbank. Sie müssen auch Ihre Angular-App konfigurieren, um eine Verbindung zu Ihrer Datenbank herzustellen.

1. Wenn Sie keine vorhandene Angular-Anwendung haben, können Sie die verwenden neu Befehl, um ein neues Projekt mit allen erforderlichen Angular-Dateien zu erstellen.

   ng NeuNeu-eckig-app

2. Ein... kreieren neue Firebase-Datenbank für die Angular-App indem Sie sich bei Firebase anmelden und den Eingabeaufforderungen folgen, um ein neues Firebase-Projekt zu erstellen.
3. Erstellen Sie in Ihrer neuen Cloud Firestore-Datenbank zwei Sammlungen (auch als Tabellen bezeichnet) für ein „Produkt“ und einen „Lieferanten“. Ein Lieferant kann mehrere Produkte liefern. Jedes Produkt ist auch über das Feld "supplierId" mit dem Lieferanten verbunden.
4. Geben Sie die folgenden Daten in die Tabelle "Produkt" ein. Geben Sie die Felder „name“, „productId“ und „supplierId“ als Zeichenfolgen ein. Geben Sie die Felder Preis und Lagerbestand als Zahlen ein.

   Dokument Identifikation	Felder
   Produkt1	Name: "Bänder" Preis: 12,99 auf Lager: 10 Produkt-ID: "P1" Lieferanten-ID: "S1"
   Produkt2	Name: "Ballons" Preis: 1,5 vorrätig: 2 Produkt-ID: "P2" Lieferanten-ID: "S1"
   Produkt3	Name: "Papier" Preis: 2,99 Lagerbestand: 20 Produkt-ID: "P3" Lieferanten-ID: "S1"
   Produkt4	Name: "Tabelle" Preis: 199 vorrätig: 1 Produkt-ID: "P4" Lieferanten-ID: "S2"

   Hier ist ein Beispiel, das zeigt, wie das aussehen sollte:
5. Tragen Sie folgende Daten in die Tabelle „Lieferant“ ein. Geben Sie alle Felder als Zeichenfolgen ein.

   Dokument Identifikation	Felder
   Lieferant1	Name: "Kunst- und Handwerkslieferant" Ort: "Kalifornien, USA" Lieferanten-ID: "S1"
   Lieferant2	Name: "Erstaunliche Tische" Standort: „Sydney, Australien“ Lieferanten-ID: "S2"

   So sollte der Eintrag supplier1 aussehen:
6. Installieren eckig/Feuer in Ihre App.

   npm ich @eckig/fire

7. Öffnen Sie in Firebase die Projekt Einstellungen. Klicken Sie auf das Logo in spitzen Klammern, um Firebase zu Ihrer Angular-Anwendung hinzuzufügen.
8. Firebase stellt Ihnen Konfigurationsdetails zur Verfügung, mit denen Sie Ihre Angular-App mit der Firebase-Datenbank verbinden können.
9. Ersetzen Sie den Inhalt in Umgebungen/Umgebung.ts mit folgendem Code. Sie müssen die Werte darin ändern firebaseConfig. Ändern Sie diese so, dass sie der Konfiguration entsprechen, die Firebase Ihnen im vorherigen Schritt bereitgestellt hat.

   Exportkonst Umgebung = {
    Produktion: FALSCH,
    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:Netz:9557bfef800caa5cdaf6e1"
    }
   };

10. Importieren Sie die Umgebung von oben zusammen mit den Angular Firebase-Modulen in src/app/app.module.ts.

    importieren { Umgebung } aus "../umgebungen/umgebung";
    importieren {AngularFireModule} aus '@angular/fire/compat';
    importieren {AngularFirestoreModule} aus "@angular/fire/compat/firestore";

11. Fügen Sie die Firebase-Module zum imports-Array hinzu:

    AngularFirestoreModul,
    AngularFireModul.initializeApp(Umgebung.firebaseConfig)

So schreiben Sie eine komplexe Firebase-Abfrage in eine Dienstdatei

Sie können Tabellen in Ihrer Firebase-Datenbank mithilfe einer Dienstdatei abfragen.

1. Erstellen Sie einen neuen Ordner mit dem Namen „Dienste“. Erstellen Sie in dem Ordner eine neue Datei mit dem Namen "service.ts".
2. Fügen Sie den Import, den Konstruktor und die Klasse von AngularFirestore zur Datei hinzu.

   importieren {Injizierbar} aus '@eckig/Kern';
   importieren {AngularFirestore} aus '@angular/fire/compat/firestore';
   @ Injizierbar({
    bereitgestellt in: 'Wurzel'
   })
   ExportKlasseService{
   Konstrukteur(private Datenbank: AngularFirestore) { }
   }

3. Listen Sie in diesem Abfragebeispiel die Produkte basierend auf dem Namen eines Lieferanten auf. Filtern Sie außerdem die Liste so, dass nur der Artikel mit dem niedrigsten Bestand angezeigt wird. Da Firebase keine rationale Datenbank ist, müssen wir die beiden separaten Tabellen mit mehr als einer Abfrage abfragen.
4. Erstellen Sie dazu eine neue Funktion mit dem Namen getLieferant(), um die erste Abfrage zu verarbeiten. Die Funktion gibt die Zeile in der Tabelle "Supplier" zurück, die mit dem Namen übereinstimmt.

   getSupplier (Name: Zeichenkette) {
   RückkehrNeuVersprechen((Auflösung)=> {
    this.db.collection('Anbieter', Bezug => ref. wo ('Name', '==', Name)).valueChanges().subscribe (Lieferant => lösen (Lieferant))
    })
    }

5. Erstellen Sie eine weitere Funktion namens getProductsFromSupplier(). Diese Abfrage fragt die Datenbank nach Produkten ab, die einem bestimmten Lieferanten zugeordnet sind. Darüber hinaus ordnet die Abfrage die Ergebnisse auch nach dem Feld „inStock“ und zeigt nur den ersten Datensatz in der Liste an. Mit anderen Worten, es wird das Produkt für einen bestimmten Lieferanten mit der niedrigsten „inStock“-Zahl zurückgegeben.

   getProductsFromSupplier (Lieferanten-ID: Zeichenfolge) {
   RückkehrNeuVersprechen((Auflösung)=> {
    this.db.collection('Produkt', Bezug => ref. wo ('Lieferanten ID', '==', Lieferanten-ID).orderBy('auf Lager').startAt (0).limit (1)).valueChanges().subscribe (Produkt => lösen (Produkt))
    })
    }

6. In dem src/app/app.component.ts Datei, importieren Sie den Dienst.

   importieren { Service } aus 'src/app/services/service';

7. Fügen Sie einen Konstruktor innerhalb der AppComponent-Klasse hinzu, und fügen Sie den Dienst dem Konstruktor hinzu.

   Konstrukteur(privater Dienst: Service) { }

8. Erstellen Sie eine neue Funktion namens getProductStock(). Diese Funktion druckt das Produkt mit dem niedrigsten Bestand, das ein bestimmter Lieferant anbietet. Stellen Sie sicher, dass Sie die neue Funktion in der aufrufen ngOnInit() Funktion und deklarieren Sie eine Variable zum Speichern des Ergebnisses.

   Produkte: alle;
   ngOnInit(): Leere {
   Dies.getProductStock();
   }
   asynchron getProductStock() {
   }

9. Im Inneren des getProductStock() verwenden Sie die beiden Abfragen aus der Datei services. Verwenden Sie die erste Abfrage, um den Datensatz eines Lieferanten basierend auf dem Namen abzurufen. Verwenden Sie dann die supplierId als Argument für die zweite Abfrage, die das Produkt dieses Lieferanten mit dem niedrigsten Bestand findet.

   Lassen Lieferant = erwartenDies.service.getSupplier('Kunst- und Handwerkslieferant'); 
   Dies.Produkte = erwartenDies.service.getProductsFromSupplier (Lieferant[0].Lieferanten ID);

10. Entfernen Sie den Inhalt in der src/app/app.component.html Datei, und ersetzen Sie sie durch Folgendes:

    <h2> Produkte mit dem niedrigsten Lagerbestand von "Kunsthandwerkslieferant"</h2>
    <div *ngFor="Artikel von Produkten lassen">
    <p> Name: {{item.name}} </p>
    <p> Anzahl auf Lager: {{item.inStock}} </p>
    <p> Preis: ${{item.price}} </p>
    </div>

11. Führen Sie die Anwendung in einem Webbrowser mit dem aus ng dienen Befehl.

    ng dienen

12. Öffnen Sie Ihre Website mit einem beliebigen Webbrowser. Standardmäßig hostet Angular die Anwendung unter lokaler Host: 4200.
13. Ihre Daten werden nicht korrekt auf dem Bildschirm angezeigt. Klicken Sie mit der rechten Maustaste auf die Webseite und klicken Sie auf Prüfen , um die Entwicklertools Ihres Browsers zu öffnen.
14. Navigieren Sie zu Konsole Tab. Ein Fehler wird angezeigt, um Sie darüber zu informieren, dass die Abfrage einen Index erfordert.

So erstellen Sie einen zusammengesetzten Index für Ihre Abfrage

Firebase erstellt Indizes für Abfragen, die mehrere Felder enthalten können. Laut dem Firebase-Dokumentation, fungiert dies als Karte, sodass Firebase die Position der in der Abfrage enthaltenen Felder nachschlagen kann.

1. Klicken Sie in der Konsole auf den Link, den der Fehler anzeigt.
2. Melden Sie sich bei Ihrem Firebase-Konto an.
3. Es wird eine Eingabeaufforderung angezeigt, in der Sie aufgefordert werden, einen Index für die Firebase-Abfrage zu erstellen. Klicke auf Index erstellen.
4. Firebase indiziert die Felder, die Ihre Abfrage verwendet. Warten Sie einige Minuten, bis sich der Status von „Building“ auf „Enabled“ ändert.
5. Aktualisieren Sie Ihren Webbrowser. Die Abfrage wird ausgeführt und gibt das richtige Ergebnis auf der Startseite zurück. Wenn Sie den Konsolen-Debugger mit den Entwicklertools Ihres Browsers öffnen, sollte der Fehler nicht mehr vorhanden sein.

Abfragen Ihrer Firebase-Datenbank

Mit Firebase können Sie eine NoSQL-Datenbank in der Cloud erstellen. Sie können diese Datenbank dann in Angular-Anwendungen integrieren, die Sie entwickeln. Sie können verschiedene Arten von Abfragen erstellen, um Daten zu speichern, zu aktualisieren oder zu löschen. Sie können auch eine Abfrage erstellen, die mehrere Felder gleichzeitig verwendet.

Wenn Sie eine Abfrage erstellen, die mehrere Felder verwendet, führt der Versuch, sie auszuführen, zu einem Fehler. Sie müssen die in der Abfrage verwendete Feldkombination indizieren, damit Firebase sie bei jeder Ausführung der Abfrage problemlos nachschlagen kann.

Sie können auch andere Möglichkeiten zum Einrichten einer NoSQL-Datenbank kennenlernen, z. B. das Einrichten einer Datenbank mit MongoDB.