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

  • Erstellen Sie eine Webanwendung mit Angular und Firebase.
  • Daten mit Cloud Firestore und Cloud Storage for Firebase synchronisieren.
  • Authentifizieren Sie Ihre Nutzer mithilfe von Firebase Authentication.
  • Stellen Sie Ihre Webanwendung in Firebase App Hosting bereit.
  • Versenden von Benachrichtigungen mit Firebase Cloud Messaging.
  • Erheben Sie die Leistungsdaten Ihrer Webanwendung.

Voraussetzungen

  • Ein GitHub-Konto
  • Die Möglichkeit, ein Upgrade Ihres Firebase-Projekts auf das Blaze-Preismodell durchzuführen
  • IDE/Texteditor Ihrer Wahl, z. B. WebStorm, Sublime oder VS Code
  • Der Paketmanager npm, der in der Regel im Lieferumfang von Node.js enthalten ist
  • Terminal/Konsole
  • Einen Browser Ihrer Wahl, z. B. Chrome
  • Beispielcode des Codelabs. Im nächsten Schritt des Codelabs erfährst du, wie du den Code abrufen kannst.

2. Beispielcode abrufen

GitHub-Repository erstellen

Den Quellcode des Codelab 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. Sie erhalten von GitHub 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 die Repository-URL durch den Platzhalter your-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. Merken 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.

In der Anwendung, die Sie erstellen werden, werden Firebase-Produkte verwendet, 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 zum Erfassen von Nutzerleistungsdaten für Ihre App

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 für Ihr Firebase-Projekt das „Pay as you go“-Preismodell (Blaze) verwendet werden. Das bedeutet, dass es mit einem Cloud-Rechnungskonto verknüpft ist.

  • Für ein Cloud-Rechnungskonto ist eine Zahlungsmethode erforderlich, z. B. eine Kreditkarte.
  • Wenn Sie neu bei Firebase und Google Cloud sind, prüfen Sie, ob Sie Anspruch auf ein Guthaben in Höhe von 300 $ und ein kostenloses Cloud Billing-Konto haben.
  • Wenn Sie dieses Codelab im Rahmen einer Veranstaltung absolvieren, fragen Sie Ihren Organisator, ob Cloud-Guthaben verfügbar ist.

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 Upgrade-Anleitung in der 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 Alias Friendly Chat. Klicken Sie nicht auf das Kästchen neben Firebase Hosting auch für diese App einrichten. Klicken Sie stattdessen auf App registrieren.
  3. Im nächsten Schritt sehen Sie ein Konfigurationsobjekt. Sie benötigen ihn momentan 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, müssen Sie die Google-Anmeldemethode verwenden.

  1. Gehen Sie in der Firebase Console zu Authentifizierung.
  2. Klicken Sie auf 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 ein, z. B. My Next.js app.
  5. Wählen Sie in der Drop-down-Liste Support-E-Mail-Adresse für 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. Belassen Sie die Datenbank-ID bei (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. Lies dir den Haftungsausschluss zu den Sicherheitsregeln durch.
    Später in diesem Codelab kannst du Sicherheitsregeln hinzufügen, um deine Daten zu schützen. Apps dürfen nicht veröffentlicht oder veröffentlicht werden, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
  6. Klicken Sie auf Erstellen.

Cloud Storage for Firebase einrichten

Die Web-App verwendet Cloud Storage for Firebase, um Bilder zu speichern, hochzuladen und zu teilen.

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 Starten.
  3. Wählen Sie einen Speicherort für Ihren Standard-Storage-Bucket aus.
    Buckets in US-WEST1, US-CENTRAL1 und US-EAST1 können die Stufe „Immer kostenlos“ für Google Cloud Storage nutzen. Für Buckets an allen anderen Standorten gelten die Preise und die Nutzung von Google Cloud Storage.
  4. Klicken Sie auf Im Testmodus starten. Lies dir den Haftungsausschluss zu den Sicherheitsregeln durch.
    Später in diesem Codelab kannst du Sicherheitsregeln hinzufügen, um deine Daten zu schützen. Apps dürfen nicht veröffentlicht oder veröffentlicht werden, ohne Sicherheitsregeln für Ihren Storage-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. Prüfen Sie, ob die Befehlszeile auf das lokale Verzeichnis angularfire-start Ihrer App zugreift.
  2. Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen:
firebase use --add
  1. Wenn Sie dazu aufgefordert werden, wählen Sie Ihre Projekt-ID aus und geben Sie 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 einfach 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 aus dem Verzeichnis angularfire-start den folgenden Angular-Befehlszeile-Befehl aus:
ng add @angular/fire

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

  1. Entfernen Sie bei Aufforderung das Häkchen bei ng deploy -- hosting mit der Leertaste. 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 den übrigen Aufforderungen.
  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 mit Ihrem Repository in GitHub verbunden, das automatisch eine neue Version Ihrer App erstellt und bereitstellt, wenn Sie per Push einen neuen Commit an den main-Zweig übertragen.

  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 dem Erstellen 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. Geben Sie dem Back-End den Namen friendlychat-codelab.
  5. Wählen Sie unter „Firebase Web-App erstellen oder verknüpfen“ die Web-App aus, die Sie zuvor aus dem Drop-down-Menü „Vorhandene Firebase Web-App auswählen“ konfiguriert haben.
  6. Klicken Sie auf „Fertigstellen und bereitstellen“. Nach kurzer Zeit werden Sie auf eine neue Seite weitergeleitet, auf der Sie den Status Ihres neuen App Hosting-Backends sehen können.
  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“

Du solltest jetzt den Anmeldebildschirm deiner FriendlyChat App sehen, der (noch!) nicht funktioniert.

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

Erstellen wir nun 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 mit dem Firebase SDK-Snippet „Konfiguration“ aus.

Sie werden feststellen, 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

Bei Firebase Authentication ist nur die Anmeldung über eine bestimmte Liste von Domains möglich, die Sie kontrollieren. Fügen Sie Ihre kostenlose App Hosting-Domain der Domainliste 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. Es wird ein Pop-up-Fenster verwendet, aber Firebase bietet andere Methoden.

  1. Öffnen Sie chat.service.ts im Unterverzeichnis /src/app/services/.
  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 nach der 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 unsere Benutzeroberfläche entsprechend zu aktualisieren, müssen Sie überprüfen können, ob der Nutzer an- oder abgemeldet ist. AngularFire stellt eine Funktion bereit, mit der ein beobachtbares Objekt abgerufen wird, 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 ü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 die Seite in der Web-App und melden Sie sich über die Anmeldeschaltfläche und Ihr Google-Konto in der App an. Wenn eine Fehlermeldung wie auth/operation-not-allowed angezeigt wird, prüfen Sie, ob Google Log-in in der Firebase Console als Authentifizierungsanbieter aktiviert ist.
  4. Nach der Anmeldung sollten Ihr Profilbild und Ihr Nutzername angezeigt werden: Logo: angularfire

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 für Nutzer hinzu, mit der sie neue Nachrichten in Ihre Datenbank schreiben können. Nutzer, die auf die Schaltfläche SENDEN klicken, lösen das folgende Code-Snippet aus. Damit wird Ihrer Cloud Firestore-Instanz in der Sammlung messages ein Nachrichtenobjekt mit den Inhalten der Nachrichtenfelder hinzugefügt. Über die 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 nach der 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. Gib nach der Anmeldung eine Nachricht wie „Hallo!“ ein und klicke dann 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 Database (oder klicken Sie hier, um die Sammlung messages mit Ihrer neu hinzugefügten Nachricht zu sehen):

6812efe7da395692.png

10. Nachrichten lesen

messages 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 neu hinzugefügte Nachrichten aus der App überwacht. Mit diesem Code rufen Sie den Snapshot der Sammlung messages ab. 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 nach der 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 wenden Sie ein Limit an, indem Sie mit limit(12) nur die letzten zwölf Nachrichten abhören und die Nachrichten mit orderBy('timestamp', 'desc') nach Datum sortieren, 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 hierzu 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 Einführung abgeschlossen ist.
  3. Aktualisieren Sie FriendlyChat. Die Nachrichten, die Sie zuvor in der Datenbank erstellt haben, sollten in der FriendlyChat-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 Anwendung.

Logo: angularfire

11. KI-Funktionen hinzufügen

Sie verwenden die KI von Google, um der Chat-App nützliche Bedienungshilfen 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. Den resultierenden API-Schlüssel kopieren

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 mit der Erweiterung Build Chatbot with the Gemini API auf In 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 verfügt bereits über Code, um Antworten aus der KI-Erweiterung zu lesen. Senden Sie einfach eine neue Chatnachricht, um es auszuprobieren.

  1. Öffnen Sie FriendlyChat und senden Sie eine Nachricht.
  2. Nach kurzer Zeit sollten Sie eine Antwort neben Ihrer Nachricht sehen. Am Ende befindet sich ein ✨ ai generated-Hinweis, der darauf hinweist, dass es mit generativer KI und nicht von einem echten Nutzer erstellt wurde.

12. Bilder senden

Fügen Sie nun eine Funktion hinzu, mit der Bilder geteilt werden.

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 dem Sie alle Bilder speichern können, die ein Nutzer über unsere App freigibt.

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 Bilds hinzu:

  1. Kehren Sie zur Datei src/chat.service.ts zurück.
  2. Suchen Sie nach der 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 Einführung abgeschlossen ist.
  3. Aktualisieren Sie FriendlyChat. Klicke nach der Anmeldung auf die Schaltfläche „Bild hochladen“ links unten angularfire-4.png und wähle mit 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: Logo: angularfire

Wenn Sie versuchen, ein Bild hinzuzufügen, ohne angemeldet zu sein, wird eine Fehlermeldung angezeigt, dass Sie sich anmelden müssen, um Bilder hinzuzufügen.

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 zum Anzeigen von Benachrichtigungen erteilt hat, erhalten Sie kein Gerätetoken. In diesem Fall rufen Sie die Methode requestPermission() auf, wodurch ein Browser-Dialogfeld angezeigt wird, in dem Sie nach dieser Berechtigung gefragt werden ( in unterstützten Browsern).

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. FriendlyChat aktualisieren. 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 Ihr 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 Ihre App im Vordergrund ausgeführt wird, sehen Sie die Benachrichtigung in der JavaScript-Konsole.

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, um Zugriffsrechte, Sicherheit und Datenvalidierungen zu definieren.

Beim Einrichten des Firebase-Projekts zu Beginn dieses Codelabs haben Sie die Standardsicherheitsregeln vom Typ „Testmodus“ ausgewählt, damit Sie den Zugriff auf den Datenspeicher nicht eingeschränkt haben. In der Firebase Console im Bereich Datenbank auf dem Tab Regeln können Sie diese Regeln ansehen und ändern.

Jetzt 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 in diese schreiben kann.

rules_version = '2';

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

Sie aktualisieren die Regeln, um Einschränkungen gemäß den folgenden Regeln festzulegen:

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 auf Ihre Emulator-Suite aktualisiert werden.

Cloud Storage-Sicherheitsregeln ansehen

Cloud Storage for Firebase verwendet eine bestimmte Regelsprache, um Zugriffsrechte, Sicherheit und Datenvalidierungen zu definieren.

Beim Einrichten des Firebase-Projekts zu Beginn dieses Codelabs haben Sie die standardmäßige Cloud Storage-Sicherheitsregel ausgewählt, die nur authentifizierten Nutzern die Verwendung von Cloud Storage zulässt. In der Firebase Console im Abschnitt Speicher auf dem Tab Regeln können Sie Regeln aufrufen und ändern. Sie sollten die Standardregel sehen, die es allen angemeldeten Nutzern erlaubt, Dateien in Ihrem Storage-Bucket zu lesen und zu schreiben.

rules_version = '2';

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

Sie aktualisieren die Regeln, um Folgendes zu tun:

  • Allen Nutzern erlauben, nur in ihre eigenen, speziellen Ordner zu schreiben
  • Allen Nutzern erlauben, aus Cloud Storage zu lesen
  • Vergewissern Sie sich, dass es sich bei den hochgeladenen Dateien um Bilder handelt.
  • 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 trägt dazu bei, Ihre Dienste vor unerwünschtem Traffic und Ihr Backend vor Missbrauch zu schützen. In diesem Schritt fügen Sie die Validierung der Anmeldedaten hinzu und blockieren nicht autorisierte Clients mit App Check und reCAPTCHA Enterprise.

Zuerst müssen Sie App Check und reCAPTCHA aktivieren.

reCAPTCHA Enterprise aktivieren

  1. Wählen Sie in der Cloud Console unter „Sicherheit“ die Option reCaptcha Enterprise aus.
  2. Aktivieren Sie den Dienst nach Aufforderung 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 „Ankreuzaufgabe verwenden“ nicht ausgewählt ist.
  5. Klicken Sie auf Schlüssel erstellen und speichern Sie den generierten Schlüssel zur Aufbewahrung an einem sicheren Ort. Sie benötigen sie später in diesem Schritt.

App Check aktivieren

  1. Suchen Sie in der Firebase Console im linken Bereich den Abschnitt Build.
  2. Klicken Sie auf App Check und dann auf den Tab Sign-in method (Anmeldemethode), um App Check aufzurufen.
  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 aus und klicken Sie auf Erzwingen. Wiederholen Sie diese Schritte für Cloud Firestore.

App Check sollte jetzt erzwungen werden. Aktualisieren Sie die App und versuchen Sie, Chatnachrichten anzusehen 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.

Gehen Sie dann zur Datei app.config.ts 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üge bei Importen die Initialisierung von App Check mit ReCaptchaEnterpriseProvider hinzu und setze isTokenAutoRefreshEnabled auf true, damit Tokens automatisch aktualisiert werden können.

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 du lokale Tests zulassen möchtest, setze 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 nun in der Firebase Console die App-Ansicht von App Check auf.

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

Klicken Sie dann auf Fehlerbehebungstoken hinzufügen und fügen Sie das Fehlerbehebungstoken aus Ihrer Konsole ein, wenn Sie dazu aufgefordert werden.

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 chat.service.ts-Datei 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 „Nicht autorisierte Clients mit App Check blockieren“ 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.

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