Aggiungi rapidamente nuove funzionalità alla tua applicazione web con Firebase Extensions

1. Introduzione

Obiettivi

In questo codelab aggiungerai funzionalità a un'app marketplace online con l'aiuto delle Estensioni Firebase. In questo codelab scoprirai in che modo le estensioni possono aiutarti a dedicare meno tempo alle attività di sviluppo e gestione delle app.

Cosa creerai

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

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

Cosa imparerai a fare

• Come trovare estensioni per casi d'uso comuni
• Come installare e configurare un'estensione nel progetto
• Come gestire (monitorare, aggiornare e disinstallare) le estensioni nel progetto

Questo codelab è incentrato su Firebase Extensions. Per informazioni dettagliate sugli altri prodotti Firebase menzionati in questo codelab, consulta la documentazione di Firebase e altri codelab.

Che cosa ti serve

• Un computer su cui è installato un browser web moderno (è consigliato 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 lo utilizzerai in questa app.
3. Attendi il provisioning del progetto, poi fai clic su Continua.

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

• Firebase Authentication per identificare facilmente gli utenti
• Firebase Realtime Database per salvare i dati strutturati nel cloud e ricevere una notifica istantanea quando i dati vengono aggiornati
• Cloud Storage for Firebase per salvare le immagini sul cloud

Ora dovrai attivare e configurare questi prodotti Firebase utilizzando la Console Firebase.

Eseguire l'upgrade del piano tariffario di Firebase

Per utilizzare Firebase Extensions e i relativi servizi cloud sottostanti, nonché Cloud Storage per Firebase, il tuo progetto Firebase deve utilizzare il piano tariffario Blaze con pagamento a consumo, il che significa che deve essere collegato a un account di fatturazione Cloud.

• Un account di fatturazione Cloud richiede un metodo di pagamento, ad esempio una carta di credito.
• Se non hai mai utilizzato Firebase e Google Cloud, controlla se hai l'idoneità a ricevere un credito di 300$e un account di fatturazione Cloud per la prova senza costi.
• Se stai svolgendo questo codelab nell'ambito di un evento, chiedi all'organizzatore se sono disponibili crediti Cloud.

Per eseguire l'upgrade del progetto al piano Blaze:

1. Nella console Firebase, seleziona l'upgrade del piano.
2. Seleziona il piano Blaze. Segui le istruzioni sullo schermo per collegare un account di fatturazione Cloud al tuo progetto.
   Se hai dovuto creare un account di fatturazione Cloud nell'ambito di questo upgrade, potresti dover tornare al flusso di upgrade nella console Firebase per completarlo.

Attivare l'accesso tramite email

Sebbene l'autenticazione non sia l'obiettivo di questo codelab, è importante disporre di una qualche forma di autenticazione nell'app per identificare in modo univoco tutti gli utenti che la utilizzano. Dovrai utilizzare l'accesso con email.

1. Nella console Firebase, fai clic su Sviluppa nel riquadro a sinistra.
2. Fai clic su Autenticazione, quindi sulla scheda Metodo di accesso (o fai clic qui per andare direttamente alla scheda Metodo di accesso).
3. Fai clic su Email/Password nell'elenco Provider di accesso, imposta l'opzione Attiva su On e poi fai clic su Salva.

Abilita Realtime Database

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

1. Nel riquadro a sinistra della console Firebase, espandi Build e seleziona Database in tempo reale.
2. Fai clic su Crea database.
3. Seleziona una posizione per il database, poi fai clic su Avanti.
   Per un'app reale, scegli una posizione vicina ai tuoi utenti.
4. Fai clic su Avvia in modalità di test. Leggi il disclaimer relativo alle regole di sicurezza.
   Nei passaggi successivi di questo codelab, aggiungerai regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre pubblicamente un'app senza aggiungere regole di sicurezza per il tuo database.
5. Fai clic su Crea.

Impostare regole di sicurezza per il database

Ora imposta le regole di sicurezza necessarie per questa app. Di seguito sono riportate alcune regole di esempio di base per proteggere la tua app. Queste regole consentono a chiunque di visualizzare gli articoli in vendita, ma solo agli utenti che hanno eseguito l'accesso di eseguire altre letture e scritture. Non preoccuparti dei dettagli di queste regole: dovrai solo copiarle e incollarle per far funzionare la tua app.

1. Nella parte superiore della dashboard di Database in tempo reale, fai clic sulla scheda Regole.

2. Copia e incolla il seguente insieme di regole nel campo delle regole della 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. Fai clic su Pubblica.

Configurare Cloud Storage for Firebase

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

Ecco come configurare Cloud Storage for Firebase nel tuo progetto Firebase:

1. Nel riquadro a sinistra della console Firebase, espandi Build e seleziona Archiviazione.
2. Fai clic su Inizia.
3. Seleziona una posizione per il bucket di archiviazione predefinito.
   I bucket in US-WEST1, US-CENTRAL1 e US-EAST1 possono usufruire del livello"Sempre senza costi" per Google Cloud Storage. I bucket in tutte le altre località rispettano i prezzi e l'utilizzo di Google Cloud Storage.
4. Fai clic su Avvia in modalità di test. Leggi il disclaimer relativo alle regole di sicurezza.
   Nei passaggi successivi di questo codelab, aggiungerai regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre un'app pubblicamente senza aggiungere regole di sicurezza per il bucket di archiviazione.
5. Fai clic su Crea.

Configurare le regole di sicurezza per il bucket Storage

Ora imposta 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 di un articolo elencato.

1. Nella parte superiore della dashboard Spazio di archiviazione, fai clic sulla scheda Regole.

2. Copia e incolla il seguente insieme di regole nel campo delle regole della 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. Fai clic su Pubblica.

3. Esegui l'app di esempio

Esegui il fork del progetto StackBlitz

In questo codelab, crei e esegui il deployment di 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 i progetti con altri utenti. Altre persone che dispongono dell'URL del tuo progetto StackBlitz possono vedere il tuo codice e creare un fork del tuo progetto, ma non possono modificarlo.

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. Dato che non hai eseguito l'accesso, il tuo "account" si chiama @anonymous, ma non c'è problema. Il progetto ha un nome univoco e un URL univoco. Tutti i file e le modifiche vengono salvati in questo progetto StackBlitz.

Aggiungi un'app web Firebase al progetto

1. In StackBlitz, visualizza il file src/firebase-config.js. Qui aggiungerai l'oggetto di configurazione Firebase.
2. Nella console Firebase, vai alla pagina Panoramica del progetto facendo clic su Panoramica del progetto in alto a sinistra.
3. Al centro della pagina Panoramica del 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 Firebase Hosting per questa app. Utilizzerai invece il riquadro di anteprima di 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 devi trovare la configurazione in un secondo momento, segui le istruzioni riportate qui.

8. Fai clic su Continua alla console.

Aggiungi la configurazione del progetto all'app:

1. Torna a StackBlitz e vai al file src/firebase-config.js.
2. Incolla lo snippet di configurazione nel file. Dopodiché dovrebbe avere il seguente aspetto (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 di StackBlitz:

Questo codelab inizia con il codice di un'app di marketplace di base. Qualsiasi utente può visualizzare un elenco di articoli in vendita e fare clic su un link per visualizzare la pagina dei dettagli di un articolo. Se un utente ha eseguito l'accesso, vedrà i dati di contatto del venditore per poter negoziare un prezzo e acquistare l'articolo.

Prova l'app:

1. Accedi con il pulsante nella parte superiore della schermata Home. Puoi 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 una scheda.
3. In Titolo, inserisci Xylophone.
4. In Prezzo richiesto, inserisci 50.
5. In 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 FOTO DEL PRODOTTO.

file_downloadScarica immagine

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

4. Trovare e installare un'estensione

Il problema

Dopo aver svolto una ricerca sugli utenti per la tua app, scopri che la maggior parte degli utenti visita il tuo sito dal proprio smartphone, non dal computer. Tuttavia, le tue statistiche mostrano anche che gli utenti di dispositivi mobili tendono ad abbandonare il tuo sito ("churn") dopo pochi secondi.

Per curiosità, testi il tuo sito con velocità di connessione mobile. Scopri come qui. Il caricamento delle immagini richiede molto tempo e non vengono memorizzate nella cache del browser. Questo lungo tempo di caricamento si verifica a ogni visualizzazione di pagina.

Soluzione

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

• Comprimi le immagini. Anche i cellulari scattano foto con una risoluzione molto più elevata di quella necessaria per le esigenze di questa app. Ridurre le dimensioni del file velocizzerà i tempi di caricamento senza un calo significativo 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à di nuovo 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 sia l'SDK Firebase Admin ti consentono di impostare queste intestazioni.

Per comprimere le immagini, devi limitare la qualità di caricamento o disporre di un processo lato server che ridimensioni le immagini. Vediamo i pro e i contro:

• Lato client. Per un processo lato client, puoi semplicemente limitare le dimensioni dei file per le immagini caricate. Ciò significa che non devi scrivere o gestire nuova logica di server. Tuttavia, significa anche che i tuoi venditori devono capire come ridimensionare le proprie immagini, il che rappresenta un ostacolo spiacevole e non intuitivo alla creazione di una nuova scheda.
• Lato server. Se utilizzi Cloud Functions for Firebase, puoi attivare una funzione che ridimensiona automaticamente un'immagine al caricamento. Ciò significa che i venditori possono caricare le immagini nelle dimensioni che preferiscono (senza alcun lavoro aggiuntivo) e la tua funzione di backend può ridimensionarle senza problemi. Per questa funzione è disponibile anche un esempio.

Sembra che la soluzione migliore sia lato server. Tuttavia, questa idea prevede comunque la clonazione del sample, il rispetto delle relative istruzioni di configurazione e il deployment della funzione con l'interfaccia a riga di comando di Firebase. La modifica delle dimensioni delle immagini sembra un caso d'uso molto comune. Non esiste una soluzione più semplice?

Una soluzione più semplice

Hai fortuna. Esiste una soluzione più semplice: Firebase Extensions. Controlliamo il catalogo delle estensioni disponibili sul sito web di Firebase.

Guarda! Esiste un'estensione chiamata "Ridimensiona immagini". Sembra promettente.

Utilizziamo questa estensione nella tua app.

Installare un'estensione

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

public, max-age=31536000

6. Lascia invariati i valori predefiniti degli altri parametri.
7. Fai clic su Installa estensione.

Mentre attendi il completamento dell'installazione…

Installazione con l'interfaccia a riga di comando di Firebase

Se preferisci utilizzare gli strumenti a riga di comando, puoi installare e gestire le estensioni anche con l'interfaccia a riga di comando di Firebase. Basta utilizzare il comando firebase ext, disponibile nell'ultima versione dell'interfaccia a riga di comando. Qui sono disponibili ulteriori informazioni.

(Facoltativo) Scopri di più sulle intestazioni Cache-Control

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

Aggiornare il codice client

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

Aggiorniamo l'app in modo che recuperi le immagini ridimensionate anziché quelle a grandezza originale.

1. In StackBlitz, apri il file src/firebase-refs.js.
2. Sostituisci la funzione getImageRef esistente con il seguente codice 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)
  };
}

Prova

Poiché questa estensione controlla i nuovi caricamenti di immagini, le dimensioni dell'immagine esistente non verranno modificate.

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

1. Fai clic su Friendly Market nella barra superiore dell'app per andare alla schermata Home.
2. Fai clic sul pulsante Vendi qualcosa nell'angolo in basso a destra dell'app per creare una scheda.
3. In Titolo, inserisci Coffee
4. In Prezzo richiesto, inserisci 1
5. In Descrizione elemento, 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 FOTO DEL PRODOTTO. file_downloadScarica immagine
7. Dopo aver compilato tutti i campi e caricato un'immagine, fai clic su Pubblica. Vedrai la scheda del caffè sotto lo xilofono.
8. Nella dashboard Funzioni della console Firebase, fai clic sulla scheda Log. Dovresti vedere i log della funzione che ne dimostrano l'esecuzione.

9. Vai alla dashboard Spazio di archiviazione per vedere sia l'immagine originale del caffè sia una versione ridimensionata nel percorso friendlymarket.
10. Nel riquadro di anteprima di StackBlitz, ricarica la schermata Home dell'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 primo caricamento della pagina perché è più piccola e, nei successivi aggiornamenti della pagina, viene caricata dalla cache del browser anziché attivare una richiesta di rete.

5. Riconfigurare un'estensione

