So speichern, aktualisieren, löschen und rufen Sie Daten aus einer Firebase-Datenbank mit Angular ab

Firebase ist eine Plattform, die Ihnen eine Vielzahl von Diensten zur Verfügung stellt, die Sie beim Erstellen und Skalieren einer Anwendung unterstützen. Einige dieser Funktionen umfassen Hosting-Dienste, Datenspeicherung und die Möglichkeit, Datenanalysen zu verfolgen.

Dieses Tutorial konzentriert sich hauptsächlich auf das Erstellen und Hinzufügen von Daten zu einer Firebase-Datenbank und das Ausführen von Erstellungs-, Lese-, Schreib- und Löschvorgängen in der Datenbank von einer lokalen Angular-Anwendung.

So erstellen Sie Daten und fügen sie einer Firebase-Datenbank hinzu

Angenommen, Sie haben bereits eine Angular-Anwendung eingerichtet und lokal ausgeführt, muss sie mit einer Firebase-Datenbank verbunden werden, um Daten zu speichern und darauf zuzugreifen. Wenn Sie mit Angular nicht vertraut sind, können Sie mehr darüber lesen Angular-Konzepte, Komponenten und die Gesamtstruktur eines Angular-Projekts.

Wenn Sie noch keine Firebase-Datenbank haben, können Sie sich mit Ihren Google-Kontodaten bei Firebase anmelden und den Anweisungen folgen. Sobald dies eingerichtet ist, erstellen Sie ein Projekt:

1. Von Homepage von Firebase, auswählen Gehen Sie zur Konsole in der oberen rechten Ecke der Website.
2. Wählen Sie unter "Ihre Firebase-Projekte" aus Projekt hinzufügen.
3. Folgen Sie den Anweisungen, um ein neues Projekt zu erstellen.
4. Nach Abschluss wird das Projekt geöffnet. Auf der linken Seite des Bildschirms befindet sich ein Bereich, in dem die Funktionen aufgeführt sind, die Firebase bietet. Bewegen Sie den Mauszeiger über die Symbole, bis Sie sehen Firestore-Datenbank, und wählen Sie es aus.
5. Auswählen Datenbank erstellen, und folgen Sie den Anweisungen, um eine Datenbank zu erstellen.
6. Wählen Sie bei der Auswahl der Sicherheitsregeln aus Starten Sie im Testmodus. Dies kann später geändert werden, um sicherzustellen, dass die Daten sicherer sind. Weitere Informationen zu den Firestore-Sicherheitsregeln finden Sie im Folgenden Firebase-Dokumentation.
7. Nach Abschluss wird die Datenbank geöffnet. Die Datenbankstruktur verwendet Sammlungen, was im Wesentlichen das gleiche Konzept wie Datenbanktabellen ist. Wenn Sie beispielsweise zwei Tabellen benötigen, eine zum Speichern von Kontoinformationen und eine zum Speichern von Benutzerinformationen, würden Sie zwei Sammlungen namens Account und User erstellen.
8. Auswählen Sammlung starten und fügen Sie eine Sammlungs-ID namens "Benutzer" hinzu.
9. Fügen Sie den ersten Datensatz mit Informationen zu einem Benutzer hinzu. Klicke auf Feld hinzufügen um drei neue Felder hinzuzufügen: firstName (String), lastName (String) und vipMember (boolean). Die Dokument-ID kann automatisch generiert werden.
10. Klicken Speichern.
11. Um weitere Datensätze zur Sammlung „Benutzer“ hinzuzufügen, klicken Sie auf Dokument hinzufügen (Dokument hinzufügen entspricht dem Hinzufügen eines neuen Datensatzes oder Benutzers). Fügen Sie vier weitere Benutzer mit denselben drei Feldern hinzu.

Die Datenbank ist nun mit einigen Testdaten eingerichtet.

So integrieren Sie Firebase in Ihre Angular-Anwendung

Um auf diese Daten in Ihrer lokalen Angular-Anwendung zuzugreifen, konfigurieren Sie zunächst einige App-Einstellungen, um eine Verbindung zur Firebase-Datenbank herzustellen:

1. Gehen Sie in Firebase zum linken Bereich und klicken Sie auf Projektübersicht.
2. Wähle aus Netz Schaltfläche (angezeigt durch spitze Klammern).
3. Registrieren Sie Ihre lokale App, indem Sie den Namen der App hinzufügen.
4. Installieren Sie Firebase in Ihrer lokalen Angular-Anwendung.

   npm i firebase
   

5. Firebase zeigt dann einige Konfigurationsdetails an. Speichern Sie diese Angaben und klicken Sie auf Fahren Sie mit der Konsole fort.
6. Kopieren Sie basierend auf den im vorherigen Schritt bereitgestellten Details den folgenden Code in „environment.prod.ts“ und „environment.ts“ in der Angular-Anwendung.

   konstante Umgebung exportieren = {
    Produktion: wahr,
    firebaseConfig: {
    apiKey: "dein-api-schlüssel",
    authDomain: "Ihre-Auth-Domain",
    projectId: "Ihre-Projekt-ID",
    storageBucket: "dein-speicher-buckey",
    MessagingSenderId: "Ihre-Messaging-Absender-ID",
    appId: "Ihre-API-ID",
    Messungs-ID: "Ihre-Messungs-ID"
    }
   };
   

7. AngularFirestore von @angular/fire/firestore wird verwendet, um Firebase in Angular zu konfigurieren. Beachten Sie, dass AngularFirestore nicht mit Angular Version 9 und höher kompatibel ist. Führen Sie in der lokalen Angular-App Folgendes aus:

   npm i @eckig/feuer
   

8. Fügen Sie die Firestore- und Umgebungsmodule zum Importabschnitt in app.module.ts hinzu.

   importiere { AngularFireModule } aus "@angular/fire";
   importiere { AngularFirestoreModule } aus "@angular/fire/firestore";
   importiere {Umgebung} aus "../Umgebungen/Umgebung";
   

9. Die Firestore-Module müssen auch in das imports-Array in app.module.ts aufgenommen werden.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModul,

So rufen Sie Daten von Firebase mit einem Dienst ab

Es ist normalerweise eine gute Praxis, einen oder mehrere zu haben services.ts Dateien, die Sie verwenden, um speziell mit der Datenbank zu interagieren. Die Funktionen, die Sie der Servicedatei hinzufügen, können dann in anderen TypeScript-Dateien, Seiten oder anderen Komponenten in der gesamten Anwendung aufgerufen werden.

1. Erstellen Sie eine Datei namens service.ts in der src/app/services Mappe.
2. Fügen Sie das AngularFirestore-Modul zum Abschnitt imports hinzu und schließen Sie es in den Konstruktor ein.

   importiere {injizierbare} aus '@angular/core';
   importiere { AngularFirestore } aus '@angular/fire/firestore';
   @Injizierbar({
    bereitgestelltIn: 'root'
   })
   Exportklasse Dienst {
    Konstruktor (private Datenbank: AngularFirestore) { }
   }
   

3. Fügen Sie eine Funktion hinzu, die ein Promise zurückgibt, das eine Liste aller Benutzer enthält. "this.db.collection('Benutzer')" bezieht sich auf die Sammlung "Benutzer" in der Datenbank.

   getAllUsers() {
    neues Versprechen zurückgeben((Auflösung)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (users => resolve (users));
    })
   }
   

4. Um diese Funktion in einer anderen TypeScript-Datei zu verwenden, importieren Sie den neuen Dienst und fügen ihn dem Konstruktor hinzu.

   import { Service } from 'src/app/services/service
   Konstruktor (privater Dienst: Service) {}
   

5. Rufen Sie die Liste aller Benutzer mit der in der Dienstedatei erstellten Funktion ab.

   async getUsers() {
    this.allUsers = warte auf this.service.getAllUsers();
    console.log (this.allUsers);
   }
   

So fügen Sie der Firebase-Datenbank einen neuen Datensatz hinzu

Fügen Sie der Firebase-Datenbank einen neuen Datensatz für einen Benutzer hinzu.

1. Fügen Sie in services.ts eine neue Funktion hinzu, um einen neuen Datensatz zu erstellen. Diese Funktion nimmt die ID eines neuen Benutzers und alle seine Details auf. Es verwendet die Set-Funktion von Firestore, um diese Informationen an Firebase zu senden und einen neuen Datensatz zu erstellen.

   addNewUser (_newId: beliebig, _fName: Zeichenfolge, _lName: Zeichenfolge, _vip: boolesch) {
    this.db.collection("User").doc (_newId).set({firstName: _fName, lastName: _lName, vipMember: _vip});
   }

2. Rufen Sie die Funktion addNewUser() in einer anderen TypeScript-Datei auf. Vergessen Sie nicht, den Dienst zu importieren und in den Konstruktor aufzunehmen, wie zuvor gezeigt. Sie können gerne einen Zufalls-ID-Generator verwenden, um die neue ID für den Benutzer zu erstellen.

   this.service.addNewUser("62289836", "Jane", "Doe", true);
   

So aktualisieren Sie Daten in der Firebase-Datenbank

