Présentation

Dans cet atelier, vous allez intégrer un agent IA LangChain à une application Flutter. Vous allez utiliser Flutter comme framework d'application cliente, Agent Search sur Gemini Enterprise Agent Platform comme base de données vectorielle et Agent Runtime sur Gemini Enterprise Agent Platform pour créer et déployer l'agent LangChain. L'agent utilise Gemini, une famille de grands modèles de langage (LLM) très performants, pour générer des réponses d'IA à partir de prompts contenant du texte et des images.

L'atelier est préprovisionné avec VS Code en tant qu'IDE à l'aide de code-server, ainsi qu'avec les extensions Flutter et Dart nécessaires pour exécuter l'application Flutter. Il inclut également fwr, un outil que vous utilisez pour livrer l'application Flutter en tant qu'application Web accessible à l'aide d'un navigateur.

Cet atelier s'adresse aux développeurs de tous niveaux participant à la création d'applications, mais dont l'expérience est peut-être limitée dans le développement d'applications cloud. Il est souhaitable d'avoir une expérience de l'utilisation du langage Python et d'être familiarisé avec le framework Flutter. Vous n'avez pas besoin de connaître Flutter pour effectuer les tâches de cet atelier. Cependant, vous allez examiner une partie du code de l'application Flutter et tester ses fonctionnalités.

Objectifs

Dans cet atelier, vous allez réaliser les tâches suivantes :

• Créer un datastore et une application de recherche à l'aide d'AI Applications dans la console Google Cloud

• Déployer un agent LangChain à l'aide de Gemini Enterprise Agent Platform Workbench

• Utiliser une application Python qui intègre Agent Search et l'agent LangChain

• Déployer l'application sur Cloud Run et l'utiliser comme backend d'une application Flutter

• Créer une application Flutter à utiliser comme application de chat frontend

  Voici une présentation des différents composants utilisés dans cet atelier :

  

Préparation

Pour chaque atelier, nous vous attribuons un nouveau projet Google Cloud et un nouvel ensemble de ressources pour une durée déterminée, sans frais.

1. Connectez-vous à Google Skills dans une fenêtre de navigation privée.

2. Vérifiez le temps imparti pour l'atelier (par exemple : 01:15:00) : vous devez pouvoir le terminer dans ce délai.
   Une fois l'atelier lancé, vous ne pouvez pas le mettre en pause. Si nécessaire, vous pourrez le redémarrer, mais vous devrez tout reprendre depuis le début.

3. Lorsque vous êtes prêt, cliquez sur Démarrer l'atelier.

4. Notez vos identifiants pour l'atelier (Nom d'utilisateur et Mot de passe). Ils vous serviront à vous connecter à la console Google Cloud.

5. Cliquez sur Ouvrir la console Google.

6. Cliquez sur Utiliser un autre compte, puis copiez-collez les identifiants de cet atelier lorsque vous y êtes invité.
   Si vous utilisez d'autres identifiants, des messages d'erreur s'afficheront ou des frais seront appliqués.

7. Acceptez les conditions d'utilisation et ignorez la page concernant les ressources de récupération des données.

Tâche 1 : Créer un datastore et une application de recherche

Dans cette tâche, vous allez implémenter une fonctionnalité de recherche dans votre application Flutter en créant un datastore et une application de recherche à l'aide d'AI Applications dans la console Google Cloud.

Créer un datastore de recherche

1. Dans la console Cloud, cliquez sur Afficher tous les produits. Faites défiler la page Tous les produits jusqu'à la section Intelligence artificielle, puis cliquez sur AI Applications.

2. Cliquez sur Continuer et activer l'API.

3. Dans le volet de gauche, cliquez sur Datastores pour ouvrir la page correspondante, puis sur Créer un datastore.

   Sur cette page, vous allez configurer la source de données qui sera utilisée pour générer les résultats. Pour cet atelier, un fichier CSV contenant des données sur des articles du Google Merchandise Store a été préprovisionné dans un bucket Cloud Storage.

4. Pour sélectionner Cloud Storage comme source de données, sous Cloud Storage, cliquez sur Sélectionner.

5. Pour le type de données à importer, sous Importation de données structurées, sélectionnez CSV (pour les données de questions fréquentes).

6. Faites défiler la page jusqu'à la section Sélectionnez un dossier ou un fichier à importer, puis cliquez sur Fichier.

7. Pour indiquer l'URL Cloud Storage du fichier CSV, cliquez sur Parcourir.

8. Pour afficher le contenu du bucket Cloud Storage , cliquez sur .

9. Sélectionnez le fichier goog_merch.csv, puis cliquez sur Sélectionner.

   L'URI gs:// du dossier est alors renseigné.

   

10. Cliquez sur Continuer.

11. Pour le nom du datastore, saisissez goog-merch-ds et cliquez sur Continuer.

12. Conservez le modèle de tarification sélectionné par défaut et cliquez sur Créer.

    Un datastore est créé, et l'ingestion des données à partir du fichier CSV est lancée.

13. Sur la page Datastores, cliquez sur le nom du datastore que vous venez de créer.

14. Cliquez sur Actualiser.

    L'onglet Documents présente la liste des documents importés.

15. Pour afficher les données associées à un document, cliquez sur Afficher le document.

Cliquez sur Vérifier ma progression pour valider l'objectif. Créer un datastore Agent Search

Créer une application de recherche

Pour utiliser le datastore de recherche, vous devez l'associer à une application de recherche dans AI Applications.

1. Dans la console Cloud, cliquez sur AI Applications, puis sur Applications.

2. Cliquez sur Créer une application.

3. Sur la page Créer une application, pour le type d'application à créer, dans l'onglet Recherche et assistant, sous Recherche personnalisée (général), cliquez sur Créer.

4. Sur la page Configuration de l'application de recherche, configurez une application de recherche sur site Web en utilisant les paramètres suivants et conservez les valeurs par défaut des autres paramètres :

   Propriété	Valeur (saisir ou sélectionner)
   Fonctionnalités de l'édition Enterprise	Désactiver
   Nom de votre application	gms-search-app
   Nom externe de votre entreprise ou organisation	gms-company
   Emplacement de votre application	mondial (Mondial)

5. Cliquez sur Continuer.

6. La liste des datastores existants s'affiche. Sélectionnez le datastore goog_merch_ds que vous avez créé à la sous-tâche précédente, puis cliquez sur Continuer.

7. Conservez le forfait sélectionné par défaut, puis cliquez sur Créer.

   L'application de recherche est créée et le datastore y est associé.

8. Pour tester l'application de recherche, dans le menu de navigation d'AI Applications, cliquez sur Aperçu.

9. Dans le champ Rechercher, saisissez dino, puis appuyez sur Entrée.

   Une liste s'affiche avec les résultats de recherche associés générés à partir des documents importés dans le datastore.

   

   Remarque : Si un message d'erreur s'affiche et indique L'aperçu de la recherche n'est pas encore prêt, veuillez patienter quelques minutes avant de réessayer. Si vous ne souhaitez pas attendre, vous pouvez passer à la tâche suivante de l'atelier.

Cliquez sur Vérifier ma progression pour valider l'objectif. Créer une application Agent Search

Tâche 2 : Créer et déployer le backend

Le backend de l'application Flutter s'exécutera en tant que service Cloud Run sur Google Cloud. Le service de backend intègre l'application de recherche que vous avez créée à la tâche précédente pour générer des réponses à partir des données du Merchandise Store.

Dans une tâche ultérieure, vous intégrerez également l'application backend à un agent LangChain pour accéder à Gemini et générer du contenu d'IA en réponse aux requêtes de l'application Flutter.

Dans cette tâche, vous allez créer l'application backend Python et la déployer sur Cloud Run.

Configurer et examiner l'application backend

1. Pour cet atelier, un IDE basé sur VS Code a été préprovisionné. Pour accéder à l'IDE, copiez l'URL du service IDE depuis le panneau des identifiants de l'atelier et collez-la dans une nouvelle fenêtre ou un nouvel onglet de navigation privée.

   

   Remarque : L'URL du service IDE est le point de terminaison d'un service Cloud Run préprovisionné pour cet atelier et transfère les requêtes à la VM code-server. L'IDE est créé avec code-server et inclut les extensions Flutter, Dart et Vim.

   

2. Ouvrez un terminal dans l'IDE. Dans le menu de navigation de l'IDE (), cliquez sur Terminal > Nouveau terminal.

   Remarque : Exécutez les commandes des étapes ci-dessous dans la fenêtre de terminal de l'IDE.

3. La version initiale de l'application backend et les fichiers associés sont préprovisionnés pour l'atelier. Copiez la version initiale du dossier de l'application backend et son contenu depuis une archive dans Cloud Storage :

   gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web.zip ~ && unzip ~/ag-web -d ~ && rm ~/ag-web.zip Remarque : Si vous y êtes invité, cliquez sur Autoriser pour coller le texte et les images du presse-papiers, puis appuyez sur Entrée.

4. Pour lister le contenu du dossier, dans la fenêtre de terminal de l'IDE, exécutez la commande suivante :

   ls ~/ag-web/app

   Le dossier ag-web/app contient le code source de l'application et les autres fichiers nécessaires pour créer l'application backend et la déployer sur Cloud Run.

5. Définissez les variables PROJECT_ID et LOCATION pour l'application.

   sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py

6. Configurez l'application backend pour qu'elle utilise le datastore de recherche que vous avez créé plus tôt.

   sed -i 's/SEARCH_DATASTORE_ID/{YOUR_SEARCH_DATASTORE_ID}/' ~/ag-web/app/app.py

   Dans la commande, remplacez la chaîne {YOUR_SEARCH_DATASTORE_ID} par l'ID de votre datastore de recherche. Veillez à supprimer les accolades dans la commande sed.

   Remarque : Pour récupérer l'ID du datastore de recherche que vous avez créé plus tôt, accédez à AI Applications > Datastores dans la console Cloud, puis cliquez sur son nom. Copiez l'ID du datastore, qui correspond à celui du moteur de recherche.

   

7. Pour afficher le code dans l'IDE, cliquez sur dans le menu de navigation de l'IDE, puis cliquez sur Ouvrir le dossier.

8. Sélectionnez le dossier IDE-DEV/ag-web/ dans la liste, puis cliquez sur OK.

9. Pour approuver les auteurs du code, cliquez sur Oui, je fais confiance aux auteurs.

10. Dans le volet Explorateur, développez le dossier app, puis cliquez sur app.py pour ouvrir le fichier dans l'éditeur.

    Le code de l'application backend effectue les opérations suivantes :

    • Initialise un SearchServiceClient pour l'API discoveryengine.googleapis.com.
    • La fonction search_gms() utilise le point de terminaison datastores de l'API pour lancer une requête de recherche. L'ID du datastore que vous avez créé plus tôt est utilisé dans l'URL.
    • La fonction utilise la requête de recherche fournie par l'utilisateur pour effectuer la recherche dans le contenu du datastore, et met en forme les résultats dans une réponse JSON.
    • L'application utilise flask pour acheminer les appels vers les fonctions individuelles. Le point de terminaison / correspond à la page par défaut utilisée pour vérifier que l'application se charge correctement, tandis que le point de terminaison /ask_gms appelle la fonction search_gms() qui utilise Agent Search.

Créer et déployer l'application sur Cloud Run

Un script de déploiement est disponible pour créer et déployer l'application backend sur Cloud Run.

1. Ouvrez une fenêtre de terminal dans l'IDE et accédez au dossier de l'application backend :

   cd ~/ag-web/app

2. Authentifiez-vous sur Google Cloud à partir de gcloud CLI :

   gcloud auth login

3. Pour continuer, saisissez Y.

4. Pour lancer la procédure de connexion, appuyez sur la touche Ctrl (pour Windows et Linux) ou Cmd (pour macOS) et cliquez sur le lien dans le terminal.

5. S'il vous est demandé de confirmer l'ouverture du site web externe, cliquez sur Ouvrir.

6. Cliquez sur l'adresse e-mail que vous utilisez pour participer à l'atelier.

7. Lorsqu'un message vous invite à poursuivre, cliquez sur Continuer.

8. Pour autoriser Google Cloud SDK à accéder à votre compte Google et accepter les conditions d'utilisation, cliquez sur Autoriser.

   Votre code de vérification s'affiche dans l'onglet du navigateur.

9. Cliquez sur Copier.

10. Dans la fenêtre de terminal de l'IDE, collez le code à l'endroit où est indiqué Saisir le code d'autorisation, puis appuyez sur Entrée.

    Vous êtes désormais connecté à Google Cloud.

11. Rendez le script deploy.sh exécutable, puis exécutez-le pour déployer l'application dans la région Cloud Run spécifiée :

    chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

    Une fois l'application créée et déployée sur Cloud Run, l'URL de son point de terminaison s'affiche à la fin des résultats du script. Elle a été générée par la commande gcloud run deploy exécutée dans le script.

    Remarque : L'exécution de cette commande prend du temps. Attendez qu'elle se termine avant de passer à la tâche suivante.

Tester l'application backend

Vous allez tester le fonctionnement de l'application en accédant à son point de terminaison Cloud Run.

1. Copiez l'URL du point de terminaison de l'application générée à l'étape précédente, puis accédez-y dans un nouvel onglet du navigateur.

2. Une fois l'application chargée, sa page d'accueil affiche le message Bienvenue dans l'application backend ag-web.

3. Dans la barre d'adresse du navigateur, ajoutez le chemin d'accès ci-dessous à la fin de l'URL :

   /ask_gms?query=dino

4. Vérifiez que l'application renvoie des résultats issus du datastore de recherche que vous avez créé plus tôt.

Cliquez sur Vérifier ma progression pour valider l'objectif. Créer une application backend

Tâche 3 : Créer un agent LangChain

Un agent IA est une application qui exploite la puissance des grands modèles de langage (LLM) pour raisonner et orchestrer l'utilisation d'outils externes afin d'atteindre son objectif. Gemini Enterprise Agent Platform est une suite de produits et d'outils Google qui vous aide à créer des agents IA en les associant à vos sources de données de confiance.

Agent Runtime sur Gemini Enterprise Agent Platform vous aide à créer et à déployer un agent de raisonnement sur Agent Platform. LangChain est un outil OSS populaire utilisé pour créer des chatbots et des systèmes RAG.

Agent Platform permet aux développeurs d'utiliser des appels de fonction pour mapper les résultats des LLM (Gemini) à des fonctions Python. Vous pouvez développer et déployer des agents à l'aide du modèle LangChain spécifique au framework avec le SDK Agent Platform.

Dans cette tâche, vous allez utiliser Agent Platform Workbench avec un notebook Jupyter pour créer et déployer un agent LangChain avec des fonctions Python. Nous utiliserons cet agent dans l'application backend d'IA générative lors de la prochaine tâche de cet atelier.

Créer une instance Agent Platform Workbench

Agent Platform Workbench est un environnement de développement basé sur des notebooks Jupyter pour l'ensemble du workflow de data science et de machine learning. Vous pouvez interagir avec Agent Platform et d'autres services Google Cloud à partir du notebook Jupyter d'une instance Workbench. Par exemple, vous pouvez accéder à vos données et les parcourir dans un notebook Jupyter à l'aide d'intégrations BigQuery et Cloud Storage.

