人工智能驱动的 Web 开发：使用 Supabase 和 Lovable 只需几个提示即可构建全栈应用程序
经过一段时间的休息（实际上休息了很长时间😅），我带着一个超级令人兴奋的话题回来了！👀
今天，我们将探索如何使用 **Lovable** 和 **Supabase** 轻松构建功能齐全的 Web 应用程序。你们大多数人可能已经熟悉 Supabase 了，对吧？它是 Firebase 的开源替代品，提供构建后端所需的所有工具。
现在，**Lovable** 对你来说可能是一个新东西。它是一款由人工智能驱动的全栈工程师，让任何人，即使没有技术背景，也能使用简单的对话提示创建漂亮的网站和网络应用。Lovable 使用 **React**、**Tailwind** 等现代技术为你编写前端代码，并与 OpenAPI 后端无缝连接。此外，你可以轻松地自己修改生成的代码。
听起来很有趣，不是吗？好吧，让我带你了解如何使用这两种令人惊叹的技术，仅用几个提示即可构建一个功能齐全的应用程序。
让我们开始吧！😉
设置 Supabase
我们首先打开 Supabase 并创建一个帐户：
https://supabase.com/
如果您已有帐户，只需登录即可进入您的仪表板。仪表板打开后，单击红色圆圈中的“新项目”：
设置数据库密码，确保将其保存在安全的地方，因为您以后可能会需要它：
项目设置完成后，您应该看到此屏幕：
设置 Lotable
我们首先打开 Lovable 并创建一个帐户：
https://lovable.dev/
如果您已有帐户，只需登录即可。登录后，您将看到此屏幕：
制作登录和注册页面
我传递了一个带有图像的提示，如下所示：
提示：
**“为我创建这个注册页面，设计与卡片图像相同，卡片应位于黑色背景的中央。使登录页面与此相同，但输入字段应仅用于输入电子邮件和密码。”**
图片：
然后你应该看到类似这样的注册页面：
虽然不太一样，但效果还不错。我们还可以通过传递更多提示来更改此创建的页面。目前，我将保持原样。
这是登录页面：
如果您想查看这些页面的代码，请查看此处：
通过集成 Supabase 添加身份验证
为此，首先选择此选项并按照给定的步骤将您的 Supabase 帐户与 Lovable 连接：
现在，你们可以简单地连接到之前创建的项目：
现在，传递另一个提示：
**“添加身份验证”**
检查 SQL 并应用更改：
验证身份验证功能
要检查我们的身份验证是否有效，让我们禁用电子邮件确认。为此，请在 Supabase 中打开您的项目并转到身份验证。
然后进入提供商页面，检查 Auth Providers 列表中的 Email。像我一样禁用“确认电子邮件”。
现在，让我们去我们的应用程序创建一个帐户并登录！
制作聊天机器人页面
现在，让我们制作聊天机器人主页！
使用此提示来实现：
**“为我创建一个聊天机器人页面，登录后我们将重定向到该页面。与登录和注册页面保持相同的主题。创建一个导航栏，背景为黑色，文本颜色与登录和注册页面上的标题的紫色相匹配。在中间显示“聊天机器人”。在导航栏的右侧放置一个注册按钮。**
**在主页上，显示一个输出字段，该字段具有黑色背景、圆角和白色文字，上面写着“输出显示在这里”。在其下方，包含一个标有“在此输入”的输入字段，右侧有一个圆角箭头按钮。**
**两个字段应占据页面宽度的 90%，中间留有空隙。整个页面应适合屏幕的高度。”**
这是我得到的输出：
如前所述，我们可以使用更短的提示，甚至更详细的提示。
由于导航栏中的按钮显示“注册”，因此让我们提示进行更改。
**“导航栏中的按钮应标记为‘退出’，并允许用户退出。”**
现在，它将允许我们退出！
制作备注页
现在，让我们制作聊天机器人主页！
使用此提示来实现：
**“在导航栏上，在主页（聊天机器人页面）的左侧，添加一个标有“添加注释”的按钮。**
**点击此按钮将重定向至新页面。在此新页面上：**
**在这个新页面的中心，添加一个显眼的“添加注释”按钮。**
正如您在下面看到的，首先应用 SQL 内容并在数据库中创建了一个新表：
主页上还添加了“添加注释”按钮：
新页面也创建好了。用户名显示在中间，我们也可以通过“聊天”按钮返回主页：
尽管数据库设置已完成，并且实现了“添加注释”按钮，但它似乎无法正常运行。让我们再传递一个提示来修复此问题：
**“注释页面上的“添加注释”按钮应允许用户无缝管理他们的注释。用户应能够创建新注释，并自动记录创建日期和时间。此外，他们还应能够编辑现有注释以更新其内容，并删除不再需要的注释以将其移除。”**
现在，我们的功能似乎可以正常运行，我们可以添加、编辑和删除任何注释：
完善你的代码
要进行更具体的修改，请考虑连接您的 GitHub 帐户并在那里发布代码。这将使您能够无缝地使用您喜欢的代码编辑器或 IDE，从而实现更深入的自定义和集成最适合您需求的其他功能
为此，请选择以下选项并连接到 GitHub：
连接到GitHub后，选择“创建存储库”：
此后，您将看到以下选项：
现在，您可以从 GitHub 查看或克隆您的 repo，甚至可以在 VS Code 中编辑它！
即使现在，如果您想编辑此项目，如果您通过提示进行编辑，更新将直接推送到创建的 GitHub 存储库。
或者您可以使用自己的克隆存储库，更改将反映在 Lovable 中。要将其编辑到您自己的 IDE 中，您需要安装 Node.js 和 npm。
**步骤 1：使用项目的 Git URL 克隆存储库。**
git 克隆
**步骤 2：导航到项目目录。**
光盘
**步骤 3：安装必要的依赖项。**
海拔和
**步骤 4：启动开发服务器并自动重新加载并即时预览。**
npm 运行 dev
按照这些步骤，您可以在您喜欢的开发环境中轻松地设置和定制项目。
结论
不知道你们怎么想，但对我来说，这次经历真的很棒。我从来没有想过，我们只需几分钟就能开发出一款功能齐全的全栈应用，而且只需要几个提示。我们必须做一些改进，但没关系。当然，用户界面部分感觉很简单，只需要几个提示，这是我的大脑完全可以理解的。
但添加实际功能，如身份验证或整个“笔记应用程序”设置？这才是真正让我大吃一惊的地方！如您所见，添加身份验证就像键入“添加身份验证”一样简单——瞧，就完成了！它如此轻松，感觉就像变魔术一样。通过 Lovable 与 Supabase 的集成使一切都变得如此无缝。没有复杂的配置，没有繁琐的调试——只有一个提示，一切都顺利地结合在一起。即使添加笔记功能也非常简单：只需几个简单的说明，我们就拥有了一个完全正常工作的功能，没有任何麻烦或手动调整。
最好的部分是什么？我们不必担心通常的编码麻烦（尽管这很有趣）和无休止的调试。只需几个步骤，我们就能毫不费力地添加通常需要几个小时才能设置的功能。就像代码实际上是自己写的一样！
**让我们联系起来！**
✨ 推特
✨ Github