如何在-2-天内使用-Lovable-Supabase-和-Netlify-构建和部署应用程序

如何在 2 天内使用 Lovable、Supabase 和 Netlify 构建和部署应用程序

原文：towardsdatascience.com/how-i-built-and-deployed-an-app-in-2-days-with-lovable-supabase-and-netlify/

我一直想自己创造一些东西。我有想法，但没有时间和资源去实现它们。

随着 LLMs（例如 Andrej Karpathy 用“氛围编码”一词强调的）的进步，非开发者开发应用程序或其他软件产品的机会大大增加。

我称这种新的编码方式为“氛围编码”，其中你完全沉浸在其中，拥抱指数增长，并忘记代码的存在。这是可能的，因为 LLMs（例如 Cursor Composer w Sonnet）变得越来越好。此外，我只是用 SuperWhisper 与 Composer 交谈…

— Andrej Karpathy (@karpathy) 2025 年 2 月 2 日

我想尝试氛围编码，并创建一个网络应用程序。这更像是一个实验，旨在证明我可以在两天内构建和部署一个应用程序。它不必完美，最小可行产品就能完成任务。

在这篇文章中，我将提供一个高级概述的过程，包括一些关于我使用的工具和我在它们上的花费的技巧和窍门。如果你想先看看最终产品，请访问 drawcraft.io。

在这个项目中，我使用了 Lovable、Supabase 和 Netlify。

• Lovable 是一个非常受欢迎的 AI 应用程序构建器。

• Supabase 是一个处理所有后端相关流程的开发平台。Lovable 和 Supabase 之间的无缝集成是一个重要的优势。

• Netlify 用于部署应用程序。它还处理域名购买（如果需要）。

在我开始使用这些工具之前，我观看了几个关于人们使用和开发这些工具的 YouTube 视频。我想指出的是，我与这些工具中的任何一方都没有任何关联。

使用 Lovable 进行构建

Lovable 提供免费和付费计划。专业计划有多种定价选项，不同积分数量。我购买了最便宜的每月 25 美元的计划，这给你 100 个积分。你每天还可以获得 5 个免费积分。

100 个积分并不完全等于 100 个提示，但你花费的积分数量与消息数量（即提示数量）成正比。

当你使用 Lovable 进行构建时，建议有一个详细的第一条提示，并包含清晰的指示。如果你写一个非常简单的第一条提示（例如，构建一个日历应用程序），你可能需要写很多消息（即花费积分）来定制它。此外，之后添加复杂功能可能比一开始就声明它们稍微复杂一些。

话虽如此，这是我使用的第一个提示：

## Objective
Develop a web application that enables users to create customized drawing images using a large language model (LLM).

## Core Features

1\. **User Input and Drawing Generation**
   - Users can input a description of the drawing they desire, such as "Bugatti car," "Farmhouse," "Father and Kid," or "Cristiano Ronaldo."
   - Users select a difficulty level for the drawing: Beginner, Medium, or Advanced. 
     - Beginner: Suitable for small children with simple, distinct lines.
     - Medium: Moderate complexity with more details.
     - Advanced: Highly detailed and complex drawings.
   - The application reformats the user's input into a structured prompt for the LLM to generate the drawing.
   - Users can view and download the generated image in PNG format.

2\. **User Interface and Experience**
   - Design a clean and modern landing page, similar to a SaaS platform, using whites and soft colors for a minimalist aesthetic.
   - Ensure the interface is intuitive and user-friendly, facilitating easy navigation and interaction.

3\. **Authentication and Subscription**
   - Implement user authentication and signup functionality.
   - Offer two subscription tiers:
     - **Free Plan**: Allows up to 3 drawings per month.
     - **Pro Plan**: Allows up to 20 drawings per month at a cost of $20 per month.

## Technical Requirements

- **Frontend**: Use modern web technologies to create a responsive and visually appealing user interface.
- **Backend**: Develop a robust backend to handle user requests, manage subscriptions, and interface with the LLM for drawing generation.
- **Database**: Implement a database to store user information, subscription details, and drawing history.
- **Security**: Ensure secure handling of user data and transactions, adhering to best practices in web security.

## Additional Considerations

- Optimize the application for performance and scalability to handle varying loads and user demands.
- Provide clear instructions and support for users to maximize their experience with the application.
- Consider implementing analytics to track user engagement and drawing preferences for future improvements.

第一个设计结果相当不错，但我不得不做一些调整。在初始提示之后，我主要使用只有一条指令的消息。你也可以在 Lovable UI 上编辑代码来做出更改，这些更改不会消耗你的积分。

Supabase 集成

虽然我在初始提示中提到要添加身份验证和订阅，但由于缺乏适当的后端，它并没有起作用。这就是 Supabase 发挥作用的地方。

在 Lovable 项目中添加 Supabase 非常简单。你只需创建一个 Supabase 账户，然后按照步骤在 Lovable UI 上将其集成到你的项目中。

一旦完成 Supabase 集成，Lovable 就可以编写代码来添加用户身份验证、创建数据库表、添加边缘函数来处理后端任务。

我遇到的另一个问题是它持续发送请求来检查用户订阅状态。我通过手动检查网络活动来检测这个问题。我不得不花几条消息让 Lovable 修复这个问题。如果你是开发者，这可能是一个简单的修复。我自己可以解决这个问题，但花了一些时间。我只是想快速行动并使用 Lovable 做所有事情。

Supabase 免费层限制很快就被用完了，我不得不升级到付费计划，每月费用为 25 美元。我认为我提到的问题消耗了我大部分的限制。

GitHub 集成

Lovable 使得集成 GitHub 账户变得非常简单。你可以按照 Lovable UI 上的说明完成集成，并在 GitHub 中创建项目。

重要：请记住，Lovable 在你的项目上所做的每个更改都会自动提交到 GitHub 上的默认分支。这是一个双向集成，所以如果你使用 IDE 或 GitHub UI 在默认分支上做出更改，这些更改会自动应用到你的 Lovable 项目上。

我遇到的另一个问题是关于处理多个分支。在 Lovable 文档中，提到 Lovable 总是提交到默认分支。最初，默认分支是主分支。然而，当我创建了一个新的分支并将其设置为默认分支时，这个更改并没有在 Lovable 上反映出来。它仍然提交到主分支。

一段 YouTube 视频展示了在 Lovable UI 上更改分支的选项，但我找不到它。看起来 Lovable UI 在那之后有所改变。也许它已经不再存在了。这对我来说并不是一个障碍，所以我继续前进，但我确实想学习这个问题的解决方案。

部署应用

部署你的应用有许多替代方案。我没有在这个步骤上花太多心思。我看到一些人使用 Netlify，所以我只是想试一试。

Netlify 提供了一个免费计划，对我来说已经足够了。它给你 300 个积分，每次部署需要 15 个积分。

一旦你创建了账户，你可以按照说明将你的 GitHub 项目添加到 Netlify。

您可以使用 Netlify 提供的免费域名，或者通过 Netlify 购买自定义域名。当然，您也可以在其他地方购买域名并在 Netlify 上使用。

重要提示：默认情况下，Netlify 会在您对生产分支进行提交时自动部署您的网站。正如我之前提到的，Lovable 会自动将提交推送到默认分支。所以如果您的默认分支被用作生产分支，这绝对不是一种好做法，每次您在 Lovable 上做出更改时，Netlify 都会进行部署。问题是您会很快消耗掉您的免费 Netlify 积分。

Lovable 的表现

Lovable 出色地整合了一个完整的 Web 应用程序。然而，最终产品并不完美。一旦我部署了网站并开始使用它，我就发现了某些问题。幸运的是，这些问题都是小问题，并且我能够让 Lovable 修复它们。

我还想要在 drawcraft.io 上添加一些示例绘图。我尝试通过 Lovable 在聊天中附加绘图来完成，但失败了。然后，我在 GitHub UI 上上传了示例绘图，并要求 Lovable 在网站上使用这些图像创建一个“免费示例绘图”框，这样它就成功了。

我花费了多少钱

	成本（美元）	详细信息
Lovable	25	每月订阅费
Supabase	25	每月订阅费
drawcraft.io	47	1 年域名购买费用
OpenAI API	5	提示和测试 API 调用的费用

我总共花费了 102 美元来创建我的第一个 Web 应用程序。这是一个简单的应用程序，只做简单的事情，但我的目标是看看我是否真的能够使用基于 AI 的工具创建一个功能性的网站。

重要的是要注意，这些支出中的一些可以用作其他项目。现在，取决于我能否想出更多想法并将它们付诸行动。

感谢您的阅读。如果您有任何反馈，请告诉我。