Firebase Web Codelab

In diesem Codelab erfahren Sie, wie Sie mit Firebase auf einfache Weise Webanwendungen erstellen, indem Sie einen Chat-Client mithilfe von Firebase-Produkten und -Diensten implementieren und bereitstellen.

Was du lernen wirst

Synchronisieren Sie Daten mit Cloud Firestore und Cloud Storage für Firebase.
Authentifizieren Sie Ihre Benutzer mithilfe der Firebase-Authentifizierung.
Stellen Sie Ihre Web-App auf Firebase Hosting bereit.
Senden Sie Benachrichtigungen mit Firebase Cloud Messaging.
Sammeln Sie die Leistungsdaten Ihrer Web-App.

Was du brauchen wirst

Der IDE- / Texteditor Ihrer Wahl, z. B. WebStorm , Atom , Sublime oder VS Code
Der Paketmanager npm , der normalerweise mit Node.js geliefert wird
Ein Terminal / eine Konsole
Ein Browser Ihrer Wahl wie Chrome
Beispielcode des Codelabs (Informationen zum Abrufen des Codes finden Sie im nächsten Schritt des Codelabs.)

Klonen Sie das GitHub-Repository des Codelabs über die Befehlszeile:

git clone https://github.com/firebase/codelab-friendlychat-web

Wenn Sie git nicht installiert haben, können Sie das Repository alternativ als ZIP-Datei herunterladen .

Importieren Sie die Starter-App

Verwenden Sie Ihre IDE, öffnen oder 📁 importieren web-start - Verzeichnis aus dem geklonten Repository. Dieses 📁 web-start Verzeichnis enthält den Startcode für das Codelab, bei dem es sich um eine voll funktionsfähige Chat-Web-App handelt.

Erstellen Sie ein Firebase-Projekt

Melden Sie sich bei Firebase an .
Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen und benennen Sie Ihr Firebase-Projekt FriendlyChat . Merken Sie sich die Projekt-ID für Ihr Firebase-Projekt.
Klicken Sie auf Projekt erstellen .

Die Anwendung, die wir erstellen werden, verwendet Firebase-Produkte, die für Web-Apps verfügbar sind:

Firebase-Authentifizierung , 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.
Cloud Storage für Firebase zum Speichern von Dateien in der Cloud.
Firebase-Hosting zum Hosten und Bereitstellen Ihrer Assets.
Firebase Cloud Messaging zum Senden von Push-Benachrichtigungen und Anzeigen von Browser-Popup-Benachrichtigungen.
Firebase-Leistungsüberwachung zum Sammeln von Benutzerleistungsdaten für Ihre App.

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

Fügen Sie dem Projekt eine Firebase-Webanwendung hinzu

Klicken Sie auf das Web-Symbol um eine neue Firebase-Webanwendung zu erstellen.
Registrieren Sie die App mit dem Spitznamen " Friendly Chat" und aktivieren Sie das Kontrollkästchen " Auch Firebase-Hosting für diese App einrichten" . Klicken Sie auf App registrieren .
Klicken Sie sich durch die restlichen Schritte. Sie müssen den Anweisungen jetzt nicht folgen. Diese werden in späteren Schritten dieses Codelabs behandelt.

Damit sich Benutzer mit ihren Google-Konten bei der Web-App anmelden können, verwenden wir die Google -Anmeldemethode.

Sie müssen die Google- Anmeldung aktivieren:

Suchen Sie in der Firebase-Konsole den Abschnitt Erstellen im linken Bereich.
Klicken Sie auf Authentifizierung, klicken Sie auf den Anmelde-Verfahren Registerkarte (oder klicken Sie hier um direkt dorthin zu gehen).
Aktivieren Sie den Google -Anmeldeanbieter und klicken Sie auf Speichern .
Setzen Sie den öffentlich zugänglichen Namen Ihrer App auf " Freundlicher Chat" und wählen Sie eine Projektunterstützungs-E-Mail aus dem Dropdown-Menü.
Konfigurieren Sie Ihren OAuth-Zustimmungsbildschirm in der Google Cloud Console und fügen Sie ein Logo hinzu:

Aktivieren Sie den Cloud Firestore

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

Sie müssen Cloud Firestore aktivieren:

Klicken Sie im Abschnitt Erstellen der Firebase-Konsole auf Firestore .
Klicken Sie im Bereich Cloud Firestore auf Datenbank erstellen .

Wählen Sie die Option Im Testmodus starten und klicken Sie auf Weiter, nachdem Sie den Haftungsausschluss zu den Sicherheitsregeln gelesen haben.

Der Testmodus stellt sicher, dass wir während der Entwicklung frei in die Datenbank schreiben können. Wir werden unsere Datenbank später in diesem Codelab sicherer machen.

Legen Sie den Speicherort für Ihre Cloud Firestore-Daten fest. Sie können dies als Standard festlegen oder eine Region in Ihrer Nähe auswählen. Klicken Sie auf Fertig, um Firestore bereitzustellen.

Cloud-Speicher aktivieren

Die Web-App verwendet Cloud Storage für Firebase zum Speichern, Hochladen und Freigeben von Bildern.

Sie müssen Cloud Storage aktivieren:

Klicken Sie im Abschnitt Erstellen der Firebase-Konsole auf Speicher .
Klicken Sie auf Erste Schritte .
Lesen Sie den Haftungsausschluss zu Sicherheitsregeln für Ihr Firebase-Projekt und klicken Sie dann auf Weiter .

Mit den Standardsicherheitsregeln kann jeder authentifizierte Benutzer alles in den Cloud-Speicher schreiben. Wir werden unseren Speicher später in diesem Codelab sicherer machen.

Der Cloud-Speicherort ist mit derselben Region vorausgewählt, die Sie für Ihre Cloud Firestore-Datenbank ausgewählt haben. Klicken Sie auf Fertig , um die Einrichtung abzuschließen.

Über die Firebase-Befehlszeilenschnittstelle (CLI) können Sie Firebase-Hosting verwenden, um Ihre Webanwendung lokal bereitzustellen und Ihre Webanwendung für Ihr Firebase-Projekt bereitzustellen.

Installieren Sie die CLI, indem Sie den folgenden Befehl npm ausführen:

npm -g install firebase-tools

Stellen Sie sicher, dass die CLI korrekt installiert wurde, indem Sie den folgenden Befehl ausführen:

firebase --version

Stellen Sie sicher, dass die Version der Firebase-CLI Version 4.1.0 oder höher ist.

Autorisieren Sie die Firebase-CLI, indem Sie den folgenden Befehl ausführen:

firebase login

Wir haben die Web-App-Vorlage so eingerichtet, dass die Konfiguration Ihrer App für Firebase Hosting aus dem lokalen Verzeichnis Ihrer App (dem Repository, das Sie zuvor im Codelab geklont haben) abgerufen wird. Um die Konfiguration abzurufen, müssen wir Ihre App Ihrem Firebase-Projekt zuordnen.

Stellen Sie sicher , dass Ihre Befehlszeilen lokales Ihre App zugreift web-start - Verzeichnis.
Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen:

firebase use --add

Wenn Sie dazu aufgefordert werden, wählen Sie Ihre Projekt-ID aus und geben Sie Ihrem Firebase-Projekt einen Alias.

Ein Alias ist nützlich, wenn Sie mehrere Umgebungen haben (Produktion, Staging usw.). Verwenden Sie für dieses Codelab jedoch nur den default .

Befolgen Sie die restlichen Anweisungen in Ihrer Befehlszeile.

Nachdem Sie Ihr Projekt importiert und konfiguriert haben, können Sie die Web-App zum ersten Mal ausführen.

In einer Konsole aus dem web-start - Verzeichnis, führen Sie den folgenden CLI - Befehl Firebase:

firebase serve --only hosting

Ihre Befehlszeile sollte die folgende Antwort anzeigen:

✔  hosting: Local server: http://localhost:5000

Wir verwenden den Firebase Hosting- Emulator, um unsere App lokal bereitzustellen. Die Web-App sollte jetzt unter http: // localhost: 5000 verfügbar sein. Alle Dateien, die sich im public Unterverzeichnis befinden, werden bereitgestellt.

Öffnen Sie Ihre App mit Ihrem Browser unter http: // localhost: 5000 .

Sie sollten die Benutzeroberfläche Ihrer FriendlyChat-App sehen, die (noch!) Nicht funktioniert:

Die App kann momentan nichts tun, aber mit Ihrer Hilfe wird es bald! Bisher haben wir nur die Benutzeroberfläche für Sie eingerichtet.

Lassen Sie uns jetzt einen Echtzeit-Chat erstellen!

Importieren Sie das Firebase SDK

Wir müssen das Firebase SDK in die App importieren. Es gibt mehrere Möglichkeiten, dies zu tun, wie in unserer Dokumentation beschrieben . Sie können beispielsweise die Bibliothek aus unserem CDN importieren. Oder Sie können es lokal mit npm installieren und dann in Ihre App packen, wenn Sie Browserify verwenden.

Da wir Firebase Hosting verwenden, um unsere App bereitzustellen, importieren wir die lokalen URLs in der Datei index.html (in Ihrem web-start/public/ -Verzeichnis). Für dieses Codelab haben wir bereits die folgenden Zeilen am Ende der Datei index.html für Sie hinzugefügt. Sie können jedoch überprüfen, ob sie vorhanden sind.

index.html

<script src="/__/firebase/6.4.0/firebase-app.js"></script>
<script src="/__/firebase/6.4.0/firebase-auth.js"></script>
<script src="/__/firebase/6.4.0/firebase-storage.js"></script>
<script src="/__/firebase/6.4.0/firebase-messaging.js"></script>
<script src="/__/firebase/6.4.0/firebase-firestore.js"></script>
<script src="/__/firebase/6.4.0/firebase-performance.js"></script>

Während dieses Codelabs werden wir Firebase-Authentifizierung, Cloud Firestore, Cloud Storage, Cloud Messaging und Leistungsüberwachung verwenden, sodass wir alle ihre Bibliotheken importieren. Stellen Sie in Ihren zukünftigen Apps sicher, dass Sie nur die Teile von Firebase importieren, die Sie benötigen, um die Ladezeit Ihrer App zu verkürzen.

Konfigurieren Sie Firebase

Wir müssen auch das Firebase SDK konfigurieren, um ihm mitzuteilen, welches Firebase-Projekt wir verwenden. Da wir Firebase Hosting verwenden, können Sie ein spezielles Skript importieren, das diese Konfiguration für Sie übernimmt. Auch für dieses Codelab haben wir bereits die folgende Zeile für Sie am Ende der Datei public/index.html hinzugefügt. Überprüfen Sie jedoch, ob sie vorhanden ist.

index.html

<script src="/__/firebase/init.js"></script>

Dieses Skript enthält Ihre Firebase-Projektkonfiguration basierend auf dem Firebase-Projekt, das Sie zuvor beim firebase use --add .

Sie können die Datei init.js überprüfen, um init.js , wie Ihre Projektkonfiguration aussieht. Öffnen Sie dazu http: // localhost: 5000 / __ / firebase / init.js in Ihrem Browser. Sie sollten etwas sehen, das wie folgt aussieht:

/__/firebase/init.js

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "apiKey": "qwertyuiop_asdfghjklzxcvbnm1234568_90",
  "databaseURL": "https://friendlychat-1234.firebaseio.com",
  "storageBucket": "friendlychat-1234.appspot.com",
  "authDomain": "friendlychat-1234.firebaseapp.com",
  "messagingSenderId": "1234567890",
  "projectId": "friendlychat-1234",
  "appId": "1:1234567890:web:123456abcdef"
});

Das Firebase SDK sollte jetzt einsatzbereit sein, da es in index.html importiert und initialisiert wird. Wir werden jetzt die Benutzeranmeldung mithilfe der Firebase-Authentifizierung implementieren.

Wenn ein Benutzer in der App auf die Schaltfläche Mit Google signIn klickt, wird die signIn ausgelöst. (Das haben wir bereits für Sie eingerichtet!) Für dieses Codelab möchten wir Firebase autorisieren, Google als Identitätsanbieter zu verwenden. Wir werden ein Popup verwenden, aber mehrere andere Methoden sind von Firebase verfügbar.

Im web-start - Verzeichnis, in dem Unterverzeichnis public/scripts/ offenen main.js .
Suchen Sie die Funktion signIn .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

main.js

// Signs-in Friendly Chat.
function signIn() {
  // Sign into Firebase using popup auth & Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

Die signOut Funktion wird ausgelöst, wenn der Benutzer die Zeichen aus Schaltfläche klickt.

Gehen Sie zurück zur Datei public/scripts/main.js
Suchen Sie die Funktion signOut .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

main.js

// Signs-out of Friendly Chat.
function signOut() {
  // Sign out of Firebase.
  firebase.auth().signOut();
}

Verfolgen Sie den Authentifizierungsstatus

Um unsere Benutzeroberfläche entsprechend zu aktualisieren, müssen wir überprüfen können, ob der Benutzer angemeldet oder abgemeldet ist. Mit der Firebase-Authentifizierung können Sie einen Beobachter für den Authentifizierungsstatus registrieren, der jedes Mal ausgelöst wird, wenn sich der Authentifizierungsstatus ändert.

Gehen Sie zurück zur Datei public/scripts/main.js
Suchen Sie die Funktion initFirebaseAuth .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

main.js

// Initiate Firebase Auth.
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(authStateObserver);
}

Der obige Code registriert die Funktion authStateObserver als Authentifizierungsstatusbeobachter. Es wird jedes Mal ausgelöst, wenn sich der Authentifizierungsstatus ändert (wenn sich der Benutzer anmeldet oder abmeldet). An diesem Punkt aktualisieren wir die Benutzeroberfläche, um die Anmeldeschaltfläche, die Abmeldeschaltfläche, das Profilbild des angemeldeten Benutzers usw. anzuzeigen oder auszublenden. Alle diese UI-Teile wurden bereits implementiert.

Zeigen Sie die Informationen des angemeldeten Benutzers an

Wir möchten das Profilbild und den Benutzernamen des angemeldeten Benutzers in der oberen Leiste unserer App anzeigen. In Firebase sind die Daten des angemeldeten Benutzers immer im Objekt firebase.auth().currentUser verfügbar. Zuvor haben wir die authStateObserver Funktion so eingerichtet, authStateObserver sie ausgelöst wird, wenn sich der Benutzer authStateObserver , damit unsere Benutzeroberfläche entsprechend aktualisiert wird. Beim Auslösen werden getProfilePicUrl und getUserName .

Gehen Sie zurück zur Datei public/scripts/main.js
Suchen Sie die Funktionen getProfilePicUrl und getUserName .
Ersetzen Sie beide Funktionen durch den folgenden Code.

main.js

// Returns the signed-in user's profile pic URL.
function getProfilePicUrl() {
  return firebase.auth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return firebase.auth().currentUser.displayName;
}

Wir zeigen eine Fehlermeldung an, wenn der Benutzer versucht, Nachrichten zu senden, wenn der Benutzer nicht angemeldet ist. (Sie können es jedoch versuchen!) Wir müssen also feststellen, ob der Benutzer tatsächlich angemeldet ist.

Gehen Sie zurück zur Datei public/scripts/main.js
Suchen Sie die Funktion isUserSignedIn .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

main.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!firebase.auth().currentUser;
}

Testen Sie die Anmeldung bei der App

Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Führen Sie andernfalls firebase serve --only hosting in der Befehlszeile, um die App von http: // localhost: 5000 aus firebase serve --only hosting , und öffnen Sie sie dann in Ihrem Browser.
Melden Sie sich mit der Anmeldeschaltfläche und Ihrem Google-Konto bei der App an. Wenn eine Fehlermeldung angezeigt wird, die besagt, dass Authentifizierung auth/operation-not-allowed ist, stellen Sie sicher, dass Sie Google Sign-in als Authentifizierungsanbieter in der Firebase-Konsole aktiviert haben.
Nach der Anmeldung sollten Ihr Profilbild und Ihr Benutzername angezeigt werden:

In diesem Abschnitt schreiben wir einige Daten in den Cloud Firestore, damit wir die Benutzeroberfläche der App füllen können. Dies kann manuell mit der Firebase-Konsole erfolgen , wir werden dies jedoch in der App selbst tun, um einen grundlegenden Cloud Firestore-Schreibvorgang zu demonstrieren.

Datenmodell

Cloud Firestore-Daten sind in Sammlungen, Dokumente, Felder und Untersammlungen unterteilt. Wir speichern jede Nachricht des Chats als Dokument in einer Sammlung der obersten Ebene, die als messages .

Hinzufügen von Nachrichten zum Cloud Firestore

Zum Speichern der Chat-Nachrichten, die von Benutzern geschrieben wurden, verwenden wir den Cloud Firestore .

In diesem Abschnitt fügen Sie die Funktionalität hinzu, mit der Benutzer neue Nachrichten in Ihre Datenbank schreiben können. Ein Benutzer, der auf die Schaltfläche SENDEN klickt, löst das folgende Codefragment aus. Es fügt Ihrer Cloud Firestore-Instanz in der messages ein Nachrichtenobjekt mit dem Inhalt der messages . Die Methode add() fügt der Sammlung ein neues Dokument mit einer automatisch generierten ID hinzu.

Gehen Sie zurück zur Datei public/scripts/main.js
Suchen Sie die Funktion saveMessage .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

main.js

// Saves a new message to your Cloud Firestore database.
function saveMessage(messageText) {
  // Add a new message entry to the database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to database', error);
  });
}

Testen Sie das Senden von Nachrichten

Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Führen Sie andernfalls firebase serve --only hosting in der Befehlszeile, um die App von http: // localhost: 5000 aus firebase serve --only hosting , und öffnen Sie sie dann in Ihrem Browser.
Geben Sie nach der Anmeldung eine Nachricht wie "Hey there!" Ein und klicken Sie dann auf SENDEN . Dadurch wird die Nachricht in den Cloud Firestore geschrieben. Sie werden die Daten jedoch noch nicht in Ihrer eigentlichen Web-App sehen, da das Abrufen der Daten noch implementiert werden muss (der nächste Abschnitt des Codelabs).
Sie können die neu hinzugefügte Nachricht in Ihrer Firebase-Konsole sehen. Öffnen Sie Ihre Firebase-Konsole. Klicken Sie im Abschnitt Erstellen auf Datenbank (oder klicken Sie hier und wählen Sie Ihr Projekt aus). Die Nachrichtensammlung sollte mit Ihrer neu hinzugefügten Nachricht angezeigt werden:

Nachrichten synchronisieren

Um Nachrichten in der App zu lesen, müssen wir Listener hinzufügen, die bei Datenänderungen ausgelöst werden, und dann ein UI-Element erstellen, das neue Nachrichten anzeigt.

Wir werden Code hinzufügen, der auf neu hinzugefügte Nachrichten aus der App wartet. In diesem Code registrieren wir den Listener, der auf Änderungen an den Daten wartet. Wir zeigen nur die letzten 12 Nachrichten des Chats an, um zu vermeiden, dass beim Laden ein sehr langer Verlauf angezeigt wird.

Gehen Sie zurück zur Datei public/scripts/main.js
Suchen Sie die Funktion loadMessages .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

main.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                       message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

Um Nachrichten in der Datenbank abzuhören, erstellen wir eine Abfrage für eine Sammlung, indem wir mithilfe der Funktion .collection angeben, in welcher Sammlung sich die Daten befinden, die wir abhören möchten. Im obigen Code hören wir uns die Änderungen innerhalb der an messages , in der die Chat-Nachrichten gespeichert werden. Wir wenden auch ein Limit an, indem wir nur die letzten 12 Nachrichten mit .limit(12) und die Nachrichten mit .orderBy('timestamp', 'desc') nach Datum .orderBy('timestamp', 'desc') , um die 12 neuesten Nachrichten zu erhalten.

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 hierzu finden Sie in der Dokumentation zum Cloud Firestore .

Testen Sie die Synchronisierung von Nachrichten

Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Führen Sie andernfalls firebase serve --only hosting in der Befehlszeile, um die App von http: // localhost: 5000 aus firebase serve --only hosting , und öffnen Sie sie dann in Ihrem Browser.
Die Nachrichten, die Sie zuvor in der Datenbank erstellt haben, sollten in der FriendlyChat-Benutzeroberfläche angezeigt werden (siehe unten). Fühlen Sie sich frei, neue Nachrichten zu schreiben; Sie sollten sofort erscheinen.
(Optional) Sie können versuchen, Nachrichten manuell direkt im Abschnitt " Datenbank " der Firebase-Konsole zu löschen, zu ändern oder neue Nachrichten hinzuzufügen. Änderungen sollten in der Benutzeroberfläche berücksichtigt werden.

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

Wir werden jetzt eine Funktion hinzufügen, die Bilder gemeinsam nutzt.

Während der Cloud Firestore zum Speichern strukturierter Daten geeignet ist, eignet sich Cloud Storage besser zum Speichern von Dateien. Cloud Storage for Firebase ist ein Datei- / Blob-Speicherdienst, mit dem alle Bilder gespeichert werden, die ein Benutzer mithilfe unserer App freigibt.

Speichern Sie Bilder im Cloud-Speicher

Für dieses Codelab haben wir bereits eine Schaltfläche hinzugefügt, die einen Dateiauswahldialog auslöst. Nach Auswahl einer Datei wird die Funktion saveImageMessage aufgerufen, und Sie können einen Verweis auf die ausgewählte Datei saveImageMessage . Die Funktion saveImageMessage Folgendes aus:

Erstellt eine Chat-Nachricht "Platzhalter" im Chat-Feed, sodass Benutzer beim Hochladen des Bildes eine Animation "Laden" sehen.
Lädt die Bilddatei in den Cloud-Speicher unter folgendem Pfad /<uid>/<messageId>/<file_name> : /<uid>/<messageId>/<file_name>
Erzeugt eine öffentlich lesbare URL für die Bilddatei.
Aktualisiert die Chat-Nachricht mit der URL der neu hochgeladenen Bilddatei anstelle des temporären Ladebilds.

Jetzt fügen Sie die Funktionalität zum Senden eines Bildes hinzu:

Gehen Sie zurück zur Datei public/scripts/main.js
Suchen Sie die Funktion saveImageMessage .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

main.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image's URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  });
}

Testen Sie das Senden von Bildern

Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Führen Sie andernfalls firebase serve --only hosting in der Befehlszeile, um die App von http: // localhost: 5000 aus firebase serve --only hosting , und öffnen Sie sie dann in Ihrem Browser.
Klicken Sie nach der Anmeldung auf die Schaltfläche zum Hochladen von Bildern und wählen Sie eine Bilddatei mit der Dateiauswahl aus. Wenn Sie nach einem Bild suchen, können Sie dieses schöne Bild einer Kaffeetasse verwenden .
In der Benutzeroberfläche der App sollte eine neue Nachricht mit dem ausgewählten Bild angezeigt werden:

Wenn Sie versuchen, ein Bild hinzuzufügen, während Sie nicht angemeldet sind, sollte eine Toast-Benachrichtigung angezeigt werden, die Sie darüber informiert, dass Sie sich anmelden müssen, um Bilder hinzuzufügen.

Wir werden jetzt Unterstützung für Browser-Benachrichtigungen hinzufügen. Die App benachrichtigt Benutzer, wenn neue Nachrichten im Chat veröffentlicht werden. Firebase Cloud Messaging (FCM) ist eine plattformübergreifende Messaging-Lösung, mit der Sie Nachrichten und Benachrichtigungen zuverlässig und kostenlos übermitteln können.

Whitelist der GCM-Absender-ID

Im Web-App-Manifest müssen Sie die gcm_sender_id angeben. gcm_sender_id ist ein fest codierter Wert, der angibt, dass FCM berechtigt ist, Nachrichten an diese App zu senden.

Öffnen Sie im web-start Verzeichnis im public Verzeichnis manifest.json .
Fügen Sie den Browser-Absender-ID-Wert im Attribut gcm_sender_id genau wie unten gezeigt hinzu. Ändern Sie den Wert nicht von dem unten gezeigten.

manifest.json

{
  "name": "Friendly Chat",
  "short_name": "Friendly Chat",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507"
}

Fügen Sie den FCM-Servicemitarbeiter hinzu

Die Web-App benötigt einen Servicemitarbeiter , der Webbenachrichtigungen empfängt und anzeigt.

Erstellen Sie im web-start Verzeichnis im public Verzeichnis eine neue Datei mit dem Namen firebase-messaging-sw.js .
Fügen Sie der neuen Datei den folgenden Inhalt hinzu.

firebase-messaging-sw.js

importScripts('/__/firebase/6.0.4/firebase-app.js');
importScripts('/__/firebase/6.0.4/firebase-messaging.js');
importScripts('/__/firebase/init.js');

firebase.messaging();

Der Servicemitarbeiter muss lediglich das Firebase Cloud Messaging SDK laden und initialisieren, um Benachrichtigungen anzuzeigen.

Holen Sie sich FCM-Gerätetoken

Wenn Benachrichtigungen auf einem Gerät oder Browser aktiviert wurden, erhalten Sie ein Geräte-Token . Mit diesem Gerätetoken senden wir eine Benachrichtigung an ein bestimmtes Gerät oder einen bestimmten Browser.

Wenn sich der Benutzer saveMessagingDeviceToken , rufen wir die Funktion saveMessagingDeviceToken . Dort erhalten wir das FCM-Gerätetoken vom Browser und speichern es im Cloud Firestore.

Gehen Sie zurück zur Datei public/scripts/main.js
Suchen Sie die Funktion saveMessagingDeviceToken .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

main.js

// Saves the messaging device token to the datastore.
function saveMessagingDeviceToken() {
  firebase.messaging().getToken().then(function(currentToken) {
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to the datastore.
      firebase.firestore().collection('fcmTokens').doc(currentToken)
          .set({uid: firebase.auth().currentUser.uid});
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  }).catch(function(error){
    console.error('Unable to get messaging token.', error);
  });
}

Dieser Code funktioniert jedoch zunächst nicht. Damit Ihre App das Geräte-Token abrufen kann, muss der Benutzer Ihrer App die Berechtigung zum Anzeigen von Benachrichtigungen erteilen (nächster Schritt des Codelabs).

Fordern Sie Berechtigungen zum Anzeigen von Benachrichtigungen an

Wenn der Benutzer Ihrer App noch keine Berechtigung zum Anzeigen von Benachrichtigungen erteilt hat, erhalten Sie kein Geräte-Token. In diesem Fall rufen wir die Methode firebase.messaging().requestPermission() , die einen firebase.messaging().requestPermission() anzeigt, in dem Sie nach dieser Berechtigung gefragt werden ( in unterstützten Browsern ).

Gehen Sie zurück zur Datei public/scripts/main.js
Suchen Sie die Funktion requestNotificationsPermissions .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

main.js

// Requests permission to show notifications.
function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  firebase.messaging().requestPermission().then(function() {
    // Notification permission granted.
    saveMessagingDeviceToken();
  }).catch(function(error) {
    console.error('Unable to get permission to notify.', error);
  });
}

Holen Sie sich Ihr Geräte-Token

Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Führen Sie andernfalls firebase serve --only hosting in der Befehlszeile, um die App von http: // localhost: 5000 aus firebase serve --only hosting , und öffnen Sie sie dann in Ihrem Browser.
Nach der Anmeldung sollte das Dialogfeld "Benachrichtigungsberechtigung" angezeigt werden:
Klicken Sie auf Zulassen .
Öffnen Sie die JavaScript-Konsole Ihres Browsers. Die folgende Meldung sollte Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
Kopieren Sie Ihr Gerätetoken. Sie benötigen es für die nächste Stufe des Codelabs.

Senden Sie eine Benachrichtigung an Ihr Gerät

Nachdem Sie Ihr Gerätetoken haben, können Sie eine Benachrichtigung senden.

Neben dem Gerät Token werden, müssen Sie auch Ihren Server Key Firebase App. Um diesen Schlüssel zu erhalten, gehen Sie zu Firebase Console> Projekteinstellungen> Cloud Messaging und kopieren Sie den Serverschlüssel .

Um eine Benachrichtigung zu senden, müssen Sie die folgende HTTP-Anfrage senden:

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY

{
  "notification": {
    "title": "New chat message!",
    "body": "There is a new message in FriendlyChat",
    "icon": "/images/profile_placeholder.png",
    "click_action": "http://localhost:5000"
  },
  "to":"YOUR_DEVICE_TOKEN"
}

Führen Sie in der Befehlszeile den folgenden Befehl cURL aus .

curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

Beachten Sie, dass die Benachrichtigung nur angezeigt wird, wenn sich die FriendlyChat-App im Hintergrund befindet. Sie müssen weg navigieren oder eine andere Registerkarte anzeigen, damit die Benachrichtigung angezeigt wird. Wenn sich die App im Vordergrund befindet, gibt es eine Möglichkeit, die von FCM gesendeten Nachrichten abzufangen .

Wenn sich Ihre App im Hintergrund befindet, sollte in Ihrem Browser eine Benachrichtigung angezeigt werden, wie in diesem Beispiel:

Anzeigen von Datenbanksicherheitsregeln

Cloud Firestore verwendet eine bestimmte Regelsprache , um Zugriffsrechte, Sicherheit und Datenüberprüfungen zu definieren.

Beim Einrichten des Firebase-Projekts zu Beginn dieses Codelabs haben wir die Standardsicherheitsregeln "Testmodus" verwendet, um den Zugriff auf den Datenspeicher nicht einzuschränken. In der Firebase-Konsole können Sie auf der Registerkarte Regeln des Abschnitts Datenbank diese Regeln anzeigen und ändern.

Im Moment sollten Sie die Standardregeln sehen, die den Zugriff auf den Datenspeicher nicht einschränken. Dies bedeutet, dass jeder Benutzer alle Sammlungen in Ihrem Datenspeicher lesen und schreiben kann.

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

Wir werden die Regeln aktualisieren, um die Dinge einzuschränken, indem wir die folgenden Regeln verwenden:

firestore.rules

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

Aktualisieren Sie die Datenbanksicherheitsregeln

Es gibt zwei Möglichkeiten, Ihre Datenbanksicherheitsregeln zu bearbeiten, entweder in der Firebase-Konsole oder in einer lokalen Regeldatei, die mithilfe der Firebase-CLI bereitgestellt wird.

So aktualisieren Sie die Sicherheitsregeln in der Firebase-Konsole:

Gehen Sie im linken Bereich zum Abschnitt " Datenbank" und klicken Sie auf die Registerkarte " Regeln" .
Ersetzen Sie die Standardregeln, die sich bereits in der Konsole befinden, durch die oben gezeigten Regeln.
Klicken Sie auf Veröffentlichen .

So aktualisieren Sie Sicherheitsregeln aus einer lokalen Datei:

Öffnen Sie im web-start Verzeichnis die Datei firestore.rules .
Ersetzen Sie die Standardregeln, die bereits in der Datei enthalten sind, durch die oben gezeigten Regeln.
Öffnen Sie im web-start Verzeichnis die firebase.json .
Fügen Sie das Attribut firestore.rules , das auf firestore.rules verweist, wie unten gezeigt. (Das hosting Attribut sollte bereits in der Datei enthalten sein.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Stellen Sie die Sicherheitsregeln mithilfe der Firebase-CLI bereit, indem Sie den folgenden Befehl ausführen:

firebase deploy --only firestore

Ihre Befehlszeile sollte die folgende Antwort anzeigen:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Anzeigen der Sicherheitsregeln für Cloud-Speicher

Cloud Storage für Firebase verwendet eine bestimmte Regelsprache , um Zugriffsrechte, Sicherheit und Datenüberprüfungen zu definieren.

Beim Einrichten des Firebase-Projekts zu Beginn dieses Codelabs haben wir uns für die Verwendung der Standard-Sicherheitsregel für Cloud-Speicher entschieden, nach der nur authentifizierte Benutzer Cloud-Speicher verwenden können. In der Firebase-Konsole können Sie auf der Registerkarte Regeln des Abschnitts Speicher Regeln anzeigen und ändern. Sie sollten die Standardregel sehen, nach der jeder angemeldete Benutzer Dateien in Ihrem Speicherbereich lesen und schreiben kann.

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

Wir werden die Regeln aktualisieren, um Folgendes zu tun:

Erlauben Sie jedem Benutzer, nur in seine eigenen Ordner zu schreiben
Erlauben Sie jedem, aus dem Cloud-Speicher zu lesen
Stellen Sie sicher, dass es sich bei den hochgeladenen Dateien um Bilder handelt
Beschränken Sie die Größe der Bilder, die hochgeladen werden können, auf maximal 5 MB

Dies kann nach folgenden Regeln implementiert werden:

Speicherregeln

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

Aktualisieren Sie die Sicherheitsregeln für den Cloud-Speicher

Es gibt zwei Möglichkeiten, Ihre Speichersicherheitsregeln zu bearbeiten: entweder in der Firebase-Konsole oder aus einer lokalen Regeldatei, die mithilfe der Firebase-CLI bereitgestellt wird.

So aktualisieren Sie die Sicherheitsregeln in der Firebase-Konsole:

Wechseln Sie im linken Bereich zum Abschnitt Speicher , und klicken Sie dann auf die Registerkarte Regeln .
Ersetzen Sie die Standardregel, die sich bereits in der Konsole befindet, durch die oben gezeigten Regeln.
Klicken Sie auf Veröffentlichen .

So aktualisieren Sie Sicherheitsregeln aus einer lokalen Datei:

Öffnen Sie im web-start Verzeichnis die storage.rules .
Ersetzen Sie die Standardregeln, die bereits in der Datei enthalten sind, durch die oben gezeigten Regeln.
Öffnen Sie im web-start Verzeichnis die firebase.json .
Fügen Sie die storage.rules zeigen Attribut auf die storage.rules Datei, wie unten gezeigt. (Das hosting und database sollte bereits in der Datei enthalten sein.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Stellen Sie die Sicherheitsregeln mithilfe der Firebase-CLI bereit, indem Sie den folgenden Befehl ausführen:

firebase deploy --only storage

Ihre Befehlszeile sollte die folgende Antwort anzeigen:

=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Mit dem Performance Monitoring SDK können Sie reale Leistungsdaten aus Ihrer App erfassen und diese Daten dann in der Firebase-Konsole überprüfen und analysieren. Mithilfe der Leistungsüberwachung können Sie nachvollziehen, wo und wann die Leistung Ihrer App verbessert werden kann, damit Sie diese Informationen zur Behebung von Leistungsproblemen verwenden können.

Es gibt verschiedene Möglichkeiten, sich in das JavaScript-SDK für die Firebase-Leistungsüberwachung zu integrieren. In diesem Codelab haben wir die Leistungsüberwachung über Hosting-URLs aktiviert. Weitere Methoden zum Aktivieren des SDK finden Sie in der Dokumentation .

Automatische Spuren

Da wir firebase-performance.js und init.js in einen früheren Schritt des Codelabs aufgenommen haben, müssen wir nur eine Zeile hinzufügen, um Performance Monitoring anzuweisen, automatisch Seitenlast- und Netzwerkanforderungsmetriken für Sie zu erfassen, wenn Benutzer Ihre bereitgestellte Site besuchen!

public/scripts/main.js in public/scripts/main.js die folgende Zeile unter dem vorhandenen TODO , um die Leistungsüberwachung zu initialisieren.

main.js

// TODO: Enable Firebase Performance Monitoring.
firebase.performance();

Erste Eingangsverzögerung messen (optional)

Die Verzögerung der ersten Eingabe ist nützlich, da der Browser, der auf eine Benutzerinteraktion reagiert, Ihren Benutzern erste Eindrücke über die Reaktionsfähigkeit Ihrer App vermittelt.

Die erste Eingabeverzögerung beginnt, wenn der Benutzer zum ersten Mal mit einem Element auf der Seite interagiert, z. B. durch Klicken auf eine Schaltfläche oder einen Hyperlink. Es wird sofort beendet, nachdem der Browser auf die Eingabe reagieren kann. Dies bedeutet, dass der Browser nicht damit beschäftigt ist, den Inhalt Ihrer Seite zu laden oder zu analysieren.

Wenn Sie die erste Eingangsverzögerung messen möchten, müssen Sie den folgenden Code direkt einfügen.

Öffnen Sie public/index.html .
Kommentieren Sie das script Tag in der folgenden Zeile aus.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Weitere Informationen zur ersten Polyfill-Eingangsverzögerung finden Sie in der Dokumentation .

Leistungsdaten anzeigen

Da Sie Ihre Site noch nicht bereitgestellt haben (Sie werden sie im nächsten Schritt bereitstellen), sehen Sie hier einen Screenshot mit den Metriken zur Leistung beim Laden von Seiten, die in der Firebase-Konsole innerhalb von 12 Stunden nach der Interaktion der Benutzer mit Ihrer bereitgestellten Site angezeigt werden ::

Wenn Sie das Performance Monitoring SDK in Ihre App integrieren, müssen Sie keinen weiteren Code schreiben, bevor Ihre App automatisch mehrere wichtige Aspekte der Leistung überwacht. Bei Web-Apps protokolliert das SDK Aspekte wie das erste inhaltliche Malen, die Möglichkeit für Benutzer, mit Ihrer App zu interagieren, und vieles mehr.

Sie können auch benutzerdefinierte Traces, Metriken und Attribute einrichten, um bestimmte Aspekte Ihrer App zu messen. Weitere Informationen zu benutzerdefinierten Traces, Metriken und benutzerdefinierten Attributen finden Sie in der Dokumentation.

Firebase bietet einen Hosting-Service für Ihre Assets und Web-Apps. Sie können Ihre Dateien mithilfe der Firebase-CLI für Firebase Hosting bereitstellen. Vor der Bereitstellung müssen Sie in Ihrer Datei firebase.json angeben, welche lokalen Dateien bereitgestellt werden sollen. Für dieses Codelab haben wir dies bereits für Sie erledigt, da dieser Schritt erforderlich war, um unsere Dateien während dieses Codelabs bereitzustellen. Die Hosting-Einstellungen werden unter dem hosting Attribut angegeben:

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Diese Einstellungen teilen der CLI mit, dass alle Dateien im Verzeichnis ./public ( "public": "./public" ) "public": "./public" .

Stellen Sie sicher , dass Ihre Befehlszeilen lokales Ihre App zugreift web-start - Verzeichnis.
Stellen Sie Ihre Dateien in Ihrem Firebase-Projekt bereit, indem Sie den folgenden Befehl ausführen:

firebase deploy --except functions

Die Konsole sollte Folgendes anzeigen:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

Besuchen Sie Ihre Web-App, die jetzt vollständig mit Firebase Hosting in zwei Ihrer eigenen Firebase-Subdomains gehostet wird:

https://<firebase-projectId>.firebaseapp.com
https://<firebase-projectId>.web.app .

Alternativ können Sie firebase open hosting:site in der Befehlszeile ausführen.

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

Go to your project's Firebase console Hosting section to view useful hosting information and tools, including the history of your deploys, the functionality to roll back to previous versions of your app, and the workflow to set up a custom domain.

You've used Firebase to build a real-time chat web application!

What we've covered

Firebase Authentication
Cloud Firestore
Firebase SDK for Cloud Storage
Firebase Cloud Messaging
Firebase Performance Monitoring
Firebase Hosting

Next steps

Learn more

firebase.google.com

Firebase Web Codelab

Was du lernen wirst

Was du brauchen wirst

Importieren Sie die Starter-App

Erstellen Sie ein Firebase-Projekt

Fügen Sie dem Projekt eine Firebase-Webanwendung hinzu

Aktivieren Sie die Google- Anmeldung für die Firebase-Authentifizierung

Aktivieren Sie den Cloud Firestore

Cloud-Speicher aktivieren

Importieren Sie das Firebase SDK

Konfigurieren Sie Firebase

Authentifizieren Sie Ihre Nutzer mit Google Sign-In

Verfolgen Sie den Authentifizierungsstatus

Zeigen Sie die Informationen des angemeldeten Benutzers an

Testen Sie die Anmeldung bei der App

Datenmodell

Hinzufügen von Nachrichten zum Cloud Firestore

Testen Sie das Senden von Nachrichten

Nachrichten synchronisieren

Testen Sie die Synchronisierung von Nachrichten

Speichern Sie Bilder im Cloud-Speicher

Testen Sie das Senden von Bildern

Whitelist der GCM-Absender-ID

Fügen Sie den FCM-Servicemitarbeiter hinzu

Holen Sie sich FCM-Gerätetoken

Fordern Sie Berechtigungen zum Anzeigen von Benachrichtigungen an

Holen Sie sich Ihr Geräte-Token

Senden Sie eine Benachrichtigung an Ihr Gerät

Anzeigen von Datenbanksicherheitsregeln

Aktualisieren Sie die Datenbanksicherheitsregeln

Anzeigen der Sicherheitsregeln für Cloud-Speicher

Aktualisieren Sie die Sicherheitsregeln für den Cloud-Speicher

Automatische Spuren

Erste Eingangsverzögerung messen (optional)

Leistungsdaten anzeigen

What we've covered

Next steps

Learn more