Esegui il deployment in Firebase App Hosting con un'app Next.js

1. Prima di iniziare

In questo codelab imparerai a eseguire il deployment su Firebase App Hosting utilizzando un'app web Next.js chiamata Friendly Eats, un sito web per le recensioni di ristoranti.

L'app web completata offre funzionalità utili che dimostrano come Firebase può aiutarti a creare app Next.js.

• Compilazione e deployment automatici:questo codelab mostra come utilizzare Firebase App Hosting per compilare ed eseguire il deployment automatico del codice Next.js ogni volta che esegui il push in un ramo configurato.
• Accesso e uscita:l'app web completata consente agli utenti di accedere/uscire con Google. L'accesso e la persistenza degli utenti sono gestiti interamente tramite Firebase Authentication.
• Immagini:l'app web completata consente agli utenti che hanno eseguito l'accesso di caricare immagini del ristorante. Gli asset immagine sono archiviati in Cloud Storage for Firebase. L'SDK Firebase JavaScript fornisce un URL pubblico alle immagini caricate. Questo URL pubblico viene quindi archiviato nel documento del ristorante pertinente in Cloud Firestore.
• Filtri:l'app web completata consente agli utenti che hanno eseguito l'accesso di filtrare l'elenco dei ristoranti in base a categoria, posizione e prezzo. Puoi anche personalizzare il metodo di ordinamento utilizzato. I dati vengono accessibili da Cloud Firestore e le query Firestore vengono applicate in base ai filtri utilizzati.
• Recensioni:l'app web completata consente agli utenti che hanno eseguito l'accesso di pubblicare recensioni di ristoranti costituite da una valutazione a stelle e un messaggio basato su testo. Le informazioni sulle recensioni vengono archiviate in Cloud Firestore.
• Riepiloghi delle recensioni:l'app web completata riepiloga automaticamente le recensioni utilizzando un modello Gemini. I riepiloghi creati con l'AI vengono archiviati in Cloud Firestore.

Prerequisiti

• Conoscenza di Next.js e JavaScript

Obiettivi didattici

• Come utilizzare Firebase con il router delle app Next.js e il rendering lato server
• Come autorizzare le chiamate all'API Gemini utilizzando solo i secret lato server

Che cosa ti serve

• Un browser a tua scelta, ad esempio Google Chrome
• Accesso a IDX.dev (un workspace basato sul web)
• Un Account Google per la creazione e la gestione del tuo progetto Firebase
• Un account GitHub (non deve essere lo stesso account email indicato sopra)

2. Configura l'ambiente di sviluppo e il repository GitHub

Questo codelab fornisce il codebase iniziale dell'app e si basa sulla CLI Firebase e su IDX.dev.

Crea un nuovo repository GitHub e importalo in IDX

Firebase App Hosting ti consente di configurare un repository GitHub in modo che crei e distribuisca il codice Next.js ogni volta che esegui il push in un ramo configurato.

1. Crea un nuovo repository GitHub per questo codelab: https://github.com/new. Assegna il nome che preferisci, ad esempio MyFriendlyEatsCodelab.
2. Copia il nuovo URL del repository. Avrà questo aspetto:
   https://github.com/USER_NAME/REPOSITORY_NAME.git
3. Vai alla pagina https://idx.google.com ed esegui l'accesso.
4. Fai clic su Importa un repository e incolla l'URL GitHub copiato.
   IDX ti chiederà di collegarti a GitHub, quindi clonerà il repository (vuoto).

Visualizzare il repository di codice sorgente del codelab

Visualizza il codice sorgente del codelab all'indirizzo https://github.com/firebase/friendlyeats-web. Il repository friendlyeats-web contiene progetti di esempio per più piattaforme.

Questo codelab che stai seguendo si concentra solo su Firebase App Hosting e sull'API Gemini ed è una versione abbreviata del codelab completo "Integra Firebase con un'app Next.js". Questo codelab abbreviato richiede di lavorare solo con il codice sorgente nel ramo #io-connect del repository friendlyeats-web, in particolare nella directory nextjs-step10.

Prendi nota delle seguenti directory aggiuntive del repository friendlyeats-web. Anche se non ti servono per questo codelab, è utile sapere cosa sono.

• nextjs-start: contiene il codice iniziale per il codelab completo "Integrare Firebase con un'app Next.js".
• nextjs-end: contiene il codice della soluzione per l'app web completata.

Copia l'origine del codelab nel nuovo repository

