Datawhale冬令营第二期！😀Task 1

Datawhale冬令营第二期-Task1：动手体验AI辅助编程:番茄钟

对应链接：https://www.datawhale.cn/activity/116/23/94?rankingPage=1

笔记整理者：博客园-岁月月宝贝

现在我已经是Datawhale宣传组的一员啦！好开心好开心！！！

这篇就不太侧重格式啦！（刚刚把小毕设(组长难当)+开题报告+形策作业完成到基本95%）这周论文还没怎么读呢！不过还会很完善就对啦~

目录

• 学习内容
  • Step1：注册登录豆包MarsCode（点击可跳转官网）
  • Step2：进入豆包MarsCode在线IDE
  • Step3：创建项目
  • Step4：用AI编写 番茄时钟 代码！
  • Step5：运行 番茄时钟！
  • 为什么要这样“引导AI”编程？
• 练习作业
  • 修改Prompt，制作井字棋
  • 升华

学习内容

我们从“AI辅助编程”的定义开始吧！

AI辅助编程是指利用人工智能技术（通常是通用大语言模型或编程垂类的大语言模型）来辅助、优化编程，提高编程效率和质量。

AI编程工具： Cursor、GitHub Copilot、豆包MarsCode 等，一般都会集成在已有 IDE（集成开发环境） 中。

IDE(Integrated Development Environment, 集成开发环境)：是一种用于软件开发的综合性工具，它集成了 代码编辑器、编译器、调试器、版本控制系统 等多种功能，旨在提高程序员的开发效率和生产力。

Step1：注册登录豆包MarsCode（点击可跳转官网）

复制链接打开: https://www.marscode.cn/home?utm_source=school&utm_medium=datawhalelearn&utm_campaign=camp1

1. 点击“登录并获取编程助手”

2. 注册账号并登录

注意：请不要在微信浏览器中打开，需要把网址复制到Chrome、Edge等网页浏览器中打开

Step2：进入豆包MarsCode在线IDE

点击 "进入工作台" 打开在线IDE

1. 点击进入工作台

1. 打开网页立即体验

1. 这里就是你的工作环境啦~

豆包MarsCode在线IDE

有 在线IDE和本地IDE插件 两种形态。 具备 代码补全、生成、解释、单元测试创建、错误修复 等辅助功能，支持 Java、Python 、Go、JS、HTML/CSS、TS、C++、C#、Kotlin、Rust 等百种编程语言。

目标：有效提升学习效率、编程效率和代码质量。

PS：其在线编辑器是一个云端 AI IDE 平台，拥有内置的 AI 编程助手，以及开箱即用的开发环境。

核心优势：

• 原生 AI 能力 ：AI助手提供代码自动补全与生成、问题修复、代码优化等能力
• 开箱即用 ：提供数十种不同语言、框架的开发模板
• 随时可用 ：不受本地环境限制（只需一台可以访问网络和浏览器的设备），支持多设备同步

Step3：创建项目

点击左上角 “项目” 按钮新建项目，选择 “HTML / CSS / JS” 项目，点击 “创建” 按钮创建项目：

1. 新建项目

1. 选择HTML/CSS/JS项目并创建

1. 恭喜进入项目工作区~

界面详细说明：

区域名称	功能描述
①文件浏览器	文件导览区域，可查看文件和文件夹列表，位于左侧边栏中。
③代码编辑器	编辑文件的主要区域，支持拆分编辑器或创建新的编辑区域。
④控制台	底部面板，用于调试项目，查看错误、日志等信息。包含问题、终端、网络服务等标签页。
⑤AI对话区及更多窗口	右侧边栏，提供 AI 助手、内置工具区域、第三方插件的入口。

英文界面还可切换为中文

点击右上角的头像，将Language切换为中文即可~

点击切换为中文

重新加载

下面是本人调出的界面

Step4：用AI编写 番茄时钟 代码！

在右侧 AI对话区下方对话框 输入以下内容，然后 按enter键 发送：

请你基于html、tailwind css和javascript，帮我设计一个“番茄时钟”。要求UI简洁美观大方，同时具有呼吸感，点击开始计时、点击暂停计时和重置计时的功能能够完美实现

发送Prompt！让AI编写代码！

Prompt：

由人类设计的，以帮助模型更好地理解特定任务或领域的文字。

一个好的 Prompt 极大地决定了其能力的上限与下限，且会塑造其输出文本的内容、风格和整体质量。

通俗来说：如果我们把 AI 模型比作一名员工，Prompt 就相当于给员工的具体指令。指令的明确性和详细性决定了模型的输出效果。

这是我与它的对话：

prompt：假如你是一名优秀的算法工程师，请你基于html、tailwind css和javascript，帮我设计一个“番茄时钟”。要求UI简洁且美观大方，同时具有呼吸感，点击"开始计时"、点击"暂停计时“和点击”重置计时“功能均能够完美实现，谢谢！

我这位只生成了html文件~

它解释得很详细！可见三种功能全部被覆盖啦！

Step5：运行 番茄时钟！

1. 打开左侧 【文件浏览器】 的 index.html ， 全选代码 ，找到右侧对应的 html文件 ，点击 插入光标处 ：

2.打开左侧 【文件浏览器】 的 script.js ， 全选代码 ，找到右侧对应的 javascript文件 ，点击 插入光标处 ：

3.做好这些之后，点击最上方 “运行” 按钮，即可在 界面右侧 体验到番茄时钟的效果啦！

-因为我们只有html文件，所以我们就只用进行“1”和“3”~

下面是我的番茄钟展示

点击“开始计时”：

点击“暂停计时”（秒真的不动啦！）:

最后“重置计时⏲”（回到最初时刻):

下面我们进入思考：

为什么要这样“引导AI”编程？

豆包MarsCode的其他能力？

官方文档：https://docs.marscode.cn/docs/introduction

支持的操作系统

Windows、macOS、Linux。

功能	说明
代码补全	阅读并理解当前代码，然后提供后续代码片段，也支持通过注释生成代码片段。
代码补全 Pro	基于上一次的编辑内容及代码情况，预测下一个改动点并提供推荐代码。
代码生成	理解自然语言并生成所需代码。
代码编辑	编辑指定代码，包括重构、优化、修改部分逻辑等
代码解释	精准解释项目代码，快速上手开发。
代码注释生成	生成函数级注释或更详细的行间注释。
单元测试生成	为指定代码片段生成单元测试。
智能修复	发现代码中的问题并修复。
智能问答	针对研发领域定向优化问答质量，提供更精准的问答结果。

支持的 IDE

IDE 名称	说明
Visual Studio Code	支持 1.67.0 及以上版本。
JetBrains	包括 IntelliJ IDEA、Pycharm、Goland、Android Studio、WebStorm、Clion、Rider、Phpstorm、DataGrip 等。版本须为 221.5080.210 及以上。

支持的语言/框架

类型	支持的语言/框架
后端	Go、Python、C++、C、C#、Java、PHP、Rust
前端	HTML、TypeScript、JavaScript、CSS
应用端	Kotlin、Objective-C、Swift
其他	Lua、SAS、CUDA、Perl、Ruby、Shell、SQL、R

下面的gif是官方的部分功能示例~

1. 代码补全

1. 代码解释

1. 代码生成

1. 代码注释生成

1. 单元测试生成

能力很强！重要的是我发现它好像真的有：

！！！

下面请问：Prompt需要包含什么必有要素？

Q1：设计一个番茄时钟，为什么要提到 html、tailwind css和javascript ？

Q2：为什么特别要求 UI简洁美观大方 ，同时具有 呼吸感 ？

这些 关键词 ，对于AI来说的价值是什么呢？

Task2 我的笔记里就会有 “关键词唤醒” 的概念啦！

（更复杂的系统/软件的制作在 Task3）

练习作业

修改Prompt，制作井字棋

试试将Step4中的Promt替换为如下信息，制作一个井字棋~：

参考Prompt: 请你基于html、tailwind css和javascript，帮我设计一个“井字棋游戏”。要求UI简洁美观大方，同时具有呼吸感，人类玩家以及电脑玩家放置棋子，游戏胜负平局判定条件能够完美实现

预期效果

这是我与它的对话：

prompt：假如你是一名优秀的算法工程师，请你基于html、tailwind css和javascript，帮我设计一个“井字棋游戏”。要求UI简洁且美观大方，同时具有呼吸感，人类玩家以及电脑玩家放置棋子，游戏胜、负、平局的判定条件均能够完美实现，谢谢！

——虽然最后为了避免网络卡顿等等问题改为原版啦！

请看我们的对话记录！

通过我们一直对话，一直遇见问题，一直改进，终于成功啦！

happy happy happy!

注意：

• 遇到网络等问题，可以尝试新建项目，使用默认prompt提示
• 如果AI回答需要安装Tailwind CSS，无视即可， AI会在html文件中自动引入tailwind css
• 就是在遇到问题反馈的时候需要它重新基于原有的生成（那个重新生成按钮），而不是将遇到的问题多次发给它——它可能默认第一次面对你的问题时的分析是对的

升华

应用软件开发 是一个工程性的行为，他需要经过 场景挖掘、应用功能/业务设计、程序架构设计、代码编写与debug、最终集成和测试 等多个环节，必然会遇到很多问题，发现问题、解决问题 是除了应用场景挖掘和业务设计外的核心工作环节。

如果你的代码遇到了问题，尝试清晰描述你遇到的问题和诉求，和AI一起尝试分析、修改解决吧！

最后，再次谢谢Datawhale，介绍了这么好的一个平台！