Firebase Web kennenlernen

1. Übersicht

In diesem Codelab lernen Sie einige Grundlagen von Firebase kennen, mit denen Sie interaktive Webanwendungen erstellen können. Sie erstellen eine Chat-App für Event-RSVP und Gästebücher mit mehreren Firebase-Produkten.

Lerninhalte

• Nutzer mit Firebase Authentication und FirebaseUI authentifizieren
• Synchronisieren von Daten mit Cloud Firestore.
• Firebase-Sicherheitsregeln schreiben, um eine Datenbank zu schützen

Voraussetzungen

• Einen Browser Ihrer Wahl, z. B. Chrome.
• Zugriff auf stackblitz.com (kein Konto oder keine Anmeldung erforderlich).
• Ein Google-Konto, z. B. ein Gmail-Konto. Wir empfehlen, das E‑Mail-Konto zu verwenden, das Sie bereits für Ihr GitHub-Konto nutzen. So können Sie erweiterte Funktionen in StackBlitz nutzen.
• Der Beispielcode des Codelabs. Im nächsten Schritt erfahren Sie, wie Sie den Code erhalten.

2. Startcode abrufen

In diesem Codelab erstellen Sie eine App mit StackBlitz, einem Online-Editor, in den mehrere Firebase-Workflows integriert sind. Für StackBlitz ist keine Softwareinstallation oder ein spezielles StackBlitz-Konto erforderlich.

Mit StackBlitz können Sie Projekte mit anderen teilen. Andere Nutzer, die die URL Ihres StackBlitz-Projekts haben, können Ihren Code sehen und Ihr Projekt forken, aber sie können Ihr StackBlitz-Projekt nicht bearbeiten.

1. Den Startcode finden Sie unter https://stackblitz.com/edit/firebase-gtk-web-start.
2. Klicken Sie oben auf der StackBlitz-Seite auf Fork:

Sie haben jetzt eine Kopie des Startcodes als eigenes StackBlitz-Projekt mit einem eindeutigen Namen und einer eindeutigen URL. Alle Ihre Dateien und Änderungen werden in diesem StackBlitz-Projekt gespeichert.

Falls Sie den Faden verlieren, finden Sie in diesem Codelab an verschiedenen Stellen StackBlitz-Links, die mit dem bis dahin hinzugefügten Code aktualisiert wurden.

Achten Sie darauf, dass Sie an diesen Kontrollpunkten zwei Dinge tun:

1. Führen Sie einen Fork des Projekts aus, damit es Ihnen gehört.
2. Fügen Sie das Konfigurationsobjekt Ihres Firebase-Projekts aus der Firebase Console hinzu (weitere Informationen dazu finden Sie später in diesem Codelab).

3. Ereignisinformationen bearbeiten

Die Startmaterialien für dieses Codelab bieten eine gewisse Struktur für die Web-App, einschließlich einiger Stylesheets und einiger HTML-Container für die App. Später in diesem Codelab verbinden Sie diese Container mit Firebase.

Sehen wir uns zuerst die StackBlitz-Oberfläche an.

1. Öffnen Sie in StackBlitz die Datei index.html.
2. Suchen Sie nach event-details-container und description-container und bearbeiten Sie dann einige Termindetails.

Wenn Sie den Text bearbeiten, werden die neuen Ereignisdetails durch das automatische Neuladen der Seite in StackBlitz angezeigt. Cool, oder?

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>

<!-- ... -->

Die Vorschau Ihrer App sollte in etwa so aussehen:

App-Vorschau

4. Firebase-Projekt erstellen und einrichten

Die Anzeige der Ereignisinformationen ist zwar gut für Ihre Gäste, aber die bloße Anzeige der Ereignisse ist für niemanden sehr nützlich. Wir fügen dieser App nun einige dynamische Funktionen hinzu. Dazu müssen Sie Firebase mit Ihrer App verknüpfen. Um mit Firebase zu beginnen, müssen Sie ein Firebase-Projekt erstellen und einrichten.

Firebase-Projekt erstellen

1. Melden Sie sich mit Ihrem Google-Konto in der Firebase Console an.
2. Klicken Sie auf die Schaltfläche zum Erstellen eines neuen Projekts und geben Sie einen Projektnamen ein (z. B. Firebase-Web-Codelab).
3. Klicken Sie auf Weiter.
4. Lesen und akzeptieren Sie bei Aufforderung die Firebase-Nutzungsbedingungen und klicken Sie dann auf Weiter.
5. (Optional) Aktivieren Sie die KI-Unterstützung in der Firebase Console (als „Gemini in Firebase“ bezeichnet).
6. Für dieses Codelab benötigen Sie kein Google Analytics. Deaktivieren Sie daher die Google Analytics-Option.
7. Klicken Sie auf Projekt erstellen, warten Sie, bis Ihr Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter.

Weitere Informationen zu Firebase-Projekten

Firebase-Produkte in der Console aktivieren und einrichten

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

• Firebase Authentication und Firebase UI ermöglichen 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.
• Firebase-Sicherheitsregeln zum Sichern Ihrer Datenbank.

Für einige dieser Produkte ist eine spezielle Konfiguration erforderlich oder sie müssen über die Firebase Console aktiviert werden.

E-Mail-Log-in für Firebase Authentication aktivieren

Damit sich Nutzer in der Web-App anmelden können, verwenden Sie in diesem Codelab die Anmeldemethode E‑Mail-Adresse/Passwort:

1. Klicken Sie in der Firebase Console im linken Bereich auf Build > Authentifizierung. Klicken Sie dann auf Jetzt starten. Sie befinden sich jetzt im Authentifizierungs-Dashboard. Dort können Sie registrierte Nutzer sehen, Anmeldeanbieter konfigurieren und Einstellungen verwalten. 
   
   
   
   
2. Wählen Sie den Tab Anmeldemethode aus (oder klicken Sie hier, um direkt zum Tab zu gelangen).
   
   
   
   
3. Klicken Sie in den Anbieteroptionen auf E-Mail/Passwort, stellen Sie den Schalter auf Aktivieren und klicken Sie dann auf Speichern.
   
   
   
   

Cloud Firestore einrichten

Die Web-App verwendet Cloud Firestore zum Speichern von Chat-Nachrichten und zum Empfangen neuer Chat-Nachrichten.

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 Database ID (Datenbank-ID) auf (default).
4. Wählen Sie einen Speicherort für Ihre Datenbank aus und klicken Sie auf Weiter.
   Für eine echte App sollten Sie einen Speicherort auswählen, der sich in der Nähe Ihrer Nutzer befindet.
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 Sie eine App nicht öffentlich, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
6. Klicken Sie auf Erstellen.

5. Firebase hinzufügen und konfigurieren

Nachdem Sie Ihr Firebase-Projekt erstellt und einige Dienste aktiviert haben, müssen Sie dem Code mitteilen, dass Sie Firebase verwenden möchten und welches Firebase-Projekt verwendet werden soll.

Firebase-Bibliotheken hinzufügen

Damit Ihre App Firebase verwenden kann, müssen Sie die Firebase-Bibliotheken zur App hinzufügen. Dazu gibt es mehrere Möglichkeiten, die in der Firebase-Dokumentation beschrieben sind. Sie können die Bibliotheken beispielsweise über das CDN von Google hinzufügen oder sie lokal mit npm installieren und dann in Ihrer App verpacken, wenn Sie Browserify verwenden.

StackBlitz bietet automatisches Bündeln, sodass Sie die Firebase-Bibliotheken mit Importanweisungen hinzufügen können. Sie verwenden die modularen (v9-)Versionen der Bibliotheken, die durch das sogenannte „Tree Shaking“ dazu beitragen, die Gesamtgröße der Webseite zu reduzieren. Weitere Informationen zu modularen SDKs finden Sie in der Dokumentation.

Für diese App verwenden Sie die Bibliotheken für die Firebase-Authentifizierung, FirebaseUI und Cloud Firestore. Für dieses Codelab sind die folgenden Importanweisungen bereits oben in der Datei index.js enthalten. Wir werden im Laufe des Codelabs weitere Methoden aus den einzelnen Firebase-Bibliotheken importieren:

// Import stylesheets
import './style.css';

// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

Eine Firebase-Web-App zu Ihrem Firebase-Projekt hinzufügen

1. Klicken Sie in der Firebase Console oben links auf Projektübersicht, um zur Übersichtsseite Ihres Projekts zurückzukehren.
2. Klicken Sie in der Mitte der Übersichtsseite Ihres Projekts auf das Websymbol , um eine neue Firebase-Web-App zu erstellen.
   
   
   
   
3. Registrieren Sie die App mit dem Alias Web-App.
4. Klicken Sie für dieses Codelab NICHT das Kästchen neben Firebase Hosting für diese App einrichten an. Sie verwenden vorerst den Vorschaubereich von StackBlitz.
5. Klicken Sie auf App registrieren.

   Stackblitz verwaltet Ihre Abhängigkeiten für Sie. Sie können also den Schritt npm install firebase überspringen, der in der Konsole angezeigt wird.

   
   
   
   
   
6. Kopieren Sie das Firebase-Konfigurationsobjekt in die Zwischenablage.
   
   
   
   
7. Klicken Sie auf Zur Console.Fügen Sie das Firebase-Konfigurationsobjekt Ihrer App hinzu:
8. Kehren Sie in StackBlitz zur Datei index.js zurück.
9. Suchen Sie die Kommentarzeile Add Firebase project configuration object here und fügen Sie das Konfigurations-Snippet direkt darunter ein.
10. Fügen Sie den Funktionsaufruf initializeApp hinzu, um Firebase mit Ihrer eindeutigen Firebase-Projektkonfiguration einzurichten.

    // ...
    // Add Firebase project configuration object here
    const firebaseConfig = {
      apiKey: "random-unique-string",
      authDomain: "your-projectId.firebaseapp.com",
      databaseURL: "https://your-projectId.firebaseio.com",
      projectId: "your-projectId",
      storageBucket: "your-projectId.firebasestorage.app",
      messagingSenderId: "random-unique-string",
      appId: "random-unique-string",
    };
    
    // Initialize Firebase
    initializeApp(firebaseConfig);
    

Wenn du das firebaseConfig-Snippet verpasst hast (oder es an einem Prüfpunkt benötigst)…

Sie können das Firebase-Projektkonfigurationsobjekt in der Firebase Console abrufen.

1. Klicken Sie in der Firebase Console oben links auf das Symbol für die Einstellungen und wählen Sie dann Projekteinstellungen aus.
2. Scrollen Sie auf dem Tab Allgemein nach unten zur Karte Meine Apps.
3. Klicken Sie auf Ihre Web-App und wählen Sie dann die Option Config für den Firebase SDK-Snippet aus.
4. Kopieren Sie das gesamte Konfigurations-Snippet in die Zwischenablage.

6. Nutzeranmeldung (Antwort) hinzufügen

Nachdem Sie Firebase der App hinzugefügt haben, können Sie eine Schaltfläche zum Bestätigen der Teilnahme einrichten, mit der Personen über Firebase Authentication registriert werden.

Nutzer mit E-Mail-Anmeldung und FirebaseUI authentifizieren

Sie benötigen eine Schaltfläche zum Antworten, über die der Nutzer aufgefordert wird, sich mit seiner E‑Mail-Adresse anzumelden. Dazu können Sie FirebaseUI mit einer RSVP-Schaltfläche verknüpfen.FirebaseUI ist eine Bibliothek, die eine vorgefertigte UI für Firebase Auth bietet.

Für FirebaseUI ist eine Konfiguration erforderlich (siehe die Optionen in der Dokumentation), die zwei Dinge bewirkt:

• Teilt FirebaseUI mit, dass Sie die Anmeldemethode E-Mail/Passwort verwenden möchten.
• Verarbeitet den Callback für eine erfolgreiche Anmeldung und gibt „false“ zurück, um eine Weiterleitung zu vermeiden. Sie möchten nicht, dass die Seite aktualisiert wird, da Sie eine einseitige Web-App entwickeln.

Code zum Initialisieren von FirebaseUI Auth hinzufügen

1. Rufen Sie in StackBlitz die Datei index.js auf.
2. Suchen Sie oben nach der Importanweisung firebase/auth und fügen Sie dann getAuth und EmailAuthProvider hinzu:

   // ...
   // Add the Firebase products and methods that you want to use
   import { getAuth, EmailAuthProvider } from 'firebase/auth';
   
   import {} from 'firebase/firestore';
   

3. Speichern Sie direkt nach initializeApp einen Verweis auf das Auth-Objekt:

   initializeApp(firebaseConfig);
   auth = getAuth();
   

4. Die FirebaseUI-Konfiguration ist bereits im Startcode enthalten. Es ist bereits für die Verwendung des E‑Mail-Authentifizierungsanbieters eingerichtet.
5. Fügen Sie am Ende der Funktion main() in index.js die FirebaseUI-Initialisierungsanweisung ein:

   async function main() {
     // ...
   
     // Initialize the FirebaseUI widget using Firebase
     const ui = new firebaseui.auth.AuthUI(auth);
   }
   main();
   
   

Dem HTML-Code eine Schaltfläche zum Antworten hinzufügen

1. Rufen Sie in StackBlitz die Datei index.html auf.
2. Fügen Sie den HTML-Code für eine Schaltfläche zum Bestätigen der Teilnahme in das event-details-container-Tag ein, wie im Beispiel unten gezeigt.
   
   Achten Sie darauf, dieselben id-Werte wie unten zu verwenden, da für dieses Codelab bereits Hooks für diese spezifischen IDs in der Datei index.js vorhanden sind.
   
   In der Datei index.html ist ein Container mit der ID firebaseui-auth-container vorhanden. Diese ID wird an FirebaseUI übergeben, um Ihre Anmeldung zu speichern.

   <!-- ... -->
   
   <section id="event-details-container">
       <!-- ... -->
       <!-- ADD THE RSVP BUTTON HERE -->
       <button id="startRsvp">RSVP</button>
   </section>
   <hr>
   <section id="firebaseui-auth-container"></section>
   <!-- ... -->
   

   App-Vorschau
   
   
   
   
3. Richten Sie einen Listener für die Schaltfläche „Zusagen“ ein und rufen Sie die FirebaseUI-Startfunktion auf. Dadurch wird FirebaseUI mitgeteilt, dass Sie das Anmeldefenster sehen möchten.
   
    Fügen Sie den folgenden Code am Ende der Funktion main() in index.js ein:

   async function main() {
     // ...
   
     // Listen to RSVP button clicks
     startRsvpButton.addEventListener("click",
      () => {
           ui.start("#firebaseui-auth-container", uiConfig);
     });
   }
   main();
   

Anmeldung in der App testen

1. Klicken Sie im Vorschaufenster von StackBlitz auf die Schaltfläche „RSVP“, um sich in der App anzumelden.
   • Für dieses Codelab können Sie eine beliebige E‑Mail-Adresse verwenden, auch eine gefälschte, da Sie für dieses Codelab keinen Schritt zur E‑Mail-Bestätigung einrichten.
   • Wenn Sie eine Fehlermeldung mit auth/operation-not-allowed oder The given sign-in provider is disabled for this Firebase project erhalten, prüfen Sie, ob Sie E-Mail/Passwort als Anmeldeanbieter in der Firebase-Konsole aktiviert haben.
   App-Vorschau
   
   
   
   
2. Rufen Sie in der Firebase Console das Dashboard für die Authentifizierung auf. Auf dem Tab Nutzer sollten die Kontoinformationen angezeigt werden, die Sie zum Anmelden in der App eingegeben haben.
   
   
   
   

Tipp: In der Firebase-Dokumentation erfahren Sie, wie Sie FirebaseUI und Firebase Authentication verwenden, um Ihrer App Anbieter für die Anmeldung über soziale Netzwerke (z. B. GitHub, Google und Facebook) hinzuzufügen.

Authentifizierungsstatus der Benutzeroberfläche hinzufügen

Prüfen Sie als Nächstes, ob die Benutzeroberfläche anzeigt, dass Sie angemeldet sind.

Sie verwenden den Callback des Firebase Authentication-Status-Listeners, der immer dann benachrichtigt wird, wenn sich der Anmeldestatus des Nutzers ändert. Wenn derzeit ein Nutzer angemeldet ist, wird die Schaltfläche „Zusagen“ in Ihrer App in eine Schaltfläche zum Abmelden geändert.

1. Rufen Sie in StackBlitz die Datei index.js auf.
2. Suchen Sie oben nach der Importanweisung firebase/auth und fügen Sie dann signOut und onAuthStateChanged hinzu:

   // ...
   // Add the Firebase products and methods that you want to use
   import {
     getAuth,
     EmailAuthProvider,
     signOut,
     onAuthStateChanged
   } from 'firebase/auth';
   
   import {} from 'firebase/firestore';
   

3. Fügen Sie am Ende der Funktion main() den folgenden Code hinzu:

   async function main() {
     // ...
   
     // Listen to the current Auth state
     onAuthStateChanged(auth, user => {
       if (user) {
         startRsvpButton.textContent = 'LOGOUT';
       } else {
         startRsvpButton.textContent = 'RSVP';
       }
     });
   }
   main();
   

4. Prüfen Sie im Button-Listener, ob ein aktueller Nutzer vorhanden ist, und melden Sie ihn ab. Ersetzen Sie dazu die aktuelle startRsvpButton.addEventListener durch Folgendes:

   // ...
   // Called when the user clicks the RSVP button
   startRsvpButton.addEventListener('click', () => {
     if (auth.currentUser) {
       // User is signed in; allows user to sign out
       signOut(auth);
     } else {
       // No user is signed in; allows user to sign in
       ui.start('#firebaseui-auth-container', uiConfig);
     }
   });
   

Auf der Schaltfläche in Ihrer App sollte jetzt ABMELDEN angezeigt werden. Wenn darauf geklickt wird, sollte sie wieder zu ZUSAGEN wechseln.

App-Vorschau

Haben Sie das Gefühl, dass Sie nicht weiterkommen oder vom richtigen Weg abgekommen sind? Hier ist ein StackBlitz-Link, der mit dem gesamten Code aktualisiert wurde, der bis zu diesem Punkt des Codelabs hinzugefügt wurde: https://stackblitz.com/edit/firebase-gtk-web-checkpoint1

An diesem Kontrollpunkt müssen Sie zwei Dinge tun:

1. Führen Sie einen Fork des Projekts aus, damit es Ihnen gehört.
2. Fügen Sie das Konfigurationsobjekt Ihres Firebase-Projekts aus der Firebase Console hinzu.

7. Nachrichten in Cloud Firestore schreiben

Es ist toll, dass Nutzer kommen, aber wir sollten ihnen in der App noch etwas anderes bieten. Was wäre, wenn sie Nachrichten in einem Gästebuch hinterlassen könnten? Sie können schreiben, warum sie sich auf die Veranstaltung freuen oder wen sie dort treffen möchten.

Zum Speichern der Chat-Nachrichten, die Nutzer in der App schreiben, verwenden Sie Cloud Firestore.

Datenmodell

Cloud Firestore ist eine NoSQL-Datenbank. Die darin gespeicherten Daten werden in Sammlungen, Dokumente, Felder und untergeordnete Sammlungen aufgeteilt. Jede Nachricht des Chats wird als Dokument in einer Sammlung auf oberster Ebene namens guestbook gespeichert.

Tipp: Weitere Informationen zum Cloud Firestore-Datenmodell finden Sie in der Cloud Firestore-Dokumentation unter „Dokumente und Sammlungen“. Sie können sich auch eine tolle Videoserie ansehen, in der das Cloud Firestore-NoSQL-Datenmodell, Abfragen und andere interessante Funktionen von Cloud Firestore beschrieben werden.

Nachrichten in Firestore hinzufügen

In diesem Abschnitt fügen Sie die Funktion hinzu, mit der Nutzer neue Nachrichten in die Datenbank schreiben können. Zuerst fügen Sie den HTML-Code für die UI-Elemente (Nachrichtenfeld und Schaltfläche „Senden“) hinzu. Anschließend fügen Sie den Code hinzu, mit dem diese Elemente mit der Datenbank verknüpft werden.

So fügen Sie die UI-Elemente eines Nachrichtenfelds und einer Schaltfläche zum Senden hinzu:

1. Rufen Sie in StackBlitz die Datei index.html auf.
2. Suchen Sie nach guestbook-container und fügen Sie dann den folgenden HTML-Code ein, um ein Formular mit dem Nachrichteneingabefeld und der Schaltfläche „Senden“ zu erstellen.

   <!-- ... -->
   
    <section id="guestbook-container">
      <h2>Discussion</h2>
   
      <form id="leave-message">
        <label>Leave a message: </label>
        <input type="text" id="message">
        <button type="submit">
          <i class="material-icons">send</i>
          <span>SEND</span>
        </button>
      </form>
   
    </section>
   
   <!-- ... -->
   

App-Vorschau

Nutzer, die auf die Schaltfläche SENDEN klicken, lösen das folgende Code-Snippet aus. Es fügt den Inhalt des Nachrichteneingabefelds der Sammlung guestbook der Datenbank hinzu. Mit der Methode addDoc wird der Nachrichteninhalt einem neuen Dokument (mit einer automatisch generierten ID) in der Sammlung guestbook hinzugefügt.

1. Rufen Sie in StackBlitz die Datei index.js auf.
2. Suchen Sie oben nach der Importanweisung firebase/firestore und fügen Sie dann getFirestore, addDoc und collection hinzu:

   // ...
   
   // Add the Firebase products and methods that you want to use
   import {
     getAuth,
     EmailAuthProvider,
     signOut,
     onAuthStateChanged
   } from 'firebase/auth';
   
   import {
     getFirestore,
     addDoc,
     collection
   } from 'firebase/firestore';
   

3. Jetzt speichern wir direkt nach initializeApp einen Verweis auf das Firestore-db-Objekt:

   initializeApp(firebaseConfig);
   auth = getAuth();
   db = getFirestore();
   

4. Fügen Sie am Ende der Funktion main() den folgenden Code ein.
   
    auth.currentUser.uid ist ein Verweis auf die automatisch generierte eindeutige ID, die Firebase Authentication für alle angemeldeten Nutzer bereitstellt.

   async function main() {
     // ...
   
     // Listen to the form submission
     form.addEventListener('submit', async e => {
       // Prevent the default form redirect
       e.preventDefault();
       // Write a new message to the database collection "guestbook"
       addDoc(collection(db, 'guestbook'), {
         text: input.value,
         timestamp: Date.now(),
         name: auth.currentUser.displayName,
         userId: auth.currentUser.uid
       });
       // clear message input field
       input.value = '';
       // Return false to avoid redirect
       return false;
     });
   }
   main();
   

Gästebuch nur angemeldeten Nutzern anzeigen

Sie möchten nicht, dass irgendjemand den Chat der Gäste sieht. Eine Möglichkeit, den Chat zu schützen, besteht darin, nur angemeldeten Nutzern die Anzeige des Gästebuchs zu erlauben. Für Ihre eigenen Apps sollten Sie Ihre Datenbank jedoch auch mit Firebase-Sicherheitsregeln schützen. Weitere Informationen zu Sicherheitsregeln finden Sie später in diesem Codelab.

