Q 智码开门·AI编程课 开始学习 →
AI 原生实战版 90~120 分钟 不敲一行命令

全程只动嘴，
90 分钟 做出一个能投票的网页。

全程只需打字跟 AI 聊天，不敲任何命令，不背任何语法。 用 CodeBuddy 当驾驶舱，让 AI 写代码、装环境、推 Gitee， 你只负责 把需求说清楚。

开始这节课 → 先看课程架构
核心工具 CodeBuddy
最终产出 可投票 + 看结果
自动备份 Gitee
CodeBuddy · 对话区 ⌘ K
你
帮我做一个投票网页，三个按钮，刷新不丢票。
AI · CodeBuddy
收到，我先问你 3 个细节，确认后再动手。
你
好的，你问吧。
正在搭建项目骨架…
课程整体架构

90 分钟，从需求对齐到 Gitee 推送，一条线走完。

全程对话驱动，AI 执行所有操作，学员只看对话区和浏览器。

总时长
90~120
分钟，覆盖 8 个步骤 + 闭环回顾
核心工具
CodeBuddy
AI 编程助手，你唯一的驾驶舱
最终产出
投票问卷 Web 应用
投票 + 实时结果，自动备份至 Gitee
教学法
全程对话驱动
AI 执行所有操作，学员只看对话区和浏览器
Step 0 · 开场 5 分钟

这节课我们一起做个什么东西？

讲师在浏览器打开 http://127.0.0.1:3000， 展示一个包含三个投票按钮和下方实时票数表格的完整页面。点击按钮，表格数据同步刷新。

最终成品

三个水果按钮 + 实时表格

页面上有三个大按钮：🍎 苹果、🍌 香蕉、🍊 橙子。点击任意按钮，对应水果的票数 +1， 刷新页面票数不丢失，页面下方有表格实时显示每种水果的当前票数。

我们的玩法

从头到尾只动嘴

  • · 不背代码
  • · 不敲命令
  • · 不碰终端
  • · 只做一件事：在对话框里跟 AI 打字聊天
你需要准备

3 个东西，2 个免费

  • · 一个 CodeBuddy 账号（免费）
  • · 一个 Gitee 账号（免费）
  • · Node.js 已安装（开课前请确认）
💡
打消顾虑： 全程只需用"大白话"跟 AI 沟通，所有技术动作（安装软件、运行代码、创建仓库）全部由 AI 在后台代劳。 如果还没安装 Node.js，请现在告诉讲师，讲师会协助你完成。
Step 1 10 分钟

认识你的"驾驶舱"——IDE 与 CodeBuddy

嵌入场景：要开始做东西了，总得有个"工作台"。

什么是 IDE？ —— 类比"写代码的 Word + 文件管理器"。IDE 就是"写代码的 Word 文档 + 文件管理器"。程序员用它来写代码、保存文件、管理项目。

CodeBuddy 界面长什么样？

打开 CodeBuddy 后，你会看到三个区域：

传统IDE 程序员主控，自己写代码、自己运行、自己 debug。
你的主场
左侧

文件浏览器

项目长成什么样子、有几个文件、文件夹怎么组织，你点开看、自己挑。

你的主场
中间

代码编辑区

👈 你亲手打字写代码，一行一行敲出来。语法错了、缩进错了，IDE 会用红色波浪线给你提示。

你的主场
底部

终端

跑命令、装依赖、看报错信息。全靠你在黑窗口里敲 `npm install`、`node server.js` 这些魔法咒语。

AI时代IDE 你和 AI 各管各的活：AI 写、你审；AI 干、你问。
AI 主场
左侧

对话历史

完整记录你每一句话和 AI 每一个回复，像聊天记录一样往上滚。说过的需求、改过的方案全在，可以随时翻回去对照。

你的主场
中间

对话区

👈 你只在这里打字，跟 AI 聊天。回车发送、Shift+回车换行，像微信聊天一样自然——所有需求、改动都用大白话表达。

AI 主场
右侧

成果与审计区

AI 写完的代码、创建的文件、改动的记录，全部自动出现在这里。你像看账本一样翻阅——看得懂就点头，看不懂就回去问 AI。

🎯 记住：你的活动范围只有对话框。其他地方是 AI 的工作区。

其他 AI 编程工具（了解一下就行）

国阿里 Qoder
国MiniMax Code
国Trae
外谷歌 Anti-Gravity
外Anthropic Claude Code
外OpenAI Codex

它们的共同点：用自然语言驱动代码生成。学会一个，其他都通用。

Step 2 20 分钟

需求对齐——让 AI 先"听懂"再"动工"

嵌入场景：正式开发前，先学会如何"清晰、安全"地与 AI 沟通需求。

为什么要"需求对齐"？

