使用 Gemini CLI Conductor 规划和构建应用

1. 简介

Gemini CLI Conductor 扩展程序已发展为可与更多编码代理搭配使用，包括 Antigravity CLI 和 Claude Code。欢迎查看有关 Conductor 插件的 新 Codelab。

在此 Codel0ab 中，您将学习如何使用 Gemini CLI Conductor 扩展程序 规划和构建软件应用。您将首先从头开始构建“绿地”应用。然后，您将把它视为“棕地”项目，对其进行迭代以添加身份验证和存储功能。

您将执行的操作

• 安装 Gemini CLI 和 Conductor 扩展程序
• 使用 Conductor 的规划和实现功能从头开始构建“Picker Wheel”Web 应用
• 使用 Firebase 添加身份验证和存储功能，为应用添加个性化设置

学习内容

• 如何使用 Conductor 扩展程序规划、实现和审核“绿地”应用
• 如何使用 Conductor 扩展程序为“棕地”应用添加功能

所需条件

• 网络浏览器，例如 Chrome
• 启用了结算功能的 Google Cloud 项目
• 已安装 Node.js（建议使用 18+ 版本）
• 本地代码编辑器，例如 Visual Studio Code

2. 准备工作

创建 Google Cloud 项目

1. 在 Google Cloud 控制台 的项目选择器页面上，选择或创建一个 Google Cloud 项目。
2. 确保您的云项目已启用结算功能。了解如何检查项目是否已启用结算功能。

启动 Cloud Shell

使用 Cloud Shell，我们无需在本地安装 gcloud 和 firebase CLI 工具即可完成本部分。

Cloud Shell 是在 Google Cloud 中运行的一个命令行环境，其中预加载了必要的工具。

1. 点击 Google Cloud 控制台顶部的激活 Cloud Shell 。
2. 连接到 Cloud Shell 后，验证您的身份验证：

   gcloud auth list
   

3. 确认您的项目已配置：

   gcloud config get project
   

4. 如果您的项目未按预期设置，请进行设置：

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

启用 API

在 Google Cloud 项目中启用 Firebase Management API。

gcloud services enable firebase.googleapis.com

将 Firebase 添加到您的项目

Firebase CLI 预安装在 Cloud Shell 中。在 Cloud Shell 中，使用拥有 Google Cloud 项目访问权限的同一 Google 账号登录。如果您在本地工作，请按照说明安装 Firebase CLI。

firebase login

运行以下命令，将 Firebase 添加到您的 Google Cloud 项目：

firebase projects:addfirebase

如果您是首次运行 firebase CLI，请回答系统提出的任何问题。

退出 Cloud Shell

您可以关闭 Cloud Shell 窗口。在下一部分中，我们将配置您的本地环境。

3. 在本地安装 Gemini CLI 和 Conductor

在此步骤中，您将使用本地代码编辑器和终端安装 Gemini CLI 和 Conductor 扩展程序，从而准备好本地开发环境 。

安装 Gemini CLI

1. 使用 npm 全局安装最新版本的 Gemini CLI ：

   npm install -g @google/gemini-cli
   

   如果您看到权限错误，可能需要使用版本管理器（例如 nvm），或者使用 sudo 以根用户身份运行此命令。

2. 重启终端 ，以便将 gemini 添加到您的 PATH。
3. 验证安装 是否安装了 最新版本：

   gemini --version
   

4. 创建并切换到新的项目目录：在后面的部分中，我们将在 picker-wheel 目录中创建一个项目。现在创建该目录并切换到此目录：

   mkdir picker-wheel
   cd picker-wheel
   

5. 进行身份验证:
   • 启动 Gemini CLI。

     gemini
     

   • 当系统询问“您是否信任此文件夹中的文件？”时，选择信任文件夹 (picker-wheel)
   • 当系统询问“您希望如何为此项目进行身份验证？”时，选择 Vertex AI 。按照 身份验证指南 获取 Google Cloud API 密钥并设置 GOOGLE_API_KEY 环境变量。花点时间了解不同的 使用层级 及其对应的 API 速率限制。
6. 退出 Gemini CLI：在 CLI 终端中输入 /quit，以结束当前的 Gemini CLI 会话，然后再继续。

安装 Conductor 扩展程序

Conductor 是 Google 构建的开源 Gemini CLI 扩展程序，可实现上下文驱动的开发功能，例如规划和实现跟踪。

1. 安装扩展程序：

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

2. 验证安装：
   • 启动 Gemini CLI。

     gemini
     

   • 输入 /conductor，您将看到命令列表，例如 setup、newTrack、implement 等。
3. 退出 Gemini CLI：在 CLI 终端中输入 /quit，以结束当前的 Gemini CLI 会话，然后再继续。

4. 绿地开发：Picker Wheel

现在，您的环境已设置完毕，您将从头开始构建一个新应用。您将创建一个“Picker Wheel” - 一个轻量级 Web 应用，它会旋转以选择随机选项。

设置产品上下文

1. 确认您位于上一部分中创建的 picker-wheel 目录中 ：

   pwd
   

2. 启动 Gemini CLI: 从项目目录启动新的 Gemini CLI 会话。

   gemini
   

3. 初始化 Conductor：运行 setup 命令来搭建项目并设置 Conductor 环境。

   /conductor:setup
   

