Crea app Web basate sull'intelligenza artificiale con le estensioni Firebase

1. Prima di iniziare

In questo codelab imparerai come creare app Web basate sull'intelligenza artificiale che offrono esperienze utente accattivanti con Firebase Extensions.

Prerequisiti

• Conoscenza di Node.js e JavaScript

Cosa imparerai

• Come utilizzare le estensioni relative all'intelligenza artificiale per elaborare la lingua e l'input video.
• Come utilizzare Cloud Functions for Firebase per formare una pipeline tra le estensioni.
• Come utilizzare JavaScript per accedere all'output prodotto dalle estensioni.

Di cosa avrai bisogno

• Un browser a tua scelta, come Google Chrome
• Un ambiente di sviluppo con un editor di codice e un terminale
• Un Account Google per la creazione e la gestione del tuo progetto Firebase

2. Esamina le app Web e i relativi servizi Firebase

Questa sezione descrive le app Web che creerai in questo codelab e quale Firebase utilizzerai per crearle.

App di revisione

Un'azienda di magliette è sopraffatta dalle lunghe recensioni su una delle sue magliette e non è sicura della sua valutazione complessiva. L'app Web Reviewly completata riassume ogni recensione, fornisce una valutazione a stelle per ciascuna recensione e utilizza ciascuna recensione per dedurre una valutazione complessiva per il prodotto. Gli utenti possono anche espandere ciascuna recensione riepilogativa per visualizzare la recensione originale.

Applicazione Chatbot

Il personale docente di una scuola è sopraffatto da domande ripetitive su argomenti generali, quindi desidera automatizzare le risposte. L'app Chatbot completata fornisce agli studenti un chatbot conversazionale basato su un modello linguistico di grandi dimensioni (LLM) e in grado di rispondere a domande su argomenti generali. Il chatbot ha un contesto storico, quindi le sue risposte possono tenere conto delle domande precedenti poste dagli studenti nella stessa conversazione.

Applicazione Suggerimenti video

Un dipartimento governativo desidera che i suoi video forniscano descrizioni audio per migliorare l'accessibilità, ma ha centinaia di video da annotare e necessita di un approccio semplificato. L'app Video Hint completata è un prototipo che il dipartimento esaminerà per valutarne l'efficacia.

Queste sono le estensioni utilizzate nell'app Video Hint :

• Etichetta i video con l'estensione Cloud Video AI : estrai le etichette da ogni video caricato su Storage.
• Attività linguistiche con estensione API PaLM : riepiloga le etichette in una descrizione testuale.
• Estensione Converti testo in voce : crea una versione audio della descrizione del video.

3. Configura il tuo ambiente di sviluppo

Verifica la tua versione di Node.js

1. Nel tuo terminale, verifica di avere installato Node.js v20.0.0 o successiva:

   node -v
   

2. Se non disponi di Node.js v20.0.0 o successiva, scaricalo e installalo .

Scarica l'archivio

1. Se hai installato git, clona il repository GitHub del codelab:

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. Se non hai git installato, scarica il repository GitHub come file zip .

Esaminare la struttura delle cartelle

Sul tuo computer locale, trova il repository clonato e rivedi la struttura delle cartelle. La tabella seguente contiene le cartelle e le relative descrizioni:

Ogni cartella include un file readme.md che offre un avvio rapido per eseguire la rispettiva app Web, utilizzando istruzioni semplificate. Tuttavia, se sei uno studente alle prime armi, dovresti completare questo codelab perché contiene il set di istruzioni più completo.

Se non sei sicuro di aver applicato correttamente il codice come indicato in questo codelab, puoi trovare il codice della soluzione per le rispettive app nelle cartelle reviewly-end , chatbot-end e video-hint-end .

Installa la CLI di Firebase

Esegui il comando seguente per verificare di aver installato la CLI Firebase e che sia v12.5.4 o successiva:

firebase --version

• Se hai installato la CLI Firebase, ma non è la versione 12.5.4 o successiva, aggiornala:

  npm update -g firebase-tools
  

• Se non hai installato la CLI Firebase, installala:

  npm install -g firebase-tools
  

Se non riesci a installare la CLI Firebase a causa di errori di autorizzazione, consulta la documentazione di npm o utilizza un'altra opzione di installazione .

Accedi a Firebase

1. Nel tuo terminale, vai alla cartella ai-extensions-codelab e accedi a Firebase:

   cd ai-extensions-codelab
   firebase login
   

2. Se il tuo terminale dice che hai già effettuato l'accesso a Firebase, procedi alla sezione Configura il tuo progetto Firebase di questo codelab.
3. A seconda che desideri che Firebase raccolga dati, inserisci Y o N .
4. Nel browser, seleziona il tuo account Google, quindi fai clic su Consenti .

4. Configura il tuo progetto Firebase

In questa sezione configurerai un progetto Firebase e ti assocerai un'app Web Firebase. Abiliterai anche i servizi Firebase utilizzati dalle app Web di esempio.

Crea un progetto Firebase

1. Nella console Firebase , fai clic su Crea progetto .
2. Nella casella di testo Inserisci il nome del tuo progetto , inserisci AI Extensions Codelab (o un nome di progetto a tua scelta), quindi fai clic su Continua .
3. Per questo codelab non è necessario Google Analytics, quindi disattiva l'opzione Abilita Google Analytics per questo progetto .
4. Fare clic su Crea progetto .
5. Attendi il provisioning del tuo progetto, quindi fai clic su Continua .
6. Nel tuo progetto Firebase, vai a Impostazioni progetto . Annota l'ID del tuo progetto perché ti servirà in seguito. Questo identificatore univoco è il modo in cui viene identificato il tuo progetto (ad esempio, nella CLI Firebase).

Scarica un account di servizio Firebase

Alcune delle app Web che creerai in questo codelab utilizzano il rendering lato server con Next.js .

Firebase Admin SDK per Node.js viene utilizzato per garantire che le regole di sicurezza funzionino dal codice lato server. Per utilizzare le API in Firebase Admin, devi scaricare un account di servizio Firebase dalla console Firebase.

1. Nella console Firebase, vai alla pagina Account di servizio nelle Impostazioni del progetto .
2. Fare clic su Genera nuova chiave privata > Genera chiave .
3. Dopo che il file è stato scaricato sul tuo file system, ottieni il percorso completo di quel file.
   Ad esempio, se hai scaricato il file nella cartella Download , il percorso completo potrebbe essere simile a questo: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. Nel tuo terminale, imposta la variabile di ambiente GOOGLE_APPLICATION_CREDENTIALS sul percorso della chiave privata scaricata. In un ambiente Unix, il comando potrebbe assomigliare a questo:

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

5. Mantieni questo terminale aperto e utilizzalo per il resto del codelab, poiché la variabile di ambiente potrebbe andare persa se avvii una nuova sessione di terminale.
   Se apri una nuova sessione del terminale, devi eseguire nuovamente il comando precedente.

Aggiorna il tuo piano tariffario Firebase

Per utilizzare Cloud Functions e Firebase Extensions, il tuo progetto Firebase deve essere incluso nel piano tariffario Blaze , il che significa che è associato 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 di fatturazione Cloud di prova gratuita .

Tuttavia, tieni presente che il completamento di questo codelab non dovrebbe comportare alcun addebito effettivo.

Per aggiornare il tuo progetto al piano Blaze, segui questi passaggi:

1. Nella console Firebase, seleziona per aggiornare il tuo piano .
2. Nella finestra di dialogo, seleziona il piano Blaze, quindi segui le istruzioni visualizzate sullo schermo per associare il tuo progetto a un account di fatturazione Cloud.
   Se avessi bisogno di creare un account di fatturazione Cloud, potresti dover tornare al flusso di aggiornamento nella console Firebase per completare l'aggiornamento.

Configura i servizi Firebase nella console Firebase

In questa sezione eseguirai il provisioning e la configurazione di diversi servizi Firebase utilizzati dalle app Web in questo codelab. Tieni presente che non tutti questi servizi vengono utilizzati in ciascuna app Web, ma la configurazione immediata di tutti questi servizi è comoda per lavorare con questo codelab.

Configura l'autenticazione

Utilizzerai l'autenticazione sia con l'app Chatbot che con l'app Video Hint . Ricorda, tuttavia, che se stessi creando un'app reale, ciascuna app dovrebbe avere il proprio progetto Firebase .

1. Nella console Firebase, vai a Authentication .
2. Fare clic su Inizia .
3. Nella colonna Fornitori aggiuntivi , fai clic su Google > Abilita .

4. Nella casella di testo Nome rivolto al pubblico per il progetto , inserisci un nome facile da ricordare, ad esempio My AI Extensions Codelab .
5. Dal menu a discesa E-mail di supporto per il progetto , seleziona il tuo indirizzo e-mail.
6. Fare clic su Salva .
   

Configura Cloud Firestore

Utilizzerai Firestore con tutte e tre le app. Ricorda, tuttavia, che se stessi creando un'app reale, ciascuna app dovrebbe avere il proprio progetto Firebase .

1. Nella console Firebase, vai a Firestore .
2. Fare clic su Crea database > Avvia in modalità test > Avanti .
   Più avanti in questo codelab aggiungerai le regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre pubblicamente un'app senza aggiungere regole di sicurezza per il tuo database .
3. Utilizza la posizione predefinita o seleziona una posizione a tua scelta.
   Per un'app reale, vuoi scegliere una posizione vicina ai tuoi utenti. Tieni presente che questa posizione non può essere modificata in seguito e sarà automaticamente anche la posizione del tuo bucket Cloud Storage predefinito (passaggio successivo).
4. Fare clic su Fine .

Configura Cloud Storage per Firebase

Utilizzerai Cloud Storage con l'app Video Hint e proverai l'estensione Convert Text to Speech (passaggio successivo del codelab).

1. Nella console Firebase, vai a Archiviazione .
2. Fare clic su Inizia > Avvia in modalità test > Avanti .
   Più avanti in questo codelab aggiungerai le regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre pubblicamente un'app senza aggiungere regole di sicurezza per il tuo bucket di archiviazione .
3. La posizione del tuo bucket dovrebbe già essere selezionata (a causa della configurazione di Firestore nel passaggio precedente).
4. Fare clic su Fine .

Nelle prossime sezioni di questo codelab installerai le estensioni e modificherai le codebase di ciascuna app di esempio in questo codelab per far funzionare tre diverse app Web.

5. Configura l'estensione "Attività linguistiche con API PaLM" per l'app Reviewly

Installa le attività linguistiche con l'estensione API PaLM

1. Passare alle attività linguistiche con l'estensione API PaLM .
2. Fai clic su Installa nella console Firebase .
3. Seleziona il tuo progetto Firebase.
4. Nella sezione Controlla le API abilitate e le risorse create , fai clic su Abilita accanto a tutti i servizi che ti vengono suggeriti:

5. Fare clic su Avanti > Avanti.
6. Nella casella di testo Percorso raccolta , inserisci bot .
7. Nella casella di testo Richiesta , inserisci .
8. Nella casella di testo Campi variabili , inserisci input .
9. Nella casella di testo del campo Risposta , inserisci text .
10. Dal menu a discesa Posizione Cloud Functions , seleziona Iowa (us-central1) o la posizione selezionata in precedenza per Firestore e Cloud Storage.
11. Dal menu a discesa Modello linguistico , seleziona text-bison-001 .
12. Lasciare tutti gli altri valori come predefiniti.
13. Fai clic su Installa estensione e attendi l'installazione dell'estensione.

Prova le attività linguistiche con l'estensione API PaLM

Sebbene l'obiettivo di questo codelab sia interagire con l'estensione Language Tasks with PaLM API tramite un'app Web, è utile comprendere come funziona l'estensione attivandola utilizzando la console Firebase. L'estensione si attiva quando un documento Cloud Firestore viene aggiunto alla raccolta bot .

Per vedere come funziona l'estensione utilizzando la console Firebase, procedi nel seguente modo:

1. Nella console Firebase, vai a Firestore .
2. Nella raccolta bot , fare clic su Aggiungi documento .
3. Nella casella di testo ID documento , fai clic su ID automatico .
4. Nella casella di testo Campo , inserisci input .
5. Nella casella di testo Valore , inserisci Tell me about the moon .
6. Fai clic su Salva e attendi qualche secondo. Il tuo documento all'interno della raccolta bot ora include una risposta alla tua query.

6. Configura l'app Reviewly per utilizzare Firebase

Per eseguire l'app Reviewly , devi configurare il codice dell'app e la CLI Firebase per interagire con il tuo progetto Firebase.

Aggiungi i servizi e la configurazione Firebase al codice della tua app

Per utilizzare Firebase, la codebase della tua app necessita degli SDK Firebase per i servizi che desideri utilizzare e della configurazione Firebase che indica a tali SDK quale progetto Firebase utilizzare.

L'app di esempio di questo codelab include già tutto il codice di importazione e inizializzazione necessario per gli SDK (vedi reviewly-start/js/reviews.js ), quindi non è necessario aggiungerli. Tuttavia, l'app di esempio ha solo valori segnaposto per la configurazione Firebase (vedi reviewly-start/js/firebase-config.js ), quindi devi registrare la tua app con il tuo progetto Firebase per ottenere i valori di configurazione Firebase univoci per la tua app.

1. Nella console Firebase, nel tuo progetto Firebase, vai alla Panoramica del progetto e quindi fai clic su Ragnatela .
   
2. Nella casella di testo Soprannome dell'app , inserisci un soprannome dell'app facile da ricordare, ad esempio My Reviewly app .
3. Non selezionare la casella di controllo Configura anche hosting Firebase per questa app . Eseguirai questi passaggi più avanti nel codelab.
4. Fai clic su Registra app .
5. La console visualizza uno snippet di codice per aggiungere e inizializzare l'SDK Firebase con un oggetto di configurazione Firebase specifico dell'app. Copia tutte le proprietà nell'oggetto di configurazione Firebase.
6. Nell'editor del codice, apri il file reviewly-start/js/firebase-config.js .
7. Sostituisci i valori del segnaposto con i valori appena copiati. Va bene se disponi di proprietà e valori per i servizi Firebase che non utilizzi nell'app Reviewly .
8. Salvare il file.
9. Tornando alla console Firebase, fai clic su Continua sulla console .

Configura il tuo terminale per eseguire i comandi CLI Firebase sul tuo progetto Firebase

1. Nel tuo terminale, vai alla cartella ai-extensions-codelab che hai scaricato in precedenza.
2. Passare alla cartella dell'app Web reviewly-start :

   cd reviewly-start
   

3. Fai in modo che la CLI di Firebase esegua comandi su un progetto Firebase specifico:

   firebase use YOUR_PROJECT_ID
   

Esegui e visualizza l'app Web Reviewly

Per eseguire e visualizzare l'app Web, attenersi alla seguente procedura:

1. Nel terminale, installa le dipendenze e quindi esegui l'app Web:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. Nel tuo browser, vai all'URL mostrato nel tuo terminale. Ad esempio: http://localhost:8080 .

La pagina dovrebbe caricarsi, ma noterai che mancano varie funzionalità. Li aggiungeremo nei passaggi successivi di questo codelab.

7. Aggiungi funzionalità all'app Reviewy

Nell'ultimo passaggio di questo codelab, hai eseguito l'app Reviewly localmente, ma non aveva molte funzionalità e non utilizzava ancora l'estensione installata. In questo passaggio del codelab aggiungerai questa funzionalità e utilizzerai l'app Web per attivare l'estensione.

Distribuire le regole di sicurezza

L'app di esempio di questo codelab contiene set di regole di sicurezza per Firestore e Cloud Storage per Firebase. Dopo aver distribuito queste regole di sicurezza sul tuo progetto Firebase, i dati nel tuo database e nel tuo bucket sono meglio protetti da usi impropri.

Puoi visualizzare queste regole nei file firestore.rules e storage.rules .

1. Per implementare queste regole di sicurezza, esegui questo comando nel tuo terminale:

   firebase deploy --only firestore:rules,storage
   

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

Aggiorna il codice dell'app per attivare l'estensione

Nell'app Reviewly , una nuova recensione aggiunta a Firestore attiva l'estensione per riassumere la recensione.

1. Nel tuo editor di codice, apri il file functions/add-mock-reviews.js .
2. Sostituisci la variabile reviewWithPrompt con il codice seguente, che richiede al modello linguistico una revisione più breve.

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. Dopo la variabile reviewWithPrompt , sostituisci la variabile reviewDocument con il codice seguente, che crea un documento di revisione in modo che possa essere aggiunto a Firestore.

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. Salvare il file.
5. Nel file js/reviews.js , dopo il Insert code below, to import your Firebase Callable Cloud Function , importa la funzione richiamabile HTTP Firebase con l' helper httpsCallable :

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. Dopo il Insert code below, to invoke your Firebase Callable Cloud Function , richiama la funzione richiamabile HTTP Firebase:

   await addMockReviews();
   

7. Salvare il file.

Distribuisci una funzione per aggiungere nuove recensioni

L'app Web Reviewly utilizza una funzione Cloud per aggiungere le recensioni. Ma attualmente la Cloud Function non è implementata.

Per distribuire la tua funzione con la CLI Firebase, procedi nel seguente modo:

1. Nel terminale, mentre sei ancora nella cartella reviewly-start , premi Control+C per arrestare il server.
2. Distribuisci la tua funzione:

   firebase deploy --only functions
   

3. Se viene visualizzato un Permission denied while using the Eventarc Service Agent o un errore simile, attendere alcuni minuti , quindi riprovare il comando.

Hai appena distribuito la tua prima funzione personalizzata con Cloud Functions. La console Firebase offre una dashboard in cui puoi vedere tutte le funzioni che distribuisci al tuo progetto Firebase.

Esegui e visualizza nuovamente l'app Web Reviewly (ora con funzionalità)

Per eseguire e visualizzare l'app Web ora funzionante, attenersi alla seguente procedura:

