Crea app AI con l'ecosistema Google

1. Prima di iniziare

Lo sviluppo di software si è evoluto. Gli sviluppatori di maggior successo non si limitano a scrivere codice, ma orchestrano strumenti e agenti AI per creare in modo migliore e più rapido. L'ecosistema di strumenti di Google offre una suite completa per l'intero ciclo di vita: generazione di UI, prototipazione e deployment di app, sviluppo di funzionalità di AI e integrazione di backend sicura e scalabile. In questo codelab, utilizzerai Google Stitch per progettare la UI, Google AI Studio per creare il vibe code ed eseguire il deployment dell'app e Firebase per sviluppare funzionalità di AI e archiviare le informazioni in un backend sicuro e scalabile.

L'app che creerai in questo codelab si chiama Decidi per me, un assistente per le decisioni per le persone indecise che devono affrontare scelte di vita (come cambiare appartamento, carriera o hobby). L'utente inserisce un dilemma e le sue priorità nella vita e l'app utilizza l'AI per aiutarlo a decidere in base a ciò che riduce al minimo la delusione a lungo termine. L'app fornisce anche all'utente un primo passo concreto. La versione finale dell'app dovrebbe essere simile a questa:

Obiettivi didattici

• Progetta UI con Google Stitch.
• Crea codice per un'app web con Google AI Studio.
• Utilizza Firebase per sviluppare funzionalità di AI e archiviare informazioni nel cloud.
• Esegui il deployment di un'app web in produzione con Google AI Studio (basato su Cloud Run).

2. Progettare l'interfaccia utente con Stitch

1. Scarica l'immagine mockup (DecideForMeScreen.jpeg). Salvala in una cartella locale in cui puoi trovarla.
2. Vai a Stitch, individua il campo di immissione e seleziona l'opzione Web. Per questo codelab, ti concentrerai sull'esperienza web, ma puoi anche utilizzare Stitch per generare schermate mobile.
3. Carica l'immagine del mockup:
   1. Fai clic su + (il pulsante Aggiungi).
   2. Seleziona Carica file.
   3. Allega l'immagine che hai scaricato nel passaggio di configurazione (DecideForMeScreen.jpeg). Questo mockup disegnato a mano ti consente di testare le funzionalità multimodali di Stitch.
4. Copia il seguente prompt e incollalo nel campo di immissione:

   # General Guidance
   Create a modern, clean, and highly polished UI for a web application called
   "Decide For Me" - a hyper-rational decision assistant.
   
   CRITICAL: Replicate the exact layout, structure, and element placement shown in
   the hand-drawn mockup file DecideForMeScreen.jpeg. Do not add any extra menus,
   sidebars, buttons, or top/bottom navigation bars that are not explicitly drawn
   in the file. Stick strictly to the skeleton provided in the mockup.
   
   # Layout & Structure
   - Two-Column Split Screen:
     - Left Side (Main Chat Area): Takes up roughly 70-75% of the screen width. It
       should feel like a premium, focused workspace.
     - Right Side (Configuration Panel): A sidebar taking up 25-30% of the screen
       width with a distinct, subtle background color to separate it from the
       chat.
   
   # Right Panel: Configuration Screen
   - Header: Title it "My Priorities" with a clean, minimalist typography.
   - Content Card: A styled card containing a text box or paragraph area
     showcasing the user's priorities.
   - Interactions: Include a clear "Edit Priorities" button. When clicked, this
     area should visually toggle into an editable textarea or input field.
   
   # Left Panel: Chat & Dilemma Decision Screen
   - Chat History: A clean vertical flow of message bubbles.
     - The first message bubble must be aligned to the left (system message) and
       say: "Tell me your dilemma". Use a friendly, neutral background color for
       this bubble.
   - Bottom Input Area: Instead of a traditional single-line chat bar, create a
     unified, beautiful "Decision Submission" layout positioned at the bottom:
     - Dual Input Fields: Place two horizontal or cleanly stacked input fields.
       - Input 1 label: "Option A"
       - Input 2 label: "Option B"
     - Action Button: A prominent, styled "Go" action button to trigger the
       reasoning loop.
   
   # Theme & Aesthetic
   - Vibe: Hyper-rational, clean, trustworthy, and modern. Use a sophisticated
     color palette (e.g., deep slates, clean whites/grays, and a sharp accent
     color like a subtle indigo or teal for active states and buttons).
   - Spacing & Typography: Use generous whitespace, soft rounded corners
     (border-radius) for cards and buttons, and a highly legible sans-serif font.
   

5. Fai clic sulla freccia di generazione nell'angolo in basso a destra del campo di immissione. Stitch genera la schermata e un intero sistema di progettazione, inclusi una tavolozza dei colori, opzioni di carattere, iconografia e l'aspetto generale degli elementi dell'interfaccia utente:

Avviso:se la generazione dello schermo richiede più di 5 minuti, ricarica la pagina e invia di nuovo il prompt.

3. Crea l'app con Google AI Studio

1. Esporta la schermata che hai creato in Stitch in Google AI Studio:
   1. Fai clic sul progetto generato in Stitch.
   2. Fai clic su Esporta nell'angolo in alto a destra dello schermo.
   3. Verifica che l'opzione selezionata sia Google AI Studio.
   4. Scorri verso il basso fino al campo Descrizione.
2. Copia il seguente prompt e incollalo nel campo Descrizione:

   # General Guidance
   Build the "Decide For Me" app: A hyper-rational decision assistant for
   chronically indecisive people facing life choices (moving apartments, changing
   careers, picking a hobby). The user enters a dilemma and their top priorities
   in life. The app will help with the decision. Follow the instructions below to
   build it:
   
   # UI Instructions
   Using the design artifacts exported from Stitch (the PNG image and HTML file),
   build a fully functional web application that accurately mirrors the design and
   layout.
   
   # App Architecture & Initialization Instructions
   - Initialize the Firebase JS SDK for client-side services.
   - Set up Firebase Authentication using the Google provider. If a user is not
     logged in, show a clean, minimalist sign-in state. If the user is logged in,
     take them directly to the dilemma decision screen.
   - Initialize Firebase App Check in debug mode
     (`self.FIREBASE_APPCHECK_DEBUG_TOKEN = true`) without a ReCaptchaV3Provider
     (we will add that later).
   
   # State & Database Management Instructions
   - User Priorities:
     - Once authenticated, pull the user's saved priorities from Firebase
       Firestore at the path: `users/{userId}`. Each document should contain one
       string field: 'priorities'.
     - Bind this data to the Right Panel ("My Priorities").
     - When the user clicks the "Edit" button, toggle the view to a textarea, with
       a 'save' button. When saved, write the updated string back to
       `users/{userId}`.
     - Make sure to implement and deploy strong Security Rules for Firestore.
   
   # UI Stream Update & Display Instructions
   - Once the user submits option A and option B in the dilemma decision screen,
     display both options as a single message on the user side of the chat. Then,
     display a sleek loading state in the main chat panel. Leave the app in this
     "loading" state and do nothing else, we will process both options and build
     the server-side thinking later.
   

3. Fai clic su Crea con Google AI Studio. Si apre Google AI Studio in una nuova scheda e vengono trasferiti i file di progettazione e il prompt:
   1. Verifica che il prompt sia stato trasferito completamente.
   2. Se vedi solo una parte del prompt, incollalo di nuovo per intero.
4. Fai clic su Crea. Google AI Studio inizia a generare l'app Decidi per me in base al prompt e al design dell'interfaccia utente:
   1. Durante la generazione, suggerisce progetti di UI alternativi (ignorali per questo codelab, ma potrai scegliere progetti diversi in futuro).
   2. Quando viene richiesto di attivare Firebase, fai clic su Attiva.
5. Ispeziona e verifica l'app generata:
   1. Testa l'app nella scheda Anteprima.
   2. Passa alla scheda Codice per esaminare tutti i file e il codice generati.
   3. Google AI Studio ha anche creato un progetto Firebase, abilitato Firebase Authentication e Firestore e configurato Firebase nel tuo codebase. Accederai a questo progetto Firebase e lo utilizzerai nel passaggio successivo di questo codelab.

Avviso:se la generazione dell'app richiede più di 10 minuti, chiudi la scheda, torna a Stitch e riavvia la procedura dal passaggio Esporta.

4. Registrare il token di debug di App Check

Quando Google AI Studio genera l'app, crea un progetto Firebase e la connette. Devi accedere a questo progetto Firebase e registrare il tuo ambiente di sviluppo con un importante servizio di sicurezza chiamato Firebase App Check.

Accedere al progetto Firebase

1. Trova l'ID progetto del progetto Firebase creato da Google AI Studio:
   1. Passa alla scheda Codice in Google AI Studio.
   2. Apri il file firebase-applet-config.json.
   3. Copia il valore del campo projectId.
2. Vai alla console Firebase e cerca il progetto utilizzando questo ID.

   Nota: Se è la prima volta che crei un progetto Firebase, è disponibile un solo progetto, ovvero quello creato da Google AI Studio.

Avviso:se non riesci a trovare il file di configurazione nel codice o il progetto Firebase nella console, significa che il progetto non è stato creato. Puoi chiedere a Google AI Studio di risolvere il problema inserendo il prompt "Aggiungi Firebase Auth e Firestore a questa app".

Registra il token di debug

La tua app può utilizzare Firebase App Check per proteggere i servizi di backend e i modelli di AI da comportamenti illeciti, assicurandosi che il traffico in entrata provenga solo da app legittime.

Nota:la registrazione di un token di debug o l'inizializzazione di App Check non proteggono il backend o le API da soli. Devi applicare App Check per le API e i servizi specifici che vuoi proteggere. App Check viene applicato a Firebase AI Logic più avanti in questo codelab, mentre per servizi come Firestore puoi attivare l'applicazione nelle impostazioni di App Check dopo aver verificato il traffico in entrata.

Poiché la tua app viene eseguita nell'ambiente di anteprima di Google AI Studio, utilizza il provider di debug di App Check (self.FIREBASE_APPCHECK_DEBUG_TOKEN = true). Quando l'app web viene caricata, Firebase genera automaticamente un token di debug nella console per sviluppatori del browser.

