比朋友圈高级 10 倍!AiPy 生成可多人互动的驯马许愿网页

21 阅读2分钟

朋友圈许愿已经 out 了!今年我玩了个超有质感的 —— 用 AiPy 做了个「草原驯马许愿牧场」,驯服一匹马,许下一个愿,多人实时同步,每一份心愿都有具象的美好,比发圈高级 10 倍不止~

🐴 一句话,生成一个完整项目

我打开AiPy,输入了这样一段话:

"请帮我创建一个可分享的多人在线草原牧场网页,核心概念是'2026草原驯马许愿牧场'。草原上要有万马奔腾的效果,马的颜色要丰富多彩,用户可以点击驯服马匹并填写心愿,使用Supabase实现多人实时同步,部署到Netlify生成分享链接。"

然后AiPy就开始疯狂输出!它不仅生成了完整的HTML代码,还画出了精美的马匹、实现了风吹草地的动态效果、设计了驯服许愿的交互流程...全程我只需要看着它干活!

🔧 部署三部曲,小白也能搞定

代码生成好了,接下来就是部署。AiPy一步步教我操作,全程保姆级教程:

第一步:创建Supabase项目

Supabase是一个免费的云数据库服务,用来存储用户驯服的马匹数据。

打开 supabase.com,注册登录后点击"New Project"

填写项目名称,比如"horse-ranch",设置数据库密码

选择离你最近的区域,点击"Create new project"

等待约2分钟,项目创建完成

第二步:获取API密钥

项目创建好后,需要获取两个关键信息:

在项目页面点击左侧 Settings ⚙️ → API

复制 Project URL(类似 xxx.supabase.co)

复制 anon public key(一长串以 eyJ 开头的字符串)

💡 小贴士:这两个信息要告诉AiPy,它会自动帮你更新到代码里!

第三步:创建数据表

接下来需要在Supabase中创建一个数据表,用来存储驯服记录:

  • 点击左侧 SQL Editor
  • 点击"New query",粘贴AiPy提供的SQL代码
  • 点击 Run 执行

CREATE TABLE tamed_horses (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
horse_id TEXT UNIQUE NOT NULL,
owner_name TEXT NOT NULL,
wish TEXT NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

第四步:部署到Netlify

最后一步,把网页部署到Netlify,生成可分享的链接:

打开 app.netlify.com/drop

把AiPy生成的 horse 文件夹直接拖上去

等待几秒钟,自动生成分享链接!

🎉 成果展示

部署完成后,我得到了一个这样的网页:

exquisite-stardust-ac0342.netlify.app/   欢迎来我的牧场,驯服马儿

✅ 万马奔腾:600匹形态各异的骏马在草原上奔跑

✅ 动态效果:风吹草地、云朵飘动、马匹奔跑

✅ 驯服许愿:点击马匹即可驯服并填写心愿

✅ 多人实时:一人驯服,全员可见,数据云端同步

✅ 手机适配:支持双指缩放、拖拽移动