App verbinden und mit dem Prototyping beginnen


Bevor Sie Firebase Local Emulator Suite verwenden, müssen Sie ein Firebase-Projekt erstellt, Ihre Entwicklungsumgebung eingerichtet und Firebase SDKs für Ihre Plattform ausgewählt und installiert haben. Beachten Sie dabei die Erste Schritte mit Firebase für Ihre Plattform: Apple, Android oder Web.

Prototypen erstellen und testen

Local Emulator Suite enthält mehrere Produktemulatoren, wie unter Einführung in Firebase Local Emulator Suite beschrieben. Sie können Prototypen erstellen und mit einzelnen Emulatoren oder Kombinationen von Emulatoren testen, je nachdem, welche Firebase-Produkte Sie in der Produktion verwenden.

Interaktion zwischen Firebase-Datenbank- und Funktionsemulatoren
Datenbank- und Cloud Functions-Emulatoren als Teil der vollständigen Local Emulator Suite.

Angenommen, Sie arbeiten an einer App, die eine typische Kombination von Produkten verwendet: eine Firebase-Datenbank und Cloud-Funktionen, die durch Vorgänge in dieser Datenbank ausgelöst werden.

Nachdem Sie Ihr Firebase-Projekt lokal initialisiert haben, besteht der Entwicklungszyklus mit Local Emulator Suite in der Regel aus drei Schritten:

  1. Interaktive Prototypenfunktionen mit den Emulatoren und Emulator Suite UI

  2. Wenn Sie einen Datenbankemulator oder den Cloud Functions-Emulator verwenden, führen Sie einen einmaligen Schritt aus, um Ihre Anwendung mit den Emulatoren zu verbinden.

  3. Automatisieren Sie Ihre Tests mit den Emulatoren und benutzerdefinierten Skripts.

Firebase-Projekt lokal initialisieren

Achten Sie darauf, dass Sie die Befehlszeile installieren oder ein Update auf die neueste Version durchführen.

curl -sL firebase.tools | bash

Wenn Sie es noch nicht getan haben, initialisieren Sie das aktuelle Arbeitsverzeichnis als Firebase-Projekt. Folgen Sie der Anleitung auf dem Bildschirm, um anzugeben, dass Sie Cloud Functions und entweder Cloud Firestore oder Realtime Database verwenden:

firebase init

Ihr Projektverzeichnis enthält jetzt Firebase-Konfigurationsdateien, eine Firebase Security Rules-Definitiondatei für die Datenbank, ein functions-Verzeichnis mit Cloud Functions-Code und andere unterstützende Dateien.

Interaktive Prototypen erstellen

Mit Local Emulator Suite können Sie schnell Prototypen neuer Funktionen erstellen. Die integrierte Benutzeroberfläche der Suite ist eines der nützlichsten Prototyping-Tools. Es ist ein bisschen so, als würde die Firebase-Konsole lokal ausgeführt.

Mit Emulator Suite UI können Sie unter anderem das Design einer Datenbank iterieren, verschiedene Dataflows mit Cloud-Funktionen ausprobieren, Änderungen an Sicherheitsregeln bewerten und Logs prüfen, um die Leistung Ihrer Back-End-Dienste zu überprüfen. Wenn Sie von vorne beginnen möchten, löschen Sie einfach Ihre Datenbank und beginnen Sie mit einer neuen Designidee.

Sie sind verfügbar, wenn Sie Local Emulator Suite mit einer der folgenden Optionen starten:

firebase emulators:start

Für den Prototyp unserer hypothetischen App richten wir eine einfache Cloud-Funktion ein und testen sie, um Texteinträge in einer Datenbank zu ändern. Außerdem erstellen und füllen wir diese Datenbank in der Emulator Suite UI, um sie auszulösen.

  1. Erstellen Sie eine Cloud-Funktion, die durch Datenbankschreiben ausgelöst wird, indem Sie die Datei functions/index.js in Ihrem Projektverzeichnis bearbeiten. Ersetzen Sie den Inhalt der vorhandenen Datei durch das folgende Snippet. Diese Funktion überwacht Änderungen an Knoten in der messages-Hierarchie, konvertiert den Inhalt des Attributs original des Knotens in Großbuchstaben und speichert das Ergebnis im Attribut uppercase dieses Knotens.
  2.   const functions = require('firebase-functions/v1');
    
      exports.makeUppercase = functions.database.ref('/messages/{pushId}/original')
          .onCreate((snapshot, context) => {
            const original = snapshot.val();
            console.log('Uppercasing', context.params.pushId, original);
            const uppercase = original.toUpperCase();
            return snapshot.ref.parent.child('uppercase').set(uppercase);
          });
      
  3. Starten Sie Local Emulator Suite mit firebase emulators:start. Die Cloud Functions- und Datenbankemulatoren werden gestartet und automatisch für die Interkonnektivität konfiguriert.
  4. Sehen Sie sich die Benutzeroberfläche in Ihrem Browser unter http://localhost:4000 an. Port 4000 ist der Standardport für die Benutzeroberfläche. Prüfen Sie jedoch die Terminalmeldungen, die von der Firebase-Befehlszeile ausgegeben werden. Notieren Sie sich den Status der verfügbaren Emulatoren. In unserem Fall werden die Emulatoren Cloud Functions und Realtime Database ausgeführt.
    Mein Bild
  5. Verwenden Sie in der Benutzeroberfläche auf dem Tab Echtzeitdatenbank die Steuerelemente des Datenbankinhalts-Editors, um eine Gruppe von Knoten mit einem messages-Knoten zu erstellen, der einen message1-Knoten enthält. Dieser enthält wiederum einen Knoten, dessen Schlüssel auf original und der Wert test festgelegt ist. Dadurch wird unsere Cloud-Funktion ausgelöst. In Kürze wird ein neues uppercase-Attribut mit dem Wert TEST angezeigt.
    Mein Bild Mein Bild
  6. Prüfen Sie auf dem Tab Protokolle, ob bei der Aktualisierung der Datenbank keine Fehler aufgetreten sind.

Sie können ganz einfach zwischen dem Code Ihrer Cloud-Funktion und interaktiven Datenbankbearbeitungen wechseln, bis Sie den gewünschten Datenfluss erhalten, ohne den Code für den In-App-Datenbankzugriff zu ändern, Test-Suites neu zu kompilieren und noch einmal auszuführen.

App mit den Emulatoren verbinden

Wenn Sie beim interaktiven Prototyping gute Fortschritte gemacht und sich für ein Design entschieden haben, können Sie Ihrer App mit dem entsprechenden SDK Datenbankzugriffscode hinzufügen. Sie verwenden weiterhin den Tab „Datenbank“ und für Funktionen den Tab Protokolle in Emulator Suite UI, um zu prüfen, ob die App richtig funktioniert.

Local Emulator Suite ist ein lokales Entwicklungstool. Schreibvorgänge in Ihre Produktionsdatenbanken lösen keine Funktionen aus, die Sie lokal prototypisieren.

Damit Ihre Anwendung Schreibvorgänge in der Datenbank ausführen kann, müssen Sie Ihre Testklassen oder In-App-Konfiguration auf den Realtime Database-Emulator verweisen.

Kotlin+KTX
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
val database = Firebase.database
database.useEmulator("10.0.2.2", 9000)
Java
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
FirebaseDatabase database = FirebaseDatabase.getInstance();
database.useEmulator("10.0.2.2", 9000);
Swift
    // In almost all cases the ns (namespace) is your project ID.
let db = Database.database(url:"http://127.0.0.1:9000?ns=YOUR_DATABASE_NAMESPACE")

Web

import { getDatabase, connectDatabaseEmulator } from "firebase/database";

const db = getDatabase();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  connectDatabaseEmulator(db, "127.0.0.1", 9000);
} 

Web

var db = firebase.database();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  db.useEmulator("127.0.0.1", 9000);
} 

Tests mit benutzerdefinierten Scripts automatisieren

Kommen wir nun zum letzten Schritt des Workflows. Nachdem Sie einen Prototyp für Ihre Funktion in der App erstellt haben und sie auf allen Plattformen vielversprechend aussieht, können Sie mit der endgültigen Implementierung und Tests beginnen. Für Einheitentests und CI-Workflows können Sie mit dem Befehl exec in einem einzigen Aufruf Emulatoren starten, Testskripts ausführen und Emulatoren herunterfahren:

firebase emulators:exec "./testdir/test.sh"

Ausführlichere Informationen zu einzelnen Emulatoren

Nachdem Sie nun wissen, wie der grundlegende clientseitige Workflow aussieht, können Sie mit Details zu den einzelnen Emulatoren in der Suite fortfahren, einschließlich der Verwendung für die serverseitige App-Entwicklung:

Und jetzt?

Lesen Sie sich die Themen zu den einzelnen Emulatoren durch, die oben verlinkt sind. Gehen Sie anschließend so vor: