Web-Codelab für AngularFire

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie mit AngularFire Webanwendungen erstellen, indem Sie einen Chatclient mithilfe von Firebase-Produkten und ‑Diensten implementieren und bereitstellen.

Eine Chat-App, in der Nutzer über Firebase sprechen

Lerninhalte

  • Webanwendung mit Angular und Firebase erstellen
  • Synchronisieren von Daten mithilfe von Cloud Firestore und Cloud Storage for Firebase.
  • Authentifizieren Sie Ihre Nutzer mit Firebase Authentication.
  • Bereitstellung der Webanwendung auf Firebase App Hosting.
  • Versenden von Benachrichtigungen mit Firebase Cloud Messaging.
  • Leistungsdaten Ihrer Webanwendung erfassen

Voraussetzungen

  • Ein GitHub-Konto
  • Sie können Ihr Firebase-Projekt auf den Blaze-Tarif umstellen.
  • IDE/Texteditor Ihrer Wahl, z. B. WebStorm, Sublime oder VS Code
  • Der Paketmanager npm, der normalerweise mit Node.js geliefert wird
  • Terminal/Konsole
  • Einen beliebigen Browser, z. B. Chrome
  • Der Beispielcode des Codelabs (wie Sie den Code abrufen, erfahren Sie im nächsten Schritt des Codelabs)

2. Beispielcode abrufen

GitHub-Repository erstellen

Den Codelab-Quellcode finden Sie unter https://github.com/firebase/codelab-friendlychat-web. Das Repository enthält Beispielprojekte für mehrere Plattformen. In diesem Codelab wird jedoch nur das Verzeichnis angularfire-start verwendet.

Kopieren Sie den Ordner angularfire-start in Ihr eigenes Repository:

  1. Erstellen Sie über ein Terminal einen neuen Ordner auf Ihrem Computer und wechseln Sie in das neue Verzeichnis:
    mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
  2. Verwenden Sie das npm-Paket giget, um nur den Ordner angularfire-start abzurufen:
    npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
  3. Änderungen lokal mit git nachverfolgen:
    git init

git add .

git commit -m "codelab starting point"

git branch -M main
  4. Erstellen Sie ein neues GitHub-Repository: https://github.com/new. Sie können ihm einen beliebigen Namen geben.
    1. GitHub gibt Ihnen eine neue Repository-URL, die entweder https://github.com/[user-name]/[repository-name].git oder git@github.com:[user-name]/[repository-name].git lautet. Kopieren Sie diese URL.
  5. Übertragen Sie lokale Änderungen per Push in Ihr neues GitHub-Repository. Führen Sie den folgenden Befehl aus und ersetzen Sie dabei den Platzhalter your-repository-url durch Ihre Repository-URL.
    git remote add origin your-repository-url

git push -u origin main
  6. Der Startcode sollte jetzt in Ihrem GitHub-Repository angezeigt werden.

3. Firebase-Projekt erstellen und einrichten

Firebase-Projekt erstellen

  1. Melden Sie sich in der Firebase Console an.
  2. Klicken Sie in der Firebase Console auf Projekt hinzufügen und geben Sie als Namen für Ihr Firebase-Projekt FriendlyChat ein. Notieren Sie sich die Projekt-ID Ihres Firebase-Projekts.
  3. Entfernen Sie das Häkchen bei Google Analytics für dieses Projekt aktivieren.
  4. Klicken Sie auf Projekt erstellen.

Die Anwendung, die Sie erstellen werden, verwendet Firebase-Produkte, die für Web-Apps verfügbar sind:

  • Firebase Authentication ermöglicht es Ihren Nutzern, sich mühelos in der App anzumelden.
  • Cloud Firestore speichert strukturierte Daten in der Cloud und benachrichtigt Sie sofort, wenn sich Daten ändern.
  • Cloud Storage for Firebase speichert Dateien in der Cloud.
  • Firebase App Hosting zum Erstellen, Hosten und Bereitstellen der App
  • Firebase Cloud Messaging versendet Push-Benachrichtigungen und zeigt Pop-up-Benachrichtigungen des Browsers an.
  • Firebase Performance Monitoring, um Leistungsdaten zu Nutzern für Ihre App zu erheben.

Einige dieser Produkte erfordern eine spezielle Konfiguration oder müssen über die Firebase Console aktiviert werden.

Firebase-Preismodell upgraden

Wenn Sie Firebase App Hosting und Cloud Storage for Firebase verwenden möchten, muss Ihr Firebase-Projekt den Blaze-Tarif (Pay as you go) haben. Das bedeutet, dass es mit einem Cloud-Rechnungskonto verknüpft sein muss.

So führen Sie ein Upgrade auf den Blaze-Tarif durch:

  1. Wählen Sie in der Firebase Console Tarif upgraden aus.
  2. Wählen Sie den Blaze-Tarif aus. Folgen Sie der Anleitung auf dem Bildschirm, um ein Cloud-Rechnungskonto mit Ihrem Projekt zu verknüpfen.
    Wenn Sie im Rahmen dieses Upgrades ein Cloud-Rechnungskonto erstellen mussten, müssen Sie möglicherweise zur Firebase Console zurückkehren, um das Upgrade abzuschließen.

Dem Projekt eine Firebase-Web-App hinzufügen

  1. Klicken Sie auf das Websymbol 58d6543a156e56f9.png, um eine neue Firebase-Web-App zu erstellen.
  2. Registrieren Sie die App unter dem Namen Friendly Chat. Klicken Sie das Kästchen neben Richten Sie außerdem Firebase Hosting für diese App ein nicht an. Klicken Sie auf App registrieren.
  3. Im nächsten Schritt sehen Sie ein Konfigurationsobjekt. Sie benötigen ihn im Moment nicht. Klicken Sie auf Weiter zur Konsole.

Screenshot der Webanwendung registrieren

Authentifizierung einrichten

Damit sich Nutzer mit ihren Google-Konten in der Web-App anmelden können, verwenden Sie die Anmeldemethode Google.

  1. Klicken Sie in der Firebase Console auf Authentifizierung.
  2. Klicken Sie auf Jetzt starten.
  3. Klicken Sie in der Spalte Zusätzliche Anbieter auf Google > Aktivieren.
  4. Geben Sie im Textfeld Öffentlicher Name für Projekt einen einprägsamen Namen wie My Next.js app ein.
  5. Wählen Sie im Drop-down-Menü Support-E-Mail-Adresse für das Projekt Ihre E-Mail-Adresse aus.
  6. Klicken Sie auf Speichern.

Cloud Firestore einrichten

Die Webanwendung verwendet Cloud Firestore, um Chatnachrichten zu speichern und neue Chatnachrichten zu empfangen.

So richten Sie Cloud Firestore in Ihrem Firebase-Projekt ein:

  1. Maximieren Sie im linken Bereich der Firebase Console Build und wählen Sie dann Firestore-Datenbank aus.
  2. Klicken Sie auf Datenbank erstellen.
  3. Lassen Sie die Datenbank-ID auf (default).
  4. Wählen Sie einen Speicherort für die Datenbank aus und klicken Sie auf Weiter.
    Für eine echte App sollten Sie einen Speicherort in der Nähe Ihrer Nutzer auswählen.
  5. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
    Später in diesem Codelab fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen oder verteilen Sie keine App, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
  6. Klicken Sie auf Erstellen.

Cloud Storage for Firebase einrichten

Die Webanwendung nutzt Cloud Storage for Firebase zum Speichern, Hochladen und Teilen von Bildern.

So richten Sie Cloud Storage for Firebase in Ihrem Firebase-Projekt ein:

  1. Maximieren Sie im linken Bereich der Firebase Console die Option Build und wählen Sie dann Storage aus.
  2. Klicken Sie auf Jetzt starten.
  3. Wählen Sie einen Speicherort für Ihren Standard-Storage-Bucket aus.
    Für Buckets in US-WEST1, US-CENTRAL1 und US-EAST1 kann die Stufe „Immer kostenlos“ für Google Cloud Storage genutzt werden. Für Buckets an allen anderen Speicherorten gelten die Preise und Nutzungsbedingungen für Google Cloud Storage.
  4. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
    Später in diesem Codelab fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen oder verteilen Sie keine App, ohne Sicherheitsregeln für Ihren Speicher-Bucket hinzuzufügen.
  5. Klicken Sie auf Erstellen.

4. Firebase-Befehlszeilentool installieren

Mit der Firebase-Befehlszeile (Firebase CLI) können Sie Ihre Webanwendung lokal mit Firebase Hosting bereitstellen und in Ihrem Firebase-Projekt bereitstellen.

  1. Installieren Sie die Befehlszeile mit dem folgenden npm-Befehl:
npm -g install firebase-tools@latest
  1. Prüfen Sie mit dem folgenden Befehl, ob die Befehlszeile korrekt installiert wurde:
firebase --version

Die Firebase CLI muss Version 13.9.0 oder höher sein.

  1. Autorisieren Sie die Firebase CLI mit dem folgenden Befehl:
firebase login

Sie haben die Web-App-Vorlage so eingerichtet, dass die Konfiguration Ihrer App für Firebase Hosting aus dem lokalen Verzeichnis Ihrer App (dem Repository, das Sie zuvor im Codelab geklont haben) abgerufen wird. Damit Sie die Konfiguration abrufen können, müssen Sie Ihre App mit Ihrem Firebase-Projekt verknüpfen.

  1. Achten Sie darauf, dass Ihre Befehlszeile auf das lokale angularfire-start-Verzeichnis Ihrer App zugreift.
  2. Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen:
firebase use --add
  1. Wählen Sie auf Aufforderung Ihre Projekt-ID aus und geben Sie dann Ihrem Firebase-Projekt einen Alias.

Ein Alias ist nützlich, wenn Sie mehrere Umgebungen haben (Produktion, Staging usw.). Für dieses Codelab verwenden wir jedoch nur den Alias default.

  1. Folgen Sie der Anleitung in der Befehlszeile.

5. AngularFire installieren

