Creare app web basate sull'IA con le Estensioni Firebase per l'API Gemini

1. Prima di iniziare

Le estensioni Firebase ti consentono di aggiungere funzionalità preconfigurate alle tue app con un codice minimo, anche funzionalità basate sull'AI. Questo codelab mostra come integrare due estensioni Firebase in un'app web in modo da poter sfruttare l'API Gemini per generare descrizioni di immagini, riepiloghi e persino consigli personalizzati in base al contesto fornito e all'input dell'utente finale.

In questo codelab, imparerai a creare un'app web basata sull'AI che offre esperienze utente coinvolgenti con le estensioni Firebase.

Prerequisiti

• Conoscenza di Node.js, Next.js e TypeScript.

Obiettivi didattici

• Come utilizzare le estensioni Firebase per l'API Gemini per elaborare il linguaggio.
• Come utilizzare Cloud Functions for Firebase per comporre un contesto aumentato per il tuo modello linguistico.
• Come utilizzare JavaScript per accedere all'output prodotto da Firebase Extensions.

Che cosa ti serve

• Un browser a tua scelta, ad esempio 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

Nota: questo codelab utilizza i servizi Firebase e Google che richiedono un account di fatturazione Cloud. Se non hai mai utilizzato Firebase e Google Cloud, verifica la tua idoneità a ricevere un credito di 300$ e un account Cloud Billing di prova senza costi per provare i nostri servizi. In caso contrario, dovrai fornire un metodo di pagamento (ad esempio una carta di credito) per configurare un account di fatturazione Cloud (per informazioni dettagliate sui metodi di pagamento, consulta la documentazione sulla fatturazione Cloud).

2. Rivedi l'app web, i servizi Firebase e le estensioni

In questa sezione, esaminerai l'app web che creerai con questo codelab e scoprirai i servizi Firebase e le estensioni Firebase che utilizzerai.

App web

In questo codelab creerai un'app web chiamata Friendly Conf.

Lo staff della Friendly Conference ha deciso di utilizzare l'AI per offrire un'esperienza utente piacevole e personalizzata ai partecipanti. L'app per conferenze completata fornisce ai partecipanti un chatbot di AI conversazionale basato su un modello di AI generativa multimodale (noto anche come modello linguistico di grandi dimensioni o LLM), in grado di rispondere a domande su argomenti generali, adattati al programma e agli argomenti della conferenza. Il chatbot ha un contesto storico e conoscenze sulla data/ora corrente e sugli argomenti e sul programma di Friendly Conf, quindi le sue risposte possono tenere conto di tutto questo contesto.

Nota: questo è un codelab di grandi dimensioni con molti passaggi. Per sfruttare al meglio questo codelab:

• Prenditi il tempo necessario facendo delle pause.
• Quando lavori con il codice, prenditi il tempo necessario per capire di cosa si tratta e come funziona, anziché copiarlo e incollarlo senza pensarci.
• Se non riesci ad andare avanti, torna all'ultimo stato funzionante e assicurati di aver completato ogni passaggio in modo accurato.
• Se trovi un bug nel codelab o nel suo codice, segnalalo su GitHub.

Servizi Firebase

In questo codelab, utilizzerai molti servizi e funzionalità di Firebase e la maggior parte del codice iniziale è già fornita. La tabella seguente contiene i servizi che utilizzerai e i motivi per cui li utilizzerai.

Servizio	Motivo dell'utilizzo
Firebase Authentication	Utilizzi la funzionalità Accedi con Google per l'app web.
Cloud Firestore	Archivi i dati di testo in Cloud Firestore, che vengono poi elaborati dalle estensioni Firebase.
Cloud Storage for Firebase	I dati vengono letti e scritti da Cloud Storage per visualizzare le gallerie di immagini all'interno dell'app web.
Regole di sicurezza Firebase	Implementa le regole di sicurezza per proteggere l'accesso ai tuoi servizi Firebase.
Firebase Extensions	Configuri e installi le estensioni Firebase correlate all'AI e visualizzi i risultati all'interno dell'app web.
Bonus: Firebase Hosting	Se vuoi, puoi utilizzare Firebase Hosting per pubblicare la tua app web (senza un repository GitHub).
Bonus: Firebase App Hosting	Se vuoi, puoi utilizzare il nuovo Firebase App Hosting semplificato per pubblicare la tua app web dinamica Next.js (collegata a un repository GitHub).

Firebase Extensions

Le estensioni Firebase che utilizzerai in questo codelab includono:

• Creare un chatbot con l'API Gemini
• Attività multimodali con l'API Gemini

Le estensioni sono utili perché reagiscono agli eventi che si verificano nel tuo progetto Firebase. Entrambe le estensioni utilizzate in questo codelab rispondono quando crei nuovi documenti in raccolte preconfigurate in Cloud Firestore.

3. Configurazione dell'ambiente di sviluppo

Verificare la versione di Node.js

1. Nel terminale, verifica che sia installata la versione 20.0.0 o successive di Node.js:

   node -v
   

2. Se non hai Node.js versione 20.0.0 o successive, scarica l'ultima versione LTS e installala.

Recuperare il codice sorgente del codelab

Se hai un account GitHub:

1. Crea un nuovo repository utilizzando il nostro modello da github.com/FirebaseExtended/codelab-gemini-api-extensions
2. Clona il repository GitHub del codelab che hai appena creato:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

Se non hai installato git o preferisci non creare un nuovo repository:

Scarica il repository GitHub come file ZIP.

Esamina la struttura delle cartelle

La cartella principale include un file README.md che offre un avvio rapido per eseguire l'app web, utilizzando istruzioni semplificate. Tuttavia, se è la prima volta che utilizzi questo codelab, devi completarlo (anziché la guida rapida) perché contiene il set di istruzioni più completo.

Se non hai la certezza di aver applicato correttamente il codice come indicato in questo codelab, puoi trovare il codice della soluzione nel ramo git end.

Installa l'interfaccia a riga di comando di Firebase

1. Verifica di aver installato la CLI di Firebase e che la versione sia 13.6 o successive:

   firebase --version
   

2. Se hai installato l'interfaccia a riga di comando di Firebase, ma non è la versione 13.6 o successive, aggiornala:

   npm update -g firebase-tools
   

3. Se non hai installato l'interfaccia a riga di comando di Firebase, installala:

   npm install -g firebase-tools
   

Se non riesci ad aggiornare o installare l'interfaccia a riga di comando di Firebase a causa di errori di autorizzazione, consulta la documentazione di npm o utilizza un'altra opzione di installazione.

Accedi a Firebase

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

   cd codelab-gemini-api-extensions
   firebase login
   

   Se il terminale indica che hai già eseguito l'accesso a Firebase, puoi passare alla sezione Configura il progetto Firebase di questo codelab.
2. Nel terminale, a seconda che tu voglia che Firebase raccolga i dati, inserisci Y o N. (entrambe le opzioni funzionano per questo codelab)
3. Nel browser, seleziona il tuo Account Google e fai clic su Consenti.

4. Configura il progetto Firebase

In questa sezione, configurerai un progetto Firebase e registrerai un'app web Firebase. In questo codelab attiverai anche alcuni servizi Firebase utilizzati dall'app web di esempio.

Tutti i passaggi di questa sezione vengono eseguiti nella console Firebase.

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 AI Extensions Codelab).
   

   Questo nome del progetto viene utilizzato come nome visualizzato nelle interfacce Firebase e Firebase crea automaticamente un ID progetto univoco in base a questo nome. Tieni presente che ora puoi fare clic sull'icona Modifica per impostare l'ID progetto che preferisci, ma non potrai modificarlo dopo la creazione del progetto.

   Ricorda l'ID progetto perché ti servirà in seguito per identificare il tuo progetto Firebase nella CLI Firebase. Se dimentichi l'ID, puoi sempre trovarlo in un secondo momento nelle Impostazioni progetto.

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 le estensioni Firebase (e i relativi servizi cloud) 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.

Tieni inoltre presente che, con la fatturazione abilitata nel tuo progetto Firebase, ti verranno addebitati i costi delle chiamate che l'estensione effettua all'API Gemini (indipendentemente dal fornitore scelto, Google AI o Vertex AI). Scopri di più sui prezzi di Google AI e di Vertex AI.

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.

Nota: dopo aver completato questo codelab, puoi eseguire il downgrade del progetto al piano tariffario senza costi aggiuntivi (Spark).

Aggiungere un'app web al tuo progetto Firebase

1. Vai alla schermata Panoramica del progetto nel tuo progetto Firebase, quindi fai clic su Web.
2. Nella casella di testo Nickname app, inserisci un nickname memorabile per l'app, ad esempio My AI Extensions.
3. Fai clic su Registra app > Avanti > Avanti > Continua alla console.
   Puoi saltare tutti i passaggi relativi all'hosting nel flusso dell'app web perché configurerai facoltativamente un servizio di hosting più avanti in questo codelab.

Bene. Ora hai registrato un'app web nel tuo nuovo progetto Firebase.

Configurare Firebase Authentication

1. Vai a Autenticazione utilizzando il riquadro di navigazione a sinistra.
2. Fai clic su Inizia.
3. Nella colonna Provider aggiuntivi, fai clic su Google > Attiva.
4. Nella casella di testo Nome visibile al pubblico del progetto, inserisci un nome utile, ad esempio My AI Extensions Codelab.
5. Nel menu Email di assistenza per il progetto, seleziona il tuo indirizzo email.
6. Fai clic su Salva.

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. Non distribuire 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.

Nella sezione successiva di questo codelab, installerai e configurerai le due estensioni Firebase che utilizzerai nell'app web durante questo codelab.

5. Configurare l'estensione "Crea un chatbot con l'API Gemini"

Nota: le estensioni Firebase utilizzate in questo codelab sono ben documentate. Per ulteriori informazioni, consulta le pagine relative a ciascuna estensione, in particolare le pagine Guida introduttiva, Parametri configurabili e Fatturazione.

Installare l'estensione "Crea un chatbot con l'API Gemini"

1. Vai all'estensione "Crea un chatbot con l'API Gemini".
2. Fai clic su Installa nella console Firebase.
3. Seleziona il progetto Firebase e poi fai clic su Avanti.
4. Nella sezione Rivedi le API abilitate e le risorse create, fai clic su Abilita accanto a tutti i servizi suggeriti, quindi fai clic su Avanti.
5. Per le autorizzazioni suggerite, seleziona Concedi e poi fai clic su Avanti.
6. Configura l'estensione:
   1. Nel menu Fornitore dell'API Gemini, seleziona se vuoi utilizzare l'API Gemini di Google AI o Vertex AI. Per gli sviluppatori che utilizzano Firebase, consigliamo di utilizzare Vertex AI.
   2. Nella casella di testo Percorso raccolta Firestore, inserisci: users/{uid}/messages.
      Nei passaggi successivi di questo codelab, l'aggiunta di documenti a questa raccolta attiverà l'estensione per chiamare l'API Gemini.
   3. Nel menu Località di Cloud Functions, seleziona la località che preferisci (ad esempio Iowa (us-central1) o la località che hai specificato in precedenza per il tuo database Firestore).
   4. Lascia invariati gli altri valori predefiniti.
7. Fai clic su Installa estensione e attendi l'installazione.

Nota: mentre l'estensione viene installata, puoi guardare la tua playlist preferita di video di gatti.

Suggerimento: se l'installazione non va a buon fine, riprova. A volte il tuo progetto può riscontrare problemi di sincronizzazione che riguardano la creazione dell'account di servizio e l'assegnazione delle autorizzazioni.

Prova l'estensione "Crea un chatbot con l'API Gemini"

Sebbene l'obiettivo di questo codelab sia interagire con l'estensione "Crea un chatbot con l'API Gemini" tramite un'app web, è utile imparare come funziona l'estensione provandola prima nella console Firebase.

L'estensione viene attivata ogni volta che viene creato un documento Firestore nella raccolta users/{uid}/discussion/{discussionId}/messages, operazione che puoi eseguire nella console Firebase.

1. Nella console Firebase, vai a Firestore e poi fai clic su Avvia raccolta nella prima colonna.
2. Nella casella di testo ID raccolta, inserisci users e poi fai clic su Avanti.
3. Nella casella di testo ID documento, fai clic su ID automatico, quindi su Salva.
4. Nella raccolta users, fai clic su Avvia raccolta.
5. Nella casella di testo ID raccolta, inserisci messages e poi fai clic su Avanti.
   1. Nella casella di testo ID documento, fai clic su ID automatico.
   2. Nella casella di testo Field (Campo), inserisci prompt.
   3. Nella casella di testo Valore, inserisci Tell me 5 random fruits.
6. Fai clic su Salva e attendi qualche secondo.

Quando hai aggiunto questo documento, l'estensione ha attivato la chiamata all'API Gemini. Il documento che hai appena aggiunto alla raccolta messages ora include non solo il tuo prompt, ma anche il response del modello alla tua query.

Attiva di nuovo l'estensione aggiungendo un altro documento alla raccolta messages:

1. Nella raccolta messages, fai clic su Aggiungi documento.
2. Nella casella di testo ID documento, fai clic su ID automatico.
3. Nella casella di testo Field (Campo), inserisci prompt.
4. Nella casella di testo Valore, inserisci And now, vegetables.
5. Fai clic su Salva e attendi qualche secondo. Il documento che hai appena aggiunto alla raccolta messages ora include un response alla tua query.
   
   Quando ha generato questa risposta, il modello Gemini sottostante ha utilizzato le conoscenze storiche della tua query precedente.

6. Configurare l'app web

Per eseguire l'app web, devi eseguire i comandi nel terminale e aggiungere codice nell'editor di codice.

Configura la CLI Firebase per l'esecuzione sul tuo progetto Firebase

Nel terminale, indica all'interfaccia a riga di comando di utilizzare il tuo progetto Firebase eseguendo il seguente comando:

firebase use YOUR_PROJECT_ID

Suggerimento: se dimentichi l'ID progetto, puoi sempre trovarlo nelle impostazioni del progetto della console Firebase.

Implementa le regole di sicurezza per Firestore e Cloud Storage

La base di codice di questo codelab ha già un insieme di regole di sicurezza di Firestore e regole di sicurezza di Cloud Storage scritte per te. Una volta implementate queste regole di sicurezza, i servizi Firebase nel tuo progetto Firebase sono protetti meglio dall'uso improprio.

1. Per eseguire il deployment delle regole di sicurezza, esegui questo comando nel terminale:

   firebase deploy --only firestore:rules,storage
   

2. Se ti viene chiesto se concedere a Cloud Storage il ruolo IAM per utilizzare le regole tra servizi, inserisci Y o N. (entrambe le opzioni funzionano per questo codelab)

Collega la tua app web al progetto Firebase

Il codebase della tua app web deve sapere quale progetto Firebase deve utilizzare per il database, l'archiviazione e così via. Per farlo, aggiungi la configurazione Firebase al codebase dell'app.

1. Ottieni la configurazione di Firebase:
   1. Nella console Firebase, vai a Impostazioni progetto all'interno del tuo progetto Firebase.
   2. Scorri verso il basso fino alla sezione Le tue app e seleziona l'app web registrata.
   3. Nel riquadro Installazione e configurazione degli SDK, copia il codice initializeApp completo, inclusa la costante firebaseConfig.
2. Aggiungi la configurazione Firebase al codebase della tua app web:
   1. Nell'editor di codice, apri il file src/lib/firebase/firebase.config.js.
   2. Seleziona tutto il contenuto del file e sostituiscilo con il codice che hai copiato.
   3. Salva il file.

Visualizzare l'anteprima dell'app web nel browser

1. Nel terminale, installa le dipendenze ed esegui l'app web:

   npm install
   npm run dev
   

2. Nel browser, vai all'URL di hosting ospitato localmente per visualizzare l'app web. Ad esempio, nella maggior parte dei casi, l'URL è http://localhost:3000/ o qualcosa di simile.

Utilizzare il chatbot dell'app web

Nota: localhost è un dominio autorizzato predefinito per Firebase Authentication. Se preferisci utilizzare un altro servizio (ad esempio 127.0.0.1), devi aggiungere il nome host all'elenco Domini autorizzati.

1. Nel browser, torna alla scheda con l'app web Friendly Conf in esecuzione in locale.
2. Fai clic su Accedi con Google e, se necessario, seleziona il tuo Account Google.
3. Una volta effettuato l'accesso, vedrai una finestra della chat vuota.
4. Digita un saluto (ad esempio hi) e poi fai clic su Invia.
5. Attendi qualche secondo affinché la chat risponda.

Il chatbot nell'app risponde con una risposta generica.

Specializzare il chatbot per l'app

Il modello Gemini sottostante utilizzato dal chatbot della tua app web deve conoscere i dettagli specifici della conferenza quando genera risposte per i partecipanti che utilizzano l'app. Esistono molti modi per controllare e indirizzare queste risposte e in questa sottosezione del codelab ti mostriamo un modo molto semplice fornendo "contesto" nel prompt iniziale (anziché solo l'input dell'utente dell'app web).

1. Nell'app web del browser, cancella la conversazione facendo clic sul pulsante "x" rosso (accanto al messaggio nella cronologia chat).
2. Nell'editor di codice, apri il file src/app/page.tsx.
3. Scorri verso il basso e sostituisci il codice alla riga 93 o nelle vicinanze che riporta prompt: userMsg con il seguente:
   prompt: preparePrompt(userMsg, messages),
4. Salva il file.
5. Torna all'app web in esecuzione nel browser.
6. Digita di nuovo un saluto (ad esempio hi) e poi fai clic su Invia.
7. Attendi qualche secondo affinché la chat risponda.

Il chatbot risponde con conoscenze guidate dal contesto fornito in src/app/lib/context.md. Anche se non hai digitato una richiesta specifica, il modello Gemini sottostante genera un consiglio personalizzato in base a questo contesto, nonché alla data e all'ora correnti. Ora puoi specificare domande aggiuntive e approfondire l'argomento.

Questo contesto espanso è importante per il chatbot, ma non devi mostrarlo all'utente dell'app web. Ecco come nasconderlo:

1. Nell'editor di codice, apri il file src/app/page.tsx.
2. Scorri verso il basso e sostituisci il codice nella riga 56 o in prossimità di questa che riporta ...doc.data(), con il seguente:
   ...prepareMessage(doc.data()),
3. Salva il file.
4. Torna all'app web in esecuzione nel browser.
5. Ricarica la pagina.

Puoi anche provare a conversare con il chatbot con il contesto storico:

1. Nella casella di testo Digita un messaggio, poni una domanda come: Any other interesting talks about AI?Il chatbot restituirà una risposta.
2. Nella casella di testo Digita un messaggio, poni una domanda di follow-up correlata alla domanda precedente: Give me a few more details about the last one.

Il chatbot risponde con conoscenze storiche. Poiché la cronologia della chat ora fa parte del contesto, il chatbot comprende le domande successive.

7. Configurare l'estensione "Attività multimodali con l'API Gemini"

Nota: le estensioni Firebase utilizzate in questo codelab sono ben documentate. Per ulteriori informazioni, consulta le pagine relative a ciascuna estensione, in particolare le pagine Guida introduttiva, Parametri configurabili e Fatturazione.

L'estensione "Attività multimodali con l'API Gemini" chiama l'API Gemini con prompt multimodali che contengono un prompt di testo e un URL di file o Cloud Storage supportato (tieni presente che anche l'API Google AI Gemini utilizza un URL Cloud Storage come infrastruttura di URL di file sottostante). L'estensione supporta anche le variabili Handlebars per sostituire i valori del documento Cloud Firestore per personalizzare il prompt di testo.

Nella tua app, ogni volta che carichi un'immagine in un bucket Cloud Storage, puoi generare un URL e aggiungerlo a un nuovo documento Cloud Firestore, attivando così l'estensione per creare un prompt multimodale e chiamare l'API Gemini. Nel codice sorgente di questo codelab, abbiamo già fornito il codice per caricare un'immagine e scrivere l'URL in un documento Firestore.

Installa l'estensione "Attività multimodali con l'API Gemini"

1. Vai all'estensione "Attività multimodali con l'API Gemini".
2. Fai clic su Installa nella console Firebase.
3. Seleziona il progetto Firebase.
4. Fai clic su Avanti > Avanti > Avanti fino a raggiungere la sezione Configura estensione.
   1. Nel menu Fornitore dell'API Gemini, seleziona se vuoi utilizzare l'API Gemini di Google AI o Vertex AI. Per gli sviluppatori che utilizzano Firebase, consigliamo di utilizzare Vertex AI.
   2. Nella casella di testo Percorso raccolta Firestore, inserisci: gallery
   3. Nella casella di testo Prompt, inserisci: Please describe the provided image; if there is no image, say "no image"
   4. Nella casella di testo Image field (Campo immagine), inserisci: image
   5. Nel menu Località di Cloud Functions, seleziona la località che preferisci (ad esempio Iowa (us-central1) o la località che hai specificato in precedenza per il tuo database Firestore).
   6. Lascia invariati gli altri valori predefiniti.
5. Fai clic su Installa estensione e attendi l'installazione.

Nota: mentre l'estensione viene installata, puoi guardare la tua playlist di video di gatti preferita.

Prova l'estensione "Attività multimodali con l'API Gemini"

Sebbene l'obiettivo di questo codelab sia interagire con l'estensione "Multimodal Tasks with the Gemini API" tramite un'app web, è utile imparare come funziona l'estensione provandola prima nella console Firebase.

L'estensione viene attivata ogni volta che viene creato un documento Firestore nella raccolta users/{uid}/gallery, operazione che puoi eseguire nella console Firebase. L'estensione prende quindi l'URL dell'immagine Cloud Storage nel documento Cloud Firestore e lo passa come parte del prompt multimodale in una chiamata all'API Gemini.

Per prima cosa, carica un'immagine in un bucket Cloud Storage:

1. Vai a Storage all'interno del tuo progetto Firebase.
2. Fai clic su Crea cartella.
3. Nella casella di testo Nome cartella, inserisci gallery.
4. Fai clic su Aggiungi cartella.
5. Nella cartella gallery, fai clic su Carica file.
6. Seleziona un file immagine JPEG da caricare.

Successivamente, aggiungi l'URL Cloud Storage dell'immagine a un documento Firestore (che è il trigger per l'estensione):

1. Vai a Firestore all'interno del tuo progetto Firebase.
2. Fai clic su Avvia raccolta nella prima colonna.
3. Nella casella di testo ID raccolta, inserisci gallery e poi fai clic su Avanti.
4. Aggiungi un documento alla raccolta:
   1. Nella casella di testo ID documento, fai clic su ID automatico.
   2. Nella casella di testo Field (Campo), inserisci image. Nella casella Valore, inserisci l'URI Posizione di archiviazione dell'immagine appena caricata.
5. Fai clic su Aggiungi campo.
6. Nella casella di testo Field (Campo), inserisci published. Nella casella Tipo, seleziona booleano. Nella casella Valore, seleziona true.
7. Fai clic su Salva e attendi qualche secondo.

La raccolta gallery ora include un documento che contiene una risposta alla tua query.

Utilizzare la galleria di immagini dell'app web

1. Nel browser, torna alla scheda con l'app web Friendly Conf in esecuzione in locale.
2. Fai clic sulla scheda di navigazione Galleria.
3. Vedrai una galleria di immagini caricate e descrizioni generate con l'AI. Dovrebbe contenere l'immagine che hai caricato in precedenza nella cartella gallery del bucket Storage.
4. Fai clic sul pulsante "Carica" e seleziona un'altra immagine JPEG.
5. Attendi qualche secondo che l'immagine venga visualizzata nella galleria. Qualche istante dopo, verrà visualizzata anche la descrizione creata con l'AI per l'immagine appena caricata.

Se vuoi capire il codice di implementazione, consulta src/app/gallery/page.tsx nel codebase dell'app web.

Suggerimento: se non viene generata alcuna descrizione dell'immagine e viene visualizzato l'errore PERMISSION_DENIED, disinstalla e reinstalla l'estensione per consentirle di impostare le autorizzazioni corrette per il service account che utilizza.

8. Bonus: esegui il deployment dell'applicazione

Firebase offre diversi modi per eseguire il deployment di un'applicazione web. Per questo codelab, scegli una delle seguenti opzioni:

• Opzione 1: Firebase Hosting: utilizza questa opzione se decidi di non creare un tuo repository GitHub (e hai solo il codice sorgente memorizzato localmente sul tuo computer).
• Opzione 2: Firebase App Hosting: utilizza questa opzione se vuoi il deployment automatico ogni volta che esegui il push delle modifiche nel tuo repository GitHub. Questo nuovo servizio Firebase è stato creato appositamente per soddisfare le esigenze delle applicazioni dinamiche Next.js e Angular.

Opzione 1: esegui il deployment utilizzando Firebase Hosting

Utilizza questa opzione se decidi di non creare un tuo repository GitHub (e di archiviare il codice sorgente solo localmente sul tuo computer).

1. Nel terminale, inizializza Firebase Hosting eseguendo questi comandi:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. Per il prompt: Detected an existing Next.js codebase in your current directory, should we use this?, premi Y.
3. Per il prompt In which region would you like to host server-side content, if applicable?, seleziona la posizione predefinita o quella che hai utilizzato in precedenza in questo codelab. Quindi premi Enter (o return su macOS).
4. Per il prompt: Set up automatic builds and deploys with GitHub?, premi N.
5. Esegui il deployment della tua app web su Hosting eseguendo questo comando:

   firebase deploy --only hosting
   

Operazione completata. Se aggiorni l'app e vuoi eseguire il deployment della nuova versione, esegui di nuovo firebase deploy --only hosting e Firebase Hosting creerà ed eseguirà nuovamente il deployment dell'app.

Opzione 2: esegui il deployment utilizzando Firebase App Hosting

Utilizza questa opzione se vuoi eseguire il deployment automatico ogni volta che esegui il push delle modifiche nel tuo repository GitHub.

1. Esegui il commit delle modifiche in GitHub.
2. Nella console Firebase, vai ad App Hosting all'interno del tuo progetto Firebase.
3. Fai clic su Inizia > Connettiti a GitHub.
4. Seleziona il tuo account GitHub e il repository. Fai clic su Avanti.
5. In Impostazione di deployment > Directory radice, inserisci il nome della cartella con il codice sorgente (se il tuo package.json non si trova nella directory radice del repository).
6. Per il ramo Live, seleziona il ramo main del tuo repository GitHub. Fai clic su Avanti.
7. Inserisci un ID per il tuo backend (ad esempio, chatbot).
8. Fai clic su Fine ed esegui il deployment.

Il completamento del nuovo deployment richiede qualche minuto. Puoi controllare lo stato del deployment nella sezione App Hosting della console Firebase.

Da questo momento in poi, ogni volta che esegui il push di una modifica nel tuo repository GitHub, Firebase App Hosting creerà e implementerà automaticamente la tua app.

9. Conclusione

Complimenti! Hai fatto molto in questo codelab.

Installazione e configurazione delle estensioni

Hai utilizzato la console Firebase per configurare e installare varie estensioni Firebase che utilizzano l'AI generativa. L'utilizzo delle estensioni Firebase è comodo perché non devi imparare e scrivere un sacco di codice boilerplate per gestire l'autenticazione con i servizi Google Cloud o la logica di Cloud Functions di backend per ascoltare e interagire con Firestore e i servizi e le API Google Cloud.

Prova delle estensioni utilizzando la console Firebase

Invece di passare direttamente al codice, hai dedicato del tempo a capire come funzionano queste estensioni di AI generativa, in base a un input che hai fornito tramite Firestore o Cloud Storage. Ciò può essere particolarmente utile durante il debug dell'output di un'estensione.

Creazione di un'app web basata sull'AI

Hai creato un'app web basata sull'AI che utilizza le estensioni Firebase per accedere solo ad alcune funzionalità del modello Gemini.

Nell'app web, utilizzi l'estensione "Chatbot con l'API Gemini" per fornire all'utente un'interfaccia di chat interattiva, che include il contesto storico e specifico dell'app nelle conversazioni, in cui ogni messaggio viene archiviato in un documento Firestore con ambito limitato a un determinato utente.

L'app web utilizzava anche l'estensione "Attività multimodali con l'API Gemini" per generare automaticamente descrizioni delle immagini caricate.

Passaggi successivi

• Sperimenta con i prompt e sfrutta l'ampia finestra contestuale in Google AI Studio o Vertex AI Studio.
• Scopri di più sulla ricerca AI Retrieval Augmented Generation (RAG).
• Prova un codelab autonomo che mostra come aggiungere un chatbot a un'app Firebase esistente utilizzando Genkit (un nuovo servizio di framework AI).
• Scopri di più sulle funzionalità di ricerca per similarità in Firestore e Cloud SQL per PostgreSQL.
• Insegna al tuo chatbot a chiamare la tua app esistente con la chiamata di funzioni.