Mit Firebase-Erweiterungen schnell neue Funktionen zu Ihrer Webanwendung hinzufügen

1. Einführung

Zielvorhaben

In diesem Codelab fügen Sie einer Online-Marktplatz-App mithilfe von Firebase Extensions Funktionen hinzu. In diesem Codelab erfahren Sie, wie Erweiterungen Ihnen helfen können, weniger Zeit für die App-Entwicklung und ‑Verwaltung aufzuwenden.

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

Lerninhalte

• Erweiterungen für häufige 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 Firebase-Produkten, die in diesem Codelab erwähnt werden, finden Sie in der Firebase-Dokumentation und in anderen Codelabs.

Voraussetzungen

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

2. Firebase-Projekt erstellen und einrichten

Firebase-Projekt erstellen

1. Melden Sie sich mit Ihrem Google-Konto in der Firebase Console an.
2. Klicken Sie auf die Schaltfläche, um ein neues Projekt zu erstellen, und geben Sie dann einen Projektnamen ein (z. B. FriendlyMarket).
   
3. Klicken Sie auf Weiter.
4. Lesen und akzeptieren Sie bei Aufforderung die Firebase-Nutzungsbedingungen und klicken Sie dann auf Weiter.
5. (Optional) Aktivieren Sie die KI-Unterstützung in der Firebase Console (als „Gemini in Firebase“ bezeichnet).
6. Für dieses Codelab benötigen Sie kein Google Analytics. Deaktivieren Sie daher die Google Analytics-Option.
7. Klicken Sie auf Projekt erstellen, warten Sie, bis Ihr 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 zum Speichern strukturierter Daten in der Cloud und zum sofortigen Benachrichtigen bei Datenaktualisierungen
• Cloud Storage for Firebase zum Speichern von Bildern in der Cloud

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

Firebase-Tarif upgraden

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

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

So führen Sie für Ihr Projekt ein Upgrade auf den Tarif „Blaze“ durch:

1. Wählen Sie in der Firebase Console die Option zum Upgraden Ihres Abos 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-Konsole zurückkehren, um das Upgrade abzuschließen.

E‑Mail-Anmeldung aktivieren

Obwohl die Authentifizierung nicht im Fokus dieses Codelabs steht, ist es wichtig, dass Ihre App eine Form der Authentifizierung enthält, um jeden Nutzer eindeutig zu identifizieren. Sie verwenden die E‑Mail-Anmeldung.

1. Klicken Sie in der Firebase Console im linken Bereich auf Entwicklung.
2. Klicken Sie auf Authentifizierung und dann auf den Tab Anmeldemethode (oder klicken Sie hier, um direkt zum Tab Anmeldemethode zu gelangen).
3. Klicken Sie in der Liste Anbieter für Anmeldungen auf E-Mail/Passwort, stellen Sie den Schalter Aktivieren auf „Ein“ und klicken Sie dann auf Speichern.

Realtime Database aktivieren

Die App verwendet die Firebase Realtime Database, um zum Verkauf stehende Artikel 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 Ihre Datenbank aus und klicken Sie auf Weiter.
   Für eine echte App sollten Sie einen Speicherort auswählen, der sich in der Nähe Ihrer Nutzer befindet.
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 Sie eine App nicht öffentlich, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
5. Klicken Sie auf Erstellen.

Sicherheitsregeln für Ihre Datenbank festlegen

Als Nächstes legen Sie die für diese App erforderlichen Sicherheitsregeln fest. Dies sind einige einfache Beispielregeln, mit denen Sie Ihre App schützen können. Mit diesen Regeln kann jeder zum Verkauf angebotene Artikel ansehen, aber nur angemeldete Nutzer können andere Lese- und Schreibvorgänge ausführen. Sie müssen sich nicht mit den Details dieser Regeln befassen. Sie kopieren sie einfach und fügen sie ein, damit Ihre App funktioniert.

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 zum Speichern von Bildern von zum Verkauf angebotenen Artikeln.

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

1. Maximieren Sie im linken Bereich der Firebase Console Build und wählen Sie dann Storage aus.
2. Klicken Sie auf Jetzt starten.
3. Wählen Sie einen Standort für Ihren standardmäßigen Storage-Bucket aus.
   Für Buckets in US-WEST1, US-CENTRAL1 und US-EAST1 kann die kostenlose Stufe für Google Cloud Storage genutzt werden. Für Buckets an allen anderen Standorten gelten die Preise und die Nutzung von 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 Sie keine App öffentlich, ohne Sicherheitsregeln für Ihren Storage-Bucket hinzuzufügen.
5. Klicken Sie auf Erstellen.

Sicherheitsregeln für Ihren Storage-Bucket einrichten

Als Nächstes legen Sie die für diese App erforderlichen Sicherheitsregeln fest. Mit diesen Regeln können nur authentifizierte Nutzer neue Bilder posten, aber jeder kann das Bild für einen aufgeführten Artikel ansehen.

1. Klicken Sie oben im Dashboard Speicherplatz 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 /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, 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 Nutzer, 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. Den Startcode finden Sie unter 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, wird Ihr „Konto“ als @anonymous bezeichnet. Das ist aber in Ordnung. Das Projekt hat einen eindeutigen Namen und eine eindeutige URL. Alle Ihre Dateien und Änderungen werden in diesem StackBlitz-Projekt gespeichert.

Firebase-Web-App zum Projekt hinzufügen

1. Sehen Sie sich in StackBlitz die Datei src/firebase-config.js an. Hier fügen Sie das Firebase-Konfigurationsobjekt hinzu.
2. Klicken Sie in der Firebase Console oben links auf Projektübersicht, um zur Übersichtsseite Ihres Projekts zurückzukehren.
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 Namen FriendlyMarket Codelab.
5. Klicken Sie für dieses Codelab nicht das Kästchen neben Firebase Hosting für diese App einrichten an. 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 nicht die <script>-Tags. 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. Kehren Sie in StackBlitz zur Datei src/firebase-config.js zurück.
2. Fügen Sie den 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 wird der Code für eine einfache Marketplace-App verwendet. Jeder Nutzer kann eine Liste der zum Verkauf stehenden Artikel aufrufen und auf einen Link klicken, um die Detailseite eines Artikels aufzurufen. Wenn ein Nutzer angemeldet ist, sieht er die Kontaktdaten des Verkäufers, damit er einen Preis aushandeln und den Artikel kaufen kann.

App ausprobieren:

1. Melden Sie sich über die Schaltfläche oben auf dem Startbildschirm an. Sie können eine gefälschte E-Mail-Adresse, einen gefälschten Namen und ein gefälschtes Passwort verwenden.
2. Klicken Sie rechts unten auf die Schaltfläche Etwas verkaufen, um ein Angebot zu erstellen.
3. Geben Sie für Titel Xylophone ein.
4. Geben Sie für Angebotspreis 50 ein.
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 mit der 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 Database (Datenbank) sehen Sie jetzt unter dem Knoten forsale einen Eintrag für das Element, das Sie gepostet haben. Im Storage-Dashboard finden Sie das hochgeladene Bild auch unter dem Pfad friendlymarket.

4. Erweiterung suchen und installieren

Das Problem

Nachdem Sie einige Nutzerstudien für Ihre App durchgeführt haben, 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 in der Regel nach wenigen Sekunden wieder verlassen.

Sie sind neugierig und testen Ihre Website mit mobilen Verbindungsgeschwindigkeiten. Weitere Informationen Das Laden der Bilder dauert sehr lange und sie werden im Browser überhaupt nicht im Cache gespeichert. Diese lange Ladezeit tritt bei jedem Seitenaufruf auf.

Die Lösung

Nachdem Sie sich informiert haben, wie Sie Bilder optimieren, entscheiden Sie sich für zwei Maßnahmen zur Verbesserung der Bildladeleistung:

• Bilder komprimieren Selbst mit Mobiltelefonen aufgenommene Bilder haben eine viel höhere Auflösung als für diese App erforderlich. Durch Verringern der Dateigröße werden die Ladezeiten verkürzt, ohne dass die Auflösung in der App merklich abnimmt.
• Caching Standardmäßig haben Cloud Storage-Objekte Header, die Browsern mitteilen, dass Bilder nicht im Cache gespeichert werden sollen. Das bedeutet, dass der Browser eines Nutzers dasselbe Bild immer wieder neu 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 einschränken oder einen serverseitigen Prozess zum Anpassen der Bildgröße verwenden. Sehen wir uns die möglichen Nachteile an:

• Clientseitig Bei einem clientseitigen Prozess könnten Sie einfach die Dateigröße für hochgeladene Bilder begrenzen. Sie müssen also keine neue Serverlogik schreiben oder verwalten. Das bedeutet aber auch, dass Ihre Verkäufer ihre eigenen Bilder anpassen müssen, was eine mühsame und unintuitive Hürde beim Erstellen eines neuen Eintrags darstellt.
• Serverseitig. Wenn Sie Cloud Functions for Firebase verwenden, können Sie eine Funktion auslösen, die ein Bild beim Hochladen automatisch in der Größe anpasst. Das bedeutet, dass Verkäufer Bilder in beliebiger Größe hochladen können (ohne zusätzlichen Aufwand) und Ihre Backend-Funktion die Größe des Bildes nahtlos anpassen kann. Für diese Funktion ist sogar ein Beispiel verfügbar.

Es sieht so aus, als wäre die serverseitige Lösung die richtige. Dazu müssen Sie jedoch das Beispiel klonen, der Einrichtungsanleitung folgen und die Funktion dann mit der Firebase CLI bereitstellen. Das Ändern der Größe von Bildern ist ein sehr häufiger Anwendungsfall. Gibt es keine 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 „Resize Images“. Das sieht vielversprechend aus.

Lassen Sie uns diese Erweiterung in Ihrer App verwenden.

Erweiterung installieren

1. Klicken Sie auf Details ansehen, um weitere Informationen zu dieser Erweiterung aufzurufen. Unter Konfigurationsmöglichkeiten können Sie die Dimensionen festlegen, auf die die Größe angepasst werden soll, und sogar die Cache-Kopfzeile festlegen. Super!
2. Klicken Sie auf der Detailseite der Erweiterung auf die Schaltfläche In der Konsole installieren. Sie werden zu einer Seite in der Firebase Console weitergeleitet, auf der alle Ihre Projekte aufgeführt sind.
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 Sie den Schritt Erweiterung konfigurieren erreichen. In der Anleitung wird eine grundlegende Zusammenfassung der Erweiterung sowie alle Ressourcen, die sie erstellt, und alle Zugriffsrollen, die sie benötigt, angezeigt.
5. Geben Sie im Feld **Cache-Control** Header für skalierte Bilder Folgendes ein:

public, max-age=31536000

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

Während Sie auf den Abschluss der Installation warten…

Installation über das Firebase-Befehlszeilentool

Wenn Sie lieber Befehlszeilentools verwenden, können Sie Erweiterungen auch über die Firebase CLI installieren und verwalten. Verwenden Sie einfach den Befehl firebase ext, der in der neuesten Version der CLI 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 lang im Cache gespeichert wird. Weitere Informationen zum Cache-Control-Header finden Sie in dieser Dokumentation.

Clientcode aktualisieren

Die installierte Erweiterung schreibt ein in der Größe angepasstes Bild in denselben Bucket wie das Originalbild. An den Dateinamen des angepassten Bildes werden die konfigurierten Abmessungen angehängt. Wenn der ursprüngliche Dateipfad also friendlymarket/user1234-car.png lautete, sieht der Dateipfad des angepassten Bildes so aus: friendlymarket/user1234-car_200x200.png.

Wir aktualisieren die App so, dass sie die verkleinerten Bilder anstelle der Bilder 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 in der Größe angepasste 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)
  };
}

Jetzt ausprobieren

Da diese Erweiterung auf neue Bild-Uploads wartet, wird Ihr vorhandenes Bild nicht in der Größe angepasst.

So 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 gelangen.
2. Klicken Sie rechts unten in der App auf die Schaltfläche Etwas verkaufen, um ein Angebot 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 mit der Schaltfläche BILD IHRES 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 das Café wird unter dem Xylophon angezeigt.
8. Klicken Sie in der Firebase Console im Dashboard Functions auf den Tab Logs. Sie sollten Logs der Funktion sehen, die zeigen, dass sie ausgeführt wurde.

9. Rufen Sie das Storage-Dashboard auf, um sowohl das Originalbild des Kaffees als auch eine in der Größe angepasste Version im Pfad friendlymarket zu sehen.
10. Laden Sie den Startbildschirm Ihrer App im StackBlitz-Vorschaubereich einige Male neu. Das Kaffeebild sollte deutlich schneller geladen werden als das Xylofonbild.

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

5. Erweiterung neu konfigurieren

Das Problem

Ihre App speichert automatisch Entwurfsversionen des Eintrags eines Verkäufers. Ihre Nutzer mögen diese Funktion, aber Ihre Statistiken sind etwas besorgniserregend. Laut Ihren Berichten werden nur etwa 10% der Entwürfe tatsächlich veröffentlicht. Die anderen 90% belegen nur Speicherplatz in Ihrer Datenbank.

Die Lösung

Nach einigen Überschlagsrechnungen stellen Sie fest, dass Sie zu einem bestimmten Zeitpunkt nur etwa fünf Entwürfe speichern müssen.

Erinnern Sie sich an den Katalog von Firebase Extensions? Vielleicht gibt es bereits eine Lösung für diese Situation. Wir installieren die Erweiterung Limit Child Nodes, damit die Anzahl der gespeicherten Entwürfe automatisch auf maximal fünf begrenzt wird. Die Erweiterung löscht den ältesten Entwurf, wenn 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 Marketplace-Web-App verwenden.
3. Folgen Sie der Anleitung auf dem Bildschirm, bis Sie den Schritt Erweiterung konfigurieren erreichen.
4. Geben Sie drafts als Realtime Database-Pfad ein. Dies ist der Pfad in der Datenbank, in dem Entwürfe gespeichert werden.
5. Geben Sie für Maximale Anzahl der beizubehaltenden Knoten den Wert 5 ein. Das bedeutet, dass für jeden Artikel fünf Entwürfe gespeichert werden. Wenn ein weiterer Entwurf hinzugefügt wird, wird der älteste automatisch gelöscht.
6. Klicken Sie auf Erweiterung installieren.

Während Sie warten, bis die Installation abgeschlossen ist…

Monitoring-Erweiterungen

Wenn Sie eine Erweiterung installieren, werden mehrere Funktionen erstellt. Sie können prüfen, wie oft diese Funktionen ausgeführt werden, oder sich Logs und Fehlerraten ansehen. Ausführliche Informationen dazu, wie Sie Ihre Erweiterung im Blick behalten, finden Sie unter Installierte Erweiterungen verwalten. Folgen Sie der Anleitung in der Dokumentation, um die Funktionen aufzurufen, die im vorherigen Schritt von der Erweiterung „Resize Images“ erstellt wurden.

Erweiterungen deinstallieren

Wenn Sie eine Erweiterung aus Ihrem Projekt entfernen möchten, könnten Sie versucht sein, die einzelnen Funktionen zu löschen, die durch eine 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 für diese Instanz der Erweiterung erstellte Dienstkonto gelöscht. Alle von der Erweiterung erstellten Artefakte (z. B. die angepassten Bilder) verbleiben jedoch nach der Deinstallation der Erweiterung in Ihrem Projekt.

Mehrere Kopien einer Erweiterung in einem einzelnen Projekt installieren

Sie können mehrere Instanzen einer bestimmten Erweiterung in einem Projekt 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 gepostet haben.
2. Vorschläge generieren:
3. Klicken Sie 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 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 (Freundlicher Markt). So haben Sie einen gespeicherten Entwurf, müssen ihn aber nicht posten.
7. Wiederholen Sie den Vorgang für „Entwurf 2“, „Entwurf 3“ usw. bis „Entwurf 6“.
8. Wenn Sie „Entwurf 6“ erstellen, verschwindet „Entwurf 1“ aus dem Bereich Entwürfe.
9. Wie bei der Erweiterung „Resize Images“ können Sie in den Funktionslogs nachsehen, welche Funktionen ausgelöst wurden.

Das Limit für die Anzahl der zu behaltenden Entwürfe ist zu niedrig.

Ihr Kundenserviceteam meldet sich bei Ihnen und teilt Ihnen mit, dass sich einige Ihrer aktivsten Verkäufer darüber beschweren, dass ihre Entwürfe gelöscht werden, bevor sie sie posten können. Sie lassen Ihre Berechnungen von Ihrem Teamkollegen überprüfen und stellen fest, dass Sie sich um den Faktor 10.000 verrechnet haben.

Wie können Sie dieses Problem beheben? Lassen Sie uns die installierte Erweiterung neu konfigurieren.

1. Klicken Sie im linken Bereich der Firebase-Konsole auf Extensions (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 beizubehaltenden Knoten in 50000.
5. Klicken Sie auf Speichern.

Das ist alles, was du tun musst. Während die Erweiterung aktualisiert wird, können Sie sich an Ihr Supportteam wenden und ihm mitteilen, dass bereits eine Korrektur bereitgestellt wird.

6. Nutzerdaten automatisch löschen

Das Problem

Ihr Kundensupportteam hat sich noch einmal bei Ihnen gemeldet. Verkäufer, die ihre Konten gelöscht haben, erhalten immer noch E-Mails von anderen Nutzern und sind verärgert. Diese Verkäufer haben erwartet, dass ihre E‑Mail-Adressen aus Ihren Systemen gelöscht werden, wenn sie ihre Konten löschen.

Bisher hat der Support die Daten jedes Nutzers manuell gelöscht, aber es muss eine bessere Lösung geben. Sie überlegen, ob Sie einen eigenen Batchjob schreiben sollen, 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 Firebase-Erweiterungen auch bei diesem Problem helfen.

Die Lösung

Sie konfigurieren die Erweiterung Nutzerdaten löschen so, dass der Knoten users/uid 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 Marketplace-Web-App verwenden.
3. Folgen Sie der Anleitung auf dem Bildschirm, bis Sie den Schritt Erweiterung konfigurieren erreichen.
4. Geben Sie für Realtime Database-Pfade sellers/{UID} ein. sellers ist der Knoten, dessen untergeordnete Elemente die E-Mail-Adressen der Nutzer enthalten, und {UID} ist ein Platzhalter. Bei dieser Konfiguration weiß die Erweiterung, dass beim Löschen des Kontos des Nutzers mit der UID 1234 auch sellers/1234 aus der Datenbank gelöscht werden muss.
5. Klicken Sie auf Erweiterung installieren.

Während Sie warten, bis die Installation abgeschlossen ist…

Anpassungsmöglichkeiten

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

Erweiterungen können jedoch nicht jedes Problem lösen. Das Löschen von Nutzerdaten ist ein gutes Beispiel dafür. Die Erweiterung „Nutzerdaten löschen“ behebt zwar die aktuelle Beschwerde, dass E‑Mail-Adressen weiterhin sichtbar sind, nachdem ein Nutzer sein Konto gelöscht hat, aber sie löscht nicht alle Daten. Die Artikelbeschreibung ist beispielsweise weiterhin verfügbar und alle Bilder in Cloud Storage bleiben ebenfalls 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 unterschiedlichen Namen hochladen können, lässt sich diese Erweiterung nicht so konfigurieren, dass diese Artefakte automatisch gelöscht werden. Für solche Situationen ist Cloud Functions für Firebase möglicherweise besser geeignet, da Sie Code schreiben können, der speziell auf das Datenmodell Ihrer App zugeschnitten ist.

Erweiterungen und Abrechnung

Die Nutzung von Firebase-Erweiterungen ist 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, ist jedoch möglicherweise eine Abrechnung erforderlich. Dieses Codelab ist so konzipiert, dass es ohne Rechnungskonto durchgearbeitet werden kann. Wenn Sie jedoch einen Flame- oder Blaze-Tarif einrichten, werden viele interessante Firebase-Erweiterungen freigeschaltet.

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

Wenn Sie eine Erweiterung benötigen, die derzeit nicht verfügbar ist, teilen Sie uns das bitte mit. Stellen Sie eine Funktionsanfrage beim Firebase-Support, um eine neue Erweiterung vorzuschlagen.

Beispiele ansehen

Nachdem Sie die Erweiterung installiert haben, löschen Sie einen Nutzer und sehen Sie, was passiert:

1. Rufen Sie in der Firebase Console das Dashboard für die 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 für die Authentifizierung auf und suchen Sie nach der Nutzer-UID.
5. Maximieren Sie das Menü rechts neben der UID und wählen Sie Konto löschen aus.

6. Kehren Sie zum Realtime Database-Dashboard zurück. Die Informationen des Verkäufers sind dann nicht mehr vorhanden.

7. Glückwunsch!

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

Sie haben gelernt, wie Sie Erweiterungen finden, konfigurieren, installieren und neu konfigurieren. Außerdem haben Sie erfahren, wie Sie installierte Erweiterungen im Blick behalten und bei Bedarf deinstallieren können.

Wie geht es weiter?

Hier sind einige weitere Erweiterungen:

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

Benötigen Sie mehr benutzerdefinierten serverseitigen Code?

• Cloud Functions for Firebase-Codelab

Weitere hilfreiche Dokumente

Erweiterungen verwalten:

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

Weitere Informationen zu Erweiterungen

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