第 10 课 Windows 课件工具：用 Electron 封装桌面版教学工具
本课定位
帮助老师区分“浏览器就够用”和“需要桌面应用”的场景，并做出最小桌面工具原型。
本课技术框架
- Electron
- 网页到桌面应用封装
- 本地文件读取
- Windows 教室环境适配
学习目标
- 理解桌面课件工具的适用场景
- 完成一个最小 Electron 教学工具原型
- 知道如何在 Windows 教室机器上部署
课前准备
- 准备一个已有网页课件或小工具点子
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 讲浏览器课件与桌面应用的适用边界 | 讲浏览器课件与桌面应用的适用边界 |
| 10-20 分钟 | 演示一个教学计时器 / 随机点名器的 Electron 版 | 演示一个教学计时器 / 随机点名器的 Electron 版 |
| 20-40 分钟 | 用 Codex 把一个网页工具封装成最小桌面程序 | 用 Codex 把一个网页工具封装成最小桌面程序 |
| 40-55 分钟 | 讲解 Windows 教室环境的部署注意事项 | 讲解 Windows 教室环境的部署注意事项 |
| 55-60 分钟 | 记录适合桌面化的教学场景 | 记录适合桌面化的教学场景 |
核心讲授点
- 绝大多数课件先做网页版就够了，桌面化适合本地文件、离线、窗口化或学校环境限制明显的场景
- Electron 的价值在于“用网页技术做桌面工具”，不是为了炫技
- 老师要学会先做最小版本，再决定是否值得打包成 EXE
课堂案例
桌面版课堂计时与随机点名工具
一个非常贴近老师日常使用的 Windows 小工具，帮助老师理解桌面应用的实际价值。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“Windows 课件工具：用 Electron 封装桌面版教学工具”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 教学工具主题：班级随机点名 + 课堂倒计时
- 使用环境：Windows 教室电脑，可能离线，老师希望双击即可打开
- 需要功能：导入学生名单、随机点名、60 秒倒计时、提示音、重置按钮
- 本次要做的课件：最小 Electron 桌面版教学工具和部署说明
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Electron 项目
- 至少包含这些文件：package.json、main.js、index.html、renderer.js、style.css、README.md
- README 里用老师能看懂的话写清楚怎么安装和打开提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 教学工具主题：班级随机点名 + 课堂倒计时
- 使用环境：Windows 教室电脑，可能离线，老师希望双击即可打开
- 需要功能：导入学生名单、随机点名、60 秒倒计时、提示音、重置按钮
- 本次要做的课件：最小 Electron 桌面版教学工具和部署说明
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Electron 项目
- 至少包含这些文件：package.json、main.js、index.html、renderer.js、style.css、README.md
- README 里用老师能看懂的话写清楚怎么安装和打开提示词 3：升级成桌面版教学工具
text
请把这个课件或教学工具升级成适合 Windows 教室环境使用的桌面版，双击就能打开，并保留老师常用的控制入口。
请直接把课件做出来。
这次课件的要求如下：
- 教学工具主题：班级随机点名 + 课堂倒计时
- 使用环境：Windows 教室电脑，可能离线，老师希望双击即可打开
- 需要功能：导入学生名单、随机点名、60 秒倒计时、提示音、重置按钮
- 本次要做的课件：最小 Electron 桌面版教学工具和部署说明
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Electron 项目
- 至少包含这些文件：package.json、main.js、index.html、renderer.js、style.css、README.md
- README 里用老师能看懂的话写清楚怎么安装和打开本课交付物
- 一个最小 Windows 教学工具原型
创意扩展
- 随机点名器
- 课堂计时器
- 离线素材播放面板