> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# 视频教程
> 通过这些视频，全面了解如何在 Lovable 上构建应用。
## 欢迎使用 Lovable
VIDEO
## Lovable 教程
VIDEO
在本教程中，我们将指导您使用 [Lovable](/zh/lovable-f9060f1e/lovable-f9060f1e/editor/main#build-an-ai-powered-calorie-tracking-webapp) 创建一个 AI 驱动的卡路里追踪应用，包含身份验证、精美的响应式设计、OpenAI 集成以及部署到生产环境。
任何 Lovable 项目的基础都是一个优质的提示。对于这个应用，这里有一个示例：
```
创建一个具有以下功能的卡路里追踪应用：
着陆页、仪表板和膳食页面。
用于输入膳食描述或图片的输入字段，由 GPT-4 提供分析支持。
每日进度追踪，并集成 Supabase 进行身份验证和数据库管理。
美观且适配移动端的用户界面。
```
一旦 Lovable 生成了 UI 骨架：
* 检查导航设置和着陆页设计。
* 迭代优化提示，以改进布局并确保在移动端具有良好的响应效果。
在提示中要明确说明从 UI 入手。将任务拆分为清晰的步骤时，Lovable 的效果最佳。例如，在提示中尽早列出导航、页面结构和设计主题。
Lovable 强调循序渐进的方式，有点像搭建一座建筑：
* 从**脚手架**开始：规划你的应用结构（例如用户体验流程、页面布局）。
* 添加**第一层**：创建带有基础设计元素的空白页面。
* 打磨**细节**：添加颜色、动效以及移动端的响应式表现。
如果你在 [Figma]() 中已有现成设计，可以截图并把它们放进你的 Lovable 提示中。提供高分辨率图片可以获得更好的效果。
当 UI 准备就绪后，就可以开始添加后端功能了：
1. 注册一个 [**Supabase**]() **账号** 并创建一个项目。
2. 点击 “Connect Supabase” 按钮，将其连接到 Lovable。
3. 用于数据存储时，Lovable 会生成 SQL 表。例如：
* 一个 `profiles` 表，用于存储用户信息。
* 一个 `meals` 表，与用户关联，用于跟踪每日记录。
在 Supabase 中使用行级安全（RLS）规则来保障用户隐私。Lovable 可以自动帮你处理这一点。
这个应用的魔力在于其 AI 功能。要分析餐食：
1. 在开发者控制台获取 [OpenAI API 密钥]()。
2. 使用 [GPT-4]() 来分析餐食描述或图片。
3. 确保将 API 密钥安全地存储在 Edge Functions（边缘函数）中，以防止未经授权的访问。
**需要包含的功能：**
* **分析餐食描述**：估算营养指标（卡路里、蛋白质、碳水化合物、脂肪）。
* **图像识别**：上传一张餐食照片，GPT-4 会提取描述和营养数据。
*OpenAI 集成进阶技巧：*
* 使用 **function calling** 获取结构化响应，确保数据格式正确，便于插入数据库。
* 通过让应用分析诸如“2 个鸡蛋”这样的简单餐食记录来测试功能。
要让应用实现变现，可以添加基于订阅的支付功能：
1. 创建一个 [Stripe]() 账户并设置一个产品（例如，每月 12 美元的 “Standard Plan”）。
2. 通过在 Lovable 中添加 API 密钥和产品价格 ID，将 Stripe 与 Lovable 集成。
3. 将未付费用户重定向到落地页。只有付费用户才能访问主应用。
*更多提示：*
* 启用 Stripe 的 **客户门户（Customer Portal）**，让用户自行管理订阅（例如取消或更新支付方式）。
* 在 Stripe 的测试模式中使用提供的测试信用卡信息来测试支付流程。
错误是开发过程中的自然一部分，而 Lovable 让调试变得更简单：
* 每当出现构建错误时，请使用 **"Try to Fix"** 按钮。
* 对于后端问题，请检查 Supabase 日志以获取详细的错误报告。
* 如果部署到 [Netlify]()，请查看部署日志中的构建问题。将日志分享给 Lovable，可以获得有针对性的修复建议。
如果你遇到问题，可以使用 Lovable 的 "Revert" 功能恢复到之前的版本。这可以节省积分和时间。
当你的应用准备好之后，可以使用 Lovable 或 Netlify 进行部署：
1. 使用 Lovable 的部署功能，将应用托管到默认域名上。
2. 如果需要使用自定义域名：
* 将你的 [GitHub 仓库]() 连接到 Netlify。
* 购买一个域名，并配置 [DNS 设置]() 将其指向 Netlify。
更新应用的元数据（favicon、meta 标签、OG 图片），以提升品牌形象和 SEO 效果。
VIDEO
在本教程中，你将学习如何使用 [Lovable](/zh/lovable-f9060f1e/lovable-f9060f1e/editor/main#build-a-saas-landing-page-with-groq-api)、21st.dev 和 Supabase，为一款 AI 驱动的邮件助手创建一个令人惊艳、功能完整的交互式落地页——包括动画效果、API 集成以及无缝部署!
* AI 驱动的设计与界面优化
* 添加动画和交互元素
* 使用 Groq API 集成 AI 邮件增强功能
* 使用 Resend 设置联系表单
* 使用 Lovable Launch 部署页面
本次演示展示了 [Lovable](/zh/lovable-f9060f1e/lovable-f9060f1e/editor/main#build-a-feedback-tool) 的能力，可以快速迭代并交付可用于生产环境的成果。
VIDEO
* 用户可以通过 Supabase 集成完成注册、登录并管理个人资料。
* 安全的用户会话可以为不同用户提供个性化体验。
* 用户可以提交包含标题、描述和图片的反馈。
* 每条反馈会显示投票数量，并支持实时点赞（投票）。
* 管理员可以查看所有反馈，按投票数进行筛选并对条目排序。
* 借助 OpenAI 和 Supabase Edge Functions 提供的 AI 驱动摘要功能，识别可执行的洞察。
实时在线状态指示器会显示当前在平台上的活跃用户。
每条反馈都有一个专门的讨论页面，帮助团队高效协作并合理安排优先级。
用户可以为反馈附加图片，并通过 Supabase 的存储功能进行安全保存。
VIDEO
本次演示的目标是构建一个应用，帮助开发者、设计师或顾问提供订阅制服务——这一业务模式的灵感来源于像 DesignJoy 这样的平台。
身份验证是首先实现的功能，为用户管理搭建了一个稳健的框架。团队强调了尽早集成身份验证的重要性，以避免在应用规模扩大时遇到问题。
* 集成 Supabase，用于用户注册、登录和资料管理。
* 持久化用户会话，以提升应用可用性。
本次演示展示了如何集成 Stripe 来进行订阅管理：
* 让用户能够订阅不同的定价层级。
* 管理订阅状态，确保只有付费用户才能访问高级功能。
* 针对不同用户的仪表板，包含任务看板和拖放功能。
* 实时任务更新，支持顺畅协作。
演示最后集成了一个 AI 聊天机器人，展示了如何利用 OpenAI 为应用添加动态功能。该功能可以扩展为虚拟助手、管家式服务或数据查询界面。
* 集成 OpenAI，提供能够智能回应用户问题的聊天机器人。
* 只用一个提示词就完成搭建，彰显了 Lovable 的高效性。
团队处理了实时调试中的各种挑战，分享了有关故障排除的实用经验。使用的技术包括：
* 利用控制台日志和错误信息来定位问题。
* 回退到之前的应用版本，避免卡在异常状态中。
* 通过详细提示词引导 Lovable 的 AI，确保修复准确。
VIDEO
在本教程中，我们将与 [Lovable](https://lovable.dev/) 的特邀嘉宾 [Mark Kashef](https://www.youtube.com/@Mark_Kashef) 一起，深入解析 AI 驱动的应用开发、提示工程和工作流自动化！
* 理解高效的 AI 提示技巧
* 提示工程的四个层级
* 元提示技术与最佳实践
* AI 工作流的调试策略
* 使用 Lovable 和 Make.com 构建 AI 应用
* 集成 Visual Edits 和 Tailwind CSS 进行 UI 设计
VIDEO
在本教程中，你将使用 Lovable 和 [Supabase](https://docs.lovable.dev/integrations/supabase) 构建一个类似 Luma 的活动平台 —— 现场演示！
* 如何将 Supabase 与 Lovable 集成
* 设置身份验证和用户管理
* 配置数据库和实时评论
* 测试性能并处理多用户访问
* 实时调试和性能优化
VIDEO
在本教程中，我们将向你演示如何使用 Lovable 这款由 AI 增强的无代码构建器，在完全不写一行代码的情况下创建一个全栈日记应用!
* 即刻设计你的应用 UI
* 上传你的设计并生成可用的应用
* 将 Supabase 用作后端和身份验证
* 集成 GPT-4o 打造 AI 驱动功能
* 在几分钟内部署一个全栈应用!
VIDEO
在本教程中，我们将带你一步步创建一个简单但功能强大的 CRM 系统，使用 [Lovable](/zh/lovable-f9060f1e/lovable-f9060f1e/editor/main#build-a-simple-crm-with-resend) 进行开发，Supabase 进行数据存储，以及 [Resend](https://docs.lovable.dev/integrations/resend) 实现邮件自动化。
* 如何使用 Resend 进行邮件自动化
* 使用 Supabase 设置身份验证邮件
* 构建管理后台仪表盘 & 联系人管理系统
* 创建和自定义邮件模板
* 添加新闻通讯订阅 & 群发邮件功能
VIDEO
借助 Lovable 的最新更新，构建引人入胜、交互性强的 Web 体验变得前所未有的轻松！
Lovable 的一大升级，是现在可以即时修改 UI 元素且不会消耗 AI 配额。你现在可以：
* 直接在项目上编辑文本。
* 实时调整按钮颜色和样式。
* 无缝上传和替换图片。
* 将鼠标悬停在元素上即可进行快速调整。
用户现在可以直接选择文本、更改颜色或轻松替换图标，而无需依赖 AI 介入，从而让设计迭代过程更加顺畅。
之前，用户在处理第三方 API 集成错误时常常面临挑战。Lovable 现在可以：
* 提供更丰富的错误信息，便于调试。
* 消除无关弹窗，让你更专注于关键问题。
* 启用 AI 驱动的错误检测，实现自动修复。
Lovable 不再用千篇一律的弹窗淹没用户，而是将错误上下文直接传递给其 AI，由 AI 决定何时需要处理问题以及如何修复。
Lovable 现在支持使用 **p5.js** 和其他库，无缝集成动画和交互元素。
#### **示例项目：带有交互式国旗的旅行社网站**
最近的一次直播演示展示了如何构建一个旅行社落地页，其中包括：
1. **具备动画效果的主视觉区域**，旗帜会根据鼠标交互动态出现和移动。
2. **粘性滚动（sticky scroll）区域**，会根据用户滚动位置发生变化。
3. **交互式悬停效果**，图片会对用户的移动做出反应。
#### **如何实现动画效果**
要创建这些效果，用户遵循了以下简单流程：
* **定义期望的动画：**
让背景变得可交互，包含悬浮元素，并在鼠标悬停时向外移动。
* **使用 p5.js 生成效果：**
* 实现彩色烟雾图案效果。
* 将静态图片替换为动态的国旗动画。
* **通过基于物理的交互增强用户体验：**
* 让元素根据用户操作进行动态移动。
如果动画没有正常工作，可以使用 Lovable 的 chat mode 来调试和优化效果，在 AI 的分步指导下逐步完成调整。
借助 [**21st.dev**]()，用户现在可以将预构建的 UI 组件无缝集成到 Lovable 项目中。
1. 在 **21st.dev** 上浏览按钮设计。
2. 复制 AI 生成的提示。
3. 将其粘贴到 Lovable 中并替换现有按钮。
这种方式可以加速设计工作流程，并让界面更加精致、视觉风格更统一。
同样的方法也适用于从 **motion.dev** 导入动画预设，让你无需自定义编码即可更轻松地添加高质量的动效。
VIDEO
在本教程中，我们将逐步演示如何使用 [**Lovable**](/zh/lovable-f9060f1e/lovable-f9060f1e/editor/main#clerk-authentication-custom-domains-and-waitlists) 和 [**Clerk**](https://docs.lovable.dev/integrations/clerk) 构建一个 **自定义 CRM 系统**（客户关系管理系统）。
VIDEO
在本教程中，我们将演示如何使用 [**Lovable**](/zh/lovable-f9060f1e/lovable-f9060f1e/editor/main#how-to-build-a-custom-crm-with-lovable-and-make) 和 [**Make**](https://docs.lovable.dev/integrations/make) 构建一个 **自定义 CRM**（客户关系管理系统）。
VIDEO
## 现场实战搭建、打造品牌并发布一个真正的微型 SaaS！
学习西班牙语从未如此有互动性！想象一款应用，不仅通过对话教你西班牙语，还能实现实时语音交互、动态课程和视觉效果出众的内容——完全由 AI 驱动。本教程会带你按步骤复现 Kristian 和 Harry 搭建的应用：
VIDEO
在实现 AI 功能之前，我们首先使用 **Lovable** 为应用**构建了坚实的基础**。这包括设置身份验证、搭建仪表盘结构，以及实现用户管理。
* 集成 **Supabase** 用于后端身份验证。
* 支持通过邮箱和密码进行注册/登录。
* 创建了用于存储用户偏好和学习进度的用户资料系统。
* 设计了直观的侧边栏导航。
* 创建了聊天、课程和用户设置等版块。
* 确保界面自适应，在各类设备上都能提供流畅体验。
* 添加了用于存储用户进度的数据库结构。
* 设计了用户资料管理设置，用户可以在其中调整学习偏好。
VIDEO
为了让学习更具互动性，我们使用 [OpenAI 的 GPT 模型]() 构建了一个由 AI 驱动的课程生成系统。其工作原理如下：
1. 用户选择一个主题（例如，“在烧烤聚会上可以问的问题”）。
2. Lovable 调用一个 [OpenAI 边缘函数]() 来生成 **10 个引人入胜的西班牙语问题**。
3. 用户完成测验、跟踪学习进度，并获得 AI 对其答案的反馈。
* **动态生成问题**：每个测验都由 AI 生成，确保每次都有新鲜且独特的内容。
* **互动反馈**：AI 会对正确和错误的答案给出解释，以提升学习效果。
* **进度跟踪**：用户可以保存并重新学习课程，从而加强记忆与练习。
为了加入视觉化学习元素，我们集成了 [**Replicate 的 Flux Schnell**]() 图像生成模型：
* **自动生成课程横幅**：每门课程都会动态生成与主题匹配的图像。
* **沉浸式视觉体验**：由 AI 驱动的视觉效果可以增强用户参与度和记忆效果。
* **快速图像处理**：通过 Replicate 的 API，图像可以实时生成，而不会拖慢整体体验。
应用开发过程中的一大里程碑，是通过 [OpenAI 的实时 WebRTC API]() 增加了 **实时西班牙语口语练习** 功能：
* **互动式 AI 导师**：用户可以直接与 AI 对话，AI 会用西班牙语进行动态回应。
* **发音辅助**：AI 会提供实时纠正和建议。
* **流畅对话体验**：自然的对话流程让用户感觉就像是在与真人导师互动。
VIDEO
在打造品牌之前，我们先明确了核心目标：
* 面向实时西班牙语对话的 **AI 驱动聊天**。
* 用于快速练习环节的 **自动测验**。
* 具备课程存储和进度跟踪的 **结构化学习**。
这帮助我们做出品牌相关决策，并确保它们与应用的目标保持一致。
我们希望起一个简短、易记、能够体现**学习旅程**的名字。借助 AI 进行头脑风暴，最终确定了 **Ruta**（西班牙语中意为“路线”或“路径”）。
#### **流程：**
* 使用 AI 为朗朗上口的西班牙语单词进行**名称头脑风暴**。
* **测试了多个选项**，如 "Camino" 和 "Verbo"，但 "Ruta" 脱颖而出。
* **检查域名可用性**，并立即注册了 **rutaapp.com**。
我们快速设计了品牌：
* **Logo**：一个从设计素材库获取并在 Figma 中编辑的**罗盘主题**图标。
* **字体搭配**：Logo 采用**粗体、现代风格字体**，应用界面使用易读的 UI 字体。
* **配色方案**：采用 **Tailwind CSS 蓝色**配色，象征旅行与探索。
* **样式灵感**：尝试了 **neo-brutalism 新野兽派**风格，通过调整对比度、阴影和边框，打造视觉上更具吸引力的 UI。
使用 Lovable，我们在整个应用中确保了**视觉一致性**：
* **落地页**：由 AI 生成，配有动态、吸引人的首屏区域。
* **仪表盘和课程页面**：样式与品牌形象保持统一。
* **迭代式样式调整**：应用 **新野兽派**元素，以测试不同的设计风格。
* **用户流程测试**：确保从注册到实时聊天的导航顺畅无缝。
VIDEO
请在 [这里](https://www.youtube.com/playlist?list=PLbVHz4urQBZkJ6WMXlIGc3NGsufrleogY) 查看 Lovable 社区教程。