应用制作：数据鲜活的服务

晚上 11 点，美容工作室老板的手机轻轻响了一下。是明天下午 2 点有预约进来的通知。客人在应用里看了美容作品图，挑了空着的时段完成预约，这条记录自动累积到了管理员仪表盘。老板做的，只是早上按了一下确认按钮。

这门课要做的正是这个应用。不是只会展示的页面，而是接预约、记住客人、给老板递上管理页面的服务。此前的课程教的是怎么做招牌，现在要盖整间店。

别被高级课程这个名字吓到。难的部分 AI 来做，你只需要决定要盖一间什么样的店。

区分网页和应用的标准不是华丽程度，而是记忆力。页面对谁都展示同样的内容，访客离开后什么也不留下。应用不同：客人预约了，预约就留下来；再来时认得出他；累积的记录填满管理页面。

所以应用需要页面没有的三个部件：保管数据的仓库（DB）、区分人的登录，以及随状态变化的页面。这三个部件就是这门课的主角。

拿不准你的想法该不该做成应用，就这样问：“访客留下的东西，明天还得在吗？”是的话，就是应用。

好，动第一锹土。点下方的“在工作室试试”按钮，美容工作室预约应用的骨架提示词已经填好：时段槽位、顾客登录、管理预约的管理员仪表盘。这是一张把应用三大部件全部写明的点单。

确认构建类型是应用再发送。这是在练习要拿给客人的东西，构建模式建议选深度构建。你会亲眼看到产品规格书把页面动线和数据结构都定好。

错了也没关系，重新生成是免费的。应用构建部件多，第一版不完美反而正常，这门课整个就是打磨它的过程。

应用里会进来两种人：客人和老板。把两条动线分开画，是页面动线设计的核心。客人的动线是“看美容作品 → 选时段 → 登录 → 确认预约 → 查看我的预约”。老板的动线是“管理员登录 → 今日预约列表 → 确认或取消 → 管理时段”。

把这条动线连箭头照着说进提示词或蓝图反馈里，AI 就会把页面搭得很准。关于顺序的要求尤其值钱，比如“客人不登录也能逛，只在确认预约前才要求登录”。

为什么动线要先行？因为单个页面的设计好改，动线拧了的应用得从骨架重盖。

客人按下预约按钮的那一刻，那条预约去了哪里？只在屏幕上的话，一次刷新就蒸发。所以应用需要冰箱：数据库（DB），一个放进去的东西明天打开还原样在的仓库。

冰箱里按格整理。客人格放姓名和联系方式，预约格放日期、时段和负责人，服务格放项目和价格。分好格，就能只挑想要的拿出来，比如“本周全部预约”或“熟客名单”。

幸运的是，分格设计 AI 很拿手。还记得深度构建的规格书里有个叫数据模型的板块吧。你只要盯住“必须保存什么”。预约应用的话，客人、预约、服务这三样是一定要存的。

那台冰箱记在谁的名下？这就是 BYO 的问题意识。VibeCampus 支持把你自己的 Supabase 直接连进工作室。客人名单、预约记录这些生意的核心资产，从一开始就堆在你名下的仓库里。

连接不难。注册 Supabase 并建好项目，会拿到地址（URL）和钥匙（密钥），把这两个值填进工作室的连接设置就完了。像下面的示例那样，它们被保管在名为环境变量的保险柜里，不会直接写进代码。

为什么要做到这个地步？因为数据的名义就是生意的独立性。堆在自己仓库里的数据，随时可以整体搬家。用下面四张卡片，把这一步的术语彻底抓牢再走。

$# .env — your own Supabase, connected in the studio (BYO)
$SUPABASE_URL=https://xxxx.supabase.co
$SUPABASE_ANON_KEY=eyJhbGciOi...

预约开始被保存后，下一个问题马上就来：这条预约是谁的？所以需要登录。登录是门卫，让每位客人只看到自己的预约，管理页面只对老板开放。

向工作室提要求时，最好定好级别。想轻量就用邮箱登录，想降低门槛就用社交登录，管理员则单独设权限。一句“客人用社交登录，管理员用单独的管理员账号分开”，AI 就会把门和锁一起装好。

应用的数据质量由表单决定。客人在电话号码栏里填“请发短信”，或者约到已经过去的日期，这种事一定会发生。输入校验就是把这些怪值在保存之前挡回门口的装置。

提要求的要领是把规则列出来：“电话号码只允许数字，预约日期只允许今天以后，姓名必填”。还要顺便照顾被拒绝时的提示文案。比起“输入有误”，“电话号码请只输入数字”更不容易赶走客人。

客人那侧的页面是门店，管理页面就是驾驶舱。今日预约列表、确认和取消按钮、时段的开与关、简单统计。这是老板每天早上打开的页面，一目了然比华丽更是头等美德。

提要求时以老板的一天为基准来说：“早上打开就能按时间顺序看到今天的预约，每条预约旁边有确认、取消按钮，顶部有本周预约数摘要”。装着真实运营动线的要求，才能做出有用的驾驶舱。

预约挂上支付，爽约会变少，营收会提前。在工作室，可以先用演示模式搭支付流程：金额展示、支付按钮、完成页面，一切和真实一模一样地运作，只是真钱不流动。

为什么从演示开始？因为支付九成在于流程设计。什么时候要求支付（确认预约前？到店之后？）、取消了怎么办，这些规则在演示里充分打磨，等支付服务商的对接准备好了再切真支付，才是安全的顺序。

客人是用手机来用这个应用的。打开手机视图的 iPhone 和 Galaxy 两个边框，确认时段按钮够不够拇指按、到预约为止的滚动长不长。表单输入在手机上尤其容易变成地狱，所以最好的检查就是亲自在手机边框里完整走一单预约。

再送你一条可以转告客人的妙招：用浏览器的添加到主屏幕功能，你的应用就会以图标的形式落在手机桌面上。不经过应用商店，也能像装了 App 一样被使用。对熟客，把这个方法写进引导文案也很好。

上线的应用会一直生长。客人有了新要求，项目换了，又需要多一个页面。在 VibeCampus 养应用的路有三条。第一，持续改进对话：动嘴请求的日常修改，它最快。第二，点击编辑：文案和设计的微调，亲手直接改。第三，交接包：把代码整体下载，交给外部开发工具或开发者接着做，这是大工程用的路。

大多数日子，前两条就够了。第三条路的存在之所以重要，是因为安心。任何时刻，你的应用都不会被锁死在这个平台里。

交接包是你作品的搬家行李。下载后，一个 zip 里装着完成的代码、写明运行和托管方法的 README，还有交给 AI 开发工具的交接文档 AGENTS.md。

解开这个 zip，用 Claude Code 或 Cursor 这类工具打开，在外面也能原样接着开发；哪天雇了开发者，这个包就是一整套交接文件。表单和会员功能也被准备成持续可用的状态，搬家后第一天就能开张。

这个功能不是为了让你走，而是为了让你确信随时能走，从而安心留下。你生意的任何资产都不会成为人质。这是这个平台的承诺。

最后的实战。点下方的“在工作室试试”按钮，习惯打卡应用的提示词已经填好：每日清单、统计连续达成的连击计数器、每周进度图表。这次换一个和美容工作室完全不同的主题，检验学到的东西是不是真本事。

核心关卡只有一个：数据是不是真的活着。打个卡，刷新，然后用你自己的眼睛确认它还在。

开始这门课时你是做页面的人，现在你是盖服务的人。设计动线、把数据记在自己名下、立门卫、装驾驶舱、定支付的顺序。这才是“做一个应用”这句话的真正含义。

这里学到的骨架可以移植到任何行业。美容工作室变美发店、习惯打卡器变读书会签到簿，差别只是提示词里的几个词。接下来，轮到你自己的想法了。