Bevor Sie das Projekt ausführen, müssen Sie die Angular CLI und AngularFire eingerichtet haben.

  1. Führen Sie in einer Console den folgenden Befehl aus:
npm install -g @angular/cli
  1. Führen Sie dann in einer Konsole im Verzeichnis angularfire-start den folgenden Angular-Befehl aus:
ng add @angular/fire

Dadurch werden alle erforderlichen Abhängigkeiten für Ihr Projekt installiert.

  1. Entfernen Sie bei der Aufforderung mit der Leertaste das Häkchen bei ng deploy -- hosting. Wählen Sie mit den Pfeiltasten und der Leertaste die folgenden Funktionen aus:
    • Authentication
    • Firestore
    • Cloud Messaging
    • Cloud Storage
  2. Drücken Sie enter und folgen Sie der Anleitung.
  3. Erstellen Sie einen Commit mit der Commit-Nachricht „Install AngularFire“ und übertragen Sie ihn per Push in Ihr GitHub-Repository.

6. App-Hosting-Backend erstellen

In diesem Abschnitt richten Sie ein App Hosting-Backend ein, um einen Branch in Ihrem Git-Repository zu beobachten.

Am Ende dieses Abschnitts haben Sie ein App Hosting-Backend, das mit Ihrem Repository in GitHub verbunden ist und automatisch eine neue Version Ihrer App neu erstellt und bereitstellt, wenn Sie einen neuen Commit an Ihren main-Branch pushen.

  1. Rufen Sie in der Firebase Console die Seite App-Hosting auf:

Der Nullzustand der App Hosting Console mit der Schaltfläche „Jetzt starten“

  1. Klicken Sie auf „Jetzt starten“, um mit der Erstellung des Back-Ends zu beginnen. Konfigurieren Sie Ihr Backend so:
  2. Folgen Sie der Anleitung im ersten Schritt, um das zuvor erstellte GitHub-Repository zu verbinden.
  3. Legen Sie die Bereitstellungseinstellungen fest:
    1. Stammverzeichnis bei / belassen
    2. Legen Sie den Live-Zweig auf main fest.
    3. Automatische Roll-outs aktivieren
  4. Benennen Sie das Backend friendlychat-codelab.
  5. Wählen Sie unter „Firebase-Web-App erstellen oder verknüpfen“ im Drop-down-Menü „Vorhandene Firebase-Web-App auswählen“ die zuvor konfigurierte Web-App aus.
  6. Klicken Sie auf „Fertigstellen und bereitstellen“. Nach einem Moment werden Sie zu einer neuen Seite weitergeleitet, auf der Sie den Status Ihres neuen App-Hosting-Backends sehen.
  7. Klicken Sie nach Abschluss des Roll-outs unter „Domains“ auf Ihre kostenlose Domain. Aufgrund der DNS-Verbreitung kann es einige Minuten dauern, bis die Änderungen wirksam werden.

Sie haben die erste Webanwendung bereitgestellt. Jedes Mal, wenn Sie einen neuen Commit in den main-Branch Ihres GitHub-Repositories pushen, wird in der Firebase Console ein neuer Build und ein neues Roll-out gestartet. Ihre Website wird automatisch aktualisiert, sobald das Roll-out abgeschlossen ist.

Der Nullzustand der App Hosting Console mit der Schaltfläche „Jetzt starten“

Es sollte der Anmeldebildschirm Ihrer FriendlyChat-App angezeigt werden, der (noch) nicht funktioniert.

Die App kann derzeit noch nichts, aber mit Ihrer Hilfe wird das bald der Fall sein.

Erstellen wir jetzt eine Echtzeit-Chat-App.

7. Firebase importieren und konfigurieren

Firebase konfigurieren

Sie müssen das Firebase SDK so konfigurieren, dass es weiß, welches Firebase-Projekt Sie verwenden.

  1. Rufen Sie in der Firebase Console die Projekteinstellungen auf.
  2. Wählen Sie auf der Karte „Meine Apps“ den Alias der App aus, für die Sie ein Konfigurationsobjekt benötigen.
  3. Wählen Sie im Bereich „Firebase SDK-Snippet“ die Option „Konfiguration“ aus.

Sie sehen, dass die Umgebungsdatei /angularfire-start/src/environments/environment.ts für Sie generiert wurde.

  1. Kopieren Sie das Snippet für das Konfigurationsobjekt und fügen Sie es angularfire-start/src/firebase-config.js hinzu.

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

AngularFire-Einrichtung ansehen

Sie sehen, dass die in der Console ausgewählten Funktionen automatisch der Datei /angularfire-start/src/app/app.config.ts hinzugefügt wurden. So kann Ihre App Firebase-Funktionen verwenden.

8. Nutzeranmeldung einrichten

AngularFire sollte jetzt einsatzbereit sein, da es in app.config.ts importiert und initialisiert wurde. Sie implementieren jetzt die Nutzeranmeldung mithilfe von Firebase Authentication.

Fügen Sie eine autorisierte Domain hinzu

Firebase Authentication erlaubt nur Anmeldungen über eine festgelegte Liste von Domains, die Sie verwalten. Fügen Sie Ihre kostenlose App-Hosting-Domain der Liste der Domains hinzu:

  1. Rufen Sie App-Hosting auf.
  2. Kopieren Sie die Domain Ihres Backends.
  3. Gehen Sie zu Authentifizierungseinstellungen.
  4. Wählen Sie den Tab Autorisierte Domains aus.
  5. Klicken Sie auf Domain hinzufügen und fügen Sie die Domain Ihres App Hosting-Backends ein.

Nutzer mit Google Log-in authentifizieren

Wenn ein Nutzer in der App auf die Schaltfläche Über Google anmelden klickt, wird die Funktion login ausgelöst. Für dieses Codelab müssen Sie Firebase autorisieren, Google als Identitätsanbieter zu verwenden. Sie verwenden ein Pop-up, aber Firebase bietet mehrere andere Methoden.

  1. Öffnen Sie im Unterverzeichnis /src/app/services/ die Datei chat.service.ts.
  2. Suchen Sie die Funktion login.
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

Die Funktion logout wird ausgelöst, wenn der Nutzer auf die Schaltfläche Abmelden klickt.

  1. Kehren Sie zur Datei src/app/services/chat.service.ts zurück.
  2. Suchen Sie die Funktion logout.
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

Authentifizierungsstatus verfolgen

Um die Benutzeroberfläche entsprechend zu aktualisieren, müssen Sie prüfen können, ob ein Nutzer angemeldet oder abgemeldet ist. AngularFire bietet eine Funktion zum Abrufen eines Observables, das jedes Mal aktualisiert wird, wenn sich der Authentifizierungsstatus ändert. Diese Funktion ist bereits implementiert, aber es lohnt sich, sie sich anzusehen.

  1. Kehren Sie zur Datei src/app/services/chat.service.ts zurück.
  2. Suchen Sie die Variablenzuweisung user$.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

Im Code oben wird die AngularFire-Funktion user aufgerufen, die einen observable-Nutzer zurückgibt. Sie wird jedes Mal ausgelöst, wenn sich der Authentifizierungsstatus ändert, d. h., wenn sich der Nutzer an- oder abmeldet. Die Angular-Vorlagenkomponenten in FriendlyChat verwenden dieses Observable, um die Benutzeroberfläche zu aktualisieren, um Nutzer in der Navigationsleiste anzuzeigen usw.

Anmeldung in der App testen

  1. Erstellen Sie einen Commit mit der Commit-Nachricht „Google-Authentifizierung hinzufügen“ und pushen Sie ihn in Ihr GitHub-Repository.
  2. Öffnen Sie in der Firebase Console die Seite App-Hosting und warten Sie, bis die neue Bereitstellung abgeschlossen ist.
  3. Aktualisieren Sie die Seite in der Web-App und melden Sie sich über die Anmeldeschaltfläche und Ihr Google-Konto in der App an. Wenn die Fehlermeldung auth/operation-not-allowed enthält, prüfen Sie, ob Sie Google Sign-in in der Firebase Console als Authentifizierungsanbieter aktiviert haben.
  4. Nach der Anmeldung sollten Ihr Profilbild und Ihr Nutzername angezeigt werden: angularfire-3.png

9. Nachrichten in Cloud Firestore schreiben

In diesem Abschnitt schreiben Sie einige Daten in Cloud Firestore, sodass Sie die Benutzeroberfläche der App befüllen können. Das geht manuell in der Firebase Console, doch für dieses Lab tun Sie dies direkt in der App, um Grundlagen des Schreibens in Cloud Firestore zu demonstrieren.

Datenmodell

Cloud Firestore-Daten werden in Sammlungen, Dokumente, Felder und untergeordnete Sammlungen aufgeteilt. Sie speichern jede Nachricht des Chats als Dokument in einer Sammlung auf oberster Ebene namens messages.

688d7bc5fb662b57.png

Nachrichten in Cloud Firestore hinzufügen

Zum Speichern der von Nutzern geschriebenen Chatnachrichten verwenden Sie Cloud Firestore.

In diesem Abschnitt fügen Sie die Funktion hinzu, mit der Nutzer neue Nachrichten in Ihre Datenbank schreiben können. Nutzer, die auf die Schaltfläche SENDEN klicken, lösen das folgende Code-Snippet aus. Es fügt ein Nachrichtenobjekt mit den Inhalten der Nachrichtenfelder zur Cloud Firestore-Instanz in der Sammlung messages hinzu. Mit der Methode add() wird der Sammlung ein neues Dokument mit einer automatisch generierten ID hinzugefügt.

  1. Kehren Sie zur Datei src/app/services/chat.service.ts zurück.
  2. Suchen Sie die Funktion addMessage.
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

