Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Lernen Sie Firebase for Web kennen

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

59abdefbcc23bbbe.png

Was du lernen wirst

  • Authentifizieren Sie Benutzer mit Firebase-Authentifizierung und FirebaseUI.
  • Synchronisieren Sie Daten mit Cloud Firestore.
  • Schreiben Sie Firebase-Sicherheitsregeln, um eine Datenbank zu sichern.
  • Stellen Sie eine Web-App auf Firebase Hosting bereit.

Was du brauchen wirst

  • Ein Browser Ihrer Wahl wie Chrome.
  • Zugriff auf stackblitz.com (kein Konto oder Anmeldung erforderlich).
  • Ein Google-Konto wie ein Google Mail-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.

In diesem Codelab erstellen und implementieren 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 mit Ihrer StackBlitz-Projekt-URL können Ihren Code sehen und Ihr Projekt teilen, Ihr StackBlitz-Projekt jedoch nicht bearbeiten.

  1. Unter dieser URL finden Sie den Startcode: https://stackblitz.com/edit/firebase-gtk-web-start
  2. Klicken Sie oben auf der StackBlitz-Seite auf Fork : f5135360aef481cc.png

Sie haben jetzt eine Kopie des Startcodes als Ihr eigenes StackBlitz-Projekt. Da Sie sich nicht @anonymous , heißt Ihr Konto @anonymous , aber das Projekt hat einen eindeutigen Namen und eine eindeutige URL. Alle Ihre Dateien und Änderungen werden in diesem StackBlitz-Projekt gespeichert.

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 schließen Sie diese Container an Firebase an.

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

  1. Öffnen Sie in StackBlitz die Datei index.html .
  2. Suchen Sie den event-details-container und den description-container und versuchen Sie, 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 ungefähr so ​​aussehen:

App-Vorschau

908cc57ce3a5b5fe.png

Das Anzeigen der Veranstaltungsinformationen ist ideal für Ihre Gäste, aber das Anzeigen der Ereignisse ist für niemanden sehr nützlich. Fügen wir dieser App einige dynamische Funktionen hinzu. Dazu müssen Sie Firebase an Ihre App anschließen. 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 benennen Sie Ihr Firebase-Projekt Firebase-Web-Codelab .

a67c239f8cc7f4b5.png

  1. Klicken Sie sich durch die Projekterstellungsoptionen. Akzeptieren Sie die Firebase-Bedingungen, wenn Sie dazu aufgefordert werden. Überspringen Sie das Einrichten von Google Analytics, da Sie Analytics für diese App nicht verwenden.

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

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 problemlos bei Ihrer App anmelden können.
  • Cloud Firestore zum Speichern strukturierter Daten in der Cloud und sofortige Benachrichtigung bei Datenänderungen.
  • Firebase-Sicherheitsregeln zum Sichern Ihrer Datenbank.
  • Firebase-Hosting zum Hosten und Bereitstellen Ihrer Assets.

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

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

Damit Benutzer sich bei der Web-App anmelden können, verwenden Sie die Anmeldemethode für E-Mail / Passwort für dieses Codelab:

  1. Klicken Sie in der Firebase-Konsole im linken Bereich auf Entwickeln .
  2. Klicken Sie auf Authentifizierung, und klicken Sie dann auf den Anmelde-Verfahren Registerkarte (oder klicken Sie hier direkt mit dem Sign-in zu gehen Methode tab).
  3. Klicken Sie auf E - Mail / Passwort im Anmelde-Provider - Liste, stellen Sie den Zustimmungsschalter in der Position, und dann auf Speicher. 4c88427cfd869bee.png

Aktivieren Sie den Cloud Firestore

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

Cloud Firestore aktivieren:

  1. Klicken Sie im Abschnitt Entwickeln der Firebase-Konsole auf Datenbank .
  2. Klicken Sie unter Cloud Firestore auf Datenbank erstellen . 3ce19fd6467e51c5.png
  1. 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 . 56369cebb9300eb.png
  1. Wählen Sie den Speicherort für Ihre Datenbank (Sie können einfach die Standardeinstellung verwenden). Beachten Sie, dass dieser Speicherort später nicht mehr geändert werden kann. 32f815f4648c3174.png
  2. Klicken Sie auf Fertig .

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.

