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 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 Dokumenten in der Sammlung messages, wandelt den Inhalt des Felds original eines Dokuments in Großbuchstaben um und speichert das Ergebnis im Feld uppercase dieses Dokuments.
  2.   const functions = require('firebase-functions/v1');
    
      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 Local Emulator Suite mit firebase emulators:start. Die Cloud Functions- und Datenbankemulatoren werden gestartet und automatisch für die Interkonnektivität konfiguriert.
  4. 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 Cloud Firestore-Emulatoren ausgeführt.
    Mein Bild
  5. Klicken Sie auf der Benutzeroberfläche auf dem Tab Firestore > Daten auf Sammlung starten und folgen Sie der Anleitung, um ein neues Dokument in einer messages-Sammlung mit dem Feldnamen original und dem Wert test zu erstellen. Dadurch wird unsere Cloud-Funktion ausgelöst. Es wird kurz darauf ein neues uppercase-Feld mit dem String „TEST“ angezeigt.
    Mein Bild Mein Bild
  6. Prüfen Sie auf dem Tab Firestore > Anfragen die an Ihre emulierte Datenbank gerichteten Anfragen, einschließlich aller Firebase Security Rules Bewertungen, die im Rahmen der Ausführung dieser Anfragen durchgeführt wurden.
  7. 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 Cloud Firestore-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 firestore = Firebase.firestore
firestore.useEmulator("10.0.2.2", 8080)

firestore.firestoreSettings = firestoreSettings {
    isPersistenceEnabled = false
}
Java
// 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);
Swift
let settings = Firestore.firestore().settings
settings.host = "127.0.0.1:8080"
settings.cacheSettings = MemoryCacheSettings()
settings.isSSLEnabled = false
Firestore.firestore().settings = settings

Web

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

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

Web

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

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: