Collega l'app e inizia a creare prototipi


Prima di iniziare con Firebase Local Emulator Suite, assicurati di aver creato un progetto Firebase, configurato l'ambiente di sviluppo e selezionato e installato gli SDK Firebase per la tua piattaforma in base agli argomenti Inizia a utilizzare Firebase per la tua piattaforma: Apple, Android o Web.

Prototipazione e test

Local Emulator Suite contiene diversi emulatori di prodotti, come descritto in Introduzione a Firebase Local Emulator Suite. Puoi creare prototipi e testare con singoli emulatori o combinazioni di emulatori, a seconda dei casi, in base ai prodotti Firebase che utilizzi in produzione.

Interazione tra il database Firebase e gli emulatori di funzioni
Database e emulatori Cloud Functions nell'ambito del Local Emulator Suite completo.

Per questo argomento, per introdurre il flusso di lavoro Local Emulator Suite, supponiamo di lavorare a un'app che utilizza una combinazione tipica di prodotti: un database Firebase e funzioni cloud attivate da operazioni su quel database.

Dopo aver inizializzato localmente il progetto Firebase, il ciclo di sviluppo utilizzando Local Emulator Suite in genere prevede tre passaggi:

  1. Crea un prototipo delle funzionalità in modo interattivo con gli emulatori e Emulator Suite UI.

  2. Se utilizzi un emulatore di database o l'emulatore Cloud Functions, esegui un passaggio una tantum per connettere l'app agli emulatori.

  3. Automatizza i test con gli emulatori e gli script personalizzati.

Inizializzare un progetto Firebase localmente

Assicurati di installare l'interfaccia a riga di comando o di eseguire l'aggiornamento alla versione più recente.

curl -sL firebase.tools | bash

Se non l'hai ancora fatto, inizializza la directory di lavoro corrente come progetto Firebase, seguendo le istruzioni sullo schermo per specificare che utilizzi Cloud Functions e Cloud Firestore o Realtime Database:

firebase init

La directory del progetto ora conterrà i file di configurazione di Firebase, un Firebase Security Rules file di definizione per il database, una directory functions contenente il codice delle funzioni cloud e altri file di supporto.

Creare un prototipo in modo interattivo

Local Emulator Suite è progettato per consentirti di realizzare rapidamente prototipi di nuove funzionalità. L'interfaccia utente integrata della suite è uno degli strumenti di prototipazione più utili. È un po' come avere la console Firebase in esecuzione in locale.

Con Emulator Suite UI, puoi eseguire l'iterazione del design di un database, provare diversi flussi di dati che coinvolgono le funzioni cloud, valutare le modifiche alle regole di sicurezza, controllare i log per verificare il rendimento dei servizi di backend e altro ancora. Poi, se vuoi ricominciare da capo, cancella il database e inizia da capo con una nuova idea di design.

Tutto è disponibile quando avvii Local Emulator Suite con:

firebase emulators:start

Per creare il prototipo della nostra app ipotetica, impostiamo e testiamo una funzione cloud di base per modificare le voci di testo in un database e creiamo e completiamo il database nel Emulator Suite UI per attivarlo.

  1. Crea una funzione cloud attivata dalle scritture del database modificando il functions/index.js file nella directory del progetto. Sostituisci i contenuti del file esistente con lo snippet seguente. Questa funzione monitora le modifiche ai documenti nella raccolta messages, converte i contenuti del campo original di un documento in lettere maiuscole e memorizza il risultato nel campo uppercase del documento.
    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});
      });
  2. Avvia Local Emulator Suite con firebase emulators:start. Gli emulatori Cloud Functions e del database vengono avviati e configurati automaticamente per l'interoperabilità.
  3. Visualizza l'interfaccia utente nel browser all'indirizzo http://localhost:4000. La porta 4000 è quella predefinita per l'interfaccia utente, ma controlla i messaggi del terminale visualizzati dall'interfaccia a riga di comando Firebase. Prendi nota dello stato degli emulatori disponibili. Nel nostro caso, gli emulatori Cloud Functions e Cloud Firestore saranno in esecuzione.
    La mia immagine
  4. Nell'interfaccia utente, nella scheda Firestore > Dati, fai clic su Avvia raccolta e segui le istruzioni per creare un nuovo documento in una messages raccolta, con il nome del campo original e il valore test. Questo attiva la nostra funzione Cloud Functions. Nota che a breve viene visualizzato un nuovo uppercase campo compilato con la stringa "TEST".
    La mia immagine La mia immagine
  5. Nella scheda Firestore > Richieste, esamina le richieste effettuate al database simulato, incluse tutte le valutazioni Firebase Security Rules eseguite nell'ambito dell'evasione di queste richieste.
  6. Controlla la scheda Log per verificare che la funzione non abbia riscontrato errori durante l'aggiornamento del database.

Puoi eseguire facilmente l'iterazione tra il codice della funzione Cloud Functions e le modifiche interattive del database fino a quando non ottieni il flusso di dati desiderato, senza dover toccare il codice di accesso al database in-app, compilare di nuovo ed eseguire nuovamente le suite di test.

Collega l'app agli emulatori

Quando avrai fatto buoni progressi con la prototipazione interattiva e avrai scelto un design, potrai aggiungere il codice di accesso al database alla tua app utilizzando l'SDK appropriato. Continuerai a utilizzare la scheda del database e, per le funzioni, la scheda Log in Emulator Suite UI per verificare che il comportamento dell'app sia corretto.

Ricorda che Local Emulator Suite è uno strumento di sviluppo locale. Le scritture nei database di produzione non attivano le funzioni che stai prototipando localmente.

Per fare in modo che l'app effettui scritture nel database, devi indirizzare le classi di test o la configurazione in-app all'emulatore Cloud Firestore.

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

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

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

Automatizzare i test con script personalizzati

Ora è il momento dell'ultimo passaggio del flusso di lavoro complessivo. Una volta che hai creato un prototipo di funzionalità in-app e sembrerà promettente su tutte le tue piattaforme, potrai passare all'implementazione e ai test finali. Per i flussi di lavoro di test delle unità e CI, puoi avviare gli emulatori, eseguire test basati su script e arrestare gli emulatori in una singola chiamata con il comando exec:

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

Esplora i singoli emulatori in modo più approfondito

Ora che hai visto l'aspetto del flusso di lavoro di base lato client, puoi continuare con i dettagli sui singoli emulatori della suite, incluso come utilizzarli per lo sviluppo di app lato server:

Che cosa succede ora?

Assicurati di leggere gli argomenti relativi a emulatori specifici linkati sopra. Quindi: