Lovable 是一项从文本到应用的服务，让任何人无需编程技能即可创建可用的应用程序。我们只需通过聊天界面描述应用想法，平台就会将这些描述转化为真实可运行的应用。
在本教程中，我将通过一个实用示例带您上手 Lovable——我会一步步指导您构建并发布一个简单但完整的待办事项移动应用，包含数据持久化、用户认证、邮件提醒和付费订阅。
最后，我还会讨论 Lovable 的一些局限，例如安全方面的顾虑、对于已有工具和库的开发者来说可能并不更快，以及非程序员在调试时可能遇到的挑战。
What Is Lovable AI?
借助 AI，Lovable 允许我们通过描述来将想法转化为功能完整的应用。这意味着我们可以轻松绕过传统编码的复杂性，让非开发者也能创建应用，同时也为开发者提供更快的原型制作方式。
Lovable 在前端使用 React 和 Vite。React 是广受欢迎的 JavaScript 用户界面库，以其灵活高效而著称。Vite 则是构建工具，提供更快更轻量的开发体验。这些框架通过处理复杂的 UI 逻辑，帮助我们更顺畅地创建应用，确保应用既功能完善，又响应灵敏、体验流畅。
在后端方面，Lovable 使用 Supabase，这是传统后端解决方案的开源替代。Supabase 本质上是一套工具集合，可构建后端系统，包括数据库存储、认证和云函数。它与我们的应用协同工作以管理数据并实现实时功能。
Lovable 不允许我们在其界面中直接编辑所生成的代码。不过，我们可以将应用代码关联到 GitHub 仓库。这样一来，在 GitHub 上对代码的任何更改都会直接反映到应用中，从而支持协作开发和版本控制。
这种设置将无代码界面的易用性与 GitHub 提供的灵活性和可控性结合起来。不过，我经常还是会希望能直接编辑代码以进行小改动。
使用 Lovable 构建您的第一个项目
入门
要开始使用 Lovable，首先前往 其官网并创建一个免费账号。
创建好免费账号后，我们每天可以向平台的 AI 助手发送五条消息。在这样的限制下，看看我们能推进到什么程度，颇具挑战性。
在第一条消息里，简要描述我们的项目。
请注意，我的描述相当简短。我也试过在第一条消息中给出非常详细的功能说明，但效果并不好，因为大多数功能都需要后端。项目初建时并不会自动连接 Supabase，因此提示会失败。
以下是该提示得到的结果：
此时应用已相当可用。它可以在待办清单中创建、删除并标记完成的项目。令我惊讶的是，刷新应用后数据仍能保存！
Lovable 通过本地存储实现了这一点，即将数据存储在浏览器的本地数据库中。该方法的优点是不需要网络连接，但缺点是无法在不同设备间共享数据。
接下来看看如何通过连接 Supabase，将其替换为后端数据库。
连接 Supabase
Supabase 是一个开源平台，为我们的应用提供后端基础设施。它提供包括数据库存储、认证和 API 在内的一系列服务，是管理应用数据的综合方案。
例如，在构建待办清单应用时，如果我们希望应用数据能在多设备和多用户间持久存在，Supabase 就变得必不可少。与只在单个设备浏览器内存储数据的本地存储不同，Supabase 允许我们将数据存于云端。这意味着用户可以从任意设备访问其待办清单，并实时查看更新。
此外，Supabase 的认证服务可帮助我们管理用户注册和登录，确保每位用户的数据安全私密。将应用连接到 Supabase，能充分释放应用的潜力。
使用 Supabase 构建应用的优势之一在于其开源属性。开源意味着 Supabase 不会将我们绑定到特定云服务商，从而在管理后端时拥有更大灵活性。我们既可以为图省事使用 Supabase 的托管服务，也可选择使用 Docker 自行托管。这种灵活性让我们能按成本、性能或合规等需求，选择最合适的托管环境。
将我们的项目连接到 Supabase，步骤如下：
1. 点击右上角的 Supabase 按钮。
2. 会出现一个弹窗，提示我们注册 Supabase。
3. 注册完成后，再次点击 Supabase 按钮，授权 Lovable 访问我们的账号。系统会提示我们创建一个组织（organization）。
4. 创建组织后，选择该组织并授权 Lovable 通过此组织访问我们的 Supabase 账号。
5. 再次点击 Supabase 按钮并创建一个项目。此操作将跳转至 Supabase 官网，在那里配置项目。
6. 最后返回 Lovable 网站，再点击一次 Supabase 按钮，然后选择我们刚创建的项目。AI 会据此更新代码以连接该项目。
就这样，我们的应用已经拥有后端了！
如上所述，最好在让 Lovable 实现任何需要后端的功能前，先连接 Supabase，因为它似乎不喜欢在没连接时就编写相关代码。需要注意的是，工程师的实际工作并非如此——前端工程师可以在后端尚未实现时先写前端代码。
添加用户认证
将应用连接到 Supabase 项目后，我们现在可以提示 Lovable 添加用户认证功能。
首先，AI 会为我们的应用创建数据库表。完成后，我们需要在聊天窗口点击“Apply Changes”按钮手动批准。
并非每次都会要求我们接受 AI 的更改，但某些情况下这是必要的，因为部分更改（如数据库更新）即使不发布也会影响到生产环境中的应用。
数据库更新后，系统会开始更新代码，以对用户进行认证并将待办更新保存到数据库。
不过这一次它遇到了错误：“Build unsuccessful”。遇到这种情况时，我们可以查看错误，并在顶部点击“Try to fix it”按钮尝试自动修复问题。
在这个例子中，点击按钮就修复了问题。现在应用已具备用户认证和数据库存储功能，因此即使我们在多个设备上使用，也能访问同一份待办清单。
发布应用
要发布应用，我们可以使用右上角的“Publish”按钮。
发布后，我们可以通过菜单底部提供的链接进行访问。
这是一个公开可访问的链接，任何人都可以使用该应用。若有自定义域名，我们也可以进行绑定。
请注意，每当我们对应用进行更改时，都需要点击“Redeploy”按钮。否则，这些更改只会在 Lovable 界面可见，通过应用 URL 访问的用户是看不到的。
Lovable 的高级能力
连接 GitHub
Lovable 不允许我们直接修改代码，只允许查看代码及其改动。
若要修改代码，我们需要将项目连接到 GitHub——一个广泛用于托管和协作代码项目的版本控制平台。它允许多人高效地贡献、评审和管理改动。
连接 GitHub 的步骤：
1. 登录您的 GitHub 账号并创建一个免费组织。
2. 在 Lovable 中，点击右上角的“Edit Code”按钮。
3. 然后点击“Connect to GitHub”。
4. 选择我们在第一步创建的组织。
连接 GitHub 后，代码会与 GitHub 仓库保持同步。这意味着我们可以用 VSCode 等工具在本地开发项目。需要注意的是，Lovable 在拉取推送到仓库的更改时会有一定延迟。
请记住，应用本身不会自动重新部署。要在应用中看到更改，我们需要再次发布。
云函数
到目前为止我们学到的内容，足以让我们制作一个能够维护在线数据库和前端界面的应用，完成创建、读取、更新和删除数据的操作，也就是常说的 CRUD 应用。
Cloud 函数提供了一种强大的方式，让我们无需管理物理服务器即可为应用添加自定义逻辑和复杂操作。它们允许我们在数据库变更、HTTP 请求或其他触发器等事件发生时运行后端代码。这对发送邮件通知、处理数据或执行定时任务等非常有用。
通过云函数，我们可以灵活高效地处理复杂功能，并按需扩展，同时确保用户体验无缝与流畅。实质上，它们让我们的应用能力超越简单的数据管理，更加动态且实用。
在待办清单应用中使用云函数的一个很好的例子是为临近的任务发送邮件提醒。假设我们希望提醒用户即将到期的任务。我们可以编写一个云函数，检查数据库中截止日期临近的任务，并自动向用户发送邮件提醒。
我们可以请 Lovable 为我们实现这一点：
部分函数需要访问需要 API 密钥的外部 API。在这个例子中，实现方案使用了 Resend API，因此 Lovable 要求提供 API 密钥以完成服务配置。
使用 Stripe 添加订阅
如果用户无法订阅，做一个应用也没有太大意义。让我们请 Lovable 使用 Stripe 在应用中实现订阅。
我们可以使用如下提示：
它要求我提供 Stripe 密钥，与上一个示例类似。我们可以从自己的 Stripe 账号获取该密钥。
最后，它提示缺少订阅价格 ID。为此，我们可以回到 Stripe，创建一个订阅产品并复制价格 ID。由于 Lovable 没有像 API 密钥那样提供专门的输入按钮，我们可以直接在聊天中提供该 ID：
为完成实现，我们可以要求只允许已订阅用户创建待办事项，并发布应用的更新版本。
一切一次成功！
制作可安装的移动应用
Lovable 创建的应用默认不是渐进式网页应用（PWA）。它只是一个网站，这意味着我们无法将其安装到移动设备上，将其当作真正的手机应用来使用。
不过，这可以用一个提示轻松解决：
完成这些更改后，如果我们在移动设备上打开应用链接，即可安装并像原生安装的应用一样使用它。
Lovable 的局限
尽管 Lovable 颇具潜力，但我们也需要正视其局限。
安全方面的担忧
虽然 Lovable 为无需编码构建应用提供了便捷途径，但也引发了应用安全方面的担忧，尤其是对没有编码经验的人而言。用户如何确保其应用数据库具备必要的安全措施，防止未授权访问，例如某个用户向他人清单中添加任务？
在创建应用的提示过程中，这一关键方面并未被提及，从而可能留下未被审视的漏洞。缺乏技术背景的用户可能难以评估和处理这些安全问题。
对开发者来说，Lovable 真的更快吗？
对于已经拥有自有工具和代码库的开发者来说，问题在于：Lovable 真的更快吗？
许多开发者通过积累内部的代码片段和模块打磨出了自己的能力库，这些通常涵盖支付、认证和 CRUD 等功能，并且贴合他们的风格与技术偏好。
Lovable 可能无法对所用技术提供同等程度的可控性，这对习惯于特定系统和工作流的人来说可能是劣势。尽管该平台易于快速做原型，开发者或许会发现继续使用现有工具与方法更高效，尤其是在无缝集成与熟悉度方面。
非程序员如何调试
虽然 Lovable 极大降低了无代码构建应用的门槛，但当自动化方案失效、需要手动介入时，非程序员应当如何处理，确实是个大问题。如果平台遇到无法自动解决的问题会怎样？当目标用户不具备编码技能时，谁来解决这些瓶颈？
无法深入代码的情况下，非编码者可能会束手无策，不知下一步如何进行。这种依赖可能导致项目停滞与挫败，最终不得不雇佣程序员或寻求外部帮助，从而带来额外成本与延误。
结语
总的来说，尽管 Lovable 让应用开发触手可及，但对非程序员而言，其成功与否很大程度上取决于在超出简单提示的复杂情境中，平台对用户的支持力度。
我认为 Lovable 确实兑现了“让每个人都能开发应用”的承诺。即便每天只能发送五条提示，我们仍能高效构建出可用的应用。
该平台展现出强大的复杂流程处理能力，允许我们进行细致的应用自定义。这意味着即使在有限的交互中，我们也能将创意应用想法变成可运行的应用程序。
%22%3E%3Cpath%20d%3D%22m-369%200h408v79h-408z%22%20fill%3D%22%237933ff%22%2F%3E%3Cpath%20d%3D%22m-148%200h306v45h-306z%22%20fill%3D%22%23974dff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20d%3D%22m76%200h484v36h-484z%22%20fill%3D%22%23974dff%22%2F%3E%3Cpath%20d%3D%22m0%200h384v24h-384z%22%20fill%3D%22%2306bdfc%22%20transform%3D%22matrix(1%200%200%20-1%200%2060)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Lovable 是一项从文本到应用的服务，让任何人无需编程技能即可创建可用的应用程序。我们只需通过聊天界面描述应用想法，平台就会将这些描述转化为真实可运行的应用。
在本教程中，我将通过一个实用示例带您上手 Lovable——我会一步步指导您构建并发布一个简单但完整的待办事项移动应用，包含数据持久化、用户认证、邮件提醒和付费订阅。
最后，我还会讨论 Lovable 的一些局限，例如安全方面的顾虑、对于已有工具和库的开发者来说可能并不更快，以及非程序员在调试时可能遇到的挑战。
What Is Lovable AI?
借助 AI，Lovable 允许我们通过描述来将想法转化为功能完整的应用。这意味着我们可以轻松绕过传统编码的复杂性，让非开发者也能创建应用，同时也为开发者提供更快的原型制作方式。
Lovable 在前端使用 React 和 Vite。React 是广受欢迎的 JavaScript 用户界面库，以其灵活高效而著称。Vite 则是构建工具，提供更快更轻量的开发体验。这些框架通过处理复杂的 UI 逻辑，帮助我们更顺畅地创建应用，确保应用既功能完善，又响应灵敏、体验流畅。
在后端方面，Lovable 使用 Supabase，这是传统后端解决方案的开源替代。Supabase 本质上是一套工具集合，可构建后端系统，包括数据库存储、认证和云函数。它与我们的应用协同工作以管理数据并实现实时功能。
Lovable 不允许我们在其界面中直接编辑所生成的代码。不过，我们可以将应用代码关联到 GitHub 仓库。这样一来，在 GitHub 上对代码的任何更改都会直接反映到应用中，从而支持协作开发和版本控制。
这种设置将无代码界面的易用性与 GitHub 提供的灵活性和可控性结合起来。不过，我经常还是会希望能直接编辑代码以进行小改动。
使用 Lovable 构建您的第一个项目
入门
要开始使用 Lovable，首先前往 其官网并创建一个免费账号。
创建好免费账号后，我们每天可以向平台的 AI 助手发送五条消息。在这样的限制下，看看我们能推进到什么程度，颇具挑战性。
在第一条消息里，简要描述我们的项目。
请注意，我的描述相当简短。我也试过在第一条消息中给出非常详细的功能说明，但效果并不好，因为大多数功能都需要后端。项目初建时并不会自动连接 Supabase，因此提示会失败。
以下是该提示得到的结果：
此时应用已相当可用。它可以在待办清单中创建、删除并标记完成的项目。令我惊讶的是，刷新应用后数据仍能保存！
Lovable 通过本地存储实现了这一点，即将数据存储在浏览器的本地数据库中。该方法的优点是不需要网络连接，但缺点是无法在不同设备间共享数据。
接下来看看如何通过连接 Supabase，将其替换为后端数据库。
连接 Supabase
Supabase 是一个开源平台，为我们的应用提供后端基础设施。它提供包括数据库存储、认证和 API 在内的一系列服务，是管理应用数据的综合方案。
例如，在构建待办清单应用时，如果我们希望应用数据能在多设备和多用户间持久存在，Supabase 就变得必不可少。与只在单个设备浏览器内存储数据的本地存储不同，Supabase 允许我们将数据存于云端。这意味着用户可以从任意设备访问其待办清单，并实时查看更新。
此外，Supabase 的认证服务可帮助我们管理用户注册和登录，确保每位用户的数据安全私密。将应用连接到 Supabase，能充分释放应用的潜力。
使用 Supabase 构建应用的优势之一在于其开源属性。开源意味着 Supabase 不会将我们绑定到特定云服务商，从而在管理后端时拥有更大灵活性。我们既可以为图省事使用 Supabase 的托管服务，也可选择使用 Docker 自行托管。这种灵活性让我们能按成本、性能或合规等需求，选择最合适的托管环境。
将我们的项目连接到 Supabase，步骤如下：
1. 点击右上角的 Supabase 按钮。
2. 会出现一个弹窗，提示我们注册 Supabase。
3. 注册完成后，再次点击 Supabase 按钮，授权 Lovable 访问我们的账号。系统会提示我们创建一个组织（organization）。
4. 创建组织后，选择该组织并授权 Lovable 通过此组织访问我们的 Supabase 账号。
5. 再次点击 Supabase 按钮并创建一个项目。此操作将跳转至 Supabase 官网，在那里配置项目。
6. 最后返回 Lovable 网站，再点击一次 Supabase 按钮，然后选择我们刚创建的项目。AI 会据此更新代码以连接该项目。
就这样，我们的应用已经拥有后端了！
如上所述，最好在让 Lovable 实现任何需要后端的功能前，先连接 Supabase，因为它似乎不喜欢在没连接时就编写相关代码。需要注意的是，工程师的实际工作并非如此——前端工程师可以在后端尚未实现时先写前端代码。
添加用户认证
将应用连接到 Supabase 项目后，我们现在可以提示 Lovable 添加用户认证功能。
首先，AI 会为我们的应用创建数据库表。完成后，我们需要在聊天窗口点击“Apply Changes”按钮手动批准。
并非每次都会要求我们接受 AI 的更改，但某些情况下这是必要的，因为部分更改（如数据库更新）即使不发布也会影响到生产环境中的应用。
数据库更新后，系统会开始更新代码，以对用户进行认证并将待办更新保存到数据库。
不过这一次它遇到了错误：“Build unsuccessful”。遇到这种情况时，我们可以查看错误，并在顶部点击“Try to fix it”按钮尝试自动修复问题。
在这个例子中，点击按钮就修复了问题。现在应用已具备用户认证和数据库存储功能，因此即使我们在多个设备上使用，也能访问同一份待办清单。
发布应用
要发布应用，我们可以使用右上角的“Publish”按钮。
发布后，我们可以通过菜单底部提供的链接进行访问。
这是一个公开可访问的链接，任何人都可以使用该应用。若有自定义域名，我们也可以进行绑定。
请注意，每当我们对应用进行更改时，都需要点击“Redeploy”按钮。否则，这些更改只会在 Lovable 界面可见，通过应用 URL 访问的用户是看不到的。
Lovable 的高级能力
连接 GitHub
Lovable 不允许我们直接修改代码，只允许查看代码及其改动。
若要修改代码，我们需要将项目连接到 GitHub——一个广泛用于托管和协作代码项目的版本控制平台。它允许多人高效地贡献、评审和管理改动。
连接 GitHub 的步骤：
1. 登录您的 GitHub 账号并创建一个免费组织。
2. 在 Lovable 中，点击右上角的“Edit Code”按钮。
3. 然后点击“Connect to GitHub”。
4. 选择我们在第一步创建的组织。
连接 GitHub 后，代码会与 GitHub 仓库保持同步。这意味着我们可以用 VSCode 等工具在本地开发项目。需要注意的是，Lovable 在拉取推送到仓库的更改时会有一定延迟。
请记住，应用本身不会自动重新部署。要在应用中看到更改，我们需要再次发布。
云函数
到目前为止我们学到的内容，足以让我们制作一个能够维护在线数据库和前端界面的应用，完成创建、读取、更新和删除数据的操作，也就是常说的 CRUD 应用。
Cloud 函数提供了一种强大的方式，让我们无需管理物理服务器即可为应用添加自定义逻辑和复杂操作。它们允许我们在数据库变更、HTTP 请求或其他触发器等事件发生时运行后端代码。这对发送邮件通知、处理数据或执行定时任务等非常有用。
通过云函数，我们可以灵活高效地处理复杂功能，并按需扩展，同时确保用户体验无缝与流畅。实质上，它们让我们的应用能力超越简单的数据管理，更加动态且实用。
在待办清单应用中使用云函数的一个很好的例子是为临近的任务发送邮件提醒。假设我们希望提醒用户即将到期的任务。我们可以编写一个云函数，检查数据库中截止日期临近的任务，并自动向用户发送邮件提醒。
我们可以请 Lovable 为我们实现这一点：
部分函数需要访问需要 API 密钥的外部 API。在这个例子中，实现方案使用了 Resend API，因此 Lovable 要求提供 API 密钥以完成服务配置。
使用 Stripe 添加订阅
如果用户无法订阅，做一个应用也没有太大意义。让我们请 Lovable 使用 Stripe 在应用中实现订阅。
我们可以使用如下提示：
它要求我提供 Stripe 密钥，与上一个示例类似。我们可以从自己的 Stripe 账号获取该密钥。
最后，它提示缺少订阅价格 ID。为此，我们可以回到 Stripe，创建一个订阅产品并复制价格 ID。由于 Lovable 没有像 API 密钥那样提供专门的输入按钮，我们可以直接在聊天中提供该 ID：
为完成实现，我们可以要求只允许已订阅用户创建待办事项，并发布应用的更新版本。
一切一次成功！
制作可安装的移动应用
Lovable 创建的应用默认不是渐进式网页应用（PWA）。它只是一个网站，这意味着我们无法将其安装到移动设备上，将其当作真正的手机应用来使用。
不过，这可以用一个提示轻松解决：
完成这些更改后，如果我们在移动设备上打开应用链接，即可安装并像原生安装的应用一样使用它。
Lovable 的局限
尽管 Lovable 颇具潜力，但我们也需要正视其局限。
安全方面的担忧
虽然 Lovable 为无需编码构建应用提供了便捷途径，但也引发了应用安全方面的担忧，尤其是对没有编码经验的人而言。用户如何确保其应用数据库具备必要的安全措施，防止未授权访问，例如某个用户向他人清单中添加任务？
在创建应用的提示过程中，这一关键方面并未被提及，从而可能留下未被审视的漏洞。缺乏技术背景的用户可能难以评估和处理这些安全问题。
对开发者来说，Lovable 真的更快吗？
对于已经拥有自有工具和代码库的开发者来说，问题在于：Lovable 真的更快吗？
许多开发者通过积累内部的代码片段和模块打磨出了自己的能力库，这些通常涵盖支付、认证和 CRUD 等功能，并且贴合他们的风格与技术偏好。
Lovable 可能无法对所用技术提供同等程度的可控性，这对习惯于特定系统和工作流的人来说可能是劣势。尽管该平台易于快速做原型，开发者或许会发现继续使用现有工具与方法更高效，尤其是在无缝集成与熟悉度方面。
非程序员如何调试
虽然 Lovable 极大降低了无代码构建应用的门槛，但当自动化方案失效、需要手动介入时，非程序员应当如何处理，确实是个大问题。如果平台遇到无法自动解决的问题会怎样？当目标用户不具备编码技能时，谁来解决这些瓶颈？
无法深入代码的情况下，非编码者可能会束手无策，不知下一步如何进行。这种依赖可能导致项目停滞与挫败，最终不得不雇佣程序员或寻求外部帮助，从而带来额外成本与延误。
结语
总的来说，尽管 Lovable 让应用开发触手可及，但对非程序员而言，其成功与否很大程度上取决于在超出简单提示的复杂情境中，平台对用户的支持力度。
我认为 Lovable 确实兑现了“让每个人都能开发应用”的承诺。即便每天只能发送五条提示，我们仍能高效构建出可用的应用。
该平台展现出强大的复杂流程处理能力，允许我们进行细致的应用自定义。这意味着即使在有限的交互中，我们也能将创意应用想法变成可运行的应用程序。