2天速成：利用Lovable、Supabase和Netlify打造并部署Web应用

对于许多有想法但缺乏时间与资源的开发者而言，自主创建应用曾是一个遥不可及的梦想。

随着大型语言模型（LLMs）的飞速发展，非开发者群体构建应用或软件产品的机会显著增加。正如安德烈·卡帕西（Andrej Karpathy）所强调的“vibe coding”概念，编程的门槛正被大幅降低。

为了验证“vibe coding”的潜力，并尝试在短短两天内构建并部署一个Web应用，一项实验性项目应运而生。该项目的目标并非追求完美，而是旨在交付一个功能完备的最小可行产品（MVP）。

本文将全面概述整个开发过程，包括所用工具的实用技巧和相关成本。如果读者希望抢先体验最终产品，可访问 drawcraft.io。

在此项目中，核心工具包括 Lovable、Supabase 和 Netlify。

• Lovable：一款备受推崇的AI应用构建器。
• Supabase：一个处理所有后端相关流程的开发平台，其与Lovable的无缝集成是一大优势。
• Netlify：用于应用部署，并可选择性地处理域名购买事宜。

在开始使用这些工具之前，建议先行观看一些关于其使用和开发的YouTube视频。值得强调的是，本文内容与上述任何工具提供商均无利益关联。

使用Lovable构建应用

Lovable 提供免费和付费套餐。其专业版（Pro Plan）包含多种定价选项，对应不同的积分额度。本项目选择了每月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


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.



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.



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 生成的初始设计效果良好，但仍需进行一些微调。在首次提示词之后，主要通过包含单一指令的消息进行迭代优化。值得一提的是，用户也可以直接在Lovable的用户界面上编辑代码，且这些代码修改不会消耗积分。

Supabase集成

尽管在最初的提示词中包含了添加用户认证和订阅功能的要求，但由于缺乏合适的后端支持，这些功能未能正常运行。此时，Supabase 便发挥了关键作用。

将Supabase集成到Lovable项目中非常便捷。用户只需创建一个Supabase账户，然后按照Lovable用户界面上的指引，即可完成项目集成。

Supabase集成完成后，Lovable 能够自动编写代码，以实现用户认证、创建数据库表以及添加用于处理后端任务的边缘函数。

曾遇到的一个问题是，应用会持续发送请求来检查用户订阅状态。通过手动检查网络活动发现了此问题。为了让Lovable修复这个问题，需要通过数条指令。对于经验丰富的开发者而言，这可能是一个简单的修复，但为了快速推进并完全依赖Lovable，选择了这种方式。

Supabase 的免费额度很快被消耗殆尽，因此不得不升级到每月25美元的付费计划。此前提到的持续请求问题，很可能消耗了大部分免费额度。

GitHub集成

Lovable 使得GitHub账户集成变得非常简便。用户可以按照Lovable用户界面上的指示，完成集成并在GitHub中创建项目。

重要提示：Lovable 对项目所做的每一次更改，都会自动提交到 GitHub 上的默认分支。这是一种双向集成，因此如果用户通过 IDE 或 GitHub UI 在默认分支上进行修改，这些更改也会自动同步到 Lovable 项目中。

另一个在多分支工作时遇到的问题是：根据Lovable的文档，它总是提交到默认分支。项目初期，默认分支是main。然而，当创建新分支并将其设为默认分支时，Lovable并未同步这一变更，仍旧将提交推送到main分支。

虽然有YouTube视频曾展示在Lovable用户界面上更改分支的选项，但目前未能找到该选项，这可能意味着Lovable的用户界面已更新，该功能或许已不再存在。尽管这并未对项目构成实质性阻碍，但其解决方案仍有待探索。

应用部署

部署应用有多种选择。在这一步骤上，并未进行过多深思熟虑。鉴于此前看到有其他开发者使用Netlify，便决定尝试。

Netlify 提供免费套餐，其额度足以满足项目需求。该套餐提供300积分，每次部署消耗15积分。

创建账户后，用户可以按照指示，在Netlify上添加自己的GitHub项目。

用户可以免费使用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 美元（一年）。
• OpenAI API：提示词生成与测试的 API 调用费用 5 美元。

总计花费102美元，成功构建了首个Web应用。尽管这是一个功能相对简单的应用，但其核心目标在于验证是否能利用基于AI的工具，在短时间内实际构建出一个功能性网站。

值得注意的是，其中一些支出（如订阅费）也可用于其他项目。此后，开发者便可将更多创新想法付诸实践。