Skip to main content

Make 集成

了解如何将 Make 与您的 Lovable 应用程序集成

Make 是什么​

lovable

Make 是一个强大的无代码自动化平台，让您能够直观地在应用程序、API 和数据源之间构建工作流。

无需编写后端逻辑，只需拖拽并连接模块，即可在流程图式画布上轻松创建自动化。它特别适合：

  • 非开发者 希望实现自动化而不需编写代码
  • 开发者 希望快速原型设计或通过 API 扩展功能
  • 团队 希望连接工具，如 Slack、Airtable、Notion、Calendly、Supabase 等

使用 Make，您可以：

  • 触发动作 来自您的 Lovable 应用程序（例如，当按钮被点击时）
  • 通过 Webhook 和 API 发送及接收数据
  • 连接 1,500 多种工具 或自定义 API
  • 自动化任务，如发送电子邮件、AI 呼叫、数据丰富和提醒

为什么将 Make 与 Lovable 结合使用？​

在本教程中，Make 作为您的 AI 增强后端，而 Lovable 负责前端界面。结果：一个自定义 CRM，在几分钟内构建完成，并实现全面自动化。这种组合非常适合：

  • 非开发者需要高级逻辑
  • 销售团队拥有动态演变的流程
  • 快速迭代而不涉及后端负担
  • 通过 API 实现自动化，并获得实时 UI 响应

分步教程​

我们将构建什么​

您将创建一个 CRM 系统，包括三个核心数据模型：

  • Deals（带有基于阶段的跟踪）
  • Contacts（带有内联编辑）
  • Companies（带有可丰富的数据）

每个实体均通过 Make 与自动化交互。到最后，您将能够：

  • 移动 Deals 并触发电子邮件
  • 点击 Contacts 并启动 AI 销售呼叫
  • 点击 Companies 并获取实时数据
  • 通过 Supabase Edge Functions 确保一切安全

我们将如何构建它​

构建自己的 CRM 通常需要数月时间。但借助 Lovable 和 Make，您可以在一小时内完成一个 CRM — 无需编写后端代码。本分步指南将教您构建一个 功能齐全的 AI 驱动 CRM，包括：

  • 视觉 Deals 管道（拖拽式）
  • 可编辑的 Contacts 和 Companies 模态窗口
  • 使用 Vapi 的 AI 呼叫代理
  • 通过 Apollo.io 进行 Companies 数据丰富
  • 使用 Supabase 的电子邮件工作流和安全措施
  • 使用 Make 的实时自动化

1. 在 Lovable 中设置您的 CRM​

您需要构建一个 CRM 系统，包括 Deals、Contacts 和 Companies。请使用浅色主题。

  • 步骤 1：创建一个新的 Lovable 项目。选择项目类型：CRM。

  • 步骤 2：定义 3 个实体：Deals、Contacts 和 Companies。

  • 步骤 3：如果偏好，选择 浅色主题，然后点击 生成。

lovable

2. 添加 Deals 阶段（Kanban 视图）​

lovable

  • 步骤 1：在 Lovable 中打开 Deals 部分。

  • 步骤 2：点击 编辑 并添加五个阶段：

    • Lead
    • Qualification
    • Proposal Sent
    • Negotiation
    • Closed - Won/Lost

  • 步骤 3：启用 拖拽功能，允许 Deals 在阶段之间移动。

拖拽功能可根据 Deals 阶段自动化动作。

note

为什么？ 这让用户能够在视觉工作流中跟踪 Deals。

3. 实现 Contacts 管理系统​

lovable

  • 步骤 1：在 Contacts 中启用 可点击模态视图。

  • 步骤 2：使模态窗口内的所有字段 内联可编辑。

    • 模态窗口显示 Contacts 详情。
    • 字段可 直接编辑，便于快速更新。

这避免了切换视图的需求 — 比传统 CRM 更高效。

note

为什么？ 传统 CRM 会将用户重定向到新页面，从而减慢工作流程。模态窗口让一切保持原位。

4. 使用 Make + Vapi 连接 AI 驱动呼叫​

  • 在 Make 中创建 Webhook
lovable

  • 打开 Make 并创建一个 新场景。

  • 点击 Webhooks > 自定义 Webhook 并命名为 Call Contact。

  • 复制 Webhook URL。

  • 从 Lovable 触发呼叫

lovable

  • 在 Contacts 模态窗口中添加一个 Call Contact 按钮。

  • 修改按钮的操作，以 发送 JSON 数据（包括姓名、电话号码、公司和呼叫目标）到 Make Webhook。

  • 通过点击 Call Contact 测试连接。

  • 使用 Vapi 进行 AI 驱动呼叫

lovable lovable
  • 在 Make 中添加一个 API 调用模块。
  • 向 Vapi 发送请求，包括呼叫详情。
  • 您的自定义 Vapi 代理将：

    • 发起呼叫

    • 根据 Deals 遵循动态提示

    • 将结果记录回 Lovable

      这创建了一个自动的出站 AI 呼叫，可从您的 CRM UI 中即时触发。

      lovable

5. 使用 Apollo 添加 Companies 数据丰富​

  • 在 Make 中创建丰富 Webhook

    • 在 Make 中添加第二个 自定义 Webhook，命名为 Enrich Company。
    • 复制 Webhook URL。
    lovable

  • 从 Lovable 发送请求

    • 在 Companies 中添加一个 Enrich Company 按钮。

    • 点击时，将公司的域名作为 JSON 负载发送。

      当我点击丰富按钮时，请执行以下操作：
      1. 移除不再需要的模态窗口
      2. 新增步骤 > 将域名作为 JSON 发送到以下 Webhook：[链接]
      3. 您将收到 Webhook 响应作为 JSON，并需要动态解析它到模态视图中，从而创建动态字段。

  • 调用 Apollo.io API

lovable

  • 使用 Apollo 的 Organization Enrichment API。

  • 获取：

    • 行业
    • 员工数量
    • 地址
    • 网站
    • 融资信息

  • 将丰富后的数据返回给 Lovable。

  • 将响应解析到模态视图

lovable

  • 从 JSON 中动态生成字段到 Lovable 模态窗口。

  • 以易读的 UI 方式呈现数据（非原始 JSON）。

    Apollo 的数据丰富可快速添加关键洞见，帮助更快地评估 Companies。

6. 使用 Supabase Edge Functions 隐藏 API 调用​

lovable

为了保护 Webhook：

  • 在项目设置中启用 Supabase 集成。
  • 创建一个 Edge Function，用于代理请求到 Make。
  • 更新 Lovable，使其调用您的 Supabase 函数，而不是直接 Webhook。

这会隐藏您的 Webhook URL — 对于公共应用程序至关重要。

请在点击丰富按钮时，使用 Supabase Edge Function 来隐藏对 Webhook 地址的 API 调用。因此，您需要调整功能以实际隐藏 API 调用。

7. 自动化跟进和工作流​

要根据 Deals 阶段自动化电子邮件活动：

  • 在 Make 中添加逻辑来触发事件：
    • 当 Deals 移动到 Proposal Sent 时发送电子邮件
    • 当 Deals 到达 Negotiation 时通过 Slack 通知团队
    • 将 Contacts 添加到新闻通讯或活动流程

这让您的销售流程即使在您不在线时也能持续运行。

8. 最终测试与部署​

  • 运行端到端测试

    • 创建测试 Deals 和 Contacts。
    • 触发 AI 呼叫流程。
    • 丰富 Companies 数据并验证结果。

  • 部署、共享并上线

    • 使用 自定义域名 来个性化您的 CRM。
    • 与您的团队共享应用程序。

9. 🎉 你做到了！​

您已经构建了一个功能齐全的 AI 驱动 CRM — 无需后端代码。

下一步

  • 添加集成：Slack、Notion、HubSpot、Calendly
  • 使用 Supabase 确保一切安全，并添加审计跟踪

来自现场演示的专业提示​

  • 在 Lovable 中使用 select + prompt 进行精确编辑
  • 先使用 Make 的视觉画布 映射流程，然后再连接
  • 动态解析未知 JSON 字段到模态窗口中，提升用户体验
  • 结合 Vapi + Apollo + Make 实现实时 AI 工作流
  • 使用 Supabase Edge Functions 来屏蔽所有公共 API/Webhook 调用

常见问题​

什么是 Make？

Make 是一个视觉自动化平台，让您使用拖拽模块连接工具并构建工作流。可以将其视为 Zapier，但更灵活且更适合开发者。

为什么将 Make 与 Lovable 结合使用？
  • 无需编写后端代码
  • 从您的 UI 中触发工作流（按钮、表单、模态窗口）
  • 直观构建自动化（呼叫代理、数据丰富、电子邮件流程）
  • 连接 1,500 多种应用程序（Slack、Notion、Calendly、Airtable 等）
Make 如何与 Lovable 通信？

Lovable 通过 HTTP Webhook 以 JSON 格式发送数据到 Make 场景。Make 接收数据、处理它（例如，调用 API），并可以响应回 Lovable。

Make 中的场景是什么？

场景是自动化工作流。您定义：

  • 触发器（例如，Webhook）
  • 动作（例如，API 调用、发送电子邮件）
  • 逻辑（路由器、过滤器、迭代）
我可以保护我的 Make Webhook 吗？

是的。使用：

  • IP 限制（限制谁可以调用 Webhook）
  • Supabase Edge Functions 来代理并隐藏敏感 URL
  • API 密钥认证 在头部
Make 和 Supabase Edge Functions 有什么区别？
  • Make 是一个视觉自动化工具（适合工作流、API 集成、AI 触发）。
  • Supabase Edge Functions 是无服务器后端代码（适合逻辑、认证和安全）。

将它们 结合使用 以获得最佳效果。

如果我超过 Make 计划的操作限额怎么办？

您的场景将暂停。Make 会发送警报，您可以升级或优化流程。对于本指南，网络研讨会提供的 免费专业计划 包括 20,000 个操作 — 足以用于原型设计。

我可以在不使用 Lovable 的情况下测试 Make 场景吗？

是的！使用 手动数据输入 在 Webhook 中，或通过 Postman 或 curl 触发场景。这很适合在连接 Lovable 前进行调试。

资源​