现在各种公开课、赛课，在要求里面都会有一句“必须使用AI赋能”。

自DeepSeek火爆以来，无数人在教你使用AI写网页小游戏。连连看、刮刮乐、

积分……

这些其实都算了AI赋能，因为低段的学生能感知到AI带来的变化，不一定要亲自体验生成。

初次使用大家都感觉打开了新世界的大门，但慢慢地你就会发现——单一的网页似乎不够用了，你还想跨设备存储数据，还想多设备数据实时互通……

周六晚上，不坑老师给大家直播演示了《AI赋能课堂——学生端与教师大屏数据同步》。

这场直播很多卖课的专家都在看，通常我们直播完，第二天就陆续就有人把我们直播的课翻录成课来卖了，那今天索性我就直接把直播的内容用图文的方式使用分享出来。

原理

大家让AI写的单HTML都是独立的，特别是很多人是直接在本地双击后用浏览器打开；在不同的设备中打开，数据是不能直接互通的。

所以，传统的方式，要想使多个不同的设备、不同的页面，实现数据互通，需要下面的流程：

但绝大部分人，都不是程序员出身，根本都没机会去接触到服务器，这门槛也太高了。

况且，我相信绝大部分人不舍得在这件事上花钱。

于是，在直播中，我给大家介绍了一个全新的平台，但这个平台不需要你去进行复杂的操作，只需要操作3个地方就可以了。

核心工具

我们就是要利用一个叫SupaBase的平台，AI写的HTML页面，可以直接往里面读写数据。

进入平台后，创建一个项目（免费的）。

在API Docs里面复制BaseUrl，在Project Setting中复制 anon public key，这两个东西是网页存取数据的关键，复制出来备用，等会要提交给AI。

（这个平台是英文的，但这些英文都是和计算机相关的，很好认）

输入数据的网页

选择你顺手的AI平台，直接告诉AI你想实现的目的：

写一个HTML网页，具体的功能如下：

1.界面上有2个框，用户输入数据后，点击提交按钮，会把数据提交到supabase中

2.supabase的参数如下：

baseUrl：你复制的baseUrl

anon publickey:你复制的key

3.请根据我的需求，帮我设计数据库

执行完这个,AI应该会给你一个HTML网页和一段这样的代码：

CREATE TABLE numeric_data (
  id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  value1 NUMERIC NOT NULL,
  value2 NUMERIC NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

把它复制到SupaBase平台的 SQL Editor中执行，这就完成了所有你需要在SupaBase平台的操作，不管你看它后台多复杂，都不用怕了。

现在在浏览器访问AI帮你生成的那个网页，应该就能正常向SupaBase中写数据了。

显示数据的网页

接下来，需要写另一个网页，用来显示数据库中的数据。

用类似下面这样的提示词：

继续帮我写另一个网页，用来实时读取刚刚那个网页写入的数据；这个网页是给小朋友看的，请尽量使界面变得卡通、可爱，颜色要适宜……

正常情况下,你就得到了一个可以实时从SupaBase中得到数据的网页.

在课堂在展示网页

在大屏中放映的PPT中，你可以利用不坑盒子把第二个网页插入到PPT中。上课的时候就不用切到浏览器上展示网页了。

学生那边那个网页，你可以把网页生成为二维码，然后让学生扫码访问。

直播回放

这篇文章我写一半的时候，发现用纯文字来学习这个头越来越绕，可能很多老师是没有耐心看下去的。

建议大家还是查看直播回放，这次直播是专场，没有涉及到其他零散的东西。

直播中详细给大家讲解了：

• 工具的下载、安装
• 项目的创建
• 和AI的对话
• 遇到问题的解决
• 如何只显示当堂课才产生的数据

这场直播可以切片成一套完整的课，可能他们翻录的都要卖好几百呢！

看看，别的老师现场跟着做都已经成功了。