Logo

菜单

发布于 2026-01-05 5 阅读
0

使用 ChatGPT、PostgreSQL 和 ToolJet 构建智能 CRM

使用 ChatGPT、PostgreSQL 和 ToolJet 构建智能 CRM

在本教程中，您将学习如何使用 ChatGPT、ToolJet 和 PostgreSQL 构建 CRM（客户关系管理）应用程序。

介绍

CRM应用程序允许您向PostgreSQL数据库添加新用户或客户，在仪表板上查看他们的详细信息，使用ChatGPT生成电子邮件模板，并通过 Sendinblue向他们发送电子邮件。

在本教程中，我们将使用 ToolJet 作为应用程序界面。

ToolJet是什么？

ToolJet 是一个开源的低代码框架，它使我们能够在几分钟内构建全栈 Web 应用程序。借助 ToolJet，您可以创建独立的、功能齐全的全栈应用程序，也可以将应用程序嵌入到其他网站中。

ToolJet 允许您构建使用关系型和非关系型数据库、REST API、OpenAI 技术以及云存储（例如 Google Cloud Storage、  AWS S3和 Minio）的应用程序。它是一款出色的开发工具，可帮助个人、开发人员和企业更快地创建和发布产品。

在我们继续之前，我需要你的帮助😔
如果你能给我们一颗星，我会非常开心！也请在评论区告诉我。❤️

https://github.com/ToolJet/ToolJet

https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZjlhNzRjMWJlYzgyNWZjYjcyOGMxYjJiYjQxOTQzYTU1NTg5YzAzNiZjdD1n/dfbMVqwq8GrC19xSEF/giphy.gif

设置 ElephantSQL（PostgreSQL）数据库

ElephantSQL允许我们在云端而非本地计算机上创建 PostgreSQL 数据库。请按照以下步骤创建 PostgreSQL 数据库：

请在此处创建 ElephantSQL 帐户 。

添加新的数据库实例。无需提供信用卡或账单信息。

创建数据库实例后，即可显示数据库信息。

01

恭喜！您已成功创建此应用程序所需的数据库。接下来，我们将构建应用程序界面并将数据库连接到应用程序。

使用 ToolJet 构建应用程序

在这里，您将学习如何创建 ToolJet 帐户并使用 ToolJet 构建功能齐全的应用程序。

如果您是 ToolJet 的新用户，请创建一个帐户。

创建工作区和一个名为 CRM 应用程序的新应用程序。

02-tooljet-workspace.png

构建一个类似于下图的用户界面。

03-app-preview.png

要创建上图所示的 UI 界面，首先需要在画布上添加一个大型容器，用于容纳应用程序的所有其他 UI 元素。接下来，在页面顶部添加三个容器元素、“添加潜在客户”按钮组件和表格组件。

ToolJet 允许您通过在画布上拖放各种 UI 组件来创建应用程序界面。

重新创建用户界面后，在表格中添加一个文本为“发送电子邮件”的操作按钮。（稍后我们将对其进行配置，以便能够向每个用户发送电子邮件）。

04-action-buttons.png

为了完善用户界面，我们需要一个界面来向数据库添加用户，还需要另一个界面来编辑和生成每个用户的电子邮件内容。

为此，我们将使用 模态框组件。点击“添加潜在客户”按钮（用于添加新数据）和“发送电子邮件”操作按钮（用于输入电子邮件内容）时，我们将显示一个模态框。

05-app-overview.gif

“添加新线索”模态框

要显示“添加新潜在客户”模态框组件，您需要创建模态框，并向“添加潜在客户”按钮添加 onClick 事件以显示模态框。

06-show-modal.png

将以下组件添加到模态框中，并记住在单击模态框按钮时关闭模态框。

07-addnewlead-modal.png

“发送电子邮件”模态框

“发送邮件”对话框允许我们输入用户的电子邮件地址、邮件主题和邮件内容。您还可以使用 ChatGPT API 生成邮件内容。您将在接下来的课程中学习如何操作。

08-sendEmail-modal.gif

切换开关有一个onChange事件，可以在不需要时隐藏 ChatGPT 提示输入字段和按钮。

09-toggle-switch.png

当用户点击Send Email按钮时，记得关闭模态框。

恭喜！🎉 您已完成此应用程序的用户界面构建。在接下来的课程中，您将学习如何将用户界面连接到 PostgreSQL 数据库、与ChatGPT通信以及使用Sendinblue发送电子邮件。

如何在 ToolJet 中与 PostgreSQL 数据库通信

ToolJet 允许我们通过名为“查询面板”的面板与外部资源通信或创建自定义函数 。在 ToolJet 中，任何与数据库、API 或云存储交互并运行 JavaScript 或 Python 代码的函数都称为查询。

10-query-panel.png

在这里，您将学习如何在 ToolJet 中与 PostgreSQL 数据库进行通信。首先，让我引导您完成将 PostgreSQL 数据库连接到 ToolJet 的过程。

将 PostgreSQL 数据库连接到 ToolJet

从“全局数据源”面板下的数据库列表中选择 PostgreSQL，并提供如下所示的所需信息。

11-add-postgres.png

从上图可以看出，主机名与 ElephantSQL 上的服务器名称相同（不包括方括号）。用户名和数据库名称也相同，请将密码复制粘贴到相应的字段中。

12-connect-elephantSQL.png

向下滚动页面并点击 Test Connection。

13-test-connection.png

如果连接验证通过，我们就可以开始向数据库发出查询。

14-connection-verified.png

在 ToolJet 中查询 PostgreSQL 数据库

在这里，您将学习如何从数据库中查询数据，并在应用程序中相应地显示它们。

开始之前，我们先向数据库添加一些数据。在查询面板中单击 PostgreSQL，选择 SQL 模式，然后运行以下代码片段，创建一个包含以下数据的新表。

CREATE TABLE Users (Name varchar(255), Email varchar(255), Phone varchar(255), Organisation varchar(255), Designation varchar(255), Status varchar(255));
INSERT INTO Users(name, email, phone, organisation, designation, status) VALUES('Teja', 'teja@gmail.com', '+555-34569', 'ToolJet', 'Developer Advocate', 'Customer');
INSERT INTO Users(name, email, phone, organisation, designation, status) VALUES('Badri', 'badri@gmail.com', '+555-59659', 'ToolJet', 'Engineering Manager', 'Prospect');
INSERT INTO Users(name, email, phone, organisation, designation, status) VALUES('Jack', 'jack@gmail.com', '+555-44449', 'ToolJet', 'Software Engineer', 'Lead');
INSERT INTO Users(name, email, phone, organisation, designation, status) VALUES('Nora', 'nora@gmail.com', '+555-46249', 'ToolJet', 'Product Manager', 'Customer');
INSERT INTO Users(name, email, phone, organisation, designation, status) VALUES('Emily', 'emily@gmail.com', '+555-47893', 'ToolJet', 'Product Designer', 'Prospect');
INSERT INTO Users(name, email, phone, organisation, designation, status) VALUES('Dave', 'dave@gmail.com', '+555-49313', 'ToolJet', 'Data analyst', 'Lead');
SELECT * FROM Users;
Enter fullscreen mode Exit fullscreen mode

15-add-data.png

数据上传完成后，即可在 ElephantSQL 上查看。

16-view-data.png

接下来，将查询重命名为getTableData，更新 SQL 编辑器以显示所有表内容，然后保存查询。

17-rename-query.png

更新表格组件，使其显示从查询中检索到的数据getTableData。

18-displayTable-data.png

表格内容已经展示完毕。接下来，让我们展示数据库中客户、销售线索和潜在客户的数量。

基于 PostgreSQL 数据库创建三个新查询，分别命名为getLeadsCount、getProspectsCount和getCustomersCount。

更新 SQL 编辑器，对每个查询进行修改，以检索每个类别下的数据数量，如下所示，并保存它们。

SELECT COUNT(*)
FROM Users
WHERE Status IN ('Lead');
/*-- change 'Lead' for leads, 'Prospect' for prospects, 'Customer' for customers. ---*/
Enter fullscreen mode Exit fullscreen mode

19-display-counts.png

通过替换容器内的文本内容，显示每个查询返回的数据数量，如下所示。

20-getData-counts.png

{{queries.getProspectsCount.data[0].count}}

//(Use {{queries.getLeadsCount.data[0].count}} for leads and {{queries.getCustomersCount.data[0].count}} for customers)
Enter fullscreen mode Exit fullscreen mode

getTableData最后，为该查询和其他三个查询启用“在应用程序加载时运行此查询？”开关。

21-run-app.png

恭喜！您已经学会了如何查询和显示应用程序中接收到的数据。接下来，我将引导您通过应用程序界面向数据库添加新数据。

向数据库添加新用户

在这里，您将学习如何从模态框中接收数据并将用户数据添加到数据库中。

22a-addNewUser.png

创建与 PostgreSQL 数据源相关的新查询，该查询接受模态框中的值，并发送 SQL 查询将数据添加到数据库。

22-add-user.png

