Collega l'app e inizia a creare prototipi


Prima di iniziare a utilizzare 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.

Prototipo e test

Local Emulator Suite contiene diversi emulatori di prodotti, come descritto in Introduzione a Firebase Local Emulator Suite. Puoi prototipare e testare con singoli emulatori e combinazioni di emulatori, a seconda delle tue esigenze, in base ai prodotti Firebase che utilizzi in produzione.

Interazione tra gli emulatori di funzioni e database Firebase
Database ed emulatori Cloud Functions come parte del Local Emulator Suite completo.

Per questo argomento, per introdurre il flusso di lavoro Local Emulator Suite, supponiamo di lavorare su 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. Prototipa le 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 la tua app agli emulatori.

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

Inizializzare localmente un progetto Firebase

Assicurati di installare la CLI o di eseguire l'aggiornamento all'ultima versione.

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 file di definizione Firebase Security Rules per il database, una directory functions contenente il codice delle funzioni cloud e altri file di supporto.

Prototipare in modo interattivo

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

Utilizzando Emulator Suite UI, puoi iterare la progettazione 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, svuota il database e riparti da zero con una nuova idea di design.

Tutto è disponibile quando avvii Local Emulator Suite con:

firebase emulators:start

Per prototipare la nostra app ipotetica, configuriamo e testiamo una funzione cloud di base per modificare le voci di testo in un database e creiamo e popoliamo questo database in Emulator Suite UI per attivarlo.

  1. Crea una funzione cloud attivata dalle scritture del database modificando il file functions/index.js nella directory del progetto. Sostituisci i contenuti del file esistente con il seguente snippet. Questa funzione ascolta le modifiche ai nodi nella gerarchia messages, converte i contenuti della proprietà original del nodo in maiuscolo e memorizza il risultato nella proprietà uppercase del nodo.
    2.   const functions = require('firebase-functions/v1');

  exports.makeUppercase = functions.database.ref('/messages/{pushId}/original')
      .onCreate((snapshot, context) => {
        const original = snapshot.val();
        console.log('Uppercasing', context.params.pushId, original);
        const uppercase = original.toUpperCase();
        return snapshot.ref.parent.child('uppercase').set(uppercase);
      });
  2. Avvia Local Emulator Suite con firebase emulators:start. Vengono avviati gli emulatori Cloud Functions e di database, configurati automaticamente per l'interoperabilità.
  3. Visualizza l'interfaccia utente nel browser all'indirizzo http://localhost:4000. La porta 4000 è quella predefinita per la UI, ma controlla l'output dei messaggi del terminale dell'interfaccia a riga di comando Firebase. Prendi nota dello stato degli emulatori disponibili. Nel nostro caso, verranno eseguiti gli emulatori Cloud Functions e Realtime Database.
    Con la mia immagine
  4. Nell'interfaccia utente, nella scheda Realtime Database, utilizza i controlli dell'editor dei contenuti del database per creare un insieme di nodi con un nodo messages contenente un nodo message1, a sua volta contenente un nodo con la chiave impostata su original e il valore impostato su test. Questo attiva la nostra funzione cloud. Nota che a breve viene visualizzata una nuova proprietà uppercase con valore TEST.
    Con la mia immagine Con la mia immagine
  5. Controlla la scheda Log per verificare che la funzione non abbia generato errori durante l'aggiornamento del database.

Puoi iterare facilmente tra il codice della funzione cloud e le modifiche interattive al database finché non ottieni il flusso di dati che stai cercando, senza toccare il codice di accesso al database in-app, ricompilare ed eseguire nuovamente le suite di test.

Connettere 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 della tua app sia corretto.

Ricorda che Local Emulator Suite è uno strumento di sviluppo locale. Le scritture nei database di produzione non attiveranno le funzioni di cui stai creando il prototipo localmente.

Per fare in modo che la tua app esegua scritture nel database, devi indirizzare le classi di test o la configurazione in-app all'emulatore Realtime Database.

Kotlin
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
val database = Firebase.database
database.useEmulator("10.0.2.2", 9000)
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.
FirebaseDatabase database = FirebaseDatabase.getInstance();
database.useEmulator("10.0.2.2", 9000);
EmulatorSuite.java
Swift
    // In almost all cases the ns (namespace) is your project ID.
let db = Database.database(url:"http://127.0.0.1:9000?ns=YOUR_DATABASE_NAMESPACE")
ViewController.swift

Web

import { getDatabase, connectDatabaseEmulator } from "firebase/database";

const db = getDatabase();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  connectDatabaseEmulator(db, "127.0.0.1", 9000);
} 
rtdb_emulator_connect.js

Web

var db = firebase.database();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  db.useEmulator("127.0.0.1", 9000);
} 
emulator-suite.js

Automatizzare i test con script personalizzati

Ora passiamo all'ultimo passaggio del workflow complessivo. Una volta creato il prototipo della funzionalità in-app e verificato che funzioni correttamente su tutte le piattaforme, puoi passare all'implementazione e al test finali. Per i test delle unità e i flussi di lavoro CI, puoi avviare gli emulatori, eseguire test basati su script e arrestare gli emulatori con una singola chiamata con il comando exec:

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

Esplorare 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 agli emulatori specifici collegati sopra. Quindi: