DataWhale 速通AI编程开发：（基础篇）第2章用Roo Code跑通你的第一个程序

本文链接：https://blog.youkuaiyun.com/spring5/article/details/146278444

学习链接：Datawhale-学用 AI,从此开始

2.1 Roo Code的基本设置

当前编程环境

2.1.1 菜单栏

菜单栏从左到右包含以下几个部分：

新建任务(New Task)：新建一个任务，可以理解为新建一个对话，或者回到当前对话。
提示词(Prompts)：用于规范Roo Code的工作模式，以及在ai编程开发中扮演的角色，例如代码生成、代码优化、代码解释等。
MCP服务(MCP Servers)：MCP服务是模型上下文协议(Model Context Protocol)的简称，它使得Roo能够与本地运行的MCP服务器进行通信，这些服务器提供额外的工具和资源来扩展Roo的功能。你可以使用社区制作的服务器，或者要求Roo创建特定于你工作流程的新工具（例如，"添加一个获取最新npm文档的工具"）。
历史(History)：用于查看Roo Code的历史对话记录。
在编辑器中打开(Open in Editor)：在编辑器中新建一个会话窗口。
设置(Settings)：设置Roo Code的一些参数，例如API Key、模型选择、模型温度调节、允许模型执行的命令、浏览器行为等等。

2.1.2 自动审批功能

在Roo Code中，自动审批功能（Auto-Approve）是一个非常重要的功能，它可以帮助你自动审批代码，从而提高工作效率。默认状态下，自动审批功能是关闭的，你需要手动开启并赋予各项权限。

每一项权限的含义如下：

读取文件和目录（Read Files and directories）：允许Roo Code读取文件和目录。
编辑文件（Edit files）：允许Roo Code编辑文件。
执行命令（Execute approved Commands）：允许Roo Code执行命令。
调用浏览器（Use the browser）：允许Roo Code调用浏览器用于网页调试。
使用MCP服务器（Use MCP servers）：允许Roo Code使用用户配置的MCP服务器，以获取额外的工具和资源。
切换模式和创建任务（Switch modes & create tasks）：允许Roo Code在不同模式之间切换，并创建新的任务。
重试失败的请求（Retry failed requests）：如果大模型api返回请求失败，Roo Code会自动重试。

2.1.3 用户输入

用户输入框位于自动审批功能下方，用于输入用户的需求，我们接下来通过输入一个简单的需求来跑通Roo Code。

新建一个文件夹作为项目根目录，然后使用vscode打开这个文件夹。

打开Roo Code，将Auto-approve功能全部开启，然后输入以下需求：

请帮我写一个“番茄时钟”前端页面，页面功能如下：
*   **核心功能：**
    *   **计时器模块：**
        *   可配置的番茄时间（默认25分钟）。
        *   可配置的休息时间（短休息5分钟，长休息15-20分钟）。
        *   开始、暂停、重置功能。
        *   倒计时显示（分钟：秒）。
        *   计时结束提醒（通知）。
    *   **会话管理：**
        *   记录完成的番茄钟轮数。
        *   提供长休息选项，并在完成一定轮数后触发。
*   **UI/UX设计：**
    *   **视觉风格：**
        *   极简主义设计：减少不必要的视觉元素。
        *   配色方案：选择柔和、自然的颜色，例如浅色背景搭配番茄红/绿色。
        *   排版：使用清晰易读的字体。
    *   **动画效果：**
        *   倒计时数字：平滑过渡效果。
        *   开始/暂停按钮：点击时的微动效（颜色变化、缩放）。
        *   计时完成：弹出庆祝动画（例如，烟花、粒子效果）。
    *   **交互设计：**
        *   自定义设置：允许用户调整番茄时间和休息时间。
        *   通知：在后台运行时，通过系统通知提醒用户。
    *   **“生命力”设计：**
        *   动态背景：颜色随时间缓慢变化。
        *   正反馈：完成任务后，给予用户视觉上的奖励。

等待一段时间之后（你可以趁着这个时间喝点水，或者休息一下），Roo Code会自动生成必要的前端项目代码，包括index.html文件等。

当显示“Task Completed”时，Roo Code会要求你运行浏览器打开index.html文件，点击执行命令即可在浏览器中查看相应效果：

2.2 Roo Code的工作模式

用户输入框下方有一个“Code”按钮，点击这个按钮可以切换Roo Code的工作模式。

Roo Code的工作模式分为以下几种：

代码生成模式(Code)：该模式可以根据用户输入的需求，生成相应的代码，同时也可以用于修复问题，是最常用同时也是Roo Code的默认模式。
代码规划模式(Architect)：该模式用于帮助用户规划技术方案、设计系统架构，提出优化的建议。该模式与Code模式不同，不直接生成代码与执行命令，而是关注用户需求分析与决策，帮助用户思考需求，一般情况下会建立项目文档。
代码解释模式(Ask)：该模式用于帮助用户理解代码含义，编程概念与技术实现有关的问题，依据上下文进行相应的解答与回复，适用于深入理解代码原理以及复杂技术细节的情景。
代码重构模式(Debug)：该模式可以用于调试代码，帮助用户找到代码中的问题。

2.3 @符号的功能

@符号在Roo Code中是一个非常重要的符号，它可以让用户快速引用参考信息，让大语言模型准确做出回应，@符号可以出现在用户输入框的任何位置，当Roo Code识别到@符号时，会自动跳出参考信息的提示框。

@符号的参考信息包括：

项目出现的问题（Problems）：这里会要求ai参考代码区出现的问题（例如警告、报错等），Roo Code会根据问题给出相应的解决方案。
终端命令（Terminal）：这里会要求ai参考终端命令，Roo Code会根据命令执行相应的操作，例如修复项目中出现的问题。
网页内容（Paste URL to fetch contents）：这里需要用户输入一个网页的URL，Roo Code会根据URL获取网页内容，并根据内容给出相应的解决方案，如果用户在开发的过程中需要ai阅读项目文档，可以使用这个功能。
项目文件夹（Add Folder）：这里可以添加项目文件夹，Roo Code会自动参考用户给出的项目文件夹，给出相应的解决方案。
项目文件（Add Files）：这个功能与项目文件夹同理，只不过这里添加的是项目文件。
git提交的分支(Git Commits)：这个功能与项目文件夹同理，只不过这里添加的是git提交的分支。

2.4 提示词增强与图片上传

在用户输入界面，用户可以点击提示词增强按钮，通过提供额外的上下文、说明或重新措辞来帮助改进你的提示词。用户可以在输入框中输入提示词，然后再次点击该按钮进行增强，从而让Roo Code更加准确地理解用户的需求。

输入提示词“帮我设计一个番茄时钟”为例子，点击提示词增强按钮之后的提示词变成了这样：

注意一点，建议大家使用提示词增强时不要使用推理模型，因为推理模型会将思维过程写入到提示词中，导致提示词变得非常长，不利于Roo Code理解用户的需求。

另外，用户还可以点击下方的图片上传按钮，上传图片，Roo Code会根据图片内容给出相应的代码，这一点对于网页设计、UI设计等场景非常有用。由于deepseek目前没有多模态模型，所以图片上传功能需要使用具有视觉能力的模型，例如claude-3.5-sonnet、gpt-4o、glm-4v、qwen2.5-vl等。

2.5 从零到一的开发流程

我们仍然以“番茄时钟”为例，使用Roo Code从零到一进行开发。

2.5.1 需求分析

这里打开Roo Code的代码规划模式(Architect)，输入最简单的需求：

帮我设计一个番茄时钟

当然你也可以点击提示词增强按钮，输入更详细的需求。

等待一段时间之后，Roo Code会自动生成一个项目文档，文档内容如下：

2.5.2 项目开发

在代码规划模式下，Roo Code会询问用户是否需要对需求进行修改，如果需要修改，可以输入提示词进行修改，如果不需要修改，则输入进入code模式，Roo Code会进入代码生成模式生成相应文件。

生成完毕后，Roo Code会让用户调用浏览器打开index.html文件，查看效果。

2.5.3 项目迭代优化

上图中可以看到，番茄时钟项目已经完成，但是页面整体视觉效果过于简单，我们不要点击start a new task，继续输入需求：

页面视觉风格需要做到简洁现代，色彩搭配和谐，留白合理，布局清晰，注重用户友好体验且具有独特的品牌识别度，确保在简约中不失精致感与专业度。

等待一段时间之后，Roo Code会根据用户的新需求，生成新的代码，并让用户调用浏览器打开index.html文件，查看效果。

2.6 总结

通过以上步骤，我们使用Roo Code从零到一开发了一个番茄时钟项目，并进行了迭代优化。事实上，AI编程开发的过程就是从需求分析-项目开发-迭代升级-添加新需求的过程循环往复，最终得到一个满足用户需求的产品。

至此，大家已经通关了AI编程开发，可以尝试使用上述方法，开发一个属于自己的AI编程项目。接下来的部分为“进阶”章节，让大家了解Roo Code的更多功能，同时让大家深入了解AI编程开发的一些技巧。