Implementa apps rápidamente con App Design Center

1. Introducción

En este codelab, aprenderás a implementar una aplicación de pila completa con el App Design Center (ADC) de Google Cloud. Implementarás la aplicación "The Cymbal London Concierge", que incluye un frontend de Vue 3, un backend de FastAPI y un servidor de MCP que contiene los datos de la aplicación.

ADC te permite definir visualmente la arquitectura de tu aplicación y, luego, implementarla como una sola unidad, administrando las dependencias y las conexiones de forma automática.

Actividades

Configura App Design Center.
Ensambla visualmente los componentes de la aplicación.
Implementa la arquitectura de la aplicación.
Verifica que la aplicación se esté ejecutando.
Verifica que la aplicación se haya registrado en App Hub.
Verifica las métricas, los registros y los seguimientos de la aplicación en Application Monitoring.

Requisitos

Un navegador web, como Chrome
Un proyecto de Google Cloud con facturación habilitada.

Este codelab es para desarrolladores de todos los niveles, incluidos los principiantes.

Duración estimada: 45 minutos Costo estimado: Menos de USD 2.00

2. Configuración

Configura el proyecto

Crea un proyecto de Google Cloud

En la página del selector de proyectos de la consola de Google Cloud, selecciona o crea un proyecto de Google Cloud.
Asegúrate de que la facturación esté habilitada para tu proyecto de Cloud. Obtén información para verificar si la facturación está habilitada en un proyecto.

Inicie Cloud Shell

Cloud Shell es un entorno de línea de comandos que se ejecuta en Google Cloud y que viene precargado con las herramientas necesarias.

Haz clic en Activar Cloud Shell en la parte superior de la consola de Google Cloud.
Una vez que te conectes a Cloud Shell, verifica tu autenticación:
```
gcloud auth list
```
Confirma que tu proyecto esté configurado:
```
gcloud config get project
```

Si tu proyecto no está configurado como se esperaba, configúralo:

export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

3. Configurar Application Design Center

Antes de ensamblar tu aplicación, debes configurar tu espacio de trabajo en ADC.

En la consola de Google Cloud, busca App Design Center y navega a él.
Si es la primera vez que usas ADC en este proyecto, verás una pantalla de configuración.
Haz clic en Ir a Configuración.

Configura App Design Center

Se te pedirá que habilites las APIs requeridas si aún no están habilitadas. Haz clic en Habilitar para continuar.

Habilita las APIs

4. Explora las funciones de ADC

En esta tarea, aprenderás sobre los componentes principales de ADC: espacios, catálogos y plantillas.

Espacios de ADC

Un espacio es una ubicación para crear plantillas y, luego, implementar apps. Cada espacio pertenece a un proyecto de Google Cloud. ADC crea un espacio predeterminado durante la configuración inicial, pero puedes crear otros espacios en diferentes regiones más adelante.

Para ver tus espacios a través de la terminal, sigue estos pasos:

Haz clic en Abrir editor en la barra de herramientas de Cloud Shell o usa la terminal.
Ejecuta el siguiente comando:

gcloud alpha design-center spaces list \
--project="your PROJECT ID" \
--location=us-central1

Deberías ver un resultado similar a este, que indica que el espacio predeterminado está presente para la región.

createTime: '20XXXX-XX-XXT09:19:29.456016967Z'
displayName: default-space
enableGcpSharedTemplates: true
name: projects/your-project-id/locations/us-central1/spaces/default-space

5. Cómo ensamblar la plantilla

En este paso, asumirás el rol de ingeniero del equipo de la plataforma. Tu objetivo es crear una plantilla reutilizable, segura y compatible para las aplicaciones basadas en agentes de tu organización. Agregarás componentes y configurarás restricciones para garantizar que cualquier aplicación implementada desde esta plantilla cumpla con las políticas de la nube de tu empresa.

1. Crea un diseño nuevo

En la consola de ADC, haz clic en Templates > Create Template.
Asigna el nombre simple-3-tier-agentic-app a tu plantilla, ya que se usará para implementar la aplicación Cymbal London Concierge y otras aplicaciones similares.

2. Agrega el servidor de MCP de datos

Este componente controla las interacciones con la base de datos y la búsqueda de vectores.

Haz clic en Add Component > Cloud Run (Service). Si haces clic en ese componente, verás un ID de componente en la esquina superior derecha. Tendrá el formato cloud-run-1. Podemos cambiarlo a data-mcp-server editándolo en la vista de código (que se analizará más adelante), pero dejémoslo como está.
Ingresa el Nombre del servicio: data-mcp-server.
En Mostrar configuración avanzada, establece Miembros en: allUsers. (Nota: En un entorno de producción, es probable que restrinjas esto, pero lo usamos aquí para simplificar el codelab).
En Mostrar configuración avanzada, establece ACCESO A VPC y, luego, establece Salida en PRIVATE_RANGES_ONLY.
De manera opcional, en Mostrar configuración avanzada, desmarca Habilitar archivo adicional de Prometheus.
Haz clic en Guardar.

3. Agrega el backend del agente

Esta es la aplicación de FastAPI que organiza el comportamiento de los agentes.

Haz clic en Add Component > Cloud Run (Service).
Asígnale el nombre agent-backend.
En Mostrar campos avanzados, marca la casilla de verificación Crear cuenta de servicio y agrega los siguientes roles en Roles del proyecto de la cuenta de servicio uno a la vez:
- roles/monitoring.metricWriter
- roles/logging.logWriter
- roles/cloudtrace.agent
- roles/telemetry.writer
- roles/serviceusage.serviceUsageConsumer. Estos roles permitirán que el agente use Cloud Monitoring, Cloud Logging y Cloud Trace. Compliance Config: El equipo de la plataforma aplica el principio de privilegio mínimo enumerando de forma explícita los roles requeridos.
En Mostrar configuración avanzada, establece Miembros en: allUsers.
En Mostrar configuración avanzada, establece ACCESO A VPC y, luego, establece Salida en PRIVATE_RANGES_ONLY.
De manera opcional, en Mostrar configuración avanzada, desmarca Habilitar Prometheus Sidecar.
Conecta agent-backend a data-mcp-server arrastrando una conexión de agent-backend a data-mcp-server.
Haz clic en Guardar.

4. Agrega el frontend

La IU de frontend

Haz clic en Add Component > Cloud Run (Service).
Ingresa el Nombre del servicio: frontend.
En Mostrar configuración avanzada, desmarca Crear cuenta de servicio.
En Mostrar configuración avanzada, establece Ingress en INGRESS_TRAFFIC_INTERNAL_LOADBALANCER. Compliance Config: Se bloquea el acceso público directo al contenedor de frontend, lo que obliga al tráfico a pasar por el balanceador de cargas.
En Mostrar configuración avanzada, establece Miembros en: allUsers.
De manera opcional, en Mostrar configuración avanzada, desmarca Habilitar Prometheus Sidecar.
Haz clic en Guardar.
Conecta frontend a agent-backend arrastrando una conexión de frontend a agent-backend.

5. Agrega un componente de Vertex AI

Haz clic en Add Component > Vertex AI.
Asígnale el nombre vertex-ai.
Conecta el agent-backend y el data-mcp-server arrastrando dos conexiones desde el vertex-ai al agent-backend y al data-mcp-server, respectivamente. Los roles aiplatform.user ya estarán asignados a las cuentas de servicio de agent-backend y data-mcp-server por el hecho de estar conectadas al componente de Vertex AI.

6. Agrega el balanceador de cargas global

El balanceador de cargas expone tu frontend a Internet pública. En ADC, esto se divide en un componente de backend y uno de frontend.

A. Agrega el backend del balanceador de cargas

Haz clic en **Add Component > Global Cloud Load Balancing (Backend).
Asígnale el nombre galb-backend.
Haz clic en Agregar conexión y conéctala a frontend.

B. Agrega el frontend del balanceador de cargas

Haz clic en **Add Component > Global Cloud Load Balancing (Frontend).
Asígnale el nombre galb-frontend.
Haz clic en Agregar conexión y conéctala a galb-backend.
Conecta galb-frontend a galb-backend arrastrando una conexión de galb-frontend a galb-backend.

Plantilla de app

Un catálogo te permite compartir plantillas de apps en diferentes espacios, lo que habilita la gobernanza de la arquitectura. Un catálogo actúa como un repositorio central de plantillas que el equipo de la plataforma crea y aprueba para compartir. Compartir catálogos entre espacios evita el esfuerzo duplicado en proyectos comunes y optimiza los tiempos de inicio.

Ahora, agrega tu plantilla al catálogo:

Haz clic en la pestaña Catálogos.
Haz clic en Agregar plantillas y selecciona la plantilla simple-3-tier-agentic-app.
Haz clic en Agregar al catálogo.

Puedes encontrar plantillas en tres ubicaciones: Plantillas de Google (patrones predefinidos), Plantillas compartidas (compartidas en toda tu organización) y Plantillas (planos personalizados en tu espacio).

6. Implementa la aplicación

Ahora es el momento de interpretar el rol de un desarrollador de apps que desea usar esta plantilla para implementar la aplicación cymbal-london-concierge.

En la consola de ADC, vuelve a abrir la plantilla en la pestaña Plantillas y haz clic en el botón Configurar app.
Haz clic en Crear aplicación nueva.
Configura la aplicación:
- Nombre de la aplicación: cymbal-london-concierge
- Proyecto de implementación: ID de tu proyecto
- Región: us-central1
- Input Attributes>Environment: Development
- Input Attributes>Criticality: Low
Haz clic en Crear aplicación.Para una implementación de producción, seleccionarías "Producción" en Entorno y "Alta" en Criticidad. Estas son etiquetas que ayudarán a tus equipos de SRE y de operaciones a ordenar y priorizar el trabajo en relación con los problemas que surjan.
Se debería abrir la página de detalles de la implementación con la plantilla de la aplicación. Dado que esto es solo una plantilla, aún debemos agregar la configuración específica de nuestra aplicación.
Configuremos el frontend. Haz clic en el componente frontend.
1. Haz clic en Contenedores > Editar contenedor.
2. Debemos reemplazar la imagen de contenedor genérica por la que queremos usar para nuestra aplicación.
3. Establece la imagen del contenedor en: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/frontend:codelab-c2c6-v1
4. Establece el puerto http1 en 80.
5. Configura las siguientes variables de entorno:
  - API_BASE_URL: module.cloud-run-2.service_uri (asegúrate de que cloud-run-2 sea el nombre del componente de backend del agente; de lo contrario, reemplázalo por el nombre real del componente)
