Aggiungi rapidamente nuove funzionalità alla tua app Web con le estensioni Firebase

1. Introduzione

Obiettivi

In questo codelab aggiungerai funzionalità a un'app del marketplace online con l'aiuto di Firebase Extensions . Attraverso questo codelab capirai come le estensioni possono aiutarti a dedicare meno tempo alle attività di sviluppo e gestione delle app.

Cosa costruirai

In questo codelab aggiungerai le seguenti funzionalità a un'app Web del marketplace online:

• Carica le immagini più velocemente per aumentare la fidelizzazione degli utenti
• Limita le voci nel tuo database per migliorare le prestazioni e ridurre la bolletta
• Implementare l'eliminazione automatica dei vecchi dati utente per migliorare la protezione dei dati utente

Cosa imparerai

• Come scoprire le estensioni per i casi d'uso comuni
• Come installare e configurare un'estensione nel tuo progetto
• Come mantenere (monitorare, aggiornare e disinstallare) le estensioni nel tuo progetto

Questo codelab è incentrato sulle estensioni Firebase. Per informazioni dettagliate su altri prodotti Firebase menzionati in questo codelab, fai riferimento alla documentazione di Firebase e ad altri codelab .

Di cosa avrai bisogno

• Un computer con un browser Web moderno installato (si consiglia Chrome)
• Un account Google

2. Crea e configura un progetto Firebase

Crea un progetto Firebase

1. Nella console Firebase , fai clic su Aggiungi progetto e assegna al progetto Firebase il nome FriendlyMarket .
2. Fai clic sulle opzioni di creazione del progetto. Accetta i termini di Firebase. Salta la configurazione di Google Analytics perché non utilizzerai Analytics in questa app.
3. Attendi il provisioning del progetto, quindi fai clic su Continua .

L'applicazione che creerai utilizza alcuni prodotti Firebase disponibili per le app Web:

• Autenticazione Firebase per identificare facilmente i tuoi utenti
• Firebase Realtime Database per salvare i dati strutturati nel cloud e ricevere notifiche istantanee quando i dati vengono aggiornati
• Cloud Storage per Firebase per salvare le immagini nel cloud

Ora abiliterai e configurerai questi prodotti Firebase utilizzando la console Firebase.

Abilita l'accesso tramite posta elettronica

Sebbene l'autenticazione non sia l'obiettivo di questo codelab, è importante avere una qualche forma di autenticazione nella tua app, per identificare in modo univoco tutti coloro che la utilizzano. Utilizzerai l'accesso tramite posta elettronica.

1. Nella console Firebase, fai clic su Sviluppo nel pannello di sinistra.
2. Fare clic su Autenticazione e quindi sulla scheda Metodo di accesso (oppure fare clic qui per passare direttamente alla scheda Metodo di accesso ).
3. Fare clic su E-mail/Password nell'elenco Provider di accesso , impostare l'interruttore Abilita sulla posizione attiva, quindi fare clic su Salva .

Abilita database in tempo reale

L'app utilizza Firebase Realtime Database per salvare gli articoli in vendita.

1. Nella sezione Sviluppo nel pannello di sinistra della console Firebase, fai clic su Database .
2. Scorri la pagina verso il basso oltre il riquadro Cloud Firestore e fai clic su Crea database nel riquadro Realtime Database .

3. Selezionare Avvia in modalità bloccata , quindi fare clic su Abilita .

Imposta le regole di sicurezza

Ora imposterai le regole di sicurezza necessarie per questa app. Queste sono alcune regole di esempio di base per proteggere la tua app. Queste regole consentono a chiunque di visualizzare gli articoli in vendita, ma consentono solo agli utenti che hanno effettuato l'accesso di eseguire altre operazioni di lettura e scrittura. Non preoccuparti delle specificità di queste regole; li copierai e incollerai semplicemente per far funzionare la tua app.

1. Nella parte superiore della dashboard di Realtime Database, fai clic sulla scheda Regole .

2. Copia e incolla il seguente set di regole nel campo regole nella scheda Regole :

{
  "rules": {
    ".read": false,
    ".write": false,
      "drafts": {
        ".indexOn": "seller",
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
    "sellers": {
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
      "forsale": {
        ".read": true,
        ".write": "auth.uid !== null"
      }
  }
}

3. Fare clic su Pubblica .

Abilita archiviazione cloud

L'app utilizza Cloud Storage for Firebase per salvare le immagini degli articoli in vendita.

1. Nella sezione Sviluppo nel pannello di sinistra della console Firebase, fai clic su Archiviazione .
2. Fare clic su Inizia .

3. Accetta le impostazioni predefinite per creare il bucket di archiviazione predefinito (fai clic su Avanti , mantieni la posizione predefinita e fai clic su Fine ).

Ora imposterai le regole di sicurezza necessarie per questa app. Queste regole consentono solo agli utenti autenticati di pubblicare nuove immagini, ma consentono a chiunque di visualizzare l'immagine per un elemento elencato.

1. Nella parte superiore del dashboard Archiviazione , fai clic sulla scheda Regole .

2. Copia e incolla il seguente set di regole nel campo regole nella scheda Regole :

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
    
    match /friendlymarket/{ImageId} {
      allow read;
      allow write: if request.auth != null;
    }
    
  }
}

3. Fare clic su Pubblica .

3. Eseguire l'app di esempio

Biforca il progetto StackBlitz

In questo codelab, crei e distribuisci un'app utilizzando StackBlitz , un editor online in cui sono integrati diversi flussi di lavoro Firebase. Stackblitz non richiede l'installazione di software o un account StackBlitz speciale.

StackBlitz ti consente di condividere progetti con altri. Altre persone che hanno l'URL del tuo progetto StackBlitz possono vedere il tuo codice e creare un fork del tuo progetto, ma non possono modificare il tuo progetto StackBlitz.

1. Vai a questo URL per il codice iniziale: https://stackblitz.com/edit/friendlymarket-codelab .
2. Nella parte superiore della pagina StackBlitz, fai clic su Fork .

Ora hai una copia del codice iniziale come progetto StackBlitz. Poiché non hai effettuato l'accesso, il tuo "account" si chiama @anonymous , ma va bene. Il progetto ha un nome univoco, insieme a un URL univoco. Tutti i tuoi file e le modifiche vengono salvati in questo progetto StackBlitz.

Aggiungi un'app Web Firebase al progetto

1. In StackBlitz, visualizza il tuo file src/firebase-config.js . Qui è dove aggiungerai l'oggetto di configurazione Firebase.
2. Tornando alla console Firebase, vai alla pagina di panoramica del tuo progetto facendo clic su Panoramica del progetto in alto a sinistra.
3. Al centro della pagina di panoramica del tuo progetto, fai clic sull'icona web per creare una nuova app Web Firebase.
4. Registra l'app con il nickname FriendlyMarket Codelab .
5. Per questo codelab, non selezionare la casella accanto a Configura anche hosting Firebase per questa app . Utilizzerai invece il riquadro di anteprima StackBlitz.
6. Fai clic su Registra app .
7. Copia l'oggetto di configurazione Firebase della tua app negli appunti. Non copiare i tag <script> . Nota: se è necessario trovare la configurazione in un secondo momento, seguire le istruzioni qui .

8. Fai clic su Continua sulla console .

Aggiungi la configurazione del tuo progetto alla tua app:

1. Tornando a StackBlitz, vai al file src/firebase-config.js .
2. Incolla lo snippet di configurazione nel file. Dopo averlo fatto, dovrebbe assomigliare a questo (ma con i valori del tuo progetto nell'oggetto di configurazione):

Qual è il punto di partenza di questa app?

Dai un'occhiata all'anteprima interattiva sul lato destro della schermata StackBlitz:

Questo codelab ti avvia con il codice per un'app di marketplace di base. Qualsiasi utente può visualizzare un elenco di articoli in vendita e fare clic su un collegamento per visualizzare la pagina dei dettagli di un articolo. Se un utente ha effettuato l'accesso, vedrà le informazioni di contatto del venditore in modo che possa negoziare un prezzo e acquistare l'oggetto.

Prova l'app:

1. Accedi con il pulsante nella parte superiore della schermata principale. È possibile utilizzare un indirizzo email, un nome e una password falsi.
2. Fai clic sul pulsante Vendi qualcosa nell'angolo in basso a destra per creare un'inserzione.
3. Per Titolo , inserisci Xylophone .
4. Per il prezzo richiesto , inserisci 50 .
5. Per Descrizione articolo , inserisci quanto segue: This high quality xylophone can be used to play music.
6. Scarica questa immagine di uno xilofono sul tuo computer e caricala con il pulsante IMMAGINE DEL TUO ARTICOLO .

file_download Scarica immagine

7. Dopo aver compilato tutti i campi e caricato un'immagine, fai clic su Pubblica .
8. Trova la tua nuova inserzione. Fai clic sull'articolo per visualizzarne la schermata dei dettagli, quindi espandi il pannello delle informazioni di contatto del venditore .
9. Torna alla console Firebase. Nella dashboard del database , ora vedrai una voce per l'articolo che hai pubblicato nel nodo forsale . Nella dashboard Archiviazione troverai anche l'immagine che hai caricato nel percorso friendlymarket .

4. Trova e installa un'estensione

Il problema

Dopo aver effettuato alcune ricerche sugli utenti della tua app, scopri che la maggior parte degli utenti visita il tuo sito dal proprio smartphone, non dal desktop. Tuttavia, le tue statistiche mostrano anche che gli utenti mobili tendono ad abbandonare il tuo sito ("abbandono") dopo solo pochi secondi.

Curioso, provi il tuo sito con velocità di connessione mobile. (Scopri come farlo qui .) Scoprirai che le immagini impiegano molto tempo per essere caricate e non vengono affatto memorizzate nella cache del browser. Questo lungo tempo di caricamento è necessario per ogni visualizzazione di pagina!

La soluzione

Dopo aver letto come ottimizzare le immagini , decidi di intraprendere due passaggi per migliorare le prestazioni di caricamento delle immagini:

• Comprimi le immagini. Anche i telefoni cellulari scattano immagini con una risoluzione molto più elevata di quella necessaria per le esigenze di questa app. Ridurre le dimensioni del file accelererà i tempi di caricamento senza un notevole calo della risoluzione nell'app.
• Memorizzazione nella cache . Per impostazione predefinita, gli oggetti Cloud Storage hanno intestazioni che indicano ai browser di non memorizzare nella cache le immagini, il che significa che il browser di un utente scaricherà nuovamente la stessa immagine più e più volte! Fortunatamente, puoi modificare queste intestazioni per consentire la memorizzazione nella cache. Sia l' SDK Cloud Storage lato client che l' SDK Admin Firebase ti consentono di impostare queste intestazioni.

Per comprimere le immagini, dovrai limitare la qualità del caricamento o disporre di un processo lato server che ridimensioni le immagini. Consideriamo i compromessi:

• Dalla parte del cliente . Per un processo lato client, puoi semplicemente limitare la dimensione del file per le immagini caricate. Ciò significa che non è necessario scrivere o mantenere alcuna nuova logica del server. Tuttavia, ciò significa anche che i tuoi venditori devono capire come ridimensionare le proprie immagini, il che rappresenta una barriera dolorosa e poco intuitiva alla creazione di una nuova inserzione.
• Lato server . Se utilizzi Cloud Functions for Firebase, puoi attivare una funzione che ridimensiona automaticamente un'immagine al momento del caricamento. Ciò significa che i venditori possono caricare qualsiasi dimensione di immagine preferiscano (senza lavoro aggiuntivo per loro) e la tua funzione di backend può ridimensionare l'immagine senza problemi. C'è anche un campione disponibile per questa funzione!

Sembra che il lato server sia la strada da percorrere. Ma questa idea prevede comunque la clonazione dell'esempio , il rispetto delle relative istruzioni di configurazione e quindi la distribuzione della funzione con la CLI di Firebase. Il ridimensionamento delle immagini sembra un caso d'uso così comune. Non c'è una soluzione più semplice?

Una soluzione più semplice

Sei fortunato. Esiste una soluzione più semplice: le estensioni Firebase! Controlliamo il catalogo delle estensioni disponibili sul sito Web Firebase .

Guarda quello! C'è un'estensione chiamata "Ridimensiona immagini". Sembra promettente.

Usiamo questa estensione nella tua app!

Installa un'estensione

1. Fare clic su Visualizza dettagli per visualizzare ulteriori informazioni su questa estensione. In Cosa puoi configurare , l'estensione ti consente di impostare le dimensioni a cui desideri ridimensionare e puoi anche impostare l'intestazione della cache. Perfetto!
2. Fai clic sul pulsante Installa nella console nella pagina dei dettagli dell'estensione . Verrai indirizzato a una pagina della console Firebase che elenca tutti i tuoi progetti.
3. Scegli il progetto FriendlyMarket che hai creato per questo codelab.
4. Segui le istruzioni visualizzate sullo schermo fino a raggiungere il passaggio Configura estensione . Le istruzioni mostreranno un riepilogo di base dell'estensione, nonché tutte le risorse che creerà e i ruoli di accesso richiesti.
5. Nel campo ** Cache-Control **intestazione per le immagini ridimensionate , inserisci quanto segue:

public, max-age=31536000

6. Lasciare gli altri parametri ai valori predefiniti.
7. Fai clic su Installa estensione .

Mentre aspetti il ​​completamento dell'installazione...

Installazione con l'interfaccia della riga di comando di Firebase

Se ti senti più a tuo agio con gli strumenti da riga di comando, le estensioni possono essere installate e gestite anche utilizzando la CLI di Firebase! Basta usare il comando firebase ext , disponibile nell'ultima versione della CLI. Ulteriori informazioni possono essere trovate qui .

(Facoltativo) Ulteriori informazioni sulle intestazioni Cache-Control

Il valore dell'intestazione Cache-Control public, max-age=31536000 significa che l'immagine verrà memorizzata nella cache per un massimo di 1 anno. Per ulteriori informazioni sull'intestazione Cache-Control, consulta questa documentazione .

Aggiorna il codice cliente

L'estensione che hai installato scrive un'immagine ridimensionata nello stesso bucket dell'immagine originale. L'immagine ridimensionata presenta le dimensioni configurate aggiunte al nome del file. Pertanto, se il percorso del file originale assomigliava a friendlymarket/user1234-car.png , il percorso del file dell'immagine ridimensionata sarà simile a friendlymarket/user1234-car_200x200.png .

Aggiorniamo l'app in modo che recuperi le immagini ridimensionate anziché le immagini a dimensione intera.

1. In StackBlitz, apri il file src/firebase-refs.js .
2. Sostituisci la funzione getImageRef esistente con il codice seguente per creare un riferimento per l'immagine ridimensionata:

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

Provalo

Poiché questa estensione controlla i caricamenti di nuove immagini, l'immagine esistente non verrà ridimensionata.

Crea un nuovo post per vedere l'estensione in azione:

1. Fai clic su Friendly Market nella barra superiore della tua app per accedere alla schermata principale.
2. Fai clic sul pulsante Vendi qualcosa nell'angolo in basso a destra dell'app per creare un'inserzione.
3. Per Titolo , inserisci Coffee
4. Per il prezzo richiesto , inserire 1
5. Per Descrizione articolo , inserisci quanto segue: Selling one cafe latte. It has foam art in the shape of a bear .
6. Scarica questa immagine di una tazza di caffè sul tuo computer e caricala con il pulsante IMMAGINE DEL TUO ARTICOLO . file_download Scarica immagine
7. Dopo aver compilato tutti i campi e caricato un'immagine, fai clic su Pubblica . Vedrai apparire l'elenco dei caffè sotto lo xilofono!
8. Nella dashboard Funzioni della console Firebase, fai clic sulla scheda Log . Dovresti vedere i log della funzione che mostrano che è stata eseguita.

9. Vai al dashboard Archiviazione per vedere sia l'immagine originale del caffè che una versione ridimensionata nel percorso friendlymarket .
10. Nel riquadro di anteprima di StackBlitz, ricarica la schermata iniziale della tua app un paio di volte. Dovresti notare che l'immagine del caffè si carica molto più velocemente dell'immagine dello xilofono.

L'immagine viene caricata più velocemente al caricamento della prima pagina perché è più piccola e all'aggiornamento successivo della pagina viene caricata dalla cache del browser invece di attivare una richiesta di rete.

5. Riconfigurare un interno

Il problema

La tua app salva automaticamente le bozze dell'inserzione di un venditore. Ai tuoi utenti piace questa funzionalità, ma le tue statistiche sono un po' preoccupanti. I tuoi rapporti dicono che solo circa il 10% delle bozze viene effettivamente pubblicato e il restante 90% occupa solo spazio nel tuo database.

La soluzione

Dopo alcuni calcoli approssimativi, ti rendi conto che devi salvare solo circa cinque bozze alla volta.

Ricordi quel catalogo di estensioni Firebase? Forse esiste già una soluzione per questa situazione. Installiamo l'estensione Limit Child Nodes per mantenere automaticamente il numero di bozze salvate su cinque o meno. L'estensione eliminerà la bozza più vecchia ogni volta che ne verrà aggiunta una nuova.

1. Fai clic sul pulsante Installa nella pagina dei dettagli dell'estensione .
2. Scegli il progetto Firebase che stai utilizzando per la tua app Web del marketplace.
3. Segui le istruzioni visualizzate sullo schermo fino a raggiungere il passaggio Configura estensione .
4. Per il percorso del database in tempo reale , immettere drafts . Questo è il percorso nel database in cui vengono salvate le bozze.
5. Per Conteggio massimo di nodi da conservare , immettere 5 . Ciò significa che verranno salvate cinque bozze per l'inserzione di ciascun articolo e, se ne viene aggiunta un'altra, la bozza più vecchia verrà automaticamente eliminata.
6. Fai clic su Installa estensione .

Mentre aspetti che l'installazione venga completata...

Estensioni di monitoraggio

Quando installi un'estensione, il processo crea diverse funzioni. Potresti voler controllare la frequenza con cui queste funzioni vengono eseguite o visualizzare i registri e i tassi di errore. Per informazioni dettagliate su come monitorare la tua estensione, vedi Gestire le estensioni installate . Segui le indicazioni nella documentazione per visualizzare le funzioni create dall'estensione Resize Images nel passaggio precedente.

Disinstallazione delle estensioni

Per rimuovere un'estensione dal tuo progetto, potresti essere tentato di eliminare le singole funzioni create da un'estensione, ma ciò può portare a comportamenti imprevisti, poiché un'estensione può creare più funzioni. Scopri come disinstallare un'estensione nella documentazione.

La disinstallazione elimina tutte le risorse (come le funzioni per l'estensione) e l'account di servizio creato per quell'istanza dell'estensione. Tuttavia, eventuali artefatti creati dall'estensione (come le immagini ridimensionate) rimarranno nel tuo progetto dopo aver disinstallato l'estensione.

Installazione di più copie di un'estensione in un singolo progetto

Non sei limitato a installare una singola istanza di una determinata estensione in un progetto. Se volessi limitare le voci in un altro percorso, potresti installare un'altra istanza di questa estensione. Tuttavia, ai fini di questo codelab, installerai l'estensione solo una volta.

Guardalo in azione

1. Assicurati di aver effettuato l'accesso con l'account utilizzato per pubblicare lo xilofono o il latte
2. Genera alcune bozze:
3. Fai clic sul pulsante Vendi qualcosa nell'angolo in basso a destra dell'app
4. Modifica il titolo in "Bozza 1".
5. Scorri verso il basso fino alla sezione Bozze e visualizza il numero di bozze. Dovrebbero essercene almeno due.
6. Fai clic sul pulsante MERCATO AMICO nella barra dell'app in alto. In questo modo avrai una bozza salvata ma non dovrai pubblicarla.
7. Ripetere per "Bozza 2", "Bozza 3" e così via fino a "Bozza 6".
8. Quando crei "Bozza 6", nota che "Bozza 1 scompare dalla sezione Bozze .
9. Come hai fatto con l'estensione Resize Images, puoi controllare i log delle funzioni per vedere quali funzioni sono state attivate.

Spiacenti, il limite delle bozze da conservare è troppo piccolo

Il tuo team di assistenza clienti ti contatta e ti informa che alcuni dei tuoi venditori più prolifici si lamentano del fatto che le loro bozze vengono eliminate prima di poterle pubblicare. Controlli i tuoi calcoli con il tuo compagno di squadra e ti rendi conto che i tuoi calcoli erano sbagliati di un fattore 10.000!

Come puoi risolvere questo problema? Riconfiguriamo l'estensione installata!

1. Nel riquadro sinistro della console Firebase, fai clic su Estensioni .
2. Sulla scheda dell'estensione installata, fai clic su Gestisci .
3. Nell'angolo in alto a destra, fai clic su Riconfigura estensione .
4. Modificare il numero massimo di nodi da mantenere su 50000 .
5. Fare clic su Salva .

E questo è tutto ciò che devi fare! Nel tempo necessario per l'aggiornamento dell'estensione, puoi parlare con il tuo team di supporto e fargli sapere che è già stata distribuita una correzione.

6. Elimina automaticamente i dati utente

Il problema

Il tuo team di assistenza clienti ti ha contattato di nuovo. I venditori che hanno cancellato i loro account continuano a ricevere email da altri utenti e sono arrabbiati! Questi venditori si aspettavano che i loro indirizzi email venissero cancellati dai tuoi sistemi quando cancellarono i loro account.

Per ora, il supporto ha eliminato manualmente i dati di ciascun utente, ma deve esserci un modo migliore! Ci pensi e prendi in considerazione la possibilità di scrivere il tuo lavoro batch che viene eseguito periodicamente e cancella gli indirizzi e-mail dagli account eliminati. Ma l’eliminazione dei dati utente sembra un problema piuttosto comune. Forse le estensioni Firebase possono aiutare a risolvere anche questo problema.

La soluzione

Configurerai l'estensione Elimina dati utente per eliminare automaticamente il nodo users/uid nel database quando un utente elimina il proprio account.

1. Fai clic sul pulsante Installa nella pagina dei dettagli dell'estensione .
2. Scegli il progetto Firebase che stai utilizzando per la tua app Web del marketplace.
3. Segui le istruzioni visualizzate sullo schermo fino a raggiungere il passaggio Configura estensione .
4. Per i percorsi del database in tempo reale , inserisci sellers/{UID} . La parte sellers è il nodo i cui figli contengono gli indirizzi email degli utenti e {UID} è un carattere jolly. Con questa configurazione, l'estensione saprà che quando l'utente con l'UID 1234 elimina il proprio account, l'estensione dovrebbe eliminare sellers/1234 dal database.
5. Fai clic su Installa estensione .

Mentre aspetti che l'installazione venga completata...

Parliamo di personalizzazione

In questo codelab hai visto che le estensioni Firebase possono aiutarti a risolvere casi d'uso comuni e che le estensioni sono configurabili per soddisfare le esigenze della tua app.

Tuttavia, le estensioni non possono risolvere tutti i problemi e il problema della cancellazione dei dati utente ne è un buon esempio. Sebbene l'estensione Elimina dati utente risolva l'attuale reclamo secondo cui le e-mail vengono ancora esposte dopo che un utente elimina il proprio account, l'estensione non eliminerà tutto. Ad esempio, l'elenco degli articoli è ancora disponibile e anche tutte le immagini in Cloud Storage rimarranno. L'estensione Elimina dati utente ci consente di configurare un percorso Cloud Storage da eliminare, ma poiché gli utenti possono caricare molti file diversi con molti nomi diversi, non sarai in grado di configurare questa estensione per eliminare automaticamente questi elementi. Per situazioni come questa, Cloud Functions for Firebase potrebbe essere la soluzione migliore per consentirti di scrivere codice specifico per il modello dati della tua app.

Estensioni e fatturazione

L'utilizzo delle estensioni Firebase è gratuito (ti vengono addebitate solo le risorse sottostanti che utilizzi), ma alcune delle risorse sottostanti necessarie a un'estensione potrebbero richiedere la fatturazione. Questo codelab è stato progettato per essere completato senza un account di fatturazione. Tuttavia, l'impostazione di un piano Flame o Blaze sblocca molte estensioni Firebase davvero interessanti.

Ad esempio, puoi abbreviare gli URL , attivare le email , esportare raccolte in BigQuery e altro ancora! Scopri il catalogo completo delle estensioni qui .

Se c'è un'estensione che vorresti avere, ma non è disponibile al momento, ci farebbe piacere saperlo! Invia una richiesta di funzionalità al supporto Firebase per suggerire una nuova estensione.

Guardalo in azione

Una volta completata l'installazione della tua estensione, elimina un utente e guarda cosa succede:

1. Nella console Firebase, vai alla dashboard del database Realtime .
2. Espandi il nodo sellers .
3. Le informazioni di ciascun venditore vengono digitate sul relativo UID utente. Scegli l'UID di un utente.
4. Nella console Firebase, vai alla dashboard di autenticazione e trova l'UID dell'utente.
5. Espandi il menu a destra dell'UID e seleziona Elimina account .

6. Torna alla dashboard del Realtime Database . Le informazioni del venditore scompariranno!

7. Congratulazioni!

Anche se non hai scritto molto codice in questo codelab, hai aggiunto funzionalità importanti alla tua app del marketplace.

Hai imparato come individuare, configurare, installare e riconfigurare le estensioni. Inoltre, hai imparato come monitorare le estensioni installate e come disinstallarle, se necessario.

Qual è il prossimo?

Dai un'occhiata ad alcune di queste altre estensioni:

• Traduci stringhe di testo in Cloud Firestore (è richiesto un account di fatturazione)
• Aggiungi nuovi utenti alle liste e-mail di Mailchimp (è richiesto un account di fatturazione)
• Accorciare gli URL (è richiesto un account di fatturazione)

Hai bisogno di più codice lato server personalizzato?

• Dai un'occhiata al codelab di Cloud Functions for Firebase

Altri documenti utili

Gestione delle estensioni:

• Prova a gestire le estensioni con la CLI Firebase
• Imposta avvisi sul budget
• Controlla la frequenza con cui viene eseguita un'estensione installata
• Aggiorna un'estensione installata a una nuova versione
• Disinstallare un'estensione

Imparare i dettagli più fini sulle estensioni:

• Visualizza il codice sorgente e i documenti per ciascuna estensione su GitHub
• Scopri le autorizzazioni e l'accesso concessi a un'estensione