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à preconfezionate alle tue app con un codice minimo, anche quelle basate sull'IA. Questo codelab mostra come integrare due estensioni Firebase in un'app web in modo da poter sfruttare l'API Gemini per generare descrizioni delle 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 offra 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 progetto Firebase

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'IA per offrire un'esperienza utente piacevole e personalizzata ai partecipanti. L'app della conferenza completata fornisce ai partecipanti un chatbot di IA conversazionale basato su un modello di IA generativa multimodale (noto anche come modello linguistico di grandi dimensioni o LLM) e può rispondere a domande su argomenti generali, personalizzati in base alla programmazione e agli argomenti della conferenza. Il chatbot ha il contesto storico e le conoscenze sulla data/ora corrente e sugli argomenti e sulla programmazione di Friendly Conf, quindi le sue risposte possono tenere conto di tutto questo contesto.

Servizi Firebase

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

Firebase Extensions

Le estensioni Firebase che utilizzerai in questo codelab sono:

• 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 di avere installato Node.js versione 20.0.0 o successive:

   node -v
   

2. Se non hai Node.js versione 20.0.0 o successive, scarica e installa la versione LTS più recente.

Recupera 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 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 una procedura rapida per eseguire l'app web utilizzando istruzioni semplificate. Tuttavia, se non hai mai utilizzato questo prodotto, ti consigliamo di completare questo codelab (anziché la guida rapida) perché contiene l'insieme di istruzioni più completo.

Se hai dubbi sull'applicazione corretta del codice come indicato in questo codelab, puoi trovare il codice della soluzione nel ramo end git.

Installa l'interfaccia a riga di comando di Firebase

1. Verifica di avere installato l'interfaccia a riga di comando di Firebase e che sia la versione 13.6 o successiva:

   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 Configurare 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 sono valide 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 al suo interno. In seguito 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 un Account Google.
2. Fai clic su Crea un progetto, poi inserisci un nome per il progetto (ad esempio AI Extensions Codelab).
   Ricorda l'ID progetto assegnato automaticamente per il tuo progetto Firebase (o fai clic sull'icona Modifica per impostare l'ID progetto che preferisci). Ti servirà questo ID in un secondo momento per identificare il tuo progetto Firebase nell'interfaccia a riga di comando di Firebase. Se dimentichi il tuo ID, puoi trovarlo in un secondo momento nelle Impostazioni progetto.
3. Fai clic su Continua.
4. Se richiesto, leggi e accetta i termini di Firebase e poi fai clic su Continua.
5. Per questo codelab, non è necessario Google Analytics, quindi disattiva l'opzione Google Analytics.
6. Fai clic su Crea progetto, attendi il provisioning del progetto e poi fai clic su Continua.

Eseguire l'upgrade del piano tariffario di Firebase

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

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

Tieni inoltre presente che, con la fatturazione abilitata nel tuo progetto Firebase, ti verranno addebitate le chiamate effettuate dall'estensione 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'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.

Aggiungere un'app web al progetto Firebase

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

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

Configura Firebase Authentication

1. Vai ad Autenticazione utilizzando il riquadro di navigazione a sinistra.
2. Fai clic su Inizia.
3. Nella colonna Fornitori 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 Indirizzo email dell'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, scegli una posizione vicina ai tuoi utenti.
5. Fai clic su Avvia in modalità di test. Leggi il disclaimer relativo alle regole di sicurezza.
   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.
6. Fai clic su Crea.

Configurare Cloud Storage for Firebase

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

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

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

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

1. Vai all'estensione "Creare 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 Esamina le API abilitate e le risorse create, fai clic su Attiva accanto a tutti i servizi suggeriti e poi su Avanti.
5. Per le autorizzazioni che ti vengono suggerite, seleziona Concede e poi fai clic su Avanti.
6. Configura l'estensione:
   1. Nel menu Fornitore 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à Cloud Functions, seleziona la località che preferisci (ad esempio Iowa (us-central1) o la località specificata in precedenza per il database Firestore).
   4. Lascia invariati gli altri valori predefiniti.
7. Fai clic su Installa estensione e attendi l'installazione dell'estensione.

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

Sebbene lo scopo di questo codelab sia interagire con l'estensione "Crea un chatbot con l'API Gemini" tramite un'app web, è utile capire 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, che puoi fare nella console Firebase.

1. Nella console Firebase, vai a Firestore e fai clic su Crea raccolta nella prima colonna.
2. Nella casella di testo ID raccolta, inserisci users e fai clic su Avanti.
3. Nella casella di testo ID documento, fai clic su ID automatico e poi su Salva.
4. Nella raccolta users, fai clic su Avvia raccolta.
5. Nella casella di testo ID raccolta, inserisci messages e 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 nella 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 nella query.
   
   Per generare questa risposta, il modello Gemini sottostante ha utilizzato le conoscenze storiche della query precedente.

6. Configurare l'app web

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

Configurare l'interfaccia a riga di comando di Firebase per l'esecuzione nel progetto Firebase

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

firebase use YOUR_PROJECT_ID

Esegui il deployment delle regole di sicurezza per Firestore e Cloud Storage

La base di codice di questo codelab contiene già un insieme di regole di sicurezza di Firestore e Cloud Storage scritte per te. Dopo aver implementato queste regole di sicurezza, i servizi Firebase nel tuo progetto Firebase sono protetti meglio da usi impropri.

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 sono valide per questo codelab)

Collegare l'app web al progetto Firebase

Il codice base della tua app web deve sapere quale progetto Firebase utilizzare per il database, lo spazio di archiviazione e così via. Aggiungi la configurazione Firebase al codice base dell'app.

1. Ottieni la configurazione di Firebase:
   1. Nella console Firebase, vai a Impostazioni progetto all'interno del 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 dell'SDK, copia il codice completo di initializeApp, inclusa la costante firebaseConfig.
2. Aggiungi la configurazione Firebase al codice base della tua app web:
   1. Nell'editor di codice, apri il file src/app/lib/firebase/firebase.config.js.
   2. Seleziona tutto nel file e sostituisci 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

1. Nel browser, torna alla scheda con l'app web Friendly Conf in esecuzione localmente.
2. Fai clic su Accedi con Google e, se necessario, seleziona il tuo Account Google.
3. Dopo aver eseguito 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é il chatbot risponda.

Il chatbot nell'app risponde con una risposta generica.

Specializza il chatbot per l'app

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

1. Nell'app web nel browser, cancella la conversazione facendo clic sul pulsante rosso "X" (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 nella riga 77 o nelle vicinanze contenente prompt: userMsg con quanto segue:
   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é il chatbot risponda.

Il chatbot risponde con le conoscenze basate sul 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 e alla data/all'ora corrente. Ora puoi specificare domande di follow-up 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 ...doc.data(), nella riga 56 o nelle vicinanze 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 la possibilità di conversare con il chatbot con il contesto storico:

1. Nella casella di testo Digita un messaggio, fai una domanda come: Any other interesting talks about AI?Il chatbot restituirà una risposta.
2. Nella casella di testo Digita un messaggio, fai 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 chat fa ora parte del contesto, il chatbot comprende le domande di follow-up.

(Extra) Esegui l'app web utilizzando Firebase Local Emulator Suite

Firebase Local Emulator Suite ti consente di testare localmente la maggior parte delle funzionalità dell'app web.

1. Nel terminale, assicurati di trovarti nella directory principale dell'app web.
2. Esegui il comando seguente per installare ed eseguire Firebase Local Emulator Suite:

   firebase init emulators
   firebase emulators:start
   

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

L'estensione "Attività multimodali con l'API Gemini" chiama l'API Gemini con prompt multimodali che contengono un prompt di testo e un URL file o Cloud Storage supportato (tieni presente che anche l'API Gemini di Google AI utilizza un URL Cloud Storage come infrastruttura di URL 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 il caricamento di un'immagine e la scrittura dell'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 finché non raggiungi la sezione Configura estensione.
   1. Nel menu Fornitore 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 (Prompt), inserisci: Please describe the provided image; if there is no image, say "no image"
   4. Nella casella di testo Campo immagine, inserisci: image
   5. Nel menu Località Cloud Functions, seleziona la località che preferisci (ad esempio Iowa (us-central1) o la località specificata in precedenza per il database Firestore).
   6. Lascia invariati gli altri valori predefiniti.
5. Fai clic su Installa estensione e attendi l'installazione dell'estensione.

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

Sebbene lo scopo di questo codelab sia interagire con l'estensione "Attività multimodali con l'API Gemini" tramite un'app web, è utile scoprire 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, che puoi fare nella console Firebase. L'estensione prende quindi l'URL immagine di Cloud Storage nel documento Cloud Firestore e lo passa come parte del prompt multimodale in una chiamata all'API Gemini.

Innanzitutto, carica un'immagine in un bucket Cloud Storage:

1. Vai a Archiviazione nel tuo progetto Firebase.
2. Fai clic su Crea cartella.
3. Nella casella di testo Nome della 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.

Aggiungi l'URL di Cloud Storage dell'immagine a un documento Firestore (che è l'attivatore dell'estensione):

1. Vai a Firestore nel tuo progetto Firebase
2. Fai clic su Avvia raccolta nella prima colonna.
3. Nella casella di testo ID raccolta, inserisci gallery e 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 Campo, inserisci image. Nella casella Valore, inserisci l'URI della posizione di archiviazione dell'immagine appena caricata.
5. Fai clic su Aggiungi campo.
6. Nella casella di testo Campo, inserisci published. Nella casella Tipo, seleziona boolean. 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 localmente.
2. Fai clic sulla scheda di navigazione Galleria.
3. Vedrai una galleria di immagini caricate e descrizioni generate con l'IA. Dovrebbe contenere l'immagine che hai caricato in precedenza nella cartella gallery del tuo bucket Storage.
4. Fai clic sul pulsante "Carica" e seleziona un'altra immagine JPEG.
5. Attendi qualche secondo affinché l'immagine venga visualizzata nella galleria. Dopo qualche istante, verrà visualizzata anche la descrizione generata dall'IA per l'immagine appena caricata.

Se vuoi capire come è stato implementato il codice, consulta src/app/gallery/page.tsx nel codice base dell'app web.

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 il tuo repository GitHub (e di memorizzare il codice sorgente solo localmente sulla tua macchina).
• Opzione 2: Firebase App Hosting: utilizza questa opzione se vuoi eseguire il deployment automatico ogni volta che esegui il push delle modifiche nel tuo repository GitHub. Questo nuovo servizio Firebase è progettato 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 il tuo repository GitHub (e di avere solo il codice sorgente archiviato localmente sulla tua macchina).

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 utilizzata 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 dell'app web in 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 eseguirà la compilazione e il nuovo 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 nel 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 Impostazioni di deployment > Directory principale, inserisci il nome della cartella con il codice sorgente (se package.json non si trova nella directory principale 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 e deployment.

Il nuovo deployment sarà pronto dopo alcuni minuti. Puoi controllare lo stato di implementazione nella sezione Hosting app della Console Firebase.

Da questo momento in poi, ogni volta che esegui il push di una modifica nel tuo repository GitHub, Firebase App Hosting eseguirà automaticamente la compilazione e il deployment dell'app.

9. Conclusione

Complimenti! Hai ottenuto ottimi risultati in questo codelab.

Installazione e configurazione delle estensioni

Hai utilizzato la Console Firebase per configurare e installare varie estensioni Firebase che utilizzano l'IA generativa. L'utilizzo delle Estensioni Firebase è pratico perché non devi apprendere e scrivere molto codice boilerplate per gestire l'autenticazione con i servizi Google Cloud o la logica di backend di Cloud Functions per ascoltare e interagire con i servizi e le API Firestore e Google Cloud.

Provare le estensioni utilizzando la Console Firebase

Invece di passare subito al codice, ti sei preso il tempo di capire come funzionano queste estensioni di IA generativa, in base a un input che hai fornito tramite Firestore o Cloud Storage. Questa opzione può essere particolarmente utile durante il debug dell'output di un'estensione.

Creare un'app web basata sull'IA

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

Nell'app web, utilizzi l'estensione "Chatbot con 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 limitato a un determinato utente.

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

Passaggi successivi

• Fai esperimenti con i prompt e sfrutta la grande finestra di contesto in Google AI Studio o Vertex AI Studio.
• Scopri di più sulla ricerca con RAG (Retrieval Augmented Generation) basata sull'IA.
• Prova un codelab autonomo che mostra come aggiungere un chatbot a un'app Firebase esistente utilizzando Firebase Genkit (un nuovo servizio di framework AI).
• Scopri le funzionalità di ricerca di similarità in Firestore e Cloud SQL per PostgreSQL.
• Insegna al tuo chatbot a chiamare la tua app esistente con le chiamate di funzione.