Senden von Nachrichten testen

  1. Erstellen Sie einen Commit mit der Commit-Nachricht „Neue Chats in Firestore posten“ und pushen Sie ihn in Ihr GitHub-Repository.
  2. Öffnen Sie in der Firebase Console die Seite App-Hosting und warten Sie, bis die neue Bereitstellung abgeschlossen ist.
  3. Aktualisieren Sie FriendlyChat. Geben Sie nach der Anmeldung eine Nachricht ein, z. B. „Hallo!“, und klicken Sie auf SENDEN. Dadurch wird die Nachricht in Cloud Firestore geschrieben. Die Daten werden jedoch nicht in der eigentlichen Web-App angezeigt, da Sie das Abrufen der Daten noch implementieren müssen (im nächsten Codelab-Abschnitt).
  4. Die neu hinzugefügte Nachricht wird in der Firebase Console angezeigt. Öffnen Sie die Benutzeroberfläche der Emulator Suite. Klicken Sie im Abschnitt Build auf Firestore-Datenbank (oder klicken Sie hier). Die Sammlung messages mit der neu hinzugefügten Nachricht sollte angezeigt werden:

6812efe7da395692.png

10. Nachrichten lesen

Nachrichten synchronisieren

Wenn Sie Nachrichten in der App lesen möchten, müssen Sie ein Observable hinzufügen, das ausgelöst wird, wenn sich Daten ändern, und dann ein UI-Element erstellen, das neue Nachrichten anzeigt.

Sie fügen Code hinzu, der auf neu hinzugefügte Nachrichten aus der App wartet. In diesem Code wird der Snapshot der messages-Sammlung abgerufen. Es werden nur die letzten 12 Nachrichten des Chats angezeigt, damit beim Laden nicht ein sehr langer Verlauf angezeigt wird.

  1. Kehren Sie zur Datei src/app/services/chat.service.ts zurück.
  2. Suchen Sie die Funktion loadMessages.
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

Wenn Sie Nachrichten in der Datenbank anhören möchten, erstellen Sie eine Abfrage in einer Sammlung. Verwenden Sie dazu die Funktion collection, um anzugeben, in welcher Sammlung sich die Daten befinden, die Sie anhören möchten. Im Code oben werden die Änderungen in der Sammlung messages überwacht, in der die Chatnachrichten gespeichert werden. Außerdem wird ein Limit angewendet, indem mit limit(12) nur die letzten zwölf Nachrichten angehört und mit orderBy('timestamp', 'desc') die Nachrichten nach Datum sortiert werden, um die zwölf neuesten Nachrichten zu erhalten.

Für die Funktion collectionData werden im Hintergrund Snapshots verwendet. Die Callback-Funktion wird ausgelöst, wenn Dokumente entsprechend der Abfrage geändert werden, z. B. wenn eine Nachricht gelöscht, modifiziert oder hinzugefügt wird. Weitere Informationen finden Sie in der Cloud Firestore-Dokumentation.

Synchronisierung von Nachrichten testen

  1. Erstellen Sie einen Commit mit der Commit-Nachricht „Neue Chats in der Benutzeroberfläche anzeigen“ und übertragen Sie ihn per Push in Ihr GitHub-Repository.
  2. Öffnen Sie in der Firebase Console die Seite App-Hosting und warten Sie, bis die neue Bereitstellung abgeschlossen ist.
  3. Aktualisieren Sie FriendlyChat. Die Nachrichten, die Sie zuvor in der Datenbank erstellt haben, sollten nun in der Friendly Chat-Benutzeroberfläche angezeigt werden (siehe unten). Sie können auch neue Nachrichten schreiben, die dann sofort angezeigt werden sollten.
  4. Optional: Sie können neue Nachrichten direkt im Bereich Firestore der Emulator-Suite manuell löschen, ändern oder hinzufügen. Alle Änderungen sollten in der Benutzeroberfläche sichtbar sein.

Glückwunsch! Sie lesen Cloud Firestore-Dokumente in Ihrer App.

angularfire-2.png

11. KI-Funktionen hinzufügen

Sie verwenden die KI von Google, um der Chat-App nützliche Hilfsfunktionen hinzuzufügen.

Google AI API-Schlüssel abrufen

  1. Rufen Sie Google AI Studio auf und klicken Sie auf API-Schlüssel erstellen.
  2. Wählen Sie das Firebase-Projekt aus, das Sie für dieses Codelab erstellt haben. Der Prompt bezieht sich auf ein Google Cloud-Projekt, aber jedes Firebase-Projekt ist ein Google Cloud-Projekt.
  3. Klicken Sie auf API-Schlüssel in bestehendem Projekt erstellen.
  4. Kopieren Sie den resultierenden API-Schlüssel.

Erweiterung installieren

Mit dieser Erweiterung wird eine Cloud-Funktion bereitgestellt, die jedes Mal ausgelöst wird, wenn der Sammlung „messages“ in Firestore ein neues Dokument hinzugefügt wird. Die Funktion ruft Gemini auf und schreibt die Antwort in das Feld response im Dokument zurück.

  1. Klicken Sie auf der Seite der Erweiterung Build Chatbot with the Gemini API auf In der Firebase Console installieren.
  2. Führen Sie dazu die angezeigten Schritte aus. Legen Sie im Schritt Erweiterung konfigurieren die folgenden Parameterwerte fest:
    • Gemini API-Anbieter: Google AI
    • Google AI API-Schlüssel: Fügen Sie den zuvor erstellten Schlüssel ein und klicken Sie auf Secret erstellen.
    • Firestore-Sammlungspfad: messages
    • Prompt-Feld: text
    • Antwortfeld: response
    • Bestellfeld: timestamp
    • Kontext: Keep your answers short, informal, and helpful. Use emojis when possible.
  3. Klicken Sie auf Erweiterung installieren.
  4. Warten Sie, bis die Installation der Erweiterung abgeschlossen ist.

KI-Funktion testen

FriendlyChat enthält bereits Code zum Lesen von Antworten der KI-Erweiterung. Senden Sie einfach eine neue Chatnachricht, um es auszuprobieren.

  1. Öffnen Sie FriendlyChat und senden Sie eine Nachricht.
  2. Nach kurzer Zeit sollte neben Ihrer Nachricht eine Antwort angezeigt werden. Am Ende ist ein Hinweis ✨ ai generated zu sehen, der darauf hinweist, dass es sich nicht um einen echten Nutzer handelt, sondern um einen mit generativer KI erstellten.

12. Bilder senden

Fügen Sie nun eine Funktion hinzu, die Bilder teilt.

Cloud Firestore eignet sich gut zum Speichern strukturierter Daten, Cloud Storage ist jedoch besser für das Speichern von Dateien geeignet. Cloud Storage for Firebase ist ein Datei-/Blob-Speicherdienst. Mit ihm speichern Sie alle Bilder, die Nutzer über Ihre App teilen.

Bilder in Cloud Storage speichern

Für dieses Codelab wurde bereits eine Schaltfläche hinzugefügt, die ein Dialogfeld für die Dateiauswahl auslöst. Nach Auswahl einer Datei wird die Funktion saveImageMessage aufgerufen und Sie erhalten einen Verweis auf die ausgewählte Datei. Die Funktion saveImageMessage bietet folgende Vorteile:

  1. eine „Platzhalter“-Chatnachricht im Chatfeed erstellt, sodass Nutzer eine „Wird geladen“-Animation sehen, während das Bild hochgeladen wird.
  2. die Bilddatei in Cloud Storage unter diesem Pfad hochlädt: /<uid>/<file_name>
  3. eine öffentlich lesbare URL für die Bilddatei erstellt.
  4. die Chatnachricht mit der neu hochgeladenen Bilddatei-URL anstelle des temporären Ladebilds aktualisiert.

Fügen Sie nun die Funktion zum Senden eines Bildes hinzu:

  1. Kehren Sie zur Datei src/chat.service.ts zurück.
  2. Suchen Sie die Funktion saveImageMessage.
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);

    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Senden von Bildern testen

  1. Erstellen Sie einen Commit mit der Commit-Nachricht „Add the ability to post images“ (Möglichkeit zum Posten von Bildern hinzufügen) und pushen Sie ihn in Ihr GitHub-Repository.
  2. Öffnen Sie in der Firebase Console die Seite App-Hosting und warten Sie, bis die neue Bereitstellung abgeschlossen ist.
  3. Aktualisieren Sie FriendlyChat. Klicken Sie nach der Anmeldung unten links auf die Schaltfläche zum Hochladen von Bildern angularfire-4.png und wählen Sie mithilfe der Dateiauswahl eine Bilddatei aus. Wenn Sie nach einem Bild suchen, können Sie gerne auch dieses schöne Bild eines Kaffeebechers verwenden.
  4. Eine neue Nachricht sollte in der App-UI mit dem ausgewählten Bild angezeigt werden: angularfire-2.png

Wenn Sie versuchen, ein Bild hinzuzufügen, ohne angemeldet zu sein, wird eine Fehlermeldung angezeigt, in der Sie aufgefordert werden, sich anzumelden.

13. Benachrichtigungen anzeigen

Fügen Sie nun Unterstützung für Browsermitteilungen hinzu. Die App benachrichtigt Nutzer, wenn neue Nachrichten im Chat gepostet werden. Firebase Cloud Messaging (FCM) ist eine plattformübergreifende Messaging-Lösung, mit der Sie zuverlässig und kostenlos Nachrichten und Benachrichtigungen zustellen können.

FCM-Service Worker hinzufügen

Die Web-App erfordert einen Service Worker, der Webbenachrichtigungen empfängt und anzeigt.

Der Messaging-Anbieter sollte bereits eingerichtet gewesen sein, als AngularFire hinzugefügt wurde. Achten Sie darauf, dass der folgende Code im Abschnitt „Imports“ von /angularfire-start/src/app/app.config.ts vorhanden ist.

provideMessaging(() => {
    return getMessaging();
}),

app/app.config.ts

Der Service Worker muss lediglich das Firebase Cloud Messaging SDK laden und initialisieren, das das Anzeigen von Benachrichtigungen übernimmt.

FCM-Gerätetokens abrufen

Wenn Benachrichtigungen auf einem Gerät oder Browser aktiviert sind, erhalten Sie ein Gerätetoken. Dieses Gerätetoken wird verwendet, um eine Benachrichtigung an ein bestimmtes Gerät oder einen bestimmten Browser zu senden.

Wenn sich der Nutzer anmeldet, rufen Sie die Funktion saveMessagingDeviceToken auf. Hier erhalten Sie das FCM-Gerätetoken aus dem Browser und speichern es in Cloud Firestore.

chat.service.ts

  1. Suchen Sie die Funktion saveMessagingDeviceToken.
  2. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
 
        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

Dieser Code funktioniert jedoch nicht sofort. Damit die App das Gerätetoken abrufen kann, muss der Nutzer der App erlauben, Benachrichtigungen anzuzeigen (nächster Schritt des Codelabs).

Berechtigungen zum Anzeigen von Benachrichtigungen anfordern

Wenn der Nutzer Ihrer App noch nicht die Berechtigung erteilt hat, Benachrichtigungen anzuzeigen, erhalten Sie kein Gerätetoken. In diesem Fall rufen Sie die Methode requestPermission() auf, wodurch in unterstützten Browsern ein Browserdialog für diese Berechtigung angezeigt wird.

8b9d0c66dc36153d.png

  1. Kehren Sie zur Datei src/app/services/chat.service.ts zurück.
  2. Suchen Sie die Funktion requestNotificationsPermissions.
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

chat.service.ts

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();
    
    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

Gerätetoken abrufen

  1. Erstellen Sie einen Commit mit der Commit-Nachricht „Add the ability to post images“ (Möglichkeit zum Posten von Bildern hinzufügen) und pushen Sie ihn in Ihr GitHub-Repository.
  2. Öffnen Sie in der Firebase Console die Seite App-Hosting und warten Sie, bis die neue Bereitstellung abgeschlossen ist.
  3. Aktualisieren Sie FriendlyChat. Nach der Anmeldung sollte das Dialogfeld für die Berechtigung für Benachrichtigungen angezeigt werden: bd3454e6dbfb6723.png
  4. Klicken Sie auf Zulassen.
  5. Öffnen Sie die JavaScript-Konsole Ihres Browsers. Sie sollten folgende Meldung sehen: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  6. Kopieren Sie Ihr Gerätetoken. Sie benötigen sie für die nächste Phase des Codelabs.

Benachrichtigung an das Gerät senden

Nachdem Sie das Gerätetoken erhalten haben, können Sie eine Benachrichtigung senden.

  1. Öffnen Sie in der Firebase Console den Tab Cloud Messaging.
  2. Klicken Sie auf „Neue Benachrichtigung“.
  3. Geben Sie einen Titel und Text für die Benachrichtigung ein.
  4. Klicken Sie rechts auf dem Bildschirm auf „Testnachricht senden“.
  5. Geben Sie das Gerätetoken ein, das Sie aus der JavaScript-Konsole Ihres Browsers kopiert haben, und klicken Sie dann auf das Pluszeichen (+).
  6. Klicken Sie auf „Testen“.

Wenn sich Ihre App im Vordergrund befindet, wird die Benachrichtigung in der JavaScript-Konsole angezeigt.

Wenn sich die App im Hintergrund befindet, sollte in Ihrem Browser eine Benachrichtigung angezeigt werden, wie in diesem Beispiel:

de79e8638a45864c.png

14. Cloud Firestore-Sicherheitsregeln

Datenbanksicherheitsregeln ansehen

Cloud Firestore verwendet eine bestimmte Regelsprache zur Definition von Zugriffsrechten, Sicherheit und Datenvalidierungen.

Als Sie zu Beginn dieses Codelabs das Firebase-Projekt erstellt haben, haben Sie die Standardsicherheitsregeln für den „Testmodus“ ausgewählt, sodass der Zugriff auf den Datenspeicher nicht eingeschränkt wurde. In der Firebase Console können Sie diese Regeln im Abschnitt Datenbank auf dem Tab Regeln einsehen und ändern.

Derzeit sollten Sie die Standardregeln sehen, die den Zugriff auf den Datenspeicher nicht einschränken. Das bedeutet, dass jeder Nutzer alle Sammlungen in Ihrem Datenspeicher lesen und darauf schreiben kann.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Aktualisieren Sie die Regeln folgendermaßen, um die Zugriffsrechte einzuschränken:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

Die Sicherheitsregeln sollten automatisch in Ihrer Emulator-Suite aktualisiert werden.

Cloud Storage-Sicherheitsregeln ansehen

Cloud Storage for Firebase verwendet eine bestimmte Regelsprache zur Definition von Zugriffsrechten, Sicherheit und Datenvalidierungen.

Als Sie zu Beginn dieses Codelabs das Firebase-Projekt erstellt haben, haben Sie die Standardsicherheitsregel von Cloud Storage verwendet, die nur authentifizierten Nutzern die Verwendung von Cloud Storage gestattet. In der Firebase Console können Sie im Abschnitt Speicher auf dem Tab Regeln Regeln aufrufen und ändern. Die Standardregel sollte angezeigt werden, mit der alle angemeldeten Nutzer Dateien in Ihrem Speicher-Bucket lesen und schreiben können.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Aktualisieren Sie die Regeln folgendermaßen:

  • Allen Nutzern erlauben, nur in ihre eigenen, speziellen Ordner zu schreiben
  • Allen erlauben, aus Cloud Storage zu lesen
  • Achten Sie darauf, dass alle hochgeladenen Dateien Bilder sind.
  • Die Größe der Bilder, die hochgeladen werden können, auf maximal 5 MB beschränken

