Skip to main content

视频教程 FAQ

观看这些视频，全面了解如何使用 Lovable 构建应用。

欢迎使用 Lovable​

Lovable 101
  1. Lovable 基础入门
  2. 理解界面和控件
  3. 使用编辑功能和版本历史
  4. 实现认证和用户管理
  5. 使用 Supabase 数据库和边缘函数
  6. GitHub 集成与代码管理
  7. 分享项目并获取社区反馈
  8. 探索其他资源和模板

Lovable 教程​

构建一个 AI 驱动的卡路里追踪 Web 应用

本教程将指导您使用 Lovable 创建一个 AI 驱动的卡路里追踪应用，包括认证、美观的响应式设计、OpenAI 集成，以及部署到生产环境。

1. 建立基础

任何 Lovable 项目的基石都是一个良好的提示。对于这个应用，以下是一个示例：

创建一个卡路里追踪应用，具有以下功能：
登陆页、仪表盘和餐食页。
餐食描述或图像的输入字段，由 GPT-4 提供分析支持。
每日进度追踪，并与 Supabase 集成用于认证和数据库管理。
美观且移动响应式的 UI。

一旦 Lovable 生成 UI 骨架：

  • 查看导航设置和登陆页设计。
  • 通过迭代提示来完善布局，并确保移动响应式。

请明确从 UI 开始。Lovable 在任务分解为清晰步骤时表现最佳。例如，在提示中早期概述导航、页面结构和设计主题。

2. 设计 UI

Lovable 强调逐步方法，类似于建造一座大楼：

  • 先搭脚手架：规划应用结构（例如，用户体验流程、页面布局）。
  • 添加第一层：创建带有基本设计元素的空页面。
  • 完善细节：添加颜色、动画和移动响应式。

如果您有 Figma 中的预制设计，可以截图并将其包含在 Lovable 提示中。提供高分辨率图像可获得更好的结果。

3. 集成 Supabase 用于后端和认证

UI 准备好后，是时候添加后端功能了：

  1. 设置一个 Supabase 账户 并创建一个项目。
  2. 通过按下“连接 Supabase”按钮将其链接到 Lovable。
  3. 对于数据存储，Lovable 会生成 SQL 表。例如：
  • 一个 profiles 表，用于存储用户信息。
  • 一个 meals 表，与用户关联，用于追踪每日记录。

在 Supabase 中使用行级安全（RLS）规则确保用户隐私。Lovable 可以自动为您处理。

4. 集成 OpenAI 用于餐食分析

这个应用的亮点在于其 AI 功能。要分析餐食：

  1. 从开发人员仪表板获取 OpenAI API 密钥。
  2. 使用 GPT-4 分析餐食描述或图像。
  3. 将 API 密钥安全存储在边缘函数中，以防止未授权访问。

要包含的功能：

  • 分析餐食描述：估算营养值（卡路里、蛋白质、碳水化合物和脂肪）。
  • 图像识别：上传餐食照片，GPT-4 会提取描述和营养数据。

OpenAI 集成的提示：

  • 使用 函数调用 获取结构化响应，确保数据格式正确以插入数据库。
  • 通过让应用分析简单餐食条目（如“2 个鸡蛋”）来测试功能。

5. 使用 Stripe 实现支付

要对应用进行货币化，请添加基于订阅的支付：

  1. 创建一个 Stripe 账户并设置产品（例如，“标准计划”每月 12 美元）。
  2. 通过添加 API 密钥和产品价格 ID 将 Stripe 与 Lovable 集成。
  3. 将非付费用户重定向到登陆页。只有付费用户才能访问主应用。

其他提示：

  • 启用 Stripe 的 客户门户，让用户管理订阅（例如，取消或更新支付方式）。
  • 在 Stripe 的测试模式中使用提供的测试信用卡详细信息进行测试。

6. 测试和调试

错误是开发过程的自然部分，Lovable 简化了调试：

  • 出现构建错误时，使用 “尝试修复” 按钮。
  • 对于后端问题，检查 Supabase 日志以获取详细错误报告。
  • 如果部署到 Netlify，请查看部署日志。分享日志给 Lovable 以获取定制修复。

如果遇到问题，使用 Lovable 的“还原”功能还原到先前版本。这可以节省积分和时间。

7. 部署您的应用

应用准备好后，使用 Lovable 或 Netlify 进行部署：

  1. 使用 Lovable 的部署功能在默认域名上托管应用。
  2. 对于自定义域名：
  • 将您的 GitHub 仓库连接到 Netlify。
  • 购买域名并配置 DNS 设置以链接到 Netlify。

更新应用的元数据（网站图标、元标签、OG 图像），以提升品牌和 SEO。

使用 Groq API 构建一个 SaaS 登陆页

在本教程中，我们将向您展示如何使用 Lovable、21st.dev 和 Supabase 创建一个令人惊艳的、完全交互式的 AI 驱动电子邮件助手登陆页——包括动画、API 集成和无缝部署！

  • AI 驱动的设计和 UI 增强
  • 添加动画和交互元素
  • 与 Groq API 集成 AI 电子邮件增强功能
  • 设置带有 Resend 的联系表单
  • 使用 Lovable Launch 部署页面
构建一个反馈工具

本演示展示了 Lovable 的快速迭代能力和生产就绪结果。

  1. 认证
  • 用户可以使用 Supabase 集成进行注册、登录和管理个人资料。
  • 安全的用户会话启用个性化体验。
  1. 反馈提交和投票
  • 用户可以提交反馈，包括标题、描述和图像。
  • 每个反馈条目显示投票计数，并支持实时点赞。
  1. 带有 AI 摘要的管理仪表盘
  • 管理员可以查看所有反馈、按投票过滤和排序条目。
  • 使用 OpenAI 和 Supabase 边缘函数的 AI 驱动摘要识别可操作洞见。
  1. 用户存在追踪

实时存在指示器显示平台上的活跃用户。

  1. 详细反馈页和评论

每个反馈条目都有一个专用页面，用于讨论，让团队协作并高效优先排序。

  1. 文件附件

用户可以使用 Supabase 的存储功能安全附加图像到反馈。

构建一个产品化开发机构

本演示的目标是构建一个应用，让开发人员、设计师或顾问提供基于订阅的服务——灵感来源于像 DesignJoy 这样的平台。

  1. 认证和用户管理

认证是第一个实现的功能，为管理用户建立稳健框架。团队强调在扩展应用时尽早集成认证的重要性。

  • 使用 Supabase 集成进行用户注册、登录和个人资料管理。
  • 持久的用户会话提升应用可用性。
  1. Stripe 订阅集成

演示展示了如何集成 Stripe 用于订阅管理：

  • 让用户订阅不同定价层。
  • 管理订阅状态，确保只有付费用户访问高级功能。
  1. 仪表盘和任务管理
  • 用户专属仪表盘，带有任务板和拖放功能。
  • 实时任务更新实现无缝协作。
  1. AI 聊天机器人

演示以集成 AI 聊天机器人结束，展示了 OpenAI 如何为应用添加动态功能。此功能可扩展为虚拟助理、礼宾服务或数据查询接口。

  • 集成 OpenAI 以提供一个能智能响应用户查询的聊天机器人。
  • 在单个提示中构建，展示了 Lovable 的高效性。
  1. 迭代调试和完善

团队处理实时调试挑战，提供宝贵见解。技术包括：

  • 使用控制台日志和错误消息识别问题。
  • 还原到先前应用版本以避免卡在故障状态。
  • 使用详细提示指导 Lovable 的 AI 确保准确修复。
使用 Lovable 的提示建议

在本教程中，我们深入探讨了 AI 驱动的应用开发、提示工程和工作流自动化，与 Lovable 的特邀嘉宾 Mark Kashef 一起！

  • 理解有效的 AI 提示
  • 提示工程的四个层级
  • 元提示技术和最佳实践
  • AI 工作流的调试策略
  • 使用 Lovable 和 Make.com 构建 AI 应用
  • 集成视觉编辑和 Tailwind CSS 用于 UI 设计
使用 Supabase 和 Lovable 构建 Luma 复制版

在本教程中，我们将实时构建一个 Luma 风格的事件平台，使用 Lovable 和 Supabase！

  • 如何将 Supabase 与 Lovable 集成
  • 设置认证和用户管理
  • 配置数据库和实时评论
  • 测试性能和处理多个用户
  • 实时调试和性能优化
构建一个 AI 增强的 Web 应用

在本教程中，我们将向您展示如何使用 Lovable（一个 AI 增强的无代码构建器）创建全栈日记应用，而无需编写一行代码！

  • 即时设计应用 UI
  • 上传您的设计并生成可运行的应用
  • 连接 Supabase 用于后端和认证
  • 实现 GPT-4o 用于 AI 驱动功能
  • 在几分钟内部署全栈应用！
使用 Resend 构建一个简单 CRM

在本教程中，我们将指导您使用 Lovable 进行开发、Supabase 进行数据存储，以及 Resend 进行电子邮件自动化，创建一个简单而强大的 CRM。

  • Resend 如何用于电子邮件自动化
  • 使用 Supabase 设置认证电子邮件
  • 构建管理仪表盘和联系人管理系统
  • 创建和自定义电子邮件模板
  • 添加新闻订阅和广播电子邮件功能
在 Web 开发中构建交互元素

使用 Lovable 的最新更新，构建引人入胜的交互式 Web 体验变得更加容易！

  1. 使用视觉编辑轻松自定义 UI

Lovable 的最大升级之一是能够在不消耗 AI 积分的情况下即时修改 UI 元素。您现在可以：

  • 直接在项目中编辑文本。
  • 实时调整按钮颜色和样式。
  • 无缝上传和交换图像。
  • 悬停在元素上进行快速调整。

用户现在可以轻松选择文本、更改颜色或交换图标，而无需 AI 干预——这让设计迭代过程更顺畅。

  1. 高级调试和 API 错误处理

此前，用户在处理第三方 API 集成错误时面临挑战。Lovable 现在：

  • 提供更丰富的错误消息，便于调试。
  • 消除无关弹出窗口，提高对关键问题的关注。
  • 启用 AI 驱动的错误检测以自动修复。

Lovable 现在会将错误上下文直接反馈给其 AI，从而决定何时处理问题以及如何修复，而不是用通用弹出窗口淹没用户。

  1. 创建动态背景和动画

Lovable 现在支持无缝集成使用 p5.js 和其他库的动画和交互元素。

示例项目：带有交互式旗帜的旅行社网站​

最近的实时演示展示了如何构建一个旅行社登陆页，功能包括：

  1. 动画英雄部分，旗帜动态出现并响应鼠标交互。
  2. 粘性滚动部分，根据用户滚动位置进行更改。
  3. 交互式悬停效果，图像对用户动作做出反应。

如何实现动画效果

要创建这些效果，用户遵循以下简单过程：

  • 定义所需动画：让背景与浮动元素互动，当悬停时元素移动。
  • 使用 p5.js 生成效果：实现色差烟雾模式。将静态图像替换为动态旗帜动画。
  • 使用基于物理的交互增强用户体验：让元素根据用户动作动态移动。

如果动画不起作用，使用 Lovable 的聊天模式通过逐步 AI 指导进行调试和完善。

  1. 从外部库导入自定义元素

使用 21st.dev，用户现在可以无缝将预构建 UI 组件集成到 Lovable 项目中。

  1. 浏览 21st.dev 以获取按钮设计。
  2. 复制 AI 生成的提示。
  3. 将其粘贴到 Lovable 中并替换现有按钮。

这种方法加速设计工作流程，并允许创建更精致、一致的界面。

相同方法适用于从 motion.dev 导入动画预设，从而更轻松地添加高质量的动态效果，而无需自定义编码。

Clerk 认证、自定义域名和等待列表

在本教程中，我们将指导您使用 Lovable 和 Clerk 构建一个 自定义 CRM（客户关系管理系统）。

如何使用 Lovable 和 Make 构建一个自定义 CRM

在本教程中，我们将指导您使用 Lovable 和 Make 构建一个 自定义 CRM（客户关系管理系统）。

在 1 小时内构建一个价值 10,000 美元的登陆页

构建、品牌化和发布一个真实的微型 SaaS，实时演示！​

学习西班牙语从未如此互动！想象一个应用，不仅通过对话教您西班牙语，还创建实时语音交互、动态课程和视觉吸引人的内容——全部由 AI 驱动。本教程将逐步指导您跟随 Kristian 和 Harry 的构建过程：

步骤 1：如何设计核心功能
  1. 如何奠定基础

在实现 AI 功能之前，我们专注于使用 Lovable 为应用 构建坚实基础，包括设置认证、结构化仪表盘和用户管理。

  1. 如何设置认证系统
  • 集成 Supabase 用于后端认证。
  • 启用使用电子邮件和密码的注册/登录。
  • 创建个人资料系统以存储用户偏好和学习进度。
  1. 如何设计仪表盘和导航
  • 设计一个直观的侧边栏用于导航。
  • 创建聊天、课程和用户设置部分。
  • 确保响应式 UI，在不同设备上提供无缝体验。
  1. 如何管理用户个人资料和数据存储
  • 添加数据库结构以存储用户进度。
  • 设计个人资料管理设置，让用户调整学习偏好。
步骤 2：如何使用 Replicate 实现 AI 驱动的学习功能
  1. 如何创建 AI 生成的课程

为了让学习更具互动性，我们使用 OpenAI 的 GPT 模型实现了 AI 驱动的课程生成系统。它的运作方式如下：

  • 用户选择一个主题（例如，“烧烤时要问的问题”）。
  • Lovable 调用 OpenAI 边缘函数生成 10 个引人入胜的西班牙语问题。
  • 用户完成测验、追踪进度，并接收 AI 对答案的反馈。
  1. 如何提升用户参与度
  • 动态生成的问题：每个测验都是 AI 生成的，确保每次都有新鲜、独特的内容。
  • 交互式反馈：AI 为正确和错误答案提供解释，以提升学习效果。
  • 进度追踪：用户可以保存并重新查看课程，提升保留和练习。
  1. 如何使用 Replicate 提升视觉参与度

为了添加视觉学习元素，我们集成了 Replicate's Flux Schnell 图像生成模型：

  • 自动课程横幅：每个课程动态生成与主题匹配的图像。
  • 视觉沉浸式体验：AI 驱动的视觉增强用户参与度和保留。
  • 快速图像处理：使用 Replicate 的 API，图像实时生成而不影响体验。
  1. 如何实现实时语音对话

应用开发的一个主要里程碑是添加 实时西班牙语练习，使用 OpenAI 的实时 WebRTC API：

  • 交互式 AI 导师：用户可以直接与 AI 进行西班牙语对话。
  • 发音辅助：AI 提供实时更正和建议。
  • 无缝对话：对话流程自然，就像与人类导师互动一样。
步骤 3：如何为应用品牌化
  1. 如何确立概念和受众

在品牌化之前，我们定义了核心目标：

  • AI 驱动的聊天 用于实时西班牙语对话。
  • 自动测验 用于快速练习会话。
  • 结构化学习，包括课程存储和进度追踪。

这有助于塑造我们的品牌选择，确保它们与应用目的一致。

  1. 如何处理命名和域名选择

我们选择了简短、易记的名称，以反映 学习之旅。使用 AI 进行头脑风暴，最终选定 Ruta（西班牙语中“路线”或“路径”的意思）。

过程：

  • 头脑风暴名称 使用 AI 生成吸引人的西班牙语词汇。
  • 测试选项 如“Camino”和“Verbo”，但“Ruta”脱颖而出。
  • 检查域名可用性 并立即获取 rutaapp.com。
  1. 如何创建视觉标识

我们快速设计了品牌：

  • 徽标：一个 指南针主题 图标，从设计库中获取并在 Figma 中编辑。
  • 字体配对：使用 大胆的现代字体 用于徽标，以及易读的 UI 字体。
  • 颜色调色板：一个 Tailwind CSS 蓝色方案，象征旅行和发现。
  • 风格灵感：尝试 新粗野主义，调整对比度、阴影和边框以创建视觉吸引力的 UI。
  1. 如何构建连贯的用户体验

使用 Lovable，我们确保 视觉一致性 贯穿整个应用：

  • 登陆页：AI 生成的动态、引人入胜的英雄部分。
  • 仪表盘和课程页：设计以匹配品牌标识。
  • 迭代样式：应用 新粗野主义 元素来测试不同设计风格。
  • 用户流程测试：确保从注册到实时聊天的导航顺畅。
步骤 4：最终调整、重大决策和实时发布

社区教程​

有哪些社区教程可用
  • 构建一个汽车提示工程代理
  • 构建一个 SaaS 登陆页
  • 使用 Supabase 和 Stripe 构建一个 AI 编码代理
  • 构建一个基于聊天的界面
  • 构建一个课程平台
  • 使用 Supabase 构建一个 SaaS 启动项目
  • 使用 OpenAI API 构建一个 AI 驱动的 Web 应用
  • 构建一个 SEO 登陆页
  • 构建一个营销登陆页
  • 构建一个待办事项列表应用
  • 构建 AI 代理
  • 构建一个食谱追踪应用
  • 构建一个全栈社交网络应用
  • Lovable + Cursor
  • 构建一个文本到 Web 应用平台
  • 构建一个 AI 驱动的笔记记录器
  • 构建一个财富追踪应用
  • 构建一个 SEO 引流网站
使用高级故障排除和 Cursor 构建一个招聘平台
  1. 从灵感开始

每个项目都从清晰的愿景开始。对于这个 MVP，客户想要一个 AI 驱动的仪表盘。

要启动设计过程：

  • 截取相关登陆页的屏幕截图。
  • 让 ChatGPT 详细描述设计——布局、部分、颜色和字体。
  • 使用此分解作为 在 Lovable 中构建的基础。

详细描述这个登陆页，包括布局、部分、颜色和字体。

  1. 使用 Lovable 构建核心

一旦蓝图准备好，Lovable 处理了 整个应用基础。

  1. GitHub 集成

Lovable 自动为您的项目创建一个 GitHub 仓库，轻松同步更新。

工作流程：

  • 在 Lovable 中生成仓库。
  • 将其转移到您的 GitHub 账户。
  • 将其克隆到 Cursor 中进行高级编码。

这让一切保持井井有条，并在需要自定义逻辑时更易于开发。

  1. Supabase 用于认证和数据库

通过 Supabase 集成，后端设置变得轻而易举。

  • 添加认证 用于用户注册/登录。
  • 设置数据库 以管理个人资料和应用数据。
  • 连接 API 而无需编写冗余样板代码。

为应用添加 Supabase 认证，让用户使用电子邮件注册和登录。

  1. 使用 Resend 进行电子邮件自动化

为了确保顺畅通信，Lovable 的 Resend 集成 处理事务性电子邮件。

  • 欢迎电子邮件 用于新用户。
  • 基于动作触发的通知 在应用内。

使用 Resend 设置电子邮件工作流程，在用户注册时发送欢迎电子邮件，并在他们完成动作时发送通知。

  1. 与代码库聊天

Lovable 的内置 聊天功能 让管理大型项目变得轻松。

您可以：

  • 询问 PRD 中哪些功能已完成。
  • 快速引用任务分解。
  • 立即获取项目高层概述。

基于 PRD 和任务分解，列出所有已完成功能并突出待办任务。

此功能 节省数小时，让团队保持一致。

  1. 使用 OpenAI 实现 AI 驱动功能

应用需要 AI 驱动的数据摘要。

  • Lovable 的 OpenAI 集成 让 API 设置变得无缝。
  • AI 功能在 几分钟内 即可运行。

集成 OpenAI API 以摘要用户输入数据，并在仪表盘上显示结果。

  1. 使用 Replicate 进行 AI 图像生成

对于 AI 驱动的视觉，Replicate 集成 让用户动态生成图像。

  • 启用 自定义 AI 生成视觉 在应用内。
  • 需要最少的配置。

添加 Replicate 集成，根据用户输入生成 AI 驱动的图像。

  1. 使用 Stripe 进行支付

处理 订阅和交易 时，Stripe 集成变得轻松。

  • 设置支付工作流程 用于不同计划。
  • 测试交易 以确保可靠性。
  • 同步 Stripe 仪表盘 以供客户查看。

将 Stripe 集成到应用中，允许订阅支付，包括用户管理计划的仪表盘。

  1. 从 Lovable 到 Cursor 的最终化

应用功能齐全后，将其 同步到 GitHub 并导入 Cursor 用于：

  • UI 完善
  • 高级后端逻辑
  • 最终调试和优化

Cursor 提供了一个 开发友好环境，在部署前完善项目。

这个流畅工作流程——ChatGPT 用于规划、Lovable 用于构建、Cursor 用于完善——显著 减少 MVP 开发时间。

使用 Lovable 构建一个 MVP
构建一个商业报价比较工具
构建一个连接 Airtable 的网站
构建一个响应式搜索栏
为个人和家庭构建一个个性化医疗管理应用
构建一个宠物商店应用
构建一个智能照片整理器
构建一个个人网站
构建一个 YouTube 克隆版
使用 Zapier 和 Lovable 构建一个 AI 自动化工具
构建一个 Trickle AI 评论克隆版
构建一个 Trello 克隆版
构建一个学生发现平台
构建一个 AI 书籍生成器
构建一个 PDF 编辑器
构建一个加密货币仪表盘
使用 Firecrawl 构建一个 Shopify 抓取工具

更多视频可在此处找到：这里。

与其他工具的比较​

AI 编码工具
Bolt 与 Lovable 的比较
Databutton 与 Lovable 的比较
Figma 与 Lovable 的比较