Skip to main content

SaaS

欢迎使用 Lovable.dev 构建 SaaS 应用的终极指南。

本文档将引导您构建、扩展和部署功能完备的 SaaS 产品，而无需编写任何代码——除非您主动选择。

逐步过程​

  1. 从 UI 开始

为什么：从应用的结构和布局入手，以减少错误并提前规划。

如何操作：

  • 编写一个概述页面和用户流程的提示。
  • 可选地添加屏幕截图（例如 Figma 或 Excalidraw）。
  • 最初仅关注前端部分。

提示示例：

Create an AI journaling app with:
- Landing page with Get Started CTA
- Main app with sidebar to view/edit logs
- Chat page to ask questions based on past entries
  1. 连接后端（Supabase）

为什么：安全地存储和检索用户数据。

如何操作：

  • 在 Lovable 编辑器中点击 Supabase 按钮。
  • 创建并连接 Supabase 项目。
  • 在开发模式下禁用电子邮件验证，以提升效率。
  • 为日志、用户、餐食等定义数据库模式。

信息：您完全拥有自己的数据和模式。Lovable 仅简化了设置过程。

  1. 添加认证

Lovable 默认提供电子邮件/密码登录。您可以：

  • 当用户点击 CTA 时，重定向到注册页面。
  • 将条目或餐食链接到已认证的用户。

提示示例：

Add sign up and login. Redirect to sign-up on 'Get Started'.
  1. 构建核心功能

每个应用功能都是逐步构建的：

日记应用：​

  • 评估心情、精力及生产力水平。
  • 保存和更新条目。
  • 在侧边栏中查看过去的日志。

卡路里追踪器：​

  • 输入或上传餐食信息。
  • 使用 GPT-4 估算营养成分（蛋白质、脂肪、碳水化合物、kcal）。
  • 通过图标和圆形进度条展示视觉统计。

提示：

  • 使用选择工具针对特定部分。
  • 上传屏幕截图来指导布局或逻辑。
  1. 集成 AI（OpenAI）

使用 GPT-4 实现：

  • 日记分析。
  • 餐食分解。
  • 对话式洞见。

如何操作：

  • 在 Supabase 中设置 Edge Functions。
  • 通过 Lovable 的安全后端提示添加 OpenAI API 密钥。
  • 确保 AI 可以访问动态用户数据（条目或餐食）。

提示示例：

Create chat page using GPT-4.
Include journal entries in the prompt dynamically.
Use function calling to return structured nutrition data.
  1. 添加 Stripe 支付（可选）

Lovable 支持使用 Edge Functions 的 Stripe 订阅支付。

如何操作：

  1. 创建 Stripe 产品和价格 ID。
  2. 将 Stripe API 密钥添加到 Lovable。
  3. 定义逻辑：仅限付费用户访问主应用。
  4. 添加客户门户来管理账单。

提示示例：

Add recurring payments via Stripe.
If not subscribed, redirect user to checkout.

提示：Stripe 设置需要 Stripe 账户。在开发时使用测试模式。

  1. 部署与发布
  • 从 Lovable 连接 GitHub 仓库。
  • 点击“发布”以在 .lovable.app 域名上上线。
  • 使用自定义域名。

📌 参考 Lovable Docs → Custom Domains 以获取完整指南。

  1. 启动与分享

提交到 Lovable Launch 以获得曝光。

用户可以：

  • Remix 您的项目。
  • 查看您的提示。
  • 立即测试您的 SaaS 产品。

SaaS 开发者的提示​

保持清晰

  • 始终描述您想要什么和您看到什么。
  • 使用屏幕截图来澄清问题或布局。

逐步工作

  • 先 UI → 数据库 → 认证 → 核心功能 → AI → 支付。

专业调试

  • 使用聊天模式修复构建错误或逻辑问题。
  • 如必要，撤销更改（不会影响数据库模式）。

节省令牌

  • 使用自定义知识存储一致的指令（主题、移动响应性）。

高级功能​

认证
  • 通过 Supabase 的电子邮件/密码认证。
  • 在开发模式下关闭验证。
与 AI 聊天
  • 由 GPT-4 驱动的聊天。
  • 日记上下文或餐食上下文。
  • 使用 Markdown 格式化输出以使其更整洁。
视觉仪表板
  • 使用图标和进度条（例如 21st.dev 组件）。
  • 每周和每日图表。
组件重构
  • Lovable 会警告文件或组件过长。
  • 接受“Yes”以自动重构为干净的块。
手动代码编辑（可选）
  • 连接 GitHub 仓库。
  • 使用 Lovable 的内置 VS Code 编辑器。
  • 进行小更改以优化，而不消耗积分。
部署与托管
  1. Lovable 发布
  • 点击“发布”以在 .lovable.app 域名上上线。
  1. Netlify + GitHub
  • 从 Lovable 连接 GitHub 仓库。
  • 使用 Netlify 部署。
  • 使用自定义域名。

📌 参考 Lovable Docs → Custom Domains 以获取完整指南。

其他教程​