Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Planifica y crea apps con el complemento de Conductor

1. Introducción

En este codelab, aprenderás a planificar y compilar aplicaciones de software con el complemento Conductor. Conductor es un complemento de código abierto creado por Google que habilita funciones de desarrollo basadas en especificaciones, como la planificación y el seguimiento de la implementación. Comenzarás por compilar una aplicación "greenfield" desde cero. Luego, la tratarás como un proyecto "brownfield" y la iterarás para agregar autenticación y almacenamiento.

Actividades

Instala el complemento Conductor en la CLI de Antigravity o Claude Code.
Compila una app web "Picker Wheel" desde cero con las capacidades de planificación y de implementación de Conductor.
Agrega personalización a la aplicación agregando autenticación y almacenamiento con Firebase.

Qué aprenderás

Cómo usar el complemento Conductor para planificar, implementar y revisar una aplicación "greenfield"
Cómo usar el complemento Conductor para agregar funciones a una aplicación "brownfield"

Requisitos

Un navegador web, como Chrome
Un proyecto de Google Cloud con la facturación habilitada.
Node.js instalado (se recomienda la versión 18 o posterior)
Un editor de código local, como Visual Studio Code
Un agente de programación, como la CLI de Antigravity o Claude Code

2. Antes de comenzar

Cómo crear un proyecto de Google Cloud

En la consola de Google Cloud, en la página del selector de proyectos, 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 espera, configúralo:

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

Habilita las APIs

Habilita la API de Firebase Management en tu proyecto de Google Cloud.

gcloud services enable firebase.googleapis.com

Agrega Firebase a tu proyecto

Firebase CLI viene preinstalada en Cloud Shell. Desde Cloud Shell, accede con la misma Cuenta de Google que te permite acceder al proyecto de Google Cloud. Si trabajas de forma local, instala Firebase CLI siguiendo las instrucciones.

firebase login

Ejecuta el siguiente comando para agregar Firebase a tu proyecto de Google Cloud:

firebase projects:addfirebase

Si es la primera vez que ejecutas la CLI de firebase, responde las preguntas que se te hagan.

Sal de Cloud Shell

Puedes cerrar la ventana de Cloud Shell. En la siguiente sección, configuraremos tu entorno local.

3. Instala y autentica agentes de programación de la CLI

En este paso, prepararás tu entorno de desarrollo local instalando y autenticando la CLI de Antigravity o Claude Code en tu editor de código local con tus credenciales de Google Cloud.

Instala y autentica la CLI de Antigravity

Instala la versión más reciente de la CLI de Antigravity.

# MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd

Reinicia tu terminal para que agy se agregue a tu RUTA DE ACCESO.
Verifica la instalación para asegurarte de que se haya instalado la versión más reciente.
```
agy --version
```
Autentica con tus credenciales de Google Cloud.
- Inicia la CLI de Antigravity.
```
agy
```
- Cuando se te solicite Seleccionar método de acceso, selecciona Usar un proyecto de Google Cloud. Abre la URL de autorización segura en un navegador web. Accede con tus credenciales aprobadas y completa la autenticación. El navegador muestra un código de autorización alfanumérico único. Copia este código, vuelve a tu terminal y pégalo en el mensaje.
También puedes elegir otros métodos de acceso. El objetivo de este codelab es mostrar cómo trabajar con un proyecto de Google Cloud.
Sal de la CLI de Antigravity.Escribe /exit desde la terminal de la CLI para finalizar tu sesión en vivo de la CLI de Antigravity antes de continuar.

Instala y autentica Claude Code

Como alternativa, puedes usar el complemento Conductor con Claude Code. Aquí instalaremos y autenticaremos Claude Code con tus credenciales de Google Cloud.

Instala la versión más reciente de Claude Code.
Autentica con tus credenciales de Google Cloud.
- Inicia Claude Code.
```
claude
```
- Escribe /login para seleccionar tu método de acceso. Elige la opción Plataforma de terceros · Amazon Bedrock, Microsoft Foundry o Vertex AI y Google Vertex AI. Para configurar Google Vertex AI, elige Credenciales predeterminadas de la aplicación (google auth) y completa la configuración según se te solicite.
También puedes elegir otros métodos de acceso. El objetivo de este codelab es mostrar cómo trabajar con un proyecto de Google Cloud.
Reinicia Claude Code.

4. Instala el complemento Conductor

Conductor es un complemento de código abierto creado por Google que habilita funciones de desarrollo basadas en especificaciones, como la planificación y el seguimiento de la implementación.

Instala en la CLI de Antigravity

Instala el complemento:

CLI de Antigravity

agy plugins install https://github.com/gemini-cli-extensions/conductor

Verifica la instalación:
- Inicia la CLI de Antigravity.
```
agy
```
- Escribe /conductor y verás una lista de comandos como /conductor:conductor-setup, /conductor:conductor-new-track, conductor:conductor-implement, etc.
Sal de la CLI.Escribe /exit desde la terminal para finalizar tu sesión en vivo de la CLI antes de continuar.

Instala en Claude Code

Registra el repositorio de Marketplace y, luego, instala el complemento Conductor directamente en tu sesión de Claude Code.
```
/plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
```
Verifica la instalación.
- Escribe /conductor y verás una lista de comandos como /conductor-setup, conductor-new-track, conductor-implement, etc.
Sal de la CLI.Escribe /exit desde la terminal de Claude Code para finalizar tu sesión en vivo de la CLI antes de continuar.

5. Desarrollo greenfield: La rueda de selección

Ahora que tu entorno está configurado, compilarás una aplicación nueva desde cero. Crearás una "rueda de selección", una app web liviana que gira para seleccionar una opción aleatoria.

Configura el contexto del producto

Crea un directorio de proyecto nuevo y cambia a él.Ahora trabajamos en un proyecto en un directorio picker-wheel. Crea este directorio y cambia a él.
```
mkdir picker-wheel
cd picker-wheel
```
Inicia la CLI de Antigravity.Inicia una nueva sesión de la CLI desde el directorio de tu proyecto con la CLI de Antigravity o Claude Code.
```
# Antigravity CLI
agy

# Claude Code
claude
```
- Cuando se te pregunte "¿Confías en los archivos de esta carpeta?", selecciona Confiar en la carpeta (picker-wheel).
Inicializa Conductor.Ejecuta el comando de configuración para generar el proyecto y configurar el entorno de Conductor.
```
# Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
```
Sigue las indicaciones interactivas.Las indicaciones interactivas que ves no coincidirán exactamente con estos ejemplos. Enfócate en un diseño más simple para familiarizarte con el flujo de trabajo de Conductor.
- Objetivo del producto: Una aplicación web que muestra una rueda giratoria configurable para seleccionar un elemento aleatorio de una lista.
  - Público objetivo → Público general
  - Interacción → Presionar o hacer clic para girar
  - Personalización → Básica
  - Plataforma → Prioridad para computadoras
- Lineamientos del producto: Se generan automáticamente.
- Pila tecnológica:
  - Idiomas → TypeScript/JavaScript: Ideal para la Web de pila completa
  - Frontend → Vue.js: Interfaces web intuitivas
  - Backend → Express.js: Backend rápido de Node
  - Base de datos → Ninguna: No se necesita base de datos
- Flujo de trabajo: Estándar.
- Requisitos del producto:
  - Historias de usuario → Opciones personalizables, visualización clara del ganador
  - Funciones clave → Lista de opciones editables, colores aleatorios
  - Restricciones → Solo del cliente, alto rendimiento
  - No funcionales → Alta cobertura de pruebas, TypeScript y Vue.js, diseño responsivo
Conductor generará archivos de contexto en un directorio conductor/.

Crea una pista nueva

Una "pista" en Conductor representa una función o una unidad de trabajo.

Inicia una pista nueva con /conductor-new-rack.Conductor podría proponer una pista inicial basada en el contexto del producto. Como alternativa, puedes proponer la tuya o pedirle a Conductor que te sugiera una.
Revisa el plan generado.Conductor generará un index.md, un spec.md y un plan.md dentro de conductor/tracks/{track-id}/. Tómate un momento para leerlos. Si todo se ve bien, Conductor te pedirá que guardes y confirmes los archivos de configuración iniciales.

Implementa la pista