1. Nel tuo terminale, esegui nuovamente il server:

   npm run dev
   

2. Nel tuo browser, vai all'URL mostrato nel tuo terminale. Ad esempio: http://localhost:8080 .
3. Nell'app, fai clic su Aggiungi alcune recensioni fittizie e attendi qualche secondo affinché vengano visualizzate alcune recensioni lunghe.
   Sullo sfondo, l'estensione Language Tasks con PaLM API reagisce al nuovo documento che rappresenta la nuova revisione. La richiesta aggiunta in precedenza richiede un riepilogo più breve dal modello linguistico.
4. Per visualizzare un'intera revisione e il prompt utilizzato per la revisione, fare clic su una delle revisioni, quindi selezionare Mostra prompt PaLM .

8. Configura l'estensione "Chatbot con PaLM API" per l'app Chatbot

Installa Chatbot con l'estensione API PaLM

1. Passare al Chatbot con l'estensione API PaLM .
2. Fai clic su Installa nella console Firebase .
3. Seleziona il tuo progetto Firebase.
4. Fare clic su Avanti > Avanti > Avanti fino a raggiungere la sezione Configura estensione .
5. Nella casella di testo Percorso raccolta , inserisci users/{uid}/discussion/{discussionId}/messages .
6. Dal menu a discesa Posizione Cloud Functions , seleziona Iowa (us-central1) o la posizione selezionata in precedenza per Firestore e Cloud Storage.
7. Dal menu a discesa Modello linguistico , seleziona chat-bison .
8. Lasciare tutti gli altri valori come predefiniti.
9. Fai clic su Installa estensione e attendi l'installazione dell'estensione.

Prova Chatbot con l'estensione API PaLM

Sebbene l'obiettivo di questo codelab sia interagire con l'estensione API Chatbot con PaLM tramite un'app Web, è utile comprendere come funziona l'estensione attivandola utilizzando la console Firebase. L'estensione si attiva quando viene creato un documento Cloud Firestore nella raccolta users/{uid}/discussion/{discussionId}/messages .

1. Nella console Firebase, vai a Firestore .
2. Clic Inizia la raccolta .
   1. Nella casella di testo ID raccolta , inserisci users , quindi fai clic su Avanti .
   2. Nella casella di testo ID documento , fare clic su ID automatico e quindi su Salva .
3. Nella raccolta users , fare clic su Inizia la raccolta .
   
   1. Nella casella di testo ID raccolta , inserisci discussion , quindi fai clic su Avanti .
   2. Nella casella di testo ID documento , fare clic su ID automatico e quindi su Salva .
4. Nella raccolta discussion , fare clic su Inizia la raccolta .
   
   1. Nella casella di testo ID raccolta , inserisci messages , quindi fai clic su Avanti .
   2. Nella casella di testo ID documento , fai clic su ID automatico .
   3. Nella casella di testo Campo , inserisci prompt .
   4. Nella casella di testo Valore , inserisci Tell me 5 random fruits .
   5. Fai clic su Salva e attendi qualche secondo. La raccolta messages ora include un documento che contiene una risposta alla tua query.

5. Nella raccolta messages , fare clic su Aggiungi documento .
   1. Nella casella di testo ID documento , fai clic su ID automatico .
   2. Nella casella di testo Campo , inserisci prompt .
   3. Nella casella di testo Valore , inserisci And now, vegetables .
   4. Fai clic su Salva e attendi qualche secondo. La raccolta messages ora include un documento che contiene una risposta alla tua query.

9. Configura l'app Chatbot per utilizzare Firebase

Per eseguire l'app Chatbot , devi configurare il codice dell'app e la CLI Firebase per interagire con il tuo progetto Firebase.

Aggiungi i servizi e la configurazione Firebase al codice della tua app

Per utilizzare Firebase, la codebase della tua app necessita degli SDK Firebase per i servizi che desideri utilizzare e della configurazione Firebase che indica a tali SDK quale progetto Firebase utilizzare.

L'app di esempio di questo codelab include già tutto il codice di importazione e inizializzazione necessario per gli SDK (vedi chatbot-start/lib/firebase/firebase.js ), quindi non è necessario aggiungerli. Tuttavia, l'app di esempio ha solo valori segnaposto per la configurazione Firebase (vedi chatbot-start/lib/firebase/firebase-config.js ), quindi devi registrare la tua app con il tuo progetto Firebase per ottenere i valori di configurazione Firebase univoci per il tuo app.

1. Nella console Firebase, nel tuo progetto Firebase, vai alla Panoramica del progetto e quindi fai clic su Web (o fai clic su Aggiungi app se hai già registrato un'app con il progetto).
2. Nella casella di testo Soprannome dell'app , inserisci un soprannome dell'app facile da ricordare, ad esempio My Chatbot app .
3. Non selezionare la casella di controllo Configura anche hosting Firebase per questa app . Eseguirai questi passaggi più avanti nel codelab.
4. Fai clic su Registra app .
5. La console visualizza uno snippet di codice per aggiungere e inizializzare l'SDK Firebase con un oggetto di configurazione Firebase specifico dell'app. Copia tutte le proprietà nell'oggetto di configurazione Firebase.
6. Nel tuo editor di codice, apri il file chatbot-start/lib/firebase/firebase-config.js .
7. Sostituisci i valori del segnaposto con i valori appena copiati. Non è un problema se disponi di proprietà e valori per i servizi Firebase che non utilizzi nell'app Chatbot .
8. Salvare il file.
9. Tornando alla console Firebase, fai clic su Continua sulla console .

Configura il tuo terminale per eseguire i comandi CLI Firebase sul tuo progetto Firebase

1. Nel terminale, premi Control+C per impedire al server di eseguire l'app Web precedente.
2. Nel tuo terminale, vai alla cartella dell'app web chatbot-start :

   cd ../chatbot-start
   

3. Fai in modo che la CLI di Firebase esegua comandi su un progetto Firebase specifico:

   firebase use YOUR_PROJECT_ID
   

Configura la codebase della tua app per utilizzare Firebase Hosting compatibile con il framework

Questo codelab utilizza framework Web con hosting (anteprima) con l'app Web Chatbot .

1. Nel tuo terminale, abilita i framework web con Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Inizializza hosting Firebase:

   firebase init hosting
   

3. Quando viene richiesto Detected an existing codebase Next.js esistente codebase in your current directory, should we use this? , premere Y.
4. Quando viene richiesto In which region would you like to host server-side content, if applicable? , seleziona la regione predefinita o la posizione selezionata in precedenza per Firestore e Cloud Storage, quindi premi Enter (o return su macOS).
5. Quando viene richiesto Set up automatic builds and deploys with GitHub? , premere N

Esegui e visualizza l'app Web Chatbot

1. Nel terminale, installa le dipendenze e quindi esegui l'app Web:

   npm install
   firebase emulators:start --only hosting
   

2. Nel tuo browser, vai all'URL dell'hosting ospitato localmente. Nella maggior parte dei casi è http://localhost:5000/ o qualcosa di simile.

La pagina dovrebbe caricarsi, ma noterai che mancano varie funzionalità. Li aggiungeremo nei passaggi successivi di questo codelab.

Risolvere i problemi di esecuzione dell'app Web

Se vedi l'errore nella pagina web che inizia in questo modo: Error: Firebase session cookie has incorrect... , devi eliminare tutti i cookie nel tuo ambiente localhost. Per fare ciò, segui le istruzioni su cancella cookie | Documentazione di DevTools. .

10. Aggiungi funzionalità all'app Chatbot

Nell'ultimo passaggio di questo codelab, hai eseguito l'app Chatbot localmente, ma non aveva molte funzionalità e non utilizzava ancora l'estensione installata. In questo passaggio del codelab aggiungerai questa funzionalità e utilizzerai l'app Web per attivare l'estensione.

Distribuire le regole di sicurezza

L'app di esempio di questo codelab contiene set di regole di sicurezza per Firestore e Cloud Storage per Firebase. Dopo aver distribuito queste regole di sicurezza sul tuo progetto Firebase, i dati nel tuo database e nel tuo bucket sono meglio protetti da usi impropri.

Puoi visualizzare queste regole nei file firestore.rules e storage.rules .

1. Per implementare queste regole di sicurezza, esegui questo comando nel tuo terminale:

   firebase deploy --only firestore:rules,storage
   

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

Aggiorna il codice per aggiungere messaggi a Cloud Firestore

Nell'app Chatbot , un nuovo messaggio di un utente viene aggiunto a Firestore e ciò attiva l'estensione per generare una risposta.

1. Nel tuo editor di codice, apri il file lib/firebase/firestore.js .
2. Verso la fine del file, trova la funzione addNewMessage , che gestisce l'aggiunta di nuovi messaggi.
   La funzione accetta già le seguenti proprietà dell'oggetto:
   

   Parametro	Descrizione
   userId	L'ID dell'utente che ha effettuato l'accesso
   discussionId	L'ID discussione a cui è stato aggiunto il messaggio
   message	Il contenuto del testo del messaggio
   db	Un'istanza del database Firestore

   Con queste variabili pronte, puoi aggiungere un documento Cloud Firestore per rappresentare il nuovo messaggio.
3. Nel corpo della funzione addNewMessage , dopo il commento // Insert your code below ⬇️ , aggiungi il seguente codice:

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

Aggiorna il codice per costruire una query per ottenere messaggi

1. Sempre nel file lib/firebase/firestore.js , individua la funzione getMessagesQuery , che deve restituire una query Cloud Firestore che individua i users/{uid}/discussion/{discussionId}/messages .
2. Sostituisci l'intera funzione getMessagesQuery con il seguente codice:

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

Aggiorna il codice per gestire i documenti dei messaggi Cloud Firestore

1. Sempre nel file lib/firebase/firestore.js , individua la funzione handleMessageDoc , che riceve un documento Cloud Firestore che rappresenta un singolo messaggio.
   Questa funzione deve formattare e strutturare i dati in un modo che abbia senso per l'interfaccia utente dell'app Chatbot .
2. Sostituisci l'intera funzione handleMessageDoc con il seguente codice:

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. Salvare il file.

Esegui e visualizza nuovamente l'app Web Chatbot (ora con funzionalità)

Per eseguire e visualizzare l'app Web ora funzionante, attenersi alla seguente procedura:

1. Nel tuo browser, torna alla scheda con l'app web Chatbot e ricarica la pagina.
2. Fai clic su Accedi con Google .
3. Se necessario, seleziona il tuo account Google.
4. Dopo aver effettuato l'accesso ricaricare la pagina.
5. Nella casella di testo Inserisci il tuo messaggio , inserisci un messaggio, ad esempio Tell me about space .
6. Fai clic su Invia e attendi qualche secondo affinché l'app Web Chatbot risponda.

Un altro vantaggio dell'estensione API Chatbot con PaLM è la cronologia delle conversazioni.

Per vedere un esempio della sua capacità di dialogare con il contesto storico, segui questi passaggi:

1. Nella casella di testo Inserisci il tuo messaggio , fai una domanda, ad esempio What are five random fruits? .
2. Nella casella di testo Inserisci il tuo messaggio , fai una domanda di follow-up correlata alla domanda precedente, ad esempio And what about vegetables? .

L'app web Chatbot risponde con conoscenza storica. Anche se la tua ultima domanda non specificava cinque verdure a caso, l'estensione API Chatbot con PaLM comprende le domande di follow-up.

11. Configura l'estensione "Converti testo in voce" per l'app Suggerimento video

Installa l'estensione Converti testo in voce

1. Passare all'estensione Converti testo in voce .
2. Fai clic su Installa nella console Firebase .
3. Seleziona il tuo progetto Firebase.
4. Fare clic su Avanti .
5. Nella sezione Controlla le API abilitate e le risorse create , fai clic su Abilita accanto a tutti i servizi che ti vengono suggeriti:

6. Fai clic su Avanti, quindi seleziona Concedi accanto alle autorizzazioni suggerite.

7. Fare clic su Avanti .
8. Nella casella di testo Percorso raccolta , inserisci bot .
9. Nella casella di testo Percorso di archiviazione , inserisci tts .
10. Lascia tutti gli altri valori come opzioni predefinite.
11. Fai clic su Installa estensione e attendi l'installazione dell'estensione.

Prova l'estensione Converti testo in voce

Sebbene l'obiettivo di questo codelab sia interagire con l'estensione Convert Text to Speech tramite un'app Web, è utile comprendere come funziona l'estensione attivandola utilizzando la console Firebase. L'estensione si attiva quando viene creato un documento Cloud Firestore nella raccolta bot .

Per vedere come funziona l'estensione utilizzando la console Firebase, procedi nel seguente modo:

1. Nella console Firebase, vai a Firestore
2. Clic Inizia la raccolta .
3. Nella casella di testo ID raccolta , inserisci bot .
4. Fare clic su Avanti .

5. Nella casella di testo ID documento , fai clic su ID automatico .
6. Nella casella di testo Campo , inserisci text .
7. Nella casella di testo Valore , inserisci The quick brown fox jumps over the lazy dog .
8. Fare clic su Salva .

Per vedere e ascoltare il file MP3 che hai creato, procedi nel seguente modo:

1. Nella console Firebase, vai a Archiviazione .
2. Nel riquadro in cui puoi caricare file, annota il nome del bucket dopo il valore gs:// . Questo è il nome del bucket predefinito per questo progetto. Ne hai bisogno in varie attività in questo codelab.

3. Nella console Google Cloud, vai a Cloud Storage .
4. Seleziona il tuo progetto.
   Se non vedi il tuo progetto nell'elenco recente dei progetti, fai clic su Seleziona progetto per individuare il tuo progetto nel selettore progetti.

5. Seleziona il tuo bucket di archiviazione predefinito.
6. Passare alla cartella tts/ .
7. Fare clic sul file MP3.
8. Alla fine del file MP3, fare clic su e nota che il tuo testo viene convertito in parlato.

12. Configura l'estensione "Etichetta video con Cloud Video AI" per l'app Video Hint

Installa l' etichetta Video con l'estensione Cloud Video AI

1. Passare all'etichetta Video con l'estensione Cloud Video AI .
2. Fai clic su Installa nella console Firebase .
3. Seleziona il tuo progetto Firebase.
4. Fare clic su Avanti > Avanti > Avanti, fino a raggiungere la sezione Configura estensione .
5. Dal menu a discesa Posizione Cloud Functions , seleziona una posizione supportata (la posizione selezionata in precedenza per Firestore e Cloud Storage o quella più vicina ad essa). Per le posizioni supportate, consulta la sezione location_id in AnnotateVideoRequest .
6. Dal menu a discesa Modello , seleziona Più recente .
7. Dal menu a discesa Fotocamera fissa , seleziona No .
8. Lasciare tutti gli altri valori come predefiniti.
9. Fai clic su Installa estensione e attendi l'installazione dell'estensione.

Prova Label Videos con l'estensione Cloud Video AI

Sebbene l'obiettivo di questo codelab sia interagire con l'estensione Label Videos with Cloud Video AI tramite un'app Web, è utile comprendere come funziona l'estensione attivandola utilizzando la console Firebase. L'estensione si attiva quando un file video viene caricato nel bucket di archiviazione.

Per vedere come funziona l'estensione utilizzando la console Firebase, procedi nel seguente modo:

1. Passa a Archiviazione all'interno del tuo progetto Firebase > Creare una cartella .
2. Nella casella di testo Nome cartella , inserisci video_annotation_input .

3. Fare clic su Aggiungi cartella .
4. Nella cartella video_annotation_input , fai clic su Carica file .
5. Nella cartella ai-extensions-codelab/video-hint-start/public/videos che hai clonato o scaricato in precedenza, seleziona il primo file video.
6. Tornando al browser, in Google Cloud Console, vai a Cloud Storage .
7. Seleziona il bucket di archiviazione predefinito, che hai annotato in precedenza.
8. Fare clic sulla cartella video_annotation_output .
   Se non vedi la cartella video_annotation_output , attendi qualche secondo e aggiorna la pagina perché l'API Video Intelligence potrebbe ancora elaborare il video.

9. Nota che esiste un file JSON che segue un nome simile al file caricato in precedenza.
10. Clic Scarica NOMEFILE .
11. Apri il file JSON scaricato nel tuo editor di codice. Contiene l'output non elaborato dell'API Video Intelligence, che include le etichette rilevate del video caricato.

13. Configura l'app Video Hint per utilizzare Firebase

Per eseguire l'app Video Hint , devi configurare il codice dell'app e la CLI Firebase per interagire con il tuo progetto Firebase.

Aggiungi i servizi e la configurazione Firebase al codice della tua app

Per utilizzare Firebase, la codebase della tua app necessita degli SDK Firebase per i servizi che desideri utilizzare e della configurazione Firebase che indica a tali SDK quale progetto Firebase utilizzare.

L'app di esempio di questo codelab include già tutto il codice di importazione e inizializzazione necessario per gli SDK (vedi video-hint-start/lib/firebase/firebase.js ), quindi non è necessario aggiungerli. Tuttavia, l'app di esempio ha solo valori segnaposto per la configurazione Firebase (vedi video-hint-start/lib/firebase/firebase-config.js ), quindi devi registrare la tua app con il tuo progetto Firebase per ottenere i valori di configurazione Firebase univoci per la tua app.

1. Nella console Firebase, nel tuo progetto Firebase, vai alla Panoramica del progetto e quindi fai clic su Web (o fai clic su Aggiungi app se hai già registrato un'app con il progetto).
2. Nella casella di testo Soprannome dell'app , inserisci un soprannome dell'app facile da ricordare, ad esempio My Video Hint app .
3. Non selezionare la casella di controllo Configura anche hosting Firebase per questa app . Eseguirai questi passaggi più avanti nel codelab.
4. Fai clic su Registra app .
5. La console visualizza uno snippet di codice per aggiungere e inizializzare l'SDK Firebase con un oggetto di configurazione Firebase specifico dell'app. Copia tutte le proprietà nell'oggetto di configurazione Firebase.
6. Nell'editor del codice, apri il file video-hint-start/lib/firebase/firebase-config.js .
7. Sostituisci i valori del segnaposto con i valori appena copiati. Non è consentito se disponi di proprietà e valori per i servizi Firebase che non utilizzi nell'app Video Hint .
8. Salvare il file.
9. Tornando alla console Firebase, fai clic su Continua sulla console .

Configura il tuo terminale per eseguire i comandi CLI Firebase sul tuo progetto Firebase

1. Nel terminale, premi Control+C per impedire al server di eseguire l'app Web precedente.
2. Nel terminale, vai alla cartella dell'app Web video-hint-start :

   cd ../video-hint-start
   

3. Fai in modo che la CLI Firebase esegua comandi su un progetto Firebase specifico:

   firebase use YOUR_PROJECT_ID
   

Configura la codebase della tua app per utilizzare Firebase Hosting compatibile con il framework

Questo codelab utilizza framework Web con hosting (anteprima) con l'app Web Video Hint .

1. Nel tuo terminale, abilita i framework web con Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Inizializza hosting Firebase:

   firebase init hosting
   

3. Quando viene richiesto Detected an existing codebase Next.js esistente codebase in your current directory, should we use this? , premere Y.
4. Quando viene richiesto In which region would you like to host server-side content, if applicable? , seleziona la regione predefinita o la posizione selezionata in precedenza per Firestore e Cloud Storage, quindi premi Enter (o return su macOS).
5. Quando viene richiesto Set up automatic builds and deploys with GitHub? , premere N

Esegui e visualizza l'app Web Video Hint

1. Nel terminale, installa le dipendenze nelle cartelle video-hint-start e functions , quindi esegui l'app:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. Nel tuo browser, vai all'URL dell'hosting ospitato localmente. Nella maggior parte dei casi è http://localhost:5000/ o qualcosa di simile.

La pagina dovrebbe caricarsi, ma noterai che mancano varie funzionalità. Li aggiungeremo nei passaggi successivi di questo codelab.

Risolvere i problemi di esecuzione dell'app Web

Se viene visualizzato un messaggio di errore del tipo Error: The query requires an index. You can create it here: https://console.firebase.google.com nel riquadro Console di DevTools, segui questi passaggi:

1. Passare all'URL fornito.

2. Fai clic su Salva e attendi che lo stato cambi da In costruzione ad Abilitato .

14. Aggiungi funzionalità all'app Suggerimento video

Nell'ultimo passaggio di questo codelab, hai eseguito l'app Video Hint localmente, ma non aveva molte funzionalità e non utilizzava ancora l'estensione installata. In questo passaggio del codelab aggiungerai questa funzionalità e utilizzerai l'app Web per attivare l'estensione.

Distribuire le regole di sicurezza

L'app di esempio di questo codelab contiene set di regole di sicurezza per Firestore e Cloud Storage per Firebase. Dopo aver distribuito queste regole di sicurezza sul tuo progetto Firebase, i dati nel tuo database e nel tuo bucket sono meglio protetti da usi impropri.

Puoi visualizzare queste regole nei file firestore.rules e storage.rules .

1. Per implementare queste regole di sicurezza, esegui questo comando nel tuo terminale:

   firebase deploy --only firestore:rules,storage
   

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

Aggiorna il codice per combinare le funzioni

1. Nell'editor del codice, espandi la cartella functions .
   Questa cartella contiene diverse funzioni, che si combinano per formare una pipeline di estensione. La tabella seguente elenca e descrive ciascuna funzione:

   Funzione	Descrizione
   functions/01-handle-video-upload.js	Il primo passo nel processo di estensione. Elabora il file video caricato dall'utente.
   functions/02-handle-video-labels.js	Il secondo passo nel processo di estensione. Elabora il file delle etichette video, generato dall'estensione storage-label-videos .
   functions/03-handle-audio-file.js	Il terzo passo nel processo di estensione. Gestisce il file audio trascritto.

   Tuttavia, è ancora necessario aggiungere un file che raggruppi queste funzioni insieme.
2. Nel file functions/index.js , aggiungi il seguente codice:

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

Questo codice utilizza moduli JavaScript per importare ed esportare le funzioni dal file index.js in modo che ci sia una posizione centralizzata per tutte le funzioni.

Aggiorna il codice per gestire il caricamento dei video

1. Nel tuo editor di codice, apri il file lib/firebase/storage.js .
2. Individua la funzione uploadVideo .
   Questa funzione riceve userId , filePath e parametri file . Questi dati sono sufficienti per caricare un file su Cloud Storage.
3. Nel corpo della funzione uploadVideo , aggiungi il seguente codice:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

Distribuisci le tue funzioni

Per distribuire le tue funzioni con la CLI Firebase, procedi nel seguente modo:

1. Nel terminale, mentre sei ancora nella cartella video-hint-start , premi Control+C per interrompere il processo corrente.
2. Distribuisci le tue funzioni:

   firebase deploy --only functions
   

   Se ti viene chiesto di eliminare eventuali Cloud Functions precedenti, seleziona No .
3. Se viene visualizzato un messaggio simile a Permission denied while using the Eventarc Service Agent , attendere alcuni minuti e quindi riprovare il comando.
4. Al termine del comando, esegui nuovamente l'app localmente:

   firebase emulators:start --only hosting
   

Esegui e visualizza di nuovo l'app Web Video Hint (ora con funzionalità)

Per eseguire e visualizzare l'app Web ora funzionante, attenersi alla seguente procedura:

1. Nel tuo browser, trova la scheda in cui hai navigato su http://localhost:5000.
2. Se necessario, fai clic su Accedi con Google e seleziona il tuo account Google.
3. Fai clic su Carica video di esempio n. 1 e attendi qualche minuto per vedere i risultati del riepilogo del video.
4. Se non vedi alcun risultato dopo aver caricato il video, vedi Risoluzione dei problemi con Cloud Functions nell'appendice di questo codelab.

15. Conclusione

Congratulazioni! Hai ottenuto molto in questo codelab!

Estensioni Firebase installate e configurate

Hai utilizzato la console Firebase per configurare e installare varie estensioni AI . L'uso delle estensioni è comodo perché non è necessario scrivere molto codice standard che si occupa dell'autenticazione con i servizi Google Cloud, della lettura e scrittura da Firestore e dell'interazione con i servizi Google Cloud e delle varie sfumature coinvolte in tali attività.

Ha funzionato con le estensioni utilizzando la console Firebase

Invece di passare direttamente al codice, ti sei preso del tempo per capire come funzionano le estensioni AI, in base a un input che hai fornito tramite la console a Firestore o Cloud Storage. Questo tipo di interazione può essere particolarmente utile se è necessario eseguire il debug dell'output dell'estensione.

Crea tre app Web basate sull'intelligenza artificiale che utilizzano le estensioni Firebase

Revisione

Nell'app Web Reviewly , hai utilizzato Language Tasks con l'estensione API PaLM per riepilogare le lunghe recensioni lasciate dagli utenti per un prodotto di maglietta. Hai anche richiesto che il modello linguistico fornisse una risposta JSON alla tua query, dove il JSON forniva una valutazione in stelle e una recensione riepilogativa della recensione originale in formato lungo.

Esercizio facoltativo : l'azienda produttrice di magliette è soddisfatta del riepilogo delle recensioni, ma ha chiesto un ulteriore riepilogo della natura del difetto. Puoi modificare la richiesta per restituire un riepilogo del difetto e quindi includere tale riepilogo nell'interfaccia utente dell'app Web?

Chatbot

Nell'app Web Chatbot , hai utilizzato l'estensione API Chatbot con PaLM per fornire all'utente un'interfaccia di chat interattiva, che include il contesto storico nelle conversazioni, in cui ogni messaggio è archiviato in un documento Firestore limitato a un particolare utente.

Esercizio facoltativo : gli studenti sono rimasti soddisfatti del chatbot, ma lo staff vorrebbe alcuni miglioramenti. Agli studenti dovrebbero essere poste domande stimolanti dopo che è stata fornita la risposta. Per esempio:

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

Suggerimento: potresti utilizzare un'opzione di contesto configurabile per raggiungere questo obiettivo.

Suggerimento video

Nell'app Web Video Hint hai utilizzato le estensioni Convert Text to Speech , Language Tasks with PaLM API e Label Videos with Cloud Video per formare una pipeline di estensioni che dia come risultato una descrizione testuale e audio di un video.

Esercizio facoltativo : il dipartimento governativo ha trovato interessante il prototipo e ora vorrebbe anche che un utente potesse fare clic su un'etichetta basata su testo per passare al punto del video in cui viene rilevata l'etichetta.

16. Appendice: risoluzione dei problemi relativi agli errori con Cloud Functions

Se la tua app Web non funziona come previsto e ritieni che potrebbe essere dovuto a delle funzioni, segui i passaggi in questa pagina di risoluzione dei problemi.

Consenti l'accesso pubblico non autenticato

Se ricevi errori relativi alle autorizzazioni nel pannello Console di Chrome DevTools, procedi nel seguente modo:

1. Leggi la panoramica sull'autenticazione | Pagina Cloud Run
2. Fare clic sul collegamento per visualizzare e completare le attività richieste per consentire l'accesso pubblico non autenticato alla funzione.

3. Torna all'app Reviewly . Ad esempio: http://localhost:8080.
4. Fai clic su Aggiungi alcune recensioni fittizie e attendi qualche secondo.
   • Se vengono visualizzate le recensioni: non è necessario continuare con questi passaggi per la risoluzione dei problemi e puoi passare direttamente alla sezione Configurazione dell'app Web Chatbot in questo codelab.
   • Se le recensioni non vengono visualizzate: continua con questa sezione di risoluzione dei problemi.

Gestire gli errori di autorizzazione insufficiente

1. Nella console Firebase, vai a Funzioni .
2. Passa il mouse sopra la funzione addMockReviews , quindi fai clic su >Visualizza registri .

3. Scorri i log finché non trovi un errore simile a uno dei seguenti:

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. Nella console Google Cloud, vai alla pagina Autorizzazioni IAM e seleziona il tuo progetto.
5. Nella tabella, trova la colonna Nome .
   Nella pagina IAM e amministrazione è presente una tabella di utenti e ruoli. La colonna del nome nella tabella descrive lo scopo dell'utente, o entità. Potresti avere un'entità con il nome Account del servizio di elaborazione predefinito .

Se vedi l' account del servizio di elaborazione predefinito , procedi nel seguente modo:

1. Clic Modifica principale .

2. Continua con la sezione Aggiungi ruoli all'account del servizio di calcolo predefinito in questo codelab.

Se non vedi l' account del servizio di elaborazione predefinito , procedi nel seguente modo:

1. Fare clic su Concedi accesso .
2. Nella casella di testo Nuove entità immettere compute .
3. Nel menu dei suggerimenti automatici visualizzato, seleziona Account del servizio di calcolo predefinito .

Aggiungi ruoli all'account del servizio di calcolo predefinito

Nella sezione Assegna ruoli dell'account del servizio di calcolo predefinito :

1. Espandi il menu Seleziona un ruolo .
2. Nella casella di testo Filtro , inserisci Cloud Datastore User .
3. Nel menu dei suggerimenti automatici visualizzato, seleziona Utente Cloud Datastore .
4. Clic Aggiungi un altro ruolo .
   1. Espandi il menu Seleziona un ruolo .
   2. Nella casella di testo Filtro , inserisci Cloud Storage for Firebase Admin .
   3. Nel menu dei suggerimenti automatici visualizzato, seleziona Cloud Storage for Firebase Admin .
5. Clic Aggiungi un altro ruolo .
   1. Espandi il menu Seleziona un ruolo .
   2. Nella casella di testo Filtro , inserisci Cloud Storage for Firebase Service Agent .
   3. Nel menu dei suggerimenti automatici visualizzato, seleziona Cloud Storage for Firebase Service Agent .
6. Fare clic su Salva .