Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Verbinden Sie Ihre App und beginnen Sie mit dem Prototyping

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Bevor Sie mit der Firebase Local Emulator Suite loslegen, vergewissern Sie sich, 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: Apple , 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 Prototypen erstellen und mit einzelnen Emulatoren sowie Kombinationen von Emulatoren nach Belieben 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 .

Um den Local Emulator Suite-Workflow in diesem Thema vorzustellen, gehen wir davon aus, 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 normalerweise drei Schritte:

  1. Prototypfunktionen 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.

Initialisieren Sie lokal ein Firebase-Projekt

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

curl -sL firebase.tools | bash

Falls Sie dies noch nicht getan haben, initialisieren Sie das aktuelle Arbeitsverzeichnis als Firebase-Projekt, indem Sie den Eingabeaufforderungen auf dem Bildschirm folgen, 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 Firebase-Sicherheitsregeln für die Datenbank, ein functions mit Cloud-Funktionscode und andere unterstützende Dateien.

Prototypen interaktiv

Die Local Emulator Suite wurde entwickelt, damit Sie schnell Prototypen für neue Funktionen erstellen können, und 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 der Benutzeroberfläche der Emulator Suite 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 noch einmal von vorn beginnen möchten, leeren 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 und testen sie, um Texteinträge in einer Datenbank zu ändern, und erstellen und füllen diese Datenbank in der Benutzeroberfläche der Emulator Suite, um sie auszulösen.

  1. Erstellen Sie eine Cloud-Funktion, die durch Datenbankschreibvorgänge 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 wartet auf Änderungen an Dokumenten in der messages , wandelt den Inhalt des original eines Dokuments in Großbuchstaben um und speichert das Ergebnis im uppercase dieses Dokuments.
  2.   const functions = require('firebase-functions');
    
      exports.makeUppercase = functions.firestore.document('/messages/{documentId}')
          .onCreate((snap, context) => {
            const original = snap.data().original;
            console.log('Uppercasing', context.params.documentId, original);
            const uppercase = original.toUpperCase();
            return snap.ref.set({uppercase}, {merge: true});
          });
      
  3. Starten Sie die Local Emulator Suite mit firebase emulators:start . Die Cloud-Funktionen und Datenbankemulatoren werden gestartet und automatisch für die Zusammenarbeit konfiguriert.
  4. Zeigen Sie die Benutzeroberfläche in Ihrem Browser unter http://localhost:4000 an. Port 4000 ist der Standardwert für die Benutzeroberfläche, aber überprüfen Sie die Terminalnachrichten, die von der Firebase-CLI ausgegeben werden. Beachten Sie den Status verfügbarer Emulatoren. In unserem Fall werden die Emulatoren Cloud Functions und Cloud Firestore ausgeführt.
    Mein Bild
  5. Klicken Sie in der Benutzeroberfläche auf der Registerkarte Firestore > Daten auf Sammlung starten und befolgen Sie die Eingabeaufforderungen, um ein neues Dokument in einer messages mit dem Feldnamen original und dem Wert test zu erstellen. Dies löst unsere Cloud-Funktion aus. Beachten Sie, dass kurz darauf ein neues uppercase erscheint, das mit der Zeichenfolge „TEST“ gefüllt ist.
    Mein BildMein Bild
  6. Untersuchen Sie auf der Registerkarte Firestore > Anfragen Anfragen an Ihre emulierte Datenbank, einschließlich aller Auswertungen der Firebase-Sicherheitsregeln, die im Rahmen der Erfüllung dieser Anfragen durchgeführt werden.
  7. Überprüfen Sie die Registerkarte Protokolle , um zu bestätigen, dass Ihre Funktion beim Aktualisieren der Datenbank nicht auf Fehler gestoßen ist.

Sie können problemlos zwischen Ihrem Cloud-Funktionscode und interaktiven Datenbankbearbeitungen iterieren, bis Sie den gewünschten Datenfluss erhalten, ohne den Datenbankzugriffscode in der App 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 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.

Um dazu überzugehen, dass Ihre App in die Datenbank schreibt, müssen Sie Ihre Testklassen oder In-App-Konfiguration auf den Cloud Firestore-Emulator verweisen.

Android
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
FirebaseFirestore firestore = FirebaseFirestore.getInstance();
firestore.useEmulator("10.0.2.2", 8080);

FirebaseFirestoreSettings settings = new FirebaseFirestoreSettings.Builder()
        .setPersistenceEnabled(false)
        .build();
firestore.setFirestoreSettings(settings);
Schnell
let settings = Firestore.firestore().settings
settings.host = "localhost:8080"
settings.isPersistenceEnabled = false 
settings.isSSLEnabled = false
Firestore.firestore().settings = settings

Web version 9

import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";

// firebaseApps previously initialized using initializeApp()
const db = getFirestore();
connectFirestoreEmulator(db, 'localhost', 8080);

Web version 8

// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.useEmulator("localhost", 8080);
}

Automatisieren Sie Ihre Tests mit benutzerdefinierten Skripten

Nun zum letzten Gesamt-Workflow-Schritt. Sobald Sie Ihr In-App-Feature als Prototyp erstellt haben und es auf allen Ihren Plattformen vielversprechend aussieht, können Sie sich der endgültigen Implementierung und dem Test zuwenden. Für Komponententests und CI-Workflows können Sie Emulatoren starten, Skripttests 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: