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

1. Introduzione

Obiettivi

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

3b6977f679c67db.png

Cosa creerai

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

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

Cosa imparerai a fare

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

Questo codelab è incentrato sulle estensioni Firebase. 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 con un browser web moderno installato (Chrome è consigliato)
  • Un Account Google

2. Crea e configura un progetto Firebase

Crea un progetto Firebase

  1. Accedi alla console Firebase utilizzando il tuo Account Google.
  2. Fai clic sul pulsante per creare un nuovo progetto, quindi inserisci un nome per il progetto (ad esempio FriendlyMarket).
  3. Fai clic su Continua.
  4. Se richiesto, leggi e accetta i termini di Firebase, quindi fai clic su Continua.
  5. (Facoltativo) Attiva l'assistenza AI nella console Firebase (denominata "Gemini in Firebase").
  6. Per questo codelab non hai bisogno di Google Analytics, quindi disattiva l'opzione Google Analytics.
  7. Fai clic su Crea progetto, 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 dati strutturati nel cloud e ricevere una notifica immediata quando i dati vengono aggiornati
  • Cloud Storage for Firebase per salvare le immagini nel cloud

Ora devi attivare e configurare questi prodotti Firebase utilizzando la console Firebase.

Esegui l'upgrade del piano tariffario Firebase

Per utilizzare le estensioni Firebase e i relativi servizi cloud, nonché Cloud Storage per Firebase, il tuo progetto Firebase deve essere associato al piano tariffario con pagamento a consumo (Blaze), il che significa che è 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, verifica se hai diritto a un credito di 300$e a un account Cloud Billing di 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'opzione per eseguire 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.

Abilitare l'accesso tramite email

Sebbene l'autenticazione non sia l'obiettivo di questo codelab, è importante che la tua app disponga di una qualche forma di autenticazione per identificare in modo univoco tutti gli utenti. Utilizzerai l'accesso con l'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.

ed0f449a872f7287.png

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 Realtime Database.
  2. Fai clic su Crea database.
  3. Seleziona una posizione per il database, poi fai clic su Avanti.
    Per un'app reale, devi scegliere una posizione vicina ai tuoi utenti.
  4. Fai clic su Avvia in modalità di test. Leggi l'esclusione di responsabilità relativa 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 imposterai 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 gli utenti che hanno eseguito l'accesso possono eseguire altre operazioni di lettura e scrittura. Non preoccuparti dei dettagli di queste regole: ti basterà copiarle e incollarle per far funzionare la tua app.

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

e233a24a38b37e95.png

  1. 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"
      }
  }
}
  2. Fai clic su Pubblica.

Configura 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 Storage.
  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à seguono i prezzi e l'utilizzo di Google Cloud Storage.
  4. Fai clic su Avvia in modalità di test. Leggi l'esclusione di responsabilità relativa alle regole di sicurezza.
    Nei passaggi successivi di questo codelab, aggiungerai regole di sicurezza per proteggere i tuoi dati. Nondistribuire o esporre pubblicamente un'app senza aggiungere regole di sicurezza per il bucket Storage.
  5. Fai clic su Crea.

Configurare le regole di sicurezza per il bucket Storage

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 di un articolo in elenco.

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

e7003646b429500b.png

  1. 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 /friendlymarket/{ImageId} {
      allow read;
      allow write: if request.auth != null;
    }
  }
}
  2. Fai clic su Pubblica.

3. Esegui l'app di esempio

Fork del progetto StackBlitz

In questo codelab, crei e implementi 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 hanno l'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.

22c44cf92ed26208.png

Ora hai una copia del codice iniziale come progetto StackBlitz. Poiché non hai eseguito l'accesso, il tuo "account" si chiama @anonymous, ma va bene lo stesso. Il progetto ha un nome univoco, oltre a un URL univoco. Tutti i tuoi file e le tue 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 che aggiungerai l'oggetto di configurazione Firebase.
  2. Nella console Firebase, vai alla pagina di panoramica del progetto facendo clic su Panoramica del progetto in alto a sinistra.
  3. Al centro della pagina di panoramica del progetto, fai clic sull'icona web 58d6543a156e56f9.png per creare una nuova app web Firebase. 88c964177c2bccea.png
  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.

6c0519e8f48a3a6f.png

  1. Fai clic su Continua alla console.

Aggiungi la configurazione del progetto alla tua app:

  1. In StackBlitz, vai al file src/firebase-config.js.
  2. Incolla lo snippet di configurazione nel file. Dovrebbe avere il seguente aspetto (ma con i valori del tuo progetto nell'oggetto di configurazione):

177602cbe84f873d.png

Qual è il punto di partenza di questa app?

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

f3ec800f27fa49b7.png

Questo codelab inizia con il codice di un'app 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, visualizzerà 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 IMMAGINE DEL TUO ARTICOLO.

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

4. Trovare e installare un'estensione

Il problema

Dopo aver condotto alcune ricerche sugli utenti della tua app, scopri che la maggior parte degli utenti visita il tuo sito da smartphone, non da computer. Tuttavia, le statistiche mostrano anche che gli utenti di dispositivi mobili tendono ad abbandonare il tuo sito ("churn") dopo pochi secondi.

Per curiosità, esegui il test del tuo sito con velocità di connessione mobile. Scopri come farlo qui. Le immagini richiedono molto tempo per essere caricate 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 adottare due misure per migliorare le prestazioni di caricamento delle immagini:

  • Comprimi le immagini. Anche i cellulari scattano foto con una risoluzione molto più alta di quella necessaria per le esigenze di questa app. La riduzione delle dimensioni del file velocizzerà i tempi di caricamento senza una notevole diminuzione 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à ripetutamente la stessa immagine. 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 ridimensiona le immagini. Consideriamo i compromessi:

  • Lato client. Per un processo lato client, potresti semplicemente limitare le dimensioni dei file per le immagini caricate. Ciò significa che non devi scrivere o gestire alcuna nuova logica del server. Tuttavia, significa anche che i venditori devono capire come ridimensionare le proprie immagini, il che rappresenta un ostacolo difficile e poco 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 immagini delle dimensioni che preferiscono (senza lavoro aggiuntivo) e la tua funzione di backend può ridimensionare l'immagine senza problemi. Per questa funzione è disponibile anche un esempio.

Sembra che la soluzione lato server sia la scelta migliore. Tuttavia, questa idea prevede comunque la clonazione del campione, seguendo le istruzioni di configurazione e poi il deployment della funzione con la CLI Firebase. Il ridimensionamento delle immagini sembra un caso d'uso molto comune. Non esiste una soluzione più semplice?

Una soluzione più semplice

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

e6bc3874cf23f34f.png

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

Utilizziamo questa estensione nella tua app.

Installare un'estensione

  1. Fai 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 vuoi ridimensionare le immagini e puoi anche 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 che elenca 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 estensione. Le istruzioni mostreranno un riepilogo di base dell'estensione, nonché le risorse che creerà e i ruoli di accesso che richiede.
  5. Nel campo **Cache-Control** intestazione per le immagini ridimensionate, inserisci quanto segue:

public, max-age=31536000

  1. Lascia invariati i valori predefiniti degli altri parametri.
  2. Fai clic su Installa estensione.

Mentre aspetti il completamento dell'installazione…

Installazione con l'interfaccia a riga di comando di Firebase

Se preferisci gli strumenti a riga di comando, le estensioni possono essere installate e gestite anche utilizzando l'interfaccia a riga di comando di Firebase. Utilizza il comando firebase ext, disponibile nell'ultima versione della CLI. Ulteriori informazioni sono disponibili qui.

(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 un anno. Per saperne di più sull'intestazione Cache-Control, consulta questa documentazione.

Aggiornare il codice cliente

L'estensione che hai installato scrive un'immagine ridimensionata nello stesso bucket dell'immagine originale. Le dimensioni configurate vengono aggiunte al nome file dell'immagine ridimensionata. 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 all'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 monitora 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 in alto 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 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.
  7. Dopo aver compilato tutti i campi e caricato un'immagine, fai clic su Pubblica. Vedrai l'elenco del caffè sotto lo xilofono.
  8. Nella dashboard Funzioni della console Firebase, fai clic sulla scheda Log. Dovresti visualizzare i log della funzione che mostrano che è stata eseguita.

486d1226be84bb44.png

  1. Vai alla dashboard Spazio di archiviazione per visualizzare sia l'immagine originale del caffè sia una versione ridimensionata nel percorso friendlymarket.
  2. Nel riquadro di anteprima di StackBlitz, ricarica la schermata Home dell'app un paio di volte. Dovresti notare che l'immagine del caffè viene caricata molto più velocemente rispetto a quella dello xilofono.

L'immagine viene caricata più rapidamente 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

La tua app salva automaticamente le versioni bozza della scheda di un venditore. I tuoi utenti apprezzano questa funzionalità, ma le tue statistiche sono un po' preoccupanti. I report indicano che solo il 10% circa delle bozze viene effettivamente pubblicato, mentre il restante 90% occupa solo 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? Forse esiste già una soluzione pensata per questa situazione. Installiamo l'estensione Limit Child Nodes per mantenere automaticamente il numero di bozze salvate pari o inferiore a cinque. L'estensione elimina la bozza meno recente 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 estensione.
  4. In Percorso 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 ogni scheda e, se ne viene aggiunta un'altra, la bozza meno recente 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 di esecuzione di queste funzioni o visualizzare i log e i tassi 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 Resize Images nel passaggio precedente.

Disinstallare le 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 un comportamento imprevisto, 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 il service account creato per l'istanza dell'estensione. Tuttavia, qualsiasi artefatto creato dall'estensione (come le immagini ridimensionate) rimarrà nel progetto dopo la disinstallazione dell'estensione.

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

Non sei limitato all'installazione di 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, installerai l'estensione 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 "Bozza 1".
  5. Scorri verso il basso fino alla sezione Bozze e visualizza il numero di bozze. Devono essere almeno due.
  6. Fai clic sul pulsante MERCATO AMICO nella barra delle app in alto. In questo modo, avrai una bozza salvata, ma non dovrai pubblicarla.
  7. Ripeti l'operazione 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.

Oops, the limit of drafts to keep is too small

Il tuo 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 collega e ti rendi conto che hai sbagliato di un fattore di 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. Modifica Numero massimo di nodi da conservare impostandolo su 50000.
  5. Fai clic su Salva.

E questo è tutto ciò che devi fare. Durante l'aggiornamento dell'estensione, puoi parlare con il team di assistenza e comunicare che è già in corso l'implementazione di una correzione.

6. Eliminare automaticamente i dati utente

Il problema

Il team di assistenza clienti ti ha ricontattato. 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 di scrivere un tuo job batch che viene eseguito periodicamente ed elimina gli indirizzi email degli account eliminati. Tuttavia, l'eliminazione dei dati utente sembra un problema piuttosto comune. Forse anche le estensioni Firebase possono aiutarti a risolvere questo problema.

Soluzione

Configurerai l'estensione Elimina i 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 utilizzi per l'app web del marketplace.
  3. Segui le istruzioni sullo schermo fino al passaggio Configura estensione.
  4. In Percorsi Realtime Database, inserisci sellers/{UID}. La parte sellers è il nodo i cui figli contengono gli indirizzi email degli utenti, mentre {UID} è un carattere jolly. Con questa configurazione, l'estensione saprà che quando l'utente con UID 1234 elimina il proprio account, l'estensione 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 la questione dell'eliminazione dei dati utente ne è un buon esempio. Sebbene l'estensione Elimina dati utente risolva l'attuale reclamo secondo cui le email sono ancora esposte dopo l'eliminazione dell'account da parte di un utente, l'estensione non elimina tutto. Ad esempio, la scheda dell'articolo è ancora disponibile e anche 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 nomi diversi, non potrai configurare questa estensione per eliminare automaticamente questi artefatti. Per situazioni come questa, Cloud Functions for Firebase potrebbe essere più adatta, in modo da poter 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 i costi delle 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 davvero interessanti.

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

Se c'è un'estensione che vorresti avere, ma non è disponibile al momento, comunicacelo. 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 vedi cosa succede:

  1. Nella console Firebase, vai alla dashboard di Realtime Database.
  2. Espandi il nodo sellers.
  3. Le informazioni di ogni venditore sono associate al suo UID utente. Scegli l'UID di un utente.
  4. Nella console Firebase, vai alla dashboard Autenticazione e trova l'UID utente.
  5. Espandi il menu a destra dell'UID e seleziona Elimina account.

2e03923c9d7f1f29.png

  1. Torna alla dashboard di Realtime Database. Le informazioni del venditore verranno eliminate.

7. Complimenti!

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

Hai imparato a scoprire, 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:

Ti serve altro codice personalizzato lato server?

Altri documenti utili

Gestione delle estensioni:

Scopri i dettagli più importanti sulle estensioni: