朋友圈许愿已经 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匹形态各异的骏马在草原上奔跑
✅ 动态效果:风吹草地、云朵飘动、马匹奔跑
✅ 驯服许愿:点击马匹即可驯服并填写心愿
✅ 多人实时:一人驯服,全员可见,数据云端同步
✅ 手机适配:支持双指缩放、拖拽移动