Connectez votre application et commencez le prototypage

Cloud Firestore Realtime Database

Avant de vous lancer avec Firebase Local Emulator Suite, assurez-vous d'avoir créé un projet Firebase, configuré votre environnement de développement, et sélectionné et installé les SDK Firebase pour votre plate-forme en suivant les instructions des rubriques Premiers pas avec Firebase pour votre plate-forme : Apple, Android ou Web.

Prototypage et test

Remarque : Avant de découvrir la suite d'émulateurs locaux Firebase, nous vous recommandons de vous familiariser avec les produits Firebase et le modèle de développement Firebase. Après avoir lu la section Premiers pas pour votre plate-forme, téléchargez une application de démarrage rapide prête à l'emploi sur la plate-forme de votre choix, puis lisez et exécutez le code. L'application de démarrage rapide FriendlyEats est un bon choix (iOS, Android ou Web).

Local Emulator Suite contient plusieurs émulateurs de produits, comme décrit dans Présentation de Firebase Local Emulator Suite. Vous pouvez prototyper et tester avec des émulateurs individuels ainsi qu'avec des combinaisons d'émulateurs, selon vos besoins, en fonction des produits Firebase que vous utilisez en production.

Émulateurs de base de données et Cloud Functions dans le cadre de la suite Local Emulator Suite.

Pour ce sujet, afin de présenter le workflow Local Emulator Suite, supposons que vous travaillez sur une application qui utilise une combinaison classique 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é votre projet Firebase en local, le cycle de développement à l'aide de Local Emulator Suite comprend généralement trois étapes :

1. Créez des prototypes de fonctionnalités de manière interactive avec les émulateurs et Emulator Suite UI.

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 des scripts personnalisés.

Initialiser un projet Firebase en local

Assurez-vous d'installer la CLI ou de la mettre à jour vers la dernière version.

curl -sL firebase.tools | bash

Si vous ne l'avez pas déjà fait, initialisez le répertoire de travail actuel en tant que projet Firebase, en suivant les instructions à l'écran pour spécifier que vous utilisez Cloud Functions et Cloud Firestore ou Realtime Database :

firebase init

Le répertoire de votre projet contient désormais des fichiers de configuration Firebase, un fichier de définition Firebase Security Rules pour la base de données, un répertoire functions contenant le code des fonctions Cloud et d'autres fichiers d'aide.

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.

Emulator Suite UI vous permet d'itérer la conception d'une base de données, d'essayer différents flux de données impliquant des fonctions Cloud, d'évaluer les modifications des règles de sécurité, de consulter les journaux pour confirmer les performances de vos services de backend, etc. Ensuite, si vous souhaitez recommencer, il vous suffit d'effacer votre base de données et de repartir de zéro avec une nouvelle idée de conception.

Tout cela est disponible lorsque vous démarrez Local Emulator Suite avec :

firebase emulators:start

Pour créer le prototype de notre application hypothétique, nous allons configurer et tester une fonction Cloud de base permettant de modifier les entrées de texte d'une base de données, puis créer et remplir cette base de données dans Emulator Suite UI pour la déclencher.

1. Créez une fonction cloud déclenchée par les écritures dans la base de données en modifiant le fichier functions/index.js dans le répertoire de votre projet. Remplacez le contenu du fichier existant par l'extrait de code suivant. Cette fonction écoute les modifications apportées aux documents de la collection messages, convertit le contenu du champ original d'un document en majuscules et stocke le résultat dans le champ uppercase de ce document.

  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});
      });
  

2. Lancez Local Emulator Suite avec firebase emulators:start. Les émulateurs Cloud Functions et de base de données démarrent, configurés automatiquement pour interagir.
3. Affichez l'interface utilisateur dans votre navigateur à l'adresse http://localhost:4000. Le port 4000 est le port par défaut de l'UI, mais vérifiez les messages du terminal générés par la CLI Firebase. Notez l'état des émulateurs disponibles. Dans notre cas, les émulateurs Cloud Functions et Cloud Firestore seront exécutés.
   Afficher la page principale de l'UI
4. Dans l'interface utilisateur, dans l'onglet Firestore > Données, cliquez sur Commencer une collection et suivez les instructions pour créer un document dans une collection messages, avec le nom de champ original et la valeur test. Cela déclenche notre fonction Cloud. Un nouveau champ uppercase s'affiche rapidement, contenant la chaîne "TEST".
   Découvrir comment créer une collection Afficher les mises à jour de la fonction
5. Dans l'onglet Firestore > Requêtes, examinez les requêtes envoyées à votre base de données émulée, y compris toutes les évaluations Firebase Security Rules effectuées dans le cadre de l'exécution de ces requêtes.
6. Consultez l'onglet Journaux pour vérifier que votre fonction n'a pas rencontré d'erreurs lors de la mise à jour de la base de données.

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

Connecter votre application aux émulateurs

Une fois que vous aurez bien progressé dans le prototypage interactif et que vous aurez choisi une conception, vous pourrez ajouter du code d'accès à la base de données à votre application à l'aide du SDK approprié. Vous continuerez à utiliser l'onglet "Database" et, pour les fonctions, l'onglet Logs (Journaux) dans Emulator Suite UI pour vérifier que votre application se comporte correctement.

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 que votre application effectue des écritures dans la base de données, vous devez faire pointer vos classes de test ou votre configuration intégrée vers l'émulateur Cloud Firestore.

Remarque : L'émulateur Cloud Firestore efface le contenu de la base de données lorsqu'il est arrêté. Étant donné que le cache hors connexion du SDK Firestore n'est pas automatiquement vidé, vous pouvez désactiver la persistance locale dans la configuration de votre émulateur pour éviter les écarts entre la base de données émulée et les caches locaux. Dans le SDK Web, la persistance est désactivée par défaut.

Kotlin

// 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
}
EmulatorSuite.kt

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);
EmulatorSuite.java

Swift

let settings = Firestore.firestore().settings
settings.host = "127.0.0.1:8080"
settings.cacheSettings = MemoryCacheSettings()
settings.isSSLEnabled = false
Firestore.firestore().settings = settings
ViewController.swift

Unity

L'hôte par défaut est 127.0.0.1. Si vous utilisez un émulateur Android, vous devez utiliser 10.0.2.2.

FirebaseFirestore db = FirebaseFirestore.DefaultInstance;
// Connects to the Firestore Emulator running on port 8080
db.Settings.Host = "127.0.0.1:8080";
db.Settings.SslEnabled = false;

Web

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

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

Web

En savoir plus sur l'API Web modulaire compatible avec le tree shaking et ses avantages par rapport à l'API à espace de noms

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

Automatisez vos tests avec des scripts personnalisés

Passons maintenant à la dernière étape du workflow global. Une fois que vous avez créé un prototype de votre fonctionnalité dans l'application et qu'il semble prometteur sur toutes vos plates-formes, vous pouvez passer à l'implémentation et aux tests finaux. Pour les tests unitaires et les workflows d'intégration continue, vous pouvez démarrer des émulateurs, exécuter des tests scriptés et arrêter les émulateurs en un seul appel à l'aide de la commande exec :

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

Explorer les émulateurs individuels plus en détail

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

• Ajouter l'émulateur Authentication à vos workflows de prototypage
• En savoir plus sur les fonctionnalités de l'émulateur Realtime Database
• En savoir plus sur les fonctionnalités de l'émulateur Cloud Storage for Firebase
• En savoir plus sur les fonctionnalités de l'émulateur Cloud Firestore
• Connecter votre application à l'émulateur Cloud Functions
• Évaluer Firebase Extensions tout en minimisant les coûts de facturation avec l'émulateur Extensions

Et maintenant ?

Veillez à lire les rubriques liées aux émulateurs spécifiques indiqués ci-dessus. Puis :

• Pour obtenir une sélection de vidéos et d'exemples détaillés, suivez la playlist de formation sur les émulateurs Firebase.
• Découvrez des cas d'utilisation avancés impliquant le test des règles de sécurité et le SDK Firebase Test : Tester les règles de sécurité (Cloud Firestore), Tester les règles de sécurité (Realtime Database) et Tester les règles de sécurité (Cloud Storage for Firebase).