零基础 AI 应用开发：从第一个小游戏到上线作品_编程实战微课

课程介绍

把“我想做个小工具”，变成浏览器里能操作的作品

想给自己做一个学习任务板、记账本或图片整理工具，却不知道从哪里开始？这门课从一个能玩的猜数字小游戏起步，带你用中文向 AI 说明规则，把生成的代码保存成文件，在浏览器里运行，再亲手修改和检查。

30 章 · 120 节 · 一个持续迭代的学习任务板 · 20 个独立工具实战 · 2 章 AI 能力选修。

你会反复练习一个完整过程：说清要求 → 与 AI 协作实现 → 实际运行 → 修改与排错 → 按清单检查 → 发布和更新。需要理解的网页知识，会结合眼前的任务讲解；遇到问题时，也会练习怎样描述现象、缩小范围、保留能恢复的版本。

四个阶段，逐步把作品做完整

第 1 章：先做出一个小游戏。体验猜数字游戏，生成自己的版本，修改数字范围与提示，检查空输入、越界、重开和键盘操作。
第 2—8 章：完整做一遍小应用。围绕个人学习任务板，练习需求表达、必要代码识读、项目管理、交互与保存、使用体验、测试、发布和版本恢复。
第 9—28 章：完成 20 个工具实战。把同一套方法用到学习、数据、图片、文档与生活场景，处理每种工具各自的规则和边界。
第 29—30 章：选修 AI 能力接入。从本地服务起步，练习真实模型调用、等待与失败处理，再制作带资料出处的问答功能。

前 28 章组成必修路线；完成主线后，再进入模型服务相关选修。必修作品以 HTML、CSS 和 JavaScript 网页为主，不要求提前掌握开发框架。

一个任务板，练习从“能打开”到“能交付”

学习任务板会随着课程逐步增加能力：新增任务、标记完成、修改和删除，按条件筛选，刷新后保留数据，再加入日期、科目、文件导入导出和标题搜索。

你还会检查长标题、空列表、窄屏和键盘操作，尝试把作品放到公开地址，并练习更新与恢复。每一步都有明确的检查对象，帮助你判断这次修改是否真的达到了要求。

20 个独立实战，覆盖常见工具场景

学习与资料：个人资料收藏夹、番茄钟、知识闯关小测验、阅读进度与读书笔记管理器、课程学习计划与考试复习排程器。
数据与计划：个人记账本、课程活动日历、课程反馈问卷、CSV 学习记录数据看板、学习项目依赖与关键路径分析器。
图片与文档：图片批量缩放与导出工具、文件命名规划器、个人简历制作与打印工具、图片转 PDF 工具、长截图拼接与隐私遮挡工具。
交付与生活：学习成果作品集与打印报告工具、数据备份对比与选择性恢复工具、功能回归测试助手、多人费用分摊与结算工具、家庭物品保修与到期管理工具。

这些项目会带来具体的新问题：同名记录怎么区分，日期跨月怎么算，导入前怎样核对，图片缩放后如何定位，金额分摊如何对齐。你会先说清规则、预测结果，再运行和验证，让方法逐步迁移到新的需求。

图文讲解，配合动手与反馈

课程结合 SVG 图解、示例提示词、动手练习和自测题。配套课件按章节整理，包含起始材料、教学参考、明确标记的故障练习、测试数据和空白记录模板。

学习时，先尝试自己的操作，再对照参考和检查清单。AI 可以帮助解释和修改，你负责确认需求、判断结果，并把作品和检查记录保存在自己的学习文件夹里。

适合人群

没有系统编程经验的学习者：希望从一个小作品开始，逐步理解网页是怎样运行和变化的。
学生与教师：希望围绕学习计划、资料整理、测验、活动日历或数据记录制作自己的工具。
运营、产品及其他职场人员：手上有具体的小需求，希望把想法整理成可运行、可检查的网页原型。
学过一些语法，但还没完整做过项目的人：希望把需求、代码、排错、测试与发布串成一次完整实践。

开始前准备什么

准备一台 Windows 电脑、浏览器和自己能够使用的 AI 对话账号，能够创建文件夹、解压资料、复制文字和保存文件即可开始。手机适合阅读与答题，文件编辑和项目实操按电脑路线进行。

课程先从浏览器和单个 HTML 文件起步，第 4 章进入 TRAE 编辑器及 Python 3 本机预览。必修路线无需准备模型 API 密钥；选修部分另需 Node.js 环境和模型服务账号，实际调用费用按所用服务计费。

学习成果

沿课程完成动手任务后，你会逐步积累自己的小游戏、学习任务板和工具作品，以及需求说明、检查记录与可恢复版本，并练习以下能力：

把想法说具体。写清使用者、场景、第一版功能和可检查的结果，让 AI 有明确的实现依据。
运行和修改自己的作品。组织项目文件，识别必要的网页结构与交互代码，完成小范围修改。
带着证据排错。描述实际现象、提供相关信息，修复后重新检查原功能与关联功能。
验证数据和操作。核对新增、修改、保存、导入导出及异常输入，检查页面提示与真实结果是否一致。
完成发布与更新。整理可交付的文件，按访问者的使用路径检查，并保留可以恢复的版本。
选修中接入模型能力。观察真实调用的请求与结果，检查资料问答的依据，并由自己决定是否采用生成内容。

实操作品在本地保存，按各章清单自评；功能是否完成，以你实际运行和检查的结果为准。

可以先从第一章免费试学开始：打开小游戏，猜一次数字，再亲手改一条规则。

点击下载编程狮App，手机随时随地继续学>>

第1章先做出一个能玩的小游戏

第2章把“我想做一个工具”说清楚

第3章看懂网页里最需要知道的几件事

第4章在自己的项目里修改和排错

第5章让任务板能操作，还能记住内容

第6章让小工具好看，也容易使用

第7章做完一个可以交付的学习任务板

第8章把作品发布出去，并完成一次更新

第9章实战案例——从零做一个个人记账本

第10章实战案例——做一个找得到资料的个人收藏夹

第11章实战案例——做一个能暂停、能恢复的番茄钟

第12章实战案例——做一个能反馈、能重练的知识闯关小测验

第13章实战案例——做一个能发现时间冲突的课程活动日历

第14章实战案例——做一个能按条件提问的课程反馈问卷

第15章实战案例——把CSV学习记录变成可核对的数据看板

第16章实战案例——做一个本地图片批量缩放与导出工具

第17章实战案例——做一个阅读进度与读书笔记管理器

第18章实战案例——做一个学习资料文件命名规划器

第19章实战案例——做一个学习项目依赖与关键路径分析器

第20章实战案例——做一个学习成果作品集与打印报告工具

第21章实战案例——做一个学习数据备份对比与选择性恢复工具

第22章实战案例——做一个学习应用功能回归测试助手

第23章实战案例——做一个课程学习计划与考试复习排程器

第24章实战案例——做一个个人求职简历制作与打印导出工具

第25章实战案例——做一个图片转 PDF 与多页文档整理工具

第26章实战案例——做一个多人费用分摊与结算工具

第27章实战案例——做一个本地长截图拼接与隐私遮挡工具

第28章实战案例——做一个家庭物品保修与到期管理工具

第29章选修——让应用真正调用一次AI

第30章选修——让AI根据你的学习资料回答

本包配合课程使用，含30章材料。请完整解压后查看“课件目录.md”，进入对应章节内的aiapp-chXX-student-v1文件夹，再读该章“先读我”或项目说明。各章材料已展开，不需要再次寻找同名的单章ZIP。

第一章从“01-先做出一个能玩的小游戏/aiapp-ch01-student-v1”开始，先阅读先读我.md，按课文体验教师示例，再在自己的练习目录生成作品。用记事本打开MD文本；SVG可用浏览器打开。

教师参考、故意故障和测试输入各有用途。按对应课文再打开，先保留自己的尝试和实际结果；不要把教师成品改名当作自己独立完成。原空白模板保留，复制到自己的记录目录后填写，未做项目保留未测。

前28章是必修，后2章为模型调用与资料问答选修。后续章节需要的环境和账号按各章说明准备。包内是学习材料，不能代替本人真实AI过程、原生设备检查和实际功能验收。

版本：2026-11-02。1642份原章节文件，加本说明和课件目录，共1644份。全套资料仅在此ZIP中交付，课程内容与测验按平台课文学习。

该课程暂无评价噢！