Lernen Sie Firebase für das Web kennen

1. Übersicht

In diesem Codelab lernen Sie einige der Grundlagen von Firebase zum Erstellen interaktiver Webanwendungen. Sie erstellen eine Event-RSVP- und Gästebuch-Chat-App mit mehreren Firebase-Produkten.

Screenshot dieses Schritts

Was Sie lernen werden

  • Authentifizieren Sie Benutzer mit Firebase Authentication und FirebaseUI.
  • Synchronisieren Sie Daten mit Cloud Firestore.
  • Schreiben Sie Firebase-Sicherheitsregeln, um eine Datenbank zu sichern.

Was du brauchen wirst

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

2. Holen Sie sich den Startcode

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 Personen, 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. Gehen Sie zu dieser URL für den Startcode: https://stackblitz.com/edit/firebase-gtk-web-start
  2. Klicken Sie oben auf der StackBlitz-Seite auf Fork :

Screenshot dieses Schritts

Sie haben jetzt eine Kopie des Startcodes als Ihr eigenes StackBlitz-Projekt, das einen eindeutigen Namen und eine eindeutige URL hat. Alle Ihre Dateien und Änderungen werden in diesem StackBlitz-Projekt gespeichert.

3. Bearbeiten Sie die Veranstaltungsinformationen

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

Machen wir uns zunächst ein wenig mit der StackBlitz-Benutzeroberfläche vertraut.

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

Während Sie den Text bearbeiten, werden beim automatischen Neuladen der Seite in StackBlitz die neuen Ereignisdetails angezeigt. Cool, ja?

<!-- ... -->

<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 etwa so aussehen:

App-Vorschau

Screenshot dieses Schritts

4. Erstellen und richten Sie ein Firebase-Projekt ein

Die Anzeige der Veranstaltungsinformationen ist für Ihre Gäste großartig, aber die bloße Anzeige der Veranstaltungen ist für niemanden sehr nützlich. Fügen wir dieser App einige dynamische Funktionen hinzu. Dazu müssen Sie Firebase mit Ihrer App verbinden. Um mit Firebase zu beginnen, müssen Sie ein Firebase-Projekt erstellen und einrichten.

Erstellen Sie ein Firebase-Projekt

  1. Melden Sie sich bei Firebase an.
  2. Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen (oder Projekt erstellen ) und nennen Sie dann Ihr Firebase-Projekt Firebase-Web-Codelab .

    Screenshot dieses Schritts

  3. Klicken Sie sich durch die Projekterstellungsoptionen. Akzeptieren Sie die Firebase-Bedingungen, wenn Sie dazu aufgefordert werden. Klicken Sie im Google Analytics-Bildschirm auf „Nicht aktivieren“, da Sie Analytics für diese App nicht verwenden.

Weitere Informationen zu Firebase-Projekten finden Sie unter Grundlegendes zu Firebase-Projekten .

Aktivieren und richten Sie Firebase-Produkte in der Konsole ein

Die von Ihnen erstellte App verwendet mehrere Firebase-Produkte, die für Web-Apps verfügbar sind:

  • Firebase-Authentifizierung und Firebase-Benutzeroberfläche ermöglichen Ihren Benutzern die einfache Anmeldung bei Ihrer App.
  • Cloud Firestore , um strukturierte Daten in der Cloud zu speichern und sofortige Benachrichtigungen zu erhalten, wenn sich Daten ändern.
  • Firebase-Sicherheitsregeln zum Sichern Ihrer Datenbank.

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

Aktivieren Sie die E-Mail-Anmeldung für die Firebase-Authentifizierung

Um Benutzern die Anmeldung bei der Web-App zu ermöglichen, verwenden Sie für dieses Codelab die Anmeldemethode „E-Mail/Passwort“ :

  1. Klicken Sie im linken Bereich der Firebase-Konsole auf Build > Authentication . Klicken Sie dann auf „Erste Schritte“ . Sie befinden sich jetzt im Authentifizierungs-Dashboard, wo Sie angemeldete Benutzer sehen, Anmeldeanbieter konfigurieren und Einstellungen verwalten können.

    Screenshot dieses Schritts

  2. Wählen Sie die Registerkarte „Anmeldemethode “ (oder klicken Sie hier , um direkt zur Registerkarte zu gelangen).

    Screenshot dieses Schritts

  3. Klicken Sie in den Anbieteroptionen auf E-Mail/Passwort , stellen Sie den Schalter auf „Aktivieren“ und klicken Sie dann auf „Speichern“ .

    Screenshot dieses Schritts

Richten Sie Cloud Firestore ein

Die Web-App verwendet Cloud Firestore, um Chat-Nachrichten zu speichern und neue Chat-Nachrichten zu empfangen.

So richten Sie Cloud Firestore ein:

  1. Klicken Sie im linken Bereich der Firebase-Konsole auf Erstellen > Firestore-Datenbank . Klicken Sie dann auf Datenbank erstellen .
  2. Klicken Sie auf Datenbank erstellen .

    Screenshot dieses Schritts

  3. Wählen Sie die Option Im Testmodus starten . Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln. Der Testmodus stellt sicher, dass Sie während der Entwicklung frei in die Datenbank schreiben können. Weiter klicken .

    Screenshot dieses Schritts

  4. Wählen Sie den Speicherort für Ihre Datenbank aus (Sie können einfach die Standardeinstellung verwenden). Beachten Sie jedoch, dass dieser Speicherort später nicht geändert werden kann.

    Screenshot dieses Schritts

  5. Klicken Sie auf Fertig .

5. Fügen Sie Firebase hinzu und konfigurieren Sie es

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

Fügen Sie die Firebase-Bibliotheken hinzu

Damit Ihre App Firebase verwenden kann, müssen Sie der App die Firebase-Bibliotheken hinzufügen. Hierzu gibt es mehrere Möglichkeiten, wie in der Firebase-Dokumentation beschrieben . Sie können beispielsweise die Bibliotheken aus dem CDN von Google hinzufügen oder sie lokal mit npm installieren und sie dann in Ihre App packen, wenn Sie Browserify verwenden.

StackBlitz bietet automatische Bündelung, sodass Sie die Firebase-Bibliotheken mithilfe von Importanweisungen hinzufügen können. Sie werden die modularen (v9) Versionen der Bibliotheken verwenden, die durch einen Prozess namens „Tree Shaking“ dazu beitragen, die Gesamtgröße der Webseite zu reduzieren. Weitere Informationen zu den modularen SDKs finden Sie in den Dokumenten .

Zum Erstellen dieser App verwenden Sie die Bibliotheken Firebase Authentication, FirebaseUI und Cloud Firestore. Für dieses Codelab sind die folgenden Importanweisungen bereits oben in der Datei index.js enthalten, und wir werden im Laufe der Zeit weitere Methoden aus jeder Firebase-Bibliothek 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';

Fügen Sie Ihrem Firebase-Projekt eine Firebase-Webanwendung hinzu

  1. Navigieren Sie in der Firebase-Konsole zur Übersichtsseite Ihres Projekts, indem Sie oben links auf „Projektübersicht“ klicken.
  2. Klicken Sie in der Mitte der Übersichtsseite Ihres Projekts auf das Websymbol Web-App-Symbol um eine neue Firebase-Web-App zu erstellen.

    Screenshot dieses Schritts

  3. Registrieren Sie die App mit dem Spitznamen Web App .
  4. Aktivieren Sie für dieses Codelab NICHT das Kontrollkästchen neben Auch Firebase Hosting für diese App einrichten . Sie verwenden vorerst den Vorschaubereich von StackBlitz.
  5. Klicken Sie auf App registrieren .

    Screenshot dieses Schritts

  6. Kopieren Sie das Firebase-Konfigurationsobjekt in Ihre Zwischenablage.

    Screenshot dieses Schritts

  7. Klicken Sie auf Weiter zur Konsole . Fügen Sie das Firebase-Konfigurationsobjekt zu Ihrer App hinzu:
  8. Gehen Sie zurück in StackBlitz zur Datei index.js .
  9. Suchen Sie die Kommentarzeile Add Firebase project configuration object here und fügen Sie dann Ihren Konfigurationsausschnitt direkt unter dem Kommentar ein.
  10. Fügen Sie den Funktionsaufruf initializeApp hinzu, um Firebase mithilfe 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.appspot.com",
      messagingSenderId: "random-unique-string",
      appId: "random-unique-string",
    };
    
    // Initialize Firebase
    initializeApp(firebaseConfig);
    

6. Benutzeranmeldung hinzufügen (RSVP)

Nachdem Sie Firebase nun zur App hinzugefügt haben, können Sie eine RSVP-Schaltfläche einrichten, die Personen mithilfe der Firebase-Authentifizierung registriert.

Authentifizieren Sie Ihre Benutzer mit E-Mail-Anmeldung und FirebaseUI

Sie benötigen eine RSVP-Schaltfläche, die den Benutzer auffordert, sich mit seiner E-Mail-Adresse anzumelden. Sie können dies tun, indem Sie FirebaseUI mit einer RSVP-Schaltfläche verbinden. FirebaseUI ist eine Bibliothek, die Ihnen eine vorgefertigte Benutzeroberfläche zusätzlich zu Firebase Auth bietet.

FirebaseUI erfordert eine Konfiguration (siehe die Optionen in der Dokumentation ), die zwei Dinge bewirkt:

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

Fügen Sie den Code hinzu, um die FirebaseUI-Authentifizierung zu initialisieren

  1. Gehen Sie in StackBlitz zur Datei index.js .
  2. Suchen Sie oben nach der firebase/auth Importanweisung und fügen Sie dann getAuth und EmailAuthProvider hinzu, etwa so:
    // ...
    // 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, etwa so:
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. Beachten Sie, dass die FirebaseUI-Konfiguration bereits im Startcode bereitgestellt wird. Die Verwendung des E-Mail-Authentifizierungsanbieters ist bereits eingerichtet.
  5. Fügen Sie unten in der Funktion main() in index.js die FirebaseUI-Initialisierungsanweisung hinzu, etwa so:
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

Fügen Sie dem HTML eine RSVP-Schaltfläche hinzu

  1. Gehen Sie in StackBlitz zur Datei index.html .
  2. Fügen Sie den HTML-Code für eine RSVP-Schaltfläche im event-details-container hinzu, wie im folgenden Beispiel gezeigt.

    Achten Sie darauf, die gleichen id Werte wie unten gezeigt zu verwenden, da es für dieses Codelab bereits Hooks für diese spezifischen IDs in der Datei index.js gibt.

    Beachten Sie, dass es in der Datei index.html einen Container mit der ID firebaseui-auth-container gibt. Dies ist die ID, die Sie 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

    Screenshot dieses Schritts

  3. Richten Sie einen Listener für die RSVP-Schaltfläche 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 hinzu:
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

Testen Sie die Anmeldung bei der App

  1. Klicken Sie im Vorschaufenster von StackBlitz auf die Schaltfläche „RSVP“, um sich bei der App anzumelden.
    • Für dieses Codelab können Sie jede E-Mail-Adresse verwenden, auch eine gefälschte E-Mail-Adresse, da Sie für dieses Codelab keinen E-Mail-Verifizierungsschritt einrichten.
    • Wenn eine Fehlermeldung angezeigt wird, die besagt, dass auth/operation-not-allowed oder The given sign-in provider is disabled for this Firebase project , stellen Sie sicher, dass Sie „E-Mail/Passwort“ als Anmeldeanbieter in der Firebase-Konsole aktiviert haben.
    App-Vorschau

    Screenshot dieses Schritts

  2. Gehen Sie zum Authentifizierungs- Dashboard in der Firebase-Konsole. Auf der Registerkarte „Benutzer“ sollten Sie die Kontoinformationen sehen, die Sie eingegeben haben, um sich bei der App anzumelden.

    Screenshot dieses Schritts

Fügen Sie der Benutzeroberfläche einen Authentifizierungsstatus hinzu

Stellen Sie als Nächstes sicher, dass die Benutzeroberfläche die Tatsache widerspiegelt, dass Sie angemeldet sind.

Sie verwenden den Rückruf des Firebase Authentication-Status-Listeners, der benachrichtigt wird, wenn sich der Anmeldestatus des Benutzers ändert. Wenn derzeit ein Benutzer angemeldet ist, ändert Ihre App die Schaltfläche „RSVP“ in eine Schaltfläche „Abmelden“.

  1. Gehen Sie in StackBlitz zur Datei index.js .
  2. Suchen Sie oben nach der firebase/auth Importanweisung und fügen Sie dann signOut und onAuthStateChanged hinzu, etwa so:
    // ...
    // 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. Überprüfen Sie im Button-Listener, ob ein aktueller Benutzer vorhanden ist, und melden Sie ihn ab. Ersetzen Sie dazu den aktuellen 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);
      }
    });
    

Jetzt sollte die Schaltfläche in Ihrer App „LOGUT“ anzeigen und nach dem Klicken wieder auf „RSVP“ umschalten.

App-Vorschau

Screenshot dieses Schritts

7. Schreiben Sie Nachrichten an Cloud Firestore

Zu wissen, dass Benutzer kommen, ist großartig, aber geben wir den Gästen etwas anderes, was sie in der App tun können. Was wäre, wenn sie Nachrichten in einem Gästebuch hinterlassen könnten? Sie können mitteilen, warum sie sich auf den Besuch freuen oder wen sie kennenzulernen hoffen.

Zum Speichern der Chatnachrichten, die Benutzer in der App schreiben, verwenden Sie Cloud Firestore .

Datenmodell

Cloud Firestore ist eine NoSQL-Datenbank und die in der Datenbank gespeicherten Daten sind in Sammlungen, Dokumente, Felder und Untersammlungen aufgeteilt. Sie speichern jede Nachricht des Chats als Dokument in einer Sammlung auf oberster Ebene namens guestbook .

Grafik des Firestore-Datenmodells, die eine Gästebuchsammlung mit mehreren Nachrichtendokumenten zeigt

Fügen Sie Nachrichten zum Firestore hinzu

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

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

  1. Gehen Sie in StackBlitz zur Datei index.html .
  2. Suchen Sie den guestbook-container und fügen Sie dann den folgenden HTML-Code hinzu, 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

Screenshot dieses Schritts

Wenn ein Benutzer auf die Schaltfläche SENDEN klickt, wird das folgende Code-Snippet ausgelöst. Es fügt den Inhalt des Nachrichteneingabefelds zur guestbook der Datenbank hinzu. Konkret fügt die Methode addDoc den Nachrichteninhalt einem neuen Dokument (mit einer automatisch generierten ID) zur guestbook hinzu.

  1. Gehen Sie in StackBlitz zur Datei index.js .
  2. Suchen Sie oben nach der firebase/firestore Importanweisung und fügen Sie dann getFirestore , addDoc collection hinzu, etwa so:
    // ...
    
    // 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 :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
    einen Verweis auf das Firestore- db
  4. Fügen Sie am Ende der Funktion main() den folgenden Code hinzu.

    Beachten Sie, dass auth.currentUser.uid ein Verweis auf die automatisch generierte eindeutige ID ist, die Firebase Authentication allen angemeldeten Benutzern vergibt.
    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();
    

Zeigen Sie das Gästebuch nur angemeldeten Benutzern an

Sie möchten nicht, dass jeder den Chat der Gäste sieht. Eine Möglichkeit, den Chat zu sichern, besteht darin, nur angemeldeten Benutzern den Zugriff auf das Gästebuch zu ermöglichen. Allerdings sollten Sie für Ihre eigenen Apps auch Ihre Datenbank mit Firebase Security Rules sichern. (Weitere Informationen zu Sicherheitsregeln finden Sie später im Codelab.)

  1. Gehen Sie in StackBlitz zur Datei index.js .
  2. Bearbeiten Sie den onAuthStateChanged Listener, um das Gästebuch auszublenden und anzuzeigen.
    // ...
    
    // 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';
      }
    });
    

Testen Sie das Versenden von Nachrichten

  1. Stellen Sie sicher, dass Sie bei der App angemeldet sind.
  2. Geben Sie eine Nachricht wie „Hey there!“ ein und klicken Sie dann auf SENDEN .

Diese Aktion schreibt die Nachricht in Ihre Cloud Firestore-Datenbank. Allerdings wird die Meldung in Ihrer eigentlichen Web-App noch nicht angezeigt, da Sie den Abruf der Daten noch implementieren müssen. Das machst du als nächstes.

Sie können die neu hinzugefügte Nachricht jedoch in der Firebase-Konsole sehen.

In der Firebase-Konsole sollten Sie im Firestore-Datenbank- Dashboard die guestbook mit Ihrer neu hinzugefügten Nachricht sehen. Wenn Sie weiterhin Nachrichten senden, enthält Ihre Gästebuchsammlung viele Dokumente wie diese:

Firebase-Konsole

Screenshot dieses Schritts

8. Nachrichten lesen

Nachrichten synchronisieren

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

Um Nachrichten anzuzeigen, müssen Sie Listener hinzufügen, die bei Datenänderungen ausgelöst werden, und dann ein UI-Element erstellen, das neue Nachrichten anzeigt.

Sie fügen Code hinzu, der auf neu hinzugefügte Nachrichten von der App wartet. Fügen Sie zunächst einen Abschnitt im HTML-Code hinzu, um Nachrichten anzuzeigen:

  1. Gehen Sie in StackBlitz zur Datei index.html .
  2. Fügen Sie im 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 an den Daten vorgenommene Änderungen lauscht:

  1. Gehen Sie in StackBlitz zur Datei index.js .
  2. Suchen Sie oben nach der firebase/firestore Importanweisung und fügen Sie dann query , orderBy und onSnapshot hinzu, etwa so:
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. Fügen Sie am Ende der Funktion main() den folgenden Code hinzu, um alle Dokumente (Gästebuchnachrichten) in der Datenbank zu durchlaufen. Um mehr darüber zu erfahren, was in diesem Code passiert, lesen Sie die Informationen 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 abzuhören, haben Sie mithilfe der collection eine Abfrage für eine bestimmte Sammlung erstellt. Der obige Code überwacht die Änderungen in der guestbook , in der die Chat-Nachrichten gespeichert werden. Die Nachrichten werden auch nach Datum sortiert, wobei orderBy('timestamp', 'desc') verwendet wird, um die neuesten Nachrichten oben anzuzeigen.

Die onSnapshot Funktion benötigt zwei Parameter: die zu verwendende Abfrage und eine Rückruffunktion. Die Callback-Funktion wird ausgelöst, wenn Änderungen an Dokumenten vorgenommen werden, die der Abfrage entsprechen. Dies kann der Fall sein, wenn eine Nachricht gelöscht, geändert oder hinzugefügt wird. Weitere Informationen finden Sie in der Cloud Firestore-Dokumentation .

Testen Sie die Synchronisierung von Nachrichten

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

  • Die Nachrichten, die Sie zuvor in der Datenbank erstellt haben, sollten in der App angezeigt werden. Fühlen Sie sich frei, neue Nachrichten zu schreiben; Sie sollten sofort erscheinen.
  • Wenn Sie Ihren Arbeitsbereich in mehreren Fenstern oder Tabs öffnen, werden Nachrichten in Echtzeit über die Tabs hinweg synchronisiert.
  • (Optional) Sie können versuchen, Nachrichten direkt im Datenbankbereich der Firebase-Konsole manuell zu löschen, zu ändern oder neue Nachrichten hinzuzufügen. Alle Änderungen sollten in der Benutzeroberfläche angezeigt werden.

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

App-Vorschau

Screenshot dieses Schritts

9. Richten Sie grundlegende Sicherheitsregeln ein

Sie richten Cloud Firestore zunächst für die Verwendung des Testmodus ein, was bedeutet, dass Ihre Datenbank für Lese- und Schreibvorgänge geöffnet ist. Sie sollten den Testmodus jedoch nur in sehr frühen Entwicklungsstadien verwenden. Als Best Practice sollten Sie beim Entwickeln Ihrer App Sicherheitsregeln für Ihre Datenbank einrichten. Sicherheit sollte ein wesentlicher 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 erstellen, die alles abdecken, von allen Schreibvorgängen in der gesamten Datenbank bis hin zu Vorgängen an einem bestimmten Dokument.

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

  1. Klicken Sie im Abschnitt „Erstellen“ der Firebase-Konsole auf „Firestore-Datenbank“ und wählen Sie dann die Registerkarte „Regeln“ aus (oder klicken Sie hier , um direkt zur Registerkarte „Regeln“ zu gelangen).
  2. Sie sollten die folgenden Standardsicherheitsregeln sehen, mit einer zeitlichen Begrenzung des öffentlichen Zugriffs in ein paar Wochen ab heute.