Inicia la implementación.
```
# Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
```
Conductor ahora trabajará en el plan y escribirá código para el proyecto.
Sugerencia: Para evitar quedarte atascado en shells interactivos o procesos de larga duración (como servidores de desarrollo o observadores de pruebas), debemos asegurarnos de que Conductor sepa exactamente cómo controlar estos comandos específicos. Las herramientas como Vite (npm run dev) y Vitest (npm run test) suelen ejecutarse en "modo de observación" de forma predeterminada, lo que mantiene el proceso abierto de forma indefinida. Puedes indicarle a Conductor que inhabilite el modo de observación o que use is_background: true cuando ejecute comandos actualizando workflow.md.
Verifica la aplicación.Durante la fase de implementación, Conductor te pedirá que pruebes la aplicación de forma manual. Por ejemplo, te pedirá que abras el servidor web local, obtengas una vista previa de la aplicación en tu navegador y verifiques los cambios. Cuando se complete la implementación, deberías ver una rueda de selección funcional.
Solución de problemas: Si el código generado se comporta de forma inesperada, consulta conductor/tracks/.../plan.md para ver si hay pasos o errores omitidos.
Revisa la implementación.Como último paso, puedes pedirle a Conductor que revise la implementación. Debería revisar el código fuente, sincronizar la documentación del proyecto y archivar la pista.
```
# Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review
```

6. Iteración brownfield: Agrega personalización

Ahora pasarás al desarrollo "brownfield". Mejorarás la aplicación web de la rueda de selección de la sección anterior para que los usuarios que accedan puedan guardar y restablecer sus configuraciones de la rueda de selección.

Crea una pista de personalización

En el siguiente ejemplo de "brownfield", usaremos Firebase para la autenticación y el almacenamiento. Instala las habilidades de Firebase para que Conductor pueda usarlas.
Inicia tu agente de la CLI.Inicia una nueva sesión de la CLI.
```
# Antigravity CLI
/new

# Claude Code
/new
```

Inicia una pista nueva.Inicia una pista nueva.

# Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "I want users to be able to log in to their accounts
and save their picker wheel configurations."

Sigue las indicaciones interactivas.Las indicaciones interactivas que ves no coincidirán exactamente con estos ejemplos. Enfócate en un diseño más simple para familiarizarte con el flujo de trabajo de Conductor.
- Objetivo de la pista:
  - Proveedor de autorización → Firebase Auth
  - Configuraciones guardadas → Opciones de la rueda
  - Almacenamiento de datos → Firestore
  - IU de acceso a Firestore → Superposición modal
Conductor generará archivos de contexto para una pista nueva dentro de conductor/tracks/{track-id}.
Revisa el plan generado.Tómate un momento para leer un index.md, un spec.md y un plan.md dentro de conductor/tracks/{track-id}/.

Implementa.Si todo se ve bien, puedes iniciar la implementación.

# Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement

Verifica.Vuelve a cargar tu aplicación. Deberías ver una aplicación actualizada.
En caso de que la IA se quede atascada con la prueba de la implementación de la autenticación, recuerda habilitar Acceder con Google en la Firebase console en Authentication > Sign-in method.

Este es el código dorado para una implementación de referencia. Debes proporcionar tu proyecto de Firebase en .firebaserc y tus configuraciones de Firebase en firebase.ts para iniciar tu aplicación correctamente.

7. Limpia

Para evitar cargos continuos en tu cuenta de Google Cloud, borra los recursos creados durante este codelab.

Borra el proyecto de Firebase y el proyecto de Google Cloud

La forma más fácil de realizar una limpieza es borrar el proyecto por completo.

En la consola de Google Cloud, selecciona el proyecto que creaste.
Haz clic en BORRAR.

Como alternativa, si deseas conservar el proyecto, pero borrar los recursos, haz lo siguiente:

Borra la base de datos de Firestore: Ve a Firebase console > Firestore y borra la base de datos.
Borra la autenticación: Ve a Firebase console > AuthenticationSign-in method, inhabilita Google.

8. Felicitaciones

¡Felicitaciones! Usaste correctamente el complemento Conductor en el agente de programación que elegiste (CLI de Antigravity o Claude Code) para compilar una aplicación web desde cero y, luego, iterarla con funciones complejas como la autenticación y la integración de bases de datos.

Próximos pasos

Explora la documentación de los complementos de la CLI de Antigravity.
Explora la documentación de los complementos de Claude Code.