📢 转载信息
原文链接：https://sspai.com/post/102931
原文作者：随随隋
本文中「微应用」指利用 AI 开发的、实现特定功能的单个 HTML 网页工具。
排座位
上个学年我入职到现在的学校，教九年级 16 个班的信息课。每个班有 60 多个学生，而机房却只有 56 台电脑，导致总有几个学生要坐在其他同学后面。为了公平起见，我跟学生约定每个月重新排一次座位，重新排座时之前共用电脑的学生则会独自一台电脑。
机房的座位并不像普通教室是一行行的布局，而是纵向的四列，每台电脑桌上按蛇形走位贴了座号。再加上，排座时我还会让男生女生间隔坐，有的学生可能会请长假，这些复杂的情况，让我在 Excel 中进行座位调整时并未找到便捷的方法。过去一学年，每到月底重新排座，我总要花上一两个小时完成这件任务。
上面是上学年课程后期一个班级的座位表演示（学生姓名都已替换为随机三字母），我通过单元格填充蓝橙色区分男女（深蓝表示班长），姓名本身的颜色则表示和其他同学共用电脑的次数（黑色为 0、蓝色为 1、紫色为 2），最上面还有一块区域用于存放长期请假的学生。
9 月刚开始的这个学年，我继续任教九年级，但这次却变成了 18 个班级，排座位这件事对我来说变得更加头疼。之前我就想过让 AI 帮我制作一个工具来完成这件事情，这次任务量的增加让我开始认真对待这个想法。一开始我让 ChatGPT 制作了初始的几个版本排座工具，后来因为上下文容量的限制，我又转用 Gemini 完成了后续几个版本的调整，最终有了如下面动画所示效果的排座工具。
导入一个有两个工作表组成的表格文件（网页本身提供模板下载），一个工作表存储的是当前座位表（可能为空），另一个则存储 学生姓名 性别 坐后面次数（即与他人公用电脑的次数）这三项基本信息。导入后可以展示当前座位表（若有的话），也可以进行座位表的重新编排。
重新编排时将会综合平衡男女生间隔坐和之前公用电脑同学单独一台电脑的规则。对于呈现出的座位表，支持通过鼠标拖拽来进行单个学生的调整、删除，对于请长假的学生可以放到搁置区。最后，对于完成的座位表可以导出为表格文件，导出同时也会更新学生 坐后面次数 的数据以便用于下一次重新编排座位表。
有了这个工具后，我只需要每次上课前读取对应班级的表格文件就可快速呈现座位表给学生。而每个月初，我也只需通过重新编排功能就可以快速生成新的座位表，再通过导出覆盖之前的表格文件就能实现数据的更新。更进一步地，即使到了明年新的学年，我依然可以使用它完成排座位这件事情。
几个工具
有了排座位工具的经验后，我重新去看待学校工作中我需要完成的一些琐碎、重复性的任务，思考是否可以用类似的微应用来解决，下面是另外三个我最近制作的微应用。
学生积分工具
一个用来进行班级学生的积分管理工具，包含以下几个功能：
- 导入导出功能，可导入学生名单，可导出学生积分表，包含学生积分总表每个学生的积分变化明细；
- 对每个学生可进行积分操作，积分操作包含加减分值和理由两项内容；
- 积分操作中的理由设置有灵活模式（自由添加，添加后可重复使用）和严格模式（只能选择预设理由）两种；
- 学生卡片可按照积分进行排序；
- 可通过 JSON 文件实现导入导出备份。
这个工具是我尝试为年级里班主任们做一个的小工具，由于我并未担任班主任，也就没有进行实践使用。然而把这个工具做出来之后，我依然会很兴奋。八九年前刚开始做老师的时候，我担任过一年的班主任。那时候我就曾设想过，能否在班级的管理中通过积分来实现游戏化的管理。然而那时我对编程没有任何接触，又不知道有什么工具可以来实现这种方法，结果在班级中只能采用最原始的纸笔记录，后来也就不了了之了。
在小红书上也刷到很多相关的工具分享，比如下面这个，积分记录的基础上还有小组游戏化，是一个很好的微应用例子。
周测监考安排
九年级每周五晚上和周六上午会组织周测，在安排监考表的时候有以下几个因素要考虑：
- 每次周测考试科目的顺序会发生变化；
- 晚上和白天监考的补贴不一样，需要平衡各位老师晚上与白天的监考场次数；
- 晚上的场次（2 场）有时会需要班主任在自己班级监考；
- 周六上午的场次学生则可以选择不参加，所以晚上和白天的场次会不一致；
- 涉及到周六，部分老师有时会有个人原因没法监考。更进一步地，部分老师会长期因为某些原因无法监考。
针对上面这些因素，我借助 AI 完成了下面这个周测监考安排工具。导入表格数据后，考场设置方面可以修改考场数和考试科目时间。监考人员方面，监考老师可以优先设置班主任监考晚上场次，不能参与当次周测的老师可以取消勾选。每个老师后面的设置按钮可以针对详细的监考偏好设置，同时可以选择是否保存为长期偏好。
对于生成的监考安排，有时候需要进行细微调整，可以通过拖拽每个老师的姓名卡片完成。工具页面关闭之后，有时还会有临时调整，所以在导入表格文件时可以选择「修改模式」，对当前表格中存储的监考安排进行修改。
生成的监考表一方面需要保存为图片便于在老师群中下通知，另一方面需要导出为表格文件作为记录。同时，导出的表格文件也会汇总所有周测每个老师的晚上和白天监考场次总数。
实际上除了周测监考安排，还有月考与期中期末这种大型考试的监考安排，规则又不一样。由于场次较多且每场要有两位监考老师，在微调场次时找到有空闲的老师很麻烦，我就对应添加了两个换班功能：
- 智能换班，对指定的两位老师，自动查找其中一人监考而另外一人无监考的场次，对调两人这个场次的安排；
- 生成的监考安排中，去掉某位老师，可提供当场次无监考的老师作为候选项。
月考考场安排
月考除了上面涉及到老师的监考安排外，还需要对学生进行考场安排。考场安排的规则很简单，按照给定的学生名单顺序每个考场 56 个学生排考场即可。但麻烦的地方在于需要将考场安排呈现为下面 4 份表格文件：
- 考生总表：包含班级、考场号、座号、姓名、学校信息的，用于学生条形码打印；
- 按班级呈现的学生名单：包含学生姓名、考场号、座号，用于班级内通知学生考场安排信息；
- 按考场呈现的学生名单：包含学生姓名、考场号、座号、班级，张贴到各个考场内；
- 按考场呈现学生桌贴：用于张贴到每个学生桌面上。
这个微应用的界面就比较简单，导入学生信息、设置考号，之后就可以一键导出上面所提到的四个文件。
为教师而生：微应用的三点核心优势
完成了上面几个微应用后，我开始意识到这种 AI 辅助下自制工具的便利性，以及与教师工作的契合。
成为一名老师之后，我才发现教师这份行业并不如大多数人想象得那么美好。在教师的本职教学工作之外，常常有很多琐碎的事物要去处理。与此同时，教学本身又是需要花很多心思去思考与创造的。当一个老师把精力放在琐碎事务上时，自然会挤压他思考教学的精力。
上面我举的几个微应用场景，或许都可以尝试通过编程（如 Python）或着 VBA（内嵌在 Excel、Word 等 Office 软件里的编程语言）来实现。但老师并不是全能的，编程的方式并不适合大多数老师。然而有了 AI 之后，老师可以不是全能的，但却可以借助「几乎」全能的 AI 来定制各种工具。
最近一段时间体验下来之后，我认为微应用有三大优点，非常适合教师工作。
高度定制化
具体到教学工作中，每个老师的需求是多样的。例如一开始我提到的排座位，机房和班级教室排座位的规则截然不同，具体到每个老师会有他自己的考量。如果我把我上面的排座位微应用发给其他老师，很可能并不适合他的需要。然而，对于每个老师截然不同的需求，从 AI 的角度来看并不难去实现。所以，每个老师都可以在 AI 的辅助下去高度定制满足自己需求的微应用。
在小红书上，算法最近也常常推送一些相关的分享帖子给我——学生成绩分析、教室安静程度检测、早读音量检测、作业完成统计、知识点交互动画……可以看到很多老师在 AI 的辅助下制作了各种各样的微应用来定制化地满足自己教学工作的需要。
便捷分享与再定制
虽然上面我刚刚写到微应用是高度定制化的，不同老师之间的需求不一样。但某些场景下需求一致时，微应用又十分便于分享。微应用本质上就一个单独的 HTML 网页，在任意一台电脑上都可以通过浏览器打开与使用，甚至手机上也可以。
这一特点和 VBA 工具（即 Office 中的宏工具）对比鲜明。由于宏工具的复杂性（高度依赖具体的操作系统、Office 软件版本），不同电脑上的通用性可能存在偏差。比如之前有同事分享给我一个成绩分析的 .xlsm 文件，但不知什么原因在我的 mac 电脑上其中包含的宏工具并不能正常运行。
在便捷分享的基础上，微应用又可以方便地进行再定制。例如我制作的排座位微应用，同学校的信息老师如果希望排座时不需要考虑男女生的性别。这时，他完全可以直接把得到的微应用传给 AI，然后让 AI 在其基础上修改代码去掉男女相关的规则，工具得到了适应个人需求的再定制。
数据隐私
由于这种微应用本身就只是一个电脑上的单网页文件，所有的操作也都是本地处理（除非在线引用了某些工具库），所以几乎不太可能泄露所处理的一些学生或教师数据。
从零开始制作一个微应用
基本流程
那么如何借助 AI 去制作这样一个微应用？回顾几次微应用的制作经历，我梳理了下面一套流程。
明确需求
让 AI 制作微应用的过程，有点像是老板指挥实习生完成任务，老板（我们）要做的是给出目标、不需要考虑具体如何实现，而实习生（AI）会根据目标尝试各种实现方法。所以微应用制作第一步，是要明确需求，想清楚要制作的微应用具有什么功能、可能包含哪些规则、是否要生成某种数据等等。
这有点像是声明式编程，我们只需要告诉 AI 要做成什么样，而 AI 自己就会去实现。
指令构建
发给 AI 怎样的指令（prompt）才能更好地创建微应用？这一步其实就可以交由 AI 来完成。下面这段是我询问 AI 制作单网页微应用工具使用该怎样的指令，AI 所给出的具体示范。
（第一层：角色与目标）
You are now a senior front-end development engineer.
Please help me create a “Class Random Name Picker” application, which is a single HTML web page tool. Teachers can paste a list of student names, and then randomly draw one student.
（第二层：功能与逻辑）
This application needs to implement the following functions:
- Users can paste multi-line student names into a text input box, with one student name per line.
- The program should automatically ignore empty lines in the list.
- After clicking the “Start Picking” button, the program will randomly draw a student from the list.
- The drawn student's name will be clearly displayed in the result area below.
- If the list is empty and the button is clicked, a prompt “Please enter student names” should pop up.
（第三层：组件与布局）
The page needs to include the following parts:
- A title, with the content “Class Random Name Picker”.
- A multi-line text input box, with the placeholder text “Paste student names here, one per line”.
- A button with the text “Start Picking”.
- An area to display the result, with initial content “Good luck!”.
（第四层：风格）
Style requirements: Please make the overall page adopt a modern, clean design style. All elements should be horizontally centered on the page. The input box and result area should have rounded corners and light gray borders. The button should have a rounded design, blue background, white text, and a color change effect when hovered over.核心主要是三点——角色、要求 HTML 单网页、应用功能。
- 角色：借用上面实习生的比喻，AI 是一个多重身份的实习生，会计、医生、教师、程序员等等各种角色，指令中的角色让 AI 明确了它应采用的特定角色身份及相关领域知识。
- 单网页：明确微应用的呈现形式，单网页更容易分享。
- 应用功能：分点罗列的规则与功能需求，越明确细化，AI 越清楚要如何实现。
测试效果
在输出成果（HTML 代码）时不同 AI 界面不同，DeepSeek、豆包、ChatGPT、Claude 中直接点击提供下载按钮下载保存为 .html 文件（后两者需先点击进入预览），而像 Kimi、Google Gemini 则只提供了复制代码按钮。对于后两者，可在电脑上创建 .txt 文档并修改后缀名为 .html，接着使用记事本应用打开文件后将代码复制粘贴到其中并保存。
打开微应用后，就可以按照预期的功能进行测试。特别地若微应用的功能涉及到数据的处理，由于在之后多次迭代的优化过程中可能会需要测试多种情况，我会建议制作一个测试清单与相应的测试数据。有了测试清单后按照清单一项项去测试微应用的效果，避免最终应用有所遗漏。
迭代优化
除非微应用的功能非常简单（比如第 2 步中我示范的随机点名工具），通常 AI 制作的第一版微应用并不能完全符合我们的预期，我们需要与 AI 进行持续的沟通去不断优化微应用。
在测试时，可能会发现某些功能 AI 并未能实现，也可能我们会产生新的功能需求，甚至还可能出现严重的错误而导致应用并不能顺利运行。不管是哪种情况，都做好记录，然后将其再发给 AI 并让其根据反馈进一步优化微应用。经过这样的多次迭代，我们最终才可能得到我们想要的效果。
一些小技巧
在制作微应用的过程中，我也逐渐发现一些有用的小技巧。
保留关键版本、做好备注与标签
在多次迭代优化的过程中，将会产生多个版本的微应用，某些情况下我们可能会需要用回某个旧的版本。有次我进入机房准备给班级上课，这时发现我那天刚让 AI 制作的新版本排座工具在机房教师电脑上无法打开，我就先用旧版本呈现座位表来让学生坐下，之后再来优化新版工具。
我会建议把一些可以成功实现部分预期效果的关键版本都保留下来，同时在文件名中备注此版本的重要变化，以便随时可以回退到旧版本使用。考虑到微应用都是简单的单个 .html 文件，使用 git 进行版本管理会有点大材小用，所以我会建议简单的多文件存储。
此外，在我最新版的排座微应用中，我还让 AI 加入了一个版本说明按钮，这样在最新版本的微应用中，我就可以快速回顾迭代过程中的多个重要节点。
由小到大，小步前进
当我们的微应用所使用的场景比较复杂，在一开始的时候，我们可能并不能把功能需求梳理地非常全面。我会建议把能想到的重要功能需求先提交给 AI 去制作微应用。当我们有了一个可运行版本的微应用后，测试的过程会进一步帮我们梳理需求，再让 AI 继续迭代优化。小步前进，会比一开始就想让完成一个「完美」的微应用要顺利许多。
超上下文怎么办
与 AI 对话的过程中，当前对话记录会有一个上下文限制，通俗一点讲就是我们和 AI 的单个对话会有总字数限制，当我们超过这个限制 AI 就会开始遗忘之前的聊天记录。微应用制作与迭代过程中 AI 将会多次输出大量代码，很容易就超出上下文限制。
超出上下文限制时，可以与 AI 开启一个新对话，将最新版本的微应用 .html 文件作为附件添加上，在简单概述微应用的功能需求。这样就可以在之前版本的基础上，让 AI 继续迭代优化。文章开头我提到的排座工具，一开始我用的是 ChatGPT，后来由于一些问题总不能得到解决，我就用这种方法转而让 Gemini 进行了后续的迭代开发。
结语
AI 时代的当下，老师这个职业却依然存在着许多繁琐的、事务性的工作。我们依然会被要求手写教案与听课记录作为教学常规的检查事项之一，会需要手写家访记录与学生谈话记录作为工作档案……种种事情在消磨着我们的热情，把我们从鲜活的教育者，一步步异化为教学流程上的工具。
AI 让我们每个人都可以成为设计师与创造者，我希望这篇文章所提到的微应用，可以帮教师同仁们尽量减少一些事务性工作，让各位同仁可以有更多的时间和精力去钻研教学、丰富自己与享受生活。
作为一名义务教育阶段的信息科技老师，我一直喜欢在工作中尝试各种数字工具。「教师数字文具盒」系列，是我对我使用的工具或方法所做的一系列介绍文章。具体包含：
- 教师数字文具盒 1：课表管理——iStudiez Pro + 日历
- 教师数字文具盒 2：课程进度管理——Notion
- 教师数字文具盒 番外：个人读书音频生成——Python+Fish Audio
- 教师数字文具盒 3：AI 自制「微应用」百宝箱（即本文）
> 关注 少数派小红书，感受精彩数字生活 🍃
> 实用、好用的 正版软件，少数派为你呈现 🚀
🚀 想要体验更好更全面的AI调用？
欢迎使用青云聚合API，约为官网价格的十分之一，支持300+全球最新模型，以及全球各种生图生视频模型，无需翻墙高速稳定，文档丰富，小白也可以简单操作。
评论区