Screenshot dieses Schritts

Sammlungen identifizieren

Identifizieren Sie zunächst die Sammlungen, in die die App Daten schreibt.

  1. Löschen Sie die vorhandene Klausel match /{document=**} , sodass Ihre Regeln wie folgt aussehen:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
      }
    }
    
  2. Identifizieren Sie in match /databases/{database}/documents die Sammlung, die Sie sichern möchten:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /guestbook/{entry} {
         // You'll add rules here in the next step.
      }
    }
    

Fügen Sie Sicherheitsregeln hinzu

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

  1. Fügen Sie die Lese- und Schreibregeln wie unten gezeigt zu Ihrem Regelsatz hinzu:
    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 Ihre neuen Regeln bereitzustellen. Jetzt können im Gästebuch nur angemeldete Benutzer Nachrichten lesen (jede Nachricht!), aber Sie können eine Nachricht nur mit Ihrer Benutzer-ID erstellen. Wir erlauben auch nicht, dass Nachrichten bearbeitet oder gelöscht werden.

Validierungsregeln hinzufügen

  1. Fügen Sie eine 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 Ihre neuen Regeln bereitzustellen.

Listener zurücksetzen

Da Ihre App jetzt nur noch die Anmeldung authentifizierter Benutzer zulässt, sollten Sie die Gästebuch- firestore Abfrage in den Authentifizierungs-Listener verschieben. Andernfalls treten Berechtigungsfehler auf und die App wird getrennt, wenn sich der Benutzer abmeldet.

  1. Gehen Sie in StackBlitz zur Datei index.js .
  2. Ziehen Sie den onSnapshot Listener der Gästebuchsammlung in eine neue Funktion namens subscribeGuestbook . Weisen Sie außerdem die Ergebnisse der onSnapshot Funktion der Variable guestbookListener zu.

    Der Firestore onSnapshot Listener gibt eine Abmeldefunktion 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 namens unsubscribeGuestbook hinzu. Überprü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 abschließend die neuen Funktionen zum onAuthStateChanged Rückruf hinzu.

  1. Fügen Sie subscribeGuestbook() am Ende von if (user) hinzu.
  2. Fügen Sie unsubscribeGuestbook() am Ende der else Anweisung hinzu.
    // ...
    // 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();
      }
    });
    

10. Bonusschritt: Üben Sie, was Sie gelernt haben

Erfassen Sie den RSVP-Status eines Teilnehmers

Im Moment ermöglicht Ihre App den Leuten lediglich, mit dem Chatten zu beginnen, wenn sie an der Veranstaltung interessiert sind. Außerdem wissen Sie nur, ob jemand kommt, wenn er es im Chat postet. Organisieren wir uns und teilen wir den Leuten mit, wie viele Leute kommen.

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

  1. Gehen Sie in StackBlitz zur Datei index.html .
  2. Fügen Sie im guestbook-container eine Reihe von Schaltflächen „JA“ und „NEIN“ hinzu, etwa so:
    <!-- ... -->
      <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

Screenshot dieses Schritts

Als nächstes registrieren Sie den Listener für Schaltflächenklicks. Wenn der Benutzer auf JA klickt, verwenden Sie seine Authentifizierungs-UID, um die Antwort in der Datenbank zu speichern.

  1. Gehen Sie in StackBlitz zur Datei index.js .
  2. Suchen Sie oben nach der firebase/firestore Importanweisung und fügen Sie dann doc , setDoc und where hinzu, etwa so:
    // ...
    // 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 abzuhören:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. Erstellen Sie als Nächstes eine neue Sammlung namens attendees und registrieren Sie dann eine Dokumentreferenz, wenn auf eine der RSVP-Schaltflächen geklickt wird. Setzen Sie diesen Verweis auf true oder false , 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);
      }
    };
    
    Dann dasselbe 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);
      }
    };
    

Aktualisieren Sie Ihre Sicherheitsregeln

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

Erlauben Sie Ergänzungen zur attendees

Sie müssen die Regeln aktualisieren, um das Hinzufügen zur attendees zu ermöglichen.

  1. Da Sie für die attendees die Authentifizierungs-UID als Dokumentnamen verwendet haben, können Sie diese abrufen und überprüfen, ob die uid des Einreichers mit der des Dokuments übereinstimmt, das er schreibt. Sie erlauben jedem, die Teilnehmerliste zu lesen (da dort keine privaten Daten vorhanden sind), aber nur der Ersteller sollte in der Lage sein, sie zu aktualisieren.
    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 Ihre neuen Regeln bereitzustellen.

Validierungsregeln hinzufügen

  1. Fügen Sie einige Datenvalidierungsregeln 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 jetzt die Ergebnisse des Klickens auf die Schaltflächen anzeigen. Gehen Sie in der Firebase-Konsole zu Ihrem Cloud Firestore-Dashboard.

Lesen Sie den RSVP-Status

Nachdem Sie nun die Antworten aufgezeichnet haben, wollen wir sehen, wer kommt, und dies in der Benutzeroberfläche widerspiegeln.

  1. Gehen Sie in StackBlitz zur Datei index.html .
  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 und zählen Sie die Anzahl der JA- Antworten:

  1. Gehen Sie in StackBlitz zur Datei index.js .
  2. Fügen Sie unten in der Funktion main() den folgenden Code hinzu, um den RSVP-Status abzuhören und JA- 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();
    

Zum Schluss markieren wir die Schaltfläche, die dem aktuellen Status entspricht.

  1. Erstellen Sie eine Funktion, die prüft, ob die aktuelle Authentifizierungs-UID einen Eintrag in der 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';
          }
        }
      });
    }
    
  2. Lassen Sie uns außerdem eine Funktion zum Abbestellen erstellen. Dies wird verwendet, wenn sich der Benutzer abmeldet.
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. Rufen Sie die Funktionen über den Authentication-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();
        }
      });
    
  4. Versuchen Sie, sich als mehrere Benutzer anzumelden, und sehen Sie, wie sich die Anzahl mit jedem weiteren Klick auf die Schaltfläche „Ja“ erhöht.

App-Vorschau

Screenshot dieses Schritts

11. Herzlichen Glückwunsch!

Sie haben Firebase verwendet, um eine interaktive Echtzeit-Webanwendung zu erstellen!

Was wir abgedeckt haben

  • Firebase-Authentifizierung
  • FirebaseUI
  • Cloud Firestore
  • Firebase-Sicherheitsregeln

Nächste Schritte

  • Möchten Sie mehr über den Firebase Developer Workflow erfahren? Schauen Sie sich das Firebase-Emulator-Codelab an, um zu erfahren, wie Sie Ihre App vollständig lokal testen und ausführen können.
  • Möchten Sie mehr über andere Firebase-Produkte erfahren? Vielleicht möchten Sie Bilddateien speichern, die Benutzer hochladen? Oder Benachrichtigungen an Ihre Benutzer senden? Schauen Sie sich das Firebase-Web-Codelab an. Dort finden Sie ein Codelab, das ausführlicher auf viele weitere Firebase-Produkte für das Web eingeht.
  • Möchten Sie mehr über Cloud Firestore erfahren? Vielleicht möchten Sie mehr über Untersammlungen und Transaktionen erfahren? Besuchen Sie das Web-Codelab von Cloud Firestore, um ein Codelab zu erhalten, das sich eingehender mit Cloud Firestore befasst. Oder schauen Sie sich diese YouTube-Serie an, um Cloud Firestore kennenzulernen !

Erfahren Sie mehr

Wie ist es gelaufen?

Wir würden uns über Ihr Feedback freuen! Bitte füllen Sie hier ein (sehr) kurzes Formular aus.