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

1. 简介

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

您将执行的操作

安装 Gemini CLI 和 Conductor 扩展程序
使用 Conductor 的规划和实现功能从头构建“选择器轮”Web 应用
使用 Firebase 添加身份验证和存储功能，为应用添加个性化功能

学习内容

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

所需条件

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

2. 准备工作

创建 Google Cloud 项目

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

启动 Cloud Shell

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

点击 Google Cloud 控制台顶部的激活 Cloud Shell。
连接到 Cloud Shell 后，验证您的身份验证：
```
gcloud auth list
```
确认您的项目已配置：
```
gcloud config get project
```

如果项目未按预期设置，请进行设置：

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

使用 npm 全局安装最新版本的 Gemini CLI：
```
npm install -g @google/gemini-cli
```
如果您看到权限错误，可能需要使用 nvm 等版本管理器，或者使用 sudo 以 root 身份运行此命令。
重启终端，以便将 gemini 添加到您的 PATH 中。
验证安装是否已安装最新版本：
```
gemini --version
```
创建并切换到新的项目目录：在后面的部分中，我们将在 picker-wheel 目录中创建一个项目。立即创建该目录并切换到该目录：
```
mkdir picker-wheel
cd picker-wheel
```
身份验证：
- 启动 Gemini CLI。
```
gemini
```
- 当系统询问“您是否信任此文件夹中的文件？”时，请选择 Trust folder (picker-wheel)（信任文件夹 [选择器轮]）
- 当系统询问“您希望如何为此项目进行身份验证？”时，请选择 Vertex AI。按照身份验证指南获取 Google Cloud API 密钥并设置 GOOGLE_API_KEY 环境变量。花点时间了解不同的使用层级及其对应的 API 速率限制。
退出 Gemini CLI：在 CLI 终端中输入 /quit，结束当前有效的 Gemini CLI 会话，然后继续。

安装 Conductor 扩展程序

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

安装扩展程序：

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

验证安装：
- 启动 Gemini CLI。
```
gemini
```
- 输入 /conductor，您会看到 setup、newTrack、implement 等命令的列表。
退出 Gemini CLI：在 CLI 终端中输入 /quit，结束当前有效的 Gemini CLI 会话，然后继续。

4. 绿地开发：选择器轮盘

现在，您的环境已设置完毕，接下来您将从头开始构建新应用。您将创建一个“选择器轮” - 一款可旋转以随机选择选项的轻量级 Web 应用。

设置产品情境

确认您位于上一部分中创建的 picker-wheel 目录中：
```
pwd
```
启动 Gemini CLI：从项目目录启动新的 Gemini CLI 会话。
```
gemini
```
初始化 Conductor：运行设置命令，以搭建项目框架并设置 Conductor 环境。
```
/conductor:setup
```
按照互动式提示操作：您看到的互动式提示不会与这些示例完全一致。采用更简单的设计，以便熟悉 Conductor 工作流程。
- 产品目标：一款 Web 应用，可显示可配置的旋转轮，用于从列表中随机选择一项。
  - 目标受众群体 → 一般公众
  - 互动 → 点按/点击即可旋转
  - 自定义 → 基本
  - 平台 → 桌面设备优先
- 商品指南：自动生成。
- 技术栈：
  - 语言 → TypeScript/JavaScript - 非常适合全栈 Web
  - 前端 → Vue.js - 直观的网络界面
  - 后端 → Express.js - 快速 Node 后端
  - 数据库 → 无 - 无需数据库
- 工作流程：标准。
- 商品要求：
  - 用户故事 → 可自定义的选项，清晰的获胜者显示
  - 主要功能 → 可编辑的选项列表、随机颜色
  - 限制 → 仅限客户端、高性能
  - 非功能性 → 高测试覆盖率、TypeScript 和 Vue.js、自适应设计
Conductor 将在 conductor/ 目录中生成上下文文件。

创建新轨道

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

使用 /conductor:newTrack 开始新的轨道。Conductor 可能会根据产品上下文建议初始轨道。或者，您也可以自己提议曲目，或让指挥家推荐曲目。
查看生成的方案：Conductor 将在 conductor/tracks/{track-id}/ 中生成 index.md、spec.md 和 plan.md。请花点时间阅读这些条款。如果一切正常，Conductor 会提示您保存并提交初始设置文件。

实现轨道

开始实施：
```
/conductor:implement
```
Conductor 现在将根据该计划为项目编写代码。
提示：为避免卡在交互式 shell 或长时间运行的进程（如开发服务器或测试监听器）中，我们需要确保 Conductor 确切知道如何处理这些特定命令。Vite (npm run dev) 和 Vitest (npm run test) 等工具通常默认以“监听模式”运行，这会使进程无限期保持打开状态。您可以通过更新 workflow.md 来指示 Conductor 在执行命令时停用监控模式或使用 is_background: true。
验证应用：在整个实施阶段，Conductor 会提示您手动测试应用。例如，它会要求您打开本地 Web 服务器、在浏览器中预览应用并验证更改。实现完成后，您应该会看到一个可正常运行的选择器轮。
问题排查：如果生成的代码行为异常，请检查 conductor/tracks/.../plan.md 中是否有跳过的步骤或错误。
检查实施情况：最后一步，您可以让 Conductor 检查实施情况。它应查看源代码、同步项目文档并归档轨道。
```
/conductor:review
```

5. 旧版迭代：添加个性化设置

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

创建个性化轨道

在下面的“棕地”示例中，我们将使用 Firebase 进行身份验证和存储。安装 Gemini CLI Firebase 扩展程序，以便 Conductor 可以使用它。
```
gemini extensions install https://github.com/gemini-cli-extensions/firebase
```
启动 Gemini CLI：从项目目录启动新的 Gemini CLI 会话。
```
gemini
```

开始新轨道：开始新轨道。

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

按照互动式提示操作：您看到的互动式提示不会与这些示例完全一致。采用更简单的设计，以便熟悉 Conductor 工作流程。
- 跟踪目标：
  - 身份验证提供方 → Firebase Auth
  - 已保存的配置 → 轮盘选项
  - 数据存储 → Firestore
  - Firestore 登录界面 → 模态叠加层
Conductor 将在 conductor/tracks/{track-id} 中为新轨道生成上下文文件。
查看生成的计划：花点时间阅读 conductor/tracks/{track-id}/ 中的 index.md、spec.md 和 plan.md。
提示：建议您在开始实施之前，尽可能多地与 Gemini 对话，以了解和讨论该方案。
实施：如果一切正常，您可以开始实施。
```
/conductor:implement
```
验证：重新加载应用。您应该会看到更新后的应用。
如果 AI 在测试身份验证实现时遇到问题，请记得在 Firebase 控制台中依次点击身份验证 > 登录方法，启用 Google 登录。

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

6. 清理

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

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

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

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

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

删除 Firestore 数据库：前往 Firebase 控制台 > Firestore，然后删除相应数据库。
删除身份验证：前往 Firebase 控制台 > 身份验证登录方法，停用 Google。

7. 恭喜

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

后续步骤

探索 Gemini CLI 计划模式，实现轻量级规划
探索更多 Gemini CLI 扩展程序