请确保以下代码片段与模态框中的组件名称匹配。将以下代码片段复制到 SQL 编辑器面板中并保存查询。

INSERT INTO Users(name, email, phone, organisation, designation, status) VALUES('{{components.name.value}}', '{{components.email.value}}', '{{components.phone.value}}', '{{components.organisation.value}}', '{{components.designation.value}}', '{{components.status.value}}');
Enter fullscreen mode Exit fullscreen mode

最后，onClick为Add Lead按钮添加一个事件，以便在按钮点击时运行查询。

23-addNewUser.png

如何在 ToolJet 中与 ChatGPT 通信

在这里，您将学习如何在 ToolJet 中通过 OpenAI 与 ChatGPT 进行通信。

设置 OpenAI 帐户

在此登录或创建 OpenAI 帐户 。

点击Personal导航栏，然后View API keys从菜单栏中选择创建新的密钥。

05-openai-dashboard.png

生成一个新的 API 密钥并将其复制到您电脑上的某个位置。我们将在下一节中使用它。

在 ToolJet 中与 OpenAI API 通信

在控制面板的“全局数据源”选项卡下，点击“插件”，然后选择 OpenAI。接下来，将您的 API 密钥和组织 ID 粘贴到输入字段中，并测试连接。

您现在可以从查询面板访问 OpenAI 数据源。

如果没有组织 ID，请使用“个人”。

24-openai-connection.png

从查询面板中选择 OpenAI，并将其内容设置为使用 ChatGPT 起草电子邮件。

Draft an email to {{components.recipient.value}} about {{components.chatgptprompt.value}}
Enter fullscreen mode Exit fullscreen mode

当用户点击模态框中的“询问”按钮时运行查询。

26-run-chatgpt.png

最后，要在模态框中自动显示所选用户的电子邮件地址，请将收件人电子邮件输入框的默认值设置为{{components.table1.selectedRow.email}}。这样会自动将其值设置为所选用户的电子邮件地址。

27-autochange-email.png

如何在 ToolJet 中通过 Sendinblue API 发送电子邮件

Sendinblue 是一款数字营销工具，它通过一个平台提供电子邮件、短信、Facebook、聊天等服务，帮助企业通过建立更牢固的客户关系来发展业务。

在本节中，您将学习如何在 ToolJet 中集成 Sendinblue 并发送电子邮件。首先，您需要登录或 创建一个 Sendinblue 帐户。

在控制面板中选择 SMTP 和 API，生成 SMTP 密钥，并将其复制到计算机上的某个位置。您稍后会用到它。

28-generate-smtp.png

返回 ToolJet 应用，添加新的 SMTP 数据源，并填写所需的凭据。您的密码即为生成的 SMTP 密钥。

29-smtp-datasource.png

连接成功后，将显示“连接已验证”。然后您就可以开始发送电子邮件了。

30-connect-verified.png

接下来，创建用于发送电子邮件的查询。提供您的电子邮件地址、姓名、收件人电子邮件地址、主题和标题。

31-smtp-config.png

最后，保存查询，并在单击模态框中的“发送电子邮件”按钮时运行它。

32-app-reveal.png

以下是该应用程序的运行演示：  https://tooljet-stny.onrender.com/applications/7a8867e3-3cea-49e3-89e7-8da39038b875

您还可以 下载其 JSON 文件并将其导入 ToolJet 应用程序，但您需要提供您的 Sendinblue 凭据和 OpenAI API 密钥。

结论

到目前为止，你已经学会了如何……

  • 将 PostgreSQL 数据库添加到 ToolJet
  • 使用 Sendinblue 在 ToolJet 应用程序内发送电子邮件
  • 在 ToolJet 中通过 OpenAI 与 ChatGPT 进行通信，
  • 使用 ToolJet，几分钟内即可构建全栈应用程序。

ToolJet 既是一款优秀的开发工具，又是一款开源软件——这意味着任何人都可以免费修改和改进它的代码。它拥有 庞大的开发者社区 和众多才华横溢的贡献者，他们不断地维护和改进着这款软件。作为用户，您可以放心，使用 ToolJet 一定能获得最佳性能。

您有兴趣为 ToolJet 做贡献吗？欢迎访问我们的 GitHub 代码库 https://github.com/ToolJet/ToolJet， 贡献代码并提出有关 ToolJet 的问题。

感谢阅读！

文章来源：https://dev.to/tooljet/building-an-intelligent-crm-using-chatgpt-postgresql-and-tooljet-4jod
为什么服务有时会变慢？DEV 全球...
使用 Express.js 创建基本网站