Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

Verbinde deine App und beginne mit dem Prototyping

Stellen Sie vor dem Einstieg in die Firebase Local Emulator Suite sicher, dass Sie ein Firebase-Projekt erstellt, Ihre Entwicklungsumgebung eingerichtet und Firebase SDKs für Ihre Plattform gemäß den Themen Erste Schritte mit Firebase für Ihre Plattform ausgewählt und installiert haben: iOS , Android oder Web .

Prototyp und Test

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

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

Nehmen wir für dieses Thema zur Einführung des Local Emulator Suite-Workflows an, dass Sie an einer App arbeiten, 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, umfasst der Entwicklungszyklus mit der Local Emulator Suite in der Regel drei Schritte:

  1. Prototype-Funktionen interaktiv mit den Emulatoren und der Benutzeroberfläche der Emulator Suite.

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

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

Ein Firebase-Projekt lokal initialisieren

Stellen Sie sicher, dass Sie die CLI installieren oder auf die neueste Version aktualisieren .

curl -sL firebase.tools | bash

Falls noch nicht geschehen, initialisieren Sie das aktuelle Arbeitsverzeichnis als Firebase-Projekt und befolgen Sie die Anweisungen 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 Definitionsdatei für die Firebase-Sicherheitsregeln für die Datenbank, ein functions mit Cloud-Funktionscode und andere unterstützende Dateien.

Interaktiv prototypieren

Die Local Emulator Suite wurde entwickelt, um Ihnen schnelle Prototypen neuer Funktionen zu ermöglichen, und die integrierte Benutzeroberfläche der Suite ist eines der nützlichsten Prototyping-Tools. Es ist ein bisschen so, als ob die Firebase-Konsole lokal ausgeführt wird.

Mit der Emulator Suite-Benutzeroberfläche können Sie das Design einer Datenbank iterieren, verschiedene Datenflüsse mit Cloud-Funktionen ausprobieren, Änderungen an Sicherheitsregeln auswerten, Protokolle überprüfen, um die Leistung Ihrer Back-End-Dienste zu bestätigen und vieles mehr. Wenn Sie dann von vorne beginnen möchten, löschen Sie einfach Ihre Datenbank und beginnen Sie mit einer neuen Designidee neu.

Es ist alles verfügbar, wenn Sie die Local Emulator Suite starten mit:

firebase emulators:start

Um einen Prototyp unserer hypothetischen App zu erstellen, richten wir eine grundlegende Cloud-Funktion ein, um Texteinträge in einer Datenbank zu ändern, und erstellen und füllen diese Datenbank in der Emulator Suite-Benutzeroberfläche, um sie auszulösen.

  1. Erstellen Sie eine Cloud-Funktion, die durch Datenbankschreibvorgänge ausgelöst wird, indem functions/index.js Datei functions/index.js in Ihrem Projektverzeichnis bearbeiten. Ersetzen Sie den Inhalt der vorhandenen Datei durch den folgenden Ausschnitt. Diese Funktion lauscht Änderungen an Knoten in der messages - Hierarchie, wandelt den Inhalt des Knotens original Eigenschaft in Großbuchstaben, und speichert das Ergebnis in diesem Knoten ist uppercase - Eigenschaft.
  2.   const functions = require('firebase-functions');
    
      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 die Local Emulator Suite mit firebase emulators:start . Die Cloud Functions- und Datenbankemulatoren werden gestartet und automatisch für die Interoperabilität konfiguriert.
  4. Zeigen Sie die Benutzeroberfläche in Ihrem Browser unter http://localhost:4000 . Port 4000 ist der Standard für die Benutzeroberfläche, aber überprüfen Sie die von der Firebase-CLI ausgegebenen Terminalnachrichten. Beachten Sie den Status der verfügbaren Emulatoren. In unserem Fall werden die Emulatoren von Cloud Functions und Realtime Database ausgeführt.
    Mein Bild
  5. Verwenden Sie in der Benutzeroberfläche auf der Registerkarte Echtzeitdatenbank die Steuerelemente des Datenbankinhaltseditors, um eine Gruppe von Knoten mit einem messages zu erstellen, der einen messages enthält, der wiederum einen Knoten mit Schlüsselsatz auf original und message1 auf test . Dies löst unsere Cloud-Funktion aus. Beachten Sie, dass in Kürze eine neue Eigenschaft in uppercase mit dem Wert TEST angezeigt wird.
    Mein BildMein Bild
  6. Überprüfen Sie die Registerkarte Protokolle , um sicherzustellen, dass Ihre Funktion beim Aktualisieren der Datenbank keine Fehler ausgeführt hat.

Sie können problemlos zwischen Ihrem Cloud-Funktionscode und interaktiven Datenbankbearbeitungen wechseln, bis Sie den gewünschten Datenfluss erhalten, ohne den In-App-Datenbankzugriffscode zu berühren, Testsuiten neu zu kompilieren und erneut auszuführen.

Verbinden Sie Ihre App mit den Emulatoren

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 den Datenbankzugriffscode hinzufügen. Sie verwenden weiterhin die Registerkarte Datenbank und für Funktionen die Registerkarte Protokolle in der Emulator Suite-Benutzeroberfläche, um zu bestätigen, dass das Verhalten Ihrer App korrekt ist.

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

Damit Ihre App Schreibvorgänge in die Datenbank durchführt, müssen Sie Ihre Testklassen oder die In-App-Konfiguration auf den Echtzeitdatenbankemulator verweisen.

Android
        // 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);
iOS - Schnell
    // In almost all cases the ns (namespace) is your project ID.
let db = Database.database(url:"http://localhost:9000?ns=YOUR_DATABASE_NAMESPACE")

Web v8

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

Web v9

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

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

Automatisieren Sie Ihre Tests mit benutzerdefinierten Skripten

Nun zum letzten Gesamt-Workflow-Schritt. Sobald Sie Ihr Feature in der App als Prototyp erstellt haben und es auf allen Ihren Plattformen vielversprechend aussieht, können Sie sich der endgültigen Implementierung und dem Testen zuwenden. Für Komponententests und CI-Workflows können Sie Emulatoren starten, skriptgesteuerte Tests ausführen und Emulatoren in einem einzigen Aufruf mit dem Befehl exec herunterfahren:

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

Erkunden Sie einzelne Emulatoren genauer

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

Was nun?

Lesen Sie unbedingt die oben verlinkten Themen zu bestimmten Emulatoren. Dann: