App verbinden und mit dem Prototyping beginnen


Bevor Sie mit Firebase Local Emulator Suite beginnen, müssen Sie ein Firebase-Projekt erstellen, Ihre Entwicklungsumgebung einrichten und Firebase SDKs für Ihre Plattform gemäß den Themen Einstieg in Firebase für Ihre Plattform auswählen und installieren: Apple, Android oder Web.

Prototyping und Testen

Der Local Emulator Suite enthält mehrere Produktemulatoren, wie in der 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 Functions-Emulatoren
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.Local Emulator Suite

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

  1. Interaktive Prototypenfunktionen mit den Emulatoren und Emulator Suite UI

  2. Wenn Sie einen Datenbankemulator oder den Cloud Functions-Emulator verwenden, müssen Sie Ihre App einmalig mit den Emulatoren verbinden.

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

Firebase-Projekt lokal initialisieren

Installieren Sie die Befehlszeile oder aktualisieren Sie sie auf die neueste Version.

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

Local Emulator Suite wurde entwickelt, damit Sie schnell Prototypen für neue Funktionen erstellen können. Die integrierte Benutzeroberfläche der Suite ist eines der nützlichsten Prototyping-Tools. Das 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 Datenflüsse mit Cloud-Funktionen ausprobieren, Änderungen an Sicherheitsregeln bewerten und Protokolle 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, wandelt den Inhalt der Eigenschaft original des Knotens in Großbuchstaben um und speichert das Ergebnis in der Eigenschaft uppercase des 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);
      });
  2. Starten Sie Local Emulator Suite mit firebase emulators:start. Die Cloud Functions- und Datenbankemulatoren werden gestartet und automatisch für die Interkonnektivität konfiguriert.
  3. Rufen Sie die Benutzeroberfläche in Ihrem Browser unter http://localhost:4000 auf. 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 Cloud Functions- und Realtime Database-Emulatoren ausgeführt.
    Mein Bild
  4. Verwenden Sie auf der Benutzeroberfläche auf dem Tab Realtime Database die Steuerelemente des Editors für den Datenbankinhalt, um eine Reihe von Knoten mit einem messages-Knoten zu erstellen, der einen message1-Knoten enthält, der wiederum einen Knoten mit dem Schlüssel original und dem Wert test enthält. Dadurch wird unsere Cloud-Funktion ausgelöst. Nach kurzer Zeit wird eine neue uppercase-Property mit dem Wert TEST angezeigt.
    Mein Bild Mein Bild
  5. 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 mit dem interaktiven Prototyping gute Fortschritte gemacht haben und sich für ein Design entschieden haben, können Sie Ihrer App mit dem entsprechenden SDK Code für den Datenbankzugriff hinzufügen. Sie verwenden weiterhin den Tab „Datenbank“ und für Funktionen den Tab Protokolle in Emulator Suite UI, um zu prüfen, ob das Verhalten Ihrer App korrekt ist.

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

Wenn Sie möchten, dass Ihre App Daten in die Datenbank schreibt, müssen Sie Ihre Testklassen oder die 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)
EmulatorSuite.kt
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);
EmulatorSuite.java
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")
ViewController.swift

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);
} 
rtdb_emulator_connect.js

Web

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

Tests mit benutzerdefinierten Scripts automatisieren

Jetzt zum letzten Workflowschritt. Sobald Sie einen Prototyp Ihrer In-App-Funktion erstellt haben und dieser auf allen Plattformen vielversprechend aussieht, können Sie mit der endgültigen Implementierung und dem Testen fortfahren. Für Unit-Tests und CI-Workflows können Sie mit dem Befehl exec Emulatoren starten, Skripttests ausführen und Emulatoren in einem einzigen Aufruf beenden:

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

Einzelne Emulatoren genauer kennenlernen

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: