视频教程

通过这些视频，全面了解如何在 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 进行身份验证和数据库管理。
   美观且适配移动端的用户界面。
   

   一旦 Lovable 生成了 UI 骨架：

   • 检查导航设置和着陆页设计。
   • 迭代优化提示，以改进布局并确保在移动端具有良好的响应效果。

   在提示中要明确说明从 UI 入手。将任务拆分为清晰的步骤时，Lovable 的效果最佳。例如，在提示中尽早列出导航、页面结构和设计主题。

2. 设计界面

   Lovable 强调循序渐进的方式，有点像搭建一座建筑：

   • 从脚手架开始：规划你的应用结构（例如用户体验流程、页面布局）。
   • 添加第一层：创建带有基础设计元素的空白页面。
   • 打磨细节：添加颜色、动效以及移动端的响应式表现。

   如果你在 Figma 中已有现成设计，可以截图并把它们放进你的 Lovable 提示中。提供高分辨率图片可以获得更好的效果。

3. 将 Supabase 集成为后端和身份验证服务

   当 UI 准备就绪后，就可以开始添加后端功能了：

   1. 注册一个 Supabase 账号 并创建一个项目。
   2. 点击 “Connect Supabase” 按钮，将其连接到 Lovable。
   3. 用于数据存储时，Lovable 会生成 SQL 表。例如：

   • 一个 profiles 表，用于存储用户信息。
   • 一个 meals 表，与用户关联，用于跟踪每日记录。

   在 Supabase 中使用行级安全（RLS）规则来保障用户隐私。Lovable 可以自动帮你处理这一点。

4. 集成 OpenAI 实现餐食分析

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

   1. 在开发者控制台获取 OpenAI API 密钥。
   2. 使用 GPT-4 来分析餐食描述或图片。
   3. 确保将 API 密钥安全地存储在 Edge Functions（边缘函数）中，以防止未经授权的访问。

   需要包含的功能：

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

   OpenAI 集成进阶技巧：

   • 使用 function calling 获取结构化响应，确保数据格式正确，便于插入数据库。
   • 通过让应用分析诸如“2 个鸡蛋”这样的简单餐食记录来测试功能。
5. 使用 Stripe 实现支付功能

   要让应用实现变现，可以添加基于订阅的支付功能：

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

   更多提示：

   • 启用 Stripe 的 客户门户（Customer Portal），让用户自行管理订阅（例如取消或更新支付方式）。
   • 在 Stripe 的测试模式中使用提供的测试信用卡信息来测试支付流程。
6. 测试和调试

   错误是开发过程中的自然一部分，而 Lovable 让调试变得更简单：

   • 每当出现构建错误时，请使用 “Try to Fix” 按钮。
   • 对于后端问题，请检查 Supabase 日志以获取详细的错误报告。
   • 如果部署到 Netlify，请查看部署日志中的构建问题。将日志分享给 Lovable，可以获得有针对性的修复建议。

   如果你遇到问题，可以使用 Lovable 的 “Revert” 功能恢复到之前的版本。这可以节省积分和时间。

7. 部署你的应用

   当你的应用准备好之后，可以使用 Lovable 或 Netlify 进行部署：

   1. 使用 Lovable 的部署功能，将应用托管到默认域名上。
   2. 如果需要使用自定义域名：

   • 将你的 GitHub 仓库 连接到 Netlify。
   • 购买一个域名，并配置 DNS 设置 将其指向 Netlify。

   更新应用的元数据（favicon、meta 标签、OG 图片），以提升品牌形象和 SEO 效果。

使用 Groq API 构建 SaaS 落地页

在本教程中，你将学习如何使用 Lovable、21st.dev 和 Supabase，为一款 AI 驱动的邮件助手创建一个令人惊艳、功能完整的交互式落地页——包括动画效果、API 集成以及无缝部署!

• AI 驱动的设计与界面优化
• 添加动画和交互元素
• 使用 Groq API 集成 AI 邮件增强功能
• 使用 Resend 设置联系表单
• 使用 Lovable Launch 部署页面

创建反馈工具

本次演示展示了 Lovable 的能力，可以快速迭代并交付可用于生产环境的成果。

1. Authentication

   • 用户可以通过 Supabase 集成完成注册、登录并管理个人资料。
   • 安全的用户会话可以为不同用户提供个性化体验。
2. Feedback Submission and Voting

   • 用户可以提交包含标题、描述和图片的反馈。
   • 每条反馈会显示投票数量，并支持实时点赞（投票）。
3. Admin Dashboard with AI Summaries

   • 管理员可以查看所有反馈，按投票数进行筛选并对条目排序。
   • 借助 OpenAI 和 Supabase Edge Functions 提供的 AI 驱动摘要功能，识别可执行的洞察。
4. User Presence Tracking

   实时在线状态指示器会显示当前在平台上的活跃用户。

5. Detailed Feedback Pages with Comments

   每条反馈都有一个专门的讨论页面，帮助团队高效协作并合理安排优先级。

6. File Attachments

   用户可以为反馈附加图片，并通过 Supabase 的存储功能进行安全保存。

打造产品化开发机构

本次演示的目标是构建一个应用，帮助开发者、设计师或顾问提供订阅制服务——这一业务模式的灵感来源于像 DesignJoy 这样的平台。

1. 身份验证和用户管理

   身份验证是首先实现的功能，为用户管理搭建了一个稳健的框架。团队强调了尽早集成身份验证的重要性，以避免在应用规模扩大时遇到问题。

   • 集成 Supabase，用于用户注册、登录和资料管理。
   • 持久化用户会话，以提升应用可用性。
2. Stripe 订阅集成

   本次演示展示了如何集成 Stripe 来进行订阅管理：

   • 让用户能够订阅不同的定价层级。
   • 管理订阅状态，确保只有付费用户才能访问高级功能。
3. 仪表板和任务管理

   • 针对不同用户的仪表板，包含任务看板和拖放功能。
   • 实时任务更新，支持顺畅协作。
4. AI 聊天机器人

   演示最后集成了一个 AI 聊天机器人，展示了如何利用 OpenAI 为应用添加动态功能。该功能可以扩展为虚拟助手、管家式服务或数据查询界面。

   • 集成 OpenAI，提供能够智能回应用户问题的聊天机器人。
   • 只用一个提示词就完成搭建，彰显了 Lovable 的高效性。
5. 迭代式调试和优化

   团队处理了实时调试中的各种挑战，分享了有关故障排除的实用经验。使用的技术包括：

   • 利用控制台日志和错误信息来定位问题。
   • 回退到之前的应用版本，避免卡在异常状态中。
   • 通过详细提示词引导 Lovable 的 AI，确保修复准确。

在 Lovable 中进行提示的技巧

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

• 理解高效的 AI 提示技巧
• 提示工程的四个层级
• 元提示技术与最佳实践
• AI 工作流的调试策略
• 使用 Lovable 和 Make.com 构建 AI 应用
• 集成 Visual Edits 和 Tailwind CSS 进行 UI 设计

使用 Supabase 和 Lovable 打造一个仿 Luma 应用

在本教程中，你将使用 Lovable 和 Supabase 构建一个类似 Luma 的活动平台 —— 现场演示！

• 如何将 Supabase 与 Lovable 集成
• 设置身份验证和用户管理
• 配置数据库和实时评论
• 测试性能并处理多用户访问
• 实时调试和性能优化

构建 AI 增强型 Web 应用程序

在本教程中，我们将向你演示如何使用 Lovable 这款由 AI 增强的无代码构建器，在完全不写一行代码的情况下创建一个全栈日记应用!

• 即刻设计你的应用 UI
• 上传你的设计并生成可用的应用
• 将 Supabase 用作后端和身份验证
• 集成 GPT-4o 打造 AI 驱动功能
• 在几分钟内部署一个全栈应用!

使用 Resend 构建一个简易 CRM 系统

在本教程中，我们将带你一步步创建一个简单但功能强大的 CRM 系统，使用 Lovable 进行开发，Supabase 进行数据存储，以及 Resend 实现邮件自动化。

• 如何使用 Resend 进行邮件自动化
• 使用 Supabase 设置身份验证邮件
• 构建管理后台仪表盘 & 联系人管理系统
• 创建和自定义邮件模板
• 添加新闻通讯订阅 & 群发邮件功能

在 Web 开发中构建交互式元素

借助 Lovable 的最新更新，构建引人入胜、交互性强的 Web 体验变得前所未有的轻松！

1. 通过可视化编辑轻松自定义 UI

   Lovable 的一大升级，是现在可以即时修改 UI 元素且不会消耗 AI 配额。你现在可以：

   • 直接在项目上编辑文本。
   • 实时调整按钮颜色和样式。
   • 无缝上传和替换图片。
   • 将鼠标悬停在元素上即可进行快速调整。

   用户现在可以直接选择文本、更改颜色或轻松替换图标，而无需依赖 AI 介入，从而让设计迭代过程更加顺畅。

2. 高级调试与 API 错误处理

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

   • 提供更丰富的错误信息，便于调试。
   • 消除无关弹窗，让你更专注于关键问题。
   • 启用 AI 驱动的错误检测，实现自动修复。

   Lovable 不再用千篇一律的弹窗淹没用户，而是将错误上下文直接传递给其 AI，由 AI 决定何时需要处理问题以及如何修复。

3. 创建动态背景和动画效果

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

   ​

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

   最近的一次直播演示展示了如何构建一个旅行社落地页，其中包括：

   1. 具备动画效果的主视觉区域，旗帜会根据鼠标交互动态出现和移动。
   2. 粘性滚动（sticky scroll）区域，会根据用户滚动位置发生变化。
   3. 交互式悬停效果，图片会对用户的移动做出反应。

   ​

   如何实现动画效果

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

   • 定义期望的动画：

   让背景变得可交互，包含悬浮元素，并在鼠标悬停时向外移动。

   • 使用 p5.js 生成效果：
     • 实现彩色烟雾图案效果。
     • 将静态图片替换为动态的国旗动画。
   • 通过基于物理的交互增强用户体验：
     • 让元素根据用户操作进行动态移动。

   如果动画没有正常工作，可以使用 Lovable 的 chat mode 来调试和优化效果，在 AI 的分步指导下逐步完成调整。

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

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

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

   这种方式可以加速设计工作流程，并让界面更加精致、视觉风格更统一。

   同样的方法也适用于从 motion.dev 导入动画预设，让你无需自定义编码即可更轻松地添加高质量的动效。

Clerk 身份验证、自定义域名和候补名单

在本教程中，我们将逐步演示如何使用 Lovable 和 Clerk 构建一个 自定义 CRM 系统（客户关系管理系统）。

如何使用 Lovable 和 Make 打造自定义 CRM

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

一小时打造价值 1 万美元的落地页

​

现场实战搭建、打造品牌并发布一个真正的微型 SaaS！

学习西班牙语从未如此有互动性！想象一款应用，不仅通过对话教你西班牙语，还能实现实时语音交互、动态课程和视觉效果出众的内容——完全由 AI 驱动。本教程会带你按步骤复现 Kristian 和 Harry 搭建的应用：

步骤 1：设计核心功能

1. 打好基础

   在实现 AI 功能之前，我们首先使用 Lovable 为应用构建了坚实的基础。这包括设置身份验证、搭建仪表盘结构，以及实现用户管理。

2. 身份验证系统

   • 集成 Supabase 用于后端身份验证。
   • 支持通过邮箱和密码进行注册/登录。
   • 创建了用于存储用户偏好和学习进度的用户资料系统。
3. 仪表盘与导航

   • 设计了直观的侧边栏导航。
   • 创建了聊天、课程和用户设置等版块。
   • 确保界面自适应，在各类设备上都能提供流畅体验。
4. 用户资料与数据存储

   • 添加了用于存储用户进度的数据库结构。
   • 设计了用户资料管理设置，用户可以在其中调整学习偏好。

步骤 2：使用 Replicate 实现 AI 驱动的学习功能

1. AI 生成课程

   为了让学习更具互动性，我们使用 OpenAI 的 GPT 模型 构建了一个由 AI 驱动的课程生成系统。其工作原理如下：

   1. 用户选择一个主题（例如，“在烧烤聚会上可以问的问题”）。
   2. Lovable 调用一个 OpenAI 边缘函数 来生成 10 个引人入胜的西班牙语问题。
   3. 用户完成测验、跟踪学习进度，并获得 AI 对其答案的反馈。
2. 提升用户参与度

   • 动态生成问题：每个测验都由 AI 生成，确保每次都有新鲜且独特的内容。
   • 互动反馈：AI 会对正确和错误的答案给出解释，以提升学习效果。
   • 进度跟踪：用户可以保存并重新学习课程，从而加强记忆与练习。
3. 使用 Replicate 提升视觉参与度

   为了加入视觉化学习元素，我们集成了 Replicate 的 Flux Schnell 图像生成模型：

   • 自动生成课程横幅：每门课程都会动态生成与主题匹配的图像。
   • 沉浸式视觉体验：由 AI 驱动的视觉效果可以增强用户参与度和记忆效果。
   • 快速图像处理：通过 Replicate 的 API，图像可以实时生成，而不会拖慢整体体验。
4. 实时语音对话

   应用开发过程中的一大里程碑，是通过 OpenAI 的实时 WebRTC API 增加了 实时西班牙语口语练习 功能：

   • 互动式 AI 导师：用户可以直接与 AI 对话，AI 会用西班牙语进行动态回应。
   • 发音辅助：AI 会提供实时纠正和建议。
   • 流畅对话体验：自然的对话流程让用户感觉就像是在与真人导师互动。

步骤 3：设置应用品牌

1. 确定概念和受众

   在打造品牌之前，我们先明确了核心目标：

   • 面向实时西班牙语对话的 AI 驱动聊天。
   • 用于快速练习环节的 自动测验。
   • 具备课程存储和进度跟踪的 结构化学习。

   这帮助我们做出品牌相关决策，并确保它们与应用的目标保持一致。

2. 命名与域名选择

   我们希望起一个简短、易记、能够体现学习旅程的名字。借助 AI 进行头脑风暴，最终确定了 Ruta（西班牙语中意为“路线”或“路径”）。

   ​

   流程：

   • 使用 AI 为朗朗上口的西班牙语单词进行名称头脑风暴。
   • 测试了多个选项，如 “Camino” 和 “Verbo”，但 “Ruta” 脱颖而出。
   • 检查域名可用性，并立即注册了 rutaapp.com。
3. 创建视觉识别体系

   我们快速设计了品牌：

   • Logo：一个从设计素材库获取并在 Figma 中编辑的罗盘主题图标。
   • 字体搭配：Logo 采用粗体、现代风格字体，应用界面使用易读的 UI 字体。
   • 配色方案：采用 Tailwind CSS 蓝色配色，象征旅行与探索。
   • 样式灵感：尝试了 neo-brutalism 新野兽派风格，通过调整对比度、阴影和边框，打造视觉上更具吸引力的 UI。
4. 构建一致的用户体验

   使用 Lovable，我们在整个应用中确保了视觉一致性：

   • 落地页：由 AI 生成，配有动态、吸引人的首屏区域。
   • 仪表盘和课程页面：样式与品牌形象保持统一。
   • 迭代式样式调整：应用 新野兽派元素，以测试不同的设计风格。
   • 用户流程测试：确保从注册到实时聊天的导航顺畅无缝。

Step 4：最终微调、关键押注与正式上线

​

社区教程

请在 这里 查看 Lovable 社区教程。