Ecco come copiare la directory nextjs-step10 nel tuo repository:

1. In IDX, apri il terminale utilizzando Menu > Terminale > Nuovo terminale.
2. Utilizza il pacchetto npm giget per recuperare solo la directory nextjs-step10 dal ramo io-connect:

   npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
   

3. Tieni traccia delle modifiche localmente con Git:

   git add -A
   git commit -m "codelab starting point"
   git branch -M main
   git push -u origin main
   

Ora dovresti vedere il codice iniziale nel tuo repository GitHub.

3. Esamina la codebase iniziale

In questa sezione esaminerai alcune aree del codebase iniziale dell'app a cui aggiungerai funzionalità in questo codelab.

Struttura di cartelle e file

La tabella seguente contiene una panoramica della struttura di cartelle e file dell'app:

Componenti server e client

L'app è un'app web Next.js che utilizza App Router. Il rendering lato server viene utilizzato in tutta l'app. Ad esempio, il file src/app/page.js è un componente server responsabile della pagina principale. Il file src/components/RestaurantListings.jsx è un componente client indicato dalla direttiva "use client" all'inizio del file.

Importare estratti conto

In alcuni file, potresti notare istruzioni di importazione come le seguenti:

import RatingPicker from "@/src/components/RatingPicker.jsx";

L'app utilizza il simbolo @ per evitare percorsi di importazione relativi macchinosi ed è resa possibile dagli alias di percorso.

API specifiche di Firebase

Tutto il codice dell'API Firebase è incluso nella directory src/lib/firebase. I singoli componenti React importano quindi le funzioni sottoposte a wrapping dalla directory src/lib/firebase, anziché importare direttamente le funzioni Firebase.

Dati simulati

I dati simulati di ristoranti e recensioni sono contenuti nel file src/lib/randomData.js. I dati di questo file vengono assemblati nel codice del file src/lib/fakeRestaurants.js.

4. Configura il progetto Firebase

In questa sezione, configurerai un progetto Firebase e gli assocerai un'app web Firebase. Configurerai anche i servizi Firebase utilizzati dall'app web di esempio.

Crea un progetto Firebase

1. Accedi alla console Firebase utilizzando lo stesso Account Google utilizzato nel passaggio precedente.
2. Fai clic sul pulsante per creare un nuovo progetto, quindi inserisci un nome per il progetto (ad esempio FriendlyEats Codelab).
   
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.

Esegui l'upgrade del piano tariffario Firebase

Per utilizzare Firebase App Hosting e Cloud Storage for Firebase, il tuo progetto Firebase deve essere incluso nel 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.

5. Crea un backend di hosting delle app

In questa sezione configurerai un backend App Hosting per monitorare un ramo del repository Git. Configurerai anche tutti i servizi con cui comunicherà il backend.

Al termine di questa sezione, avrai un backend App Hosting connesso al tuo repository in GitHub che ricompilerà e implementerà automaticamente una nuova versione della tua app ogni volta che esegui il push di un nuovo commit nel ramo main.

Crea un backend

1. Nella Console Firebase, vai alla pagina App Hosting:
2. Fai clic su Inizia per avviare il flusso di creazione del backend.
3. Segui le istruzioni per importare e connettere il repository GitHub che hai creato in precedenza.
4. Imposta le impostazioni di deployment:
   • Mantieni la directory root come /
   • Imposta il ramo live su main
   • Abilita implementazioni automatiche
5. Assegna un nome al backend friendlyeats-codelab (o un nome a tua scelta). Questo diventa parte del dominio utilizzato per accedere al backend.
   Questo flusso di lavoro crea automaticamente anche un'app web Firebase nel tuo progetto Firebase. Più avanti in questo codelab, utilizzerai i valori di configurazione di questa app web per connettere il tuo codebase al tuo progetto Firebase.
6. Fai clic su Termina e implementa. Dopo qualche istante, verrà visualizzata una nuova pagina in cui potrai vedere lo stato del nuovo backend di App Hosting.
7. Dalla dashboard di App Hosting, copia il nuovo dominio.
   Avrà un pattern simile a BACKEND_ID--PROJECT_ID.REGION.hosted.app. Ti servirà per configurare Firebase Authentication in un secondo momento.

Potrebbero essere necessari alcuni minuti prima che il dominio inizi a funzionare a causa della propagazione del DNS e della creazione del certificato SSL. Mentre viene creato il backend, continua a configurare il resto del progetto Firebase e il backend (passaggi successivi di questo codelab).

Ogni volta che esegui il push di un nuovo commit nel ramo main del tuo repository GitHub, nella console Firebase viene avviata una nuova build e un nuovo rollout e il tuo sito viene aggiornato automaticamente al termine del rollout.

6. Configura altri servizi Firebase

Anche se questo codelab si concentra solo su Firebase App Hosting e sull'API Gemini, l'app web funzionante richiede altri servizi Firebase per funzionare. Il codice per far funzionare tutti questi servizi nella tua app fa parte del codebase che hai copiato nel tuo repository GitHub, ma devi comunque configurare questi servizi nel tuo progetto Firebase.

Configurare l'autenticazione

1. Nella console Firebase, vai ad Autenticazione.
2. Fai clic su Inizia.
3. Nella colonna Provider aggiuntivi, fai clic su Google > Attiva.
   1. Nella casella di testo Nome visibile al pubblico del progetto, inserisci un nome, ad esempio My FriendlyEatsCodelab app.
   2. Dal menu a discesa Email di assistenza per il progetto, seleziona il tuo indirizzo email.
   3. Fai clic su Salva.
4. Fai clic sulla scheda Impostazioni nella pagina Autenticazione.
   1. Fai clic su Domini autorizzati nel menu a sinistra della schermata.
   2. Fai clic su Aggiungi dominio e poi aggiungi il dominio di hosting delle app appena creato (termina con .hosted.app).
   3. Fai clic su Aggiungi per salvare.

Configura Cloud Firestore

1. Nel riquadro a sinistra della console Firebase, espandi Build e seleziona Database Firestore.
2. Fai clic su Crea database.
3. Lascia l'ID database impostato su (default).
4. Seleziona una posizione per il database, poi fai clic su Avanti.
   Per un'app reale, devi scegliere una posizione vicina ai tuoi utenti.
5. Fai clic su Avvia in modalità di test. Leggi l'esclusione di responsabilità relativa alle regole di sicurezza.
   Più avanti in questo codelab, aggiungerai regole di sicurezza per proteggere i tuoi dati. Nondistribuire o esporre pubblicamente un'app senza aggiungere regole di sicurezza per il tuo database.
6. Fai clic su Crea.

Configura Cloud Storage for 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.
   Più avanti in 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.

7. Configurare l'app web

Ora che hai creato un progetto Firebase e attivato tutti i servizi Firebase utilizzati nella tua app, puoi iniziare a lavorare in IDX per configurare la tua app web in modo che utilizzi questi servizi.

Accedi all'interfaccia a riga di comando di Firebase in IDX

IDX ha già installato Node.js e l'interfaccia a riga di comando di Firebase, quindi puoi saltare l'installazione e iniziare a configurare l'interfaccia a riga di comando.

1. Nel terminale di IDX, esegui questi comandi per configurare la CLI in modo che utilizzi il progetto Firebase che hai creato in precedenza:

   firebase login --no-localhost
   firebase use --add
   

   Quando ti viene chiesto un alias, inserisci codelab.
2. A seconda che tu voglia che Firebase raccolga dati, inserisci Y o N. Entrambe le opzioni funzionano per questo codelab.
3. Nel browser, seleziona il tuo Account Google e poi fai clic su Consenti.

Esegui il deployment di regole di sicurezza e indici

Il codice che hai copiato nel tuo repository GitHub contiene già set di regole di sicurezza per Firestore (in firestore.rules) e per Cloud Storage for Firebase (in storage.rules). Dopo aver implementato le regole di sicurezza, i dati nel database e nel bucket sono protetti meglio da un uso improprio.

Puoi anche utilizzare la CLI per eseguire il deployment di un insieme di indici per Firestore (in firestore.indexes.json) per abilitare le query avanzate.

1. Nel terminale all'interno di IDX, esegui questo comando per eseguire il deployment di queste regole di sicurezza e indici:

   firebase deploy --only firestore,storage
   

2. Se ti viene chiesto: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", premi Enter per selezionare Sì.

Aggiungi la configurazione Firebase al codice della tua app web

1. Nella console Firebase:
   1. Vai alle impostazioni del progetto.
   2. Scorri verso il basso fino alla sezione Le tue app, quindi seleziona l'app con lo stesso nome del backend App Hosting.
   3. In Configurazione e configurazione dell'SDK, scegli l'opzione Configurazione, quindi copia le proprietà della variabile firebaseConfig e i relativi valori.
2. In IDX, procedi nel seguente modo:
   1. Apri il file apphosting.yaml. Qui configurerai le variabili di ambiente su App Hosting, nonché i secret e la configurazione di runtime.
   2. Compila i valori delle variabili di ambiente forniti con i valori di configurazione che hai copiato dalla console Firebase.Ad esempio (sostituisci con i tuoi valori):

      runConfig:
          minInstances: 0
          maxInstances: 2
      env:
          # Get these values from the Firebase console
          - variable: NEXT_PUBLIC_FIREBASE_API_KEY
              value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
          - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
              value: project-id.firebaseapp.com
          - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
              value: project-id
          - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
              value: project-id.firebasestorage.app
          - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
              value: 111111111111
          - variable: NEXT_PUBLIC_FIREBASE_APP_ID
              value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
      

   3. Salva il file. Poi, nel terminale all'interno di IDX, esegui questi comandi per eseguire il push delle modifiche in GitHub:

      git commit -a -m "Setup Firebase Config"
      
      git push
      

3. Torna alla console Firebase, vai alla pagina App Hosting e poi procedi nel seguente modo:
   1. Fai clic su Visualizza dashboard per il backend.
   2. Nota che è stata attivata una nuova build dal push di Git. La creazione e l'implementazione in Cloud Run dovrebbero richiedere circa 3 minuti. Puoi monitorare l'avanzamento facendo clic sul chip build-ID.
   3. Aggiorna la pagina della console per verificare se l'implementazione è terminata. Al termine, fai clic sul link del tuo dominio (che termina con .hosted.app) in domini per aprirlo e visualizzare l'app di cui è stato eseguito il deployment.

Congratulazioni, hai eseguito il deployment dell'app web iniziale. Approfondiamo un po' l'argomento.

8. Provare l'app web in un browser

Verifica di poter accedere con Firebase Authentication

1. Nel browser, aggiorna la pagina che mostra la tua app web.
2. Fai clic su Accedi con Google.
3. Esci e accedi di nuovo. La pagina si aggiorna in tempo reale senza ricaricarsi. Puoi ripetere questo passaggio con utenti diversi.
4. (Facoltativo) Nel browser, aggiorna l'app web. Fai clic con il tasto destro del mouse sull'app web, seleziona Visualizza sorgente pagina e cerca il nome visualizzato. Viene visualizzato nel codice sorgente HTML non elaborato restituito dal server.

Visualizzare le informazioni sul ristorante

L'app web include dati fittizi per ristoranti e recensioni.

Per inserire dati di ristoranti simulati nel database Cloud Firestore, seleziona > Aggiungi ristoranti di esempio.

Verifica che le schede dei ristoranti vengano caricate durante l'esecuzione del server

Se utilizzi il framework Next.js, potrebbe non essere ovvio quando i dati vengono caricati in fase di runtime del server o del client.

Per verificare che le schede dei ristoranti vengano caricate in fase di esecuzione del server:

1. Nell'app web, apri DevTools e disattiva JavaScript.
2. Aggiorna l'app web. Gli elenchi dei ristoranti vengono comunque caricati. Le informazioni sul ristorante vengono restituite nella risposta del server. Quando JavaScript è abilitato, le informazioni sul ristorante vengono idratate tramite il codice JavaScript lato client.
3. In DevTools, riattiva JavaScript.
4. Nell'app web, seleziona > Aggiungi ristoranti di esempio. Se la funzione snapshot è implementata correttamente, i ristoranti vengono visualizzati in tempo reale senza aggiornamento della pagina.

Aggiungere recensioni per un ristorante

Per aggiungere una recensione e verificare che sia inserita in Cloud Firestore:

1. Aggiorna l'app web e seleziona un ristorante dalla home page.
2. Nella pagina del ristorante, fai clic su .
3. Seleziona una valutazione a stelle.
4. Scrivi una recensione.
5. Fai clic su Invia. La tua recensione viene visualizzata nella parte superiore dell'elenco delle recensioni.

9. Riepilogare le recensioni dei ristoranti con l'AI generativa

In questa sezione, aggiungerai una funzionalità di riepilogo delle recensioni in modo che un utente possa capire rapidamente cosa pensano tutti di un ristorante senza dover leggere ogni recensione.

Archiviare una chiave API Gemini in Cloud Secret Manager

App Hosting si integra con Cloud Secret Manager per consentirti di archiviare in modo sicuro valori sensibili come le chiavi API.

