使用CHATGPT，Tooljet和PostgreSQL构建有效的电子邮件营销应用程序-DEV365 开发者社区

在本教程中，您将学习如何使用Tooljet，chatgpt和Postgresql构建电子邮件营销应用程序。

该应用程序允许您将订阅者添加到邮件列表中，将其分为类别，然后使用Brevo (formerly Sendinblue)向他们发送新闻通讯。我们还将使用Chatgpt生成电子邮件内容。所有这些功能在工具开启的帮助下都很容易集成。

什么是工具夹？

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。

创建一个工作区和一个名为新闻通讯管理器的新应用。

该应用程序分为四页 - 主页，ViewNewsletter页面，CreateNewsletter页面和SubscribersManager页面。单击左上角的页面图标以创建三个附加页面。

在主页上，您可以查看所有可用的新闻通讯，并导航到SubscribersManager和CreateNewsletter页。

ViewNewsletter页面显示已发表的新闻通讯的详细信息。

CreateNewsletter页面使我们能够创建新闻通讯作为草稿或通过将其发送给一组用户来发布。

SubscribersManager页面显示现有订户，并允许您在列表中添加新订户。

主页

在这里，您将学习如何在下面构建用户界面。

要创建上面的UI，您需要在画布上添加一个容器，该元素将容纳应用程序的所有其他UI元素。
接下来，将文本和按钮组件从右侧的面板上拖动到容器元素中以创建标题和按钮。

在上图中，我在按钮和文本组件下方添加了一个选项卡组件。接下来，通过将下面的代码段复制到屏幕右侧的“选项卡”输入中，编辑“选项卡组件”以仅包含已发布的“和草稿”选项卡菜单。

{{[
        { title: 'Published', id: '0' },
        { title: 'Drafts', id: '1' }
 ]}}

删除列表中心的工具激光映像，然后将ListView组件插入选项卡组件的正文中。调整它直到与此相似。

接下来，在订户按钮上添加一个on click事件，以导航用户到SubscribersManager页。

最后，在创建按钮上添加一个on click事件，将用户重定向到Create Newsletter页。

查看通讯页面

将当前页面更改为ViewNewsletter页面，将大容器放在画布上，并创建类似于下图的UI。

有三个文本组件 - 应用程序的名称，标题和内容以及后退按钮。标题和内容文本是每个新闻通讯的标题和内容的占位符。此页面允许我们查看任何已发表的新闻通讯的内容。

最后，在后退按钮上添加一个on click事件，将用户重定向到主页。

创建新闻通讯页面

此页面使您可以保存并发布新闻通讯。它接受新闻通讯的标题，电子邮件组和内容。您也可以通过提供准确的提示来使用AI生成的内容。

Save to Draft和Send按钮允许我们保存新闻通讯或发送给用户的电子邮件。

最后，当用户单击“返回”按钮时，将用户重定向到房屋。

订户管理器页面

在此页面上，您可以查看所有现有订户并在列表中添加新订户。

设计页面，如下所示。我们的标题和按钮组件在页面的顶部和显示订户列表的表组件。

然后，在添加按钮上添加一个on click事件，以便它显示一个模态组件，使您可以添加订户的详细信息。

恭喜！您已经成功地为应用程序构建了用户界面。接下来，让我们在应用程序中添加所需的功能。

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

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

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

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

从您的工具喷气机仪表板上的顶级菜单栏中选择全局数据源。

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

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

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

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

设置数据库结构

您需要创建两个数据库表，一个用于订户，另一个用于新闻通讯。

新闻通讯和订户表都将拥有email_group属性，以使我们能够识别属于组的订户并仅向组中的订户发送电子邮件。

因此，让我们创建数据库表并添加一些虚拟数据。导航到您的ElephantsQL数据库上的浏览器部分，然后执行下面的代码段。

CREATE TABLE Letters(
    id SERIAL PRIMARY KEY,
    title VARCHAR(255),
    content TEXT,
    email_group VARCHAR(255),
    published BOOLEAN, published_date VARCHAR(255));

INSERT INTO Letters(title, content, email_group, published, published_date) VALUES('ToolJet v3.0 is live', 'ToolJet is an open-source low-code framework that enables us to build full-stack web applications within a few minutes.',  'one', false, '');

INSERT INTO Letters(title, content, email_group, published, published_date) VALUES('Team Community Call is live', 'ToolJet is an open-source low-code framework that enables us to build full-stack web applications within a few minutes.',  'two', true,'01-05-2023');

INSERT INTO Letters(title, content, email_group, published, published_date) VALUES('Invitation to product launch', 'It is an excellent development tool helping individuals, developers, and businesses create and ship products faster.',  'three', true, '01-05-2023');

上面的代码片段在数据库上创建Letters表，并添加了三个数据条目：两个已发布，最后一个是草稿。

最后，创建订户表。

CREATE TABLE Subscribers (
    name VARCHAR(255),
    email VARCHAR(255),
    organisation VARCHAR(255),
    email_group VARCHAR(255),
);

INSERT INTO Subscribers(name, email, organisation, email_group) VALUES('Jack', 'jack@gmail.com', 'ToolJet',  'one');
INSERT INTO Subscribers(name, email, organisation, email_group) VALUES('Teja', 'teja@gmail.com', 'ToolJet',  'two');
INSERT INTO Subscribers(name, email, organisation, email_group) VALUES('Badri', 'badri@gmail.com', 'ToolJet',  'three');

查询工具jet中的PostgreSQL数据库

要创建电子邮件营销应用程序，您需要创建一些数据库查询。

获取所有订户。
将新订户添加到列表中。
将新闻通讯保存为草稿。
获得新闻通讯。
将新闻通讯保存为草稿。
保存已发表的新闻通讯
获取已发表新闻通讯的所有详细信息。

获取所有可用订户

在SubscriberManager页面上，我们需要从表上的数据库中显示订户列表，如下所示。

因此，在称为getSubscribers的Postgres数据库上创建一个新的查询，并从订户表中检索所有数据。确保将Run this query on application load切换为trug。

最后，使用查询返回的数据更新表数据。

将新订户添加到列表中

在SubscribersManager页面上，有一个Add按钮。当您单击按钮时，它会显示一种模式，使您能够添加与订户相关的各种详细信息。

因此，单击“添加”按钮时，您需要执行createSubscriber查询。

INSERT INTO Subscribers(name, email, organisation, email_group) VALUES('{{components.subscriberName.value}}', '{{components.subscriberEmail.value}}', '{{components.subscriberOrg.value}}',  '{{components.subscriberGroup.value}}');

上面的代码段访问模式上输入组件的值。 components对象允许您访问每个组件的属性。

最后，当用户单击添加按钮并立即关闭模式时，让我们运行查询。

将新闻通讯保存为草稿

创建一个postgresql查询，该查询检索所有保存为草稿的新闻通讯。

启用SQL编辑器下方的转换。它使我们能够修改从查询返回的数据。

const imageURL = "https://www.svgrepo.com/show/34217/image.svg";

return data.map((obj) => {
    return { imageURL, text: obj.title, group: obj.email_group };
});

更新“草稿”选项卡以显示从getDrafts查询返回的数据。

列表视图上的每个元素使用listItem属性显示内容。因此，要访问每个数据属性，请使用listItem.<propertyName> -{{listItem.text}}和{{listItem.group}}。

获取发布的新闻通讯

创建与getDrafts查询类似的查询，该查询仅会返回其发布属性的新闻通讯。

SELECT *
FROM Letters
WHERE published = TRUE;

const imageURL = "https://www.svgrepo.com/show/34217/image.svg";

return data.map((obj) => {
    return {
        imageURL,
        text: obj.title,
        date: obj.published_date,
        group: obj.email_group,
        id: obj.id,
    };
});

上面的代码片段返回图像URL，文本（标题），日期，组和ID。

在列表视图中显示所有已发布的新闻通讯。回想一下您需要使用listItem.<property>方法访问从查询返回的每个属性。

保存新闻通讯作为草稿

创建另一个查询，该查询接受createNewsletter页面中的值并将新闻通讯保存为草稿。

INSERT INTO Letters(title, content, email_group, published, published_date) VALUES('{{components.title.value}}', '{{components.content.value}}', '{{components.group.value}}', false, '');

当用户单击下图中的Save to Drafts按钮时，请执行查询。保存新闻通讯后，您可以将用户重定向到主页。

保存已发表的新闻通讯

添加另一个称为savePublished的查询，该查询接受输入字段中的值并将其保存为已发布的新闻通讯。

INSERT INTO Letters(title, content, email_group, published, published_date) VALUES('{{components.title.value}}', '{{components.content.value}}', '{{components.group.value}}', true, CURRENT_DATE);

当用户单击“发送”按钮时，请运行查询。在接下来的部分中，保存已发表的新闻通讯后，我们还将其发送给该电子邮件组的订阅者。

获取已发表新闻通讯的详细信息

我们有一个称为-viewNewsletter的页面，当用户单击它们时，应该显示已发布帖子的标题和内容。

要执行此操作，您需要获取所选新闻通讯的ID并使用ID查询Letters数据库。

首先，在列表视图的每一行中添加set Variable操作。当您单击每个列表项目时，它将变量的值设置为列表视图中的索引。

变量-selectedListviewId包含所选项目的索引。因此，您可以从查询返回的数据中获取项目ID。

SELECT *
FROM Letters
WHERE id = {{queries.getPublished.data[variables.selectedListviewId].id}}

上面的代码片段访问variables对象，并使用其索引获取所选项目的ID。然后，您可以使用ID进行过滤字母数据库。

由于我们只需要新闻通讯的标题和内容属性。因此，您可以仅使用所需的数据更新返回的数据。

return data.map((item) => {
    return { title: item.title, content: item.content };
});

接下来，当用户单击列表视图的每个项目时，运行查询。

最后，当用户单击List View中的每个项目时，将用户重定向到View Newsletter页面，以使他们能够查看新闻通讯的标题和内容。

如何与工具jet中的chatgpt通信

在这里，您将通过接受提示并生成电子邮件内容来学习如何通过openai通过openai与chatgpt进行通信。

设置OpenAI帐户

登录或创建一个OpenaiAccountâhere。

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

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

在工具开机中与OpenAI API通信

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

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

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

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

Draft a newsletter about {{components.prompt.value}}

当用户单击createNewsLetter页面上的询问按钮时，请运行查询。

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

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

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

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

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

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

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

从上图中，电子邮件收件人是从另一个查询-{{queries.querySubscriber.data}}返回的数据。由于您在createNewsLetter页面上选择一个组时，需要将新闻通讯发送到特定的订户。因此，querySubscriber查询获取特定组下的订户列表。

上面的图像返回与所选组相关的订户电子邮件的数组。

恭喜！您已经完成了这个项目。这是应用程序的工作演示：Toolbus newsletter manager

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

结论

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

将PostgreSQL数据库添加到工具喷气
使用sendinblue，
在工具开机中与chatgpt进行通信，
使用工具开启的几分钟内构建全堆栈应用程序。

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

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

谢谢您的阅读！