Firebase-Webcodelab

1. Übersicht

In diesem Code - Lab, erfahren Sie , wie Sie mit Firebase zu leicht Web - Anwendungen durch die Implementierung und den Einsatz einen Chat - Client mit Firebase Produkten und Dienstleistungen zu schaffen.

3b1284f5144b54f6.png

Was du lernst

  • Synchronisieren Sie Daten mit Cloud Firestore und Cloud Storage for Firebase.
  • Authentifizieren Sie Ihre Benutzer mit Firebase Authentication.
  • Stellen Sie Ihre Web-App auf Firebase Hosting bereit.
  • Senden Sie Benachrichtigungen mit Firebase Cloud Messaging.
  • Erfassen Sie die Leistungsdaten Ihrer Web-App.

Was du brauchen wirst

  • Der IDE / Text - Editor Ihrer Wahl, wie WebStorm , Atom , Sublime oder VS - Code
  • Der Paket - Manager npm , die in der Regel kommt mit Node.js
  • Ein Terminal/eine Konsole
  • Ein Browser Ihrer Wahl, z. B. Chrome
  • Der Beispielcode des Codelabs (Informationen zum Abrufen des Codes finden Sie im nächsten Schritt des Codelabs.)

2. Holen Sie sich den Beispielcode

Klon mit dem den Codelab GitHub - Repository über die Befehlszeile:

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

Wenn Sie Alternativ haben keine git installiert haben , können Sie das Repository 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 Code - Lab, die ein voll funktionsfähiger Chat - Web - App sein.

3. Erstellen und richten Sie ein Firebase-Projekt ein

Erstellen Sie ein Firebase-Projekt

  1. Melden Sie sich in Firebase .
  2. In der Firebase - Konsole, klicken Sie auf Projekt hinzufügen und dann Firebase Projekt FriendlyChat nennen. Merken Sie sich die Projekt-ID Ihres Firebase-Projekts.
  3. Aktivieren Deaktivieren Sie die Option Google Analytics für dieses Projekt
  4. Klicken Sie auf Projekt erstellen.

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

  • Firebase - Authentifizierung einfach lassen Sie Ihre Benutzer in der App anmelden.
  • Cloud Firestor auf strukturierte Daten in der Cloud zu speichern und sofort eine Benachrichtigung , wenn Datenänderungen erhalten.
  • Cloud Storage für Firebase Dateien in der Cloud zu speichern.
  • Hosting Firebase zu Host und dienen Ihr Vermögen.
  • Firebase Cloud Messaging Push - Benachrichtigungen und Display - Browser Popup - Benachrichtigungen zu senden.
  • Firebase Performance - Überwachung zu sammeln für Ihre App - Nutzer Leistungsdaten.

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

Dem Projekt eine Firebase-Web-App hinzufügen

  1. Klicken Sie auf das Websymbol 58d6543a156e56f9.png um eine neue Firebase-Web-App zu erstellen.
  2. Registrieren Sie die App mit dem Spitznamen freundlich Chat, dann markieren Sie das Kästchen neben sich auch für Firebase diese App Hosting eingerichtet. Klicken Sie auf Registrieren App.
  3. Im nächsten Schritt sehen Sie ein Konfigurationsobjekt. Kopieren Sie einfach das JS - Objekt (nicht die umgebende HTML) in Feuerbasis -config.js

Screenshot der Web-App registrieren

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

Benutzer in den Web - App mit ihren Google - Konten anmelden , um zu ermöglichen, werden wir die Google-Anmeldemethode verwenden.

Sie müssen Google-Anmeldung aktivieren:

  1. In der Konsole Firebase, suchen Sie den Build - Abschnitt im linken Bereich.
  2. Klicken Sie auf Authentifizierung, klicken Sie auf den Anmelde-Verfahren Registerkarte (oder klicken Sie hier um direkt dorthin zu gehen).
  3. Aktivieren Sie die Google-Anmelde Anbieter, dann klicken Sie auf Speichern.
  4. Stellen Sie die öffentlich zugänglichen Namen des App im Friendly Chat aus und wählen Sie eine Projektunterstützung E - Mail aus den Dropdown - Menü.
  5. Konfigurieren Sie Ihren OAuth - Zustimmungsbildschirm in der Google Cloud Console , und fügen Sie ein Logo:

d89fb3873b5d36ae.png

Cloud Firestore aktivieren

Der Web - App nutzt Cloud - Firestor Chat - Nachrichten zu speichern und neue Chat - Nachrichten.

Sie müssen Cloud Firestore aktivieren:

  1. In der Aufbaubereich von Firebase Konsole auf Firestore - Datenbank.
  2. Klicken Sie auf Datenbank erstellen in dem Cloud Firestor Bereich.

729991a081e7cd5.png

  1. Wählen Sie den Start in Testmodus - Option, und klicken Sie auf Weiter , nachdem die wichtigen Hinweise zu den Sicherheitsregeln zu lesen.

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.

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

Cloud-Speicher aktivieren

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

Sie müssen Cloud Storage aktivieren:

  1. In der Aufbaubereich von Firebase - Konsole, klicken Sie auf Speicher.
  2. Wenn es gibt keine Taste beginnen, bedeutet dies , dass Cloud - Speicher bereits aktiviert ist, und Sie nicht die folgenden Schritte folgen müssen.
  3. Klicken Sie auf Erste Schritte.
  4. Lesen Sie den Haftungsausschluss über Sicherheitsregeln für Ihr Projekt Firebase, dann klicken Sie auf Weiter.

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

4. Installieren Sie die Firebase-Befehlszeilenschnittstelle

Mit der Firebase-Befehlszeilenschnittstelle (CLI) können Sie Firebase Hosting verwenden, um Ihre Web-App lokal bereitzustellen und Ihre Web-App in Ihrem Firebase-Projekt bereitzustellen.

  1. Installieren Sie die CLI, indem Sie den folgenden npm-Befehl ausführen:
npm -g install firebase-tools
  1. Überprüfen Sie, ob die CLI ordnungsgemäß installiert wurde, indem Sie den folgenden Befehl ausführen:
firebase --version

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

  1. Autorisieren Sie die Firebase-CLI, indem Sie den folgenden Befehl ausführen:
firebase login

Wir haben die Web-App-Vorlage eingerichtet, um die Konfiguration Ihrer App für Firebase Hosting aus dem lokalen Verzeichnis Ihrer App abzurufen (dem Repository, das Sie zuvor im Codelab geklont haben). Um die Konfiguration abzurufen, müssen wir Ihre App jedoch mit Ihrem Firebase-Projekt verknüpfen.

  1. Stellen Sie sicher , dass Ihre Befehlszeilen lokales Ihre App zugreift web-start - Verzeichnis.
  2. Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen:
firebase use --add
  1. Wählen Sie bei Aufforderung Ihre ID - Projekt, dann geben Sie Ihrem Projekt Firebase einen Aliasnamen.

Ein Alias ​​ist nützlich, wenn Sie mehrere Umgebungen haben (Produktion, Staging usw.). Doch für diesen Codelab, lassen Sie sich einfach den Alias verwendet default .

  1. Befolgen Sie die verbleibenden Anweisungen in Ihrer Befehlszeile.

5. Führen Sie die Starter-App lokal aus

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

  1. In einer Konsole aus dem web-start - Verzeichnis, führen Sie den folgenden CLI - Befehl Firebase:
firebase serve --only hosting
  1. Ihre Befehlszeile sollte die folgende Antwort anzeigen:
✔  hosting: Local server: http://localhost:5000

Wir verwenden die Firebase Hosting - Emulator unser App vor Ort zu bedienen. Der Web - App sollte jetzt verfügbar sein von http: // localhost: 5000 . Alle Dateien , die unter dem befinden public Unterverzeichnis serviert.

  1. Mit Ihrem Browser, öffnen Sie Ihre App unter http: // localhost: 5000 .

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

4c23f9475228cef4.png

Die App kann im Moment nichts tun, aber mit Ihrer Hilfe wird sie es bald tun! Wir haben bisher nur die Benutzeroberfläche für Sie bereitgestellt.

Lassen Sie uns jetzt einen Echtzeit-Chat aufbauen!

6. Firebase importieren und konfigurieren

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.

Wir werden die Firebase SDK von NPM erhalten und nutzen Webpack unseren Code zu bündeln. Wir tun dies, damit Webpack unnötigen Code entfernen kann und die Größe unseres JS-Bundles klein hält, um sicherzustellen, dass unsere App so schnell wie möglich geladen wird. Aus diesem Codelab haben wir bereits eine erstellte web-start/package.json Datei, die die Firebase SDK als Abhängigkeit, sowie importierten die benötigten Funktionen an der Spitze umfasst web-start/src/index.js .

Paket.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

In diesem Codelab verwenden wir Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging und Performance Monitoring, also importieren wir alle ihre Bibliotheken. 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.

Installieren Sie das Firebase SDK und starten Sie Ihren Webpack-Build

Wir müssen einige Befehle ausführen, um den Build unserer App in Gang zu setzen.

  1. Öffnen Sie ein neues Terminalfenster
  2. Stellen Sie sicher , sind Sie in der web-start - Verzeichnis
  3. Führen Sie npm install die Firebase SDK herunterladen
  4. Führen npm run start starten Webpack. Webpack wird nun unseren Kurscode für den Rest des Codelabs ständig neu erstellen.

Firebase konfigurieren

Wir müssen auch das Firebase SDK konfigurieren, um ihm mitzuteilen, welches Firebase-Projekt wir verwenden.

  1. Gehen Sie zu Ihren Projekteinstellungen in der Konsole Firebase
  2. Wählen Sie in der Karte "Ihre Apps" den Spitznamen der App aus, für die Sie ein Konfigurationsobjekt benötigen.
  3. Wählen Sie im Snippet-Bereich des Firebase SDK "Config" aus.
  4. Kopieren Sie die Config - Objekt - Schnipsel, dann fügen Sie web-start/src/firebase-config.js .

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Nun geht auf den Boden der web-start/src/index.js und initialize Firebase:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. Benutzeranmeldung einrichten

Das Firebase SDK sollte nun bereit sein , zu verwenden , da es importiert wird und in initialisiert index.html . Wir gehen jetzt Benutzer-Anmelde Verwendung implementieren Firebase - Authentifizierung .

Authentifizieren Sie Ihre Nutzer mit Google Log-in

In der App, wenn ein Benutzer die Anmeldung mit Google Schaltfläche klickt, die signIn wird Funktion ausgelöst. (Wir haben das bereits für Sie eingerichtet!) Für dieses Codelab möchten wir Firebase autorisieren, Google als Identitätsanbieter zu verwenden. Wir werden ein Pop - up verwenden, aber einige andere Methoden sind von Firebase verfügbar.

  1. Im web-start - Verzeichnis im Unterverzeichnis src/ offen index.js .
  2. Hier finden Sie die Funktion signIn .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

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

  1. Gehen Sie auf die Datei zurück src/index.js .
  2. Hier finden Sie die Funktion signOutUser .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

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

Verfolgen Sie den Authentifizierungsstatus

Um unsere Benutzeroberfläche entsprechend zu aktualisieren, benötigen wir eine Möglichkeit, zu überprüfen, ob der Benutzer an- oder abgemeldet ist. Mit Firebase Authentication können Sie einen Beobachter für den Authentifizierungsstatus registrieren, der bei jeder Änderung des Authentifizierungsstatus ausgelöst wird.

  1. Gehen Sie auf die Datei zurück src/index.js .
  2. Hier finden Sie die Funktion initFirebaseAuth .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

Der obige Code - Register die Funktion authStateObserver als Authentifizierungszustandsbeobachter. Es wird jedes Mal ausgelöst, wenn sich der Authentifizierungsstatus ändert (wenn sich der Benutzer an- oder abmeldet). An dieser Stelle 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 ist die angemeldeten Nutzer die Daten immer in der zur Verfügung stehenden currentUser Objekt. Früher haben wir die oben authStateObserver entsprechend Funktion auszulösen , wenn sich der Benutzer in so dass unsere UI - Updates. Es ruft getProfilePicUrl und getUserName wenn sie ausgelöst wird .

  1. Gehen Sie auf die Datei zurück src/index.js .
  2. Finden Sie die Funktionen getProfilePicUrl und getUserName .
  3. Ersetzen Sie beide Funktionen durch den folgenden Code.