1. Rufen Sie in StackBlitz die Datei index.js auf.
2. Bearbeiten Sie den onAuthStateChanged-Listener, um das Gästebuch ein- und auszublenden.

   // ...
   
   // Listen to the current Auth state
   onAuthStateChanged(auth, user => {
     if (user) {
       startRsvpButton.textContent = 'LOGOUT';
       // Show guestbook to logged-in users
       guestbookContainer.style.display = 'block';
     } else {
       startRsvpButton.textContent = 'RSVP';
       // Hide guestbook for non-logged-in users
       guestbookContainer.style.display = 'none';
     }
   });
   

Das Senden von Nachrichten testen

1. Achten Sie darauf, dass Sie in der App angemeldet sind.
2. Geben Sie eine Nachricht ein, z. B. „Hallo!“, und klicken Sie auf SENDEN.

Mit dieser Aktion wird die Nachricht in Ihre Cloud Firestore-Datenbank geschrieben. Die Nachricht wird jedoch nicht in der eigentlichen Web-App angezeigt, da Sie das Abrufen der Daten noch implementieren müssen. Das kommt als Nächstes.

Die neu hinzugefügte Nachricht wird jedoch in der Firebase Console angezeigt.

Im Firestore-Datenbank-Dashboard in der Firebase Console sollte die Sammlung guestbook mit der neu hinzugefügten Nachricht angezeigt werden. Wenn Sie weiterhin Nachrichten senden, enthält Ihre Gästebuchsammlung viele Dokumente, z. B.:

Firebase Console

Haben Sie das Gefühl, dass Sie nicht weiterkommen oder vom richtigen Weg abgekommen sind? Hier ist ein StackBlitz-Link, der mit dem gesamten Code aktualisiert wird, der bis zu diesem Punkt des Codelabs hinzugefügt wurde: https://stackblitz.com/edit/firebase-gtk-web-checkpoint2

An diesem Kontrollpunkt müssen Sie zwei Dinge tun:

1. Führen Sie einen Fork des Projekts aus, damit es Ihnen gehört.
2. Fügen Sie das Konfigurationsobjekt Ihres Firebase-Projekts aus der Firebase Console hinzu.

8. Nachrichten lesen

Nachrichten synchronisieren

Es ist schön, dass Gäste Nachrichten in die Datenbank schreiben können, aber sie können sie noch nicht in der App sehen.

Um Nachrichten anzuzeigen, müssen Sie Listener hinzufügen, die ausgelöst werden, 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. Fügen Sie zuerst einen Abschnitt in den HTML-Code ein, in dem Nachrichten angezeigt werden:

1. Rufen Sie in StackBlitz die Datei index.html auf.
2. Fügen Sie in guestbook-container einen neuen Abschnitt mit der ID guestbook hinzu.

   <!-- ... -->
   
     <section id="guestbook-container">
      <h2>Discussion</h2>
   
      <form><!-- ... --></form>
   
      <section id="guestbook"></section>
   
    </section>
   
   <!-- ... -->
   

Registrieren Sie als Nächstes den Listener, der auf Änderungen an den Daten wartet:

1. Rufen Sie in StackBlitz die Datei index.js auf.
2. Suchen Sie oben nach der Importanweisung firebase/firestore und fügen Sie dann query, orderBy und onSnapshot hinzu:

   // ...
   import {
     getFirestore,
     addDoc,
     collection,
     query,
     orderBy,
     onSnapshot
   } from 'firebase/firestore';
   

3. Fügen Sie unten in der Funktion main() den folgenden Code ein, um alle Dokumente (Gästebuchnachrichten) in der Datenbank zu durchlaufen. Weitere Informationen dazu, was in diesem Code passiert, finden Sie unter dem Snippet.

   async function main() {
     // ...
   
     // Create query for messages
     const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
     onSnapshot(q, snaps => {
       // Reset page
       guestbook.innerHTML = '';
       // Loop through documents in database
       snaps.forEach(doc => {
         // Create an HTML entry for each document and add it to the chat
         const entry = document.createElement('p');
         entry.textContent = doc.data().name + ': ' + doc.data().text;
         guestbook.appendChild(entry);
       });
     });
   }
   main();
   

Um Nachrichten in der Datenbank anzuhören, haben Sie eine Abfrage für eine bestimmte Sammlung mit der Funktion collection erstellt. Der Code oben überwacht die Änderungen in der Sammlung guestbook, in der die Chatnachrichten gespeichert werden. Die Nachrichten sind auch nach Datum sortiert. Mit orderBy('timestamp', 'desc') werden die neuesten Nachrichten oben angezeigt.

Die Funktion onSnapshot verwendet zwei Parameter: die zu verwendende Abfrage und eine Callback-Funktion. 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.

Tipp: Wenn Sie nur die geänderten Dokumente aktualisieren, anstatt die gesamte Liste, geht das schneller. Weitere Informationen finden Sie in der Cloud Firestore-Dokumentation.

Nachrichtensynchronisierung testen

Cloud Firestore synchronisiert Daten automatisch und sofort mit Clients, die die Datenbank abonniert haben.

• Die Nachrichten, die Sie zuvor in der Datenbank erstellt haben, sollten in der App angezeigt werden. Sie können auch neue Nachrichten schreiben, die dann sofort angezeigt werden sollten.
• Wenn Sie Ihren Arbeitsbereich in mehreren Fenstern oder Tabs öffnen, werden Nachrichten in Echtzeit zwischen den Tabs synchronisiert.
• (Optional) Sie können auch versuchen, neue Nachrichten direkt im Datenbank-Bereich der Firebase Console manuell zu löschen, zu modifizieren oder hinzuzufügen. Die Änderungen sollten in der UI sichtbar sein.

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

App-Vorschau

Haben Sie das Gefühl, dass Sie nicht weiterkommen oder vom richtigen Weg abgekommen sind? Hier ist ein StackBlitz-Link, der mit dem gesamten Code aktualisiert wurde, der bis zu diesem Punkt des Codelabs hinzugefügt wurde: https://stackblitz.com/edit/firebase-gtk-web-checkpoint3

An diesem Kontrollpunkt müssen Sie zwei Dinge tun:

1. Führen Sie einen Fork des Projekts aus, damit es Ihnen gehört.
2. Fügen Sie das Konfigurationsobjekt Ihres Firebase-Projekts aus der Firebase Console hinzu.

9. Einfache Sicherheitsregeln einrichten

Sie haben Cloud Firestore ursprünglich für die Verwendung des Testmodus eingerichtet. Das bedeutet, dass Ihre Datenbank für Lese- und Schreibvorgänge geöffnet ist. Der Testmodus sollte jedoch nur in sehr frühen Entwicklungsphasen verwendet werden. Es empfiehlt sich, Sicherheitsregeln für Ihre Datenbank einzurichten, während Sie Ihre App entwickeln. Sicherheit sollte ein integraler Bestandteil der Struktur und des Verhaltens Ihrer App sein.

Mit Sicherheitsregeln können Sie den Zugriff auf Dokumente und Sammlungen in Ihrer Datenbank steuern. Mit der flexiblen Regelsyntax können Sie Regeln für beliebige Bereiche erstellen – von sämtlichen Schreibvorgängen über die gesamte Datenbank bis hin zu Vorgängen in einem bestimmten Dokument.

Sie können Sicherheitsregeln für Cloud Firestore in der Firebase Console schreiben:

1. Klicken Sie in der Firebase Console im Abschnitt Build auf Firestore-Datenbank und wählen Sie dann den Tab Regeln aus (oder klicken Sie hier, um direkt zum Tab Regeln zu gelangen).
2. Sie sollten die folgenden Standardsicherheitsregeln mit einem Zeitlimit für den öffentlichen Zugriff sehen, das einige Wochen nach dem aktuellen Datum liegt.

Weitere Informationen zu Sicherheitsregeln finden Sie in der Dokumentation zu Firebase-Sicherheitsregeln oder in dieser YouTube-Playlist.

Sammlungen identifizieren

Ermitteln Sie zuerst die Sammlungen, in die die App Daten schreibt.

1. Löschen Sie die vorhandene match /{document=**}-Klausel, damit Ihre Regeln so aussehen:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
     }
   }
   

2. Geben Sie in match /databases/{database}/documents die Sammlung an, die Sie schützen möchten:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /guestbook/{entry} {
        // You'll add rules here in the next step.
     }
   }
   

Sicherheitsregeln hinzufügen

Da Sie die Authentifizierungs-UID als Feld in jedem Gästebuchdokument verwendet haben, können Sie die Authentifizierungs-UID abrufen und prüfen, ob jeder, der versucht, in das Dokument zu schreiben, eine passende Authentifizierungs-UID hat.

1. Fügen Sie Ihrem Regelsatz die Lese- und Schreibregeln hinzu, wie unten dargestellt:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /guestbook/{entry} {
         allow read: if request.auth.uid != null;
         allow create:
           if request.auth.uid == request.resource.data.userId;
       }
     }
   }
   

2. Klicken Sie auf Veröffentlichen, um die neuen Regeln bereitzustellen.Im Gästebuch können jetzt nur noch angemeldete Nutzer Nachrichten lesen (alle Nachrichten!), aber Sie können nur mit Ihrer Nutzer-ID eine Nachricht erstellen. Außerdem dürfen Nachrichten nicht bearbeitet oder gelöscht werden.

Validierungsregeln hinzufügen

1. Fügen Sie die Datenvalidierung hinzu, um sicherzustellen, dass alle erwarteten Felder im Dokument vorhanden sind:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /guestbook/{entry} {
         allow read: if request.auth.uid != null;
         allow create:
         if request.auth.uid == request.resource.data.userId
             && "name" in request.resource.data
             && "text" in request.resource.data
             && "timestamp" in request.resource.data;
       }
     }
   }
   

2. Klicken Sie auf Veröffentlichen, um die neuen Regeln bereitzustellen.

Listener zurücksetzen

Da sich jetzt nur noch authentifizierte Nutzer in Ihrer App anmelden können, sollten Sie die firestore-Abfrage für das Gästebuch in den Authentication-Listener verschieben. Andernfalls treten Berechtigungsfehler auf und die Verbindung zur App wird getrennt, wenn sich der Nutzer abmeldet.

1. Rufen Sie in StackBlitz die Datei index.js auf.
2. Verschieben Sie den Listener für die Gästebuchsammlung onSnapshot in eine neue Funktion namens subscribeGuestbook. Weisen Sie außerdem die Ergebnisse der Funktion onSnapshot der Variablen guestbookListener zu.
   
    Der Firestore-onSnapshot-Listener gibt eine Funktion zum Abmelden zurück, mit der Sie den Snapshot-Listener später abbrechen können.

   // ...
   // Listen to guestbook updates
   function subscribeGuestbook() {
     const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
     guestbookListener = onSnapshot(q, snaps => {
       // Reset page
       guestbook.innerHTML = '';
       // Loop through documents in database
       snaps.forEach(doc => {
         // Create an HTML entry for each document and add it to the chat
         const entry = document.createElement('p');
         entry.textContent = doc.data().name + ': ' + doc.data().text;
         guestbook.appendChild(entry);
       });
     });
   }
   

3. Fügen Sie darunter eine neue Funktion mit dem Namen unsubscribeGuestbook hinzu. Prüfen Sie, ob die Variable guestbookListener nicht null ist, und rufen Sie dann die Funktion auf, um den Listener abzubrechen.

   // ...
   // Unsubscribe from guestbook updates
   function unsubscribeGuestbook() {
     if (guestbookListener != null) {
       guestbookListener();
       guestbookListener = null;
     }
   }
   

Fügen Sie die neuen Funktionen schließlich dem onAuthStateChanged-Callback hinzu.

4. Fügen Sie subscribeGuestbook() unten in if (user) ein.
5. Fügen Sie unsubscribeGuestbook() unten in die else-Anweisung ein.

   // ...
   // Listen to the current Auth state
   onAuthStateChanged(auth, user => {
     if (user) {
       startRsvpButton.textContent = 'LOGOUT';
       // Show guestbook to logged-in users
       guestbookContainer.style.display = 'block';
       // Subscribe to the guestbook collection
       subscribeGuestbook();
     } else {
       startRsvpButton.textContent = 'RSVP';
       // Hide guestbook for non-logged-in users
       guestbookContainer.style.display = 'none';
       // Unsubscribe from the guestbook collection
       unsubscribeGuestbook();
     }
   });
   

Haben Sie das Gefühl, dass Sie nicht weiterkommen oder vom richtigen Weg abgekommen sind? Hier ist ein StackBlitz-Link, der mit dem gesamten Code aktualisiert wurde, der bis zu diesem Punkt des Codelabs hinzugefügt wurde: https://stackblitz.com/edit/firebase-gtk-web-checkpoint4.

An diesem Kontrollpunkt müssen Sie zwei Dinge tun:

1. Führen Sie einen Fork des Projekts aus, damit es Ihnen gehört.
2. Fügen Sie das Konfigurationsobjekt Ihres Firebase-Projekts aus der Firebase Console hinzu.

10. Bonusschritt: Das Gelernte üben

Anmeldestatus eines Teilnehmers aufzeichnen

Derzeit können Nutzer nur dann mit dem Chatten beginnen, wenn sie sich für die Veranstaltung interessieren. Außerdem erfahren Sie nur dann, ob jemand kommt, wenn er es im Chat postet. Lass uns das organisieren und die Leute wissen lassen, wie viele kommen.

Sie fügen einen Schalter hinzu, um Personen zu registrieren, die an der Veranstaltung teilnehmen möchten, und erfassen dann die Anzahl der Teilnehmer.

1. Rufen Sie in StackBlitz die Datei index.html auf.
2. Fügen Sie in guestbook-container eine Reihe von YES- und NO-Schaltflächen ein:

   <!-- ... -->
     <section id="guestbook-container">
      <h2>Are you attending?</h2>
        <button id="rsvp-yes">YES</button>
        <button id="rsvp-no">NO</button>
   
      <h2>Discussion</h2>
   
      <!-- ... -->
   
    </section>
   <!-- ... -->
   

App-Vorschau

Registrieren Sie als Nächstes den Listener für Schaltflächenklicks. Wenn der Nutzer auf JA klickt, speichern Sie die Antwort mit seiner Authentifizierungs-UID in der Datenbank.

1. Rufen Sie in StackBlitz die Datei index.js auf.
2. Suchen Sie oben nach der Importanweisung firebase/firestore und fügen Sie dann doc, setDoc und where hinzu:

   // ...
   // Add the Firebase products and methods that you want to use
   import {
     getFirestore,
     addDoc,
     collection,
     query,
     orderBy,
     onSnapshot,
     doc,
     setDoc,
     where
   } from 'firebase/firestore';
   

3. Fügen Sie am Ende der Funktion main() den folgenden Code hinzu, um den RSVP-Status zu erfassen:

   async function main() {
     // ...
   
     // Listen to RSVP responses
     rsvpYes.onclick = async () => {
     };
     rsvpNo.onclick = async () => {
     };
   }
   main();
   
   

4. Erstellen Sie als Nächstes eine neue Sammlung mit dem Namen attendees und registrieren Sie eine Dokumentreferenz, wenn auf eine der beiden RSVP-Schaltflächen geklickt wird. Legen Sie diese Referenz auf true oder false fest, je nachdem, auf welche Schaltfläche geklickt wird.
   
    Zuerst für rsvpYes:

   // ...
   // Listen to RSVP responses
   rsvpYes.onclick = async () => {
     // Get a reference to the user's document in the attendees collection
     const userRef = doc(db, 'attendees', auth.currentUser.uid);
   
     // If they RSVP'd yes, save a document with attendi()ng: true
     try {
       await setDoc(userRef, {
         attending: true
       });
     } catch (e) {
       console.error(e);
     }
   };
   

   Dasselbe gilt für rsvpNo, aber mit dem Wert false:

   rsvpNo.onclick = async () => {
     // Get a reference to the user's document in the attendees collection
     const userRef = doc(db, 'attendees', auth.currentUser.uid);
   
     // If they RSVP'd yes, save a document with attending: true
     try {
       await setDoc(userRef, {
         attending: false
       });
     } catch (e) {
       console.error(e);
     }
   };
   

Sicherheitsregeln aktualisieren

Da Sie bereits einige Regeln eingerichtet haben, werden die neuen Daten, die Sie mit den Schaltflächen hinzufügen, abgelehnt.

Ergänzungen zur Sammlung attendees zulassen

Sie müssen die Regeln aktualisieren, damit Elemente der Sammlung attendees hinzugefügt werden können.

1. Da Sie für die Sammlung attendees die Authentifizierungs-UID als Dokumentnamen verwendet haben, können Sie sie abrufen und prüfen, ob die uid des Absenders mit dem Dokument übereinstimmt, das er schreibt. Sie erlauben allen, die Teilnehmerliste zu lesen, da sie keine privaten Daten enthält. Nur der Ersteller sollte sie jedoch aktualisieren können.

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       // ... //
       match /attendees/{userId} {
         allow read: if true;
         allow write: if request.auth.uid == userId;
       }
     }
   }
   

2. Klicken Sie auf Veröffentlichen, um die neuen Regeln bereitzustellen.

Validierungsregeln hinzufügen

1. Fügen Sie einige Regeln zur Datenvalidierung hinzu, um sicherzustellen, dass alle erwarteten Felder im Dokument vorhanden sind:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       // ... //
       match /attendees/{userId} {
         allow read: if true;
         allow write: if request.auth.uid == userId
             && "attending" in request.resource.data;
   
       }
     }
   }
   

