DataWhale 动手学AI辅助编程 Task1：动手体验AI辅助编程：番茄钟

Datawhale-学用 AI,从此开始

学习提要

动手学，人人都能用的AI， 本次 动手学AI辅助编程 和大家一起探索 和AI协作设计应用、编写代码、完成应用开发 的魅力~

本教程适用于不同水平的学习者：

1. 纯小白： 内心有一种想做些东西的“冲动”或“需求”，但没有思路，想 学会引导AI按照自己的想法实现

2. 编程新手 ：有想法做一些程序，同时了解编程语言，但缺少实际开发的经验，想通过AI高效提升编程能力和开发经验

3. 编程专家 ：想学会引导AI协作编程，融入自己的开发工作流提升效率

点击了解AI辅助编程是什么

AI 是什么？

人工智能（AI, Artificial Intelligence） 顾名思义，即人为创造的智能，是一门研究模拟、延伸和扩展人智能的科学，涵盖了机器人学、语言识别、自然语言处理、专家系统等多个方面。

编程 是什么？

编程 是用计算机能够理解的语言（如Python）描述一种算法，让计算机执行特定任务。编程广泛应用于各个领域，如 软件开发、数据分析、人工智能 等。

AI辅助编程 又是什么？

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

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

点击了解IDE是什么

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

IDE通过提供一个统一的平台，使得开发人员可以更方便地编写、测试和调试代码，从而减少设置时间和错误，加快开发速度。

我们最终目标是开发出自己的Demo作品，从复现到方法案例拆解，一步步实现目标——

现在，准备好你的电脑，让我们从速通手册出发，借助AI开发一个属于自己的 番茄时钟 吧！

5分钟速通AI辅助 番茄时钟 开发

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

直接点击上方蓝字，或复制链接打开: 豆包 MarsCode - 编程助手

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

2. 注册账号并登录

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

Step2：进入豆包MarsCode在线IDE

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

1. 点击进入工作台

2. 打开网页立即体验

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

点击了解豆包MarsCode在线IDE

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

相当于有了一个编程老手陪伴在你左右，

• 对于刚入门编程的人来说，可以从中学会正确的编程开发姿势

• 对于代码专家来说，可以有效降低 编写简单/重复代码和检查代码 的时间成本

可以有效提升学习效率、编程效率和代码质量。

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

核心优势 ：

• 原生 AI 能力 ：AI助手提供代码自动补全与生成、问题修复、代码优化等能力

• 开箱即用 ：提供数十种不同语言、框架的开发模板

• 随时可用 ：不受本地环境限制，只需要一台可以访问网络和浏览器设备，支持多设备同步

Step3：创建项目

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

1. 新建项目

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

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

点击查看界面详细说明

英文界面还可切换为中文

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

点击切换为中文

重新加载

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

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

参考Prompt

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

发送Prompt！让AI编写代码！

点击了解Prompt是什么

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

对于具有较强自然语言理解、生成能力，能够实现多样化任务处理的大语言模（LLM）来说，一个好的 Prompt 极大地决定了其能力的上限与下限，且会塑造其输出文本的内容、风格和整体质量。

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

Step5：运行 番茄时钟！

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

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

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

温馨提示：完成学习记得打卡哟~

你的每一次学习，都值得被记录！快去写笔记，然后打卡吧！