人类说"我想做个投票"，这句话其实很模糊：

  • 是微信公众号投票？
  • 是命令行里投票？
  • 还是网页上投票？
  • 投什么票？投完能看到结果吗？

如果不说清楚，AI 可能按它的理解直接开干，做出来根本不是你要的东西。

🧠 三个 AI 沟通技巧

01

强制 AI 主动提问

在给 AI 的提示词里加上这句话：

如果你对我的需求有任何不清楚的地方，请先主动提问，直到你完全理解后再继续。

这等于给 AI 装了一个"确认按钮"，逼它把模糊的地方暴露出来。

02

先讨论，不实现

再加这句话：

我们先只讨论想法和方案，先不写任何代码，等我们双方确认无误后再动手。

这能防止 AI 心急直接写代码。对于稍复杂的项目，这一步能节省大量返工时间。

03

看不懂就追问

如果 AI 回复了技术方案，里面有你完全不懂的词（比如"Express""SQLite"），直接追问：

请用大白话对比这几个选项的优缺点，告诉我为什么选这个对我最友好。

AI 不会嫌你烦。大胆追问，把它当成一个耐心的老师。

👆 现在，复制这段话发给 AI

我想做一个网页小工具：页面上显示三个水果按钮（苹果、香蕉、橙子），点哪个哪个票数加 1，刷新页面后票数不能丢。 1. 如果你对需求有任何不清楚的地方，请先提问，直到确认无误。 2. 我们先只讨论方案，先不实现，等我确认方案后再动工。 3. 推荐方案时，请用大白话解释为什么选这个技术，并对比其他选项的优劣。
Step 3 15 分钟

AI 定方案——看看 AI 打算怎么干

嵌入场景：AI 回复了方案，此时立即解释出现的概念。

AI 大概率会推荐什么？

AI 通常会推荐一套类似这样的方案：

NNode.js — 让 JavaScript 在电脑上运行的环境
EExpress — 处理网络请求的工具包
SSQLite — 存票数的小型数据库
HHTML — 构建网页骨架

这些名词是什么意思？（趁 AI 刚提到，立刻解释）

HTML 骨架
HTML 是网页的"骨架"。你看到的所有按钮、文字、表格，都是通过 HTML 定义出来的。好比盖房子的砖墙和房梁。
React / Vue 装修队
它们是能把网页做得非常花哨的"装修队"，功能强大但学习成本高。AI 知道我们是小白，所以通常不会推荐它们，而是选择更朴素的纯 HTML。
View 视图
"View"就是"用户看到的那一层"。按钮是 View，表格也是 View，一切你在浏览器里看到的东西都叫 View。
Express 前台服务员
Express 是 Node.js 里的一个工具包。打个比方：你的电脑是个餐厅，浏览器是顾客，顾客点菜（发请求），Express 就是那个负责接收订单、端菜上桌的前台服务员。
SQLite 口袋数据库
SQLite 是一个"口袋数据库"。它不需要单独安装软件，就是一个存在项目文件夹里的小文件（叫 votes.db）。AI 专门挑了门槛最低的方案。
npx 临时工
npx 是 Node.js 自带的小工具，专治"想用某个包又不想装"的需求：你让它跑一次某个命令，它就跑去下载、用完即丢，不占你电脑。和 npm install（长期工：装好一直在）的区别就在于"临时 vs 长期"。
localStorage 浏览器小抽屉
浏览器自带的一个"小抽屉"，专门给网页存东西：你可以让浏览器帮你记住一个数字、一个小文本，下次打开还在。刷新不丢就是这个原理。注意：它只在"自己电脑、自己浏览器"里有效，换台电脑就没了——所以这只是最简方案，真要做正式投票还得靠后端数据库。

看懂 AI 的方案后，回复它

好的，我确认这个方案。请开始帮我搭建。
Step 4 10 分钟

AI 全自动搭建项目骨架 + 第一个"版本节点"

嵌入场景：确认方案后，让 AI 直接执行所有操作，学员只需说一句大白话。

🗣️ 你对 AI 说
好的，按这个方案帮我开始搭建，帮我把这个服务跑起来。
🤖 AI 在后台自动完成了
  • · 创建了 package.json（项目的"配料表"）
  • · 安装了 Express、SQLite 等依赖（下载好了零件）
  • · 生成了 server.js 和 index.html 的初始版本
📖 解释一下：什么是 index.html？
index.html 是一个特殊文件名。浏览器访问一个地址时，默认会去找这个文件。 就像你去一栋楼里找"前台"，保安默认把你带到"前台"那个房间。 index.html 就是我们网站的"前台"，浏览器一敲门，它就先出来接待。
🗣️ 你对 AI 说
帮我把当前这个状态保存成一个版本节点，叫"项目初始化"。
⏱ 版本节点 · 01

版本节点 ①：项目初始化

什么是"版本节点"？ 它就是一个被命名的、随时可以调用回来的代码版本——比如叫"项目初始化"、"完成投票核心逻辑"。你每完成一个小功能就让 AI 保存一个，相当于给进度拍一张"快照"。

💡
怎么"回到"某个版本节点？对 AI 说一句大白话就行："请回到版本节点'完成投票核心逻辑'，从那里接着改。" AI 会把代码切回那个快照的状态，接着上次的进度继续改，不会从零开始。区别于"撤销"——撤销只能回退一步，版本节点让你跳回到任何一个你保存过的中间状态。
Step 5 20 分钟

AI 全自动编写核心投票逻辑 + 第二个"版本节点"

嵌入场景：AI 自动生成完整的服务端和前端代码，实现投票功能。

🗣️ 你对 AI 说
现在帮我写完整的代码，让三个按钮能正常投票。
🤖 AI 在后台自动完成了
  • · 完善了 server.js，让它能处理"点击苹果"这类投票请求
  • · 完善了 index.html，显示三个可点击的水果按钮
  • · 连接了 SQLite 数据库，每次点击都把票数存进去
讲师带看（不解语法，只指功能）：
  • · "这块代码是处理'点击苹果'请求的入口"
  • · "那块代码是连接数据库，把票数存进 SQLite 小文件里的"
🗣️ 你对 AI 说
核心投票功能已经好了，再保存一个版本节点，叫"完成投票核心逻辑"。
⏱ 版本节点 · 02

版本节点 ②：完成投票核心逻辑

为什么这时候再保存一个版本节点？ 如果等下改页面样式改崩了，让 AI 用大白话回到上一个版本节点"完成投票核心逻辑"即可。 前面写好的核心投票代码一行不动，只丢样式部分，修复成本极低。

Step 6 15 分钟

AI 启动服务 + "趁热"解释网络概念

嵌入场景：AI 启动服务后，终端出现 listening on port 3000，学员在浏览器中验证效果。

🗣️ 你对 AI 说
帮我把服务跑起来，然后告诉我浏览器里输什么地址能看到页面。
🤖 AI 在后台自动完成了
  • · 启动了 Node.js 服务
  • · 终端显示：listening on port 3000
  • · AI 回复你："服务已启动，请在浏览器访问 http://127.0.0.1:3000"
🗣️ 你在浏览器输入地址
看到了三个按钮 → 点击 → 票数变化！

📖 现在来解释这些"神秘数字"

127.0.0.1 是什么？为什么是这个数字？
这是一个固定的"回环地址"，永远指向你自己这台电脑。为什么是 127？因为互联网协议专门划出了 127.x.x.x 整个网段给"本地"使用，而我们最常用的就是 127.0.0.1。
👉 记住：127.0.0.1 = 我自己的电脑

端口（Port）是什么？怎么分配的？

电脑上运行着很多程序，每个程序需要独占一个"门牌号"来接收信息。端口就是这个门牌号。

范围 用途 我们能碰吗？
0 ~ 1023 系统保留（如 80 给网页，22 给远程登录） ❌ 不能
1024 ~ 49151 注册端口，给常见软件 ⚠️ 最好别碰
49152 ~ 65535 动态/私有端口，随便用 ✅ 随便用
为什么 AI 选了 3000？
3000 在 49152~65535 之外，但不在系统保留范围内，是开发者圈子的"约定俗成"，好记且不容易被占用。你也可以用 3001、5000、8080，只要是 1024 以上的都可以。
Step 7 10 分钟

新增"查看结果"功能 + 第三个"版本节点"

嵌入场景：发现只能投票不能看结果，学员向 AI 提出新增需求。

发现问题

现在能投票了，但看不到票数。每次投完都不知道当前谁领先。

🗣️ 你对 AI 说
现在只有按钮，看不到票数。请在投票页面下方帮我加一个表格，实时显示每种水果的票数。
🤖 AI 在后台自动完成了
  • · 修改了 index.html，在页面下方增加了一个表格
  • · 调整了 server.js，确保票数数据能正确返回并显示
🗣️ 你刷新浏览器
投票 + 看结果，一气呵成！
🎯 这就是 MVP 的迭代方式
先做核心功能（能投票），再逐步完善（看结果）。每完成一个小功能就保存一个版本节点，风险完全可控。
🗣️ 你对 AI 说
加上结果表格了，再保存一个版本节点，叫"增加票数展示表格"。
⏱ 版本节点 · 03

版本节点 ③：增加票数展示表格

现在你有三个版本节点了。

版本节点 ①

项目初始化

干净骨架

版本节点 ②

完成投票核心逻辑

能投票

版本节点 ③

增加票数展示表格

能投票 + 能看结果

Step 8 15 分钟

AI 全自动推送至 Gitee（通过 API Token）

嵌入场景：所有功能完成，最后一步是永久备份。

准备工作

在 Gitee 生成个人令牌（Personal Access Token）：

  1. 登录 Gitee
  2. 点击右上角头像 → 设置 → 私人令牌
  3. 点击"生成新令牌"
  4. 勾选 projects 权限
  5. 生成后复制令牌（只出现一次，保存好）
🗣️ 你对 AI 说
这是我的 Gitee 个人令牌：[粘贴你的令牌]。请帮我用这个令牌创建仓库、关联并推送所有版本节点上去。
🤖 AI 在后台自动完成了
  1. 用你的令牌在 Gitee 创建了一个名为 vote-app 的空仓库
  2. 把本地仓库关联到远程仓库
  3. 把所有三个版本节点推送到远程
🎯 这意味着什么？
  • · 代码永远丢不了了
  • · 所有历史版本节点都在云端
  • · 以后换电脑，让 AI 用令牌克隆下来，所有历史记录完整跟着走
结尾 · 闭环回顾

我们经历了什么？

经历了"需求对齐含技巧 → AI 定方案 → AI 全自动搭建/编码/运行 → 迭代加表格 → 保存版本节点 → AI 通过令牌推送云端"，全程只动嘴，不动手。

需求对齐（含三大技巧）
AI 定方案（我们只确认）
AI 全自动搭建项目骨架
⏱ 版本节点 ①：项目初始化
AI 全自动编写核心投票逻辑
⏱ 版本节点 ②：完成投票核心逻辑
AI 启动服务 → 浏览器验证
AI 迭代增加结果表格
⏱ 版本节点 ③：增加票数展示表格
AI 通过令牌自动创建仓库并推送
终极口诀

需求说清加追问，
方案确认再动工；
每成一件事，
设个版本节点存；
令牌给 AI，
仓库自动建。

最后回答一个问题："程序跑起来了"到底是什么意思？
当 AI 说"服务已启动"，本质上就是：
Node.js 这个容器加载了我们的代码，开始监听 3000 号门牌，随时等待浏览器敲门。 浏览器输入 http://127.0.0.1:3000，就等于敲了门，服务器就把页面内容"端"给你看。
就这么简单。
🏠
课后作业
为我们做的小投票器增加一个功能（具体加什么，听讲师课上展示）。
完成后，新建一个版本节点，并推送到 Gitee。
🎯 试试看：这一回不给你现成提示词了——自己把需求、版本节点名、推送动作抽象成大白话发给 AI。提示词写得越清晰，AI 干得越准。
🎉 恭喜你，你已经完成了 AI 时代软件开发的完整闭环！
附录

学员常见问题速查

把这五个问题存好，遇到时直接照着说就行。

如果 AI 不主动提问，直接就开始写代码了怎么办？ +
立刻打断它："请先不要写代码。我们先把需求对齐，你有不清楚的地方先问我。"
如果 AI 的回复里有我看不懂的术语怎么办？ +
直接追问："我不懂这个，请用大白话解释一下。"
如果 AI 告诉我"请你在终端手动执行 xxx"怎么办？ +
回复它："请你自己调用终端工具执行，不要让我手动操作。我不会敲命令。"
如果 3000 端口用不了怎么办？ +
让 AI 换一个："请帮我换一个端口，比如 3001，然后重新启动。"
如果 Gitee 推送失败怎么办？ +
检查令牌权限是否勾选了 projects，然后把错误信息复制给 AI 让它修复。
讲师专属

讲师专属避坑指南

这部分不展示给学员。开课前先过一遍，把可能踩的坑提前规避。

开课前准备

  • 指导学员完成 Node.js LTS 安装（node -v 确认）
  • 指导学员在 Gitee 生成个人令牌（Settings → Private Tokens → 勾选 projects 权限）

提示词监控

如果 AI 的回复包含"请你在终端手动执行 xxx"，讲师需引导学员追加：

"请你自己调用工具执行，不要让我手动操作。"

兜底代码

准备一份完整可用的 server.js + index.html（含表格功能），若学员 AI 卡壳，直接复制内容让 AI 写入文件。

端口冲突处理

如果 3000 端口被占用，让 AI 自动换用 3001，并解释"端口号可以随意换，只要不跟系统保留的冲突就行"。

准备好开始了吗？

打开 CodeBuddy，
复制第一条提示词，
旅程就开始了。

全程不背代码、不敲命令、不碰终端。你只负责把需求说清楚，剩下的一切——安装、运行、推送云端——AI 全包。

回到开场 →