Les notebooks Agent Platform Workbench offrent une solution flexible et évolutive pour développer et déployer des modèles de ML sur Google Cloud.

1. Pour créer une instance Workbench, dans la console Cloud, cliquez sur le menu de navigation (), puis sélectionnez Agent Platform > Notebooks.

2. Dans le menu de navigation Notebooks, cliquez sur Workbench.

3. Vérifiez que l'option Instances est sélectionnée dans l'onglet Instances, puis cliquez sur Créer.

   

4. Sur la page "Nouvelle instance", saisissez my-instance dans le champ Nom.

5. Conservez les autres paramètres par défaut, puis cliquez sur Créer.

   Votre nouvelle instance se lance dans la section "Instances". Attendez que l'instance soit créée avant de passer à l'étape suivante.

   Remarque : Une coche verte apparaît à côté de l'instance lorsqu'elle est prête à être utilisée.

6. Lorsque l'instance est prête, cliquez sur Ouvrir JupyterLab.

   

7. Pour lancer un notebook Jupyter Python 3, cliquez sur le notebook Python 3.

   

Copier le fichier notebook

Un notebook qui permet de créer et déployer un agent LangChain a été préprovisionné pour cet atelier.

1. Pour copier le notebook dans votre instance JupyterLab, copiez ce code dans la première cellule de votre nouveau notebook :

   !gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .

   

2. Sélectionnez la cellule et exécutez-la en cliquant sur Exécuter dans le menu de la cellule :

   

   La commande copie le notebook depuis Cloud Storage dans votre instance JupyterLab. Une fois la commande terminée, le fichier notebook est listé dans le dossier racine de premier niveau.

   

3. Pour ouvrir le notebook, double-cliquez sur le fichier notebook dans la liste des dossiers. Un onglet distinct s'ouvre et affiche le contenu du notebook.

Créer et déployer un agent Reasoning Engine

1. Exécutez toutes les cellules de code du notebook dans l'ordre, en commençant par le début. Pour exécuter une cellule, sélectionnez-la en cliquant n'importe où dans la cellule, puis cliquez sur Exécuter dans son menu ou dans le menu supérieur du notebook.

   Remarque : Lorsque vous exécutez une commande dans une cellule, attendez la fin de l'exécution avant de passer à la cellule suivante. Une fois l'exécution terminée, l'astérisque (*) qui s'affiche dans le champ du numéro de cellule est remplacé par le numéro de la cellule. Remarque : Avant d'exécuter une cellule, veuillez consulter les notes ci-dessous pour connaître les instructions ou les étapes spécifiques à suivre. Ces instructions sont indiquées avec le préfixe INSTRUCTIONS POUR LA CELLULE.

   a. [INSTRUCTIONS POUR LA CELLULE] Restart current runtime (Redémarrer l'environnement d'exécution actuel) :

   Si vous y êtes invité, dans la boîte de dialogue Redémarrage du noyau, cliquez sur OK.

   b. [INSTRUCTIONS POUR LA CELLULE] Set Google Cloud project information and initialize Agent Platform (Définir les informations du projet Google Cloud et initialiser Agent Platform) :

   Avant d'exécuter cette cellule pour initialiser Agent Platform, modifiez les valeurs de configuration pour l'ID du projet, l'emplacement et le bucket de préproduction :

   PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"

   Cellule modifiée avec des exemples de paramètres de configuration :

   

   c. [INSTRUCTIONS POUR LA CELLULE] Define the Agent (Définir l'agent) :

   Avant d'exécuter cette cellule, remplacez la valeur de GEMINI_MODEL_ID par l'ID du modèle le plus récent utilisé par ce notebook : .

   Remarque : Vous pouvez également exécuter une cellule en cliquant sur Exécuter dans la barre de menu du notebook.

2. Après avoir exécuté la cellule Deploy the Agent to the Agent Runtime (Déployer l'agent dans l'environnement d'exécution de l'agent), attendez que la commande se termine et que l'agent LangChain soit déployé. Copiez ensuite l'ID de l'agent :

   

   Vous aurez besoin de cet ID pour configurer et redéployer l'application backend à la tâche suivante.

   Remarque : L'exécution de cette cellule peut prendre jusqu'à 10 minutes. Attendez que le résultat final indique que l'agent a bien été déployé avant de passer à l'étape suivante.

3. Pour vérifier que l'agent LangChain fonctionne correctement, exécutez les deux cellules suivantes et observez le résultat.

   L'agent LangChain appelle le datastore Wikipédia ou Agent Search en fonction de l'entrée de la requête.

Cliquez sur Vérifier ma progression pour valider l'objectif. Déployer l'agent LangChain

Tâche 4 : Améliorer l'application backend

Vous allez maintenant améliorer l'application backend pour qu'elle appelle l'agent LangChain que vous avez déployé à la tâche précédente.

La version initiale de l'application backend ne récupérait directement les résultats qu'à partir d'Agent Search. Dans la version mise à jour, l'application appelle également l'agent qui utilise les résultats de Gemini et les outils de l'agent pour générer une réponse à partir d'Agent Search ou de Wikipédia en fonction du prompt d'entrée.

Dans cette tâche, vous allez modifier le code de l'application backend pour ajouter un autre point d'entrée qui appelle l'agent LangChain à l'aide d'une requête et qui renvoie la réponse de l'agent.

Mettre à jour l'application backend

1. Dans la fenêtre de terminal de l'IDE, ajoutez le code du nouveau point d'entrée au fichier app.py en exécutant la commande suivante :

   cat << EOF >> ~/ag-web/app/app.py # # Agent Engine # import vertexai from vertexai import agent_engines from google.cloud import resourcemanager_v3 def get_project_number(project_id): client = resourcemanager_v3.ProjectsClient() # Construct the resource name for the project name = f"projects/{project_id}" # Get project metadata project = client.get_project(name=name) # The 'name' field in the response is in the format 'projects/123456789' project_number = project.name.split('/')[-1] return project_number PROJECT_NUM = get_project_number(PROJECT_ID) LANGCHAIN_AGENT = "LANGCHAIN_AGENT_ID" remote_agent = vertexai.agent_engines.get(f"projects/{PROJECT_NUM}/locations/{LOCATION}/reasoningEngines/{LANGCHAIN_AGENT}") # Endpoint for the Flask app to call the Agent @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF

2. Configurez l'application backend pour qu'elle utilise l'agent LangChain que vous avez créé plus tôt.

   Remplacez la chaîne {YOUR_LANGCHAIN_AGENT_ID} dans la commande ci-dessous par l'ID de votre agent que vous avez copié depuis la cellule du notebook à la tâche précédente, puis exécutez la commande ci-dessous dans la fenêtre de terminal de l'IDE.

   Veillez à supprimer les accolades dans la commande sed.

   sed -i 's/LANGCHAIN_AGENT_ID/{YOUR_LANGCHAIN_AGENT_ID}/' ~/ag-web/app/app.py

3. Pour afficher le code dans l'IDE, cliquez sur dans le menu de navigation de l'IDE, puis sélectionnez le fichier IDE-DEV/ag-web/app/app.py.

   Dans la version améliorée de l'application backend :

   • Un handle sur remote_agent est récupéré à partir d'Agent Runtime à l'aide de la valeur LANGCHAIN_AGENT_ID de l'agent que vous avez créé à la tâche précédente.
   • Un nouveau point de terminaison /ask_gemini qui définit la fonction "ask_gemini()" est configuré.
   • La fonction transmet le paramètre query fourni par l'utilisateur dans la requête à l'agent LangChain (remote_agent) et renvoie la réponse de l'agent.

Créer et redéployer l'application backend sur Cloud Run

1. Accédez au dossier de l'application backend :

   cd ~/ag-web/app

2. Exécutez le script pour redéployer l'application dans la région Cloud Run spécifiée :

   ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

Tester l'application backend

Vous allez tester le fonctionnement de l'application en accédant à son point de terminaison Cloud Run.

1. Copiez l'URL du point de terminaison de l'application générée à l'étape précédente, puis accédez-y dans un nouvel onglet du navigateur.

2. Une fois l'application chargée, sa page d'accueil affiche le message Bienvenue dans l'application backend ag-web.

3. Dans la barre d'adresse du navigateur, ajoutez le chemin d'accès ci-dessous à la fin de l'URL :

   /ask_gemini?query=where can I buy the chrome dino pin

   L'application renvoie les résultats de l'agent qui les a récupérés dans le datastore Agent Search que vous avez créé plus tôt.

   Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.

4. Dans la barre d'adresse du navigateur, remplacez le chemin d'accès par ce qui suit :

   /ask_gemini?query=what is fallingwater. Write the answer in plaintext.

   L'application renvoie les résultats de l'agent qui a récupéré une réponse de l'API Wikipédia que vous avez configurée dans le notebook.

   Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall. Remarque : Les réponses réelles que vous recevez peuvent différer de celles affichées ci-dessus.

Tâche 5 : Créer l'application d'interface Flutter

Flutter est un framework de développement d'applications multiplates-formes Open Source. Il vous permet d'écrire un codebase qui s'exécute sur Android, iOS, le Web, macOS, Windows et Linux. Les applications Flutter sont développées dans le langage de programmation Dart.

Dans cet atelier, vous allez utiliser le Web comme plate-forme cible afin que l'application Flutter soit déployée en tant qu'application Web et soit accessible via un navigateur.

Dans cette tâche, vous allez créer une application de chat simple à l'aide de Flutter, modifier le code, puis créer et exécuter l'application en tant qu'application Web.

Créer l'application Flutter

1. Dans le terminal de l'IDE, accédez à votre répertoire d'accueil et exécutez la commande suivante :

   cd ~; flutter create chat_app

   La commande flutter create crée tous les fichiers, dossiers et configurations nécessaires pour un nouveau projet Flutter exécutable.

2. Pour afficher le code de l'application de chat par défaut dans l'IDE, accédez au dossier IDE-DEV/chat_app.

   Vous devrez peut-être cliquer sur "Actualiser" pour actualiser le contenu du volet de navigation des dossiers dans l'IDE.

3. Si vous êtes invité à approuver les auteurs des fichiers du dossier, cliquez sur Oui, je fais confiance aux auteurs.

Examiner le code de l'application Flutter

Voici une vue d'ensemble du contenu du dossier chat_app :

Dossier/Fichier	Description
chat_app	Dossier racine du projet qui contient les sous-dossiers et les fichiers qui composent l'application Flutter.
android/ios/linux/macos/web/windows	Contient les fichiers spécifiques aux plates-formes nécessaires pour exécuter l'application Flutter sur chaque plate-forme prise en charge.
lib	Contient les principaux fichiers Dart de l'application, qui incluent les fonctionnalités et l'interface utilisateur.
test	Contient les tests Dart utilisés pour tester les widgets de l'application.
pubspec.yaml	Contient les dépendances de l'application, la version Flutter et d'autres paramètres de configuration.
analysis_options.yaml	Contient les paramètres de configuration pour l'analyse statique de l'application.

Examinons le fichier de point d'entrée main.dart de l'application Flutter.

• Dans le menu Explorateur, cliquez sur le fichier IDE-DEV/chat_app/lib/main.dart pour l'ouvrir.

  Il s'agit du point d'entrée de l'application Flutter. Après avoir effectué les tâches d'initialisation, le code de ce fichier compile l'interface utilisateur de l'application à l'aide de Material Components et définit son titre, son thème et d'autres paramètres de configuration.

  Remarque : Material Components commence avec le widget MaterialApp, qui crée un certain nombre de widgets utiles à la racine de votre application, y compris un navigateur qui gère l'acheminement vers les différents écrans de votre application.

  Flutter repose sur des widgets, qui sont des classes déclaratives utilisées pour créer l'application. Dans Flutter, vous créez une mise en page en combinant des widgets afin de construire des widgets plus complexes et de former une arborescence de widgets. Pour en savoir plus sur la création d'une interface utilisateur dans Flutter, consultez la documentation.

  Ce fichier contient les classes qui créent les widgets de l'application. Il inclut les éléments suivants :

  • La classe MyApp, qui est le widget racine de l'application de chat
  • La classe MyHomePage qui crée la page principale de l'application à l'aide de la classe _MyHomePageState
  • La classe _MyHomePageState qui crée l'UI de l'application et est chargée de mettre à jour l'état de l'UI

  Nous remplacerons le code généré par défaut dans ces classes dans les sous-tâches suivantes, à mesure que vous développerez l'application de chat.

Modifier le code de l'application Flutter

1. Commencez par modifier le titre de l'application. Dans la classe MyApp à la ligne 14, modifiez la valeur de la propriété title :

   title: 'Gemini Chat App',

   

2. Dans la classe _MyHomePageState, à la ligne 58, supprimez la ligne int _counter = 0; et la fonction _incrementCounter(), puis ajoutez les propriétés suivantes :

   final TextEditingController _controller = TextEditingController(); final List<Map<String, String>> _messages = []; String _cloudRunHost = '';

   Ces propriétés permettent d'accepter les entrées utilisateur pour le prompt textuel, de stocker ces entrées et les réponses de l'application backend pour l'affichage, et de stocker le nom d'hôte du service Cloud Run de l'application backend.

3. Ajoutez la méthode initState() à la classe :

   @override void initState() { super.initState(); _loadConfig(); }

   Cette méthode exécute des fonctions d'initialisation lorsque l'objet State est créé. Dans l'application de chat, nous chargeons le contenu d'un fichier en appelant la méthode _loadConfig() que nous allons implémenter.

4. Ajoutez la méthode _loadConfig() à la classe :

   Future<void> _loadConfig() async { final configString = await rootBundle.loadString('assets/config.json'); final config = json.decode(configString); setState(() { _cloudRunHost = config['cloudRunHost']; }); }

   Cette méthode récupère le contenu du fichier de configuration de l'application de chat qui stocke la valeur du nom d'hôte de votre application backend Cloud Run dans un objet JSON. Nous créerons ce fichier plus tard dans l'atelier. Cette méthode stocke la valeur dans la propriété interne _cloudRunHost créée précédemment et génère l'UI du widget.

5. Ajoutez la méthode _sendMessage() à la classe :

   Future<void> _sendMessage() async { if (_controller.text.isEmpty) { return; } final message = _controller.text; _controller.clear(); setState(() { _messages.add({'sender': 'user', 'text': message}); }); if (_cloudRunHost.isEmpty || _cloudRunHost == 'YOUR_CLOUD_RUN_ENDPOINT_URL') { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Please configure the Cloud Run endpoint in assets/config.json' }); }); return; } try { var endpoint_query = Uri.https(_cloudRunHost, '/ask_gemini', {'query': message}); final response = await http.get(endpoint_query); if (response.statusCode == 200) { var responseText = utf8.decode(response.bodyBytes); responseText = responseText.replaceAll(RegExp(r'\*'), ''); setState(() { _messages.add({'sender': 'bot', 'text': responseText}); }); } else { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Error: ${response.statusCode}' }); }); } } catch (e) { setState(() { _messages.add({'sender': 'bot', 'text': 'Error: $e'}); }); } }

   Cette méthode récupère le texte du prompt saisi par l'utilisateur et l'ajoute à la liste des messages affichés dans le panneau de chat. Elle envoie une requête GET HTTP à l'URL du point de terminaison du service de backend Cloud Run avec le prompt d'entrée et affiche la réponse du service.

   Le code crée une URL vers le point de terminaison de l'hôte backend Cloud Run qui inclut le texte du prompt dans un paramètre de requête. La requête GET HTTP est ensuite envoyée au point de terminaison. Une fois la réponse reçue avec le code d'état 200, elle est décodée et ajoutée à la liste des messages à afficher dans l'écran de chat. Si la réponse échoue ou qu'une exception se produit, le code d'état ou le message d'exception est ajouté à la liste des messages et s'affiche à l'écran.

6. Pour créer l'UI de l'application de chat, remplacez la méthode build existante par le code ci-dessous dans la classe _MyHomePageState :

   @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Gemini Chat App'), ), body: Column( children: [ Expanded( child: ListView.builder( padding: const EdgeInsets.all(8.0), itemCount: _messages.length, itemBuilder: (context, index) { final message = _messages[index]; final isUserMessage = message['sender'] == 'user'; return Align( alignment: isUserMessage ? Alignment.centerRight : Alignment.centerLeft, child: Container( margin: const EdgeInsets.symmetric(vertical: 4.0), padding: const EdgeInsets.all(12.0), decoration: BoxDecoration( color: isUserMessage ? Colors.blue[100] : Colors.grey[200], borderRadius: BorderRadius.circular(8.0), ), child: Text(message['text']!), ), ); }, ), ), Padding( padding: const EdgeInsets.all(8.0), child: Row( children: [ Expanded( child: TextField( controller: _controller, decoration: const InputDecoration( hintText: 'Enter a message', ), onSubmitted: (text) => _sendMessage(), ), ), IconButton( icon: const Icon(Icons.send), onPressed: _sendMessage, ), ], ), ), ], ), ); }

   La méthode build décrit l'UI de l'application de chat. Elle crée une arborescence de widgets avec la configuration et l'état actuel, que le framework Flutter affiche ensuite à l'écran. Dans l'interface de cette application de chat, le code affiche les messages de chat dans une colonne, ainsi qu'un champ de texte et un bouton d'envoi pour le prompt de l'utilisateur. Les messages saisis par l'utilisateur (prompts) s'affichent dans une zone bleue, tandis que les messages de réponse ou d'erreur de l'application (bot) s'affichent dans une zone grise.

   Lorsque l'utilisateur clique sur Send (Envoyer) dans l'application de chat ou appuie sur Entrée dans le champ de texte après avoir saisi un prompt, la méthode de rappel _sendMessage() est appelée.

Ajouter des importations

Le code ajouté dépend de certaines bibliothèques ou de certains packages des SDK Dart et Flutter.

1. Pour importer ces packages, ajoutez les instructions import suivantes au début du fichier main.dart, sous l'instruction import existante :

   import 'package:http/http.dart' as http; import 'dart:convert'; import 'package:flutter/services.dart' show rootBundle;
   • Le package http.dart contient un ensemble de fonctions et de classes de haut niveau qui facilitent l'utilisation des ressources HTTP.
   • La bibliothèque dart:convert contient des fonctions qui gèrent les conversions de données courantes, telles que la sérialisation JSON et l'encodage/le décodage UTF-8.
   • La propriété rootBundle est un objet statique global qui permet d'accéder au bundle d'assets principal packagé avec votre application Flutter.

2. Pour enregistrer les modifications apportées à l'application, dans le menu de navigation de l'IDE, cliquez sur Fichier > Enregistrer.

Mettre à jour les dépendances

Le fichier pubspec.yaml spécifie les métadonnées du projet, les dépendances des packages et les assets de votre application Flutter.

1. Modifiez le fichier pubspec.yaml en le sélectionnant dans le volet de l'explorateur de l'IDE. Le fichier se trouve dans le dossier chat_app.

2. Dans la section dependencies (dépendances), ajoutez la dépendance du package http sous la bibliothèque de polices cupertino_icons :

   http: ^1.6.0 Assurez-vous de respecter les retraits.

   

3. Faites défiler la page jusqu'à la section flutter du fichier pubspec.yaml et annulez la mise en commentaire de la ligne 63. Ajoutez le dossier assets sous assets en conservant les retraits :

   assets: - assets/

   

   Cette étape permet de configurer le dossier "assets" dans lequel est stocké le fichier config.json de l'application.

4. Pour enregistrer les modifications apportées au fichier pubspec.yaml, dans le menu de navigation de l'IDE, cliquez sur Fichier > Enregistrer.

Intégrer l'application Flutter au backend Cloud Run

L'application Flutter intègre l'agent Reasoning Engine que vous avez déployé plus tôt dans cet atelier. L'intégration s'effectue en associant l'application Flutter au point de terminaison de l'application backend que vous avez créée et déployée sur Cloud Run.

Dans la méthode _sendMessage(), vous avez peut-être remarqué un code qui vérifie si la propriété _cloudRunHost est vide ou non configurée dans un fichier appelé assets/config.json. Nous allons ajouter ce fichier à notre application Flutter dans cette sous-tâche.

1. Commencez par récupérer le nom d'hôte du point de terminaison Cloud Run de l'application backend, puis stockez sa valeur dans une variable d'environnement.

   Dans la fenêtre de terminal de l'IDE, exécutez la commande suivante :

   BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST

2. Créez le répertoire /assets dans le répertoire d'accueil de votre application de chat Flutter :

   mkdir ~/chat_app/assets

3. Créez le fichier config.json dans le répertoire /assets :

   cat <<EOF > ~/chat_app/assets/config.json { "cloudRunHost": "$BACKEND_APP_HOST" } EOF

4. Pour vérifier la modification, actualisez le contenu du menu Explorateur de l'IDE, puis cliquez sur le fichier IDE-DEV/chat_app/assets/config.json pour l'ouvrir. Vérifiez que la valeur de l'entrée de configuration cloudRunHost est mise à jour avec la valeur du nom d'hôte de votre application backend Cloud Run.

   Remarque : La valeur doit correspondre à celle de la variable d'environnement BACKEND_APP_HOST que vous avez définie à l'étape précédente.

Déployer l'application Flutter

Maintenant que vous avez terminé de configurer l'application Flutter, vous pouvez la compiler et la déployer. Pour les besoins de cet atelier, nous utilisons Fwr, un serveur de développement Web pour Flutter, afin d'exécuter l'application en tant qu'application Web.

1. Vérifiez que vous vous trouvez bien dans le dossier de l'application Flutter. Dans la fenêtre de terminal de l'IDE, exécutez la commande suivante :

   cd ~/chat_app

2. Pour récupérer les dépendances du projet d'application, exécutez la commande suivante :

   flutter pub get

3. Pour créer le projet et démarrer le serveur Web, exécutez la commande suivante :

   fwr

   Attendez que le serveur démarre et livre l'application Flutter. Une fois le serveur lancé, le résultat de la commande doit être semblable à ceci :

   

Tâche 6 : Tester l'application Flutter

Vous allez tester le fonctionnement de l'application Flutter.

Tester l'application

1. Pour accéder à l'application Flutter, copiez l'URL du serveur actif depuis le panneau d'identifiants, puis ouvrez-la dans un nouvel onglet de votre fenêtre de navigation privée.

   Attendez quelques secondes que l'application de chat se charge.

2. Pour le message en bas de l'écran, saisissez :

   What is fallingwater? Write the answer in plaintext.

   Au bout de quelques secondes, la réponse de l'agent backend s'affiche dans l'application.

3. Pour tester l'application et l'agent, saisissez ce qui suit pour message :

   Where can I buy the Chrome dino pin?

   Au bout de quelques secondes, la réponse de l'agent backend s'affiche dans l'application.

   L'application de chat appelle le point de terminaison Cloud Run /ask_gemini de l'application backend, qui appelle ensuite l'agent LangChain. Celui-ci utilise Gemini pour renvoyer une réponse à partir du datastore Agent Search.

4. Pour voir la mise en page de l'application Flutter sur mobile, redimensionnez la fenêtre de votre navigateur pour qu'elle ait à peu près la taille d'un appareil mobile :

   

   Cela indique que l'application Flutter est responsive aux changements de taille de l'écran ou de la fenêtre. Flutter propose des widgets et des packages qui permettent de rendre votre application responsive et adaptable aux changements en fonction de la configuration de l'appareil.

Cliquez sur Vérifier ma progression pour valider l'objectif. Développer et tester l'application de chat Flutter

Terminer l'atelier

Une fois l'atelier terminé, cliquez sur Terminer l'atelier. Google Skills supprime les ressources que vous avez utilisées, puis efface le compte.

Si vous le souhaitez, vous pouvez noter l'atelier. Sélectionnez un nombre d'étoiles, saisissez un commentaire, puis cliquez sur Envoyer.

Voici à quoi correspond le nombre d'étoiles que vous pouvez attribuer à un atelier :

• 1 étoile = très insatisfait(e)
• 2 étoiles = insatisfait(e)
• 3 étoiles = ni insatisfait(e), ni satisfait(e)
• 4 étoiles = satisfait(e)
• 5 étoiles = très satisfait(e)

Si vous ne souhaitez pas donner votre avis, vous pouvez fermer la boîte de dialogue.

Pour soumettre des commentaires, suggestions ou corrections, veuillez accéder à l'onglet Assistance.

Félicitations !

Dans cet atelier, vous avez appris à réaliser les opérations suivantes :

• Créer un datastore et une application de recherche à l'aide d'AI Applications dans la console Google Cloud
• Déployer un agent LangChain à l'aide d'Agent Platform Workbench
• Créer une application Python qui intègre Agent Search et l'agent LangChain
• Déployer l'application sur Cloud Run et l'utiliser comme backend d'une application Flutter
• Développer une application de chat Flutter et l'intégrer au service de backend pour interagir avec Gemini

Étapes suivantes et informations supplémentaires

• Présentation de Gemini pour Google Cloud
• Agent Platform Workbench
• Gemini Enterprise Agent Platform Studio
• Flutter
• Dart

Copyright 2026 Google LLC Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms de société et de produit peuvent être des marques des sociétés auxquelles ils sont associés.