Fügen Sie die Firebase-Bibliotheken hinzu

Damit Ihre App Firebase verwenden kann, müssen Sie der App die Firebase-Bibliotheken hinzufügen. Es gibt mehrere Möglichkeiten, dies zu tun, 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 Ihrer App verpacken, wenn Sie Browserify verwenden.

StackBlitz bietet eine automatische Bündelung, sodass Sie die Firebase-Bibliotheken mithilfe von Importanweisungen hinzufügen können.

Zum Erstellen dieser App verwenden Sie die Bibliotheken Firebase-Authentifizierung, FirebaseUI und Cloud Firestore. Für dieses Codelab sind die folgenden Zeilen bereits oben in der Datei index.js enthalten:

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

// Firebase App (the core Firebase SDK) is always required
// and must be listed first
import firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

import * as firebaseui from "firebaseui";

Fügen Sie dem Projekt eine Firebase-Webanwendung hinzu

  1. Zurück in der Firebase - Konsole zu Ihrer Projektübersichtsseite von Projektübersicht klicken in den oberen linken.
  2. Klicken Sie in der Mitte der Übersichtsseite Ihres Projekts auf das Websymbol b286f3d215e1f578.png um eine neue Firebase-Webanwendung zu erstellen. c167e9526fad2825.png
  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 werden vorerst das Vorschaufenster von StackBlitz verwenden.
  5. Klicken Sie auf App registrieren . c85ac8aa351e2560.png
  6. Kopieren Sie dasFirebase-Konfigurationsobjekt in die Zwischenablage. ed1e598c6132f734.png
  7. Klicken Sie auf Weiter zur Konsole .

Fügen Sie das Firebase-Konfigurationsobjekt zu Ihrer App hinzu:

  1. Zurück in StackBlitz gehen Sie zur Datei index.js .
  2. Suchen Add Firebase project configuration object here Kommentarzeile zum Add Firebase project configuration object here und fügen Sie Ihr Konfigurations-Snippet direkt unter dem Kommentar ein.
  3. Fügen Sie den Funktionsaufruf initializeApp , um Firebase mithilfe Ihrer eindeutigen Firebase-Projektkonfiguration einzurichten.
// ...

// Add Firebase project configuration object here
var 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
firebase.initializeApp(firebaseConfig);

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

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 über Firebase Auth bietet.

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

  1. Weist FirebaseUI an, dass Sie die Anmeldemethode für E-Mail / Kennwort verwenden möchten.
  2. Behandelt 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 zunächst den Code hinzu, um FirebaseUI zu initialisieren:

  1. Wechseln Sie in index.js Datei index.js . Beachten Sie, dass die FirebaseUI-Konfiguration bereits bereitgestellt ist.
  2. index.js, am Ende von index.js, die FirebaseUI-Initialisierungsanweisung wie index.js, hinzu:
// ...
// Initialize the FirebaseUI widget using Firebase
const ui = new firebaseui.auth.AuthUI(firebase.auth());

Fügen Sie als Nächstes dem HTML-Code eine RSVP-Schaltfläche hinzu:

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

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

Beachten Sie, dass sich in der Datei index.html ein Container mit der ID firebaseui-auth-container . Dies ist die ID, die Sie an FirebaseUI übergeben, um Ihr Login 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

ab9ad7d61bb7b28c.png

  1. Richten Sie einen Listener auf der RSVP-Schaltfläche ein und rufen Sie die FirebaseUI-Startfunktion auf. Dadurch wird FirebaseUI mitgeteilt, dass das Anmeldefenster angezeigt werden soll. Fügen Sie den folgenden Code am Ende von index.js :
// ... 
// At the bottom

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

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 eine beliebige E-Mail-Adresse verwenden, auch eine gefälschte E-Mail-Adresse, da Sie für dieses Codelab keinen E-Mail-Überprüfungsschritt einrichten.
  • Wenn eine Fehlermeldung angezeigt wird, dass auth/operation-not-allowed oder The given sign-in provider is disabled for this Firebase project , stellen Sie sicher, dass Sie E-Mail / Kennwort als Anmeldeanbieter in der Firebase-Konsole aktiviert haben.
  1. Wechseln Sie zum Authentifizierungs- Dashboard in der Firebase-Konsole. Auf der Registerkarte Benutzer sollten die Kontoinformationen angezeigt werden, die Sie eingegeben haben, um sich bei der App anzumelden.

App-Vorschau

3024f90b52ad55fe.png

682fc0eca86a99fc.png

Fügen Sie der Benutzeroberfläche den Authentifizierungsstatus hinzu

Stellen Sie nun sicher, dass die Benutzeroberfläche die Tatsache widerspiegelt, dass Sie angemeldet sind.

Sie verwenden den Firebase-Authentifizierungsstatus-Listener-Rückruf, der benachrichtigt wird, wenn sich der Anmeldestatus des Benutzers ändert. Wenn derzeit ein Benutzer vorhanden ist, wechseln Sie die RSVP-Schaltfläche zu einer Abmeldeschaltfläche.

  1. Wechseln Sie in index.js Datei index.js .
  2. Fügen Sie unten den folgenden Code hinzu:
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user)=> {
  if (user) {
    startRsvpButton.textContent = "LOGOUT"
  }
  else {
    startRsvpButton.textContent = "RSVP"
  }
});
  1. Ü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 den folgenden:
// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener("click",
 () => {
    if (firebase.auth().currentUser) {
      // User is signed in; allows user to sign out
      firebase.auth().signOut();
    } else {
      // No user is signed in; allows user to sign in
      ui.start("#firebaseui-auth-container", uiConfig);
    }
});

Jetzt sollte die Schaltfläche LOGOUT anzeigen und beim Klicken wieder zu RSVP wechseln.

App-Vorschau

4c540450924f1607.png

Zu wissen, dass Benutzer kommen, ist großartig, aber lassen Sie uns den Gästen etwas anderes in der App geben. Was wäre, wenn sie Nachrichten in einem Gästebuch hinterlassen könnten? Sie können mitteilen, warum sie aufgeregt sind oder wen sie treffen möchten.

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

Datenmodell

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

b447950f9f993789.png

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 (Nachrichtenfeld und Schaltfläche "Senden") hinzu und fügen dann den Code hinzu, der diese Elemente mit der Datenbank verbindet.

Gehen Sie wie folgt vor, um die UI-Elemente eines Nachrichtenfelds und einer Schaltfläche zum Senden hinzuzufügen:

  1. Wechseln Sie in StackBlitz zur Datei index.html .
  2. Suchen Sie den guestbook-container und fügen Sie 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

4a892284443cf73d.png

Ein Benutzer, der auf die Schaltfläche SENDEN klickt, löst das folgende Codefragment aus. Der Inhalt des Nachrichteneingabefelds wird der guestbook der Datenbank hinzugefügt. Insbesondere fügt die Methode add den Nachrichteninhalt einem neuen Dokument (mit einer automatisch generierten ID) zur guestbook .

  1. Wechseln Sie in index.js Datei index.js .
  2. Fügen Sie am Ende der Datei den folgenden Code hinzu.

Beachten Sie, dass firebase.auth().currentUser.uid ein Verweis auf die automatisch generierte eindeutige ID ist, die die Firebase-Authentifizierung für alle angemeldeten Benutzer firebase.auth().currentUser.uid .

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

Zeigen Sie das Gästebuch nur angemeldeten Benutzern an

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

  1. Wechseln Sie in index.js Datei index.js .
  2. Bearbeiten Sie den Listener onAuthStateChanged , um das Gästebuch auszublenden und onAuthStateChanged .
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((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 werden die Nachricht jedoch noch nicht in Ihrer eigentlichen Web-App sehen, 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 im Datenbank- Dashboard sollte die guestbook mit Ihrer neu hinzugefügten Nachricht angezeigt werden. Wenn Sie weiterhin Nachrichten senden, enthält Ihre Gästebuchsammlung viele Dokumente wie folgt:

Firebase-Konsole

713870af0b3b63c.png

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 anschließend 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 zunächst einen Abschnitt im HTML-Code hinzu, um Nachrichten anzuzeigen:

  1. Wechseln Sie in StackBlitz zur Datei index.html .
  2. guestbook-container im guestbook-container einen neuen Abschnitt mit der ID des guestbook .
<!-- ... -->

  <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. Wechseln Sie in index.js Datei index.js .
  2. Fügen Sie am Ende der Datei den folgenden Code hinzu, um alle Dokumente (Gästebuchnachrichten) in der Datenbank zu durchlaufen:
// ...
// Create query for messages
firebase.firestore().collection("guestbook")
.orderBy("timestamp","desc")
.onSnapshot((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);
 });
});

Um Nachrichten in der Datenbank abzuhören, erstellen Sie mithilfe der .collection Funktion eine Abfrage für eine bestimmte Sammlung. Der obige Code lauscht den Änderungen in der guestbook , in der die Chatnachrichten gespeichert sind. Die Nachrichten werden auch nach Datum .orderBy('timestamp', 'desc') , wobei .orderBy('timestamp', 'desc') , um die neuesten Nachrichten oben anzuzeigen.

Die .onSnapshot Funktion .onSnapshot einen Parameter: eine Rückruffunktion. Die Rückruffunktion 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 Dokumentation zum Cloud Firestore .

Testen Sie die Synchronisierung von Nachrichten

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

  1. 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.
  2. Wenn Sie Ihren Arbeitsbereich in mehreren Fenstern oder Registerkarten öffnen, werden Nachrichten in Echtzeit über Registerkarten hinweg synchronisiert.
  3. (Optional) Sie können versuchen, Nachrichten manuell direkt im Abschnitt " Datenbank " der Firebase-Konsole zu löschen, zu ändern oder neue Nachrichten hinzuzufügen. Alle Änderungen sollten in der Benutzeroberfläche angezeigt werden.

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

App p Überprüfung

e30df0a9614bae7d.png

Sie haben Cloud Firestore zunächst für den Testmodus eingerichtet. Dies 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 bewährte Methode sollten Sie bei der Entwicklung Ihrer App Sicherheitsregeln für Ihre Datenbank einrichten. Sicherheit sollte ein wesentlicher Bestandteil der Struktur und des Verhaltens Ihrer App sein.

Mit den Sicherheitsregeln können Sie den Zugriff auf Dokumente und Sammlungen in Ihrer Datenbank steuern. Mit der flexiblen Regelsyntax können Sie Regeln erstellen, die von allen Schreibvorgängen in die gesamte Datenbank bis hin zu Vorgängen für ein bestimmtes Dokument übereinstimmen.

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

  1. Klicken Sie im Abschnitt Entwickeln der Firebase-Konsole auf Datenbank und wählen Sie dann die Registerkarte Regeln aus (oder klicken Sie hier , um direkt zur Registerkarte Regeln zu gelangen ).
  2. Die folgenden Standardsicherheitsregeln sollten zusammen mit einer Warnung angezeigt werden, dass die Regeln öffentlich sind.

7767a2d2e64e7275.png

Sammlungen identifizieren

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

Identifizieren Sie unter 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.
  }
}

Sicherheitsregeln hinzufügen

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

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;
    }
  }
}

Jetzt können für das Gästebuch nur angemeldete Benutzer Nachrichten lesen (jede Nachricht!), Sie können jedoch nur eine Nachricht mit Ihrer Benutzer-ID erstellen. Wir erlauben auch nicht, dass Nachrichten bearbeitet oder gelöscht werden.

Fügen Sie Validierungsregeln hinzu

Fügen Sie eine Datenüberprüfung 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;
    }
  }
}

Listener zurücksetzen

Da sich in Ihrer App nur noch authentifizierte Benutzer anmelden können, 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. Ziehen Sie die Gästebuchsammlung onSnapshot Listener in eine neue Funktion namens subscribeGuestbook . Außerdem weisen Sie die Ergebnisse der onSnapshot Funktion auf die guestbookListener Variable.

Der Firestore onSnapshot Listener gibt eine onSnapshot zurück , mit der Sie den Snapshot-Listener später abbrechen können.

// ...
// Listen to guestbook updates
function subscribeGuestbook(){
   // Create query for messages
 guestbookListener = firebase.firestore().collection("guestbook")
 .orderBy("timestamp","desc")
 .onSnapshot((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);
   });
 });
};
  1. Fügen Sie darunter eine neue Funktion mit dem Namen 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;
 }
};
  1. onAuthStateChanged die neuen Funktionen zum onAuthStateChanged Rückruf hinzu (führen Sie die folgenden beiden Schritte aus).
  2. Fügen Sie subscribeGuestbook() am Ende von if (user) .
  3. Fügen Sie unsubscribeGuestbook() am Ende der else Anweisung hinzu.
// ...
firebase.auth().onAuthStateChanged((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();
}
});

Firebase bietet einen Hosting-Service für die Assets Ihrer Web-App. Sie können Ihre Dateien und die Hosting-Konfiguration über die Firebase-Befehlszeilenschnittstelle (CLI) für Firebase Hosting bereitstellen. Für dieses Codelab verwenden Sie jedoch StackBlitz , das die Firebase-CLI in seinen Arbeitsbereich integriert hat!

Mithilfe der Firebase-Integration von StackBlitz können Sie StackBlitz mitteilen, für welches Firebase-Projekt Sie Assets bereitstellen möchten:

  1. Wenn Sie nicht bereits mit GitHub in StackBlitz unterzeichnet haben, klicken Sie auf Anmelden in der oberen rechten und dann Ihre Anmeldeinformationen GitHub Konto eingeben.

99a41778bb3c194c.png

  • Wenn Sie bereits ein GitHub-Konto haben, melden Sie sich mit Ihrem GitHub-Konto an.
  • Wenn Sie noch kein GitHub-Konto haben, erstellen Sie ein GitHub-Konto mit derselben E-Mail-Adresse, mit der Sie sich bei Firebase angemeldet haben.
  1. Im linken Bereich sollte sich jetzt ein Firebase- Symbol befinden.

2981c2e3ad13c2c1.png 3. Klicken Sie auf Bei Google anmelden . Melden Sie sich mit derselben E-Mail-Adresse an, mit der Sie sich bei Firebase angemeldet haben. 4. Wählen Sie aus der Liste der Firebase-Projekte Ihr Firebase-Web-Codelab- Projekt aus.

Die Bereitstellung auf Firebase Hosting mit StackBlitz ist buchstäblich ein Ein-Klick-Vorgang:

  1. Klicken Sie im StackBlitz-Arbeitsbereich links auf der Seite auf Bereitstellen . Ja, das ist es. Ein Schritt! 8fe6c0bfc04c8935.png

Weitere Informationen zur Funktionsweise von Firebase Hosting finden Sie in der Dokumentation.

Rufen Sie den Abschnitt zum Hosting der Firebase-Konsole Ihres Projekts auf, um nützliche Hosting-Informationen und -Tools anzuzeigen, einschließlich des Verlaufs Ihrer Bereitstellungen, der Funktionen zum Zurücksetzen auf frühere Versionen Ihrer App und des Workflows zum Einrichten einer benutzerdefinierten Domäne.

Notieren Sie den RSVP-Status eines Teilnehmers

Im Moment können Benutzer mit Ihrer App nur mit dem Chatten beginnen, wenn sie an der Veranstaltung interessiert sind. Außerdem wissen Sie nur, ob jemand kommt, wenn er es im Chat veröffentlicht. Lassen Sie uns organisieren und die Leute wissen lassen, wie viele Leute kommen.

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

  1. Wechseln Sie in StackBlitz zur Datei index.html .
  2. guestbook-container im guestbook-container eine Reihe von JA- und NEIN- Schaltflächen hinzu, wie folgt:
<!-- ... -->
  <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

73ca99ca35c13ee7.png

Registrieren Sie als Nächstes den Listener für Tastenklicks. Wenn der Benutzer auf JA klickt, verwenden Sie seine Authentifizierungs-UID, um die Antwort in der Datenbank zu speichern.

  1. Wechseln Sie in index.js Datei index.js .
  2. Fügen Sie am Ende der Datei den folgenden Code hinzu, um den RSVP-Status abzuhören:
// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
}
rsvpNo.onclick = () => {
}
  1. Erstellen Sie eine neue Sammlung mit dem Namen " attendees und registrieren Sie eine Dokumentreferenz, wenn Sie auf eine der RSVP-Schaltflächen klicken.
  2. Setzen Sie diesen Verweis auf true oder false je nachdem, auf welche Schaltfläche geklickt wird.

Erstens für rsvpYes :

// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd yes, save a document with attending: true
 userDoc.set({
   attending: true
 }).catch(console.error)
}

Dann das gleiche für rsvpNo , aber mit dem Wert false :

rsvpNo.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd no, save a document with attending: false
 userDoc.set({
   attending: false
 }).catch(console.error)
}

Regeln hinzufügen

Da Sie bereits einige Regeln eingerichtet haben, werden die neuen Daten, die Sie mit den Schaltflächen hinzufügen, abgelehnt. Sie müssen die Regeln aktualisieren, um das Hinzufügen zur attendees zu ermöglichen.

Da Sie für die attendees die Authentifizierungs-UID als Dokumentnamen verwendet haben, können Sie diese uid und überprüfen, ob die UID des uid mit der des von ihm geschriebenen Dokuments uid . 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;
    }
  }
}

Fügen Sie Validierungsregeln hinzu

Fügen Sie eine Datenüberprüfung 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;

    }
  }
}

(Optional) Sie können jetzt die Ergebnisse des Klickens auf die Schaltflächen anzeigen. Wechseln 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 sie in der Benutzeroberfläche wider.

  1. Wechseln Sie in StackBlitz zur Datei index.html .
  2. Fügen Sie im description-container ein neues Element mit der ID der teilnehmenden number-attending .
<!-- ... -->

 <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. Wechseln Sie in index.js Datei index.js .
  2. Fügen Sie am Ende der Datei den folgenden Code hinzu, um den RSVP-Status abzuhören und die JA- Klicks zu zählen.
// ...
// Listen for attendee list
firebase.firestore()
.collection('attendees')
.where("attending", "==", true)
.onSnapshot(snap => {
 const newAttendeeCount = snap.docs.length;

 numberAttending.innerHTML = newAttendeeCount+' people going'; 
})
  1. Zuletzt markieren wir die Schaltfläche, die dem aktuellen Status entspricht. Überprüfen Sie, ob die aktuelle Authentifizierungs-UID einen Eintrag in der attendees , und setzen Sie die Klasse auf " clicked .
// ...
// Listen for attendee list
function subscribeCurrentRSVP(user){
 rsvpListener = firebase.firestore()
 .collection('attendees')
 .doc(user.uid)
 .onSnapshot((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";
     }
   }
 });
}
  1. 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="";
}
  1. Rufen Sie die Funktionen vom Authentifizierungs-Listener aus auf.
// ...

// Listen to the current Auth state
firebase.auth().onAuthStateChanged((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 guestbook collection
  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();

}
});
  1. Versuchen Sie, sich als mehrere Benutzer anzumelden, und sehen Sie, wie sich die Anzahl mit jedem weiteren Klicken auf die Schaltfläche JA erhöht.

App-Vorschau

3df607d3e0b3c35.png

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

Was wir behandelt haben

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

Nächste Schritte

Mehr erfahren

Wie ist es gelaufen?

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