Mit Firebase Extensions schnell neue Funktionen zu Ihrer Web-App hinzufügen

1. Einführung

Zielvorhaben

In diesem Codelab fügen Sie einer Onlinemarktplatz-App mithilfe von Firebase-Erweiterungen Funktionen hinzu. In diesem Codelab erfahren Sie, wie Sie mithilfe von Erweiterungen weniger Zeit für die App-Entwicklung und -Verwaltung aufwenden.

Umfang

In diesem Codelab fügen Sie einer Web-App für einen Onlinemarktplatz die folgenden Funktionen hinzu:

• Bilder schneller laden, um die Nutzerbindung zu erhöhen
• Einträge in Ihrer Datenbank begrenzen, um die Leistung zu verbessern und die Rechnung zu senken
• Automatisches Löschen alter Nutzerdaten implementieren, um den Schutz von Nutzerdaten zu verbessern

Aufgaben in diesem Lab

• Erweiterungen für gängige Anwendungsfälle finden
• Erweiterung in Ihrem Projekt installieren und konfigurieren
• Erweiterungen in Ihrem Projekt verwalten (überwachen, aktualisieren und deinstallieren)

In diesem Codelab geht es um Firebase-Erweiterungen. Ausführliche Informationen zu anderen in diesem Codelab erwähnten Firebase-Produkten finden Sie in der Firebase-Dokumentation und in anderen Codelabs.

Voraussetzungen

• Einen Computer mit einem modernen Webbrowser (wir empfehlen Chrome)
• Ein Google-Konto

2. Firebase-Projekt erstellen und einrichten

Firebase-Projekt erstellen

1. Klicken Sie in der Firebase Console auf Projekt hinzufügen und geben Sie als Namen für das Firebase-Projekt FriendlyMarket ein.
2. Klicken Sie sich durch die Optionen für die Projekterstellung. Akzeptieren Sie die Firebase-Nutzungsbedingungen. Ü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 Authentication zur einfachen Identifizierung Ihrer Nutzer
• Firebase Realtime Database speichert strukturierte Daten in der Cloud und benachrichtigt Sie sofort, wenn sich Daten ändern.
• Cloud Storage for Firebase zum Speichern von Bildern in der Cloud

Aktivieren und konfigurieren Sie diese Firebase-Produkte jetzt über die Firebase Console.

Firebase-Preismodell upgraden

Wenn Sie Firebase Extensions und die zugrunde liegenden Cloud-Dienste sowie Cloud Storage for Firebase verwenden möchten, muss Ihr Firebase-Projekt den Blaze-Tarif (Pay-as-you-go) haben. Das bedeutet, dass es mit einem Cloud-Rechnungskonto verknüpft sein muss.

• Für ein Cloud-Rechnungskonto ist eine Zahlungsmethode wie eine Kreditkarte erforderlich.
• Wenn Sie neu bei Firebase und Google Cloud sind, prüfen Sie, ob Sie Anspruch auf ein Guthaben in Höhe von 300$und ein kostenloses Cloud Billing-Konto für den Testzeitraum haben.
• Wenn Sie dieses Codelab im Rahmen einer Veranstaltung absolvieren, fragen Sie den Organisator, ob Cloud-Guthaben verfügbar ist.

So führen Sie ein Upgrade auf den Blaze-Tarif durch:

1. Wählen Sie in der Firebase Console Tarif upgraden aus.
2. Wählen Sie den Blaze-Tarif aus. Folgen Sie der Anleitung auf dem Bildschirm, um ein Cloud-Rechnungskonto mit Ihrem Projekt zu verknüpfen.
   Wenn Sie im Rahmen dieses Upgrades ein Cloud-Rechnungskonto erstellen mussten, müssen Sie möglicherweise zur Firebase Console zurückkehren, um das Upgrade abzuschließen.

Anmeldung per E-Mail aktivieren

Die Authentifizierung steht in diesem Codelab zwar nicht im Mittelpunkt, aber es ist wichtig, dass Ihre App eine gewisse Authentifizierungsmethode hat, um alle Nutzer eindeutig zu identifizieren. Sie verwenden die Anmeldung per E-Mail.

1. Klicken Sie in der Firebase Console im linken Bereich auf Entwickeln.
2. Klicken Sie auf Authentifizierung und dann auf den Tab Anmeldemethode. Sie können auch auf diesen Link klicken, um direkt zum Tab Anmeldemethode zu gelangen.
3. Klicken Sie in der Liste Anbieter für Anmeldungen auf E-Mail-Adresse/Passwort, aktivieren Sie den Schalter Aktivieren und klicken Sie dann auf Speichern.

Realtime Database aktivieren

Die App verwendet die Firebase Realtime Database, um Artikel zum Verkauf zu speichern.

1. Maximieren Sie im linken Bereich der Firebase Console Build und wählen Sie dann Realtime Database aus.
2. Klicken Sie auf Datenbank erstellen.
3. Wählen Sie einen Speicherort für die Datenbank aus und klicken Sie auf Weiter.
   Für eine echte App sollten Sie einen Speicherort in der Nähe Ihrer Nutzer auswählen.
4. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
   In den nächsten Schritten dieses Codelabs fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen oder verteilen Sie keine App, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
5. Klicken Sie auf Erstellen.

Sicherheitsregeln für Ihre Datenbank festlegen

Legen Sie nun die für diese App erforderlichen Sicherheitsregeln fest. Hier sind einige grundlegende Beispielregeln zur Sicherheit Ihrer App. Mit diesen Regeln können alle Nutzer zum Verkauf angebotene Artikel ansehen, aber nur angemeldete Nutzer können andere Lese- und Schreibvorgänge ausführen. Machen Sie sich keine Gedanken über die Details dieser Regeln. Sie kopieren sie einfach und fügen sie ein, um Ihre App einzurichten.

1. Klicken Sie oben im Realtime Database-Dashboard auf den Tab Regeln.

2. Kopieren Sie den folgenden Regelsatz und fügen Sie ihn auf dem Tab Regeln in das Feld „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.

Cloud Storage for Firebase einrichten

Die App nutzt Cloud Storage for Firebase, um Bilder von zum Verkauf angebotenen Artikeln zu speichern.

So richten Sie Cloud Storage for Firebase in Ihrem Firebase-Projekt ein:

1. Maximieren Sie im linken Bereich der Firebase Console die Option Build und wählen Sie dann Storage aus.
2. Klicken Sie auf Jetzt starten.
3. Wählen Sie einen Speicherort für Ihren Standard-Storage-Bucket aus.
   Für Buckets in US-WEST1, US-CENTRAL1 und US-EAST1 kann die Stufe „Immer kostenlos“ für Google Cloud Storage genutzt werden. Für Buckets an allen anderen Speicherorten gelten die Preise und Nutzungsbedingungen für Google Cloud Storage.
4. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
   In den nächsten Schritten dieses Codelabs fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen oder verteilen Sie keine App, ohne Sicherheitsregeln für Ihren Speicher-Bucket hinzuzufügen.
5. Klicken Sie auf Erstellen.

Sicherheitsregeln für Ihren Speicher-Bucket einrichten

Legen Sie nun die für diese App erforderlichen Sicherheitsregeln fest. Mit diesen Regeln können nur authentifizierte Nutzer neue Bilder posten, aber jeder kann sich das Bild eines aufgeführten Artikels ansehen.

1. Klicken Sie oben im Dashboard Speicher auf den Tab Regeln.

2. Kopieren Sie den folgenden Regelsatz und fügen Sie ihn auf dem Tab Regeln in das Feld „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. Beispiel-App ausführen

StackBlitz-Projekt forken

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

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

1. Den Startcode finden Sie unter dieser URL: https://stackblitz.com/edit/friendlymarket-codelab.
2. Klicken Sie oben auf der StackBlitz-Seite auf Fork.

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

Dem Projekt eine Firebase-Web-App hinzufügen

1. Rufen Sie in StackBlitz die Datei src/firebase-config.js auf. Hier fügen Sie das Firebase-Konfigurationsobjekt hinzu.
2. Rufen Sie in der Firebase Console die Übersichtsseite Ihres Projekts auf, 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 unter dem Alias FriendlyMarket Codelab.
5. Klicken Sie für dieses Codelab nicht auf das Kästchen neben Richten Sie außerdem Firebase Hosting für diese App ein. Stattdessen verwenden Sie den StackBlitz-Vorschaubereich.
6. Klicken Sie auf App registrieren.
7. Kopieren Sie das Firebase-Konfigurationsobjekt Ihrer App in die Zwischenablage. Kopieren Sie die <script>-Tags nicht. Hinweis: Wenn Sie die Konfiguration später aufrufen möchten, folgen Sie dieser Anleitung.

8. Klicken Sie auf Weiter zur Konsole.

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

1. Rufen Sie in StackBlitz die Datei src/firebase-config.js auf.
2. Fügen Sie das Konfigurations-Snippet in die Datei ein. Danach sollte es so aussehen (aber mit den Werten Ihres eigenen Projekts im Konfigurationsobjekt):

Was ist der Ausgangspunkt für diese App?

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

In diesem Codelab beginnen Sie mit dem Code für eine einfache Marktplatz-App. Jeder Nutzer kann sich eine Liste der zum Verkauf angebotenen Artikel ansehen und auf einen Link klicken, um die Detailseite eines Artikels aufzurufen. Wenn ein Nutzer angemeldet ist, werden ihm die Kontaktdaten des Verkäufers angezeigt, damit er einen Preis aushandeln und den Artikel kaufen kann.

So testen Sie die App:

1. Melden Sie sich über die Schaltfläche oben auf dem Startbildschirm an. Sie können eine falsche E-Mail-Adresse, einen falschen Namen und ein falsches Passwort verwenden.
2. Klicken Sie rechts unten auf die Schaltfläche Etwas verkaufen, um einen Eintrag zu erstellen.
3. Geben Sie unter Titel Xylophoneein.
4. Geben Sie für Preisvorstellung 50ein.
5. Geben Sie unter 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 über die Schaltfläche BILD DES ARTIKELS hoch.

file_downloadBild herunterladen

7. Nachdem Sie alle Felder ausgefüllt und ein Bild hochgeladen haben, klicken Sie auf Posten.
8. Suchen Sie nach Ihrem neuen Eintrag. Klicken Sie auf den Artikel, um den Detailbildschirm aufzurufen, und maximieren Sie dann den Bereich Kontaktdaten des Verkäufers.
9. Kehren Sie zur Firebase Console zurück. Im Dashboard Datenbank sehen Sie jetzt unter dem Knoten forsale einen Eintrag für das von Ihnen gepostete Element. Im Dashboard Speicher finden Sie auch das Bild, das Sie unter dem Pfad friendlymarket hochgeladen haben.

4. Erweiterungen suchen und installieren

Das Problem

Nach einigen Nutzerstudien für Ihre App stellen Sie fest, dass die meisten Nutzer Ihre Website über ihr Smartphone und nicht über ihren Computer aufrufen. Ihre Statistiken zeigen jedoch auch, dass mobile Nutzer Ihre Website nach nur wenigen Sekunden verlassen (sogenannte „Absprungrate“).

Aus Neugier testen Sie Ihre Website mit verschiedenen Geschwindigkeiten für mobile Verbindungen. Weitere Informationen Sie stellen fest, dass das Laden der Bilder sehr lange dauert und sie nicht im Browser im Cache gespeichert werden. Diese lange Ladezeit tritt bei jedem Seitenaufruf auf.

Die Lösung

Nachdem Sie sich über die Optimierung von Bildern informiert haben, entscheiden Sie sich, zwei Schritte zur Verbesserung der Bildladeleistung auszuführen:

• Komprimieren Sie Bilder. Selbst Smartphones nehmen Bilder mit einer viel höheren Auflösung auf, als für diese App erforderlich ist. Durch die Verringerung der Dateigröße werden die Ladezeiten beschleunigt, ohne dass die Auflösung in der App merklich sinkt.
• Caching Cloud Storage-Objekte enthalten standardmäßig Header, die Browser anweisen, Bilder nicht im Cache zu speichern. Das bedeutet, dass der Browser eines Nutzers dasselbe Bild immer wieder herunterlädt. Glücklicherweise können Sie diese Header ändern, um das Caching zu ermöglichen. Sowohl das clientseitige Cloud Storage SDK als auch das Firebase Admin SDK ermöglichen es Ihnen, diese Header festzulegen.

Wenn Sie Bilder komprimieren möchten, müssen Sie entweder die Uploadqualität begrenzen oder einen serverseitigen Prozess verwenden, mit dem die Größe von Bildern geändert wird. Sehen wir uns die Vor- und Nachteile an:

• Clientseitig Bei einem clientseitigen Prozess können Sie einfach die Dateigröße für hochgeladene Bilder begrenzen. Sie müssen also keine neue Serverlogik schreiben oder verwalten. Das bedeutet jedoch auch, dass Ihre Verkäufer herausfinden müssen, wie sie die Größe ihrer eigenen Bilder ändern. Das ist eine mühsame und unintuitive Hürde beim Erstellen eines neuen Eintrags.
• Serverseitig Wenn Sie Cloud Functions for Firebase verwenden, können Sie eine Funktion auslösen, die beim Hochladen automatisch die Größe eines Bildes ändert. Das bedeutet, dass Verkäufer Bilder in beliebiger Größe hochladen können (keine zusätzliche Arbeit für sie) und Ihre Backend-Funktion die Größe des Bildes nahtlos anpassen kann. Es gibt sogar ein Beispiel für diese Funktion.

Es klingt so, als wäre die serverseitige Lösung die richtige. Bei dieser Lösung müssen Sie jedoch weiterhin das Beispiel klonen, der Einrichtungsanleitung folgen und die Funktion dann mit der Firebase CLI bereitstellen. Das Ändern der Größe von Bildern klingt nach einem solchen häufigen Anwendungsfall. Gibt es nicht eine einfachere Lösung?

Eine einfachere Lösung

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

Seht euch das an! Es gibt eine Erweiterung namens „Bildergröße ändern“. Das sieht vielversprechend aus.

Verwenden wir diese Erweiterung in Ihrer App.

Erweiterung installieren

1. Klicken Sie auf Details ansehen, um weitere Informationen zu dieser Erweiterung aufzurufen. Unter Konfigurationsmöglichkeiten können Sie die Abmessungen festlegen, auf die die Größe geändert werden soll. Außerdem können Sie die Cache-Überschrift festlegen. Super!
2. Klicken Sie auf der Detailseite der Erweiterung auf die Schaltfläche In der Konsole installieren. Sie werden zu einer Firebase Console-Seite mit einer Liste all Ihrer Projekte weitergeleitet.
3. Wählen Sie das Projekt FriendlyMarket aus, das Sie für dieses Codelab erstellt haben.
4. Folgen Sie der Anleitung auf dem Bildschirm bis zum Schritt Erweiterung konfigurieren. Die Anleitung enthält eine grundlegende Zusammenfassung der Erweiterung sowie alle Ressourcen, die erstellt werden, und die erforderlichen Zugriffsrollen.
5. Geben Sie im Feld **Cache-Control**header for resized images Folgendes ein:

public, max-age=31536000

6. Übernehmen Sie für die restlichen Parameter die Standardwerte.
7. Klicken Sie auf Erweiterung installieren.

Während der Installation…

Über die Firebase-Befehlszeile installieren

Wenn Sie mit Befehlszeilentools vertraut sind, können Sie Erweiterungen auch über die Firebase CLI installieren und verwalten. Verwenden Sie dazu einfach den Befehl firebase ext, der in der neuesten Version der Befehlszeile verfügbar ist. Weitere Informationen

Optional: Weitere Informationen zu Cache-Control-Headern

Der Cache-Control-Headerwert public, max-age=31536000 bedeutet, dass das Bild bis zu einem Jahr im Cache gespeichert wird. Weitere Informationen zum Cache-Control-Header findest du in dieser Dokumentation.

Clientcode aktualisieren

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

Aktualisieren wir die App so, dass sie die Bilder in der Größe, die wir festgelegt haben, statt in Originalgröß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 Bild mit der neuen Größe 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)
  };
}

Jetzt testen

Da diese Erweiterung auf neue Bilduploads achtet, wird das vorhandene Bild nicht neu skaliert.

So kannst du die Funktion testen:

1. Klicken Sie in der oberen Leiste der App auf Friendly Market, um den Startbildschirm aufzurufen.
2. Klicken Sie rechts unten in der App auf die Schaltfläche Etwas verkaufen, um einen Eintrag zu erstellen.
3. Geben Sie unter Titel Coffee ein.
4. Geben Sie für Angebotspreis 1 ein.
5. Geben Sie unter 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 über die Schaltfläche BILD DES ARTIKELS hoch. file_downloadBild herunterladen
7. Nachdem Sie alle Felder ausgefüllt und ein Bild hochgeladen haben, klicken Sie auf Posten. Der Eintrag für Kaffee wird jetzt unter dem Xylophon angezeigt.
8. Klicken Sie in der Firebase Console im Dashboard Functions (Funktionen) auf den Tab Logs (Protokolle). Sie sollten Logs von der Funktion sehen, die zeigen, dass sie ausgeführt wurde.

9. Rufen Sie das Dashboard Speicher auf, um sowohl das Originalbild als auch eine Version mit geänderter Größe im Pfad friendlymarket zu sehen.
10. Laden Sie im StackBlitz-Vorschaubereich den Startbildschirm Ihrer App mehrmals neu. Das Kaffeebild sollte deutlich schneller geladen werden als das Xylophonbild.

Das Bild wird beim ersten Seitenaufbau schneller geladen, da es kleiner ist. Bei nachfolgenden Seitenaktualisierungen wird es aus dem Browser-Cache geladen, anstatt eine Netzwerkanfrage auszulösen.

5. Erweiterung neu konfigurieren

Das Problem

In Ihrer App werden automatisch Entwurfsversionen des Eintrags eines Verkäufers gespeichert. Ihren Nutzern gefällt diese Funktion, aber Ihre Statistiken sind etwas besorgniserregend. Ihren Berichten zufolge werden nur etwa 10% der Entwürfe tatsächlich veröffentlicht. Die restlichen 90% belegen nur unnötig Speicherplatz in Ihrer Datenbank.

Die Lösung

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

Erinnern Sie sich an den Katalog mit Firebase Extensions? Möglicherweise gibt es bereits eine Lösung für diese Situation. Installieren wir die Erweiterung Untergeordnete Knoten begrenzen, damit die Anzahl der gespeicherten Entwürfe automatisch auf fünf oder weniger begrenzt wird. Die Erweiterung löscht den ältesten Entwurf, sobald ein neuer 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 der Anleitung auf dem Bildschirm bis zum Schritt Erweiterung konfigurieren.
4. Geben Sie für Realtime Database-Pfad drafts ein. Dies ist der Pfad in der Datenbank, unter dem Entwürfe gespeichert werden.
5. Geben Sie für Maximale Anzahl der zu behaltenden Knoten den Wert 5 ein. Das bedeutet, dass für jeden Artikel fünf Entwürfe für den Eintrag gespeichert werden. Wenn ein weiterer hinzugefügt wird, wird der älteste Entwurf automatisch gelöscht.
6. Klicken Sie auf Erweiterung installieren.

Während die Installation abgeschlossen wird

Monitoring-Erweiterungen

Wenn Sie eine Erweiterung installieren, werden dabei mehrere Funktionen erstellt. Sie können prüfen, wie oft diese Funktionen ausgeführt werden, oder sich Protokolle und Fehlerraten ansehen. Weitere Informationen zum Überwachen Ihrer Erweiterung finden Sie unter Installierte Erweiterungen verwalten. Folgen Sie der Anleitung in der Dokumentation, um die Funktionen aufzurufen, die im vorherigen Schritt mit der Erweiterung „Bilder anpassen“ erstellt wurden.

Erweiterungen deinstallieren

Wenn Sie eine Erweiterung aus Ihrem Projekt entfernen möchten, können Sie versucht sein, die einzelnen Funktionen zu löschen, die von einer Erweiterung erstellt werden. Dies kann jedoch zu unerwartetem Verhalten führen, da eine Erweiterung mehrere Funktionen erstellen kann. Weitere Informationen zum Deinstallieren von Erweiterungen

Durch die Deinstallation werden alle Ressourcen (z. B. Funktionen für die Erweiterung) und das Dienstkonto gelöscht, das für diese Instanz der Erweiterung erstellt wurde. Alle von der Erweiterung erstellten Artefakte (z. B. die Bilder mit geänderter Größe) verbleiben jedoch nach der Deinstallation der Erweiterung in Ihrem Projekt.

Mehrere Kopien einer Erweiterung in einem einzigen Projekt installieren

Sie sind nicht darauf beschränkt, in einem Projekt nur eine Instanz einer bestimmten Erweiterung 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 dieses Codelab installieren Sie die Erweiterung jedoch nur einmal.

Beispiele ansehen

1. Sie müssen mit dem Konto angemeldet sein, mit dem Sie das Xylophon oder den Latte Macchiato gepostet haben.
2. Erstellen Sie einige Entwürfe:
3. Klicke rechts unten in der App auf die Schaltfläche Etwas verkaufen.
4. Ändern Sie den Titel in „Entwurf 1“.
5. Scrollen Sie nach unten zum Bereich Entwürfe und sehen Sie sich die Anzahl der Entwürfe an. Es sollten mindestens zwei sein.
6. Klicken Sie oben in der App-Leiste auf die Schaltfläche FRIENDLY MARKET. So haben Sie einen gespeicherten Entwurf, müssen ihn aber nicht veröffentlichen.
7. Wiederholen Sie dies für „Entwurf 2“, „Entwurf 3“ usw. bis zu „Entwurf 6“.
8. Wenn Sie „Entwurf 6“ erstellen, wird „Entwurf 1“ aus dem Bereich Entwürfe entfernt.
9. Wie bei der Erweiterung „Bildergröße ändern“ können Sie in den Funktionsprotokollen nachsehen, welche Funktionen ausgelöst wurden.

Ups, die Anzahl der zu behaltenden Entwürfe ist zu klein.

Ihr Kundensupportteam teilt Ihnen mit, dass einige Ihrer umsatzstärksten Verkäufer sich beschweren, dass ihre Entwürfe gelöscht werden, bevor sie sie posten können. Sie überprüfen Ihre Berechnungen mit Ihrem Teammitglied und stellen fest, dass Sie um den Faktor 10.000 daneben lagen.

Wie können Sie das Problem beheben? Konfigurieren wir die installierte Erweiterung neu.

1. Klicken Sie im linken Bereich der Firebase Console auf Erweiterungen.
2. Klicken Sie auf der Karte der installierten Erweiterung auf Verwalten.
3. Klicken Sie rechts oben auf Erweiterung neu konfigurieren.
4. Ändern Sie Maximale Anzahl der zu behaltenden Knoten in 50000.
5. Klicken Sie auf Speichern.

Das war es schon! In der Zeit, die die Aktualisierung der Erweiterung in Anspruch nimmt, können Sie sich an Ihr Supportteam wenden und es darüber informieren, dass bereits eine Lösung implementiert wird.

6. Nutzerdaten automatisch löschen

Das Problem

Das Kundensupportteam hat Sie noch einmal kontaktiert. Verkäufer, die ihre Konten gelöscht haben, erhalten weiterhin E-Mails von anderen Nutzern und sind wütend. Diese Verkäufer haben erwartet, dass ihre E-Mail-Adressen aus Ihren Systemen gelöscht werden, wenn sie ihre Konten löschen.

Bisher löscht der Support die Daten der einzelnen Nutzer manuell, aber es muss eine bessere Lösung geben. Sie überlegen, einen eigenen Batchjob zu schreiben, der regelmäßig ausgeführt wird und E-Mail-Adressen aus gelöschten Konten entfernt. Das Löschen von Nutzerdaten scheint jedoch ein ziemlich häufiges Problem zu sein. Vielleicht können auch Firebase-Erweiterungen dieses Problem lösen.

Die Lösung

Sie konfigurieren die Erweiterung Nutzerdaten löschen so, dass der users/uid-Knoten in der Datenbank automatisch gelöscht wird, wenn ein Nutzer 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 der Anleitung auf dem Bildschirm bis zum Schritt Erweiterung konfigurieren.
4. Geben Sie für Realtime Database-Pfade sellers/{UID} ein. Der Teil sellers ist der Knoten, dessen untergeordnete Elemente E-Mail-Adressen von Nutzern enthalten. {UID} ist ein Platzhalter. Bei dieser Konfiguration weiß die Erweiterung, dass sellers/1234 aus der Datenbank gelöscht werden soll, wenn der Nutzer mit der UID 1234 sein Konto löscht.
5. Klicken Sie auf Erweiterung installieren.

Während die Installation abgeschlossen wird

Anpassbarkeit

In diesem Codelab haben Sie gelernt, dass Firebase-Erweiterungen bei der Lösung gängiger Anwendungsfälle helfen können und dass sie an die Anforderungen Ihrer App angepasst werden können.

Erweiterungen können jedoch nicht jedes Problem lösen. Das Problem mit dem Löschen von Nutzerdaten ist ein gutes Beispiel dafür. Mit der Erweiterung „Nutzerdaten löschen“ wird zwar die aktuelle Beschwerde berücksichtigt, dass E-Mails weiterhin offengelegt werden, nachdem ein Nutzer sein Konto gelöscht hat, aber nicht alle Daten werden gelöscht. So ist beispielsweise der Artikeleintrag weiterhin verfügbar und alle Bilder in Cloud Storage bleiben erhalten. Mit der Erweiterung „Nutzerdaten löschen“ können wir zwar einen Cloud Storage-Pfad zum Löschen konfigurieren, da Nutzer jedoch viele verschiedene Dateien mit vielen verschiedenen Namen hochladen können, können Sie diese Erweiterung nicht so konfigurieren, dass diese Artefakte automatisch gelöscht werden. In solchen Fällen eignen sich Cloud Functions für Firebase besser, da Sie damit Code schreiben können, der speziell auf das Datenmodell Ihrer App zugeschnitten ist.

Erweiterungen und Abrechnung

Firebase-Erweiterungen selbst sind kostenlos. Sie zahlen nur für die zugrunde liegenden Ressourcen, die Sie verwenden. Für einige der zugrunde liegenden Ressourcen, die für eine Erweiterung erforderlich sind, kann jedoch eine Abrechnung erforderlich sein. Dieses Codelab kann ohne Rechnungskonto abgeschlossen werden. Wenn Sie jedoch einen Flame- oder Blaze-Tarif einrichten, stehen Ihnen viele wirklich interessante Firebase-Erweiterungen zur Verfügung.

So können Sie beispielsweise URLs kürzen, E-Mails auslösen oder Sammlungen nach BigQuery exportieren. Hier finden Sie den vollständigen Katalog der Erweiterungen.

Wenn Sie eine Erweiterung wünschen, die derzeit nicht verfügbar ist, lassen Sie es uns wissen. Wenn Sie eine neue Erweiterung vorschlagen möchten, reichen Sie eine Funktionsanfrage beim Firebase-Support ein.

Beispiele ansehen

Löschen Sie nach Abschluss der Installation Ihrer Erweiterung einen Nutzer und sehen Sie, was passiert:

1. Rufen Sie in der Firebase Console das Dashboard für Realtime Database auf.
2. Maximieren Sie den Knoten sellers.
3. Die Informationen der einzelnen Verkäufer sind an ihre Nutzer-UID gebunden. Wählen Sie die UID eines Nutzers aus.
4. Rufen Sie in der Firebase Console das Dashboard „Authentifizierung“ auf und suchen Sie nach der UID des Nutzers.
5. Maximieren Sie das Menü rechts neben der UID und wählen Sie Konto löschen aus.

6. Kehren Sie zum Dashboard für Realtime Database zurück. Die Informationen des Verkäufers sind dann nicht mehr verfügbar.

7. 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 finden, konfigurieren, installieren und neu konfigurieren. Außerdem haben Sie gelernt, wie Sie installierte Erweiterungen im Blick behalten und bei Bedarf deinstallieren.

Wie geht es weiter?

Weitere Erweiterungen:

• Textstrings in Cloud Firestore übersetzen (Rechnungskonto erforderlich)
• Mailchimp-E-Mail-Listen neue Nutzer hinzufügen (Abrechnungskonto erforderlich)
• URLs kürzen (Rechnungskonto erforderlich)

Benötigen Sie mehr benutzerdefinierten serverseitigen Code?

• Codelab zu Cloud Functions for Firebase

Weitere hilfreiche Dokumente

Erweiterungen verwalten

• Erweiterungen mit der Firebase CLI verwalten
• Budgetbenachrichtigungen festlegen
• Prüfen, wie oft eine installierte Erweiterung ausgeführt wird
• Eine installierte Erweiterung auf eine neue Version aktualisieren
• Erweiterung deinstallieren

Weitere Informationen zu Erweiterungen:

• Quellcode und Dokumentationen für jede Erweiterung auf GitHub ansehen
• Berechtigungen und Zugriff, die einer Erweiterung gewährt wurden