Skip to main content

原型

Lovable 快速入门教程​

1. Lovable 入门基础​

完成本部分后，您将搭建一个简单的应用程序，包含身份认证以及用于管理笔记的 CRUD（创建、读取、更新、删除）功能。

设置 Supabase

Supabase 是一个基于 PostgreSQL 的开源数据库服务，提供身份认证、数据存储和文件存储功能，非常适合与 Lovable 集成。

1. 创建组织和项目​

  1. 步骤 1
    登录 Supabase。

  2. 步骤 2
    创建一个 组织（以您的创业项目或计划命名）。

  3. 步骤 3
    在该组织中创建一个 新项目。

    注意： 请记录您的 Supabase URL 和 API 密钥（稍后将用到）。

2. 配置身份认证​

  1. 步骤 1
    导航到 身份认证 > 登录/注册。

  2. 步骤 2
    启用 电子邮件身份认证。

  3. 步骤 3
    关闭 电子邮件确认（因为尚未设置电子邮件服务提供者）。

在 Lovable 中创建项目

现在，让我们开始在 Lovable 中设置项目。

1. 从全新空白项目起步​

  1. 步骤 1
    打开 Lovable 并创建一个 新项目。

  2. 步骤 2
    将您的第一个提示保持简单："创建一个空白项目"。

  3. 步骤 3
    Lovable 将生成应用程序的基本结构。

2. 将 Supabase 连接到 Lovable​

  1. 步骤 1
    在 Lovable 中导航到 数据库设置。

  2. 步骤 2
    输入您的 Supabase 项目 URL 和 API 密钥。

  3. 步骤 3
    点击 连接，以将 Lovable 项目链接到 Supabase。

添加登录系统

1. 创建带有登录按钮的导航栏​

  1. 步骤 1
    在项目顶部添加一个 导航栏。

  2. 步骤 2
    包含一个 登录 按钮，用于将用户重定向到登录页面。

2. 应用 SQL 变更以处理身份认证​

  1. 步骤 1
    Lovable 将为 Supabase 生成处理身份认证的 SQL 语句。

  2. 步骤 2
    点击 应用变更 以执行这些 SQL 命令。

使用视觉编辑工具

自定义用户界面：

  1. 步骤 1
    在 Lovable 中打开 编辑工具。

  2. 步骤 2
    点击 UI 元素（例如按钮）来修改其样式。

  3. 步骤 3
    确保所有文本清晰可见（例如，在白色背景上使用黑色文本）。

测试登录系统

1. 创建测试账户​

  1. 步骤 1
    使用 注册 表单创建一个新用户。

  2. 步骤 2
    验证登录和登出流程是否正常运行。

2. 登录后将用户重定向到仪表板​

修改身份认证流程，以便用户登录后跳转到 仪表板。

添加笔记（CRUD 功能）

1. 在 Supabase 中设置笔记表​

  1. 步骤 1
    使用 Lovable 为 笔记 表生成 SQL 语句。

  2. 步骤 2
    确保表包含 用户 ID 和 内容 字段。

  3. 步骤 3
    点击 应用变更 以创建该表。

2. 构建笔记用户界面​

  1. 步骤 1
    在仪表板上添加一个 表格 来显示笔记。

  2. 步骤 2
    包含一个 输入字段 和 按钮 用于 CRUD 操作。

    信息： CRUD = 创建、读取、更新和删除

3. 测试 CRUD 操作​

  1. 步骤 1
    添加一个新笔记。

  2. 步骤 2
    编辑现有笔记。

  3. 步骤 3
    删除一个笔记。

  4. 步骤 4
    验证笔记是否已在 Supabase 中持久保存。

使用聊天模式进行调试

信息： 要启用 聊天模式，请转到 设置 > 账户设置 选项卡。

1. 识别错误​

  • 如果出现问题，请启用 聊天模式。
  • Lovable 将分析 Supabase 日志 和 TypeScript 错误。

2. 应用修复​

  1. 步骤 1
    查看 Lovable 的调试建议。

  2. 步骤 2
    根据需要应用这些修复。

恭喜您 🎉

您已经：

  • 设置了 Supabase 和 Lovable。
  • 实现了 身份认证。
  • 构建了带有笔记 CRUD 功能的 仪表板。
  • 学会了有效调试问题的方法。

2. 构建交互式用户界面​

在本模块中，我们将讨论组件、可重用 UI 元素、设计优化以及调试最佳实践。

理解组件

Lovable 中的组件可以将 UI 元素组织成模块化和可重用的部分。避免将所有 UI 元素堆积在一个页面中（例如，一个包含 400 行代码的仪表板），而是将它们拆分为组件，例如：

  • 侧边栏
  • 欢迎卡片
  • 引言卡片
  • 笔记部分

这种结构能提升编辑效率，因为变更仅影响特定组件，而非整个页面。

创建和使用组件：​

  1. 识别大型 UI 部分
    查找重复出现或规模过大的 UI 部分。

  2. 重构为组件
    使用 Lovable 的聊天模式扫描代码并建议优化结构。

  3. 重用组件
    在不同页面中复制并粘贴组件，以保持一致性。

高效编辑用户界面

1. 修改单个组件​

与其修改整个仪表板，不如只编辑较小的组件，如 欢迎卡片。

信息： 运行以下提示：

"更新欢迎卡片中的文本，使其更具吸引力。"

2. 使用聊天模式进行重构​

让 Lovable 将大型 UI 部分重构为更小的组件。

信息： 示例：

"将仪表板重构为更小、更整洁的组件。"

使用预构建组件增强用户界面

如果您不是设计师，利用预构建样式可以显著提升应用程序的外观。

1. 使用 21st.dev 作为 UI 灵感来源​

  1. 步骤 1
    访问 21st.dev 以浏览预构建 UI 组件。

  2. 步骤 2
    选择一个设计，复制其提示并将其集成到您的项目中。

2. 创建全局样式​

  1. 步骤 1
    修改项目中的一个元素，例如："将按钮设置为彩虹按钮"。

    信息： 例如："将按钮设置为彩虹按钮"。*

  2. 步骤 2
    在项目设置的知识部分添加此系统提示，以确保所有新按钮都采用此样式：

    信息： "在创建组件时，请始终使用我们的全局彩虹按钮"。*

  3. 步骤 3
    每次添加按钮时，都会自动应用此预设样式。

重新设计仪表板

要更新仪表板布局：

  1. 步骤 1
    找到您喜欢的 设计（例如，在 Dribbble 上搜索）。

  2. 步骤 2
    截取相关部分 并上传到 Lovable。

  3. 步骤 3
    提供清晰的指令，例如：

    信息： "基于此设计重构仪表板布局。"

    信息： "将笔记放置在左侧侧边栏，并在并排可编辑视图中打开。"

实现实时更新

1. 为笔记启用实时同步​

  1. 步骤 1
    运行以下提示：

    信息： "为笔记启用实时更新，以便更改立即生效。"

  2. 步骤 2
    确保数据在 侧边栏 和 编辑面板 中实时更新。

2. 调试用户界面问题​

使用聊天模式扫描实现并修复任何缺失的更新。

信息： 示例：

"在并排视图中编辑标题时，它没有保存。请修复此问题。"

优化笔记编辑体验

1. 使用 Mobbin 查看真实世界 UI 示例​

搜索 "笔记应用程序 UI"，以了解流行应用程序的设计方式。

信息： 示例：

一个干净、简约的笔记编辑器，带有大标题和标签下拉菜单。

2. 应用用户界面改进​

  1. 步骤 1
    确保标题 大而突出。

  2. 步骤 2
    添加 标签下拉菜单，类似于参考 UI。

    信息： 示例提示：

    "重新设计笔记编辑器以匹配此截图。使用大标题、充足的空白区域和基于下拉菜单的标签。"

调试和最终优化

1. 修复用户界面错误​

确保所有 UI 元素在修改后正确更新。

信息： 运行以下提示：

"修复笔记标签在编辑后不保存的问题。"

2. 优化按钮样式​

调整按钮和输入样式，以符合预期设计。

信息： 示例：

"确保所有按钮使用全局彩虹按钮样式。"

恭喜您 🎉

完成本模块后，您应该已经：

  • 将大型 UI 部分重构为可重用组件。
  • 实现了精致的笔记应用程序仪表板。
  • 启用了实时更新以提升用户体验。
  • 通过外部灵感和最佳实践优化了设计。

3. 接下来呢？​

如果您喜欢前两个模块，请继续在 Harry 的课程中学习 这里！在后续课程中，您将探索：

  • 奖励： P5.js 效果和管理员角色
  • 高级用户角色和 RLS
  • 连接 API 和 AI
  • 设置 Stripe 支付
  • 高级功能
  • 在 Product Hunt 上发布