使用 ToolJet 和 PostgreSQL 构建客户支持台应用程序

在本教程中，您将学习如何使用 ToolJet 和 PostgreSQL 数据库构建客户支持平台。该应用程序使您能够跟踪和响应客户的查询，并在应用程序上保存他们的联系方式。

什么是 ToolJet？

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

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

在我们继续之前，
如果你能给我们一颗星，我会非常高兴！也请在评论区告诉我。❤️

https://github.com/ToolJet/ToolJet

构建应用程序用户界面

在这里，您将学习如何使用 ToolJet 提供的各种 UI 小部件来构建用户友好的界面。在此之前，您需要创建一个帐户。

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

创建一个工作区和一个名为“客户支持台”的新应用程序。

创建应用程序后，将显示一个新的画布，您可以在其中使用右侧面板上的 UI 小部件构建任何用户界面。

在本文中，我将指导您构建客户支持应用程序的用户界面。
该应用程序分为三个页面：仪表板页面、工单详情页面和客户信息页面。

单击左上角的页面图标来创建附加页面。

仪表板页面

在这里，您将通过构建应用程序的仪表板页面来学习如何使用各种 UI 小部件。

为了复制此设计，我们将页面分成几个部分。

从上图可以看出，仪表盘分为三个部分：左侧边栏、顶部菜单（带红色边框）和主界面。
左侧图标栏中，ToolJet 提供了一系列图标供您选择，您还可以在选择图标时更改其背景颜色。

顶部菜单栏包含 ToolJet 提供的文本和容器组件。您可以更改它们的大小和颜色，以匹配下图。

应用程序的主体部分包含 ToolJet 提供的 Tab 和 Table 组件。Table 组件是 Tab 菜单的子元素。

票务详情页面

票证详细信息页面显示票证的内容并允许您对其作出回应。

要重新创建标题组件，请使用 ToolJet 的 DropDown 组件，页面主体包含 ToolJet 提供的 TextInput、Text Editor、Text 和 Button 组件。

客户信息页面

此页面显示有关您的客户的信息。您可以使用文本和表格组件重新设计。

恭喜！您已成功构建应用程序的用户界面。在接下来的部分中，您将学习如何通过将应用程序连接到 PostgreSQL 数据库来使其正常运行。

设置 ElephantSQL（PostgreSQL）数据库

ElephantSQL 使我们能够在云端（而不是本地机器）创建 PostgreSQL 数据库。请按照以下步骤创建 PostgreSQL 数据库：

在此创建一个 ElephantSQL 帐户 。

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

一旦创建了数据库实例，就会显示数据库信息。

接下来，让我们将您的 ToolJet 应用程序连接到数据库。

将 PostgreSQL 数据库连接到 ToolJet

从 ToolJet 仪表板右上角的菜单栏中选择“全局数据源”。

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

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

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

如果连接验证成功，我们就可以开始对数据库进行查询。

恭喜，您已成功创建数据库并将其连接到应用程序。现在您可以开始对数据库进行查询了。

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

在本节中，您将学习如何与 PostgreSQL 数据库通信以及如何在 ToolJet 中进行数据库查询。

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

接下来，创建数据库表，并在查询数据库之前添加一些虚拟数据。您需要创建两个表，一个用于联系人，另一个用于支持工单。

导航到 ElephantSQL 数据库的浏览器部分并执行下面的代码片段。

CREATE TABLE tickets (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255),
  email VARCHAR(255),
  product_version VARCHAR(10),
  issue_type VARCHAR(50),
  description TEXT,
  status VARCHAR(50),
  priority VARCHAR(50),
  assigned_to VARCHAR(100)
);

INSERT INTO tickets (name, email, product_version, issue_type, description, status, priority, assigned_to)
VALUES ('Chris Doe', 'john@example.com', '1.0', 'Bug', 'Encountered an error message when trying to save a file.', 'Open', 'High', 'Support Team');

INSERT INTO tickets (name, email, product_version, issue_type, description, status, priority, assigned_to)
VALUES ('John Doe', 'john@example.com', '1.0', 'Bug', 'Encountered an error message when trying to save a file.', 'Open', 'High', 'Support Team');

最后，创建联系人表并向表中添加一些虚拟数据。

CREATE TABLE contacts (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255),
  email VARCHAR(255),
  title VARCHAR(100),
  organization VARCHAR(100),
  country VARCHAR(100),
  language VARCHAR(100)
);

INSERT INTO employees (name, email, title, organization, country, language)
VALUES ('John Doe', 'john@example.com', 'Manager', 'ToolJet', 'United States', 'English');

INSERT INTO employees (name, email, title, organization, country, language)
VALUES ('Sean Doe', 'sean@example.com', 'Manager', 'ToolJet', 'United States', 'English');

在 ToolJet 中查询 PostgreSQL 数据库

为了使客户支持应用程序功能齐全，您需要能够在应用程序内部获取数据。因此，创建一个名为 的查询getTickets，用于从数据库中检索所有支持工单。

将 SQL 查询添加到 SQL 模式编辑器中，将选项设置Run the query on application load?为 true，然后保存查询。

接下来，将票证的表的值设置为查询返回的结果。

当您单击表格中的每个数据行时，您需要显示支持票的详细信息。

为此，您必须在表上添加“切换页面”事件并将选定的数据行保存到变量中（以便在“票证详细信息”页面上访问）。

使用 ToolJet 提供的方法检索所选行的详细信息{{variables.<variable_name>.values}}。因此，当您点击表格中的任何数据时，它会将您重定向到“工单详情”页面，您可以在其中查看所有工单信息。

接下来，创建另一个 PostgreSQL 查询，根据票证状态显示可用票证的数量。

将以下代码复制到 SQL 编辑器中。它将返回每个工单的状态和数量。

SELECT
    status,
    COUNT(*) AS ticket_count
FROM
    tickets
WHERE
    status IN ('Open', 'On Hold', 'Resolved')
GROUP BY
    status;

显示每个状态的票数，如下所示。

{{queries.ticketStatusCount.data[<index>].ticket_count}}

最后，创建另一个查询，从数据库中检索联系人并将其显示在客户页面内的表中。

更新表格的内容，如下所示。

恭喜您完成了这一步！在接下来的部分中，您将学习如何使用 ToolJet 中的 SendInBlue API 通过电子邮件回复客户的查询。

如何使用 ToolJet 中的 SendInBlue API 发送电子邮件

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

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

在仪表板上选择 SMTP 和 API，生成 SMTP 密钥，并将其复制到计算机上的某个位置。您很快就会需要它。

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

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

接下来，创建用于发送电子邮件的查询。提供您的电子邮件和姓名，并从“工单详情”页面检索收件人的电子邮件、主题和回复。

查询会自动从组件中检索数据。最后，单击“发送”按钮即可执行查询。

恭喜！您已完成申请。以下是该应用程序的演示： 客户支持台

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

结论

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

• 向 ToolJet 添加 PostgreSQL 数据库
• 使用 Sendinblue 在 ToolJet 应用程序中发送电子邮件，以及
• 使用 ToolJet 在几分钟内构建全栈应用程序。

ToolJet 是一款直观的开发工具，同时也是开源的——这意味着它的代码随时可供所有人改进和贡献。它拥有一个庞大的开发者社区，并且有才华横溢的贡献者不断维护和改进软件。作为用户，您可以确保在使用 ToolJet 时获得最佳性能。

你有兴趣为 ToolJet 做出贡献吗？欢迎访问我们的 GitHub 仓库：https://github.com/ToolJet/ToolJet，参与贡献或提出关于 ToolJet 的问题。

感谢您的阅读！