Descripción general

En este lab, integrarás un agente de IA de LangChain con una app de Flutter. Flutter se usa como framework de la app cliente, Agent Search en Gemini Enterprise Agent Platform se utiliza como una base de datos de vectores y Agent Runtime en Gemini Enterprise Agent Platform se usa para crear y, luego, implementar el agente de LangChain. El agente usa Gemini, una familia de modelos de lenguaje grandes (LLM) de amplia capacidad, para generar respuestas de IA a instrucciones de imágenes y texto.

El lab tiene VSCode aprovisionado previamente como IDE con code-server, junto con las extensiones de Flutter y Dart que se requieren para ejecutar la app de Flutter. El lab también incluye fwr, una herramienta que se usa para entregar la app de Flutter como una aplicación web a la que se accede a través de un navegador.

Este lab está dirigido a desarrolladores con diversos niveles de experiencia que contribuyen a la creación de apps, pero que tal vez aún no se familiarizaron con el desarrollo de aplicaciones en la nube. Tener algo de experiencia en Python y conocer el framework Flutter puede ser de ayuda. No es necesario estar familiarizado con Flutter para realizar las tareas de este lab; de todas formas, revisarás parte del código de la app de Flutter y probarás la funcionalidad de la app.

Objetivos

En este lab, realizarás las siguientes tareas:

• Crear un almacén de datos de búsqueda y una app de búsqueda con AI Applications en la consola de Google Cloud

• Implementar un agente de LangChain con Gemini Enterprise Agent Platform Workbench

• Usar una app de Python que se integra con Agent Search y el agente de LangChain

• Implementar la app en Cloud Run y utilizarla como backend para una app de Flutter

• Crear una app de Flutter para usarla como aplicación de chat de frontend

  A continuación, verás una descripción general de los diferentes componentes que se usan en este lab:

  

Configuración

En cada lab, recibirás un proyecto de Google Cloud y un conjunto de recursos nuevos por tiempo limitado y sin costo adicional.

1. Accede a Google Skills en una ventana de incógnito.

2. Ten en cuenta el tiempo de acceso del lab (por ejemplo, 1:15:00) y asegúrate de finalizarlo en el plazo asignado.
   No existe una función de pausa. Si lo necesitas, puedes reiniciar el lab, pero deberás hacerlo desde el comienzo.

3. Cuando esté listo, haga clic en Comenzar lab.

4. Anote las credenciales del lab (el nombre de usuario y la contraseña). Las usarás para acceder a la consola de Google Cloud.

5. Haga clic en Abrir Google Console.

6. Haga clic en Usar otra cuenta, copie las credenciales para este lab y péguelas en el mensaje emergente que aparece.
   Si usas otras credenciales, se generarán errores o incurrirás en cargos.

7. Acepta las condiciones y omite la página de recursos de recuperación.

Tarea 1. Crea un almacén de datos de búsqueda y una app de búsqueda

En esta tarea, implementarás la capacidad de búsqueda para tu app de Flutter creando un almacén de datos de búsqueda y una app de búsqueda usando AI Applications en la consola de Google Cloud.

Crea un almacén de datos de búsqueda

1. En la consola de Cloud, haz clic en Ver todos los productos. En la página Todos los productos, desplázate hasta la sección sobre Inteligencia Artificial y, luego, haz clic en AI Applications.

2. Haz clic para continuar y activar la API.

3. En el panel izquierdo, haz clic en Almacenes de datos y, en la página Almacenes de datos, haz clic en Crear almacén de datos.

   En esta página, configurarás tu fuente de datos para que se use en los resultados de la búsqueda. El lab tiene un bucket de Cloud Storage aprovisionado previamente que contiene un archivo .csv con datos sobre productos de la tienda de artículos promocionales de Google.

4. Para seleccionar Cloud Storage como la fuente de datos, en Cloud Storage, haz clic en Seleccionar.

5. Para el tipo de datos que se importará, en Importación de datos estructurados, selecciona CSV (para datos de preguntas frecuentes).

6. Desplázate a la sección Selecciona una carpeta o un archivo que desees importar y haz clic en Archivo.

7. Para proporcionar la URL de Cloud Storage al archivo CSV, haz clic en Explorar.

8. Para ver el contenido del bucket de Cloud Storage , haz clic en .

9. Selecciona el archivo goog_merch.csv y, luego, haz clic en Seleccionar.

   Se completa el URI gs:// de la carpeta.

   

10. Haz clic en Continuar.

11. En el nombre del almacén de datos, escribe goog-merch-ds y haz clic en Continuar.

12. Deja el modelo de precios seleccionado como predeterminado y haz clic en Crear.

    Se creará un almacén de datos y se iniciará la transferencia de datos del archivo CSV.

13. En la página Almacenes de datos, haz clic en el nombre del almacén de datos que acabas de crear.

14. Haz clic en Actualizar.

    En la pestaña Documentos, se muestra una lista de los documentos que se importaron.

15. Para ver los datos asociados con un documento, haz clic en Ver documento.

Para verificar este objetivo, haz clic en Revisar mi progreso. Crear un almacén de datos de Agent Search

Crea una app de búsqueda

Para usar el almacén de datos de búsqueda, debes conectarlo a una app de búsqueda en AI Applications.

1. En la consola de Cloud, haz clic en AI Applications y, luego, en Apps.

2. Haz clic en Crear una app nueva.

3. En la página Crear app, para elegir el tipo de app que deseas crear, en la pestaña Búsqueda y asistente, en Búsqueda personalizada (general), haz clic en Crear.

4. En la página Configuración de la app de búsqueda, configura una app de búsqueda de sitio web con estos parámetros de configuración y deja el resto de los parámetros con los valores predeterminados:

   Propiedad	Valor (escríbelo o selecciónalo)
   Funciones de la edición Enterprise	Inhabilitar
   Nombre de tu app	gms-search-app
   Nombre externo de tu organización o empresa	gms-company
   Ubicación de la app	global (Global)

5. Haz clic en Continuar.

6. Aparecerá una lista de los almacenes de datos existentes. Selecciona el almacén de datos goog_merch_ds que creaste en la subtarea anterior y haz clic en Continuar.

7. Deja el plan de precios seleccionado como predeterminado y haz clic en Crear.

   Se crea la app de búsqueda y el almacén de datos se conecta a la app.

8. Para probar la app de búsqueda, haz clic en Vista previa en el menú de navegación de AI Applications.

9. En el campo Buscar, escribe dino y presiona INTRO.

   Se muestra una lista de resultados de búsqueda relacionados de los documentos que se importaron al almacén de datos.

   

   Nota: Si ves un error que indica "La vista previa de la búsqueda no está lista aún", espera unos minutos antes de volver a intentarlo. Si no quieres esperar, puedes continuar con la siguiente tarea del lab.

Para verificar este objetivo, haz clic en Revisar mi progreso. Crear una app de Agent Search

Tarea 2: Crea y, luego, implementa el backend

El backend de nuestra app de Flutter se ejecutará como un servicio de Cloud Run en Google Cloud. El servicio de backend se integra con la app de búsqueda que creaste en la tarea anterior para generar respuestas de búsqueda a partir de los datos de la tienda de artículos promocionales.

En una tarea posterior, también integrarás la app de backend con un agente de LangChain para acceder a Gemini y proporcionar contenido de IA generativa en respuesta a las consultas de la app de Flutter.

En esta tarea, crearás y, luego, implementarás la app de backend de Python en Cloud Run.

Configura y revisa la app de backend

1. Para este lab, se aprovisionó previamente un IDE basado en VSCode. Para acceder al IDE, copia la URL del servicio del IDE desde el panel de credenciales del lab y pégala en una nueva ventana o pestaña de incógnito del navegador.

   

   Nota: La URL del servicio del IDE es el extremo de un servicio de Cloud Run que se aprovisiona previamente para este lab y que redirige las solicitudes a la VM de code-server. El IDE se crea con Code Server y también incluye las extensiones de Flutter, Dart y Vim.

   

2. Abre una terminal en el IDE. En el menú de navegación del IDE (), haz clic en Terminal > Terminal nueva.

   Nota: Ejecuta los comandos de los pasos que se indican a continuación en la ventana de terminal del IDE.

3. La versión inicial de la app de backend y los archivos relacionados están aprovisionados previamente para el lab. Copia la versión inicial de la carpeta de la app de backend y su contenido desde un archivo en Cloud Storage:

   gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web.zip ~ && unzip ~/ag-web -d ~ && rm ~/ag-web.zip Nota: Si se te solicita, haz clic en Permitir para pegar imágenes y texto del portapapeles y, luego, presiona Intro.

4. Para ver una lista del contenido de la carpeta, ejecuta lo siguiente en la ventana de terminal del IDE:

   ls ~/ag-web/app

   La carpeta ag-web/app contiene el código fuente de la aplicación y otros archivos necesarios para crear y, luego, implementar la app de backend en Cloud Run.

5. Ajusta los parámetros de configuración PROJECT_ID y LOCATION de la app.

   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. Configura la app de backend para que use el almacén de datos de búsqueda que creaste anteriormente.

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

   En el comando, reemplaza la cadena {YOUR_SEARCH_DATASTORE_ID} por el valor del ID de tu almacén de datos de búsqueda. Asegúrate de quitar las llaves del comando sed.

   Nota: Para obtener el valor del ID del almacén de datos de búsqueda, en la consola de Cloud, ve a AI Applications > Almacenes de datos y, luego, haz clic en el nombre del almacén de datos de búsqueda que creaste anteriormente. Copia el valor del ID del almacén de datos, que es el mismo que el ID del motor de búsqueda.

   

7. Para ver el código en el IDE, en el menú de navegación del IDE, haz clic en y, luego, en Abrir carpeta.

8. Selecciona la carpeta IDE-DEV/ag-web/ de la lista y, luego, haz clic en Aceptar.

9. Para confirmar que confías en los autores del código, haz clic en Sí, confío en los autores.

10. En el panel Explorador, expande la carpeta app y, luego, haz clic en app.py para abrir el archivo en el editor.

    El código de la app de backend hace lo siguiente:

    • Inicializa un SearchServiceClient para la API discoveryengine.googleapis.com.
    • La función search_gms() usa el endpoint datastores de la API para iniciar una solicitud de búsqueda. El ID del almacén de datos que creaste anteriormente se usa en la URL.
    • La función usa la consulta que proporciona el usuario para realizar la búsqueda en el contenido del almacén de datos y da formato a los resultados como una respuesta JSON.
    • La app usa flask para enrutar llamadas a las funciones individuales. El endpoint / es la página predeterminada que se usa para verificar que la app se cargue correctamente, mientras que el endpoint /ask_gms invoca la función search_gms() que usa Agent Search.

Crea y, luego, implementa la app en Cloud Run

Hay una secuencia de comandos de implementación disponible para crear e implementar la app de backend en Cloud Run.

1. Abre una ventana de terminal en el IDE y cambia a la carpeta de la app de backend:

   cd ~/ag-web/app

2. Autentícate en Google Cloud desde gcloud CLI:

   gcloud auth login

3. Para continuar, escribe Y.

4. Para iniciar el flujo de acceso, presiona Control (en Windows y Linux) o Comando (en MacOS) y haz clic en el vínculo de la terminal.

5. Si se te pide que confirmes la apertura del sitio web externo, haz clic en Abrir.

6. Haz clic en la dirección de correo electrónico de estudiante del lab.

7. Cuando se te lo solicite, haz clic en Continuar.

8. Para permitir que el SDK de Google Cloud acceda a tu Cuenta de Google y aceptar las condiciones, haz clic en Permitir.

   Tu código de verificación aparecerá en la pestaña del navegador.

9. Haz clic en Copiar.

10. En la ventana de terminal del IDE, en el área que dice Ingresar código de autorización, pega el código y presiona Intro.

    Ya accediste a Google Cloud.

11. Haz que la secuencia de comandos deploy.sh sea ejecutable y, luego, ejecútala para implementar la app en la región de Cloud Run especificada:

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

    Después de crear la app y de implementarla en Cloud Run correctamente, se mostrará la URL del extremo de la app al final del resultado de la secuencia de comandos. La URL se generó con el comando gcloud run deploy que se ejecutó en la secuencia de comandos.

    Nota: Este comando tarda en ejecutarse, así que espera a que se complete antes de continuar con la siguiente tarea.

Prueba la app de backend

Para probar las funcionalidades de la app, accede a su extremo de Cloud Run.

1. Copia la URL del extremo de la app que se generó en el paso anterior y navega a esa URL en una nueva pestaña del navegador.

2. Cuando la app se carga, la página principal muestra el mensaje Te damos la bienvenida a la app de backend ag-web.

3. En la barra de URL del navegador, agrega la ruta de acceso que se indica a continuación al final de la URL:

   /ask_gms?query=dino

4. Verifica que la app responda con resultados del almacén de datos de búsqueda que creaste anteriormente.

Para verificar este objetivo, haz clic en Revisar mi progreso. Crear una app de backend

Tarea 3: Crea un agente de LangChain

Un agente de IA es una aplicación que usa el poder de los modelos de lenguaje grandes (LLM) para realizar el razonamiento y la organización con herramientas externas y, así, lograr su objetivo. Gemini Enterprise Agent Platform es un paquete de productos y herramientas de Google que te ayuda a crear agentes de IA conectándolos a tus fuentes de datos de confianza.

Agent Runtime en Gemini Enterprise Agent Platform te ayuda a crear e implementar un agente de razonamiento en Agent Platform. LangChain es una herramienta de OSS popular que se usa para crear chatbots y sistemas de RAG.

Agent Platform permite que los desarrolladores utilicen la llamada a funciones para asignar el resultado de los LLM (Gemini) a las funciones de Python. Puedes desarrollar e implementar agentes con la plantilla de LangChain específica del framework usando el SDK de Agent Platform.

En esta tarea, usarás Agent Platform Workbench con un notebook de Jupyter para crear e implementar un agente de LangChain que incluye funciones de Python. El agente se usará en nuestra aplicación de backend de IA generativa en la siguiente tarea de este lab.

Crea una instancia de Agent Platform Workbench

Agent Platform Workbench es un entorno de desarrollo basado en notebooks de Jupyter para todo el flujo de trabajo de la ciencia de datos y el aprendizaje automático. Puedes interactuar con Agent Platform y otros servicios de Google Cloud desde el notebook de Jupyter de una instancia de Workbench. Por ejemplo, puedes acceder a tus datos y explorarlos desde un notebook de Jupyter usando las integraciones de BigQuery y Cloud Storage.

Los notebooks de Agent Platform Workbench proporcionan una solución flexible y escalable para desarrollar e implementar modelos de AA en Google Cloud.

1. Para crear una instancia de Workbench, en la consola de Cloud, haz clic en el menú de navegación () y, luego, selecciona Agent Platform > Notebooks.

2. En el menú de navegación de Notebooks, haz clic en Workbench.

3. Asegúrate de que Instancias esté seleccionado en la pestaña Instancias y, luego, haz clic en Crear nueva.

   

4. En la página Instancia nueva, en Nombre, escribe my-instance.

5. Deja la configuración restante con sus valores predeterminados y haz clic en Crear.

   Tu nueva instancia se inicia en la sección de instancias. Espera a que se cree la instancia antes de continuar con el siguiente paso.

   Nota: Aparecerá una marca de verificación verde junto a la instancia cuando esté lista para usarse.

6. Cuando la instancia esté lista, haz clic en Abrir Jupyterlab.

   

7. Para iniciar un notebook Python 3 de Jupyter, haz clic en el notebook Python 3.

   

Copia un archivo de notebook

Se aprovisionó previamente un notebook que crea e implementa un agente de LangChain para este lab.

1. Para copiar el notebook en tu instancia de JupyterLab, copia este código en la primera celda de tu nuevo notebook:

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

   

2. Selecciona la celda y ejecútala haciendo clic en Ejecutar en su menú:

   

   El comando copia el notebook desde Cloud Storage a tu instancia de JupyterLab. Una vez que se completa el comando, el archivo de notebook se muestra en la carpeta raíz de nivel superior.

   

3. Para abrir el notebook, haz doble clic en el archivo de notebook en la lista de la carpeta. Se crea otra pestaña con el contenido del notebook.

Crea y, luego, implementa un agente de Reasoning Engine

1. Ejecuta todas las celdas de código del notebook en orden, desde el principio. Para ejecutar una celda, haz clic en cualquier parte de ella para seleccionarla y, luego, haz clic en Ejecutar en el menú de la celda o en el menú superior del notebook.

   Nota: Cuando ejecutes el comando en una celda, espera a que se complete antes de pasar a la siguiente. Cuando se completa la ejecución de un comando, el asterisco (*) en el campo del número de la celda se reemplaza por el número de la celda. Nota: Antes de ejecutar una celda, consulta las notas que aparecen a continuación para conocer las instrucciones o los pasos específicos de la celda. Estas instrucciones se marcan con el prefijo CELL INSTR.

   a. [CELL INSTR] Reiniciar el entorno de ejecución actual

   Si se te solicita, en el diálogo Reiniciar kernel, haz clic en Aceptar.

   b. [CELL INSTR] Establecer la información del proyecto de Google Cloud y, luego, inicializar Agent Platform:

   Antes de ejecutar esta celda para inicializar Agent Platform, actualiza los valores de configuración para project_id, location y staging_bucket:

   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}}}"

   Celda actualizada con parámetros de configuración de muestra:

   

   c. [CELL INSTR] Definir el agente:

   Antes de ejecutar esta celda, reemplaza el valor de GEMINI_MODEL_ID por el ID del modelo más reciente que usa este notebook: .

   Nota: También puedes ejecutar una celda haciendo clic en Ejecutar en la barra de menú del notebook.