Dies kann mithilfe der folgenden Regeln implementiert werden:

storage.rules

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

15. Glückwunsch!

Sie haben mit Firebase eine Webanwendung für Echtzeit-Chats erstellt.

Behandelte Themen

  • Firebase App Hosting
  • Firebase Authentication
  • Cloud Firestore
  • Firebase SDK for Cloud Storage
  • Firebase Cloud Messaging
  • Firebase Performance Monitoring

Nächste Schritte

Weitere Informationen

16. [Optional] Mit App Check erzwingen

Firebase App Check hilft Ihnen, Ihre Dienste vor unerwünschtem Traffic und Ihr Backend vor Missbrauch zu schützen. In diesem Schritt fügen Sie die Anmeldedatenbestätigung hinzu und blockieren mit App Check und reCAPTCHA Enterprise nicht autorisierte Clients.

Aktivieren Sie zuerst App-Überprüfung und reCAPTCHA.

reCAPTCHA Enterprise aktivieren

  1. Wählen Sie in der Cloud Console unter „Sicherheit“ die Option reCAPTCHA Enterprise aus.
  2. Aktivieren Sie den Dienst wie aufgefordert und klicken Sie auf Schlüssel erstellen.
  3. Geben Sie einen Anzeigenamen ein und wählen Sie Website als Plattformtyp aus.
  4. Fügen Sie die bereitgestellten URLs der Domainliste hinzu und achten Sie darauf, dass die Option „Kästchen-Bestätigung verwenden“ nicht ausgewählt ist.
  5. Klicken Sie auf Schlüssel erstellen und bewahren Sie den generierten Schlüssel an einem sicheren Ort auf. Sie benötigen sie später in diesem Schritt.

App Check aktivieren

  1. Suchen Sie in der Firebase Console im linken Bereich nach dem Abschnitt Build.
  2. Klicken Sie auf App-Überprüfung und dann auf den Tab Anmeldemethode, um zu App-Überprüfung zu gelangen.
  3. Klicken Sie auf Registrieren, geben Sie Ihren reCaptcha Enterprise-Schlüssel ein und klicken Sie dann auf Speichern.
  4. Wählen Sie in der API-Ansicht Speicher und dann Erzwingen aus. Gehen Sie für Cloud Firestore genauso vor.

App Check sollte jetzt erzwungen werden. Aktualisieren Sie die App und versuchen Sie, Chatnachrichten aufzurufen oder zu senden. Sie sollten die Fehlermeldung erhalten:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Das bedeutet, dass App Check nicht validierte Anfragen standardmäßig blockiert. Fügen Sie Ihrer App jetzt eine Validierung hinzu.

Rufen Sie die Datei environment.ts auf und fügen Sie dem environment-Objekt reCAPTCHAEnterpriseKey hinzu.

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.firebasestorage.app',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

Ersetzen Sie den Wert von key durch Ihr reCaptcha Enterprise-Token.

Rufen Sie dann die Datei app.config.ts auf und fügen Sie die folgenden Importe hinzu:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

Fügen Sie in derselben Datei app.config.ts die folgende Deklaration einer globalen Variablen hinzu:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

Fügen Sie bei Importen die Initialisierung von App Check mit ReCaptchaEnterpriseProvider hinzu und legen Sie isTokenAutoRefreshEnabled auf true fest, damit Tokens automatisch aktualisiert werden.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

Wenn Sie lokale Tests zulassen möchten, setzen Sie self.FIREBASE_APPCHECK_DEBUG_TOKEN auf true. Wenn Sie Ihre App in localhost aktualisieren, wird in der Konsole ein Debugging-Token protokolliert, das in etwa so aussieht:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Rufen Sie jetzt in der Firebase Console die Ansicht „Apps“ von App Check auf.

Klicken Sie auf das Dreipunkt-Menü und wählen Sie Debug-Tokens verwalten aus.

Klicken Sie dann auf Debug-Token hinzufügen und fügen Sie das Debug-Token aus der Konsole ein.

Rufen Sie die Datei chat.service.ts auf und fügen Sie den folgenden Import hinzu:

import { AppCheck } from '@angular/fire/app-check';

Fügen Sie in derselben Datei chat.service.ts App Check zusammen mit den anderen Firebase-Diensten ein.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...
  1. Erstellen Sie einen Commit mit der Commit-Nachricht „Block unauthorized clients with App Check“ (Nicht autorisierte Clients mit App Check blockieren) und übertragen Sie ihn in Ihr GitHub-Repository.
  2. Öffnen Sie in der Firebase Console die Seite App-Hosting und warten Sie, bis die neue Bereitstellung abgeschlossen ist.

Glückwunsch! App-Überprüfung sollte jetzt in Ihrer App funktionieren.