Logo

菜单

发布于 2026-01-06 3 阅读
0

使用低代码构建 WhatsApp CRM 应用 DEV 的全球展示与分享挑战赛，由 Mux 呈现：展示你的项目！

使用低代码构建 WhatsApp CRM 应用

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

在本文中，您将学习如何创建一个应用程序，该应用程序允许您向存储在 Google 表格中的联系人发送 WhatsApp 消息。

什么是客户关系管理系统（CRM）？

CRM 应用旨在集中收集所有客户信息，提供 360 度全方位客户数据视图。客户姓名、邮箱、电话号码、沟通偏好等详细信息一应俱全，帮助团队以恰当的方式和渠道与客户进行有效沟通。许多公司和企业将客户或员工数据存储在 Google Sheets 中，而这款应用可以用于快速发送个性化的 WhatsApp 消息。

概述

让我们先来概览一下这个应用。我们已经有一个包含模拟数据的谷歌表格，这些数据类似于典型的客户数据：ID、姓名、电子邮件、电话号码等。

在 ToolJet 中，我们将添加 Google 表格作为数据源，然后创建一个查询，将 Google 表格中的数据导入到 ToolJet 应用中。接下来，我们可以添加更多功能，对表格中选定的行执行操作。这样，用户就可以快速地在文本框中编写消息，并通过“发送消息”按钮发送消息，该按钮会链接到 WhatsApp 的点击聊天 API。通过该 API，用户只需点击一下即可直接在 WhatsApp 网页版上打开聊天窗口。

先决条件

构建用户界面

我们先从构建应用用户界面开始。登录 ToolJet，然后在控制面板中点击“创建新应用”按钮来创建一个新应用。应用创建完成后，您将被重定向到可视化应用编辑器。您可以通过点击应用编辑器左上角的应用名称来更改应用名称。

在右侧边栏，您会看到一个组件管理器，其中包含一系列内置组件和部件。您可以拖放组件来开始布局用户界面。在左侧边栏，您会看到数据源管理器。在这里，您可以添加新的数据源或编辑现有数据源。页面底部是查询编辑器，我们将使用它来构建要连接的数据源的查询。在本应用中，我们将使用 Google 表格作为数据源，并为其构建查询——稍后我们将详细介绍。

创建新应用

让我们从构建用户界面开始：

  • 使用组件管理器中的Text组件为应用添加标题。将组件拖到画布上，然后单击它，即可在右侧边栏打开检查面板。在检查面板中，您可以编辑组件的属性，例如文本、组件名称，还可以通过更改颜色来设置其样式。

提示：您也可以使用图像组件代替文本组件作为应用程序的标题。

文本组件

  • 我们使用表格组件来展示客户数据。表格组件已预先放置并填充了模拟数据。我们将从组件管理器中将表格组件拖放到画布上，然后单击它以在检查面板中编辑其属性。在检查面板中，我们添加诸如 ID、姓名、电子邮件、电话号码、国家/地区等列。对于每一列，我们需要指定：
    • 列类型：您需要为每一列选择数据类型。默认情况下，列类型为字符串，但由于我们 Google 表格中的大多数数据都是字符串，因此default我们将为每一列选择字符串类型。string
    • 列名：这是我们要在用户界面中显示的列的名称，因此我们可以相应地命名它。
    • 键：键属性是用于从对象表中的单个元素获取数据的访问器键。您可以将其理解为 Google 表格中列的名称。

例如：假设我们在表格中创建了一个新列，用于记录客户姓名，那么我们将把该列的类型设置为“数据” string，列名设置为“客户姓名Customer Name”，键设置为Name“客户姓名”。键应该与 Google 表格中的列名相同。

添加列

  • 使用Container组件创建一个撰写消息区域。我们将在此容器内放置Text Area和Button组件。Text Area 组件用于显示消息正文，Button 组件将使用 WhatsApp 的点击聊天 API 在新窗口中打开聊天窗口。

消息框

现在我们已经完成了用户界面，接下来让我们连接数据源并构建查询以检索表中的数据。

添加数据源

ToolJet 支持多种数据源，包括 Airtable、Elasticsearch、Cloud Firestore、REST API、GraphQL 等等。对于 WhatsApp CRM，我们将使用 Google Sheets 作为数据源。那么，让我们看看具体该如何操作：

  • 在左侧边栏中，单击“添加或编辑数据源”按钮，然后单击“添加数据源”。
  • 在对话框中，选择“Google 表格”。
  • 下一个对话框会要求您授权 Google Sheets 授予“获取数据”Read-only或“更新Read and write数据”权限；请选择Read-only“获取数据”，因为我们只会检索数据，不会更新 Google Sheets 中的任何数据，然后点击“连接到 Google Sheets”按钮。
  • 这将打开一个新窗口，您需要在该窗口中登录您的 Google 帐户以授权 ToolJet 应用。
  • 授权成功后，您会看到一条消息Auth successful, you can close this tab now.- 关闭标签页，然后单击对话框中的“保存数据源”按钮。

数据源

现在我们已经将数据源连接到我们的应用程序，接下来让我们看看如何构建查询来更新表中的数据。

构建查询

查询是指向数据源请求数据或信息。我们将构建一个查询，从 Google Sheets 请求数据。让我们来构建一个查询：

  • 转到查询编辑器，然后单击 + 图标创建新查询
  • 从下拉菜单中选择数据源为 Google Sheets。
  • 从“操作”下拉菜单中，选择“从电子表格读取数据”。
  • 输入Google 表格的电子表格 ID和单元格范围

💡 您可以在 Google 表格的 URL 中找到表格 ID。
假设 Google 表格的 URL 为：
https://docs.google.com/spreadsheets/d/1gIfeXMmgJAKrWmm_MtivOj68zZM_H9D8qR5mzVvzo6c/edit?usp=sharing
在此 URL 中，1gIfeXMmgJAKrWmm_MtivOj68zZM_H9D8qR5mzVvzo6c就是表格 ID。

  • 点击查询编辑器右上角的“预览”按钮，它将以 JSON 格式从工作表中获取所有数据。
  • 点击“创建”按钮保存并创建查询

询问

将 Google 表格数据链接到表格

现在我们已经构建了一个从 Google Sheets 中检索数据的查询，接下来让我们开始在表格中引用它。

  • 我们的列已经添加完毕，因此一旦我们在表格数据框中输入属性，表格中的数据就会自动更新。
  • 点击表格，即可在右侧边栏打开检查面板。
  • 我们希望表格引用从查询中获取的数据，因此在表格数据属性中，我们将输入{{queries.googlesheets1.data}}- 这里googlesheets1是我们构建的查询，获取的数据对象存储在 中data。
  • 接下来，我们将为表格添加加载状态isLoading。加载状态会显示表格的加载框架。我们将使用属性来获取查询状态，因此我们将输入{{queries.googlesheets1.isLoading}}。

💡 ToolJet 会自动建议你的查询，让你只需选择你想要的查询即可。

参考数据

发送消息

现在，我们只需要从文本区域获取消息内容，并从表格中获取所选客户的电话号码。我们将使用WhatsApp 的点击聊天 API中的这两个属性：

https://api.whatsapp.com/send?phone=**phonenumberfromtable**&text=**messagefromtextarea**
Enter fullscreen mode Exit fullscreen mode
  • 点击“发送消息”按钮，打开右侧边栏的检查面板。
  • 在检查面板中，转到事件部分并添加一个新的单击事件处理程序。
  • 单击“On-click”事件处理程序，并将其“Action”属性更改为“打开网页”。
  • 在 URL 字段中，输入 WhatsApp 的 API，并将 `phonenumberfromtable` 替换为 ` <phonenumberfromtable>{{components.customerInfo.selectedRow['Phone Number']}} ` ，将`messagefromtextarea` 替换为` <messagefromtextarea>{{components.textarea.value}} `。最终的 URL 应如下所示：
https://api.whatsapp.com/send?phone={{components.customerInfo.selectedRow['Phone Number']}}&text={{components.textarea.value}}
Enter fullscreen mode Exit fullscreen mode

发送消息

让应用上线

现在我们来到了最后一步，那就是让我们的应用上线并可以分享。为此，只需点击右上角的“部署”按钮。在对话框中：

  • 点击“+版本”按钮创建应用版本。
  • 点击“保存”按钮保存进度，然后点击“部署”按钮部署到服务器。

部署

让应用更易于分享：

  • 点击右上角的“分享”按钮
  • 在对话框中，单击切换开关，使应用程序公开，并通过框中的链接进行共享。
  • 您还可以根据需要编辑 URL。 瞧！您刚刚创建了一个 WhatsApp CRM 应用。现在，您可以使用 ToolJet 内置的组件样式属性来美化它。🎉
文章来源：https://dev.to/tooljet/build-a-whatsapp-crm-app-with-low-code-1h5
我最喜欢的编程面试书籍 DEV 的...
使用 GraphQL、Node.j...