2. Después de ejecutar la celda Implementar el agente en Agent Runtime, espera a que el comando se complete y, luego, implementa el agente de LangChain. Luego, copia el ID del agente:

   

   Usarás este ID para configurar y volver a implementar la app de backend en la siguiente tarea.

   Nota: Esta celda puede tardar hasta 10 minutos en completarse. Espera a que se muestre el resultado final que indica que el agente se implementó antes de continuar con el siguiente paso.

3. Para probar la operación realizada correctamente del agente de LangChain, ejecuta las siguientes dos celdas y observa el resultado.

   El agente de LangChain invoca de forma correcta al almacén de datos de Wikipedia de o Agent Search según la entrada de la consulta.

Para verificar este objetivo, haz clic en Revisar mi progreso. Implementar el agente de LangChain

Tarea 4: Mejora la app de backend

Ahora mejoremos la app de backend para invocar al agente de LangChain que implementaste en la tarea anterior.

La versión inicial de la app de backend solo recuperaba resultados directamente de Agent Search. En la versión actualizada, la app también invocará al agente que usa el resultado de Gemini y las herramientas del agente para generar una respuesta de Agent Search o Wikipedia según la instrucción de entrada.

En esta tarea, actualizarás el código de la app de backend para agregar un punto de entrada adicional que invoque al agente de LangChain con una consulta de solicitud y devuelva la respuesta del agente.

Actualiza la app de backend

1. En la ventana de terminal del IDE, agrega el archivo app.py con el código del punto de entrada nuevo ejecutando el siguiente comando:

   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() # Crea el nombre del recurso para el proyecto name = f"projects/{project_id}" # Obtén los metadatos del proyecto project = client.get_project(name=name) # El campo 'nombre' en la respuesta está en el formato 'proyectos/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}") # El endpoint de la app de Flask debe llamar al agente @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. Configura la app de backend para que use el agente de LangChain que creaste anteriormente.

   Reemplaza la cadena {YOUR_LANGCHAIN_AGENT_ID} en el siguiente comando por el valor del ID de tu agente que copiaste de la celda del notebook en la tarea anterior. Luego, ejecuta el comando que aparece a continuación en la ventana de terminal del IDE.

   Asegúrate de quitar las llaves del comando sed.

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

3. Para ver el código en el IDE, en el menú de navegación del IDE, haz clic en y selecciona el archivo IDE-DEV/ag-web/app/app.py.

   En la versión mejorada de la app de backend, ocurre lo siguiente:

   • Se recupera un handle para remote_agent desde Agent Runtime con el LANGCHAIN_AGENT_ID del agente que creaste en la tarea anterior.
   • Se establece un nuevo extremo /ask_gemini que define la función ask_gemini().
   • La función pasa el parámetro query que proporciona el usuario desde la solicitud al agente de LangChain (remote_agent) y devuelve la respuesta del agente.

Crea y vuelve a implementar la app de backend en Cloud Run

1. Cambia a la carpeta de la app de backend:

   cd ~/ag-web/app

2. Ejecuta la secuencia de comandos para volver a implementar la app en la región de Cloud Run especificada:

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

Prueba la app de backend

Para probar las funcionalidades de la app, accede a su extremo de Cloud Run.

1. Copia la URL del extremo de la app que se generó en el paso anterior y navega a esa URL en una nueva pestaña del navegador.

2. Cuando la app se carga, la página principal muestra el mensaje Te damos la bienvenida a la app de backend ag-web.

3. En la barra de URL del navegador, agrega la ruta de acceso que se indica a continuación al final de la URL:

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

   La app responde con los resultados del agente que recuperó resultados del almacén de datos de Agent Search que creaste anteriormente.

   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. En la barra de URL del navegador, reemplaza la ruta por lo siguiente:

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

   La app responde con los resultados del agente que recuperó una respuesta de la API de Wikipedia que configuraste en el 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. Nota: La respuesta real que recibas puede ser diferente de las que se muestran arriba.

Tarea 5: Crea la app de frontend de Flutter

Flutter es un framework de desarrollo de apps multiplataforma de código abierto. Te permite escribir una base de código que se ejecuta en Android, iOS, macOS, Windows, Linux y la Web. Las apps de Flutter se desarrollan en el lenguaje de programación Dart.

Para los fines de este lab, usarás la Web como plataforma de destino, de modo que la app de Flutter se pueda implementar como una aplicación web y se pueda acceder a ella a través de un navegador.

En esta tarea, crearás una aplicación de chat simple con Flutter, actualizarás el código y, luego, crearás y ejecutarás la app como una aplicación web.

Crea la app de Flutter

1. En la terminal del IDE, ve a tu directorio principal y ejecuta lo siguiente:

   cd ~; flutter create chat_app

   El comando flutter create crea todos los archivos, carpetas y parámetros de configuración necesarios para un nuevo proyecto de Flutter ejecutable.

2. Para ver el código predeterminado de la app de chat en el IDE, ve a la carpeta IDE-DEV/chat_app.

   Es posible que debas hacer clic en Actualizar para actualizar el contenido del panel de navegación de carpetas en el IDE.

3. Si se te solicita que confíes en los autores de los archivos de la carpeta, haz clic en Sí, confío en los autores.

Revisa el código de la app de Flutter

Esta es una descripción general del contenido de la carpeta chat_app:

Carpeta/archivo	Descripción
chat_app	Es la carpeta raíz del proyecto que contiene las subcarpetas y los archivos que componen la app de Flutter.
android/ios/linux/macos/web/windows	Contiene archivos específicos de la plataforma que se necesitan para ejecutar la app de Flutter en cada plataforma compatible.
lib	Contiene los archivos de Dart principales de la aplicación, que incluyen la funcionalidad y la interfaz de usuario.
test	Contiene pruebas de Dart que se usan para probar los widgets de la app.
pubspec.yaml	Contiene las dependencias de la app, la versión de Flutter y otros parámetros de configuración.
analysis_options.yaml	Contiene parámetros de configuración para el análisis estático de la app.

Revisemos el archivo de punto de entrada main.dart de la app de Flutter.

• En el menú Explorador, haz clic en el archivo IDE-DEV/chat_app/lib/main.dart para abrirlo.

  Este es el punto de entrada de la app de Flutter. Después de realizar las tareas de inicialización, el código de este archivo crea la IU de la app con componentes de Material y establece el título, el tema y otros parámetros de configuración de la app.

  Nota: Una app de Material comienza con el widget MaterialApp, que crea una serie de widgets útiles en la raíz de la app, incluido un navegador que administra el enrutamiento a varias pantallas de la app.

  Flutter usa el concepto de widgets, que son clases declarativas que se utilizan para desarrollar la app. En Flutter, se crea un diseño generando widgets para crear widgets más complejos y formar un árbol de widgets. Para obtener más información sobre cómo crear IU en Flutter, consulta la documentación.

  Este archivo contiene las clases que crean los widgets de la app. Incluye lo siguiente:

  • La clase MyApp, que es el widget raíz de la aplicación de chat.
  • La clase MyHomePage, que crea la página principal de la app con la clase _MyHomePageState.
  • La clase _MyHomePageState, que crea la IU de la app y es responsable de actualizar el estado de la IU.

  Reemplazaremos el código generado predeterminado en estas clases durante las siguientes subtareas, a medida que crees la app de chat.

Actualiza el código de la app de Flutter

1. Primero, actualiza el título de la app. En la clase MyApp de la línea 14, cambia el valor de la propiedad title:

   title: 'Gemini Chat App',

   

2. En la clase _MyHomePageState, en la línea 58, borra la línea int _counter = 0; y la función _incrementCounter(), y agrega las siguientes propiedades:

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

   Estas propiedades se usan para aceptar la entrada del usuario en la instrucción de texto, almacenar la entrada del usuario y las respuestas de la app de backend para mostrarlas, y almacenar el nombre de host del servicio de Cloud Run de la app de backend.

3. Agrega el método initState() a la clase:

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

   Este método realiza funciones de inicialización cuando se crea el objeto State. En la app de chat, cargamos el contenido de un archivo invocando el método _loadConfig(), que implementaremos a continuación.

4. Agrega el método _loadConfig() a la clase:

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

   Este método recupera el contenido del archivo de configuración de la app de chat que almacena el valor del nombre de host de tu app de backend de Cloud Run en un objeto JSON. Crearemos este archivo más adelante en el lab. El método almacena el valor en la propiedad interna _cloudRunHost creada anteriormente y crea la IU del widget.

