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 con la compilación de 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

  • Instalar Gemini CLI y la extensión Conductor
  • Compilar una app web "Picker Wheel" desde cero con las capacidades de planificación e implementación de Conductor
  • Agregar personalización a la aplicación con la incorporación de autenticación y almacenamiento mediante Firebase

Qué aprenderás

  • Cómo usar la extensión Conductor para planificar, implementar y revisar una aplicación "greenfield"
  • Cómo usar la extensión 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

2. Antes de comenzar

Cómo crear un proyecto de Google Cloud

  1. En la consola de Google Cloud, en la página del selector de proyectos, selecciona o crea un proyecto de Google Cloud.
  2. Asegúrate de que la facturación esté habilitada para tu proyecto de Cloud. Obtén información sobre cómo 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.

  1. Haz clic en Activar Cloud Shell en la parte superior de la consola de Google Cloud.
  2. Una vez que te conectes a Cloud Shell, verifica tu autenticación:
    gcloud auth list
  3. Confirma que tu proyecto esté configurado:
    gcloud config get project
  4. 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 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

  1. Instala la versión más reciente de Gemini CLI de forma global con npm:
    npm install -g @google/gemini-cli
  2. Reinicia la terminal para que se agregue gemini a tu RUTA DE ACCESO.
  3. Verifica que la instalación haya instalado la versión más reciente:
    gemini --version
  4. 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 cámbialo:
    mkdir picker-wheel
cd picker-wheel
  5. Autentica:
    • Inicia Gemini CLI.
      gemini
    • Cuando se te pregunte "¿Confías en los archivos de esta carpeta?", selecciona Confiar en la carpeta (picker-wheel).
    • Cuando se te pregunte "¿Cómo te gustaría 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. Tómate un momento para explorar los diferentes niveles de uso y sus límites de frecuencia de la API correspondientes.
  6. Sal de Gemini CLI: Escribe /quit desde la terminal de la CLI para finalizar tu sesión activa de Gemini CLI antes de continuar.

Instala la extensión 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.

  1. Instala la extensión de:
    gemini extensions install https://github.com/gemini-cli-extensions/conductor
  2. Verifica la instalación:
    • Inicia Gemini CLI. 
      gemini
    • Escribe /conductor y verás una lista de comandos como setup, newTrack, implement, etc.
  3. Sal de Gemini CLI: Escribe /quit desde 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 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

  1. Confirma que estás en el picker-wheel directorio que creaste en la sección anterior:
    pwd
  2. Inicia Gemini CLI: Inicia una nueva sesión de Gemini CLI desde el directorio de tu proyecto.
    gemini
  3. Inicializa Conductor: Ejecuta el comando de configuración para generar la estructura del proyecto y configurar el entorno de Conductor.
    /conductor:setup
  4. 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 → Presiona o haz clic para girar
      • Personalización → Básica
      • Plataforma → Primero 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.

  1. Inicia una pista nueva con /conductor:newTrack. Conductor podría proponer una pista inicial basada en el contexto del producto. Como alternativa, puedes proponer la tuya o pedirle a Conductor que sugiera una pista.
  2. 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

  1. Inicia la implementación:
    /conductor:implement
    Conductor ahora trabajará en el plan y escribirá código para el proyecto.
  2. 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.Aplicación de rueda selectora
  3. 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 la pista.
    /conductor:review

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

Ahora pasarás al desarrollo de "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

  1. 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/firebase/agent-skills
  2. Inicia Gemini CLI: Inicia una nueva sesión de Gemini CLI desde el directorio de tu proyecto.
    gemini
  3. Inicia una pista nueva: Inicia una pista nueva.
    /conductor:newTrack "I want users to be able to log in to their accounts and
save their picker wheel configurations."
  4. 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}.
  5. 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}/.
  6. Implementa: Si todo se ve bien, puedes iniciar la implementación.
    /conductor:implement
  7. Verifica: Vuelve a cargar la aplicación. Deberías ver una aplicación actualizada. Rueda de selección con acceso

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.

6. 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 sencilla de realizar una limpieza es borrar el proyecto por completo.

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

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

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

7. Felicitaciones

¡Felicitaciones! Usaste correctamente la extensión Gemini CLI Conductor 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