1. Per utilizzare l'API Gemini, devi avere una chiave API. Crea una chiave in Google AI Studio.
   Quando ti viene chiesto, seleziona lo stesso progetto che hai utilizzato per questo codelab (in background, un progetto Firebase è un progetto Google Cloud).
2. Nel terminale all'interno di IDX, esegui questo comando per creare un nuovo secret:

   firebase apphosting:secrets:set gemini-api-key
   

3. Quando ti viene chiesto il valore del secret, copia e incolla la chiave API Gemini da Google AI Studio.
4. Se ti viene chiesto: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?", premi Enter per selezionare Sì.
5. Quando ti viene chiesto se il nuovo secret deve essere aggiunto a apphosting.yaml, inserisci Y per accettare, poi premi Enter per selezionare GEMINI_API_KEY come nome della variabile di ambiente.

La chiave API Gemini ora è archiviata in modo sicuro in Cloud Secret Manager ed è accessibile al backend di App Hosting. Puoi anche visualizzare il valore nella dashboard di Secret Manager nella console Google Cloud.

6. Apri il file apphosting.yaml e tieni presente che il nome del secret è stato registrato, ma non i valori.Il file dovrebbe avere il seguente aspetto:

   runConfig:
       minInstances: 0
       maxInstances: 2
   env:
       # Get these values from the Firebase console
       - variable: NEXT_PUBLIC_FIREBASE_API_KEY
           value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
       - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
           value: project-id.firebaseapp.com
       - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
           value: project-id
       - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
           value: project-id.firebasestorage.app
       - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
           value: 111111111111
       - variable: NEXT_PUBLIC_FIREBASE_APP_ID
           value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
       - variable: GEMINI_API_KEY
           secret: gemini-api-key
   

Implementare il componente di riepilogo delle recensioni

1. In IDX, apri src/components/Reviews/ReviewSummary.jsx.
2. Sostituisci la funzione GeminiSummary con il seguente codice:

   export async function GeminiSummary({ restaurantId }) {
       const { firebaseServerApp } = await getAuthenticatedAppForUser();
       const reviews = await getReviewsByRestaurantId(
           getFirestore(firebaseServerApp),
           restaurantId
       );
   
       const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
       const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",
       safety_settings: [
           {
           category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
           threshold: HarmBlockThreshold.BLOCK_NONE,
           },
       ],
       });
       const reviewSeparator = "@";
       const prompt = `
           Based on the following restaurant reviews,
           where each review is separated by a '${reviewSeparator}' character,
           create a one-sentence summary of what people think of the restaurant.
   
           Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
       `;
   
       try {
           const result = await model.generateContent(prompt);
           const response = await result.response;
           const text = response.text();
   
           return (
               <div className="restaurant__review_summary">
                   <p>{text}</p>
                   <p>✨ Summarized with Gemini</p>
               </div>
           );
       } catch (e) {
           console.error(e);
           return <p>Error contacting Gemini</p>;
       }
   }
   

3. Nel terminale all'interno di IDX, esegui questi comandi per creare un commit ed eseguirne il push nel repository GitHub.

   git commit -a -m "Use AI to summarize reviews"
   
   git push
   

4. Nella console Firebase, apri la pagina App Hosting e attendi il completamento del nuovo rollout.
5. Nel browser, fai clic sulla scheda di un ristorante. Nella parte superiore dello schermo, dovresti visualizzare un riepilogo di una frase di tutte le recensioni del ristorante.
6. Aggiungi una nuova recensione e aggiorna la pagina. Dovresti visualizzare la modifica del riepilogo.

10. Conclusione

Complimenti! Hai imparato a utilizzare Firebase App Hosting per eseguire il deployment di un'app Next.js e a utilizzare l'API Gemini per riassumere il testo. Nello specifico, hai utilizzato quanto segue:

• Firebase App Hosting per creare e distribuire automaticamente il codice Next.js ogni volta che esegui il push in un ramo GitHub configurato.
• Cloud Secret Manager (integrato con App Hosting) per archiviare in modo sicuro la chiave API Gemini in modo da poter creare funzionalità di AI generativa nella tua app.

Scopri di più

Consulta il codelab completo "Integrare Firebase con un'app Next.js" per scoprire come abbiamo aggiunto Firebase Authentication, Cloud Firestore e Cloud Storage per Firebase a questa app.

Consulta anche altri codelab:

• Cloud Firestore Web codelab
• Codelab sui framework web Angular di Firebase
• Proteggere i dati Firestore con il codelab sulle regole di sicurezza di Firebase