用AI编码智能体构建全栈应用

如果你一直在关注现代Web开发的讨论，可能已经注意到这个领域正在以比我们能跟上的更快的速度变化。每天都有新的框架、新的数据库和新的开发者友好型应用程序被宣布。

推动这种新软件发布速度的力量是什么？

编码代理。

在过去两年中，我构建了数十个全栈应用程序，并尝试了每一个经过我路径的闪亮新AI编码工具，但我仍然认为理解任何技术的最佳方法是用它来构建真实的东西。

所以这就是我们今天要做的。

我将带你一步步地构建一个完整的全栈应用程序，前端使用SvelteKit，后端使用Supabase进行身份验证和数据库。

但这里有个转折——这不仅仅是一个教程，让你复制粘贴代码（至少不是全部），然后希望它能正常工作。我们将以代理的方式构建这个应用——利用Amp，一个编码代理来处理繁重的工作，而我们则专注于架构、用户体验和业务逻辑。

坦白说——我在Sourcegraph工作，这家公司开发了Amp，但作为一个在周末花费太多时间构建“再一个应用想法”的人，我可以告诉你，这种组合（Sveltekit+ Supabase与Amp）彻底改变了我处理全栈开发的方式。

1、为什么选择这个栈？

你可能会问为什么我特别选择了SvelteKit、Supabase和Amp，让我先解释一下原因：

多年来，我一直是一个NextJS的粉丝（仍然是用户），但当我转到SvelteKit时，我意识到这个框架有多简单、无杂乱且精致。我发现Sveletkit是一个现代、高性能的前端框架，实际上很有趣。与其他一些框架不同，开发人员体验非常棒，生成的应用程序速度快且轻量级。

对于后端，我现在的主要选择是Supabase，因为它提供了一个完整的后端即服务，包括PostgreSQL、实时订阅、身份验证和文件存储。它就像Firebase，但有一个真正的数据库。

Amp是我选择的代理编码，这也是编程再次变得有趣的地方。而不是手动编写每一行代码，我们将使用这个编码代理来处理实现细节，而我们则专注于大局。此外，我喜欢Amp是因为结果的质量非常高。最后，当你准备好升级时，你可以并行运行多个Amp CLI代理同时做几件事。

使用这个栈，我以前需要几周时间才能构建的应用程序，现在只需几天就能完成。如果你不相信我，可以查看https://multimeter.dev，这是一个社交媒体监控和情感分析应用，用于Amp。它是用我在这里推崇的相同栈在一个周末内构建的。

让我向你展示如何做到这一点。

2、我们要做什么

在我们深入代码之前，让我们谈谈我们实际上要创建什么。我相信教程最好是在你实际使用的东西上进行，因此让我们构建TaskFlow——一个超越你典型的待办事项列表的现代任务管理应用程序。把它想象成Notion和Linear的混合体，专为需要超出复选框的开发人员和创意专业人士设计。

在开始使用任何工具之前，首先让我们定义这个应用的核心功能。这通常是我会花很多时间思考和分解整体架构和实现任务的步骤，我可以跟踪整个构建过程的完整控制。

3、核心功能

对于TaskFlow，我们可以从以下核心功能开始。

1. 用户认证： 安全的登录和注册，带电子邮件验证的用户

2. 项目管理： 创建和组织项目，有不同视图

3. 任务管理： 支持Markdown的丰富任务创建，截止日期和优先级

4. 实时协作： 当团队成员进行更改时，实时更新

5. 活动摘要： 跟踪所有项目中的更改和更新

6. 暗模式： 因为其他开发者会因为我们的其他事情而失去对我们的尊重

4、设置开发环境

让我们开始设置一切。我假设你已经安装了Node.js（如果没有，请从nodejs.org获取LTS版本）。

提示 —— 如果你发现自己使用多个node.js版本，考虑使用nvm 。

步骤1：项目初始化

首先，让我们创建我们的SvelteKit项目。打开终端并运行以下命令：

npx sv create taskflow  
cd taskflow  
pnpm install

当提示时，选择：

• Skeleton minimal — 我们将从头开始构建
• TypeScript - 相信我，现在这是一个另一个话题，如果我们进入为什么
• ESLint 和 Prettier - 用于代码质量
• pnpm - 与npm相比更快的包管理器

步骤2：安装额外依赖项

我们需要一些更多的包来构建我们的全栈应用程序：

pnpm install @supabase/supabase-js @supabase/auth-ui-svelte  
pnpm install lucide-svelte date-fns  
pnpm install @tailwindcss

步骤3：Tailwind CSS设置

由于我们想要一个看起来不错而不需要花数小时在CSS上的应用程序，让我们设置Tailwind：

npx svelte-add@latest tailwindcss  
[选择typography插件作为选项]  
pnpm install

步骤4：Supabase项目设置

前往Supabase并创建一个新项目。选择一个名称（我将使用“taskflow-demo”），设置一个强数据库密码，并选择一个靠近你的区域。

一旦你的项目准备好了，从连接设置中获取你的项目URL和匿名密钥。我们稍后需要这些。

步骤5：环境配置

在项目根目录中创建一个.env.local文件，并添加下面的变量，使用你从Supabase项目设置中获取的值：

PUBLIC_SUPABASE_URL=your_supabase_project_url  
PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

好了。此时，如果你输入

pnpm run dev

你应该会在https://localhost:5173看到我们应用的基本页面运行。

5、数据库设计：基础

在我们开始构建功能之前，我们需要设计我们的数据库模式。这是拥有清晰的应用程序思维模型时付出回报的地方。

让我们思考我们需要什么：

用户：这将由Supabase认证处理，但我们将会扩展一个profiles表。这主要是为了存储和读取使用我们应用的用户的信息。

项目：组织工作的顶级容器。

任务：项目内的单个工作项。

评论：关于任务的讨论。

附件：与任务相关的文件。

活动：所有更改的审计追踪。

6、数据库模式

这是Amp变得极其有用的地方。而不是手动编写SQL迁移，让我们描述我们想要的内容，让AI处理实现细节。

首先，前往https://ampcode.com并注册。如果你是新手，你应该获得$10的免费信用额度。接下来，在VS code扩展市场中找到Amp并安装和配置它（或者在你注册后直接通过Amp的主页链接）。

在Amp中创建一个新的线程（Cmd/Ctrl + L），并输入类似下面的提示。记住，细节越具体，输出越好，因为你不会让代理做出自己的假设。

我的提示： 给我创建一个数据库模式的SQL，我计划为我们的TaskFlow应用程序创建。以下是我计划捕获并用于我们应用的一些细节 用户：由Supabase认证处理，但我们将在profiles表中扩展。这主要是为了存储和读取使用我们应用的用户的信息。 项目：组织工作的顶级容器 任务：项目内的单个工作项 评论：关于任务的讨论 附件：与任务相关的文件 活动：所有更改的审计追踪 我还希望你为这些表提供行级安全策略，并在表变大时添加索引以提高检索性能

有了上面的提示，我得到了带有SQL的响应，并且Amp还将它保存为项目中的SQL文件。这在后续步骤中很方便，以便Amp记住我们的模式是什么样子的。在Supabase的SQL编辑器中运行此SQL，如果遇到问题，复制错误并让Amp修复它，直到SQL没有错误，表和策略已创建。

构建认证系统

现在让我们构建我们的认证系统。这是SvelteKit的简洁性真正闪耀的地方，与其他框架相比。但是，我们希望Amp来做繁重的工作，所以我们让它在新线程中为我们构建（Cmd + L）。顺便说一句，保持Amp对话线程按功能和修复组织起来是个好主意，这样以后如果需要或新成员加入并熟悉代码库时，就容易搜索和回顾这些内容。

这是我的提示：
使用我的Supabase实例为我的应用创建认证。引导我完成在Supabase中启用认证所需的步骤（我只需要电子邮件和密码），我需要在.env文件中放置什么，以及创建任何中间件以及我可以测试的注册和登录页面。将注册和登录页面分别放在/signup和/sign-in路由上。

现在是时候谈论维护检查点。在Amp中，有办法撤销更改（悬停在聊天窗口左下角的文件更改标签上以查看菜单，如果需要撤销，点击撤销）。然而，我更喜欢在Git中管理所有更改，这样我可以控制何时发布功能，并在需要时在Git中撤销，而不是寻找线程并回到单个文件更改。

如果你还没有提交你的更改，请将它们提交并推送到你的新仓库，并在每个线程中开始注意更改的文件，然后再提交。

此时，当我将更改提交到远程仓库时，我会前往Netlify，将我的仓库连接到一个新项目并部署我的项目。这样，你就有了完整的“提交即部署”管道随时准备就绪，之后当应用变得更复杂时，你不会与部署问题作斗争。

这是我现在的注册页面的样子。

你可以测试它，并让Amp将成功的注册和登录重定向回主页。

7、创建仪表板布局

现在让我们构建主应用程序布局。这是我们大部分时间会花的地方，因此它必须既实用又易于使用。

主布局组件

这是使用Amp加速开发的地方。而不是手动样式化每个组件并处理响应式设计，我们可以描述我们想要的内容，让AI实现它。你也可以上传草图或应用程序的截图给Amp，并要求它遵循你遵守的设计原则，或详细描述功能。

这是我提示：

为整个应用构建一个布局，应包含以下内容：

• 响应式侧边栏导航
• 用户资料部分
• 移动友好的汉堡菜单
• 清洁、现代的设计，适用于各种设备
• 返回上一页和登录首页的面包屑导航
  一旦你有了这个可重用的组件，将其应用于主页，这样我可以可视化它，并进一步迭代。

这是该提示的结果

你会注意到一些奇怪的地方——例如，有两个登录按钮出现在奇怪的地方。这没关系。把Amp看作是一个遵循你指示的初级工程师。继续迭代你的需求（尽可能具体）直到你满意为止。

构建项目管理系统

现在让我们实现应用的一个核心功能。我们将从项目管理开始，因为项目是我们的任务的顶级容器。像往常一样，我会将所有更改提交到我的仓库，然后开始一个新线程。如果你想保留前一个线程的上下文，可以悬停在Amp输入框的右下角并点击“New Thread with Summary”

这是我为项目管理功能提供的提示，当然，根据你的需求随意调整。

我的提示：
让我们构建项目管理功能。
首先，构建项目存储并处理项目对象的CRUD操作。确保查看我们保存在应用中的SQL文件中的数据库模式。使用以下指南来构建此功能。
项目存储应处理项目的所有CRUD操作，包括实时更新和本地状态管理。将其构建为API端点，使用可重用的库来调用数据库的SQL。项目存储和API应具有以下功能：

• 加载当前用户的全部项目
• 创建新项目并进行验证
• 更新现有项目
• 删除项目并确认
• 处理乐观更新以改善用户体验
  一旦完成，给我curl命令来测试这些API。我想首先使用post创建一个项目，读取用户的行，更新特定项目的详细信息，最后删除它。

项目页面

一旦我们构建了API和实际的CRUD功能，并用curl测试了它们，我们可以继续构建它的UI。你是想先构建后端/CRUD API还是UI取决于你的偏好。对我来说，当我知道确切的细节时，我会从后端/API开始。然而，如果我对所有功能不太确定，我会先用一些合成/虚拟数据构建UI，然后对其进行迭代，直到我找到我想要的感觉。一旦完成，我就会转向API，使其适应UI。

在这种情况下，因为我们首先构建了后端层（确保彻底测试、迭代并让Amp修复问题），我们现在可以继续构建这个功能的UI。

这是我提示：

让我们构建具有以下规格的项目页面。
项目页面应以卡片布局显示所有用户项目，包括：

• 颜色编码的项目指示器
• 创建日期信息
• 快速操作按钮
• 创建新项目的模态框
• 响应式网格布局
  确保项目与项目存储和之前构建的API相连。

经过几次迭代后的结果如下。

部署和生产注意事项

相信我，这基本上就是全部了，从这里开始的每一个其他功能都是我们刚刚使用的模式的重复。你可以选择要构建的附加功能，并继续使用新线程来提示、测试并提交你的更改。

此时，如果你还没有将项目从github部署到Netlify或Vercel账户，请这样做。总的来说，一旦你将代码推送到远程仓库，这两个平台的步骤是相似的——你创建一个项目，连接你的github仓库后，设置一些环境变量（与你在本地开发中设置的.env文件中的相同），然后点击部署按钮。
如果你遇到错误，你可以随时复制错误堆栈并放入Amp中，让它帮你修复或提供建议。
这里值得一提的是，大多数部署错误是由于缺少或不正确的环境变量，或者构建失败。为了确保你不遇到后者，让Amp始终在每次更改后运行构建（你也可以将其添加到AGENT.md文件中），并修复任何问题直到构建成功。

8、简单回顾

让我们退一步，欣赏我们所取得的成就。在相对较短的时间内，我们构建了一个全栈应用程序，其中包括：

• 用户认证
• 具有UI和后端的项目管理
• 在桌面和移动设备上都能正常工作的响应式设计
• 使用行级安全策略的数据库安全
• 可用于生产的部署配置

但更重要的是，我们使用了代理AI开发的原则。而不是手动编写每一行代码，我们专注于架构、用户体验和业务逻辑，而让AI处理实现细节。你可能仍然会编写一些代码，但根据你的技能水平，我倾向于只在更容易自己修改的地方进行更改，而不是向代理解释。

9、开发体验

最让我印象深刻的是这个过程与传统开发的不同之处。而不是陷入语法和样板代码中，我发现我自己更多地战略性地思考应用程序架构和用户体验。

反馈循环更快。当某事不起作用时，AI可以快速迭代并修复问题。当我想要添加一个新功能时，我可以描述我想要的内容，并在几分钟内看到它实现，而不是数小时。

10、接下来是什么？

鉴于我们刚刚在这个演示中构建了两个核心功能，如果你还想继续构建这个应用，这里有一些其他功能你可以考虑添加：

高级功能：

• 任务管理
• 实时更新
• 文件附件和文档管理
• 时间跟踪和报告
• 高级过滤和搜索
• 团队管理和权限
• 与外部工具（GitHub、Slack等）集成
• 移动应用……等等

10、学到的经验

鉴于我已经按照这个工作流程构建了几款应用，这里是我构建时学到的一些东西。如果你有自己的原则，可能有所不同。

1. 从“干净”的架构开始： 代理在你有清晰的构建模型时效果最好
2. 拥抱迭代： 不要试图一次就做到完美。代码现在很便宜，不要害怕扔掉一个功能，如果它不符合你的要求，然后重新开始。
3. 关注最终用户体验： 将你的人类时间花在对用户最重要的事情上
4. 总是验证代理行为： 代理非常强大，但人类监督仍然至关重要。不断向代理提出提示，如“测试你的工作，写单元测试等。”
5. 记录一切： 良好的文档有助于人类和AI理解代码库。但是，确保在每次主要发布后要求代理更新文档。

11、最后的想法

我们正经历着软件构建方式的根本转变。现代框架如SvelteKit、强大的后端服务如Supabase以及代理AI开发工具如Amp的结合，正在创造几个月前似乎不可能的可能性。

以前需要一个开发团队和数月的工作现在可以由一个人在几天内完成。我坚信我们比以往任何时候都更接近看到1人独角兽。

今天我们构建的应用程序是完全可用的。你可以将其作为SaaS产品推出，用于你自己的团队，或者用额外的功能扩展它。但也许最重要的是，你现在有了一个使用现代工具和代理AI原则构建全栈应用程序的模板。我们涵盖的模式和技术可以应用于你想要构建的几乎任何Web应用程序。

祝你编码愉快 ✌️

原文链接：How to Build a Full-Stack App with an AI Coding Agent

汇智网翻译整理，转载请标明出处