4. 按照互动式提示操作：您看到的互动式提示与这些示例并不完全一致。专注于更简单的设计，以便熟悉 Conductor 工作流。
   • 产品目标：一个 Web 应用，用于显示可配置的旋转轮，以从列表中选择随机项。
     • 目标受众群体 → 一般公众
     • 互动 → 点按/点击以旋转
     • 自定义 → 基本
     • 平台 → 桌面设备优先
   • 产品准则：自动生成。
   • 技术栈：
     • 语言 → TypeScript/JavaScript - 非常适合全栈 Web
     • 前端 → Vue.js - 直观的 Web 界面
     • 后端 → Express.js - 快速 Node 后端
     • 数据库 → 无 - 无需数据库
   • 工作流：标准。
   • 产品要求：
     • 用户故事 → 可自定义的选项、清晰的获胜者显示
     • 主要功能 → 可编辑的选项列表、随机颜色
     • 限制 → 仅限客户端、高性能
     • 非功能性 → 高测试覆盖率、TypeScript 和 Vue.js、响应式设计
   Conductor 将在 conductor/ 目录中生成上下文文件。

创建新轨道

Conductor 中的“轨道”表示一项功能或一个工作单元。

1. 使用 /conductor:newTrack 启动新轨道 。Conductor 可能会根据产品上下文提出初始轨道。或者，您可以自行提出轨道，也可以让 Conductor 建议轨道。
2. 查看生成的计划：Conductor 将在 conductor/tracks/{track-id}/ 中生成 index.md、spec.md 和 plan.md。请花点时间阅读这些文件。如果一切正常，Conductor 会提示您保存并提交初始设置文件。

实现轨道

1. 开始实现：

   /conductor:implement
   

   Conductor 现在将按照计划为项目编写代码。

   提示 ：为避免卡在互动式 Shell 或长时间运行的进程（例如开发服务器或测试观察程序）中，我们需要确保 Conductor 确切知道如何处理这些特定命令。Vite (npm run dev) 和 Vitest (npm run test) 等工具通常默认以“观察模式”运行，这会使进程无限期保持打开状态。您可以通过更新 workflow.md 来指示 Conductor 在执行命令时停用观察模式或使用 is_background: true。

2. 验证应用：在实现阶段，Conductor 会提示您手动测试应用。例如，它会要求您打开本地 Web 服务器，在浏览器中预览应用，并验证更改。实现完成后，您应该会看到一个可正常运行的 Picker Wheel。

   问题排查 ：如果生成的代码行为异常，请检查 conductor/tracks/.../plan.md 中是否有跳过的步骤或错误。

3. 查看实现：作为最后一步，您可以让 Conductor 查看实现。它应该查看源代码、同步项目文档并归档轨道。

   /conductor:review
   

5. 棕地迭代：添加个性化设置

现在，您将转向“棕地”开发。您将改进上一部分中的 Picker Wheel Web 应用，以便登录用户可以保存和恢复其 Picker Wheel 配置。

如果您想直接进入棕地应用，可以从上一部分下载黄金代码以获取参考实现，并在此基础上继续构建。

创建个性化设置轨道

1. 在以下“棕地”示例中，我们将使用 Firebase 进行身份验证和存储。安装 Gemini CLI Firebase 扩展程序，以便 Conductor 可以使用它。

   gemini extensions install https://github.com/firebase/agent-skills
   

2. 启动 Gemini CLI: 从项目目录启动新的 Gemini CLI 会话。

   gemini
   

3. 启动新轨道：启动新轨道。

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

4. 按照互动式提示操作：您看到的互动式提示与这些示例并不完全一致。专注于更简单的设计，以便熟悉 Conductor 工作流。
   • 轨道目标:
     • 授权提供方 → Firebase Auth
     • 已保存的配置 → 轮盘选项
     • 数据存储 → Firestore
     • Firestore 登录界面 → 模态叠加层
   Conductor 将在 conductor/tracks/{track-id} 中为新轨道生成上下文文件。
5. 查看生成的计划：花点时间阅读 conductor/tracks/{track-id}/ 中的 index.md、spec.md 和 plan.md。

   提示 ：建议您尽可能多地与 Gemini 对话，以了解和讨论计划，然后再继续实现。

6. 实现：如果一切正常，您可以开始实现。

   /conductor:implement
   

7. 验证：重新加载应用。您应该会看到更新后的应用。

   如果 AI 在测试身份验证实现时遇到问题，请务必在 Firebase 控制台 中的 身份验证 > 登录方法 下启用 Google 登录。

   

以下是黄金代码，供您参考实现。您必须在 .firebaserc 中提供 Firebase 项目，并在 firebase.ts 中提供 Firebase 配置，才能正确启动应用。

6. 清理

为避免系统向您的 Google Cloud 账号持续收取费用，请删除在此 Codelab 中创建的资源。

删除 Firebase 项目（和 Google Cloud 项目）

最简单的清理方法是完全删除项目。

1. 在 Google Cloud 控制台 中，选择您创建的项目。
2. 点击删除 。

或者，如果您想保留项目但删除资源，请执行以下操作：

1. 删除 Firestore 数据库：前往 Firebase 控制台 > Firestore 并删除数据库。
2. 删除身份验证：前往 Firebase 控制台 > 身份验证登录方法，停用 Google。

7. 恭喜

恭喜！您已成功使用 Gemini CLI Conductor 扩展程序从头开始构建 Web 应用，然后使用身份验证和数据库集成等复杂功能对其进行迭代。

后续步骤

• 探索 Gemini CLI 计划模式 以进行轻量级规划
• 探索更多 Gemini CLI 扩展程序