1. Trova il token di debug:
   1. In Google AI Studio, apri gli strumenti per sviluppatori del browser mentre visualizzi l'anteprima dell'app:
      • Chrome, Edge o Firefox:premi F12 (o fai clic con il tasto destro del mouse in un punto qualsiasi dell'anteprima e seleziona Ispeziona), quindi seleziona la scheda Console.
      • macOS: premi Cmd+Opzione+I, quindi seleziona la scheda Console.
   2. Nei log della console, individua il messaggio di debug di App Check:

      AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
      You will need to safelist it in the Firebase console for it to work.
      

   3. Copia la stringa del token (senza le virgolette).
2. Registra il token di debug:
   1. Nella console Firebase, vai a Sicurezza > App Check > scheda App.
   2. Trova la tua app web nell'elenco, fai clic sul menu con tre puntini (⋮) e seleziona Gestisci token di debug.
   3. Fai clic su Aggiungi token di debug, incolla il token copiato, inserisci un nome come Google AI Studio Preview e fai clic su Salva.
   

Nota:se non vedi il token di debug nella console del browser, aggiorna la scheda di anteprima di Google AI Studio o chiedi all'agente Google AI Studio: "Assicurati che Firebase App Check sia inizializzato in modalità di debug utilizzando self.FIREBASE_APPCHECK_DEBUG_TOKEN = true."

5. Testare l'app

Ora che il progetto è connesso e il token di debug è registrato con App Check, testa le funzionalità di base: autenticazione e Firestore.

1. Testa l'autenticazione utente e salva le priorità:
   1. Nell'anteprima dell'app Decidi per me in Google AI Studio, testa la schermata di autenticazione accedendo con un Account Google.
   2. Salva le tue priorità di vita utilizzando il riquadro a destra (Le mie priorità).
2. Verifica l'autenticazione nella console Firebase:
   1. Vai alla console Firebase e apri Autenticazione.
   2. Verifica che l'Account Google che hai utilizzato per l'autenticazione nell'app Scegli per me sia elencato qui:
   
3. Verifica l'archiviazione dei dati di Firestore:
   1. Apri Firestore nella console Firebase.
   2. Verifica che le tue priorità siano memorizzate in un documento nel percorso users/{userId}:
   

Avviso:se non riesci a visualizzare alcun documento in Firestore, passa alla scheda Regole e assicurati di aver implementato regole di sicurezza efficaci. Se le regole di sicurezza sono vuote o restituiscono false a ogni chiamata, la tua app non può creare documenti in nessuna raccolta Firestore. In questo caso, torna ad AI Studio e chiedi di implementare regole di sicurezza efficaci per l'app.

6. Crea un flusso di decisione basato sull'AI utilizzando Firebase

La tua app utilizzerà l'AI per potenziare le azioni Decidi per me. Puoi utilizzare Firebase per creare questo flusso di decisione basato sull'AI.

Configurare Firebase AI Logic

1. Abilita l'API Gemini Developer in Firebase AI Logic:
   1. Apri Firebase AI Logic nella console Firebase, quindi fai clic su Inizia.
   2. Seleziona API Gemini Developer e segui le istruzioni nella console per abilitare l'API.

   Nota:a questo punto, App Check viene applicato automaticamente per Firebase AI Logic. Per questo motivo, la configurazione e la registrazione del provider di debug di App Check in questo codelab è stata importante: garantisce che le richieste dal tuo ambiente di sviluppo in Google AI Studio vengano verificate e non rifiutate da Firebase AI Logic.

2. Configura le impostazioni di Firebase AI Logic:
   1. Vai alla scheda Impostazioni.
   2. Imposta l'opzione Applica la modalità solo template su Applicata.
   3. Imposta l'opzione Applica la modalità utenti autenticati su Applicata.

Creare un modello di prompt del server

In questo codelab utilizzerai i template di prompt del server per le tue interazioni con l'API Gemini tramite Firebase AI Logic.

Prima di procedere con il modello, esamina quanto segue per capire perché è importante memorizzare la configurazione del modello, le istruzioni di sistema e i prompt lato server:

• Protezione della proprietà intellettuale: estrae i prompt dal dispositivo client e li mantiene al sicuro nel backend.
• Prevenzione degli attacchi di prompt injection:il client può compilare solo variabili specifiche con la convalida dello schema di backend.
• Aggiornamento senza rilasci di app:puoi aggiornare i prompt, le istruzioni di sistema e le configurazioni dei modelli nella console senza rilasciare una nuova versione dell'app.

Ecco come creare e testare un modello di prompt del server:

1. Crea il template di prompt del server:
   1. Vai alla scheda Modelli di prompt.
   2. Fai clic su Crea modello.
   3. Seleziona Modello vuoto.
   4. Crea il tuo primo modello utilizzando le seguenti informazioni:
      • Nome modello: Decider Flow
      • ID modello: decider-flow
      • Configurazione (frontmatter)

        model: "gemini-3.5-flash-lite"
        input:
          schema:
            priorities: "string, user's core priorities"
            optionA: "string, option A under consideration"
            optionB: "string, option B under consideration"
        output:
          format: json
          schema:
            verdict: string
            justification: string
            firstStep: string
        

      • Prompt e istruzioni di sistema (facoltative)

        {role "system"}
        You are the Decider Agent, a multi-stage reasoning engine that
        combines the roles of an honest and polite behavioral economist, a
        long-term strategic forecaster, and an executive decision coach.
        Your job is to take a user's dilemma and their core priorities, run
        them through a rigorous, adversarial 3-phase thinking process, and
        output a highly analytical, reasoning-backed final verdict. You must be
        direct, sharp, and realistic. Do not give generic platitudes or claim
        that "both options are great." You must force a clear choice.
        
        {role "user"}
        # Context & Inputs
        You are analyzing a critical life decision for the user. Base your
        entire multi-phase reasoning flow strictly on these three specific
        inputs:
        - User's Core Priorities: {{priorities}}
        - Option A under consideration: {{optionA}}
        - Option B under consideration: {{optionB}}
        
        Execute your reasoning flow through the following three phases:
        
        # Phase 1: Cynical Breakdown (Input-Driven Analysis)
        Analyze {{optionA}} and {{optionB}} strictly through the lens of the
        user's explicit {{priorities}}. Do not evaluate them in a vacuum.
        - Identify the hidden flaws, compromises, and psychological costs
          embedded in both choices.
        - Pinpoint exactly how {{optionA}} could directly conflict with or
          undermine their {{priorities}}.
        - Pinpoint exactly how {{optionB}} could directly conflict with or
          undermine their {{priorities}}.
        - Uncover any cognitive biases (like status quo bias or loss aversion)
          the user might be falling for in either option.
        
        # Phase 2: Long-Term Regret Projection
        Project the user 5 years into the future. Apply the Regret Minimization
        Framework to both paths:
        - The {{optionA}} Timeline: Quantify the absolute worst-case, deep,
          structural 5-year regret of choosing this path. Focus heavily on
          failures of courage vs. failures of action based on their
          {{priorities}}.
        - The {{optionB}} Timeline: Quantify the matching 5-year regret for
          this path.
        - Contrast these two timelines. Which option carries the kind of regret
          that fundamentally breaks the user's {{priorities}}?
        
        # Phase 3: Final Recommendation & Action Step
        Synthesize the cynical critiques and long-term regret scores.
        Weigh them against the user's {{priorities}} to determine which
        choice minimizes long-term disappointment.
        - Verdict: You must declare either {{optionA}} or {{optionB}} as the
          definitive winner. No compromise, no "it depends," and no hybrid
          options.
        - Justification: Provide a sharp, reasoning-backed explanation showing why
          the losing option was eliminated based on the Phase 1 and Phase 2
          analysis.
        - First Step: Give one microscopic, low-friction task the user can
          execute within the next 15 minutes to commit to or move toward the
          chosen verdict.
        

        Aggiungi un ulteriore {} intorno a {role "system"} e {role "user"} per scrivere le istruzioni di sistema e il prompt nella sintassi corretta:
      • Test input

        {
          "priorities": "Be financially stable, have a good work-life balance where I can travel twice a year",
          "optionA": "Buy a house for 615000 British pounds with a mortgage of 2800 per month for the next 35 years",
          "optionB": "Keep renting for 2400 per month for the foreseeable"
        }
        

2. Fai clic su Salva modello.
3. Testa il modello:
   1. Fai clic su Esegui test del prompt.
   2. Individua la Risposta di test e verifica che contenga tutti i campi specificati nel prompt (verdict, justification e firstStep).
   3. Se tutto corrisponde alla risposta prevista, blocca il modello utilizzando l'icona a forma di lucchetto nell'angolo in alto a destra del modello per garantire la stabilità della versione ed evitare modifiche accidentali.

Il tuo modello è pronto per essere utilizzato dalla tua app.

7. Utilizzare il modello di prompt Decisore nell'app

Fai in modo che la tua app web utilizzi il modello:

1. Torna alla tua app in Google AI Studio.
2. Chiedi all'agente di Google AI Studio di implementare l'azione Decidi per me:
   1. Copia il seguente prompt:

      Now let's implement the "Decide For Me" button action. When clicked, it
      should call the Firebase AI Logic SDK using a Template Generative Model.
      The prompt is stored in a prompt template with the id "decider-flow". When
      calling the API, pass the following variables as the input payload object:
      - priorities
      - optionA
      - optionB
      
      The API will return a JSON object. Handle the response asynchronously and
      extract:
      - verdict
      - justification
      - firstStep
      
      Once the data is received, update the UI state to append a new message to
      the chat array. Ensure it renders as a system chat bubble positioned on
      the left side of the chat screen, mapping these three fields clearly into
      the bubble's layout.
      
      Please provide the necessary front-end component state updates and the
      Firebase SDK call.
      

   2. Incolla il prompt nell'input della chat di Google AI Studio e fai clic su Invia.
3. Verifica la configurazione e testa l'assistente alle decisioni:
   1. Attendi che Google AI Studio termini di aggiungere Firebase AI Logic alla tua app.
   2. Passa alla scheda Codice e assicurati che nel file firebase-applet-config.json sia presente una chiave API. Se la chiave API di Firebase non è presente nel file di configurazione, chiedi a Google AI Studio di importarla.
   3. Passa alla scheda Anteprima.
   4. Invia le opzioni A e B e verifica che l'AI restituisca il verdetto della decisione, la motivazione e il primo passaggio.

Avviso:se la chiamata a Firebase AI Logic non va a buon fine anche con la chiave API Firebase configurata, chiedi all'agente Google AI Studio di risolvere il problema con il prompt:

"Assicurati che la chiamata Firebase AI Logic utilizzi getAI(app) e getTemplateGenerativeModel(aiInstance) con il modello decider-flow, analizzi correttamente la risposta JSON in verdict, justification e firstStep e non contenga vincoli di timeout o controlli di funzioni non necessari."

Per riferimento, il codice generato da Google AI Studio dovrebbe essere simile a questo:

const aiInstance = getAI(app);
const templateModel = getTemplateGenerativeModel(aiInstance);

const result = await templateModel.generateContent('decider-flow', {
  priorities: priorities,
  optionA: optA,
  optionB: optB
});

const rawText = result.response.text();

// Parse response text to extract fields
const cleaned = rawText.replace(/```json|```/g, '').trim();
const parsedData: { verdict?: string; justification?: string; firstStep?: string } = JSON.parse(cleaned);

const verdict = parsedData.verdict;
const justification = parsedData.justification;
const firstStep = parsedData.firstStep;

Eseguire il debug e monitorare le richieste

Se la tua app rileva errori, non riesce a generare una risposta o vuoi esaminare nel dettaglio il traffico API, utilizza gli strumenti di analisi e monitoraggio integrati di Firebase AI Logic:

1. Nella console Firebase, vai a Servizi AI > AI Logic > scheda Monitoraggio AI.
2. Controlla le metriche quantitative nella dashboard:
   • Volume e stato delle richieste:verifica se le richieste in entrata raggiungono il backend e restituiscono 200 OK o non vanno a buon fine con errori lato client o server.
   • Latenza:esamina il grafico della latenza per controllare il tempo di risposta end-to-end.
   • Conteggi dei token:monitora l'utilizzo dei token di input e output per richiesta.
3. Esamina le singole tracce di richiesta per il debug approfondito:fai clic su una traccia di richiesta specifica nella tabella delle tracce per esaminarne il payload.
   • Input:verifica che le variabili (priorities, optionA e optionB) siano state trasmesse correttamente dall'app client.
   • Output:visualizza il testo non elaborato generato dal modello per verificare se ha restituito un file JSON valido corrispondente allo schema.
   • Dettagli dell'errore:se una richiesta non va a buon fine, controlla il log degli errori di traccia per motivi quali token App Check non validi, rifiuto dell'autenticazione, limiti di quota o errori di convalida del prompt.
4. Risolvi i problemi relativi a Google AI Studio:
   • Se identifichi un errore nella traccia (ad esempio, analisi della risposta JSON non valida o parametri mancanti), copia il messaggio di errore o il payload.
   • Torna a Google AI Studio e chiedi all'assistente di risolvere il problema corrispondente nel codice dell'app.

8. (Facoltativo) Esegui il deployment dell'app

Ora che la tua app funziona in modalità di anteprima, esegui il deployment in produzione.

Per proteggere gli endpoint Firebase in produzione, configura un fornitore di attestazione di produzione da utilizzare con Firebase App Check (in questo codelab utilizzerai reCAPTCHA v3).

Devi prima fare il deployment della tua app per ottenere il suo URL pubblicato esatto, in modo da poter registrare il dominio specifico con reCAPTCHA anziché consentire tutte le app ai.studio.

Esegui il deployment dell'app e configura reCAPTCHA:

1. Esegui il deployment dell'app web con Google AI Studio:
   1. In Google AI Studio, fai clic su Pubblica nella barra di navigazione in alto.
   2. Fai clic su Inizia, rivedi o personalizza il nome e la descrizione dell'applicazione e fai clic su Pubblica la tua app.
   3. Attendi che Google AI Studio crei e implementi la tua app (in genere 1-2 minuti).
   4. Copia l'URL personalizzato live generato (ad esempio, https://decide-for-me-123.ai.studio) e annota il relativo dominio (ad esempio, decide-for-me-123.ai.studio).
2. Crea chiavi reCAPTCHA v3 in Google reCAPTCHA:
   1. Vai alla Console di amministrazione di Google reCAPTCHA.
   2. Inserisci un'etichetta (ad esempio, Decide For Me - Production).
   3. Seleziona Tipo di reCAPTCHA > reCAPTCHA v3 (basato sul punteggio).
   4. Nella sezione Domini, aggiungi il dominio di deployment esatto della tua app (ad esempio decide-for-me-123.ai.studio, omettendo https:// e qualsiasi percorso) o un dominio personalizzato, se prevedi di utilizzarne uno.
   5. Accetta i termini di servizio e fai clic su Invia.
   6. Tieni aperta questa scheda: ti serviranno sia la chiave del sito (chiave client pubblica) sia la chiave segreta (chiave server privata).
3. Registra la chiave segreta nella console Firebase:
   1. Vai a App Check nella console Firebase.
   2. Vai alla scheda App.
   3. Individua la tua applicazione web nell'elenco, fai clic (o fai clic sul menu con tre puntini ⋮) e seleziona reCAPTCHA v3.
   4. Incolla la chiave secret reCAPTCHA nel campo e fai clic su Salva.
4. Configura l'app client in modo che utilizzi ReCaptchaV3Provider:
   1. In Google AI Studio, passa al riquadro della chat e chiedi all'assistente di aggiornare la configurazione di App Check per la produzione:

      Please update our Firebase App Check initialization to use
      ReCaptchaV3Provider with the reCAPTCHA site key "YOUR_RECAPTCHA_SITE_KEY",
      while retaining support for debug tokens in non-production environments.
      

   2. Se esamini il codice direttamente nella scheda Codice, assicurati che l'inizializzazione di App Check corrisponda a questa struttura:

      import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
      
      const appCheck = initializeAppCheck(app, {
        provider: new ReCaptchaV3Provider("YOUR_RECAPTCHA_SITE_KEY"),
        isTokenAutoRefreshEnabled: true
      });
      

   3. Dopo aver aggiornato il codice, ripubblica l'app in Google AI Studio per trasferire la configurazione aggiornata di App Check sul tuo sito live.
5. Verifica il traffico di produzione e monitora App Check:
   1. Apri l'URL della tua app live in una finestra del browser in incognito, accedi con Google e prova a inviare un dilemma.
   2. Torna ad App Check nella console Firebase e controlla le schede API e Monitoraggio per verificare che le richieste siano registrate correttamente per Firestore e Firebase AI Logic.

Nota:App Check è già applicato per Firebase AI Logic. Dopo aver osservato che il 100% del traffico legittimo viene verificato nelle metriche di App Check, puoi anche impostare lo stato di applicazione di App Check per Firestore su Applica per rifiutare automaticamente tutto il traffico non verificato.

9. Conclusione

Complimenti! Hai creato da zero un'app utile con funzionalità di AI utilizzando gli strumenti di Builder Stack di Google. Questo è solo l'inizio: puoi fare molto di più con gli strumenti Google. Ora hai un progetto Firebase + Google Cloud. Esplora tutti i servizi a tua disposizione.

Visita questo link per ottenere il badge Percorso del Builder completato.

Per continuare il tuo percorso, vai alla pagina goo.gle/builders per il prossimo lab.

Se utilizzi già Antigravity 2.0, la piattaforma dedicata di Google per orchestrare più agenti autonomi in parallelo, puoi esportare rapidamente il tuo progetto da Google AI Studio e importarlo in Antigravity per continuare a lavorarci localmente. Antigravity offre Agent Skills per Firebase, che puoi installare con un solo clic. Queste competenze offrono anche supporto per lo sviluppo mobile, il che ti aiuta a replicare questa app negli ambienti Android e iOS, se vuoi.