飞哥数智谈，现居于济南，AI提效、AI编程实践者，AI·Spring社群发起人，同时，担任 TRAE Friends 社区济南 Fellow，致力于AI 提效与AI编程落地，最近长期举办 openclaw 系列活动《养虾记》。

最近几天会把我策划的体系化 AI 编程入门课程大纲逐步放出，欢迎大家提意见。

该门课程暂定 4+1 节：

• 4节主课，以 TRAE 为工具，实现 AI 编程入门；
• 1节扩展课，主要补充非技术人员的软件工程知识。

课程内容：

• 第一节：TRAE AI 编程入门——Vibe Coding 初识即上手
• 第二节：TRAE AI 编程入门——磨刀不误砍柴功
• 第三节：TRAE AI 编程入门——突破边界的 Rules/Memory/MCP/Skills
• 第四节：TRAE AI 编程入门——打破编程界限的智能体

今天是扩展课的大纲。

第 1 页：开场——为什么懂一点计算机常识很重要

• 回顾四讲：你已经能用 TRAE 把想法变成产品了
• 但你可能遇到过这些困惑：
  • AI 说"需要写一个后端接口"，你不知道什么意思
  • 做出来的东西在自己电脑上能用，发给同学就用不了
  • 不知道怎么跟 AI 描述"我要把数据存下来"
• 一个重要观点：在提示词中使用准确的专有名词，会大大提高 AI 的输出质量
  • 模糊说法："帮我做一个能存数据的网页" → AI 需要猜测你要什么
  • 精确说法："做一个前端页面，用 REST API 连接后端，数据存入 MySQL" → AI 精准理解你的意图
  • 这节课的目标：让你掌握这些专有名词，跟 AI 沟通效率翻倍

第 2 页：代码在哪里运行——服务器、浏览器、客户端、手机端

• 服务器（Server）：一台 24 小时运行的远程电脑，你的后端代码部署在这里
  • 特点：任何人都可以访问，但你不能直接看到它
  • 类比：餐厅的后厨——顾客看不到，但所有菜品都在这里制作
• 浏览器（Browser）：Chrome、Safari 等软件，负责运行前端代码并展示页面
  • 特点：每个用户自己电脑上的浏览器独立运行
  • 类比：顾客的餐桌——每个人有自己的，看到的东西可能不一样
• 客户端（Client）：安装在电脑上的应用程序（如微信桌面版、VS Code）
  • 与浏览器的区别：不需要打开网页，直接是一个独立软件
• 手机端（Mobile）：运行在手机上的 App 或移动端网页
  • 与前端的区别：屏幕小、交互方式不同（触摸 vs 鼠标），但核心逻辑类似
• 为什么重要：跟 AI 说"部署到服务器"你就知道是让项目上线；说"兼容手机端"你就知道要适配移动设备

第 3 页：前端与后端——用户看到的 vs 背后发生的

• 前端：运行在浏览器/手机上的代码——页面布局、按钮、输入框、动画效果
  • 技术举例：HTML（结构）、CSS（样式）、JavaScript（交互）
  • 类比：餐厅的菜单、装修、服务员
• 后端：运行在服务器上的代码——处理逻辑、数据计算、业务规则
  • 技术举例：Python、Node.js、Java
  • 类比：餐厅的后厨、厨师、菜谱
• 为什么重要：跟 AI 说"帮我做一个网页"，AI 默认只做前端；如果你需要用户注册、数据保存、支付等功能，就需要后端
• 一句话判断：功能只跟"看"和"点"有关 → 前端就够了；涉及"存数据""算东西""多人协作" → 需要后端

第 4 页：数据怎么流动——从用户操作到数据存储

• 一个完整的数据流（以"用户注册"为例）：
  1. 用户在浏览器中填写信息 → 点击"注册"按钮
  2. 前端代码把数据发送给服务器上的后端（通过 API）
  3. 后端验证数据（格式对不对、用户名有没有重复）
  4. 后端把数据存入数据库
  5. 后端告诉前端"注册成功"
  6. 前端页面显示"欢迎你"
• 为什么重要：理解数据流之后，跟 AI 描述需求时就知道应该说清楚"数据从哪来、到哪去、中间怎么处理"
• 在 TRAE 中的实践：用 Spec 模式规划项目时，AI 会自动帮你梳理数据流——但你得能看懂它在做什么

第 5 页：API 与接口——前后端怎么对话

• 什么是 API：前后端之间的"约定"——前端用特定格式发请求，后端用特定格式回响应
• 通俗理解：API 就像餐厅的点菜系统——前端（服务员）把顾客的点单信息传给后厨，后厨做好了再传回来
• 常见 API 类型（只需了解）：
  • GET：获取数据（"给我用户列表"）
  • POST：提交数据（"创建一个新用户"）
  • PUT/DELETE：修改/删除数据
• 为什么重要：AI 生成代码时经常会提到"调用 API"，理解了这个概念你就知道 AI 在做什么；连接外部服务（如地图、支付）本质上就是调用别人的 API
• 在 TRAE 中的实践：第三讲学的 MCP 本质上就是让 AI 能调用各种外部 API

第 6 页：数据库基础——数据存哪里、怎么存

• 什么是数据库：专门用来存储和管理数据的系统，比文件更高效、更安全
• 核心概念（只需了解）：
  • 表（Table）：数据按类别存放，比如"用户表""订单表"
  • 字段（Field）：每一列，比如用户表的"姓名、邮箱、注册时间"
  • 增删改查（CRUD）：添加、删除、修改、查询——几乎所有数据操作都是这四种
• 为什么重要：当项目需要"记住"任何信息（用户数据、文章内容、聊天记录），就需要数据库
• 常见数据库：MySQL、PostgreSQL（关系型）、MongoDB（文档型）——不需要深入，知道名字就行

第 7 页：代码怎么组织——函数、文件与库

• 函数（Function）：一段有名字的代码，完成一个特定任务，可以反复调用
  • 类比：菜谱中的一个步骤——"炒蛋"是一个函数，每次需要炒蛋时调用它，不用重新写步骤
  • 为什么重要：AI 生成的代码里到处都是函数，理解了这个概念你就知道 AI 把代码分成了哪些"功能模块"
• 文件（File）：代码按功能存放在不同文件中
  • 比如：login.js 放登录相关代码，database.js 放数据库操作代码
  • 类比：厨房里食材、调料、厨具分门别类放在不同柜子里
  • 为什么重要：跟 AI 说"在哪个文件里修改"时你得知道文件是什么
• 库（Library / Package）：别人已经写好的代码集合，你可以直接拿来用，不用自己写
  • 类比：厨房里的预制调料包——不用自己调配，撕开就能用
  • 举例：日期处理库（moment.js）、图表库（ECharts）、UI 组件库（Element UI）
  • 为什么重要：AI 经常会说"引入 xxx 库"，你知道这是在用别人写好的工具，而不是 AI 在变魔术
  • package.json 就是记录"这个项目用了哪些库"的清单

第 8 页：开源与 GitHub——代码怎么共享和协作

• 开源（Open Source）：把代码公开，任何人都可以免费查看、使用和修改
  • 为什么重要：你用 AI 生成的项目用到的很多库都是开源的；开源意味着你遇到问题时可以参考别人的代码
• GitHub：全球最大的代码托管平台，程序员们的"代码社交网络"
  • 核心功能：存放代码、记录修改历史、多人协作
  • 为什么重要：AI 有时会让你"去 GitHub 上找参考项目"；比赛作品也可以放到 GitHub 上展示
  • 不需要深入使用，知道它是"代码的云盘"就够了
• 开源与 AI 编程的关系：AI 能帮你写代码，但很多能力来自开源库——理解开源生态，你就知道 AI 的"工具箱"里有什么

第 9 页：部署——怎么做完让别人也能用

• 部署（Deploy）：把项目从自己的电脑搬到服务器上，让任何人都能通过网址访问
• 本地 vs 线上：
  • 本地运行：只有自己的电脑能访问
  • 部署到云平台：任何人通过网址都能访问
• 常见部署平台：
  • Vercel、Netlify：适合纯前端项目，操作简单，免费额度够用
  • 云服务器（阿里云、腾讯云等）：适合全栈项目，需要配置但更灵活
• 为什么重要：比赛作品需要部署才能展示和评审；部署是"做完项目"到"交付项目"的最后一步
• 在 TRAE 中的实践：TRAE 可以直接预览前端项目；部署环节 AI 可以帮你生成部署配置文件

第 10 页：本课总结

• 专有名词是效率钥匙：提示词中用准术语，AI 输出质量大幅提升
• 代码在哪里运行：服务器（后端）、浏览器/手机（前端）、客户端（桌面应用）
• 前端/后端：用户看到的 vs 背后处理的
• 数据流：用户操作 → 前端 → API → 后端 → 数据库 → 返回
• API：前后端对话的约定；数据库：数据的仓库
• 代码组织：函数（功能模块）、文件（分类存放）、库（别人写好的工具）
• 开源与 GitHub：代码的共享和协作；部署：让项目上线，别人能访问
• 核心认知：不需要学会写代码，但理解这些概念能让你跟 AI 沟通效率翻倍