> ## Content Index > Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt > Use this file to discover other available public pages before exploring further. # 提示驱动的无代码开发 - URL: https://www.hubwiz.com/blog/prompt-driven-no-code-development/ - Published: 2025-02-17T03:27:00.000Z - Updated: 2025-02-27T10:42:03.000Z - Description: 基于我在Lovable构建超过30个项目的经验，我将指导你完成构建生产级应用的步骤，而不对过程进行粉饰。 - Author: admin - Tags: APPLICATION, #Import 2026-10-14 14:41 [独立黑客](https://www.indiehackers.com/?ref=hubwiz.com)们获得了100倍的生产力提升。但相对于什么呢？ 对抗由人们在几小时内构建完整应用而引发的FOMO（错失恐惧症）的解药是什么？**知识的力量。** 这是一份使用无代码工具创建AI SaaS的实际指南，这样你就可以自己制作一篇热门文章。我们希望实现的结果是一个[自动将语音消息转录到Slack频道的机器人。](http://audiotranscriber.centrive.ai/?ref=hubwiz.com)（本文将介绍一个失败的项目，但在选择正确的问题时，2小时的应用程序是现实存在的。查看我的视频[点击这里](https://youtu.be/1PF0qUab%5FBY?si=-1DD2zqplm-Oq4Nt&ref=hubwiz.com)进行详细说明） 基于我在[Lovable](https://lovable.dev/?ref=hubwiz.com)构建超过30个项目的经验，我将指导你完成构建生产级应用的步骤，而不对过程进行粉饰。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-634.png) 最终应用中的图像。这就是我们的目标 > 为什么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项目](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?ref=hubwiz.com)的所有提示。你可以通过导航到要调查的提示并点击“预览”来查看每个应用版本。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-635.png) Lovable界面允许预览中间应用版本 ### 2.1 提示1：建立应用框架 第一个提示应该简洁，聚焦于大局。给出足够的上下文以做出认证和集成的架构决策，但不要深入细节。 *我将在提示标题中始终分享Lovable响应的链接，‘RESPONSE’。* ![](https://www.hubwiz.com/blog/content/images/2025/02/image-636.png) Lovable开始项目的第一个提示。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=318f3063-06ae-4432-a1bd-d3476dec7021&ref=hubwiz.com) 我们得到一个初始的登录页面，看起来很吸引人。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-637.png) Lovable生成的初始登录页面。从美学角度看，非常棒！ ### 2.2 提示2：连接到Supabase 我们需要处理Slack认证并将用户级别详情存储到数据库中。Lovable有一个很好的Supabase集成，所以让我们使用它。 单击页面顶部的“Supabase”图标，创建一个新的Supabase项目并连接到它。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-638.png) Lovable直接集成Supabase 连接到项目后，Lovable会自动生成一个连接到Supabase的提示。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-639.png) Lovable初始化Supabase项目后自动生成的提示。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=003b444f-58e2-45aa-9285-305cdf190d97&ref=hubwiz.com) ### 2.3 提示3-6：使用Slack添加用户认证 我们的应用只有在用户经过认证后才能工作，所以我们应该首先开发它。 1. 用户打开应用并通过Slack进行身份验证。 请注意，下面我们请求的是Slack *OAuth*。这可能是或不是*错误*。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-640.png) 提示3：使用Slack OAuth创建用户认证。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=599719ed-4264-415a-b838-ad1c91980aa5&ref=hubwiz.com) 为了获取API密钥，我们必须创建一个[Slack应用](https://api.slack.com/apps?ref=hubwiz.com)。我不知道如何定义Slack应用清单，所以我与GPT o3-mini-high进行了聊天。 我们通过Lovable界面添加Slack API密钥，Lovable会自动生成一个提示。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-641.png) 提示4：从Slack仪表板添加API密钥。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=294881ed-647c-42c4-83f4-91cb7ebe54ea&ref=hubwiz.com) Slack将处理我们的认证在其自己的网页应用中。Slack完成认证后，应将其重定向回我们的应用。因此，我们需要添加站点URL和重定向URL到Supabase和Slack应用注册。我们可以通过Supabase控制台找到这些URL，但我们向Lovable询问以简化操作。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-642.png) 提示5：澄清站点URL和重定向URL。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=b27bde0a-4c5b-434b-b79e-3ae659760bae&ref=hubwiz.com) 对于我们的初步项目规范，我们决定使用OAuth进行Supabase Slack认证。这是一个错误，现在我们遇到了问题。[OAuth正在被弃用](https://supabase.com/docs/guides/auth/social-login/auth-slack?ref=hubwiz.com)，而LLM并不知道这一点，我也一样。 我们向Lovable求助。 > ***经验教训1：始终确保提出的项目计划在高层次上是可行的。*** ![](https://www.hubwiz.com/blog/content/images/2025/02/image-643.png) 提示6：[Slack推荐使用OIDC](https://supabase.com/docs/guides/auth/social-login/auth-slack?ref=hubwiz.com)而不是OAuth，我们需要重构。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=9295d265-fda2-4a8b-9e3a-eb57cd1cb062&ref=hubwiz.com) 当我们通过Slack进行认证时，我们的机器人必须请求权限（称为**范围**）以便在用户的Slack空间中执行某些操作。现在Lovable尝试通过OIDC认证请求这些范围。 然而，OIDC仅用于认证，而不是请求Slack应用的消息范围，所以我们需要创建两个应用。 ### 2.4 注册两个Slack应用，并启用OIDC 创建Slack应用后，我需要将OIDC应用链接到Supabase用户认证。OIDC应用负责Slack用户认证，而OAuth Slack应用负责请求消息范围。 我从创建的Slack应用中获取了Client ID和密钥，并将其添加到提供商。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-644.png) 从Supabase认证中启用Slack OIDC提供者 ### 2.5 提示7-11：使用Slack添加用户认证 尝试登录时，我们从Web应用收到一个通用的“invalid\_scope”错误。我们需要更多信息。我们打开[Chrome开发者工具](https://developer.chrome.com/docs/devtools?ref=hubwiz.com)以查找认证HTTP请求并复制完整的请求负载。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-645.png) Chrome开发者工具视图显示Lovable发送的HTTP请求 也许Lovable在没有HTTP请求上下文的情况下也能调试错误。我决定在提示中包含请求以帮助LLM，因为我还不想陷入无休止的调试循环。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-646.png) 提示7：给Lovable错误信息和相关的HTTP请求。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=b46c92c7-6869-4425-88b2-f49fbc787db3&ref=hubwiz.com) ![](https://www.hubwiz.com/blog/content/images/2025/02/image-647.png) 提示8：认证状态组件卡住了。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=34393dca-778d-4008-8a70-5cb9fd80d221&ref=hubwiz.com) Lovable调整了OIDC范围，我们已经完成了认证。太好了！ …但是，一旦Slack成功认证后重定向，我们的应用并没有将用户注册到Supabase。Lovable很可能不理解Slack是如何返回认证状态的，我们需要提供最新的Slack认证响应文档。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-648.png) 提示9：给LLM提供最新的文档。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=610e63ba-2e0f-4e92-814d-06bd657787cf&ref=hubwiz.com) 文档不起作用，所以我们进一步提供Slack认证的HTTP响应。我们再次从Chrome开发者工具中找到请求。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-649.png) 提示10：提供HTTP请求并解释令牌是在URL中返回，而不是在负载中。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=da68d256-98e9-4ed5-9cc1-178b29e41526&ref=hubwiz.com) 通过Slack的用户认证终于成功了，我们可以继续下一步。 ### 2.6 提示11-N：添加webhook注册 我们已经实现了第一个功能，用户认证，并继续进行下一个用户流程步骤。 1. 用户添加应自动转录音频消息的频道 在添加频道之前，我们需要处理前端的成功事件并更新UI。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-650.png) 最终应用中的图像。这就是我们的目标视图 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-651.png) 提示11：处理成功的认证事件并更新UI。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=480f8e59-380a-44ea-b391-c5ef226bd39c&ref=hubwiz.com) UI更新了，但我们收到了“unsupported provider”的错误。Lovable试图将我们的webhook注册作为常规的Supabase认证。但是，我们已经告诉它我们有两个Slack应用，OIDC用于认证，OAuth用于webhook注册。 …… Lovable**忘记了我们的指示**关于认证流程。我们需要提醒它。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-653.png) 提示12：纠正Lovable仅使用Supabase认证进行初始OIDC认证。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=a97b33e5-8430-4adf-bfcf-df6fe8ea6293&ref=hubwiz.com) Lovable根据提示进行了操作，但什么也没有发生。用户流程不起作用，我们没有任何Supabase表。要么是对话历史太复杂，LLM无法遵循冲突的指令，要么是Lovable没有使用足够的对话历史作为LLM的上下文。我们需要提醒它关于我们的应用。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-654.png) 提示13：提醒Lovable我们之前告诉它的内容。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=50234b71-3581-4a2e-a650-89518039a361&ref=hubwiz.com) 这是使用LLMs开发时需要学习的第二个教训： > 经验教训2：使用单一对话实现单一功能。 ### 2.7 提示N：调试工作流 此时，LLM开始表现不稳定。我需要提醒它使用环境变量而不是凭空想象它们。LLM创建了一个边缘函数*仅仅是为了从后端返回环境变量*到前端。我深深地拍了一下额头，但决定假装我没有技术专长。也许LLM会自我修正。 ![](https://www.hubwiz.com/blog/content/images/2025/02/image-655.png) 提示N：真正的战斗开始了。[RESPONSE](https://lovable.dev/projects/6b2ac2b0-df9e-4ea7-b206-5fd12705cce5?messageId=1a30e3fe-c6f1-4a1e-b7b6-4924fef3122a&ref=hubwiz.com) 我通过12个更多的提示进行了调试，使用O3-mini实时访问文档并提供给Lovable建议，但为时已晚。上下文过于臃肿，每次提交都会使我们陷入代码的泥潭。 各位女士先生们，这就是我们使用无代码工具所能达到的极限，而没有理解底层代码。通常我会在遇到第一个错误提示时就放弃，但我想要表现出半非技术人的样子。 ## 3、将仓库转移到Github并使用Cursor 我把仓库转移到了Github，并使用Cursor Composer来完成应用。 总共花费了大约8个小时： - 开发Slack和Stripe集成 - 将应用部署到Vercel - 发布应用 [audiotranscriber.centrive.ai](https://audiotranscriber.centrive.ai/?ref=hubwiz.com) 我试图在不了解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](https://medium.com/data-science-collective/how-to-build-application-with-ai-in-2-hours-and-why-its-an-illusion-ba44bdbdbd7b?ref=hubwiz.com) 汇智网翻译整理，转载请标明出处