如何用 Claude Code 从零搭建带登录和数据库的完整应用

以下是视频口播的自动转写，可能有错字。

我将向你完整演示如何用 AI 构建一个完整的应用，即使你对代码一无所知。登录、数据库、照片、发票，以及客户在手机上打开的真实链接。

这一集故意讲得更长，因为我要给你完整的全貌：前端、后端、登录到底怎么运作，以及它如何上线。

这就是那个应用——Birchwell Kitchens 的客户门户，这是一家位于罗利（Raleigh）的厨房改造公司。公司是虚构的，应用是真实的。

客户总是打电话给老板 Dana，问他们的厨房进展到哪了。所以我们跟随其中一位客户 Priya。她在手机上打开一个链接，登录，然后看到她的阶段、她的照片，以及她欠多少钱。

每个应用都有四个部分：界面、后端、数据库和托管。你会逐一认识它们。第 1 步，你的工作台。

下载 VS Code，一个用于处理项目文件的免费应用。打开扩展，搜索 Claude Code，点击安装，然后点击火花图标并用付费的 Claude 套餐登录。

新建一个名为 birchwell portal 的空文件夹并打开它。那个文件夹就是应用。Claude Code 会在里面写入文件并为你运行它们。

第 2 步，用平实的英语描述这个应用。它是给谁用的，解决什么问题。客户会看到什么：他们的阶段、完工日期、最新的施工队备注。

老板会看到什么：每个项目，以及更改阶段的方式；还有它必须记住什么：添加三行技术说明。你可以复制“用 Next 构建它”。

js，它由 Vercel 制作，我们之后会在那里托管它。现在先用本地数据库。所以暂时不需要注册任何东西，以及使用哈希密码的邮箱登录。

你会在第 5 步看到那是什么意思，发送它，Claude Code 就会构建整个东西。第 3 步，界面。开发者把这叫做前端。

它就是一切。Priya 看到并点击的东西。让 Claude Code 启动应用，它会给你一个地址。localhost:3417。

Localhost 指的是这台电脑，那个地址指回你自己的笔记本电脑。所以只有你能打开它，把它发给 Priya，在她的手机上，localhost 指的是她的手机。

那里什么都没有。目前这没问题。像客户一样在手机尺寸下点击浏览，并指出哪里不对。第 4 步，数据库。登录是 Dana 打开的，Priya 的项目，并添加一条施工队备注：台面模板，周一上午 9 点。刷新页面，还在那里。合上笔记本电脑，明天打开，还在那里。

负责记忆的部分是数据库。想象电子表格里的标签页：用户、项目、施工队备注、发票、照片。现在，

所有这些都存在于你笔记本电脑上的一个文件里。记住这一点，第 7 步会用到。第 5 步，登录。Priya 输入她的密码并点击登录。

那次点击会传到后端，也就是她永远看不到的部分。它运行在托管该应用的任何电脑上，而现在，那就是你的笔记本电脑。

它决定密码是否正确，以及她可以看到什么。她的密码从未被保存。当她的账户被创建时，密码经过了一个叫做哈希的单向扰乱器，只有扰乱后的结果进入了数据库。

没有人能把它还原，包括你。登录时，后端用同样的方式扰乱她输入的内容并进行比较。匹配，她就进去了。

然后它给她的手机一张通行证，一个叫做会话 cookie 的长随机代码。她的手机在每次点击时都会出示它，所以她不必在每个页面重新输入密码。

页面脚本无法读取它，而且它会在 14 天后过期。第 6 步，每个应用都需要的一条规则。Priya 看到她的项目，永远看不到 Marcus 的。

看她的地址栏。上面写着 /project，没有可替换的项目编号。当页面加载时，后端会问：“这是谁的通行证？”

' Priya 的。所以它会拉取客户是 Priya 的项目。每张照片都要经过同样的检查。然后，证明它。让 Claude Code 写一个测试，以 Priya 的身份登录，并尝试打开 Marcus 的项目、他的照片、他的发票。

25 项检查，全部通过。第 7 步，把它从你的笔记本电脑上搬走。现在这个应用只在你笔记本电脑开着时运行，而且只有你能打开它。

所以它要搬到一家托管公司，一台全天开着的电脑，带一个任何人都能打开的地址。我们将使用 Vercel。但先有一个问题。

Vercel 在不为你保留文件的电脑上运行你的后端。应用文件夹在那里是只读的，所以数据库文件没法一起带过去。

照片也一样。所以记忆要搬到线上，放到 Supabase。它给你一个真正的数据库，叫 Postgres，外加用于照片的私有存储。

注册一个免费的 Supabase 账户，点击新建项目。给它起个名字，设一个强密码。然后点击连接，复制名为 transaction pooler 的连接字符串。

那是为 Vercel 这类托管商准备的。那个字符串是一把钥匙，一个长密码，让你的应用进入某项服务。钥匙放在一个私有文件里，env。

本地。你的应用读取它，它永远不会随你的代码一起上传。然后给 Claude Code 发一条消息：把数据库搬到我的 Supabase，把照片搬进一个私有存储桶。

只有后端与数据库通信。保持登录和那一条规则不变，再运行一次之前的测试。第 8 步，GitHub，它把你的代码连同你保存的每个版本一起存到线上。

告诉 Claude Code，把这个项目作为私有仓库放到我的 GitHub 上。你在浏览器里批准一次，私有是免费的，只有你能看到，你的钥匙文件留在你的笔记本电脑上。

第 9 步，Vercel，用你的 GitHub 账户注册，点击新建项目，选择 birchwell portal，在你点击部署之前，打开环境变量。

那是 Vercel 对你钥匙文件的副本，因为线上应用也需要这些钥匙。把它们粘贴进去，或者导入文件，部署，你就得到一个以 vercel.app 结尾的真实链接。

那是陌生人从此可以打开的第一个地址。你让 Claude Code 做一处修改，告诉它推送，Vercel 就会自己把它上线。

如果你在 Vercel 里改了钥匙，要重新部署，否则应用会一直用旧的。现在，诚实的成本：Vercel 的免费方案是给个人项目用的。

只有商业门户是商业用途，所以那是 Pro，每月二十美元。Supabase 的免费方案在安静一周后会暂停。

所以真正的企业在那里也要升级到 Pro，每月二十五美元起。第 10 步，你自己的名字。在 Vercel 中，打开设置，然后是域名，添加 portal。

birchwellkitchens.com。它会给你显示一条记录。把它粘贴到你购买域名处的 DNS 设置里，然后等待，直到 Vercel 说它有效。

一个 .com 每年大约 11 美元起。Vercel 会自己加上那把锁，所以 Priya 的密码只会以加密方式传输。现在像 Priya 那样测试它。

在你的手机上，打开链接并登录。7 个阶段中的第 4 个，橱柜。她的照片，最新的在前。一张未付的发票。那个“立即支付”按钮就是 Stripe 接入的地方，再多一个账户，再多一把钥匙。

在真实客户拿到链接之前，把 Cloudflare 的安全审计技能加到 Claude Code，然后说，对这个代码库做安全审计。

它会像一队安全专家那样审查你的代码，并写出薄弱点。一旦你了解了这四个部分，添加更多就只是一条消息。

Dana 过去每周五要写六份客户更新。现在，一键就能根据那一周的笔记和照片起草全部六份，而且在她批准之前什么都不会发出去。

这就是整个应用。预点击屏幕、一个只向她展示她的厨房的后端、一个会记住数据的数据库，以及为她提供一个链接的托管服务。

我在我的社区里有一整套关于这个的课程，教你从零开始用 AI 构建应用。如果你感兴趣，链接在我的个人资料里。