Fügen Sie Ihrer Web-App mit Firebase Extensions schnell neue Funktionen hinzu

1. Einleitung

Ziele

In diesem Codelab fügen Sie mithilfe von Firebase Extensions Funktionen zu einer Online-Marktplatz-App hinzu. Durch dieses Codelab erfahren Sie, wie Sie mit Erweiterungen weniger Zeit für App-Entwicklungs- und Verwaltungsaufgaben aufwenden können.

Was Sie bauen werden

In diesem Codelab fügen Sie einer Online-Marktplatz-Webanwendung die folgenden Funktionen hinzu:

• Laden Sie Bilder schneller, um die Benutzerbindung zu erhöhen
• Begrenzen Sie die Einträge in Ihrer Datenbank, um die Leistung zu verbessern und Ihre Rechnung zu senken
• Implementieren Sie die automatische Löschung alter Benutzerdaten, um den Schutz der Benutzerdaten zu verbessern

Was Sie lernen werden

• So entdecken Sie Erweiterungen für häufige Anwendungsfälle
• So installieren und konfigurieren Sie eine Erweiterung in Ihrem Projekt
• So verwalten Sie Erweiterungen in Ihrem Projekt (überwachen, aktualisieren und deinstallieren).

Dieses Codelab konzentriert sich auf Firebase-Erweiterungen. Ausführliche Informationen zu anderen in diesem Codelab erwähnten Firebase-Produkten finden Sie in der Firebase-Dokumentation und in anderen Codelabs .

Was du brauchen wirst

• Ein Computer mit einem modernen Webbrowser (Chrome wird empfohlen)
• Ein Google-Konto

2. Erstellen und richten Sie ein Firebase-Projekt ein

Erstellen Sie ein Firebase-Projekt

1. Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen und nennen Sie das Firebase-Projekt FriendlyMarket .
2. Klicken Sie sich durch die Projekterstellungsoptionen. Akzeptieren Sie die Firebase-Bedingungen. Überspringen Sie die Einrichtung von Google Analytics, da Sie Analytics in dieser App nicht verwenden.
3. Warten Sie, bis das Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter .

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

• Firebase-Authentifizierung zur einfachen Identifizierung Ihrer Benutzer
• Firebase Realtime Database , um strukturierte Daten in der Cloud zu speichern und sofortige Benachrichtigungen zu erhalten, wenn die Daten aktualisiert werden
• Cloud Storage für Firebase zum Speichern von Bildern in der Cloud

Jetzt aktivieren und konfigurieren Sie diese Firebase-Produkte mithilfe der Firebase-Konsole.

Aktivieren Sie die E-Mail-Anmeldung

Obwohl die Authentifizierung nicht der Schwerpunkt dieses Codelabs ist, ist es wichtig, dass Ihre App über eine Form der Authentifizierung verfügt, um jeden, der sie verwendet, eindeutig zu identifizieren. Sie verwenden die E-Mail-Anmeldung.

1. Klicken Sie in der Firebase-Konsole im linken Bereich auf „Entwickeln“ .
2. Klicken Sie auf Authentifizierung und dann auf die Registerkarte Anmeldemethode (oder klicken Sie hier , um direkt zur Registerkarte Anmeldemethode zu gelangen).
3. Klicken Sie in der Liste der Anmeldeanbieter auf E-Mail/Passwort , stellen Sie den Schalter „Aktivieren“ auf „Ein“ und klicken Sie dann auf „Speichern“ .

Aktivieren Sie die Echtzeitdatenbank

Die App nutzt die Firebase-Echtzeitdatenbank, um zum Verkauf stehende Artikel zu speichern.

1. Klicken Sie im Abschnitt „Entwickeln“ im linken Bereich der Firebase-Konsole auf „Datenbank“ .
2. Scrollen Sie auf der Seite nach unten über den Bereich „Cloud Firestore“ hinaus und klicken Sie im Bereich „Echtzeitdatenbank“ auf „Datenbank erstellen“ .

3. Wählen Sie „Im gesperrten Modus starten“ und klicken Sie dann auf „Aktivieren“ .

Legen Sie Sicherheitsregeln fest

Jetzt legen Sie die für diese App erforderlichen Sicherheitsregeln fest. Dies sind einige grundlegende Beispielregeln, die Ihnen helfen, Ihre App zu schützen. Diese Regeln erlauben es jedem, zum Verkauf stehende Artikel anzuzeigen, aber diese Regeln erlauben nur angemeldeten Benutzern, andere Lese- und Schreibvorgänge durchzuführen. Machen Sie sich keine Gedanken über die Einzelheiten dieser Regeln; Sie kopieren sie einfach und fügen sie ein, um Ihre App zum Laufen zu bringen.

1. Klicken Sie oben im Echtzeitdatenbank-Dashboard auf die Registerkarte „Regeln“ .

2. Kopieren Sie den folgenden Regelsatz und fügen Sie ihn in das Regelfeld auf der Registerkarte „Regeln“ ein:

{
  "rules": {
    ".read": false,
    ".write": false,
      "drafts": {
        ".indexOn": "seller",
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
    "sellers": {
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
      "forsale": {
        ".read": true,
        ".write": "auth.uid !== null"
      }
  }
}

3. Klicken Sie auf „Veröffentlichen“ .

Aktivieren Sie Cloud-Speicher

Die App nutzt Cloud Storage für Firebase, um Bilder von zum Verkauf stehenden Artikeln zu speichern.

1. Klicken Sie im Abschnitt „Entwickeln“ im linken Bereich der Firebase-Konsole auf „Speicher“ .
2. Klicken Sie auf „Erste Schritte“ .

3. Akzeptieren Sie die Standardeinstellungen für die Erstellung Ihres Standardspeicher-Buckets (klicken Sie auf „ Weiter“ , behalten Sie den Standardspeicherort bei und klicken Sie auf „Fertig “).

Jetzt legen Sie die für diese App erforderlichen Sicherheitsregeln fest. Diese Regeln gestatten nur authentifizierten Benutzern das Posten neuer Bilder, erlauben aber jedem, das Bild für einen aufgelisteten Artikel anzuzeigen.

1. Klicken Sie oben im Speicher- Dashboard auf die Registerkarte Regeln .

2. Kopieren Sie den folgenden Regelsatz und fügen Sie ihn in das Regelfeld auf der Registerkarte „Regeln“ ein:

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

3. Klicken Sie auf „Veröffentlichen“ .

3. Führen Sie die Beispiel-App aus

Forken Sie das StackBlitz-Projekt

In diesem Codelab erstellen und stellen Sie eine App mit StackBlitz bereit, einem Online-Editor, in den mehrere Firebase-Workflows integriert sind. Für Stackblitz ist keine Softwareinstallation oder ein spezielles StackBlitz-Konto erforderlich.

Mit StackBlitz können Sie Projekte mit anderen teilen. Andere Personen, die die URL Ihres StackBlitz-Projekts haben, können Ihren Code sehen und Ihr Projekt forken, aber sie können Ihr StackBlitz-Projekt nicht bearbeiten.

1. Gehen Sie zu dieser URL für den Startcode: https://stackblitz.com/edit/Friendlymarket-codelab .
2. Klicken Sie oben auf der StackBlitz-Seite auf Fork .

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

Fügen Sie dem Projekt eine Firebase-Web-App hinzu

1. Sehen Sie sich in StackBlitz Ihre Datei src/firebase-config.js an. Hier fügen Sie das Firebase-Konfigurationsobjekt hinzu.
2. Navigieren Sie in der Firebase-Konsole zur Übersichtsseite Ihres Projekts, indem Sie oben links auf „Projektübersicht“ klicken.
3. Klicken Sie in der Mitte der Übersichtsseite Ihres Projekts auf das Websymbol um eine neue Firebase-Web-App zu erstellen.
4. Registrieren Sie die App mit dem Spitznamen FriendlyMarket Codelab .
5. Aktivieren Sie für dieses Codelab nicht das Kontrollkästchen neben Auch Firebase Hosting für diese App einrichten . Stattdessen verwenden Sie den StackBlitz-Vorschaubereich.
6. Klicken Sie auf App registrieren .
7. Kopieren Sie das Firebase-Konfigurationsobjekt Ihrer App in Ihre Zwischenablage. Kopieren Sie nicht die <script> -Tags. Hinweis: Wenn Sie die Konfiguration später finden müssen, befolgen Sie die Anweisungen hier .

8. Klicken Sie auf Weiter zur Konsole .

Fügen Sie die Konfiguration Ihres Projekts zu Ihrer App hinzu:

1. Gehen Sie zurück in StackBlitz zur Datei src/firebase-config.js .
2. Fügen Sie Ihren Konfigurationsausschnitt in die Datei ein. Danach sollte es so aussehen (jedoch mit den Werten Ihres eigenen Projekts im Konfigurationsobjekt):

Was ist der Ausgangspunkt für diese App?

Schauen Sie sich die interaktive Vorschau auf der rechten Seite des StackBlitz-Bildschirms an:

Dieses Codelab beginnt mit dem Code für eine einfache Marktplatz-App. Jeder Benutzer kann eine Liste der zum Verkauf stehenden Artikel anzeigen und auf einen Link klicken, um die Detailseite eines Artikels anzuzeigen. Wenn ein Benutzer angemeldet ist, werden ihm die Kontaktinformationen des Verkäufers angezeigt, sodass er einen Preis aushandeln und den Artikel kaufen kann.

Probieren Sie die App aus:

1. Melden Sie sich mit der Schaltfläche oben auf dem Startbildschirm an. Sie können eine gefälschte E-Mail-Adresse, einen falschen Namen und ein falsches Passwort verwenden.
2. Klicken Sie unten rechts auf die Schaltfläche „Etwas verkaufen“ , um ein Angebot zu erstellen.
3. Geben Sie als Titel Xylophone ein .
4. Geben Sie als Angebotspreis 50 ein .
5. Geben Sie als Artikelbeschreibung Folgendes ein: This high quality xylophone can be used to play music.
6. Laden Sie dieses Bild eines Xylophons auf Ihren Computer herunter und laden Sie es mit der Schaltfläche BILD IHRES ARTIKELS hoch.

file_download Bild herunterladen

7. Nachdem Sie alle Felder ausgefüllt und ein Bild hochgeladen haben, klicken Sie auf „Posten“ .
8. Finden Sie Ihren neuen Eintrag. Klicken Sie auf Ihren Artikel, um dessen Detailbildschirm anzuzeigen, und erweitern Sie dann das Feld mit den Kontaktinformationen des Verkäufers .
9. Gehen Sie zurück zur Firebase-Konsole. Im Datenbank- Dashboard sehen Sie nun einen Eintrag für den Artikel, den Sie unter dem Knoten forsale eingestellt haben. Im Storage- Dashboard finden Sie auch das Bild, das Sie im friendlymarket Pfad hochgeladen haben.

4. Suchen und installieren Sie eine Erweiterung

Das Problem

Nachdem Sie einige Benutzerrecherchen für Ihre App durchgeführt haben, stellen Sie fest, dass die meisten Benutzer Ihre Website über ihr Smartphone und nicht über ihren Desktop besuchen. Ihre Statistiken zeigen jedoch auch, dass mobile Nutzer dazu neigen, Ihre Website bereits nach wenigen Sekunden zu verlassen („Abwanderung“).

Neugierig, testen Sie Ihre Website mit mobilen Verbindungsgeschwindigkeiten. (Erfahren Sie hier , wie das geht.) Sie stellen fest, dass das Laden der Bilder sehr lange dauert und überhaupt nicht im Browser zwischengespeichert wird. Diese lange Ladezeit entsteht bei jedem Seitenaufruf!

Die Lösung

Nachdem Sie sich über die Optimierung von Bildern informiert haben, entscheiden Sie sich für zwei Schritte, um die Leistung beim Laden von Bildern zu verbessern:

• Bilder komprimieren. Sogar Mobiltelefone nehmen Bilder mit einer weitaus höheren Auflösung auf, als für die Anforderungen dieser App erforderlich ist. Durch die Reduzierung der Dateigröße werden die Ladezeiten beschleunigt, ohne dass die Auflösung der App spürbar abnimmt.
• Caching . Standardmäßig verfügen Cloud Storage-Objekte über Header, die Browser anweisen, Bilder nicht zwischenzuspeichern, was bedeutet, dass der Browser eines Benutzers dasselbe Bild immer wieder neu herunterlädt! Glücklicherweise können Sie diese Header ändern, um Caching zu ermöglichen. Sowohl das clientseitige Cloud Storage SDK als auch das Firebase Admin SDK ermöglichen Ihnen das Festlegen dieser Header.

Um Bilder zu komprimieren, müssen Sie entweder die Upload-Qualität einschränken oder über einen serverseitigen Prozess verfügen, der die Größe der Bilder ändert. Betrachten wir die Kompromisse:

• Client-seitig . Für einen clientseitigen Prozess könnten Sie einfach die Dateigröße für hochgeladene Bilder begrenzen. Das bedeutet, dass Sie keine neue Serverlogik schreiben oder pflegen müssen. Allerdings bedeutet dies auch, dass Ihre Verkäufer herausfinden müssen, wie sie die Größe ihrer eigenen Bilder ändern können, was eine schmerzhafte und unintuitive Hürde bei der Erstellung eines neuen Angebots darstellt.
• Serverseitig . Wenn Sie Cloud Functions für Firebase verwenden, können Sie eine Funktion auslösen , die die Größe eines Bildes beim Hochladen automatisch ändert. Das bedeutet, dass Verkäufer jede gewünschte Bildgröße hochladen können (ohne zusätzliche Arbeit für sie) und Ihre Backend-Funktion die Bildgröße nahtlos ändern kann. Für diese Funktion ist sogar ein Beispiel verfügbar!

Es hört sich so an, als wäre die Serverseite der richtige Weg. Diese Idee beinhaltet jedoch immer noch das Klonen des Beispiels , das Befolgen seiner Einrichtungsanweisungen und das anschließende Bereitstellen der Funktion mit der Firebase-CLI. Die Größenänderung von Bildern klingt nach einem so häufigen Anwendungsfall. Gibt es nicht eine einfachere Lösung?

Eine einfachere Lösung

Du hast Glück. Es gibt eine einfachere Lösung: Firebase Extensions! Sehen wir uns den Katalog der verfügbaren Erweiterungen auf der Firebase-Website an.

Sieh dir das an! Es gibt eine Erweiterung namens „Bilder skalieren“. Das sieht vielversprechend aus.

Lassen Sie uns diese Erweiterung in Ihrer App verwenden!

Installieren Sie eine Erweiterung

1. Klicken Sie auf „Details anzeigen“ , um weitere Informationen zu dieser Erweiterung anzuzeigen. Unter „Was Sie konfigurieren können“ können Sie mit der Erweiterung die Abmessungen festlegen, auf die Sie die Größe ändern möchten, und Sie können sogar den Cache-Header festlegen. Perfekt!
2. Klicken Sie auf der Detailseite der Erweiterung auf die Schaltfläche „In Konsole installieren“ . Sie werden zu einer Firebase-Konsolenseite weitergeleitet, auf der alle Ihre Projekte aufgelistet sind.
3. Wählen Sie das FriendlyMarket- Projekt aus, das Sie für dieses Codelab erstellt haben.
4. Folgen Sie den Anweisungen auf dem Bildschirm, bis Sie zum Schritt „Erweiterung konfigurieren“ gelangen. Die Anweisungen zeigen eine grundlegende Zusammenfassung der Erweiterung sowie alle Ressourcen, die sie erstellt und auf die erforderlichen Rollen zugreift.
5. Geben Sie im Feld ** Cache-Control **Header für skalierte Bilder Folgendes ein:

public, max-age=31536000

6. Belassen Sie die anderen Parameter auf ihren Standardwerten.
7. Klicken Sie auf Erweiterung installieren .

Während Sie auf den Abschluss der Installation warten ...

Installation mit der Firebase-Befehlszeilenschnittstelle

Wenn Sie mit Befehlszeilentools vertrauter sind, können Erweiterungen auch über die Firebase-CLI installiert und verwaltet werden! Verwenden Sie einfach den Befehl firebase ext , der in der neuesten Version der CLI verfügbar ist. Weitere Informationen finden Sie hier .

(Optional) Erfahren Sie mehr über Cache-Control-Header

Der Cache-Control-Headerwert public, max-age=31536000 bedeutet, dass das Bild bis zu 1 Jahr lang zwischengespeichert wird. Weitere Informationen zum Cache-Control-Header finden Sie in dieser Dokumentation .

Clientcode aktualisieren

Die von Ihnen installierte Erweiterung schreibt ein Bild mit geänderter Größe in denselben Bucket wie das Originalbild. An den Dateinamen des Bildes mit geänderter Größe werden die konfigurierten Abmessungen angehängt. Wenn der ursprüngliche Dateipfad also wie friendlymarket/user1234-car.png aussah, sieht der Dateipfad des geänderten Bildes wie folgt aus: friendlymarket/user1234-car_200x200.png .

Aktualisieren wir die App so, dass sie die Bilder mit geänderter Größe statt der Bilder in voller Größe abruft.

1. Öffnen Sie in StackBlitz die Datei src/firebase-refs.js .
2. Ersetzen Sie die vorhandene getImageRef Funktion durch den folgenden Code, um eine Referenz für das in der Größe geänderte Bild zu erstellen:

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

Probieren Sie es aus

Da diese Erweiterung auf neue Bild-Uploads wartet, wird die Größe Ihres vorhandenen Bildes nicht geändert.

Erstellen Sie einen neuen Beitrag, um die Erweiterung in Aktion zu sehen:

1. Klicken Sie in der oberen Leiste Ihrer App auf Friendly Market , um zum Startbildschirm zu navigieren.
2. Klicken Sie unten rechts in der App auf die Schaltfläche „Etwas verkaufen“ , um einen Eintrag zu erstellen.
3. Geben Sie als Titel Coffee ein
4. Geben Sie als Angebotspreis 1 ein
5. Geben Sie als Artikelbeschreibung Folgendes ein: Selling one cafe latte. It has foam art in the shape of a bear .
6. Laden Sie dieses Bild einer Tasse Kaffee auf Ihren Computer herunter und laden Sie es mit der Schaltfläche BILD IHRES ARTIKELS hoch. file_download Bild herunterladen
7. Nachdem Sie alle Felder ausgefüllt und ein Bild hochgeladen haben, klicken Sie auf „Posten“ . Die Kaffeeliste erscheint unter dem Xylophon!
8. Klicken Sie im Funktions- Dashboard der Firebase-Konsole auf die Registerkarte Protokolle . Sie sollten Protokolle der Funktion sehen, aus denen hervorgeht, dass sie ausgeführt wurde.

9. Gehen Sie zum Speicher- Dashboard, um sowohl das Originalbild des Kaffees als auch eine verkleinerte Version im friendlymarket Pfad zu sehen.
10. Laden Sie im StackBlitz-Vorschaubereich den Startbildschirm Ihrer App ein paar Mal neu. Sie sollten feststellen, dass das Kaffeebild deutlich schneller geladen wird als das Xylophonbild.

Das Bild wird beim Laden der ersten Seite schneller geladen, da es kleiner ist, und bei der Aktualisierung der nachfolgenden Seite wird es aus dem Browser-Cache geladen, anstatt eine Netzwerkanforderung auszulösen.

5. Konfigurieren Sie eine Erweiterung neu

Das Problem

Ihre App speichert automatisch Entwurfsversionen des Angebots eines Verkäufers. Ihre Benutzer mögen diese Funktion, aber Ihre Statistiken sind etwas besorgniserregend. Aus Ihren Berichten geht hervor, dass nur etwa 10 % der Entwürfe tatsächlich veröffentlicht werden und die anderen 90 % nur Platz in Ihrer Datenbank beanspruchen.

Die Lösung

Nach einigen überschaubaren Berechnungen stellen Sie fest, dass Sie jeweils nur etwa fünf Entwürfe speichern müssen.

Erinnern Sie sich an den Katalog der Firebase-Erweiterungen? Vielleicht gibt es für diese Situation bereits eine Lösung. Installieren wir die Erweiterung „Limit Child Nodes“ , um die Anzahl der gespeicherten Entwürfe automatisch auf fünf oder weniger zu beschränken. Die Erweiterung löscht den ältesten Entwurf, wenn ein neuer Entwurf hinzugefügt wird.

1. Klicken Sie auf der Detailseite der Erweiterung auf die Schaltfläche „Installieren“ .
2. Wählen Sie das Firebase-Projekt aus, das Sie für Ihre Marktplatz-Web-App verwenden.
3. Folgen Sie den Anweisungen auf dem Bildschirm, bis Sie zum Schritt „Erweiterung konfigurieren“ gelangen.
4. Geben Sie als Echtzeitdatenbankpfad Entwürfe drafts . Dies ist der Pfad in der Datenbank, in dem Entwürfe gespeichert werden.
5. Geben Sie für die maximale Anzahl der zu behaltenden Knoten 5 ein. Das bedeutet, dass für jedes Artikelangebot fünf Entwürfe gespeichert werden. Wenn ein weiterer Entwurf hinzugefügt wird, wird der älteste Entwurf automatisch gelöscht.
6. Klicken Sie auf Erweiterung installieren .

Während Sie auf den Abschluss der Installation warten ...

Überwachung von Erweiterungen

Wenn Sie eine Erweiterung installieren, werden durch den Prozess mehrere Funktionen erstellt. Möglicherweise möchten Sie überprüfen, wie oft diese Funktionen ausgeführt werden, oder Protokolle und Fehlerraten anzeigen. Ausführliche Informationen zur Überwachung Ihrer Erweiterung finden Sie unter Installierte Erweiterungen verwalten . Befolgen Sie die Anweisungen in der Dokumentation, um die von der Erweiterung „Bildergröße ändern“ im vorherigen Schritt erstellten Funktionen anzuzeigen.

Erweiterungen deinstallieren

Um eine Erweiterung aus Ihrem Projekt zu entfernen, könnten Sie versucht sein, die einzelnen Funktionen zu löschen, die eine Erweiterung erstellt. Dies kann jedoch zu unerwartetem Verhalten führen, da eine Erweiterung möglicherweise mehrere Funktionen erstellt. Erfahren Sie in der Dokumentation, wie Sie eine Erweiterung deinstallieren .

Durch die Deinstallation werden alle Ressourcen (z. B. Funktionen für die Erweiterung) und das für diese Instanz der Erweiterung erstellte Dienstkonto gelöscht. Allerdings bleiben alle durch die Erweiterung erstellten Artefakte (z. B. die verkleinerten Bilder) nach der Deinstallation der Erweiterung in Ihrem Projekt erhalten.

Mehrere Kopien einer Erweiterung in einem einzigen Projekt installieren

Sie sind nicht darauf beschränkt, eine einzelne Instanz einer bestimmten Erweiterung in einem Projekt zu installieren. Wenn Sie Einträge in einem anderen Pfad einschränken möchten, können Sie eine weitere Instanz dieser Erweiterung installieren. Für die Zwecke dieses Codelabs installieren Sie die Erweiterung jedoch nur einmal.

Sehen Sie es in Aktion

1. Stellen Sie sicher, dass Sie mit dem Konto angemeldet sind, mit dem Sie das Xylophon oder die Latte gepostet haben
2. Erstellen Sie einige Entwürfe:
3. Klicken Sie unten rechts in der App auf die Schaltfläche „Etwas verkaufen“.
4. Bearbeiten Sie den Titel so, dass er „Entwurf 1“ lautet.
5. Scrollen Sie nach unten zum Abschnitt „Entwürfe“ und sehen Sie sich die Anzahl der Entwürfe an. Es sollten mindestens zwei sein.
6. Klicken Sie in der oberen App-Leiste auf die Schaltfläche FRIENDLY MARKET . Auf diese Weise haben Sie einen gespeicherten Entwurf, müssen ihn aber nicht veröffentlichen.
7. Wiederholen Sie dies für „Entwurf 2“, „Entwurf 3“ usw. bis „Entwurf 6“.
8. Beachten Sie beim Erstellen von „Entwurf 6“, dass „Entwurf 1“ aus Ihrem Entwurfsbereich verschwindet.
9. Wie bei der Erweiterung „Bildergröße ändern“ können Sie die Funktionsprotokolle überprüfen, um zu sehen, welche Funktionen ausgelöst wurden.

Hoppla, das Limit der zu behaltenden Entwürfe ist zu gering

Ihr Kundensupport-Team meldet sich bei Ihnen und teilt Ihnen mit, dass sich einige Ihrer produktivsten Verkäufer darüber beschweren, dass ihre Entwürfe gelöscht werden, bevor sie sie veröffentlichen können. Sie überprüfen Ihre Mathematik mit Ihrem Teamkollegen und stellen fest, dass Ihre Mathematik um den Faktor 10.000 daneben lag!

Wie können Sie das beheben? Lassen Sie uns die installierte Erweiterung neu konfigurieren!

1. Klicken Sie im linken Bereich der Firebase-Konsole auf Erweiterungen .
2. Klicken Sie auf der Karte der installierten Erweiterung auf Verwalten .
3. Klicken Sie in der oberen rechten Ecke auf Erweiterung neu konfigurieren .
4. Ändern Sie die maximale Anzahl der beizubehaltenden Knoten auf 50000 .
5. Klicken Sie auf Speichern .

Und das ist alles, was Sie tun müssen! Während die Aktualisierung der Erweiterung dauert, können Sie mit Ihrem Support-Team sprechen und ihm mitteilen, dass bereits ein Fix bereitgestellt wird.

6. Benutzerdaten automatisch löschen

Das Problem

Ihr Kundensupport-Team hat Sie erneut kontaktiert. Verkäufer, die ihre Konten gelöscht haben, erhalten immer noch E-Mails von anderen Benutzern und sind wütend! Diese Verkäufer erwarteten, dass ihre E-Mail-Adressen aus Ihren Systemen gelöscht würden, wenn sie ihre Konten löschten.

Bisher hat der Support die Daten jedes Benutzers manuell gelöscht, aber es muss einen besseren Weg geben! Sie denken darüber nach und überlegen, einen eigenen Batch-Job zu schreiben, der regelmäßig ausgeführt wird und E-Mail-Adressen aus gelöschten Konten löscht. Aber das Löschen von Benutzerdaten scheint ein ziemlich häufiges Problem zu sein. Vielleicht können Firebase Extensions auch dieses Problem lösen.

Die Lösung

Sie konfigurieren die Erweiterung „Benutzerdaten löschen“ so, dass der users/uid Knoten in der Datenbank automatisch gelöscht wird, wenn ein Benutzer sein Konto löscht.

1. Klicken Sie auf der Detailseite der Erweiterung auf die Schaltfläche „Installieren“ .
2. Wählen Sie das Firebase-Projekt aus, das Sie für Ihre Marktplatz-Web-App verwenden.
3. Folgen Sie den Anweisungen auf dem Bildschirm, bis Sie zum Schritt „Erweiterung konfigurieren“ gelangen.
4. Geben Sie für Echtzeitdatenbankpfade sellers/{UID} ein. Der sellers ist der Knoten, dessen untergeordnete Elemente Benutzer-E-Mail-Adressen enthalten, und {UID} ist ein Platzhalter. Mit dieser Konfiguration weiß die Erweiterung, dass die Erweiterung sellers/1234 aus der Datenbank löschen sollte, wenn der Benutzer mit der UID 1234 sein Konto löscht.
5. Klicken Sie auf Erweiterung installieren .

Während Sie auf den Abschluss der Installation warten ...

Lassen Sie uns über Anpassbarkeit sprechen

In diesem Codelab haben Sie gesehen, dass Firebase-Erweiterungen bei der Lösung gängiger Anwendungsfälle helfen können und dass Erweiterungen so konfiguriert werden können, dass sie den Anforderungen Ihrer App entsprechen.

Allerdings können Erweiterungen nicht jedes Problem lösen, und das Problem der Löschung von Benutzerdaten ist ein gutes Beispiel dafür. Mit der Erweiterung „Benutzerdaten löschen“ wird zwar die aktuelle Beschwerde behoben, dass E-Mails weiterhin sichtbar sind, nachdem ein Benutzer sein Konto gelöscht hat, die Erweiterung löscht jedoch nicht alles. Beispielsweise ist die Artikelliste weiterhin verfügbar und alle Bilder im Cloud-Speicher bleiben ebenfalls erhalten. Mit der Erweiterung „Benutzerdaten löschen“ können wir zwar einen zu löschenden Cloud-Speicherpfad konfigurieren, aber da Benutzer viele verschiedene Dateien mit vielen unterschiedlichen Namen hochladen können, können Sie diese Erweiterung nicht so konfigurieren, dass diese Artefakte automatisch gelöscht werden. Für Situationen wie diese sind Cloud Functions for Firebase möglicherweise besser geeignet, damit Sie Code schreiben können, der spezifisch für das Datenmodell Ihrer App ist.

Verlängerungen und Abrechnung

Die Nutzung der Firebase-Erweiterungen selbst ist kostenlos (es werden Ihnen nur die zugrunde liegenden Ressourcen in Rechnung gestellt, die Sie nutzen), für einige der von einer Erweiterung benötigten zugrunde liegenden Ressourcen kann jedoch eine Abrechnung erforderlich sein. Dieses Codelab wurde so konzipiert, dass es ohne Rechnungskonto durchgeführt werden kann. Durch die Einrichtung eines Flame- oder Blaze-Plans werden jedoch viele wirklich interessante Firebase-Erweiterungen freigeschaltet.

Sie können beispielsweise URLs kürzen , E-Mails auslösen , Sammlungen nach BigQuery exportieren und vieles mehr! Den vollständigen Katalog der Erweiterungen finden Sie hier .

Wenn es eine Erweiterung gibt, die Sie gerne hätten, diese aber derzeit nicht verfügbar ist, würden wir uns freuen, davon zu hören! Reichen Sie beim Firebase-Support eine Funktionsanfrage ein, um eine neue Erweiterung vorzuschlagen.

Sehen Sie es in Aktion

Nachdem die Installation Ihrer Erweiterung abgeschlossen ist, löschen Sie einen Benutzer und sehen Sie, was passiert:

1. Gehen Sie in der Firebase-Konsole zu Ihrem Echtzeitdatenbank- Dashboard .
2. Erweitern Sie den Knoten sellers .
3. Die Informationen jedes Verkäufers sind in seiner Benutzer-UID gespeichert. Wählen Sie die UID eines Benutzers aus.
4. Gehen Sie in der Firebase-Konsole zu Ihrem Authentifizierungs- Dashboard und suchen Sie die Benutzer-UID.
5. Erweitern Sie das Menü rechts neben der UID und wählen Sie Konto löschen aus.

6. Gehen Sie zurück zu Ihrem Echtzeitdatenbank- Dashboard. Die Informationen des Verkäufers werden gelöscht!

7. Herzlichen Glückwunsch!

Auch wenn Sie in diesem Codelab nicht viel Code geschrieben haben, haben Sie Ihrer Marktplatz-App wichtige Funktionen hinzugefügt.

Sie haben gelernt, wie Sie Erweiterungen erkennen, konfigurieren, installieren und neu konfigurieren. Darüber hinaus haben Sie gelernt, wie Sie installierte Erweiterungen überwachen und diese bei Bedarf deinstallieren können.

Was kommt als nächstes?

Schauen Sie sich einige dieser anderen Erweiterungen an:

• Übersetzen Sie Textzeichenfolgen in Cloud Firestore (Rechnungskonto erforderlich)
• Neue Benutzer zu Mailchimp-E-Mail-Listen hinzufügen (Rechnungskonto erforderlich)
• URLs kürzen (Rechnungskonto erforderlich)

Benötigen Sie mehr benutzerdefinierten serverseitigen Code?

• Schauen Sie sich das Cloud Functions for Firebase-Codelab an

Weitere hilfreiche Dokumente

Erweiterungen verwalten:

• Versuchen Sie, Erweiterungen mit der Firebase-CLI zu verwalten
• Legen Sie Budgetwarnungen fest
• Überprüfen Sie, wie oft eine installierte Erweiterung ausgeführt wird
• Aktualisieren Sie eine installierte Erweiterung auf eine neue Version
• Deinstallieren Sie eine Erweiterung

Erfahren Sie mehr über Erweiterungen:

• Sehen Sie sich den Quellcode und die Dokumente für jede Erweiterung auf GitHub an
• Erfahren Sie mehr über die Berechtigungen und den Zugriff , die einer Erweiterung gewährt werden