index.js

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

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

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

  1. Gehen Sie auf die Datei zurück src/index.js .
  2. Hier finden Sie die Funktion isUserSignedIn .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

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

Testen Sie die Anmeldung in der App

  1. Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Andernfalls läuft firebase serve --only hosting - firebase serve --only hosting auf der Kommandozeile starten Sie die App vom Dienst http: // localhost: 5000 , und es dann in Ihrem Browser öffnen.
  2. Melden Sie sich mit der Anmeldeschaltfläche und Ihrem Google-Konto in der App an. Wenn Sie sehen , eine Fehlermeldung besagt , auth/operation-not-allowed , stellen Sie sicher, dass Sie aktiviert Google Sign-in als Authentifizierungsanbieter in der Firebase - Konsole.
  3. Nach der Anmeldung sollten Ihr Profilbild und Ihr Benutzername angezeigt werden: c7401b3d44d0d78b.png

8. Nachrichten an Cloud Firestore schreiben

In diesem Abschnitt schreiben wir einige Daten in Cloud Firestore, damit wir die Benutzeroberfläche der App füllen können. Dies kann manuell mit dem getan wird Firebase - Konsole , aber wir werden es in der App selbst tun ein grundlegende Wolke Firestor schreiben zu demonstrieren.

Datenmodell

Cloud Firestore-Daten sind in Sammlungen, Dokumente, Felder und Untersammlungen unterteilt. Wir speichern jede Nachricht des Chat als Dokument in einer Top-Level - Sammlung namens messages .

688d7bc5fb662b57.png

Nachrichten zu Cloud Firestore hinzufügen

Um die Chat - Nachrichten zu speichern , die von Benutzern geschrieben wird, werden wir nutzen Cloud - Firestor .

In diesem Abschnitt fügen Sie die Funktionalität hinzu, mit der Benutzer neue Nachrichten in Ihre Datenbank schreiben können. Ein Nutzer kann die SEND Schaltfläche klicken , wird das Code - Snippet auslösen unten. Es fügt ein Nachrichtenobjekt mit dem Inhalt der Nachricht Felder in Ihrer Cloud Firestore - Instanz in der messages - Sammlung. Die add() Methode fügt ein neues Dokument mit einer automatisch generierten ID zu der Sammlung.

  1. Gehen Sie auf die Datei zurück src/index.js .
  2. Hier finden Sie die Funktion saveMessage .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

Senden von Nachrichten testen

  1. Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Andernfalls läuft firebase serve --only hosting - firebase serve --only hosting auf der Kommandozeile starten Sie die App vom Dienst http: // localhost: 5000 , und es dann in Ihrem Browser öffnen.
  2. Nach der Anmeldung in, geben Sie eine Nachricht wie „dort Hey!“, Und klicken Sie senden dann. Dadurch wird die Nachricht in Cloud Firestore geschrieben. Sie werden jedoch noch nicht die Daten in Ihrem aktuellen Web - App sehen , weil wir immer noch die Daten implementieren müssen Abrufen (der nächste Abschnitt des Code - Lab).
  3. Sie können die neu hinzugefügte Nachricht in Ihrer Firebase Console sehen. Öffnen Sie Ihre Firebase-Konsole. Unter dem Build - Abschnitt klicken Firestore - Datenbank (oder klicken Sie hier , und Ihr Projekt auswählen) und Sie sollen die Nachrichten Sammlung mit Ihrer neu hinzugefügte Meldung:

6812efe7da395692.png

9. Nachrichten lesen

Synchronisieren Nachrichten

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 fügen Code hinzu, der auf neu hinzugefügte Nachrichten von der App lauscht. 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.

  1. Gehen Sie auf die Datei zurück src/index.js .
  2. Finden Sie die Funktion loadMessages .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.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.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, 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 zu hören, erstellen wir eine Abfrage in einer Sammlung durch die Verwendung der collection die Daten , die Sammlung zu geben , dass wir hören wollen. In dem obigen Code, wir hören auf die Veränderungen innerhalb der messages Sammlung, in der die Chatnachrichten gespeichert werden. Wir Anwendung auch eine Grenze von nur auf die letzten 12 Nachrichten abhören mit .limit(12) und Ordnen der Nachrichten nach Datum mit orderBy('timestamp', 'desc') , um die 12 neuesten Meldungen zu bekommen.

Die onSnapshot Funktion nimmt eine Abfrage als ersten Parameter und eine Rückruffunktion als zweites. 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. Sie können mehr über diese in der lesen Wolke Firestor Dokumentation .

Synchronisieren von Nachrichten testen

  1. Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Andernfalls läuft firebase serve --only hosting - firebase serve --only hosting auf der Kommandozeile starten Sie die App vom Dienst http: // localhost: 5000 , und es dann in Ihrem Browser öffnen.
  2. 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.
  3. (Optional) Sie können manuell versuchen , zu löschen oder zu modifizieren oder das Hinzufügen neue Nachrichten direkt in der Datenbank Abschnitt der Konsole Firebase; alle Änderungen sollten in der Benutzeroberfläche widergespiegelt werden.

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

2168dec79b573d07.png

10. Bilder senden

Wir fügen jetzt eine Funktion hinzu, die Bilder teilt.

Während Cloud Firestore gut zum Speichern strukturierter Daten geeignet ist, eignet sich Cloud Storage besser zum Speichern von Dateien. Cloud Storage für Firebase ist ein Datei- / Blob - Storage - Service, und wir werden es verwenden , um alle Bilder zu speichern , die ein Benutzer teilt unsere App.

Bilder in Cloud Storage speichern

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

  1. Erstellt eine "Platzhalter"-Chat-Nachricht im Chat-Feed, damit Benutzer eine "Laden"-Animation sehen, während wir das Bild hochladen.
  2. Uploads der Bilddatei zu Cloud Storage auf diesen Pfad: /<uid>/<messageId>/<file_name>
  3. Generiert eine öffentlich lesbare URL für die Bilddatei.
  4. Aktualisiert die Chatnachricht mit der URL der neu hochgeladenen Bilddatei anstelle des temporären Ladebilds.

Jetzt fügen Sie die Funktion zum Senden eines Bildes hinzu:

  1. Gehen Sie auf die Datei zurück src/index.js .
  2. Hier finden Sie die Funktion saveImageMessage .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Testen Sie das Senden von Bildern

  1. Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Andernfalls läuft firebase serve --only hosting - firebase serve --only hosting auf der Kommandozeile starten Sie die App vom Dienst http: // localhost: 5000 , und es dann in Ihrem Browser öffnen.
  2. Klicken Sie nach der Anmeldung auf die Schaltfläche zum Hochladen von Bildern 13734cb66773e5a3.png und wählen Sie mit der Dateiauswahl eine Bilddatei aus. Wenn Sie sich für ein Bild suchen, fühlen sich frei , dies zu nutzen schönes Bild von einer Kaffeetasse .
  3. In der Benutzeroberfläche der App sollte eine neue Nachricht mit Ihrem ausgewählten Bild erscheinen: 3b1284f5144b54f6.png

Wenn Sie versuchen, ein Bild hinzuzufügen, während Sie nicht angemeldet sind, sollten Sie eine Toast-Benachrichtigung sehen, die Ihnen mitteilt, dass Sie sich anmelden müssen, um Bilder hinzuzufügen.

11. Benachrichtigungen anzeigen

Wir werden jetzt Unterstützung für Browserbenachrichtigungen 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 , die Sie zuverlässig liefern Nachrichten und Benachrichtigungen ohne Kosten lässt.

FCM-Servicemitarbeiter hinzufügen

Der Web - App benötigt einen Servicemitarbeiter , die Web - Benachrichtigungen werden empfangen und anzeigen.

  1. Von dem web-start - Verzeichnis, in dem src - Verzeichnis, öffnen firebase-messaging-sw.js .
  2. Fügen Sie dieser Datei den folgenden Inhalt hinzu.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

Der Servicemitarbeiter muss lediglich das Firebase Cloud Messaging SDK laden und initialisieren, das sich um die Anzeige von Benachrichtigungen kümmert.

FCM-Gerätetoken abrufen

Wenn Meldungen haben auf einem Gerät oder Browser aktiviert ist, werden Sie ein Gerät Token angegeben werden. Mit diesem Geräte-Token senden wir eine Benachrichtigung an ein bestimmtes Gerät oder einen bestimmten Browser.

Wenn sich der Benutzer-in, rufen wir die saveMessagingDeviceToken Funktion. Das ist , wo wir das FCM - Gerät aus dem Browser - Token erhalten und speichern Sie es auf Wolke Firestor.

  1. Gehen Sie auf die Datei zurück src/index.js .
  2. Hier finden Sie die Funktion saveMessagingDeviceToken .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

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

Berechtigung zum Anzeigen von Benachrichtigungen anfordern

Wenn der Benutzer Ihrer App noch keine Berechtigung zum Anzeigen von Benachrichtigungen erteilt hat, erhalten Sie kein Gerätetoken. In diesem Fall rufen wir die firebase.messaging().requestPermission() Methode, die ein Browser - Dialog fragt nach dieser Berechtigung (Anzeigen werden in den unterstützten Browsern ).

8b9d0c66dc36153d.png

  1. Gehen Sie auf die Datei zurück src/index.js .
  2. Finden Sie die Funktion requestNotificationsPermissions .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

Holen Sie sich Ihr Geräte-Token

  1. Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Andernfalls läuft firebase serve --only hosting - firebase serve --only hosting auf der Kommandozeile starten Sie die App vom Dienst http: // localhost: 5000 , und es dann in Ihrem Browser öffnen.
  2. Nach der Anmeldung sollte der Berechtigungsdialog für Benachrichtigungen erscheinen: bd3454e6dbfb6723.png
  3. Klicken Sie auf Zulassen.
  4. Öffnen Sie die JavaScript-Konsole Ihres Browsers. Sie sollten die folgende Meldung angezeigt: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. 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 erhalten haben, können Sie eine Benachrichtigung senden.

  1. Öffnen Sie die Cloud Messaging Registerkarte der Konsole Firebase .
  2. Klicken Sie auf "Neue Benachrichtigung"
  3. Geben Sie einen Benachrichtigungstitel und einen Benachrichtigungstext ein.
  4. Klicken Sie auf der rechten Seite des Bildschirms auf "Testnachricht senden".
  5. Geben Sie das Geräte-Token ein, das Sie aus der JavaScript-Konsole Ihres Browsers kopiert haben, und klicken Sie dann auf das Pluszeichen ("+")
  6. Klicken Sie auf "Testen"

Wenn sich Ihre App im Vordergrund befindet, wird die Benachrichtigung in der JavaScript-Konsole angezeigt.

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

de79e8638a45864c.png

12. Cloud Firestore-Sicherheitsregeln

Ansicht Datenbank Sicherheitsregeln

Cloud Firestor verwenden eine spezifische Regeln Sprache Zugriffsrechte zu definieren, Sicherheit und Datenvalidierungen.

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

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

rules_version = '2';

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

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

firestore.regeln

rules_version = '2';

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

Datenbanksicherheitsregeln aktualisieren

Es gibt zwei Möglichkeiten, Ihre Datenbanksicherheitsregeln zu bearbeiten, entweder in der Firebase-Konsole oder über eine lokale Regeldatei, die mit der Firebase-CLI bereitgestellt wird.

So aktualisieren Sie Sicherheitsregeln in der Firebase-Konsole:

  1. Zum Abschnitt Datenbank aus dem linken Fenster und klicken Sie dann auf die Registerkarte Regeln.
  2. Ersetzen Sie die bereits in der Konsole vorhandenen Standardregeln durch die oben gezeigten Regeln.
  3. Klicken Sie auf Veröffentlichen.

So aktualisieren Sie Sicherheitsregeln aus einer lokalen Datei:

  1. Von dem web-start - Verzeichnis, öffnet firestore.rules .
  2. Ersetzen Sie die bereits in der Datei enthaltenen Standardregeln durch die oben gezeigten Regeln.
  3. Von dem web-start - Verzeichnis, öffnet firebase.json .
  4. Fügen Sie die firestore.rules zeigen Attribut firestore.rules , wie unten gezeigt. (Das hosting - Attribut sollte bereits in der Datei sein.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Stellen Sie die Sicherheitsregeln mithilfe der Firebase-CLI bereit, indem Sie den folgenden Befehl ausführen:
firebase deploy --only firestore
  1. 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

13. Sicherheitsregeln für Cloud-Speicher

Cloud Storage-Sicherheitsregeln anzeigen

Cloud Storage für Firebase verwendet eine spezifische Regeln Sprache Zugriffsrechte zu definieren, Sicherheit und Datenvalidierungen.

Beim Einrichten des Firebase-Projekts zu Beginn dieses Codelabs haben wir uns für die Verwendung der standardmäßigen Cloud Storage-Sicherheitsregel entschieden, die nur authentifizierten Benutzern die Verwendung von Cloud Storage zulässt. In der Firebase - Konsole , in der Registerkarte Regeln Storage Bereich können Sie sehen und Regeln ändern. Sie sollten die Standardregel sehen, die es jedem angemeldeten Benutzer ermöglicht, alle Dateien in Ihrem Storage-Bucket zu lesen und zu schreiben.

rules_version = '2';

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 spezifischen Ordner zu schreiben
  • Jedermann erlauben, aus Cloud Storage zu lesen
  • Stellen Sie sicher, dass es sich bei den hochgeladenen Dateien um Bilder handelt
  • Beschränken Sie die Größe der hochzuladenden Bilder auf maximal 5 MB

Dies kann mit den folgenden Regeln implementiert werden:

lagerung.regeln

rules_version = '2';

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

Cloud Storage-Sicherheitsregeln aktualisieren

Es gibt zwei Möglichkeiten, Ihre Speichersicherheitsregeln zu bearbeiten: entweder in der Firebase-Konsole oder über eine lokale Regeldatei, die mit der Firebase-CLI bereitgestellt wird.

So aktualisieren Sie Sicherheitsregeln in der Firebase-Konsole:

  1. Gehen Sie in den Speicherbereich aus dem linken Fenster und klicken Sie dann auf die Registerkarte Regeln.
  2. Ersetzen Sie die bereits in der Konsole vorhandene Standardregel durch die oben gezeigten Regeln.
  3. Klicken Sie auf Veröffentlichen.

So aktualisieren Sie Sicherheitsregeln aus einer lokalen Datei:

  1. Von dem web-start - Verzeichnis, öffnet storage.rules .
  2. Ersetzen Sie die bereits in der Datei enthaltenen Standardregeln durch die oben gezeigten Regeln.
  3. Von dem web-start - Verzeichnis, öffnet firebase.json .
  4. Fügen Sie die storage.rules zeigen Attribut auf die storage.rules Datei, wie unten gezeigt. (Das hosting und database Attribut sollte bereits in der Datei 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"
  }
}
  1. Stellen Sie die Sicherheitsregeln mithilfe der Firebase-CLI bereit, indem Sie den folgenden Befehl ausführen:
firebase deploy --only storage
  1. 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

14. Leistungsdaten sammeln

Sie können das Leistungsüberwachungs-SDK verwenden, um reale Leistungsdaten Ihrer App zu sammeln und diese Daten dann in der Firebase-Konsole zu überprüfen und zu analysieren. Die Leistungsüberwachung hilft Ihnen zu verstehen, wo und wann die Leistung Ihrer App verbessert werden kann, sodass Sie diese Informationen verwenden können, um Leistungsprobleme zu beheben.

Es gibt verschiedene Möglichkeiten zur Integration mit dem Firebase Performance Monitoring JavaScript SDK. In diesem Codelab, aktivierten wir Leistung von Hosting - URLs überwachen. Finden Sie in der Dokumentation zu sehen , andere Methoden des SDK ermöglicht.

Automatische Spuren

Da wir bereits importieren getPerformance an der Spitze der web-start/src/index.js , brauchen wir nur eine Zeile hinzufügen Leistung zu erzählen , um automatisch collect Seite Lastüberwachung und Netzwerkanforderung Metriken für Sie , wenn Nutzer auf Ihre Website bereitgestellt besuchen!

  1. In web-start/src/index.js , fügen Sie die folgende Zeile unter der bestehenden TODO Performance Monitoring zu initialisieren.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