2. Vergessen Sie nicht, auf Veröffentlichen zu klicken, um Ihre Regeln bereitzustellen.
   

Optional: Sie können sich jetzt die Ergebnisse des Klickens auf die Schaltflächen ansehen. Rufen Sie das Cloud Firestore-Dashboard in der Firebase Console auf.

Antwortstatus lesen

Nachdem Sie die Antworten aufgezeichnet haben, sehen wir uns an, wer kommt, und spiegeln das in der Benutzeroberfläche wider.

1. Rufen Sie in StackBlitz die Datei index.html auf.
2. Fügen Sie in description-container ein neues Element mit der ID number-attending hinzu.

   <!-- ... -->
   
    <section id="description-container">
        <!-- ... -->
        <p id="number-attending"></p>
    </section>
   
   <!-- ... -->
   

Registrieren Sie als Nächstes den Listener für die attendees-Sammlung und zählen Sie die Anzahl der YES-Antworten:

3. Rufen Sie in StackBlitz die Datei index.js auf.
4. Fügen Sie unten in der Funktion main() den folgenden Code ein, um den RSVP-Status zu erfassen und YES-Klicks zu zählen.

   async function main() {
     // ...
   
     // Listen for attendee list
     const attendingQuery = query(
       collection(db, 'attendees'),
       where('attending', '==', true)
     );
     const unsubscribe = onSnapshot(attendingQuery, snap => {
       const newAttendeeCount = snap.docs.length;
       numberAttending.innerHTML = newAttendeeCount + ' people going';
     });
   }
   main();
   

Markieren wir zum Schluss die Schaltfläche, die dem aktuellen Status entspricht.

5. Erstellen Sie eine Funktion, die prüft, ob die aktuelle Authentifizierungs-UID einen Eintrag in der Sammlung attendees hat, und legen Sie dann die Schaltflächenklasse auf clicked fest.

   // ...
   // Listen for attendee list
   function subscribeCurrentRSVP(user) {
     const ref = doc(db, 'attendees', user.uid);
     rsvpListener = onSnapshot(ref, doc => {
       if (doc && doc.data()) {
         const attendingResponse = doc.data().attending;
   
         // Update css classes for buttons
         if (attendingResponse) {
           rsvpYes.className = 'clicked';
           rsvpNo.className = '';
         } else {
           rsvpYes.className = '';
           rsvpNo.className = 'clicked';
         }
       }
     });
   }
   

6. Außerdem erstellen wir eine Funktion zum Abbestellen. Diese wird verwendet, wenn sich der Nutzer abmeldet.

   // ...
   function unsubscribeCurrentRSVP() {
     if (rsvpListener != null) {
       rsvpListener();
       rsvpListener = null;
     }
     rsvpYes.className = '';
     rsvpNo.className = '';
   }
   

7. Rufen Sie die Funktionen über den Authentifizierungs-Listener auf.

   // ...
   // Listen to the current Auth state
     // Listen to the current Auth state
     onAuthStateChanged(auth, user => {
       if (user) {
         startRsvpButton.textContent = 'LOGOUT';
         // Show guestbook to logged-in users
         guestbookContainer.style.display = 'block';
   
         // Subscribe to the guestbook collection
         subscribeGuestbook();
         // Subscribe to the user's RSVP
         subscribeCurrentRSVP(user);
       } else {
         startRsvpButton.textContent = 'RSVP';
         // Hide guestbook for non-logged-in users
         guestbookContainer.style.display = 'none'
         ;
         // Unsubscribe from the guestbook collection
         unsubscribeGuestbook();
         // Unsubscribe from the guestbook collection
         unsubscribeCurrentRSVP();
       }
     });
   

8. Melden Sie sich als mehrere Nutzer an und sehen Sie zu, wie sich die Anzahl mit jedem zusätzlichen Klick auf die Schaltfläche JA erhöht.

App-Vorschau

Haben Sie das Gefühl, dass Sie nicht weiterkommen oder vom richtigen Weg abgekommen sind? Hier ist ein StackBlitz-Link, der mit dem gesamten Code aktualisiert wurde, der bis zu diesem Punkt des Codelabs hinzugefügt wurde: https://stackblitz.com/edit/firebase-gtk-web-checkpoint5

An diesem Kontrollpunkt müssen Sie zwei Dinge tun:

1. Führen Sie einen Fork des Projekts aus, damit es Ihnen gehört.
2. Fügen Sie das Konfigurationsobjekt Ihres Firebase-Projekts aus der Firebase Console hinzu.

11. Glückwunsch!

Sie haben mit Firebase eine interaktive Webanwendung mit Echtzeitfunktionen erstellt.

Behandelte Themen

• Firebase Authentication
• FirebaseUI
• Cloud Firestore
• Firebase-Sicherheitsregeln

Nächste Schritte

• Weitere Informationen zum Firebase-Entwickler-Workflow Im Firebase-Emulator-Codelab erfahren Sie, wie Sie Ihre App vollständig lokal testen und ausführen.
• Weitere Informationen zu anderen Firebase-Produkten Vielleicht möchten Sie Bilddateien speichern, die Nutzer hochladen. Oder Benachrichtigungen an Ihre Nutzer senden? Im Firebase-Codelab für das Web finden Sie ein Codelab, in dem viele weitere Firebase-Produkte für das Web ausführlicher behandelt werden.
• Weitere Informationen zu Cloud Firestore Vielleicht möchten Sie mehr über untergeordnete Sammlungen und Transaktionen erfahren. Im Cloud Firestore-Web-Codelab finden Sie ein Codelab, in dem Cloud Firestore genauer beschrieben wird. Oder sehen Sie sich diese YouTube-Serie zu Cloud Firestore an.

Weitere Informationen

• Firebase-Website: firebase.google.com
• Firebase-YouTube-Kanal

Wie ist es gelaufen?

Wir freuen uns über Feedback. Füllen Sie dazu bitte dieses kurze Formular aus.