提示驱动的无代码开发

独立黑客们获得了100倍的生产力提升。但相对于什么呢？

对抗由人们在几小时内构建完整应用而引发的FOMO（错失恐惧症）的解药是什么？知识的力量。

这是一份使用无代码工具创建AI SaaS的实际指南，这样你就可以自己制作一篇热门文章。我们希望实现的结果是一个自动将语音消息转录到Slack频道的机器人。（本文将介绍一个失败的项目，但在选择正确的问题时，2小时的应用程序是现实存在的。查看我的视频点击这里进行详细说明）

基于我在Lovable构建超过30个项目的经验，我将指导你完成构建生产级应用的步骤，而不对过程进行粉饰。

为什么2小时的应用程序是个错觉？

代码本身没有内在价值。真正有价值的是解决用户问题。理解用户问题可能需要与用户进行数月的讨论和应用规格迭代。

1、开发之前

项目中最重要的一部分发生在编写任何代码之前。

人们通常通过仅考虑编写代码所需的时间来衡量AI代码生成器带来的生产力提升。这很容易测量和展示（看我用N分钟构建了这个应用）。

但不要被那些文章误导。编码并不是应用开发中耗时的部分。除非问题、解决方案、用户流程和技术堆栈都定义得当，否则应用不太可能提供多大价值。

重构应用代码 所需的时间远多于在纸上重构功能。你应该始终对自己的技术堆栈选择和用户流程充满信心。你不一定需要知道代码级别的细节，但你应该知道是否应该为你的待办事项应用使用Kubernetes，即使LLM建议你这样做。

1.1 问题

我和联合创始人之间有一个问题（我经营一家AI代理公司）。我们在Slack频道上发送了大量的语音消息，但它们是芬兰语。Slack本身不支持芬兰语的即时转录，有时我希望看到文本形式的消息。

1.2 解决方案

一个Slack机器人，使用OpenAI Whisper自动转录音频消息，并通过回复提供转录内容。用户可以通过我们的Web应用将转录机器人添加到任何Slack频道。定价按每分钟计费，并通过Stripe处理。

1.3 用户流程

1. 用户打开应用并通过Slack进行身份验证。
2. 用户添加应自动转录音频消息的频道。
3. 用户有10个免费积分（分钟），可以通过Stripe购买更多积分。
4. 当用户用完积分时，转录将无法工作，直到用户购买更多积分。
5. 用户可以通过应用取消注册频道，并删除他们的账户。

1.4 技术栈

Supabase： 处理Slack认证、用户元数据存储（剩余积分、Slack认证令牌）、边缘函数

Stripe： 订阅管理和积分购买

Slack： 用于Supabase OIDC认证的应用，另一个应用用于频道webhook注册。

2、开始开发

你可以阅读我Lovable项目的所有提示。你可以通过导航到要调查的提示并点击“预览”来查看每个应用版本。

2.1 提示1：建立应用框架

第一个提示应该简洁，聚焦于大局。给出足够的上下文以做出认证和集成的架构决策，但不要深入细节。

我将在提示标题中始终分享Lovable响应的链接，‘RESPONSE’。

我们得到一个初始的登录页面，看起来很吸引人。

2.2 提示2：连接到Supabase

我们需要处理Slack认证并将用户级别详情存储到数据库中。Lovable有一个很好的Supabase集成，所以让我们使用它。

单击页面顶部的“Supabase”图标，创建一个新的Supabase项目并连接到它。

连接到项目后，Lovable会自动生成一个连接到Supabase的提示。

2.3 提示3-6：使用Slack添加用户认证

我们的应用只有在用户经过认证后才能工作，所以我们应该首先开发它。

1. 用户打开应用并通过Slack进行身份验证。

请注意，下面我们请求的是Slack OAuth。这可能是或不是错误。

为了获取API密钥，我们必须创建一个Slack应用。我不知道如何定义Slack应用清单，所以我与GPT o3-mini-high进行了聊天。

我们通过Lovable界面添加Slack API密钥，Lovable会自动生成一个提示。

Slack将处理我们的认证在其自己的网页应用中。Slack完成认证后，应将其重定向回我们的应用。因此，我们需要添加站点URL和重定向URL到Supabase和Slack应用注册。我们可以通过Supabase控制台找到这些URL，但我们向Lovable询问以简化操作。

对于我们的初步项目规范，我们决定使用OAuth进行Supabase Slack认证。这是一个错误，现在我们遇到了问题。OAuth正在被弃用，而LLM并不知道这一点，我也一样。

我们向Lovable求助。

经验教训1：始终确保提出的项目计划在高层次上是可行的。

