第06阶段

前后端 AI 应用开发

把 AI 能力做成网页:前端收集输入,后端保护密钥,页面展示结果。

课时范围:第12-13课

阶段学习说明

第6阶段的主题是“前后端 AI 应用开发”。这不是一个只看概念的阶段,而是要把概念放到小作品里。你会学到的课题包括:AI Web应用搭建、流式输出:让结果一点点出现。每个课题都不是孤立的,它们会连成一条路线:先知道要做什么,再知道怎样让程序稳定地做出来。

这一阶段最适合用“边做边问”的方式学。比如项目有:AI故事生成网页、流式 AI 聊天页面。做项目时不要急着把界面做漂亮,先让输入、处理、输出跑通。等最小版本能稳定运行,再考虑增加按钮、颜色、更多字段或更复杂的功能。很多同学一开始喜欢把功能堆满,结果出错时不知道从哪里查。这里我们反过来:先做小,再做稳,最后做完整。

理论部分会讲得比较细,但会尽量用生活例子。输入契约就像点餐时说清楚要什么;输出契约就像老师要求作业必须写姓名、题号和答案;测试就像试一把门锁,不是只在天气好、心情好、钥匙刚好对齐时才试。这样讲不是为了搞笑,而是因为这些比喻能帮你记住工程里的关键动作。

这一阶段还会训练一个习惯:不要把 AI 的回答当成最后答案。AI 很会组织语言,但程序要负责检查。比如字段有没有少、数字是不是数字、资料有没有来源、图片判断有没有不确定性。学生要慢慢学会从“哇,它回答了”变成“它回答得能不能被程序使用,能不能被别人检查”。这一步非常关键。

课堂练习会分成三层。第一层是照着例子跑通,保证你不被环境和语法卡住;第二层是换输入,看作品是否还能正常工作;第三层是改需求,比如把作文评分器改成读书笔记评分器,把旅行 Agent 改成学习计划 Agent。能完成第三层,说明你不是在抄代码,而是在理解结构。

阶段结束时,你应该能拿出一个小作品,并能讲清楚四件事:用户输入了什么,程序怎样处理,AI 或工具做了哪部分,最后怎样检查结果。能把这四件事讲明白,比页面上多一个动画更有价值。动画以后可以加,思路乱了就很难补。

如果你不知道从哪里开始,就先挑一个最普通的输入。例如本阶段可以从“AI故事生成网页:输入角色、地点、难题,页面生成故事。”开始。先别追求惊艳,先追求稳定:输入能不能被程序接住,输出能不能看懂,失败时有没有提示。稳定之后,再把例子换成自己的学习、游戏、阅读或生活场景。这样项目会慢慢长出来,而不是一下子堆出来。

老师在点拨时会重点看学生的解释方式。一个学生说“我用了 AI”,这还不够;如果他说“我让模型负责理解语言,让函数负责计算,让 JSON 负责固定输出格式”,这就说明他开始理解系统结构了。课堂里会鼓励这种说法,因为它能帮助同学之间互相检查,也能让家长看懂孩子到底学到了什么。

这一阶段的练习也会故意保留一点小麻烦。比如输入不完整、格式不统一、结果不确定、资料找不到。真实项目里这些情况每天都会出现,提前在课堂里遇到并不可怕。相反,越早学会排查,后面做大项目越轻松。我们的目标不是让每次演示都完美,而是让你知道不完美时该怎么修。

如果你已经做完基础任务,可以试着给作品加一个小改动:换一个主题、增加一个字段、补一个错误提示,或者把输出改得更适合展示。小改动最能看出理解程度,因为它要求你知道哪里能动、哪里不能乱动。

课堂提醒

  • 先完成本阶段最小项目,再做扩展,不要一上来就追求“大而全”。
  • 每次改动只改一个核心点,方便知道到底是哪一步让结果变好了。
  • 保留三组测试:正常输入、边界输入、异常输入。测试记录就是你作品的证据。
  • 遇到模型回答不稳定时,先检查任务目标和输出格式,再考虑改代码。
  • 展示作品时,用“我解决的问题 -> 我的输入 -> 我的处理 -> 我的输出 -> 我的测试”这个顺序讲。
AI 工具地图

OpenAI 项目工具栈

页面里加入 OpenAI、Node.js、Python 和 JSON 图标,帮助学生把 AI 能力、后端调用、脚本实验和结构化输出放在同一条学习路线里理解。

学习路线

阶段入口与周课入口

先用阶段卡片看清大方向,再用周课卡片进入具体项目。每节课都保留理论、例子、Node.js、Python、练习和自测,学生可以直接按卡片推进。

OpenAI 项目地图

阶段入口

第01阶段:AI应用基础与 OpenAI 入门

先看懂 AI 应用的工作流程,再完成第一次 API 调用,最后学会写清楚提示词。

进入学习

第02阶段:让 AI 输出程序能读懂的结果

AI 不只要会说话,还要按固定格式交答案,这样程序才能稳定处理。

进入学习

第03阶段:Function Calling:让 AI 调用函数

AI 负责理解语言,函数负责精确计算;两者配合,结果更可靠。

进入学习

第04阶段:多模态应用:文字 + 图片

把图片也交给 AI 看,再让它用清楚的文字或 JSON 结果回答。

进入学习

第05阶段:内置工具:Web Search 与 File Search

需要最新消息时查网页;需要班级资料时查文件。先找资料,再回答。

进入学习

第06阶段:前后端 AI 应用开发

把 AI 能力做成网页:前端收集输入,后端保护密钥,页面展示结果。

进入学习

第07阶段:AI Agent、安全与成本

Agent 会按步骤完成任务,但你要给它工具、边界、检查规则和预算意识。

进入学习

第08阶段:毕业项目发布会

把前面学过的提示词、JSON、函数、检索、网页和安全设计合在一个作品里。

进入学习

周课入口

第12课:AI Web应用搭建

把 AI 做成一个网页:用户输入,后端调用,页面显示。

进入学习

第13课:流式输出:让结果一点点出现

长回答不用等全部生成完,可以像打字一样逐步显示。

进入学习

这一阶段你会做到

  • 你能解释为什么 API Key 不能放在浏览器前端。
  • 你能搭建一个最小 AI Web 应用。
  • 你能把模型回复显示到网页上。
  • 你能做出流式输出,让文字一点点出现。

本阶段课题预览

  • 第12课:AI Web应用搭建
    例子:AI故事生成网页
  • 第13课:流式输出:让结果一点点出现
    例子:流式 AI 聊天页面

先看几个例子

  • AI故事生成网页:输入角色、地点、难题,页面生成故事。
  • 学习问答页:输入问题,显示分步解释和练习。
  • 流式聊天页:边生成边显示,像正在打字。

阶段闯关标准

  • 你能用自己的话解释本阶段的核心概念。
  • 你能完成至少 1 个可运行小作品。
  • 你能准备正常、边界、异常 3 组测试。
  • 你能说出作品哪里安全、哪里需要人工确认。

进入下一阶段

返回 OpenAI 课程总览