Firebase hat viele Funktionen, die machen es zu einem der besten verfügbaren Tools. Um bestimmte Felder in einem bestimmten Datensatz zu aktualisieren, verwenden Sie die Update-Funktion von Firestore.

1. Erstellen Sie in der Datei service.ts eine Funktion namens updateUserFirstName(). Diese Funktion aktualisiert den Vornamen eines ausgewählten Benutzerdatensatzes. Die Funktion übernimmt die ID des Datensatzes, der aktualisiert werden muss, und den neuen Wert für den Vornamen des Benutzers.

   updateUserFirstName (_id: beliebig, _firstName: Zeichenfolge) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName});
   }

2. Um mehrere Felder für denselben Datensatz zu aktualisieren, erweitern Sie einfach die Felder, die in die Aktualisierungsfunktion von Firestore eingegeben werden. Statt nur firstName fügen Sie lastName hinzu, um auch diesen mit einem neuen Wert zu aktualisieren.

   updateUserFullName (_id: beliebig, _firstName: Zeichenfolge, _lastName: Zeichenfolge) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName, lastName: _lastName});
   }

3. Jede der oben genannten Funktionen kann in anderen TypeScript-Dateien verwendet werden.

   this.service.updateUserFirstName("vLBnSegFl1pD7XQ42TBv", "Kay");
   this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "Kay", "Jones");

So löschen Sie einen Datensatz aus der Firebase-Datenbank

Um einen Datensatz zu löschen, verwenden Sie die Löschfunktion von Firestore.

1. Erstellen Sie in der Datei service.ts eine Funktion namens deleteUser(). Diese Funktion übernimmt die ID des Datensatzes, der gelöscht werden muss.

   deleteUser (_id: beliebig) {
    this.db.doc(`Benutzer/${_id}`).delete();
    }
   

2. Die obige Funktion kann dann in anderen TypeScript-Dateien verwendet werden.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Abrufen von Firebase-Daten mithilfe von Abfragen und Filtern

Der „Wo“-Filter kann die zurückgegebenen Ergebnisse basierend auf einer bestimmten Bedingung filtern.

1. Erstellen Sie in services.ts eine Funktion, die alle VIP-Benutzer abruft (wenn das Feld vipMember auf true gesetzt ist). Dies wird durch den Teil "ref.where('vipMember', '==', true)" des Firebase-Aufrufs unten angegeben.

   getAllVipMembers() {
    neues Versprechen zurückgeben((Auflösung)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (users => resolve (users))
    })
    }

2. Verwenden Sie diese Funktion in einer anderen TypeScript-Datei.

   async getAllVipMembers() {
    this.vipUsers = warte auf this.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

3. Die Abfrage kann geändert werden, um andere Operationen wie Order By, Start At oder Limit hinzuzufügen. Ändern Sie die Funktion getAllVipMembers() in services.ts so, dass sie nach dem Nachnamen sortiert wird. Für den Vorgang „Sortieren nach“ muss möglicherweise ein Index in Firebase erstellt werden. Klicken Sie in diesem Fall auf den Link in der Fehlermeldung in der Konsole.

   getAllVipMembers() {
    neues Versprechen zurückgeben((Auflösung)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (users => resolve (users) )
    })
    }

4. Ändern Sie die Abfrage so, dass nur die ersten drei Datensätze zurückgegeben werden. Dazu können die Operationen Start At und Limit verwendet werden. Dies ist nützlich, wenn Sie Paging implementieren müssen, d. h. wenn eine bestimmte Anzahl von Datensätzen pro Seite angezeigt wird.

   getAllVipMembers() {
    neues Versprechen zurückgeben((Auflösung)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (Benutzer => Auflösung (Benutzer))
    })
    }

Fügen Sie Firebase mehr Daten und mehr Anfragen in der Angular-App hinzu

Es gibt viele andere Abfragekombinationen, die Sie untersuchen können, wenn Sie versuchen, Daten aus einer Firebase-Datenbank abzurufen. Hoffentlich verstehen Sie jetzt, wie Sie eine einfache Firebase-Datenbank einrichten, wie Sie sie mit einer lokalen Angular-Anwendung verbinden und wie Sie in die Datenbank lesen und schreiben.

Sie können auch mehr über die anderen von Firebase bereitgestellten Dienste erfahren. Firebase ist eine der vielen Plattformen, die Sie in Angular integrieren können, und unabhängig davon, ob Sie Anfänger oder Fortgeschrittener sind, es gibt immer so viel mehr zu lernen.

Top 8 Angular-Kurse für Anfänger und Fortgeschrittene

Lesen Sie weiter

Über den Autor