5. Agrega el método _sendMessage() a la clase:

   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'}); }); } }

   Este método recupera el texto de la instrucción ingresado por el usuario y lo agrega a la lista de mensajes que se muestran en el panel de chat. Envía una solicitud GET HTTP a la URL del extremo del servicio de backend de Cloud Run con la instrucción de entrada y muestra la respuesta del servicio.

   El código construye una URL al extremo del host de backend de Cloud Run que incluye el texto de la instrucción en un parámetro de consulta. Luego, la solicitud GET HTTP se envía al extremo. Una vez que se recibe la respuesta con un código de estado 200, se decodifica y se agrega a la lista de mensajes para mostrarla en la pantalla de chat. Si la respuesta no es exitosa o se produce una excepción, el código de estado o el mensaje de excepción se agrega a la lista de mensajes y se muestra.

6. Para crear la IU de la app de chat, reemplaza el método build existente por el siguiente código en la clase _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, ), ], ), ), ], ), ); }

   El método build describe la IU de la app de chat. Crea un árbol de widgets con la configuración y el estado actual, que el framework de Flutter renderiza en la pantalla. En esta IU de la app de chat, el código muestra los mensajes de chat en una columna junto con un campo de texto y un botón de envío para la instrucción del usuario. Los mensajes ingresados por el usuario (instrucciones) se renderizan en un cuadro azul, mientras que los mensajes de respuesta o error de la app (bot) se renderizan en un cuadro gris.

   Cuando el usuario hace clic en el botón para enviar en la app de chat o presiona Intro en el campo de texto después de ingresar una instrucción, se invoca el método de devolución de llamada _sendMessage().

Agrega importaciones

El código que se agregó depende de ciertas bibliotecas o paquetes de los SDK de Dart y Flutter.

1. Para importar esos paquetes, agrega las siguientes sentencias import al principio del archivo main.dart debajo de la sentencia import existente:

   import 'package:http/http.dart' as http; import 'dart:convert'; import 'package:flutter/services.dart' show rootBundle;
   • El paquete http.dart contiene un conjunto de funciones y clases generales que facilitan el consumo de recursos HTTP.
   • La biblioteca dart:convert tiene funciones que controlan las conversiones de datos comunes, como la serialización de JSON y la codificación y decodificación de UTF-8.
   • La propiedad rootBundle es un objeto estático global que proporciona acceso al paquete de recursos principal incluido en tu app de Flutter.

2. Para guardar los cambios en la app, en el menú de navegación del IDE, haz clic en Archivo > Guardar.

Actualiza las dependencias

El archivo pubspec.yaml especifica los metadatos del proyecto, las dependencias de paquetes y los recursos de tu app de Flutter.

1. Para editar el archivo pubspec.yaml, selecciónalo en el panel Explorador del IDE. El archivo está en la carpeta chat_app.

2. En la sección dependencies, agrega la dependencia del paquete http debajo de la biblioteca de fuentes cupertino_icons:

   http: ^1.6.0 Asegúrate de conservar el espacio de sangría correcto.

   

3. Desplázate a la sección flutter en el archivo pubspec.yaml y quita el comentario de la línea 63. Agrega la carpeta assets debajo de assets conservando el espacio de sangría:

   assets: - assets/

   

   Con esto, se configura la carpeta de recursos en la que almacenamos el archivo config.json para la app.

4. Para guardar los cambios en el archivo pubspec.yaml, en el menú de navegación del IDE, haz clic en Archivo > Guardar.

Integra la app de Flutter con el backend de Cloud Run

La app de Flutter se integra con el agente de Reasoning Engine que implementaste anteriormente en este lab. La integración se logra conectando la app de Flutter al extremo de la app de backend que también creaste y que implementaste en Cloud Run.

En el método _sendMessage(), es posible que hayas notado un código que verifica si la propiedad _cloudRunHost está vacía o no configurada en un archivo llamado assets/config.json. Agregaremos este archivo a nuestra app de Flutter en esta subtarea.

1. Primero, recupera el nombre de host del extremo de Cloud Run de la app de backend y almacena el valor en una variable de entorno.

   En la ventana de terminal del IDE, ejecuta lo siguiente:

   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. Crea el directorio /assets en el directorio principal de tu app de chat de Flutter:

   mkdir ~/chat_app/assets

3. Crea el archivo config.json en el directorio /assets:

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

