Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Verbinde deine App und beginne mit dem Prototyping

-

Bevor Sie mit Firebase Local Emulator Suite springen, stellen Sie sicher , haben Sie ein Projekt erstellt Firebase, Ihre Entwicklungsumgebung einrichten und ausgewählt und Firebase SDKs für Ihre Plattform installiert nach dem Get mit Firebase Themen für Ihre Plattform gestartet: iOS , Android oder Web .

Prototyp und Test

Die lokale Emulator Suite enthält mehrere Produkt Emulatoren, wie sie in der Einführung in die Firebase Local Emulator Suite . Sie können nach Belieben Prototypen und Tests mit einzelnen Emulatoren sowie Kombinationen von Emulatoren durchführen, je nachdem, welche Firebase-Produkte Sie in der Produktion verwenden.

Interaktion zwischen Firebase dstabase und Funktionsemulatoren
Datenbank und Cloud - Funktionen 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 Update auf die neueste Version .

curl -sL firebase.tools | bash

Wenn Sie dies noch nicht getan haben, initialisieren Sie das aktuelle Arbeitsverzeichnis als Firebase - Projekt, nach den Anweisungen auf dem Bildschirm angeben , sind Sie Cloud - Funktionen und entweder Wolke Firestor oder Realtime - Datenbank:

firebase init

Ihr Projektverzeichnis wird nun Firebase Konfigurationsdateien enthält, eine Firebase Sicherheitsregeln Definitionsdatei für die Datenbank, ein functions Verzeichnis mit Cloud - Funktionen Code 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 und testen wir eine grundlegende Cloud-Funktion zum Ändern von Texteinträgen in einer Datenbank 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 Datenbank schreibt ausgelöst durch die Bearbeitung der functions/index.js Datei in Ihrem Projektverzeichnis. Ersetzen Sie den Inhalt der vorhandenen Datei durch den folgenden Ausschnitt. Diese Funktion Streams für Änderungen an Dokumenten in der messages - Sammlung, konvertiert den Inhalt eines Dokuments des original Feld in Großbuchstaben, und speichert das Ergebnis in diesem Dokument des uppercase
  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 lokale Emulator Suite mit firebase emulators:start . Die Cloud Functions- und Datenbankemulatoren werden gestartet und automatisch für die Interoperabilität konfiguriert.
  4. Sehen Sie sich die Benutzeroberfläche in Ihrem Browser auf 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 Cloud Firestore ausgeführt.
    Mein Bild
  5. In der Benutzeroberfläche auf den Firestor Registerkarte auf dem Datenunterregister klicken Sie auf Start Sammlung und folgen Sie den Anweisungen , ein neues Dokument in einer erstellen messages Sammlung, mit Feldnamen original und test . Dies löst unsere Cloud-Funktion aus. Beachten Sie, dass ein neues uppercase kurz, bevölkert mit der Zeichenfolge „TEST“ erscheint.
    Sie Mein BildMein Bild
  6. Auf den Firestor> Requests Registerkarte untersuchen Anforderungen an Ihre emulierten Datenbank vorgenommen, einschließlich allen Firebase Sicherheitsregeln Auswertungen durchgeführt als Teil dieser Anforderungen zu erfüllen.
  7. Überprüfen Sie die Registerkarte Protokolle Ihre Funktion zu bestätigen hat in Fehler nicht ausgeführt werden, da es die Datenbank aktualisiert.

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 werden halten die Registerkarte Datenbank und für Funktionen, die Registerkarte Logs in Emulator Suite UI , um zu bestätigen , dass das Verhalten der 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 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);
iOS - Schnell
let settings = Firestore.firestore().settings
settings.host = "localhost:8080"
settings.isPersistenceEnabled = false 
settings.isSSLEnabled = false
Firestore.firestore().settings = settings

Webversion 9

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

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

Webversion 8

// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.useEmulator("localhost", 8080);
}
Netz
// Initialize your Web app as described in the Get started for Web
// 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 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 Unit - Tests und CI - Workflows können Sie bis Emulatoren starten, scripted Tests laufen und heruntergefahren Emulatoren in einem Aufruf mit dem exec - Befehl:

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 als nächstes?

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