乐于分享
好东西不私藏

想vibe coding自己的app,这些内容你得了解?

想vibe coding自己的app,这些内容你得了解?

上周有个朋友兴冲冲地跟我说他想用 AI 做个 app,问我要不要一起。
我说好啊,你先跟我说说你想做什么。
他说:我想做一个产品管理的 app,用户可以上传图片,AI 自动识别产品规格,然后自动生成说明书……
我问他:那你打算用什么技术栈?
他愣了大概五秒钟,说:技术栈是什么?
我意识到——很多教程默认你已经是”圈内人”,默认你知道前端是什么、后端怎么通信、服务器和域名有什么关系。但对刚入门的朋友来说,满屏都是生词,还没开始动手就已经被劝退了。
所以这篇文章只干一件事:用大白话把 vibe coding 前你必须搞懂的名词讲清楚。
不是让你成为工程师,是让你在动手之前,先有一张地图。

第一步:让东西能看见、能点

这叫前端
你可以理解成——店面的门头和菜单。用户打开你的 app,看到的所有东西:页面长什么样、按钮在哪、输入框怎么填、加载的时候转圈圈……这些都属于前端。
很多人以为前端就是”做好看”,其实不是。前端的核心任务是把交互逻辑讲清楚——让用户知道点哪里、下一步是什么、现在处于什么状态。
举个例子,用户按了一个按钮,前端要告诉用户”我在处理了”(loading 状态),处理完了要展示结果(成功/失败),没反应要提示”网络好像不太对”。
你的 app 长什么样、怎么跟用户说话、用户的每一步操作看到什么——这些都是前端要解决的。

第二步:先跑通最短路径,别一上来搭数据库

这是新手最容易踩的坑之一:功能还没跑通,就急着建数据库。
我见过太多人还没搞清楚”用户上传图片之后 AI 返回结果”这个流程怎么跑,就去研究怎么搭数据库、怎么设计表结构。结果折腾了两周,发现整个流程走不通,数据库白建了。
正确做法是:先用假数据把最短路径跑通。
所谓假数据,就是你直接在代码里写死一些示例内容,假装用户已经上传了图片、假装 AI 已经返回了结果——先让整个流程跑起来,看到”做完了是什么样子”。
这一步叫MVP(最小可行产品)思维:先让产品能跑,再用真的数据和逻辑替换假的。
数据库是后面的事。

第三步:让东西真的能干活

这叫后端
还是用开店的比喻——前端是门头,负责接待顾客、接收订单。但顾客点了单,总得有人真的去做这个菜吧?
后端就是那个后厨和店员调度
用户按下一个按钮,前端把请求发过去,后端开始干活:调用 AI 模型、处理数据、判断逻辑、返回结果。前端负责”接单”,后端负责”做菜”。
举几个具体例子:
用户输入一段文字,后端调用 GPT 返回回复
用户上传一张图,后端调用图像识别模型提取信息
用户点下单,后端计算价格、查库存、生成订单
后端通常不直接面对用户,但它决定了你的产品能做什么、响应速度怎么样、处理逻辑对不对。

第四步:让东西能记住

这叫数据库
人有记忆,产品也需要记忆——用户注册了什么账号、上次输入了什么、聊天记录在哪、有没有保存的草稿……这些都需要数据库来存。
你可以理解成仓库加账本:有人来取货,你知道放在哪;有人来查账,你知道记了哪些。
新手最容易犯的错我再说一遍:流程没跑通之前,不要急着上数据库。
什么时候该考虑数据库?
当你发现”每次重新打开 app,之前的东西都没了”开始变成问题的时候。当你知道哪些数据需要”记住”、哪些其实不需要的时候,再去设计数据库也来得及。

第五步:让别人也能用到

这一步涉及三个最容易搞混的词:服务器、部署、域名
我用一个铺位的比喻来讲:
服务器是你对外营业的铺位。你的电脑跑着程序,那只是你一个人能用;别人要能访问,得把程序跑在一台”对外开放的电脑”上,这台电脑就是服务器。
部署就是开张营业。你在本地写好代码,然后把它复制到服务器上,启动起来,让外面的人能访问——这个过程叫部署。可以理解成你租好了铺位、装修好了、厨师就位了,按下开关就可以开门。
域名是好记的门牌号。比如 www.example.com 这样的东西。你买了域名,不代表你的 app 上线了——得先把域名指向你的服务器,人家访问域名才能到达你的铺位。
常见误区:买了域名 = 上线了。不是的。买了域名只是你有了一个好记的名字,得先部署好、服务器跑起来,域名解析生效,别人才能访问。

第六步:让东西出问题能查

这主要是两件事:环境变量/密钥日志
环境变量 / 密钥
你调用 AI 的 API key、连接数据库的密码、各种配置信息——这些不能直接写在代码里。
为什么?
因为代码可能会上传到 GitHub(公开仓库),密钥一旦泄露,别人可以直接用你的账号跑 AI、消耗你的额度。轻则账单爆炸,重则账号被封。
正确做法是:把这些敏感信息单独放在一个配置文件里,代码运行时读取它。部署到服务器的时候,在服务器的环境里单独配置。
本地能跑、上线就崩——大部分原因是密钥没配对。
日志
出问题的时候,日志就是你的监控录像
用户说”我点了没反应”,你打开日志,看到最后一次请求是 2024-03-15 14:32:15,请求参数是xxx,响应是500。你就有方向去查。
没有日志,你和 AI 只能一起猜:是不是网络问题?是不是参数传错了?是不是模型崩了?
猜来猜去浪费时间。有日志,一目了然。

正确顺序是什么

来一个完整的清单:
  1. 先做好前端页面和交互——让它能点、能看、能反馈
  2. 用假数据跑通最短路径——看到”做完了是什么样”
  3. 再补后端逻辑——让功能真的能工作
  4. 再决定哪些需要数据库记住——流程通了再优化存储
  5. 部署出去让别人能用——先跑起来再说
  6. 最后加域名、日志、密钥——这些是”稳固”工作,不是”开始”工作
记住一句话:做产品先完成后完美

写在最后

AI 确实让做产品变得很快。你可能用一下午就搞定一个 app 的前端,再用一晚上接上后端。
但如果你没有搞清楚前端、后端、数据库、服务器分别负责什么——你大概率会在做到一半的时候发现”这个功能好像加不上去”,然后从头返工。
AI 让你速度快,但地图没认清,返工也会很快。
这篇文章就是帮你把地图看清楚。
下一次,我们聊点更具体的——怎么用 AI 真正从零开始搭一个能跑的小产品。敬请期待。

有问题或者想看什么主题,欢迎留言。