Planifica y crea apps con el Conductor de Gemini CLI

1. Introducción

En este codelab, aprenderás a planificar y compilar aplicaciones de software con la extensión Gemini CLI Conductor. Comenzarás por compilar una aplicación "greenfield" completamente desde cero. Luego, lo tratarás como un proyecto "brownfield" y lo iterarás para agregar autenticación y almacenamiento.

Actividades

Instala Gemini CLI y la extensión Conductor
Crea una app web de "ruleta" desde cero con las capacidades de planificación e implementación de Conductor
Agrega personalización a la aplicación con la incorporación de autenticación y almacenamiento con Firebase

Qué aprenderás

Cómo usar la extensión de Conductor para planificar, implementar y revisar una aplicación "greenfield"
Cómo usar la extensión Conductor para agregar funciones a una aplicación existente

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

2. Antes de comenzar

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

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. En 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 Gemini CLI y Conductor de forma local

En este paso, prepararás tu entorno de desarrollo local instalando Gemini CLI y la extensión Conductor con tu editor de código y terminal locales.

Instala Gemini CLI

Instala la versión más reciente de Gemini CLI de forma global con npm:
```
npm install -g @google/gemini-cli
```
Si ves errores de permisos, es posible que debas usar un administrador de versiones como nvm o ejecutar este comando como raíz con sudo.
Reinicia la terminal para que gemini se agregue a tu PATH.
Verifica que la instalación haya instalado la versión más reciente:
```
gemini --version
```
Crea un directorio de proyecto nuevo y cámbialo: En una sección posterior, crearemos un proyecto en un directorio picker-wheel. Crea ese directorio ahora y cambia a él:
```
mkdir picker-wheel
cd picker-wheel
```
Authenticate:
- Inicia Gemini CLI.
```
gemini
```
- Cuando se te pregunte “¿Confías en los archivos de esta carpeta?”, selecciona Confiar en la carpeta (rueda selectora).
- Cuando se te pregunte "¿Cómo deseas autenticarte para este proyecto?", selecciona Vertex AI. Sigue la guía de autenticación para obtener una clave de API de Google Cloud y establecer la variable de entorno GOOGLE_API_KEY. Dedica un momento a explorar los diferentes niveles de uso y sus correspondientes límites de frecuencia de la API.
Salir de Gemini CLI: Escribe /quit en la terminal de la CLI para finalizar tu sesión activa de Gemini CLI antes de continuar.

Instala la extensión de Conductor

Conductor es una extensión de Gemini CLI de código abierto creada por Google que habilita funciones de desarrollo basadas en el contexto, como la planificación y el seguimiento de la implementación.

Instala la extensión:

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

Verifica la instalación:
- Inicia Gemini CLI.
```
gemini
```
- Escribe /conductor y verás una lista de comandos como setup, newTrack, implement, etcétera.
Salir de Gemini CLI: Escribe /quit en la terminal de la CLI para finalizar tu sesión activa de Gemini CLI antes de continuar.

4. Desarrollo de Greenfield: La rueda de selección

Ahora que tu entorno está configurado, compilarás una nueva aplicación 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

Confirma que estás en el directorio picker-wheel que creaste en la sección anterior:
```
pwd
```
Inicia Gemini CLI: Inicia una nueva sesión de Gemini CLI desde el directorio de tu proyecto.
```
gemini
```
Inicializa Conductor: Ejecuta el comando de configuración para crear la estructura del proyecto y configurar el entorno de Conductor.
```
/conductor:setup
```
Sigue las instrucciones interactivas: Las instrucciones interactivas que verás 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 ruleta configurable para seleccionar un elemento aleatorio de una lista.
  - Público objetivo → Público en general
  - Interacción → Tocar o hacer clic para girar
  - Personalización → Básica
  - Plataforma → Desktop-First
- Lineamientos de productos: Se generan automáticamente.
- Pila tecnológica:
  - Lenguajes → 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 una base de datos
- Flujo de trabajo: Estándar.
- Requisitos del producto:
  - Historias de usuarios → Opciones personalizables, visualización clara del ganador
  - Funciones clave → Lista de opciones editables, colores aleatorios
  - Restricciones → Solo del cliente, alto rendimiento
  - No funcional → Alta cobertura de pruebas, TypeScript y Vue.js, diseño adaptable
Conductor generará archivos de contexto en un directorio conductor/.

Cómo crear un segmento nuevo

En Conductor, un "Track" representa una función o una unidad de trabajo.

Inicia una pista nueva con /conductor:newTrack. Conductor puede proponer un segmento inicial según el contexto del producto. Como alternativa, puedes proponer tu propia pista o pedirle al director 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}/. Dedica un momento a leerlos. Si todo se ve bien, Conductor te pedirá que guardes y confirmes los archivos de configuración iniciales.

Implementa el seguimiento

Comienza la implementación:
```
/conductor:implement
```
Conductor ahora trabajará en el plan y escribirá código para el proyecto.
Nota: Para evitar quedarnos atascados 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, que obtengas una vista previa de la aplicación en tu navegador y que verifiques los cambios. Cuando la implementación esté completa, deberías ver una rueda selectora funcional.
Solución de problemas: Si el código generado se comporta de forma inesperada, verifica el conductor/tracks/.../plan.md para ver si se omitieron pasos o si hay errores.
Revisa la implementación: Como último paso, puedes pedirle a Conductor que revise la implementación. Debe revisar el código fuente, sincronizar la documentación del proyecto y archivar el segmento.
```
/conductor:review
```

5. Iteración de Brownfield: Agrega personalización

Ahora, cambiarás al desarrollo de "brownfield". Mejorarás la aplicación web de la rueda selectora de la sección anterior para que los usuarios que accedan a su cuenta puedan guardar y restablecer sus configuraciones de la rueda selectora.

Crea un segmento de personalización

En el siguiente ejemplo de "brownfield", usaremos Firebase para la autenticación y el almacenamiento. Instala la extensión de Firebase de Gemini CLI para que Conductor pueda usarla.
```
gemini extensions install https://github.com/gemini-cli-extensions/firebase
```
Inicia Gemini CLI: Inicia una nueva sesión de Gemini CLI desde el directorio de tu proyecto.
```
gemini
```

Iniciar un nuevo registro: Inicia un nuevo registro.

/conductor:newTrack "I want users to be able to log in to their accounts and
save their picker wheel configurations."

Sigue las instrucciones interactivas: Las instrucciones interactivas que verás 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 seguimiento:
  - Proveedor de autorización → Firebase Auth
  - Saved Configs → Wheel Options
  - Almacenamiento de datos → Firestore
  - IU de acceso de 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}/.
Nota: Te recomendamos que converses con Gemini para comprender y analizar el plan lo más posible antes de pasar a la implementación.
Implementar: Si todo se ve bien, puedes comenzar la implementación.
```
/conductor:implement
```
Verificar: Vuelve a cargar tu aplicación. Deberías ver una aplicación actualizada.
En caso de que la IA se atasque con la prueba de la implementación de la autenticación, recuerda habilitar Acceso con Google en Firebase console en Autenticación > Método de acceso.

Este es el código de oro 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.

6. Limpia

Para evitar que se apliquen cargos a tu cuenta de Google Cloud, borra los recursos que creaste durante este codelab.

Borra el proyecto de Firebase (y el proyecto de Google Cloud)

La manera 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 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 y, luego, inhabilita Google.

7. Felicitaciones

¡Felicitaciones! Usaste correctamente la extensión de Gemini CLI Conductor para compilar una aplicación web desde cero y, luego, iterar en ella con funciones complejas, como la autenticación y la integración de bases de datos.

Próximos pasos

Explora el modo de planificación de Gemini CLI para una planificación ligera
Explora más extensiones de Gemini CLI