🚀 AI 辅助编程
2024-12 datawhale 冬令营 笔记 ...
一、快速入门
5分钟速通AI辅助 开发
1️⃣ Step 1 ：注册登录 豆包MarsCode
官网链接：https://www.marscode.cn/home?utm_source=school&utm_medium=datawhalelearn&utm_campaign=camp1
这步要是出现问题也可以使用抖音登录（ 我就是抖音扫码登的，说我操作太频繁~ ）
2️⃣ Step2：进入豆包MarsCode在线IDE
- 点击 "进入工作台" 打开在线IDE
- 打开网页立即体验
- 这里就是你的工作环境了
3️⃣ Step3：创建项目
- 点击左上角 “项目” 按钮新建项目，选择 “HTML / CSS / JS” 项目，点击 “创建” 按钮创建项目：
- 恭喜进入项目工作区~
4️⃣ Step4：用AI编写 番茄时钟 代码
在右侧 AI对话区下方对话框 输入以下内容，然后 按enter键 发送：
参考Prompt
请你基于html、tailwind css和javascript，帮我设计一个“番茄时钟”。要求UI简洁美观大方，同时具有呼吸感，
点击开始计时、点击暂停计时和重置计时的功能能够完美实现
点击了解Prompt是什么
通常，Prompt 是由人类设计的，以帮助模型更好地理解特定任务或领域的文字。
对于具有较强自然语言理解、生成能力，能够实现多样化任务处理的大语言模型（LLM）来说，
一个好的 Prompt 极大地决定了其能力的上限与下限，且会塑造其输出文本的内容、风格和整体质量。
通俗来说：如果我们把 AI 模型比作一名员工，Prompt 就相当于给员工的具体指令。指令的明确性和详细性决定了模型的输出效果。
5️⃣ Step5：运行 番茄时钟
打开左侧 【文件浏览器】 的 index.html ， 全选代码 ，
找到右侧对应的 html文件 ，点击 插入光标处
打开左侧 【文件浏览器】 的 script.js ， 全选代码 ，
找到右侧对应的 javascript文件 ，点击 插入光标处
- 做好这些之后，点击最上方 “运行” 按钮，即可在 界面右侧 体验到番茄时钟的效果啦！
💡思考：为什么要这样“引导AI”编程？
Prompt是什么？需要包含什么必须的要素？
设计一个番茄时钟，为什么要提到 html、tailwind css和javascript ？
为什么特别要求 UI简洁美观大方 ，同时具有 呼吸感 ？
这些 关键词 ，对于AI来说的价值是什么呢？
在这里我们剧透一个 “关键词唤醒” 的概念 ————将在 Task2 和大家深入探讨
最后的最后，除了“番茄时钟”，我们还能用 豆包MarsCode AI 做什么？能不能做出更复杂的软件和项目呢？
我们这次学习活动的目标，就是学习和探索用AI辅助我们，完成自己应用idea的demo实现！
————我们也将在 Task3 和大家探讨完成这个目标的一种可能方案！
🚋 练习作业：井字棋
1. 试试修改Prompt，制作井字棋
试试将 Step4 中的 Prompt 替换为如下信息，制作一个井字棋~：
参考Prompt
请你基于html、tailwind css和javascript，帮我设计一个“井字棋游戏”。要求UI简洁美观大方，
同时具有呼吸感，人类玩家以及电脑玩家放置棋子，游戏胜负平局判定条件能够完美实现
2. 尝试记录和分析遇到的问题，并思考解决方案
例如：井字棋开发中的一个debug记录
问题场景 ：浏览器打开网页时， 井字棋无法显示棋盘
解决方法 ： 把出现的问题用文字描述清楚，发送给AI，AI生成新的代码，替换后成功
点击了解一些常见问题和解决思路
点击 “运行” 没有显示任何界面/ 点击 “开始” 按钮、
“ 暂停 ” 按钮或 “重置” 按钮无法正常实现相应功能 / AI持续输出内容不会停止？
由于大模型 现有技术和条件的限制 ，有时会出现 “ 一本正经地胡说八道 ” 的情况，
因此生成的代码有时就会出现一些bug或者错误。
这里回到 “工作台” ， 重新部署项目 即可
AI回答需要安装Tailwind CSS？
无视即可， AI会在html文件中自动引入tailwind css
点击 “运行” 之后界面存在 “Hello HTML/CSS/JS! ” 等字符？
重新执行第二步操作 “ 打开左侧 【文件浏览器】 的 index.html ， 全选代码 ，
找到右侧对应的 html文件 ，点击 插入光标处 ”即可
记住：AI时代下的编程，要更好地与AI协作解决问题
编程不仅仅是 程序员/软件工程师 这个岗位的专利，任何人，
都有机会通过与AI协作编写出属于自己的定制化软件，更高效地解决自己的实际问题~
应用软件开发 是一个工程性的行为，他需要经过 场景挖掘、应用功能/业务设计、程序架构设计、代码编写与
debug、最终集成和测试 等多个环节，必然会遇到很多问题，发现问题、解决问题
是除了应用场景挖掘和业务设计外的核心工作环节。
AI 时代下，我们并不需要单靠肉眼或个人的力量来承担这些工作量，
而更应该学会与AI协作设计、发现与解决问题，所以，如果你的代码遇到了问题，
尝试清晰描述你遇到的问题和诉求，和AI一起尝试分析、修改解决吧！
随着技术的不断发展，任何人都需要不断适应技术变革，掌握新技术，
正如历史所展示的那样，才能在未来更自如地面对变化和挑战。