零基础,用cursor手搓云端APP-夜雨聆风

零基础,用cursor手搓云端APP

核心架构

Cursor (AI代码) + Supabase (云端数据库) + Vercel (全球发布)

整体流程

第一步：通过 Cursor 创建 UI

说明产品功能、风格及要求，cursor AI 自动生成代码，新建 Next.js 项目。

第二步：在 Supabase 创建数据库

第三步：创建连接

在 Cursor 里新建 .env.local 存入钥匙，让 AI 写一个 supabase.ts 连接文件。指令“把保存按钮改成提交到 Supabase，列表改为从 Supabase 读取。”

第四步：推送 GitHub (Sync)

利用 Git 命令把代码推送到 GitHub，这是为了让 Vercel 能抓取到自己写的的代码。

第五步：Vercel 部署与环境变量 (Deploy)

在 Vercel 导入 GitHub 仓库。因为代码库里没有钥匙（为了安全），你必须在 Vercel 的环境变量设置里，手动把 URL 和 Key 再贴一次。点击 Deploy，拿到的那个网址就是你的专属 App。

把网页伪装成APP

手机浏览器打开网址 -> 点击“分享”按钮 -> “添加到主屏幕”。

图片由豆包生成，仅供内容展示

零基础,用cursor手搓云端APP