Erste Eingangsverzögerung messen (optional)

Erste Eingangsverzögerung ist sinnvoll , da der Browser auf eine Interaktion des Benutzers reagiert die Benutzer ihre ersten Eindrücke über die Reaktionsfähigkeit Ihrer App gibt.

Die Verzögerung der ersten Eingabe 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 stoppt sofort, nachdem der Browser auf die Eingabe reagiert hat, was bedeutet, dass der Browser nicht damit beschäftigt ist, den Inhalt Ihrer Seite zu laden oder zu parsen.

Wenn Sie die Verzögerung der ersten Eingabe messen möchten, müssen Sie den folgenden Code direkt einfügen.

  1. Öffnen public/index.html .
  2. Kommentar- der script - Tag auf der folgenden Zeile.

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>

Um mehr über die erste Eingangsverzögerung polyfill, werfen Sie einen Blick auf die lesen Dokumentation .

Leistungsdaten ansehen

Da Sie Ihre Site noch nicht bereitgestellt haben (Sie werden sie im nächsten Schritt bereitstellen), sehen Sie hier einen Screenshot mit den Messwerten zur Seitenladeleistung, die Sie in der Firebase-Konsole innerhalb von 30 Minuten nach der Interaktion der Benutzer mit Ihrer bereitgestellten Site sehen :

29389131150f33d7.png

Wenn Sie das Leistungsüberwachungs-SDK in Ihre App integrieren, müssen Sie keinen weiteren Code schreiben, bevor Ihre App mit der automatischen Überwachung mehrerer kritischer Leistungsaspekte beginnt. Bei Web-Apps protokolliert das SDK Aspekte wie das erste Contentful Paint, die Möglichkeit für Benutzer, mit Ihrer App zu interagieren, und mehr.

Sie können auch benutzerdefinierte Ablaufverfolgungen, Metriken und Attribute einrichten, um bestimmte Aspekte Ihrer App zu messen. Besuchen Sie die Dokumentation um zu erfahren , individuelle Spuren und Metriken und benutzerdefinierte Attribute .

15. Stellen Sie Ihre App mit Firebase Hosting bereit

Firebase bietet ein Hosting - Service Ihr Vermögen und Web - Anwendungen zu bedienen. Sie können Ihre Dateien mithilfe der Firebase-CLI in Firebase Hosting bereitstellen. Bevor sich entfaltenden , müssen Sie in Ihrem angeben firebase.json Datei , die lokale 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 angegebenen hosting - Attribute:

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 erzählen die CLI , dass wir alle Dateien im bereitstellen möchten ./public Verzeichnis ( "public": "./public" ).

  1. Stellen Sie sicher , dass Ihre Befehlszeilen lokales Ihre App zugreift web-start - Verzeichnis.
  2. Stellen Sie Ihre Dateien in Ihrem Firebase-Projekt bereit, indem Sie den folgenden Befehl ausführen:
firebase deploy --except functions
  1. 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
  1. Besuchen Sie Ihre Web-App, die jetzt vollständig auf einem globalen CDN gehostet wird, indem Sie Firebase Hosting in zwei Ihrer eigenen Firebase-Subdomains verwenden:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

Alternativ können Sie laufen firebase open hosting:site in der Kommandozeile.

Besuchen Sie die Dokumentation , um zu erfahren , wie Firebase Werke Hosting .

Gehen Sie zu Ihrem Projekt Firebase Konsole Hosting Abschnitt nützliche Hosting - Informationen und Tools zu betrachten, einschließlich der Geschichte Ihres entfaltet, die Funktionalität Rolle zurück zur vorherigen Versionen Ihrer App und der Workflow eine benutzerdefinierte Domain einzurichten.

16. Herzlichen Glückwunsch!

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

Was wir abgedeckt haben

  • Firebase-Authentifizierung
  • Cloud Firestore
  • Firebase SDK für Cloud Storage
  • Firebase Cloud-Messaging
  • Firebase-Leistungsüberwachung
  • Firebase-Hosting

Nächste Schritte

Learn more