e542f013b9
- 删除旧的 AI03 课程文件（第4-5课） - 新增 AICODE-03 课程体系（AI是怎么想的、AI训练师、我是大作家等） - 新增 AICODE-06 课程体系（从扣子到代码、个人主页、涂鸦PK等）
645 lines
28 KiB
Markdown
645 lines
28 KiB
Markdown
---
|
||
课时: 1
|
||
主题: 从扣子到代码
|
||
核心能力: [提问力, 拆解力]
|
||
核心工具: [Trae IDE]
|
||
时长: 90分钟
|
||
透明化层级: 结果层
|
||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||
---
|
||
|
||
### 1. 课程目标
|
||
|
||
**知识目标：**
|
||
- 理解"扣子智能体"和"AI编程"的本质区别：配置 vs 创造
|
||
- 掌握 Trae IDE 的界面布局和核心操作流程
|
||
- 理解"Vibe Coding"的含义：用自然语言驱动AI写代码
|
||
|
||
**能力目标：**
|
||
- 能独立完成 Trae 的完整操作流程：新建项目 → AI对话 → 接受代码 → 预览结果
|
||
- 能使用 Trae 的 Builder 模式让AI生成一个完整的交互网页
|
||
- 能在 Trae 中对AI生成的代码进行基本的迭代修改
|
||
|
||
**情感目标：**
|
||
- 感受到"从配置到创造"的自由度跃迁
|
||
- 对 Trae 工具产生"这个东西好用"的正面第一印象
|
||
- 建立"我能用代码做出扣子做不到的东西"的信念
|
||
|
||
---
|
||
|
||
### 2. 核心概念与误概念预设
|
||
|
||
**核心概念认知层级：**
|
||
|
||
| 概念 | 六年级类比 | 认知层级 |
|
||
|------|----------|---------|
|
||
| Trae IDE = AI编程工作台 | 像一个超级画室：画布(编辑器)+颜料(代码)+AI助手都在里面 | 识别层 |
|
||
| Builder 模式 = AI创建整个项目 | 像跟助手说"帮我画一幅画"，它直接画出来 | 识别层 |
|
||
| Chat 模式 = 跟AI聊代码问题 | 像问助手"这笔颜色对不对"，它给你建议 | 识别层 |
|
||
| 扣子 = 配置型工具 | 像乐高说明书，按步骤拼，只能拼出预定造型 | 识别层 |
|
||
| AI编程 = 创造型工具 | 像拿到一堆零件+超强助手，想做什么都行 | 理解层 |
|
||
| Vibe Coding | 用自然语言告诉AI你要什么，AI帮你写代码 | 理解层 |
|
||
|
||
**典型误概念表：**
|
||
|
||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||
|------|--------|---------|---------|
|
||
| M1 | "Trae和扣子差不多，换了个界面" | 本质不同：扣子产出对话，Trae产出可运行的程序 | 同一任务两个工具对比 |
|
||
| M2 | "写代码要背很多语法，很难" | Vibe Coding用自然语言，你说中文AI写代码 | 当场演示一句话生成网页 |
|
||
| M3 | "这个界面好复杂，我学不会" | 90%的按钮你不需要碰，只用3个区域就够了 | 界面引导时只聚焦核心区域 |
|
||
| M4 | "AI帮我写代码，那我什么都不用学了" | 你是"产品经理"，AI是"程序员"，你要会提需求、会验收 | 展示模糊指令导致的糟糕结果 |
|
||
| M5 | "代码我完全看不懂也没关系" | 不需要写，但需要能看一眼大概知道在干嘛 | 后续课程深入，本课只点到为止 |
|
||
|
||
---
|
||
|
||
### 3. 教学准备
|
||
|
||
**工具与环境：**
|
||
- 每台电脑已预装 Trae IDE（校区统一部署，教师课前验证可正常启动）
|
||
- Trae 已登录校区账号（学生无需注册）
|
||
- 网络环境正常（Trae AI功能需联网）
|
||
- 浏览器 Chrome（用于预览生成的网页）
|
||
|
||
**教学资源：**
|
||
- 教师准备：1个用 Trae 做的交互网页成品（开课展示用）
|
||
- 教师准备：1个预制的 index.html 文件（AI翻车时的备用）
|
||
- 教师准备：3个经过验证的"保底提示词"（学生想不出来时用）
|
||
- 学生资源：无需提前准备
|
||
|
||
**教师备课体验任务：**
|
||
> 备课前，教师必须亲自完成以下操作：
|
||
> 1. 在 Trae IDE 中完整走一遍：打开 → 新建项目 → Builder 对话 → 接受代码 → 预览网页
|
||
> 2. 用 Trae 做一个"反应力测试游戏"，记录全过程和遇到的问题
|
||
> 3. 故意给 Trae 一个模糊指令（如"帮我做个游戏"），观察生成质量，准备对比演示
|
||
> 4. 确认校区每台电脑的 Trae 可正常启动、AI功能可用
|
||
|
||
---
|
||
|
||
### 4. 教学流程
|
||
|
||
---
|
||
|
||
**第一幕：联系 (Connect) — 10分钟**
|
||
|
||
*本幕目标：用成品展示制造"哇"的冲击，激发学习动机*
|
||
|
||
**情景导入 (10分钟)**
|
||
|
||
**师：** 同学们，在正式上课之前，我先给你们看一个东西。
|
||
|
||
（教师打开浏览器，展示一个课前做好的交互网页——比如"反应力测试游戏"或"英语单词闯关"）
|
||
|
||
**师：** 来，谁来玩一下？
|
||
|
||
（邀请1-2位学生上台操作，全班观看）
|
||
|
||
**师：** 好玩吧？这个小游戏有按钮、有计时、有动画效果。你们觉得，做这个东西难吗？
|
||
|
||
**生：** （预期：难吧/不知道）
|
||
|
||
**师：** 告诉你们一个秘密——做这个东西，我**一行代码都没写**。我只是用中文跟AI说了我想要什么，AI就帮我生成了全部代码。整个过程不到5分钟。
|
||
|
||
（停顿）
|
||
|
||
**师：** 你们之前用扣子做过智能体对吧？扣子很好用，但它只能做"对话型"的东西——你问它答。而刚才这个游戏，有界面、能点击、有动画——这个在扣子里做得到吗？【诊断点：检测学生对扣子能力边界的认知】【识别层】
|
||
|
||
**生：** （预期：做不到）
|
||
|
||
**师：** 做不到。这就是我们今天要解锁的新工具——**Trae**。
|
||
|
||
**师：** 我跟你们说一下这学期我们要干什么。给你们剧透一下：
|
||
|
||
- **第3课**，你们每个人会做出一个完整的网页作品，可以分享给同学
|
||
- **第8课**，你们会做出真正的游戏——有关卡、有计分、有特效的那种
|
||
- **期末**，我们会开一场**发布会**——你上台展示你的作品，像真正的产品经理一样
|
||
|
||
这些软件全是你自己设计的，你想怎么设计就怎么设计。做完之后可以给你的爸爸妈妈用、给同学用、给老师用。
|
||
|
||
**师：** 你们只要跟着老师好好学，我会把你变成一个编程大师。你不需要记住任何代码，你只要能把你想要的东西说清楚——你想做什么、长什么样、怎么用——AI就帮你实现。**能说清楚 = 能做出来。** 这就是我们这门课的超能力。
|
||
|
||
**师：** 今天是第一步——你们每个人都会用 Trae 做出一个自己的交互网页。我们开始。
|
||
|
||
---
|
||
|
||
**第二幕：建构 (Construct) — 65分钟**
|
||
|
||
---
|
||
|
||
**【分段一：Trae 是什么 + 界面快速导览】(10分钟)**
|
||
|
||
*本段重点：最快速度认识 Trae 界面，消除恐惧感，把更多时间留给动手创作*
|
||
|
||
**讲解与演示 (5分钟):**
|
||
|
||
**预设误概念：**
|
||
- M3: 界面好复杂我学不会
|
||
- M1: 跟扣子差不多
|
||
|
||
**师：** 大家打开桌面上的 Trae。
|
||
|
||
（等待全班打开，教师投屏同步展示）
|
||
|
||
**师：** 第一眼看到这个界面，你可能觉得"好复杂"。别担心——90%的按钮你都不需要碰。今天只需要认识**三个地方**：
|
||
|
||
（教师投屏，快速逐一指出）
|
||
|
||
**师：** 跟我一起看：
|
||
|
||
**① 左边：文件管理器**
|
||
|
||
**师：** 左边这个面板就是你的"文件夹"——你做的网页文件会出现在这里。
|
||
|
||
**② 中间：代码编辑器**
|
||
|
||
**师：** 中间最大的区域，AI帮你写的代码会显示在这里。五颜六色的文字不是乱码，是正常的。现在不需要看懂。
|
||
|
||
**③ 右边：AI对话面板（最重要！）**
|
||
|
||
**师：** 这是今天最重要的地方——**AI对话面板**。点左边的AI图标打开它。
|
||
|
||
（教师点开AI面板）
|
||
|
||
**师：** 这里有两个模式，很关键：
|
||
- **Builder模式**：让AI帮你创建整个项目。像跟装修公司说"帮我装修整个房间"。
|
||
- **Chat模式**：跟AI聊天、问问题。像问"这面墙颜色好不好看"。
|
||
|
||
**师：** 今天主要用 **Builder模式**——我们要从零开始，让AI帮我们写整个网页。
|
||
|
||
**师：** 还有一个关键操作——AI写完代码后，你会看到绿色的 **Accept（接受）** 按钮。点它就行，就像验收装修成果，满意就签字。
|
||
|
||
**学生实践 (3分钟):**
|
||
|
||
**师：** 现在跟我做三步，确认你找到了这些地方：
|
||
|
||
1. **点左边的AI图标** ——看到AI对话面板了吗？
|
||
2. **在AI面板上方找到 Builder 和 Chat 两个标签**——点 Builder，确认切换到了 Builder 模式
|
||
3. **再点左边的文件图标** ——看到文件管理器了吗？
|
||
|
||
（教师走动检查，重点关注找不到AI图标或分不清Builder/Chat的学生）
|
||
|
||
**师：** 有人找不到的举手，我来帮你。
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** Builder模式打开的同学举手？好。记住：**最重要的是右边的AI面板，用Builder模式**。其他的先不管。【诊断点：检测学生是否记住了核心区域】【识别层】
|
||
|
||
---
|
||
|
||
**【分段二：新建项目 + 第一次AI对话】(15分钟)**
|
||
|
||
*本段重点：走完"新建项目 → AI生成代码 → 预览网页"的完整流程*
|
||
|
||
**讲解与演示 (5分钟):**
|
||
|
||
**预设误概念：**
|
||
- M2: 写代码很难
|
||
|
||
**师：** 好，在我们动手之前，先搞清楚一个非常重要的概念——**"项目"**。
|
||
|
||
**师：** 你们平时在电脑上用文件夹存东西对吧？一个文件夹里放几张图片、几个文档。你也经常用浏览器上网，打开各种网页。那 Trae 里的"项目"和这些有什么区别？
|
||
|
||
（停顿，让学生思考）
|
||
|
||
**师：** 这样理解——文件夹就是一个抽屉，你把东西往里面一放就行。浏览器是一个窗户，你通过它看别人做的东西。但**项目**不一样，项目是一个**工作间**——你在里面创造东西。
|
||
|
||
**师：** 打个比方：你做手工的时候，需要一张工作台，把材料、工具都放在台上，然后在这上面做出你的作品。Trae 的"项目"就是这张工作台。你不在里面开一个项目，AI就不知道把代码往哪里放，你也没法预览你做的东西。
|
||
|
||
**师：** 所以记住：**每次做新东西，第一步永远是开一个新项目。** 不开项目就跟AI说话，就像站在空地上跟装修工人说"帮我装修"——装修哪里？没有房子你装修什么？
|
||
|
||
**师：** 好，现在我们来走一遍完整的流程。从零开始，做出一个网页。跟我一步一步来。
|
||
|
||
**第一步：新建项目文件夹**
|
||
|
||
**师：** 在 Trae 里，我们需要先给项目建一个"工作台"——就是在桌面上新建一个文件夹，然后让 Trae 打开它。
|
||
|
||
操作步骤：
|
||
1. 点击菜单 **文件 → 打开文件夹**（或者用快捷键 Ctrl+K Ctrl+O）
|
||
2. 在弹出的窗口里，导航到**桌面**
|
||
3. 点右键 → **新建文件夹**，命名为 `我的第一个网页`
|
||
4. 选中这个文件夹，点**确认/打开**
|
||
|
||
**师：** 看左边的文件管理器——现在应该显示了你的文件夹名字，里面还是空的。这就是你的"工作台"准备好了，等着AI往里面放东西。
|
||
|
||
（教师投屏同步演示每一步）
|
||
|
||
**第二步：在 Builder 里跟AI说话**
|
||
|
||
**师：** 现在切换到AI面板的 **Builder 模式**。在对话框里输入你想做的东西。
|
||
|
||
（教师演示输入）
|
||
|
||
**师：** 我先来示范。我输入这段话：
|
||
|
||
```
|
||
帮我创建一个 index.html 网页文件，内容是一个自我介绍页面：
|
||
- 大标题显示"你好，我是穹狼老师"
|
||
- 下面有一段自我介绍文字
|
||
- 背景用好看的渐变色
|
||
- 要有一个按钮，点击后弹出一句鼓励的话
|
||
```
|
||
|
||
（发送后等待AI响应）
|
||
|
||
**师：** 看！AI回复了。它帮我写了一段代码，还告诉我它做了什么。现在关键来了——
|
||
|
||
**第三步：接受代码**
|
||
|
||
**师：** 看到代码区域上方的按钮了吗？有一个绿色的 **Accept All（全部接受）**。点它——这就是告诉AI"好的，我接受你写的代码"。
|
||
|
||
（点击Accept，文件出现在左侧文件管理器中）
|
||
|
||
**师：** 看左边——`index.html` 文件出现了！
|
||
|
||
**第四步：预览网页**
|
||
|
||
**师：** 最后一步——在文件管理器里右键点击 `index.html`，选择 **"在默认浏览器中打开"**。或者你可以直接去桌面的文件夹里双击这个文件。
|
||
|
||
（浏览器打开，显示生成的网页）
|
||
|
||
**师：** 搞定！从打开Trae到看到网页，四步：**建文件夹 → Builder说话 → 接受代码 → 浏览器预览**。
|
||
|
||
**学生实践 (8分钟):**
|
||
|
||
**师：** 现在轮到你们了。按照刚才的四个步骤，做你自己的第一个网页。
|
||
|
||
**你的任务：** 在 Builder 里输入下面这段话（把名字换成你自己的）：
|
||
|
||
```
|
||
帮我创建一个 index.html 网页文件，内容是一个自我介绍页面：
|
||
- 大标题显示"你好，我是[你的名字]"
|
||
- 下面写几句你想说的话
|
||
- 背景用你喜欢的颜色
|
||
- 加一个按钮，点击后显示一句你喜欢的话
|
||
```
|
||
|
||
**师：** 做完四步（建文件夹→Builder说话→接受代码→浏览器预览）的同学，举手让我知道。
|
||
|
||
（教师走动协助）
|
||
|
||
（教师走动观察，重点关注：）
|
||
- 有没有学生卡在"新建文件夹"步骤
|
||
- 有没有学生没切换到 Builder 模式（用了Chat模式）
|
||
- 有没有学生不知道点 Accept
|
||
- 有没有学生找不到怎么预览文件
|
||
- AI是否成功生成了代码（网络问题？）
|
||
|
||
**Plan B：** 如果某个学生的AI没有正确生成代码（网络超时/报错），教师直接帮忙在文件夹中创建 index.html，粘贴预制代码，先保证学生看到结果不掉队。
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** 看到自己网页的同学举手！
|
||
|
||
（统计人数，目标：至少80%的学生成功）
|
||
|
||
**师：** 你们刚才完成了一件事——**没写一行代码，只用中文跟AI说了你想要什么，就得到了一个能在浏览器里打开的网页。** 这就是 Vibe Coding。
|
||
|
||
**师：** 跟扣子比比——在扣子里你能做出一个"有背景色、有按钮、能点击弹出消息"的网页吗？
|
||
|
||
**生：** （预期：不能）
|
||
|
||
**师：** 这就是区别。扣子做对话，Trae做产品。而我们才刚刚开始。
|
||
|
||
---
|
||
|
||
**【分段三：做一个交互式网页游戏】(25分钟)**
|
||
|
||
*本段重点：用 Trae 完成一个真正有交互、有视觉效果的作品——这是本课的核心"哇"时刻*
|
||
|
||
**讲解与演示 (5分钟):**
|
||
|
||
**预设误概念：**
|
||
- M4: AI帮我写了就行，我什么都不用管
|
||
|
||
**师：** 刚才的自我介绍页面是"入门级"。现在来点真正酷的——我们做一个**交互式网页游戏**。
|
||
|
||
**师：** 先看我怎么做。注意看我给AI的指令有多具体：
|
||
|
||
（教师在 Builder 中输入）
|
||
|
||
```
|
||
帮我重新创建 index.html，这次做一个反应力测试小游戏：
|
||
1. 页面中央有一个大圆形区域，初始是红色，上面写"等待..."
|
||
2. 随机等待2-5秒后，圆形变成绿色，文字变成"点我！"
|
||
3. 玩家点击绿色圆形后，显示反应时间（精确到毫秒）
|
||
4. 如果在变绿之前就点了，显示"太早了！重新开始"
|
||
5. 下方有"再来一次"按钮
|
||
6. 页面整体深色主题，有渐变背景，圆形有阴影效果
|
||
7. 显示历史最佳成绩
|
||
```
|
||
|
||
（等待AI生成）
|
||
|
||
**师：** AI给我写好了。我先看看它的说明——它告诉我代码做了什么。没问题的话，我点 **Accept All**。
|
||
|
||
（接受代码，在浏览器中打开）
|
||
|
||
**师：** 来，谁来玩一下？
|
||
|
||
（邀请一个学生试玩，全班看效果）
|
||
|
||
**师：** 注意我刚才的提示词——我没说"帮我做个游戏"，我说了7条具体要求。**越具体，AI做出来的东西越接近你想要的。** 这就是你们之前学的提示词技巧，现在用在真正的编程上。
|
||
|
||
**师：** 但如果AI做的不完美怎么办？很简单——**继续跟它说**。关键是你要说清楚**哪里不对、你要什么效果**。比如：
|
||
|
||
- 觉得字太小？→ 跟AI说："把标题文字调大一倍，圆形区域也调大"
|
||
- 颜色不好看？→ 跟AI说："背景换成深蓝色渐变，按钮换成橙色"
|
||
- 功能没做对？→ 跟AI说："点击按钮后没有反应，我要的是点击后显示一段文字"
|
||
|
||
**师：** 注意——不要只说"不好看"或者"有问题"，要说清楚**哪里不好、你想要什么样的**。越具体，AI改得越准。这就是**迭代**——一遍遍优化直到满意。
|
||
|
||
**学生实践 (18分钟):**
|
||
|
||
**师：** 现在轮到你们了！你要在 Trae 里做一个自己的小作品。
|
||
|
||
**三个方向选一个：**
|
||
|
||
| 方向 | 说明 |
|
||
|------|------|
|
||
| **小游戏** | 有规则、有输赢、能玩起来的游戏 |
|
||
| **小工具** | 解决一个小问题的实用工具 |
|
||
| **创意页面** | 好看的、有动画效果的展示页面 |
|
||
|
||
**师：** 选好方向后，按这个框架写提示词：
|
||
|
||
```
|
||
帮我创建一个 index.html 网页文件，做一个[你选的东西]：
|
||
1. [最核心的功能是什么]
|
||
2. [用户怎么操作——点什么、输入什么]
|
||
3. [操作之后会发生什么]
|
||
4. [界面风格——什么颜色、什么感觉]
|
||
```
|
||
|
||
**师：** 比如你选"小游戏"方向，你可以写："做一个猜数字游戏：1. 电脑随机一个1-100的数字；2. 玩家输入数字点猜按钮；3. 显示猜大了还是猜小了，猜对了显示恭喜；4. 界面用蓝色主题。"
|
||
|
||
**师：** 操作流程跟刚才一样：**Builder说话 → Accept代码 → 浏览器预览**。
|
||
|
||
**关键提醒：**
|
||
1. 提示词写到4条以上——越具体，AI做出来的东西越接近你想要的
|
||
2. 做完后如果不满意，继续在Builder里跟AI说要改什么
|
||
3. 做完的同学可以叫旁边的同学来试用你的作品
|
||
|
||
**师：** 时间18分钟。开始！
|
||
|
||
（教师走动观察和协助）
|
||
|
||
（教师走动观察，重点关注：）
|
||
- 提示词质量：是否足够具体？太模糊的学生引导他们加细节
|
||
- AI生成结果：是否能正常运行？不能的话帮助学生跟AI说"这里有问题"
|
||
- 迭代意识：做完第一版的学生是否在继续优化？
|
||
- 情绪状态：有没有学生因为AI翻车感到挫败？
|
||
|
||
**快学生应对：** 做完基础版后，试着跟AI说"加一个XX新功能"——比如加排行榜、加音效、加难度选择。体验"迭代"的感觉。
|
||
|
||
**慢学生应对：** 如果10分钟还没有产出，教师提供保底提示词：
|
||
|
||
```
|
||
帮我做一个猜数字游戏：
|
||
1. 电脑随机一个1-100的数字
|
||
2. 玩家输入猜的数字，点"猜"按钮
|
||
3. 如果猜大了显示"太大了"，猜小了显示"太小了"
|
||
4. 猜对了显示"恭喜你！用了X次猜对了"
|
||
5. 有"重新开始"按钮
|
||
6. 界面好看，有颜色
|
||
```
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** 时间到！做出作品的同学举手！
|
||
|
||
（统计）
|
||
|
||
**师：** 你们用不到20分钟，做出了一个扣子里根本做不出来的东西。你现在回忆一下整个过程——你写代码了吗？
|
||
|
||
**生：** （预期：没有）
|
||
|
||
**师：** 你做了什么？
|
||
|
||
**生：** （预期：跟AI说了我想要什么）
|
||
|
||
**师：** 对！你做的是**想清楚要什么 → 告诉AI → 验收结果 → 不满意就迭代**。这就是 Vibe Coding 的核心循环。你是"产品经理"，AI是"程序员"。
|
||
|
||
---
|
||
|
||
**【分段四：回顾操作 + 掀开盖子看一眼】(10分钟)**
|
||
|
||
*本段重点：巩固操作流程，对代码建立初步感知*
|
||
|
||
**讲解与演示 (5分钟):**
|
||
|
||
**师：** 我们来回顾一下，今天你学会了 Trae 的核心操作流程：
|
||
|
||
```
|
||
① 新建项目文件夹（文件 → 打开文件夹）
|
||
② 在 Builder 模式跟AI说你要什么
|
||
③ 点 Accept 接受AI写的代码
|
||
④ 在浏览器中预览效果
|
||
⑤ 不满意？回到 Builder 继续说要改什么（迭代）
|
||
```
|
||
|
||
**师：** 这五步就是你以后每节课都会用到的基本流程。记住了吗？
|
||
|
||
**师：** 最后我们"掀开盖子看一眼"。点开你的 index.html 文件——这个文件就是你作品的**源代码**。什么是源代码？就是你做的这个网页的"配方"。浏览器拿到这个配方，就能做出你看到的页面。
|
||
|
||
**师：** 看看这些五颜六色的文字——这就是代码。你不需要看懂它。但我教你们一个以后永远用得上的方法——**不懂就问AI**。
|
||
|
||
（教师演示）
|
||
|
||
**师：** 比如我在代码里看到一个 `<style>` 标签，我不知道它是什么意思。怎么办？我不去百度，不去翻书——我直接复制这个标签，切换到 **Chat 模式**，粘贴进去，问AI：
|
||
|
||
（教师在Chat里输入）
|
||
|
||
```
|
||
<style> 这个标签是什么意思？用一句话解释。
|
||
```
|
||
|
||
（展示AI的回答）
|
||
|
||
**师：** 看到了吗？AI一句话就告诉你了。你在代码里看到任何不懂的东西，都可以这样做——复制、粘贴、问AI。**万事不懂问AI**，这是你们以后最重要的习惯。
|
||
|
||
**学生实践 (5分钟):**
|
||
|
||
**师：** 两个小任务，做完一个做下一个：
|
||
|
||
**任务一：问AI一个问题**
|
||
|
||
在代码里随便找一个你不认识的东西，复制它，切换到Chat模式，问AI它是什么意思。
|
||
|
||
**任务二：手动改一个颜色**
|
||
|
||
**师：** 接下来做一件更酷的事——你亲手改一下代码。
|
||
|
||
1. 在代码编辑器里按 **Ctrl+F**（搜索）
|
||
2. 输入 `color`，看看代码里有几个跟颜色相关的地方
|
||
3. 找到一个颜色值（比如 `#3498db`、`blue`、`red` 这样的词）
|
||
4. 把它改成你喜欢的颜色（比如改成 `pink`、`gold`、`#ff6600`）
|
||
5. 按 **Ctrl+S** 保存，然后去浏览器**刷新**页面
|
||
|
||
**师：** 看到变化了吗？你刚才做了一件事——**手动改了一行代码**。这证明代码不是黑盒子，你是可以碰它的。以后AI写的代码不满意，你甚至可以自己动手微调。
|
||
|
||
（教师走动协助，帮助找不到颜色值的学生）
|
||
|
||
**进度同步 (2分钟 - 从分段一省出的时间):**
|
||
|
||
**师：** 谁成功改了颜色？改成了什么颜色？
|
||
|
||
（让1-2个学生分享）
|
||
|
||
**师：** 记住两个方法——代码看不懂？**问AI**。代码想微调？**Ctrl+F搜索，手动改，Ctrl+S保存，刷新看效果**。【诊断点：检测学生是否掌握了"问AI"和"手动微调"两个习惯】【识别层】
|
||
|
||
---
|
||
|
||
**第三幕：反思 (Contemplate) — 10分钟**
|
||
|
||
*本幕目标：展示成果，巩固 Trae 操作流程和核心认知*
|
||
|
||
**成果展示 (6分钟)**
|
||
|
||
**师：** 请3位同学来前面展示你的作品。展示时说两件事：
|
||
1. 你做了什么，简单演示一下
|
||
2. 你跟AI说了什么（展示你的提示词）
|
||
|
||
（选3位学生展示，每人2分钟。尽量选不同方向——游戏、工具、创意页面各一个）
|
||
|
||
> **拍照发群：** 学生展示时，教师用手机快速拍1-2张学生作品屏幕画面。课后选最佳的配上文字"第一节课，同学们用AI做出了自己的第一个网页作品！"发到家长群。这是家长感知课程价值的关键触点——第一课就有产出，比任何宣传都有说服力。
|
||
|
||
**互评与讨论 (4分钟)**
|
||
|
||
**师：** 看完了三位同学的作品。我们今天用了一个新工具——Trae，做出了扣子里做不到的东西。
|
||
|
||
**师：** 最后一个问题：你觉得 Trae 跟扣子最大的区别是什么？一句话说。【诊断点：检测学生是否抓住了核心区别】【理解层】
|
||
|
||
（收集3-4个回答）
|
||
|
||
**师：** 总结得很好。用一句话说：**扣子让你做"对话"，Trae让你做"产品"。**
|
||
|
||
---
|
||
|
||
**第四幕：延续 (Continue) — 5分钟**
|
||
|
||
*本幕目标：总结核心操作流程，制造下节课期待*
|
||
|
||
**抽象总结 (3分钟)**
|
||
|
||
**师：** 今天我们认识了 Trae 这个新工具，学会了核心操作流程：
|
||
|
||
（板书/投屏）
|
||
|
||
```
|
||
Trae 五步操作法：
|
||
① 打开文件夹 → ② Builder对话 → ③ Accept代码 → ④ 浏览器预览 → ⑤ 不满意就迭代
|
||
|
||
你的角色 = 产品经理（想清楚要什么、说清楚、验收）
|
||
AI的角色 = 程序员（根据你的描述写代码）
|
||
```
|
||
|
||
**师：** 今天你们已经从"扣子用户"升级成了"Trae用户"——从"配置者"变成了"创造者"。记住今天最重要的一件事：**你不需要会写代码，你只需要能说清楚你想要什么。** 能表达 = 能实现。这学期我们会做出越来越厉害的东西，而你的"编程能力"其实就是你的"表达能力"。
|
||
|
||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||
|
||
**师：** 本周课外小挑战：
|
||
|
||
> **5分钟AI挑战：**
|
||
> 回家用 Trae 做一个"家庭小工具"——给你的家人用。
|
||
> 比如：家务分配转盘、做作业倒计时器、每日心情记录器。
|
||
> 拍个截图或录个屏，下节课分享。
|
||
>
|
||
> **评价标准：**
|
||
> - 基础：做出一个能运行的网页
|
||
> - 进阶：网页有交互功能（能点击、能输入）
|
||
> - 挑战：给家人实际用了，并收到他们的反馈
|
||
|
||
**师：** 下节课我们学"提示词工程进阶"——今天你们可能发现，有时候AI做的不是你想要的。下节课我们就来解决这个问题，让你成为更厉害的"产品经理"。
|
||
|
||
---
|
||
|
||
### 5. AI助教使用指南
|
||
|
||
**教师提示词模板（课前准备演示用）：**
|
||
|
||
```
|
||
你是一个前端开发专家。请帮我创建一个 index.html 文件，包含一个简单的交互式网页游戏。
|
||
要求：
|
||
1. 所有代码在一个 index.html 文件中（内联CSS和JS）
|
||
2. 界面简洁美观，有渐变背景
|
||
3. 适合在浏览器中直接双击打开运行
|
||
4. 不使用任何外部库或CDN
|
||
5. [具体游戏描述]
|
||
```
|
||
|
||
**学生提示词模板（参考）：**
|
||
|
||
```
|
||
帮我创建一个 index.html 文件，做一个[什么东西]：
|
||
1. [功能1]
|
||
2. [功能2]
|
||
3. [功能3]
|
||
4. 界面要好看，用[你喜欢的风格]
|
||
```
|
||
|
||
---
|
||
|
||
### 6. 教师指南
|
||
|
||
**技术备注（教师备课知识补充）：**
|
||
|
||
1. **Trae 的 Builder vs Chat 区别**：Builder 模式可以直接创建/修改文件，代码变更需要点 Accept 确认；Chat 模式只是聊天，不会直接改文件。本课统一用 Builder。
|
||
2. **Accept 机制**：AI 在 Builder 中生成代码后，会高亮显示变更的部分（绿色=新增，红色=删除）。学生需要点"Accept All"或逐个文件Accept。如果不满意可以点"Reject"拒绝。
|
||
3. **文件预览方式**：最简单的方式是在文件资源管理器（Windows资源管理器，不是Trae内的）中找到 index.html 双击打开。也可以在Trae内右键文件选择"在浏览器中打开"。
|
||
4. **"一个文件"策略**：本阶段所有代码都放在单个 index.html 中（内联CSS和JS），避免多文件管理增加复杂度。
|
||
5. **网络依赖**：Trae 的AI功能需要联网。如果课堂网络不稳定，提前准备好离线备用的 index.html 文件。
|
||
|
||
**常见问题 FAQ：**
|
||
|
||
| 学生问题 | 建议回答 |
|
||
|---------|---------|
|
||
| "Builder 和 Chat 到底有什么区别？" | Builder 是干活的——它会帮你创建和修改文件。Chat 是聊天的——你问它问题，它回答，但不直接改文件。今天我们用 Builder |
|
||
| "为什么AI做的和我说的不一样？" | 因为描述还不够具体。下节课我们专门学怎么说得更准确。现在你可以继续跟AI说"这里不对，我要的是XX" |
|
||
| "代码看不懂怎么办？" | 完全正常！你是产品经理，不需要看懂每一行代码。就像你去餐厅点菜，不需要知道厨师怎么炒的 |
|
||
| "Accept 了之后不满意怎么办？" | 在 Builder 里继续说你要改什么。AI会帮你修改。也可以用 Ctrl+Z 撤销 |
|
||
| "我能在家里用Trae吗？" | 可以！Trae 是免费的，你回家可以下载安装继续用 |
|
||
| "这个和ChatGPT有什么区别？" | ChatGPT 帮你写文字、回答问题。Trae 帮你写可以运行的程序——有界面、能点击、能互动的那种 |
|
||
|
||
**备课体验任务清单：**
|
||
|
||
- [ ] 在 Trae 中完整走一遍：新建文件夹 → Builder对话 → Accept → 预览
|
||
- [ ] 做一个"反应力测试游戏"（课堂演示用）
|
||
- [ ] 准备3个保底提示词（猜数字/倒计时器/个人介绍页）并验证可用
|
||
- [ ] 准备1个预制 index.html（AI翻车时的备用）
|
||
- [ ] 在校区每台电脑上确认 Trae 可正常启动、Builder可用
|
||
- [ ] 测试校区网络环境下 Trae AI 的响应速度（如果超过30秒需要考虑备用方案）
|
||
|
||
---
|
||
|
||
### 7. 5分钟日常AI挑战
|
||
|
||
**本周任务：**
|
||
|
||
> **"我的家庭小工具"**
|
||
>
|
||
> **操作步骤：**
|
||
> 1. 打开 Trae，创建一个新文件夹叫"家庭小工具"
|
||
> 2. 在 Builder 里描述你想做的工具（倒计时器、分配转盘、心情日记等）
|
||
> 3. 点 Accept 接受代码，在浏览器中打开看效果
|
||
> 4. 不满意的地方跟AI说要改什么
|
||
> 5. 给家人看你的作品
|
||
>
|
||
> **评价标准：**
|
||
> - 基础：做出一个能在浏览器中打开的网页
|
||
> - 进阶：网页有交互功能（能点击、能输入、能显示结果）
|
||
> - 挑战：给家人实际使用并获得反馈，截图分享
|
||
|
||
---
|
||
|
||
### 8. 拓展任务
|
||
|
||
**进阶挑战（适合学有余力的学生）：**
|
||
|
||
**挑战一：迭代升级**
|
||
> 回到你课堂上做的作品，在 Builder 里跟AI说"帮我加一个XX功能"。比如加排行榜、加音效、加深色/浅色模式切换。体验"迭代"的感觉。
|
||
|
||
**挑战二：换一个方向**
|
||
> 如果课上做的是游戏，试着做一个工具；如果做的是工具，试着做一个创意页面。用同样的 Trae 五步操作法，感受不同类型项目的提示词差异。
|
||
|
||
**挑战三：代码考古**
|
||
> 打开你的 index.html，在 `<style>` 区域找到控制背景颜色的代码，手动改成你喜欢的颜色，Ctrl+S 保存后刷新浏览器看效果。恭喜你完成了一次"手动编程"。
|