Créez des applications d'IA avec l'écosystème Google

1. Avant de commencer

Le développement de logiciels a évolué. Les développeurs les plus performants ne se contentent pas d'écrire du code. Ils orchestrent des outils et des agents d'IA pour créer des applications de meilleure qualité plus rapidement. L'écosystème d'outils de Google fournit une suite complète pour l'ensemble du cycle de vie : génération d'UI, prototypage et déploiement d'applications, développement de fonctionnalités d'IA et intégration de backend sécurisée et évolutive. Dans cet atelier de programmation, vous allez utiliser Google Stitch pour concevoir l'UI, Google AI Studio pour coder et déployer l'application, et Firebase pour développer des fonctionnalités d'IA et stocker des informations dans un backend sécurisé et évolutif.

L'application que vous allez créer dans cet atelier de programmation s'appelle Décide pour moi. Il s'agit d'un assistant de décision pour les personnes indécises qui doivent faire des choix de vie (comme déménager, changer de carrière ou choisir un passe-temps). L'utilisateur saisit un dilemme et ses priorités dans la vie. L'application utilise l'IA pour l'aider à prendre une décision en fonction de ce qui minimise la déception à long terme. L'application propose également à l'utilisateur une première étape concrète. La version finale de votre application devrait ressembler à ceci :

Points abordés

• Concevez des UI avec Google Stitch.
• Vibe coder une application Web avec Google AI Studio.
• Utilisez Firebase pour développer des fonctionnalités d'IA et stocker des informations dans le cloud.
• Déployez une application Web en production avec Google AI Studio (optimisé par Cloud Run).

2. Concevoir l'UI avec Stitch

1. Téléchargez l'image de maquette (DecideForMeScreen.jpeg). Enregistrez-la dans un dossier local où vous pourrez la retrouver.
2. Accédez à Stitch, localisez le champ de saisie et sélectionnez l'option Web. (Pour cet atelier de programmation, vous vous concentrerez sur l'expérience Web, mais vous pouvez également utiliser Stitch pour générer des écrans mobiles.)
3. Importez l'image de la maquette :
   1. Cliquez sur + (bouton Ajouter).
   2. Sélectionnez Importer des fichiers.
   3. Joignez l'image que vous avez téléchargée lors de l'étape de configuration (DecideForMeScreen.jpeg). Cette maquette dessinée à la main vous permet de tester les capacités multimodales de Stitch.
4. Copiez le prompt suivant et collez-le dans le champ de saisie :

   # 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. Cliquez sur la flèche Générer en bas à droite du champ de saisie. Stitch génère l'écran et un système de conception complet, y compris une palette de couleurs, des options de police, une iconographie et l'apparence générale des éléments d'interface utilisateur :

Avertissement : Si la génération de votre écran prend plus de cinq minutes, rechargez la page et envoyez à nouveau la requête.

3. Créer l'application avec Google AI Studio

1. Exportez l'écran que vous avez créé dans Stitch vers Google AI Studio :
   1. Cliquez sur le design généré dans Stitch.
   2. Cliquez sur Exporter en haut à droite de l'écran.
   3. Vérifiez que l'option sélectionnée est Google AI Studio.
   4. Faites défiler la page jusqu'au champ Description.
2. Copiez l'invite suivante et collez-la dans le champ Description :

   # 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. Cliquez sur Compiler avec Google AI Studio. Google AI Studio s'ouvre dans un nouvel onglet, en conservant vos fichiers de conception et votre requête :
   1. Vérifiez que la requête a été entièrement transférée.
   2. Si vous ne voyez qu'une partie de la requête, collez-la à nouveau en entier.
4. Cliquez sur Compiler. Google AI Studio commence à générer l'application Decide For Me en fonction de votre prompt et de la conception de l'UI :
   1. Pendant la génération, il suggère d'autres conceptions d'UI (ignorez-les pour cet atelier de programmation, mais vous pourrez choisir d'autres conceptions à l'avenir).
   2. Lorsque vous êtes invité à activer Firebase, cliquez sur Activer.
5. Inspectez et vérifiez l'application générée :
   1. Testez l'application dans l'onglet Aperçu.
   2. Passez à l'onglet Code pour examiner tous les fichiers et le code générés.
   3. Google AI Studio a également créé un projet Firebase, activé Firebase Authentication et Firestore, et configuré Firebase dans votre code. Vous allez accéder à ce projet Firebase et l'utiliser lors de la prochaine étape de cet atelier de programmation.

Avertissement : Si la génération de votre application prend plus de 10 minutes, fermez l'onglet, revenez à Stitch et recommencez à l'étape Exporter.

4. Enregistrer votre jeton de débogage App Check

Lorsque Google AI Studio génère l'application, il crée un projet Firebase et y associe votre application. Vous devez accéder à ce projet Firebase et enregistrer votre environnement de développement avec un service de sécurité important appelé Firebase App Check.

Accéder à votre projet Firebase

1. Recherchez l'ID du projet Firebase créé par Google AI Studio :
   1. Passez à l'onglet Code dans Google AI Studio.
   2. Ouvrez le fichier firebase-applet-config.json.
   3. Copiez la valeur du champ projectId.
2. Accédez à la console Firebase et recherchez le projet à l'aide de cet ID.

   Remarque : Si c'est la première fois que vous créez un projet Firebase, un seul projet est disponible, celui créé par Google AI Studio.

Avertissement : Si vous ne trouvez pas le fichier de configuration dans le code ni le projet Firebase dans la console, cela signifie que le projet n'a pas été créé. Vous pouvez demander à Google AI Studio de le corriger en saisissant la requête Veuillez ajouter Firebase Auth et Firestore à cette application.

Enregistrer votre jeton de débogage

Votre application peut utiliser Firebase App Check pour protéger vos services de backend et vos modèles d'IA contre les utilisations abusives en s'assurant que le trafic entrant provient uniquement d'applications légitimes.

Remarque : L'enregistrement d'un jeton de débogage ou l'initialisation d'App Check ne protègent pas votre backend ni vos API en soi. Vous devez appliquer App Check pour les API et les services spécifiques que vous souhaitez protéger. App Check est appliqué à Firebase AI Logic plus loin dans cet atelier de programmation. Pour les services tels que Firestore, vous pouvez activer l'application dans les paramètres App Check une fois que vous avez vérifié le trafic entrant.

Comme votre application s'exécute dans l'environnement d'aperçu Google AI Studio, elle utilise le fournisseur de débogage App Check (self.FIREBASE_APPCHECK_DEBUG_TOKEN = true). Lorsque l'application Web se charge, Firebase génère automatiquement un jeton de débogage dans la console pour les développeurs de votre navigateur.

1. Recherchez votre jeton de débogage :
   1. Dans Google AI Studio, ouvrez les outils pour les développeurs de votre navigateur lorsque vous prévisualisez votre application :
      • Chrome, Edge ou Firefox : appuyez sur F12 (ou effectuez un clic droit n'importe où dans l'aperçu et sélectionnez Inspecter), puis sélectionnez l'onglet Console.
      • macOS : appuyez sur Cmd+Option+I, puis sélectionnez l'onglet Console.
   2. Dans les journaux de la console, recherchez le message de débogage 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. Copiez la chaîne du jeton (sans les guillemets).
2. Enregistrez votre jeton de débogage :
   1. Dans la console Firebase, accédez à Sécurité > App Check > onglet Applications.
   2. Recherchez votre application Web dans la liste, cliquez sur le menu à trois points ⋮, puis sélectionnez Gérer les jetons de débogage.
   3. Cliquez sur Ajouter un jeton de débogage, collez le jeton que vous avez copié, saisissez un nom tel que Google AI Studio Preview, puis cliquez sur Enregistrer.
   

Remarque : Si le jeton de débogage ne s'affiche pas dans la console du navigateur, actualisez l'onglet d'aperçu Google AI Studio ou demandez à l'agent Google AI Studio : "Veuillez vous assurer que Firebase App Check est initialisé en mode débogage à l'aide de self.FIREBASE_APPCHECK_DEBUG_TOKEN = true."

5. Tester l'application

Maintenant que votre projet est associé et que votre jeton de débogage est enregistré auprès d'App Check, testez les fonctionnalités de base : Authentication et Firestore.

1. Tester l'authentification des utilisateurs et enregistrer les priorités :
   1. Dans l'aperçu de l'application Decide For Me dans Google AI Studio, testez l'écran d'authentification en vous connectant avec un compte Google.
   2. Enregistrez vos priorités de vie à l'aide du panneau de droite (Mes priorités).
2. Vérifiez l'authentification dans la console Firebase :
   1. Accédez à la console Firebase et ouvrez Authentification.
   2. Vérifiez que le compte Google que vous avez utilisé pour vous authentifier dans l'application Decide For Me figure dans la liste :
   
3. Vérifiez le stockage des données Firestore :
   1. Ouvrez Firestore dans la console Firebase.
   2. Vérifiez que vos priorités sont stockées dans un document sous le chemin d'accès users/{userId} :
   

Avertissement : Si vous ne voyez aucun document dans Firestore, passez à l'onglet Règles et assurez-vous d'avoir mis en place des règles de sécurité strictes. Si les règles de sécurité sont vides ou renvoient false à chaque appel, votre application ne peut créer aucun document dans aucune collection Firestore. Dans ce cas, revenez à AI Studio et demandez-lui de déployer des règles de sécurité strictes pour l'application.

6. Créer un flux de décision optimisé par l'IA à l'aide de Firebase

Votre application utilisera l'IA pour alimenter ses actions Décider pour moi. Vous pouvez utiliser Firebase pour créer ce flux de décision optimisé par l'IA.

Configurer Firebase AI Logic

1. Activez l'API Gemini Developer dans Firebase AI Logic :
   1. Ouvrez Firebase AI Logic dans la console Firebase, puis cliquez sur Premiers pas.
   2. Sélectionnez API Gemini Developer, puis suivez les instructions de la console pour activer l'API.

   Remarque : App Check est désormais appliqué automatiquement à Firebase AI Logic. C'est pourquoi il était important de configurer et d'enregistrer le fournisseur de débogage App Check plus tôt dans cet atelier de programmation. Cela permet de s'assurer que les requêtes de votre environnement de développement dans Google AI Studio sont validées et non rejetées par la logique d'IA Firebase.

2. Configurez les paramètres Firebase AI Logic :
   1. Accédez à l'onglet Paramètres.
   2. Définissez l'option Activer le mode Modèle uniquement sur Activé.
   3. Définissez l'option Activer le mode Utilisateurs authentifiés sur Activé.

Créer un modèle de prompt de serveur

Dans cet atelier de programmation, vous allez utiliser des modèles de prompts côté serveur pour vos interactions avec l'API Gemini via Firebase AI Logic.

Avant de continuer avec le modèle, examinez les points suivants pour comprendre pourquoi il est important de stocker la configuration du modèle, les instructions système et les requêtes côté serveur :

• Protection de la propriété intellectuelle : les requêtes sont extraites de l'appareil client et sécurisées dans le backend.
• Prévention des attaques par injection de prompt : le client ne peut remplir que des variables spécifiques avec la validation du schéma de backend.
• Mise à jour sans publication d'une nouvelle version de l'application : vous pouvez mettre à jour les requêtes, les instructions système et les configurations de modèle dans la console sans publier de nouvelle version de l'application.

Voici comment créer et tester un modèle de prompt de serveur :

1. Créez le modèle de prompt du serveur :
   1. Accédez à l'onglet Modèles de requêtes.
   2. Cliquez sur Créer un modèle.
   3. Sélectionnez Modèle vide.
   4. Créez votre premier modèle à l'aide des informations suivantes :
      • Nom du modèle : Flux de décision
      • ID du modèle  : decider-flow
      • Configuration (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 et instructions système (facultatif)

        {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.
        

        Ajoutez des {} supplémentaires autour de {role "system"} et {role "user"} pour écrire vos instructions système et votre requête avec la syntaxe correcte :
      • Tester l'entrée

        {
          "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. Cliquez sur Enregistrer le modèle.
3. Testez le modèle :
   1. Cliquez sur Exécuter le test de requête.
   2. Localisez la réponse de test et vérifiez qu'elle comporte tous les champs que vous avez spécifiés dans la requête (verdict, justification et firstStep).
   3. Si tout correspond à la réponse attendue, verrouillez le modèle à l'aide de l'icône en forme de cadenas en haut à droite pour assurer la stabilité de la version et éviter toute modification accidentelle.

Votre modèle est prêt à être utilisé par votre application.

7. Utiliser le modèle de prompt "Décideur" dans l'application

Créez votre application web en utilisant le modèle :

1. Retournez dans votre application dans Google AI Studio.
2. Demandez à l'agent Google AI Studio d'implémenter l'action Décide pour moi :
   1. Copiez l'invite suivante :

      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. Collez la requête dans le champ de saisie du chat Google AI Studio, puis cliquez sur Envoyer.
3. Vérifiez la configuration et testez l'assistant de décision :
   1. Attendez que Google AI Studio ait terminé d'ajouter Firebase AI Logic à votre application.
   2. Passez à l'onglet Code et assurez-vous qu'une clé API figure dans votre fichier firebase-applet-config.json. Si la clé API Firebase ne figure pas dans le fichier de configuration, demandez à Google AI Studio de l'importer.
   3. Accédez à l'onglet Aperçu.
   4. Envoyez les options A et B, puis vérifiez que l'IA renvoie la décision, la justification et la première étape.

Avertissement : Si l’appel à Firebase AI Logic échoue même avec la clé API Firebase configurée, demandez à l’agent Google AI Studio de le corriger en affichant :

"Assurez-vous que l'appel Firebase AI Logic utilise getAI(app) et getTemplateGenerativeModel(aiInstance) avec le modèle decider-flow, analyse correctement la réponse JSON dans verdict, justification et firstStep, et ne contient aucune contrainte de délai d'attente ni aucune vérification de fonction inutile."

Pour référence, le code généré par Google AI Studio devrait ressembler à ceci :

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;

Déboguer et surveiller les requêtes

Si votre application rencontre des erreurs ou ne parvient pas à générer de réponse, ou si vous souhaitez inspecter le trafic de l'API en détail, utilisez les outils d'analyse et de surveillance intégrés à la logique d'IA Firebase :

1. Dans la console Firebase, accédez à Services d'IA > Logique d'IA > Surveillance de l'IA onglet.
2. Consultez les métriques quantitatives dans le tableau de bord :
   • Volume et état des requêtes : vérifiez si les requêtes entrantes atteignent le backend et renvoient 200 OK ou échouent avec des erreurs client ou serveur.
   • Latence : examinez le graphique de latence pour vérifier le temps de réponse de bout en bout.
   • Nombre de jetons : surveillez l'utilisation des jetons d'entrée et de sortie par requête.
3. Inspecter les traces de requêtes individuelles pour un débogage approfondi : cliquez sur une trace de requête spécifique dans le tableau des traces pour inspecter sa charge utile.
   • Entrées : vérifiez que les variables (priorities, optionA et optionB) ont été correctement transmises depuis l'application cliente.
   • Sorties : consultez le texte brut généré par le modèle pour vérifier s'il a renvoyé du code JSON valide correspondant au schéma.
   • Détails de l'erreur : si une requête échoue, consultez le journal des erreurs de trace pour connaître les raisons de l'échec (par exemple, jetons App Check non valides, refus d'authentification, limites de quota ou erreurs de validation de l'invite).
4. Résolvez les problèmes liés à Google AI Studio :
   • Si vous identifiez une erreur dans la trace (par exemple, une analyse de réponse JSON incorrecte ou des paramètres manquants), copiez le message ou la charge utile de l'erreur.
   • Retournez dans Google AI Studio et demandez à l'assistant de corriger le problème correspondant dans le code de l'application.

8. Facultatif : Déployer l'application

Maintenant que votre application fonctionne en mode Aperçu, déployez-la en production.

Pour protéger vos points de terminaison Firebase en production, configurez un fournisseur d'attestation de production à utiliser avec Firebase App Check (dans cet atelier de programmation, vous utiliserez reCAPTCHA v3).

Vous devez d'abord déployer votre application pour obtenir son URL exacte en ligne. Vous pourrez ainsi enregistrer le domaine spécifique auprès de reCAPTCHA au lieu d'autoriser toutes les applications ai.studio.

Déployez votre application et configurez reCAPTCHA :

1. Déployer l'application Web avec Google AI Studio :
   1. Dans Google AI Studio, cliquez sur Publier dans la barre de navigation supérieure.
   2. Cliquez sur Premiers pas, vérifiez ou personnalisez le nom et la description de l'application, puis cliquez sur Publier votre application.
   3. Attendez que Google AI Studio crée et déploie votre application (généralement une à deux minutes).
   4. Copiez l'URL personnalisée générée pour votre diffusion en direct (par exemple, https://decide-for-me-123.ai.studio) et notez son domaine (par exemple, decide-for-me-123.ai.studio).
2. Créez des clés reCAPTCHA v3 dans Google reCAPTCHA :
   1. Accédez à la console d'administration Google reCAPTCHA.
   2. Saisissez un libellé (par exemple, Decide For Me - Production).
   3. Sélectionnez Type de reCAPTCHA > reCAPTCHA v3 (basé sur le score).
   4. Dans la section Domaines, ajoutez le domaine exact de votre application déployée (par exemple, decide-for-me-123.ai.studio, en omettant https:// et tous les chemins d'accès) ou un domaine personnalisé si vous prévoyez d'en utiliser un.
   5. Acceptez les conditions d'utilisation, puis cliquez sur Envoyer.
   6. Laissez cet onglet ouvert, car vous aurez besoin de la clé de site (clé client publique) et de la clé secrète (clé serveur privée).
3. Enregistrez votre clé secrète dans la console Firebase :
   1. Accédez à App Check dans la console Firebase.
   2. Accédez à l'onglet Applis.
   3. Recherchez votre application Web dans la liste, cliquez dessus (ou sur le menu à trois points ⋮), puis sélectionnez reCAPTCHA v3.
   4. Collez votre clé secrète reCAPTCHA dans le champ, puis cliquez sur Enregistrer.
4. Configurez l'application cliente pour qu'elle utilise ReCaptchaV3Provider :
   1. Dans Google AI Studio, passez au panneau de chat et demandez à l'assistant de mettre à jour votre configuration App Check pour la production :

      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. Si vous examinez le code directement dans l'onglet Code, assurez-vous que l'initialisation d'App Check correspond à cette structure :

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

   3. Après avoir mis à jour le code, republiez votre application dans Google AI Studio pour appliquer la configuration App Check mise à jour à votre site en ligne.
5. Validez le trafic de production et surveillez App Check :
   1. Ouvrez l'URL de votre application en direct dans une fenêtre de navigation privée, connectez-vous avec Google et testez l'envoi d'un dilemme.
   2. Revenez à App Check dans la console Firebase, puis examinez les onglets API et Surveillance pour vérifier que les requêtes sont bien enregistrées pour Firestore et Firebase AI Logic.

Remarque : App Check est déjà appliqué pour Firebase AI Logic. Une fois que vous avez constaté que 100% du trafic légitime est validé dans les métriques App Check, vous pouvez également définir l'état d'application d'App Check pour Firestore sur Appliquer afin de refuser automatiquement tout le trafic non validé.

9. Conclusion

Félicitations ! Vous avez créé une application utile avec des fonctionnalités d'IA à partir de zéro, à l'aide des outils de la pile de compilation de Google. Ce n'est que le début : vous pouvez faire bien plus avec les outils Google. Vous disposez maintenant d'un projet Firebase et Google Cloud. Explorez tous les services à votre disposition.

Cliquez ici pour obtenir le badge Parcours Builder terminé.

Pour poursuivre votre parcours, rendez-vous sur goo.gle/builders pour accéder à votre prochain atelier.

Si vous utilisez déjà Antigravity 2.0, la plate-forme Google dédiée à l'orchestration de plusieurs agents autonomes en parallèle, vous pouvez rapidement exporter votre projet depuis Google AI Studio et l'importer dans Antigravity pour continuer à y travailler en local. Antigravity propose des compétences agentiques pour Firebase que vous pouvez installer en un clic. Ces compétences offrent également une assistance pour le développement mobile, ce qui vous permet de répliquer cette application dans les environnements Android et iOS si vous le souhaitez.