当我们通过Slack进行认证时，我们的机器人必须请求权限（称为范围）以便在用户的Slack空间中执行某些操作。现在Lovable尝试通过OIDC认证请求这些范围。

然而，OIDC仅用于认证，而不是请求Slack应用的消息范围，所以我们需要创建两个应用。

2.4 注册两个Slack应用，并启用OIDC

创建Slack应用后，我需要将OIDC应用链接到Supabase用户认证。OIDC应用负责Slack用户认证，而OAuth Slack应用负责请求消息范围。

我从创建的Slack应用中获取了Client ID和密钥，并将其添加到提供商。

2.5 提示7-11：使用Slack添加用户认证

尝试登录时，我们从Web应用收到一个通用的“invalid_scope”错误。我们需要更多信息。我们打开Chrome开发者工具以查找认证HTTP请求并复制完整的请求负载。

也许Lovable在没有HTTP请求上下文的情况下也能调试错误。我决定在提示中包含请求以帮助LLM，因为我还不想陷入无休止的调试循环。

Lovable调整了OIDC范围，我们已经完成了认证。太好了！

…但是，一旦Slack成功认证后重定向，我们的应用并没有将用户注册到Supabase。Lovable很可能不理解Slack是如何返回认证状态的，我们需要提供最新的Slack认证响应文档。

文档不起作用，所以我们进一步提供Slack认证的HTTP响应。我们再次从Chrome开发者工具中找到请求。

通过Slack的用户认证终于成功了，我们可以继续下一步。

2.6 提示11-N：添加webhook注册

我们已经实现了第一个功能，用户认证，并继续进行下一个用户流程步骤。

1. 用户添加应自动转录音频消息的频道

在添加频道之前，我们需要处理前端的成功事件并更新UI。

UI更新了，但我们收到了“unsupported provider”的错误。Lovable试图将我们的webhook注册作为常规的Supabase认证。但是，我们已经告诉它我们有两个Slack应用，OIDC用于认证，OAuth用于webhook注册。

……

Lovable忘记了我们的指示关于认证流程。我们需要提醒它。

Lovable根据提示进行了操作，但什么也没有发生。用户流程不起作用，我们没有任何Supabase表。要么是对话历史太复杂，LLM无法遵循冲突的指令，要么是Lovable没有使用足够的对话历史作为LLM的上下文。我们需要提醒它关于我们的应用。

这是使用LLMs开发时需要学习的第二个教训：

经验教训2：使用单一对话实现单一功能。

2.7 提示N：调试工作流

此时，LLM开始表现不稳定。我需要提醒它使用环境变量而不是凭空想象它们。LLM创建了一个边缘函数仅仅是为了从后端返回环境变量到前端。我深深地拍了一下额头，但决定假装我没有技术专长。也许LLM会自我修正。

我通过12个更多的提示进行了调试，使用O3-mini实时访问文档并提供给Lovable建议，但为时已晚。上下文过于臃肿，每次提交都会使我们陷入代码的泥潭。

各位女士先生们，这就是我们使用无代码工具所能达到的极限，而没有理解底层代码。通常我会在遇到第一个错误提示时就放弃，但我想要表现出半非技术人的样子。

3、将仓库转移到Github并使用Cursor

我把仓库转移到了Github，并使用Cursor Composer来完成应用。

总共花费了大约8个小时：

• 开发Slack和Stripe集成
• 将应用部署到Vercel
• 发布应用 audiotranscriber.centrive.ai

我试图在不了解Slack事件API详细信息的情况下继续开发，但（不幸地）我不得不学习该API的高级使用细节。LLM无法找出正确的方法，我不得不引导它。O3-mini提供了实时网络访问，可以访问最新的文档，这帮助了很多，并将成为我工作流程的一个好补充。

4、学到的经验

• 始终确保提出的项目计划在高层次上是可行的。
• 使用单一对话实现单一功能。
• LLM需要反馈——无论是通过UI交互测试还是直接访问日志/上下文。
• 无代码平台在UI方面非常强大，但在后台方面缺乏可见性——给LLMs提供请求和日志可能会解决这个问题。
• 生产应用和演示应用的区别在于基础设施。

无代码工具在正确使用时非常强大。虽然本教程没有展示最佳开发方式，但它展示了实际开发挑战。

5、结束语

再次强调，代码本身没有内在价值。我们没有进行市场研究，所以我们的应用不太可能获得关注。也许市场上缺少一个Slack音频转录器，但功能可能不是我们所构建的。

原文链接：How to build an application with AI in 2 hours — and why it’s an illusion

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