Il problema

L'app salva automaticamente le bozze della scheda di un venditore. Agli utenti piace questa funzionalità, ma le tue statistiche sono un po' preoccupanti. I report indicano che solo il 10% circa delle bozze viene effettivamente pubblicato e l'altro 90% occupa spazio nel database.

Soluzione

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

Ricordi il catalogo di Firebase Extensions? È possibile che esista già una soluzione per questa situazione. Installiamo l'estensione Limita nodi secondari per mantenere automaticamente il numero di bozze salvate a cinque o meno. L'estensione eliminerà la bozza più vecchia ogni volta che ne viene aggiunta una nuova.

1. Fai clic sul pulsante Installa nella pagina dei dettagli dell'estensione.
2. Scegli il progetto Firebase che utilizzi per l'app web del marketplace.
3. Segui le istruzioni sullo schermo fino al passaggio Configura l'estensione.
4. In Percorso di Realtime Database, inserisci drafts. Questo è il percorso nel database in cui vengono salvate le bozze.
5. In Numero massimo di nodi da conservare, inserisci 5. Ciò significa che verranno salvate cinque bozze per la scheda di ogni articolo e, se ne viene aggiunta un'altra, la bozza più vecchia verrà eliminata automaticamente.
6. Fai clic su Installa estensione.

Mentre aspetti il completamento dell'installazione…

Estensioni di monitoraggio

Quando installi un'estensione, il processo crea diverse funzioni. Potresti voler controllare la frequenza con cui vengono eseguite queste funzioni o visualizzare i log e le frequenze di errore. Per informazioni dettagliate su come monitorare l'estensione, vedi Gestire le estensioni installate. Segui le istruzioni riportate nella documentazione per visualizzare le funzioni create dall'estensione Modifica dimensioni immagini nel passaggio precedente.

Disinstallare le estensioni

Per rimuovere un'estensione dal progetto, potresti essere tentato di eliminare le singole funzioni create da un'estensione, ma questo può comportare un comportamento imprevisto, poiché un'estensione può creare più funzioni. Scopri come disinstallare un'estensione nella documentazione.

La disinstallazione elimina tutte le risorse (ad esempio le funzioni per l'estensione) e l'account di servizio creato per l'istanza dell'estensione. Tuttavia, tutti gli elementi creati dall'estensione (ad esempio le immagini ridimensionate) rimarranno nel progetto dopo la disinstallazione dell'estensione.

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

Non sei limitato a installare una singola istanza di una determinata estensione in un progetto. Se vuoi limitare le voci in un altro percorso, puoi installare un'altra istanza di questa estensione. Tuttavia, ai fini di questo codelab, l'estensione verrà installata una sola volta.

Guarda come funziona

1. Assicurati di aver eseguito l'accesso con l'account che hai 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 modo che sia "Bozza 1".
5. Scorri verso il basso fino alla sezione Bozze e visualizza il numero di bozze. Devono essere presenti almeno due.
6. Fai clic sul pulsante FRIENDLY MARKET nella barra delle app in alto. In questo modo, avrai una bozza salvata, ma non dovrai pubblicarla.
7. Ripeti per "Bozza 2", "Bozza 3" e così via fino a "Bozza 6".
8. Quando crei "Bozza 6", noterai che "Bozza 1" scompare dalla sezione Bozze.
9. Come per l'estensione Modifica le dimensioni delle immagini, puoi controllare i log delle funzioni per vedere quali sono state attivate.

Oops, il limite di bozze da conservare è troppo basso

Il team di assistenza clienti ti contatta per informarti che alcuni dei tuoi venditori più prolifici si lamentano del fatto che le loro bozze vengono eliminate prima che possano pubblicarle. Controlli i calcoli con il tuo compagno di squadra e ti accorgi che erano sbagliati per un fattore 10.000.

Come puoi risolvere il problema? Riconfiguriamo l'estensione installata.

1. Nel riquadro a sinistra della console Firebase, fai clic su Estensioni.
2. Nella scheda dell'estensione installata, fai clic su Gestisci.
3. Nell'angolo in alto a destra, fai clic su Riconfigura estensione.
4. Imposta Numero massimo di nodi da conservare su 50000.
5. Fai clic su Salva.

Ed è tutto. Durante il tempo necessario per l'aggiornamento dell'estensione, puoi contattare il team di assistenza e comunicargli che è già in corso il deployment di una correzione.

6. Eliminare automaticamente i dati utente

Il problema

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

Per il momento, l'assistenza ha eliminato manualmente i dati di ogni utente, ma deve esserci un modo migliore. Ci pensi e valuti la possibilità di scrivere il tuo job batch che viene eseguito periodicamente ed elimina gli indirizzi email dagli account eliminati. Tuttavia, l\'eliminazione dei dati utente sembra essere un problema piuttosto comune. Forse anche le Estensioni Firebase possono aiutarti a risolvere il problema.

Soluzione

Configura l'estensione Elimina i dati utente in modo che elimini 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 utilizzi per l'app web del marketplace.
3. Segui le istruzioni sullo schermo fino al passaggio Configura l'estensione.
4. In Percorsi di Realtime Database, inserisci sellers/{UID}. La parte sellers è il nodo i cui elementi secondari 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, deve eliminare sellers/1234 dal database.
5. Fai clic su Installa estensione.

Mentre aspetti il completamento dell'installazione…

Parliamo di personalizzazione

In questo codelab hai visto che le Estensioni Firebase possono aiutarti a risolvere casi d'uso comuni e che sono configurabili in base alle esigenze della tua app.

Tuttavia, le estensioni non possono risolvere tutti i problemi e il problema dell'eliminazione dei dati utente ne è un buon esempio. Sebbene l'estensione Elimina dati utente risolva il problema attuale relativo all'esposizione delle email dopo l'eliminazione dell'account da parte dell'utente, l'estensione non elimina tutto. Ad esempio, la scheda dell'articolo è ancora disponibile e rimarranno anche le immagini in Cloud Storage. L'estensione Elimina dati utente ci consente di configurare un percorso di Cloud Storage da eliminare, ma poiché gli utenti possono caricare molti file diversi con nomi molto diversi, non potrai configurare questa estensione per eliminare automaticamente questi elementi. Per situazioni come questa, Cloud Functions for Firebase potrebbe essere una soluzione migliore, in quanto ti consente di scrivere codice specifico per il modello di dati della tua app.

Estensioni e fatturazione

L'utilizzo delle estensioni Firebase non comporta costi (ti vengono addebitati solo le risorse sottostanti che utilizzi), ma alcune delle risorse sottostanti necessarie per un'estensione potrebbero richiedere la fatturazione. Questo codelab è stato progettato per essere completato senza un account di fatturazione. Tuttavia, la configurazione di un piano Flame o Blaze sblocca molte estensioni Firebase molto interessanti.

Ad esempio, puoi accorciare gli URL, attivare l'email, esportare le raccolte in BigQuery e altro ancora. Consulta il catalogo completo delle estensioni qui.

Se c'è un'estensione che vorresti avere, ma al momento non è disponibile, non esitare a comunicarcelo. Invia una richiesta di funzionalità all'assistenza Firebase per suggerire una nuova estensione.

Guarda come funziona

Al termine dell'installazione dell'estensione, elimina un utente e controlla cosa succede:

1. Nella Console Firebase, vai alla dashboard di Realtime Database.
2. Espandi il nodo sellers.
3. Le informazioni di ogni venditore sono basate sul relativo UID utente. Scegli l'UID di un utente.
4. Nella console di Firebase, vai alla dashboard di Authentication e individua l'UID utente.
5. Espandi il menu a destra dell'UID e seleziona Elimina account.

6. Torna alla dashboard di Realtime Database. Le informazioni del venditore andranno perse.

7. Complimenti!

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

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

Passaggi successivi

Dai un'occhiata ad alcune di queste altre estensioni:

• Tradurre stringhe di testo in Cloud Firestore (account di fatturazione obbligatorio)
• Aggiungere nuovi utenti agli elenchi email di Mailchimp (è necessario un account di fatturazione)
• Abbreviare gli URL (è necessario un account di fatturazione)

Ti serve altro 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 l'interfaccia a riga di comando di Firebase
• Impostare avvisi relativi al budget
• Controllare la frequenza di esecuzione di un'estensione installata
• Aggiornare un'estensione installata a una nuova versione
• Disinstallare un'estensione

Scopri di più sui dettagli delle estensioni:

• Visualizza il codice sorgente e la documentazione di ogni estensione su GitHub
• Informazioni sulle autorizzazioni e sull'accesso concessi a un'estensione