使用chatgpt，PostgreSQL和工具汇款构建智能CRM-DEV365 开发者社区

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

介绍

CRM应用程序将允许您将新用户或客户添加到PostgreSQL数据库中，在仪表板上查看其详细信息，使用CHATGPT生成电子邮件模板，并通过Sendinblue。

。

我们将在本教程中使用工具开机作为应用程序接口。

什么是工具夹？

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

ToolJet允许您构建使用关系和非依赖数据库，REST API，OpenAI Technologies和云存储（如Google Cloud Storage，AWS S3和Minio）的应用程序。这是一个出色的开发工具，可以帮助个人，开发人员和企业更快地创建和运输产品。

在我们继续之前，我需要您的帮助？ ð
如果您能给我们明星，我会非常高兴！我也会在评论部分中知道。 €

https://github.com/ToolJet/ToolJet

设置ElephantsQL（PostgreSQL）数据库

ElephantSQL使我们能够在云上而不是本地计算机上创建一个PostgreSQL数据库。请按照以下步骤创建一个PostgreSQL数据库：

创建一个Elephantsql帐户here。

添加一个新的数据库实例。不需要信用卡或帐单信息。

创建数据库实例后，显示您的数据库信息。

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

用工具开启构建应用程序

在这里，您将学习如何创建一个工具jet帐户并使用工具开启构建功能齐全的应用程序。

如果您不熟悉Tooljet，create an account。

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

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

要创建上面的UI图像，您将首先在画布上添加一个大容器，该容器将容纳应用程序的所有其他UI元素。接下来，在页面顶部添加三个容器元素，添加引线按钮组件和表组件。

Tooljet使您可以通过在画布上拖放各种UI组件来创建应用程序的接口。

重新创建UI后，将带有文本“发送电子邮件”的动作按钮添加到表中。（我们将稍后进行配置，使我们能够通过电子邮件发送每个用户）。

要完成UI，我们需要一个接口，使我们能够将用户添加到数据库中，而另一个可以为每个用户编辑和生成电子邮件内容。

为此，我们将使用Modal component。当我们单击“添加引线”按钮时，我们将显示模式 - 用于添加新数据和“发送电子邮件”操作按钮 - 用于输入用户的电子邮件内容。

添加新的铅模式

要显示添加新的铅模式组件，您需要创建模态并向“添加引线”按钮添加一个onclick事件以显示模态。

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

发送电子邮件模式

发送电子邮件模式允许我们输入用户的电子邮件，电子邮件主题和内容。您还可以使用CHATGPT API生成电子邮件内容。您将在即将举行的会议中学习如何做到这一点。

Twoggle Switch有一个onChange事件，该事件在您不需要时会隐藏Chatgpt提示输入字段和按钮。

当用户单击Send Email按钮时，请记住关闭模态。

恭喜！ð您已经完成了此应用程序的UI。在即将举行的会议中，您将学习如何将用户界面连接到PostgreSQL数据库，与ChatGPT进行通信，并使用Sendinblue发送电子邮件。

如何与工具jet中的PostgreSQL数据库进行通信

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

在这里，您将学习如何与工具开机中的PostgreSQL数据库进行通信。首先，让我通过将PostgreSQL数据库连接到Tooljet。

将PostgreSQL数据库连接到工具开启

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

从上图中，主机与ElephantsQL上的服务器名称相同（不包括支架）。用户名和数据库名称相同，并将密码复制并粘贴到其字段中。

向下滚动页面，然后单击Test Connection。

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

查询工具jet中的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;

上传后，您可以在Elephantsql上查看数据。

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

更新表组件以显示从getTableData查询检索的数据。

由于我们已经在表上显示了内容。接下来，让我们展示数据库中可用的客户，潜在客户和潜在客户的数量。

基于称为getLeadsCount，getProspectsCount和getCustomersCount的PostgreSQL数据库创建三个新查询。

更新每个查询的SQL编辑器，以检索下面完成的每个类别下的数据数，并保存它们。

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

通过替换以下容器中的文本内容来显示从每个查询返回的数据数。

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

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

最后，打开“在应用程序加载上运行此查询？”为getTableData和其他三个查询切换。

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

将新用户添加到数据库中

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

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

确保下面的代码段与模式中的组件名称匹配。将下面的代码段复制到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}}');

最后，将onClick事件添加到Add Lead按钮以在按钮上运行查询。

如何与工具jet中的chatgpt通信

在这里，您将学习如何通过tooljet中的OpenAI与Chatgpt进行通信。

设置OpenAI帐户

登录或创建一个OpenaiAccountâhere。

在导航栏上单击Personal，然后从菜单栏中选择View API keys以创建一个新的秘密键。

生成一个新的API键，并将其复制在计算机上的某个地方。我们将在即将到来的部分中使用它。

在工具开机中与OpenAI API通信

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

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

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

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

Draft an email to {{components.recipient.value}} about {{components.chatgptprompt.value}}

当用户单击模式上的询问按钮时，请运行查询。

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

如何通过tooljet中的sendinblue API发送电子邮件

Sendinblue是一种数字营销工具，可通过一个平台提供电子邮件，SMS，Facebook，Chat等，以通过建立更牢固的客户关系来帮助发展业务。

在本节中，您将学习如何通过工具开机中的sendinblue集成和发送电子邮件。首先，您需要登录或create a SendinBlue account。

在仪表板上选择SMTP和API，生成一个SMTP键，然后在计算机上的某个地方复制它。您很快就需要它。

返回您的工具喷气应用程序，添加新的SMTP数据源，然后填写所需的凭据。您的密码是生成的SMTP密钥。

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

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

最后，保存查询并在单击模式上的发送电子邮件按钮时运行。

这是应用程序的工作演示：âhttps://tooljet-stny.onrender.com/applications/7a8867e3-3cea-49e3-89e7-8da39038b875

您也可以添加download its JSON file并将其导入工具jet应用程序，但是您需要提供SendInblue凭据和OpenAI API密钥。

结论

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

将PostgreSQL数据库添加到工具喷气
使用sendinblue，
通过openai在工具jet和
使用工具开启的几分钟内构建全堆栈应用程序。

ToolJet既是一种出色的开发工具，又是开源工具 - 这意味着它的代码很容易供每个人修改和改进。它具有large community of developers和才华横溢的贡献者，不断地维护和改进软件。作为用户，您可以确定使用工具jet时获得最佳性能。

您有兴趣为工具开机做出贡献吗？随时查看我们的github repo-https://github.com/ToolJet/ToolJetâ以贡献和提出有关工具的问题。

谢谢您的阅读！