6. Haz clic en Guardar.
Configuraremos el backend del agente. Haz clic en el componente agent-backend.
1. Haz clic en Contenedores > Editar contenedor.
2. Debemos reemplazar la imagen de contenedor genérica por la que queremos usar para nuestra aplicación.
3. Establece la imagen del contenedor en us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/agent:codelab-c2c6-v1.
4. Configura las siguientes variables de entorno:
5. GOOGLE_CLOUD_PROJECT:
6. GOOGLE_CLOUD_LOCATION: us-central1
7. DATA_BACKEND_URL: module.cloud-run-1.service_uri (asegúrate de que cloud-run-1 sea el nombre del componente del servidor de mcp de datos; si no es así, reemplázalo por el nombre real del componente)
8. Establece el puerto http1 en 8000.
9. Haz clic en Guardar.
Configuraremos el servidor de datos de MCP. Haz clic en el componente data-mcp-server.
1. Haz clic en Contenedores > Editar contenedor.
2. Debemos reemplazar la imagen de contenedor genérica por la que queremos usar para nuestra aplicación.
3. Establece la imagen del contenedor en us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/data_mcp:codelab-c2c6-v1.
4. Configura las siguientes variables de entorno:
5. GOOGLE_CLOUD_PROJECT:
6. GOOGLE_CLOUD_LOCATION: us-central1
7. DB_TYPE: sqlite
8. EMBEDDING_MODEL: text-embedding-005
9. Establece el puerto http1 en 8002.
10. Haz clic en Guardar.
En una situación de producción real, también configurarías una base de datos como CloudSQL o AlloyDB y proporcionarías la cadena de conexión de la base de datos para el servidor de mcp de datos. Sin embargo, para este lab, usaremos una base de datos en la memoria. También harías que el servidor de mcp y la base de datos sean privados y solo accesibles desde el backend del agente o desde la red.
Haz clic en el botón Code en la parte superior de la página para ver el código de Terraform de la aplicación. También puedes descargar el código de Terraform para la aplicación haciendo clic en el botón Get Code para almacenarlo en tu base de código.
Haz clic en el botón Deploy en la esquina superior derecha de la página para implementar la aplicación.
En la página de implementación, se te pedirá que crees una cuenta de servicio para la canalización de implementación o que elijas una existente. Haz clic en Crear cuenta de servicio (se autocompletará un nombre) y, luego, en Continuar. La creación de una cuenta de servicio nueva tardará unos segundos.

Crear una cuenta de servicio.

Una vez que se cree la cuenta de servicio, se actualizará la página y verás la opción Seleccionar cuenta de servicio con una marca de verificación junto a ella.

Se creó la cuenta de servicio

Luego, haz clic en Implementar en la parte inferior de la página.
Tardará unos minutos en completarse. Cuando se complete la implementación, verás una marca de verificación verde junto a cada componente. También puedes verificar el estado de la implementación haciendo clic en el botón Vínculo a los registros, que abrirá los registros de Cloud Build. Es posible que el botón tarde unos minutos en aparecer.

![Deployment Logs](./img/10b_logs.png)

Puedes ver los registros de compilación en la nube para conocer el estado de la implementación o si hay errores que puedan ocurrir durante la implementación de la aplicación. También puedes ir directamente a los registros de Cloud Build. Para ello, busca Cloud Build en la consola de Google Cloud y haz clic en Historial. La aplicación tardará entre 5 y 8 minutos en implementarse.

![Cloud Build](./img/10c_cloudbuild.png)

Una vez que se complete la implementación, verás una marca de verificación verde junto al campo Estado de implementación.

![Deployment Complete](./img/11_deployed.png)

7. Verifica la aplicación

Probemos si el agente está activo. En la sección outputs de la página de detalles de la implementación, verás la URL del componente de frontend. Copia esa URL y pégala en tu navegador. Asegúrate de usar http y no https. También acepta las advertencias que puedas recibir en el navegador, ya que el frontend usa http.

Chatea con la app y pídele que cree un itinerario para un viaje a Londres.

Frontend

8. App Hub y Supervisión de aplicaciones

En la consola de ADC, haz clic en el botón Ver la app en App Hub que se encuentra en la esquina superior derecha de la página.

App Hub

Se abrirá la app en App Hub. App Hub es un lugar central para ver y administrar todas tus aplicaciones, lo que te permite pasar de una vista centrada en los recursos a una centrada en las aplicaciones. Cuando creas una app con ADC, se crea automáticamente una app en App Hub. Aquí deberías ver todas las cargas de trabajo y los servicios que componen la aplicación. En lugar de ver los recursos en la nube como recursos individuales, puedes verlos como parte de una sola aplicación, lo que simplifica la administración y la gobernanza.