4. Para verificar el cambio, actualiza el contenido en el menú Explorador del IDE y haz clic en el archivo IDE-DEV/chat_app/assets/config.json para abrirlo. Verifica que el valor de entrada de configuración cloudRunHost esté actualizado con el valor del nombre de host de tu app de backend de Cloud Run.

   Nota: El valor debe coincidir con el valor de la variable de entorno `BACKEND_APP_HOST` que configuraste en un paso anterior.

Implementa la app de Flutter

Ahora que la configuración de la app de Flutter está completa, puedes crear y, posteriormente, implementar la app. En el caso de este lab, para ejecutar la app como una aplicación web usamos Fwr, que es un servidor de desarrollo para Flutter web.

1. Asegúrate de estar en la carpeta de la app de Flutter. En la ventana de terminal del IDE, ejecuta lo siguiente:

   cd ~/chat_app

2. Ejecuta lo siguiente para recuperar las dependencias del proyecto de la app:

   flutter pub get

3. Para crear el proyecto y, luego, iniciar el servidor web, ejecuta lo siguiente:

   fwr

   Espera a que el servidor se inicie y entregue la app de Flutter. Una vez que se inicie, el resultado del comando debería ser similar a lo siguiente:

   

Tarea 6: Prueba la app de Flutter

Probemos la funcionalidad de la app de Flutter.

Prueba la app

1. Para acceder a la app de Flutter, copia la URL de Live Server del panel de credenciales del lab y ábrela en una nueva pestaña de la ventana de incógnito del navegador.

   Espera unos segundos para que se cargue la app de chat.

2. En el mensaje de la parte inferior, escribe lo siguiente:

   What is fallingwater? Write the answer in plaintext.

   Después de unos segundos, la respuesta del agente de backend aparece en la app.

3. Para probar la app y el agente, escribe lo siguiente en el mensaje:

   Where can I buy the Chrome dino pin?

   Después de unos segundos, la respuesta del agente de backend aparece en la app.

   La app de chat llama al extremo de Cloud Run /ask_gemini de la app de backend, que luego invoca al agente de LangChain que usa Gemini para devolver una respuesta del almacén de datos de Agent Search.

4. Para ver cómo se ajusta la app de Flutter a un diseño destinado a dispositivos móviles, cambia el tamaño de la ventana del navegador para que tenga uno similar al de un dispositivo móvil:

   

   Esto indica que la app de Flutter es responsiva a los cambios en función del tamaño de la pantalla o la ventana. Flutter tiene widgets y paquetes que ayudan a que tu app sea responsiva y se adapte a los cambios según la configuración del dispositivo.

Para verificar este objetivo, haz clic en Revisar mi progreso. Desarrollar y probar la app de chat de Flutter

Finaliza el lab

Cuando hayas completado el lab, haz clic en Finalizar lab. Google Skills quitará los recursos que usaste y limpiará la cuenta.

Tendrás la oportunidad de calificar tu experiencia en el lab. Selecciona la cantidad de estrellas que corresponda, ingresa un comentario y haz clic en Enviar.

La cantidad de estrellas indica lo siguiente:

• 1 estrella = Muy insatisfecho
• 2 estrellas = Insatisfecho
• 3 estrellas = Ni satisfecho ni insatisfecho
• 4 estrellas = Satisfecho
• 5 estrellas = Muy satisfecho

Puedes cerrar el cuadro de diálogo si no deseas proporcionar comentarios.

Para enviar comentarios, sugerencias o correcciones, usa la pestaña Asistencia.

¡Felicitaciones!

En este lab, hiciste lo siguiente:

• Creaste un almacén de datos de búsqueda y una app de búsqueda con AI Applications en la consola de Google Cloud.
• Implementaste un agente de LangChain con Agent Platform Workbench.
• Creaste una app de Python que se integra con Agent Search y el agente de LangChain.
• Implementaste la app en Cloud Run y la utilizaste como backend para una app de Flutter.
• Desarrollaste una app de chat de Flutter y la integraste con el servicio de backend para que interactuara con Gemini.

Próximos pasos y más información

• Descripción general de Gemini para Google Cloud
• Agent Platform Workbench
• Gemini Enterprise Agent Platform Studio
• Flutter
• Dart

Copyright 2026 Google LLC. Todos los derechos reservados. Google y el logotipo de Google son marcas de Google LLC. El resto de los nombres de productos y empresas pueden ser marcas de las respectivas empresas a las que están asociados.