Connectez votre application et commencez le prototypage

en de

Avant de sauter avec Firebase local Emulator Suite, assurez - vous que vous avez créé un projet Firebase, configurez votre environnement de développement, et choisi et installé Firebase SDKs pour votre plate - forme selon la Get a commencé avec des sujets Firebase pour votre plate - forme: iOS , Android ou Web .

Prototyper et tester

L'émulateur local Suite contient plusieurs émulateurs de produits, tels que décrits dans Introduction à Firebase Emulator locale Suite . Vous pouvez prototyper et tester avec des émulateurs individuels ainsi que des combinaisons d'émulateurs, comme bon vous semble, correspondant aux produits Firebase que vous utilisez en production.

Interaction entre Firebase dstabase et les émulateurs de fonctions
Base de données et de nuages émulateurs fonctions dans le cadre de la pleine locale Emulator Suite .

Pour cette rubrique, pour présenter le workflow Local Emulator Suite, supposons que vous travaillez sur une application qui utilise une combinaison typique de produits : une base de données Firebase et des fonctions cloud déclenchées par des opérations sur cette base de données.

Après avoir initialisé localement votre projet Firebase, le cycle de développement à l'aide de la suite d'émulateurs locaux comporte généralement trois étapes :

  1. Prototyper des fonctionnalités de manière interactive avec les émulateurs et l'interface utilisateur Emulator Suite.

  2. Si vous utilisez un émulateur de base de données ou l'émulateur Cloud Functions, effectuez une étape unique pour connecter votre application aux émulateurs.

  3. Automatisez vos tests avec les émulateurs et les scripts personnalisés.

Initialiser localement un projet Firebase

Assurez - vous que vous installez la CLI ou mise à jour à sa dernière version .

curl -sL firebase.tools | bash

Si vous ne l' avez pas déjà fait, initialiser le répertoire de travail en tant que projet Firebase, en suivant les instructions à l' écran pour vous indiquer utilisez les fonctions de Cloud et soit en temps réel ou Nuage Firestore Base de données:

firebase init

Votre répertoire de projet contiendra maintenant les fichiers de configuration, Firebase un fichier de définition Règles de sécurité pour Firebase la base de données, un functions répertoire contenant le code de fonctions de cloud et d' autres fichiers de support.

Prototyper de manière interactive

Local Emulator Suite est conçu pour vous permettre de prototyper rapidement de nouvelles fonctionnalités, et l'interface utilisateur intégrée de la suite est l'un de ses outils de prototypage les plus utiles. C'est un peu comme si la console Firebase s'exécutait localement.

À l'aide de l'interface utilisateur d'Emulator Suite, vous pouvez itérer la conception d'une base de données, essayer différents flux de données impliquant des fonctions cloud, évaluer les modifications des règles de sécurité, vérifier les journaux pour confirmer les performances de vos services principaux, etc. Ensuite, si vous voulez recommencer, effacez simplement votre base de données et repartez avec une nouvelle idée de conception.

Tout est disponible lorsque vous démarrez la suite d'émulateurs locaux avec :

firebase emulators:start

Pour prototyper notre application hypothétique, configurons et testons une fonction cloud de base pour modifier les entrées de texte dans une base de données, et créons et remplissons cette base de données dans l'interface utilisateur de Emulator Suite pour la déclencher.

  1. Créer une fonction de nuage déclenchée par la base de données écrit en modifiant les functions/index.js fichier dans votre répertoire de projet. Remplacez le contenu du fichier existant par l'extrait suivant. Cette fonction écoute les modifications apportées aux documents dans les messages collection, convertit le contenu d'un des documents d' original champ en majuscules, et stocke le résultat dans ce document de uppercase champ.
  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. Lancez l'émulateur local Suite avec firebase emulators:start . Les fonctions Cloud et les émulateurs de bases de données démarrent, configurés automatiquement pour interagir.
  4. Voir l'interface utilisateur dans votre navigateur à l' http://localhost:4000 . Le port 4000 est le port par défaut pour l'interface utilisateur, mais vérifiez les messages du terminal générés par la CLI de Firebase. Notez l'état des émulateurs disponibles. Dans notre cas, les émulateurs Cloud Functions et Cloud Firestore seront en cours d'exécution.
    Mon image
  5. Dans l'interface utilisateur, sous l'onglet Firestore, sur le sous-onglet Données, cliquez sur Démarrer et collecte suivez les instructions pour créer un nouveau document dans un messages collection, avec nomchamp d' original et la valeur test . Cela déclenche notre fonction cloud. Remarquer qu'un nouveau uppercase champ apparaît peu, peuplée par la chaîne « TEST ».
    les à Mon imageMon image
  6. Sur la Firestore> onglet Demandes, examiner les demandes faites à votre base de données émulé, y compris toutes les évaluations règles de sécurité Firebase effectuées dans le cadre de l' accomplissement de ces demandes.
  7. Vérifiez l'onglet Journaux pour confirmer votre fonction n'a pas d' erreurs en tant courir à jour la base de données.

Vous pouvez facilement parcourir le code de votre fonction cloud et les modifications de base de données interactives jusqu'à ce que vous obteniez le flux de données que vous recherchez, sans toucher au code d'accès à la base de données dans l'application, sans recompiler ni réexécuter les suites de tests.

Connectez votre application aux émulateurs

Lorsque vous aurez bien progressé dans le prototypage interactif et que vous aurez choisi une conception, vous serez prêt à ajouter le code d'accès à la base de données à votre application à l'aide du SDK approprié. Vous continuez à utiliser l'onglet base de données et, pour les fonctions, l'onglet Journaux dans l' interface utilisateur Emulator Suite pour confirmer que le comportement de votre application est correcte.

N'oubliez pas que Local Emulator Suite est un outil de développement local. Les écritures dans vos bases de données de production ne déclencheront pas les fonctions que vous prototypez localement.

Pour passer à l'écriture de votre application dans la base de données, vous devez faire pointer vos classes de test ou la configuration in-app vers l'émulateur Cloud Firestore.

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 - Swift
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);
}
la toile
// 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);
}

Automatisez vos tests avec des scripts personnalisés

Passons maintenant à la dernière étape globale du flux de travail. Une fois que vous avez prototypé votre fonctionnalité dans l'application et qu'elle semble prometteuse sur toutes vos plateformes, vous pouvez passer à la mise en œuvre et aux tests finaux. Pour les tests unitaires et les flux de travail CI, vous pouvez démarrer émulateurs, exécuter des tests scriptés et fermer émulateurs dans un seul appel avec l' exec commande:

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

Explorez les émulateurs individuels plus en profondeur

Maintenant que vous avez vu à quoi ressemble le workflow de base côté client, vous pouvez continuer avec des détails sur les émulateurs individuels de la suite, y compris comment les utiliser pour le développement d'applications côté serveur :

Et ensuite ?

Assurez-vous de lire les sujets liés aux émulateurs spécifiques liés ci-dessus. Puis: