Lernen Sie Firebase für das Web kennen

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

1. Übersicht

In diesem Codelab lernen Sie einige der Grundlagen von Firebase kennen, um interaktive Webanwendungen zu erstellen. Sie erstellen mit mehreren Firebase-Produkten eine Chat-App für Event-RSVP und Gästebuch.

Screenshot dieses Schrittes

Was Sie lernen werden

  • Authentifizieren Sie Benutzer mit Firebase Authentication und FirebaseUI.
  • Daten mit Cloud Firestore synchronisieren.
  • 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. Auf diese Weise können Sie erweiterte Funktionen in StackBlitz verwenden.
  • 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. Stackblitz erfordert keine Softwareinstallation oder ein spezielles StackBlitz-Konto.

Mit StackBlitz können Sie Projekte mit anderen teilen. Andere Personen, die Ihre StackBlitz-Projekt-URL haben, können Ihren Code sehen und Ihr Projekt verzweigen, 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 Schrittes

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

3. Ereignisinformationen bearbeiten

Die Ausgangsmaterialien 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.

Machen wir uns zunächst etwas vertrauter mit der StackBlitz-Oberfläche.

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

Während Sie den Text bearbeiten, zeigt das automatische Neuladen der Seite in StackBlitz die neuen Ereignisdetails an. 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 in etwa so aussehen:

App-Vorschau

Screenshot dieses Schrittes

4. Erstellen und richten Sie ein Firebase-Projekt ein

Das Anzeigen der Veranstaltungsinformationen ist großartig für Ihre Gäste, aber das bloße Anzeigen 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 Ihr Firebase-Projekt dann Firebase-Web-Codelab .

    Screenshot dieses Schrittes

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

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

Aktivieren und richten Sie Firebase-Produkte in der Konsole ein

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

  • Firebase-Authentifizierung und Firebase-Benutzeroberfläche , damit sich Ihre Benutzer einfach bei Ihrer App anmelden können.
  • Cloud Firestore , um strukturierte Daten in der Cloud zu speichern und sofort benachrichtigt zu werden, wenn sich Daten ändern.
  • Firebase-Sicherheitsregeln zum Schutz 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 E- Mail/Passwort -Anmeldemethode:

  1. Klicken Sie im linken Bereich der Firebase-Konsole auf Erstellen > Authentifizierung . 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 Schrittes

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

    Screenshot dieses Schrittes

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

    Screenshot dieses Schrittes

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 Schrittes

  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. Klicken Sie auf Weiter .

    Screenshot dieses Schrittes

  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 mehr geändert werden kann.

    Screenshot dieses Schrittes

  5. Klicken Sie auf Fertig .

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

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

Fügen Sie die Firebase-Bibliotheken hinzu

Damit Ihre App Firebase verwenden kann, müssen Sie die Firebase-Bibliotheken zur App hinzufügen. Dazu 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 können sie lokal mit npm installieren und sie dann in Ihre App packen, wenn Sie Browserify verwenden.

StackBlitz bietet eine 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 dazu beitragen, die Gesamtgröße der Webseite durch einen Prozess namens "Tree Shaking" zu reduzieren. Weitere Informationen zu den modularen SDKs finden Sie in der Dokumentation .

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-Web-App hinzu

  1. Navigieren Sie zurück 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 Schrittes

  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 das Vorschaufenster von StackBlitz.
  5. Klicken Sie auf App registrieren .

    Screenshot dieses Schrittes

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

    Screenshot dieses Schrittes

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

6. Benutzeranmeldung hinzufügen (RSVP)

Nachdem Sie Firebase zur App hinzugefügt haben, können Sie eine RSVP-Schaltfläche einrichten, die Personen mit 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 tut:

  • Teilt FirebaseUI mit, dass Sie die E- Mail/Kennwort -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, weil Sie eine Single-Page-Web-App erstellen.

Fügen Sie den Code hinzu, um FirebaseUI Auth zu initialisieren

  1. Gehen Sie in index.js zur Datei index.js.
  2. Suchen Sie oben nach der Importanweisung firebase firebase/auth und fügen Sie dann getAuth und EmailAuthProvider , 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 eine Referenz auf das auth-Objekt, etwa so:
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. Beachten Sie, dass die FirebaseUI-Konfiguration bereits im Startcode bereitgestellt wird. Es ist bereits eingerichtet, den E-Mail-Authentifizierungsanbieter zu verwenden.
  5. Fügen Sie am Ende der Funktion main() in index.js die FirebaseUI-Initialisierungsanweisung wie folgt hinzu:
    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 innerhalb des event-details-container hinzu, wie im folgenden Beispiel gezeigt.

    Achten Sie darauf, dieselben 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 Schrittes

  3. Richten Sie einen Listener auf dem RSVP-Button 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 :
    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 RSVP-Schaltfläche, um sich bei der App anzumelden.
    • Für dieses Codelab können Sie jede E-Mail-Adresse verwenden, sogar eine gefälschte E-Mail-Adresse, da Sie für dieses Codelab keinen E-Mail-Bestätigungsschritt 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 Schrittes

  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 Schrittes

Fügen Sie der Benutzeroberfläche den Authentifizierungsstatus hinzu

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

Sie verwenden den Status-Listener-Callback der Firebase-Authentifizierung, 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 index.js zur Datei index.js.
  2. Suchen Sie oben nach der firebase/auth -Importanweisung und fügen Sie dann signOut und onAuthStateChanged , 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 Schaltflächen-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 LOGOUT anzeigen und beim Anklicken wieder zu RSVP wechseln.

App-Vorschau

Screenshot dieses Schrittes

7. Schreiben Sie Nachrichten an Cloud Firestore

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

Um die Chat-Nachrichten zu speichern, die Benutzer in der App schreiben, verwenden Sie Cloud Firestore .

Datenmodell

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

Firestore-Datenmodellgrafik, die eine Gästebuchsammlung mit mehreren Nachrichtendokumenten zeigt

Nachrichten zu Firestore hinzufügen

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 das HTML für die UI-Elemente (Nachrichtenfeld und Senden-Button) hinzu. Anschließend fügen Sie den Code hinzu, der diese Elemente mit der Datenbank verbindet.

So fügen Sie die UI-Elemente eines Nachrichtenfelds und einer Sendeschaltflä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 Schrittes

Ein Benutzer, der auf die Schaltfläche SENDEN klickt, löst das unten stehende Code-Snippet aus. Es fügt den Inhalt des Nachrichteneingabefelds der guestbook der Datenbank hinzu. Insbesondere fügt die addDoc Methode den Nachrichteninhalt einem neuen Dokument (mit einer automatisch generierten ID) zur guestbook hinzu.

  1. Gehen Sie in index.js zur Datei index.js.
  2. Suchen Sie oben nach der Importanweisung firebase firebase/firestore und fügen Sie dann getFirestore , addDoc und 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 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 hinzu.

    Beachten Sie, dass auth.currentUser.uid ein Verweis auf die automatisch generierte eindeutige ID ist, die Firebase Authentication für alle angemeldeten Benutzer 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();
    

Das Gästebuch nur angemeldeten Benutzern anzeigen

Sie möchten nicht, dass jeder den Chat der Gäste sieht. Eine Sache, die Sie tun können, um den Chat zu sichern, besteht darin, nur angemeldeten Benutzern zu erlauben, das Gästebuch anzuzeigen. Für Ihre eigenen Apps sollten Sie jedoch auch Ihre Datenbank mit Firebase-Sicherheitsregeln sichern. (Weitere Informationen zu Sicherheitsregeln finden Sie später im Codelab.)

  1. Gehen Sie in index.js zur Datei index.js.
  2. Bearbeiten Sie den Listener onAuthStateChanged , 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 Senden 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. Sie sehen die Nachricht jedoch noch nicht in Ihrer eigentlichen Web-App, da Sie das Abrufen 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 Dashboard der Firestore-Datenbank die guestbook mit Ihrer neu hinzugefügten Nachricht sehen. Wenn Sie weiterhin Nachrichten senden, enthält Ihre Gästebuchsammlung viele Dokumente, wie zum Beispiel:

Firebase-Konsole

Screenshot dieses Schrittes

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 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 von 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. Gehen Sie in index.js zur Datei index.js.
  2. Suchen Sie oben nach der firebase/firestore Firestore-Importanweisung und fügen Sie dann query , orderBy und onSnapshot , 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 lauscht auf die Änderungen in der guestbook , in der die Chatnachrichten gespeichert werden. Die Nachrichten sind auch nach Datum geordnet, wobei orderBy('timestamp', 'desc') wird, um die neuesten Nachrichten ganz oben anzuzeigen.

Die onSnapshot Funktion benötigt zwei Parameter: die zu verwendende Abfrage und eine Callback-Funktion. Die Callback-Funktion wird ausgelöst, wenn Änderungen an Dokumenten vorliegen, 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 Registerkarten öffnen, werden die Nachrichten in Echtzeit über die Registerkarten hinweg synchronisiert.
  • (Optional) Sie können versuchen, Nachrichten manuell direkt im Abschnitt „ Datenbank “ der Firebase-Konsole zu löschen, zu ändern oder neue hinzuzufügen. Alle Änderungen sollten in der Benutzeroberfläche angezeigt werden.

Herzliche Glückwünsche! Sie lesen Cloud Firestore-Dokumente in Ihrer App!

App-Vorschau

Screenshot dieses Schrittes

9. Richten Sie grundlegende Sicherheitsregeln ein

Sie haben Cloud Firestore zunächst für die Verwendung des Testmodus eingerichtet, was bedeutet, dass Ihre Datenbank für Lese- und Schreibvorgänge geöffnet ist. Sie sollten den Testmodus jedoch nur in sehr frühen Phasen der Entwicklung verwenden. Als Best Practice sollten Sie bei der Entwicklung Ihrer App Sicherheitsregeln für Ihre Datenbank einrichten. 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 erstellen, die alles abgleichen, von allen Schreibvorgängen in die gesamte Datenbank bis hin zu Operationen in 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 wechseln).
  2. Sie sollten die folgenden Standardsicherheitsregeln sehen, mit einem Zeitlimit für den öffentlichen Zugriff in ein paar Wochen ab heute.

Screenshot dieses Schrittes

Sammlungen identifizieren

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

  1. Löschen Sie die vorhandene match /{document=**} -Klausel, 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 Ihrem Regelsatz die Lese- und Schreibregeln wie unten gezeigt 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. Für das Gästebuch können jetzt nur angemeldete Benutzer Nachrichten lesen (jede Nachricht!), aber Sie können eine Nachricht nur mit Ihrer Benutzer-ID erstellen. Wir gestatten 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 authentifizierten Benutzern die Anmeldung erlaubt, sollten Sie die firestore Abfrage des Gästebuchs in den Authentication-Listener verschieben. Andernfalls treten Berechtigungsfehler auf und die App wird getrennt, wenn sich der Benutzer abmeldet.

  1. Gehen Sie in index.js zur Datei index.js.
  2. Ziehen Sie die Gästebuch-Sammlung onSnapshot Listener in eine neue Funktion subscribeGuestbook . Weisen Sie außerdem die Ergebnisse der Funktion onSnapshot der Variablen guestbookListener zu.

    Der Firestore onSnapshot Listener gibt eine Abmeldefunktion zurück, mit der Sie den Snapshot-Listener später kündigen 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 . Ü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 schließlich die neuen Funktionen zum onAuthStateChanged Callback hinzu.

  1. Fügen subscribeGuestbook() am Ende von if (user) .
  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 erlaubt Ihre App nur Leuten, mit dem Chat zu beginnen, wenn sie an der Veranstaltung interessiert sind. Außerdem wissen Sie nur, ob jemand kommt, wenn er es im Chat postet. Lasst uns organisieren und die Leute wissen lassen, 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 JA- und NEIN -Schaltflächen 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 Schrittes

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 index.js zur Datei index.js.
  2. Suchen Sie oben die firebase/firestore 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 main() -Funktion 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 mit dem Namen „ 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 mit den Schaltflächen hinzufügen, abgelehnt.

Ergänzungen zur Sammlung der attendees zulassen

Sie müssen die Regeln aktualisieren, um das Hinzufügen zur attendees zuzulassen.

  1. Da Sie für die Sammlung der attendees die Authentifizierungs-UID als Dokumentnamen verwendet haben, können Sie sie abrufen und überprüfen, ob die UID des Einreichers uid ist wie das Dokument, 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 die Antworten aufgezeichnet haben, sehen wir uns an, wer kommt, und spiegeln dies in der Benutzeroberfläche wider.

  1. Gehen Sie in StackBlitz zur Datei index.html .
  2. Fügen Sie in description-container ein neues Element mit der ID von 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 index.js zur Datei index.js.
  2. Fügen Sie am Ende der main() -Funktion 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();
    

Lassen Sie uns abschließend die Schaltfläche hervorheben, die dem aktuellen Status entspricht.

  1. Erstellen Sie eine Funktion, die überprü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 auch 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 vom 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();
          // Subcribe 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 Schrittes

11. Herzlichen Glückwunsch!

Sie haben mit Firebase eine interaktive Echtzeit-Webanwendung erstellt!

Was wir abgedeckt haben

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

Nächste Schritte

  • Möchten Sie mehr über den Firebase Developer Workflow erfahren? Sehen Sie sich das Codelab des Firebase-Emulators an, um zu erfahren, wie Sie Ihre App vollständig lokal testen und ausführen.
  • Möchten Sie mehr über andere Firebase-Produkte erfahren? Vielleicht möchten Sie Bilddateien speichern, die Benutzer hochladen? Oder Benachrichtigungen an Ihre Benutzer senden? Sehen Sie sich das Firebase-Web-Codelab an, um ein Codelab zu finden, das sich eingehender mit vielen weiteren Firebase-Produkten für das Web befasst.
  • 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 für ein Codelab, das sich eingehender mit Cloud Firestore befasst. Oder sehen Sie sich diese YouTube-Serie an, um Cloud Firestore kennenzulernen !

Mehr erfahren

Wie ist es gelaufen?

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