使用 Novu 和 SendGrid 创建通知系统
太长不看
在本教程中，我们将创建一个可以发送电子邮件通知的工具。为此，我们将利用Novu 的开源通知基础架构以及 SendGrid 来管理我们的电子邮件系统。
介绍
通知系统被广泛认为是应用开发者和营销人员与用户互动的一种有效方式。借助开源通知工具，开发者可以创建自己的通知流程。这些工具不仅能让他们更好地掌控定制解决方案，还能省去构建内部平台的繁琐步骤。
在我看来，Novu 是最佳的通知基础设施选择。它是一个出色的平台，可以处理各种类型的通知，而且很容易与 SendGrid 等服务提供商配合使用，以管理电子邮件、短信等。
Novu是什么？
Novu 是一个开源的通知基础设施，旨在简化开发团队的沟通和通知流程。凭借统一的 API 以及与 SendGrid、MailChimp 和 Twilio 等热门工具的集成，它提供了无限的可能性。
Novu平台的一项关键特性是提供了一个管理仪表盘和一个集中式位置，开发者可以在此接收开发过程中的实时通知和信息。而且，由于它是一个开源项目，因此具有更高的安全性、透明度和易用性。所有这些都使其比其他类似技术更具可及性。
使用 Novu 创建通知系统
当然，我们需要注册一个 Novu 账号才能开始使用。幸运的是，免费套餐足以满足我们这个演示项目的需求，但如果您想开发可扩展性更强的项目，还有其他套餐可供选择。您也可以选择自行托管 Novu，但我们今天暂且不讨论这一点。
注册账号后，我们将在“通知”选项卡中创建一个新的通知模板。
接下来我们需要输入一些基本信息，例如名称、描述、组别和详细信息。我们选择的名称稍后可以在代码中用于触发此特定通知。
现在我们有了模板，接下来需要为其创建工作流程。我们可以在“工作流程编辑器”*选项卡中完成此操作。
在这里，您可以选择触发通知时要发生的事件。我们将设置一个用于发送电子邮件的事件，因为我们希望使用 SendGrid 来管理项目中的电子邮件。
这个应用内模板是可以自定义的，所以我们会根据需要进行设置，并创建通知中的内容。
如何将 SendGrid 与 Novu 连接
现在我们有了通知模板，接下来要切换到电子邮件服务。我们将使用SendGrid作为电子邮件服务提供商，Novu 可以集成多种此类服务提供商。
创建帐户后，请转到左侧面板中的“发件人身份验证”部分，然后单击“验证单个发件人”，以便我们连接 Novu。
接下来，在“设置”中选择“API密钥”，然后点击右上角的“创建API密钥” 。
请输入 API 密钥名称，并选择“完全访问权限”。请务必获取密钥副本并妥善保管，因为稍后需要将其导入 Novu。
现在一切就绪，我们需要将其连接到 Novu。返回 Novu 控制面板，转到集成商店，然后选择 SendGrid。
在第一个字段中输入 SendGrid 的 API 密钥，在第二个字段中输入我们已验证的电子邮件地址。第三个字段需要填写发件人姓名。之后点击更新按钮，我们就可以使用 SendGrid 了！
将 Novu 集成到您的项目中
完成 Novu 和 SendGrid 的配置后，我们需要将它们集成到项目中！在本教程中，我们假设您已经有一个现有的 Node.js 项目。
您可以使用以下 NPM 命令安装 Novu：
npm install @novu/node
现在它已经集成到我们的项目中，我们需要添加 Novu API 密钥才能使用它。请将以下代码添加到您现有的代码中：
import { Novu } from '@novu/node';
const novu = new Novu(process.env.NOVU_API_KEY);
在这里，我们将添加系统所需的变量。这些变量与 Novu 将用于向订阅用户发送电子邮件通知的变量相同。
await novu.subscribers.identify([user.id](http://user.id/), {
email: user.email_id,
firstName: user.first_Name,
});
Novu 还提供了一个可以添加到前端的 Web 组件，我们将使用这个组件：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="[https://novu-web-component.netlify.app/index.js](https://novu-web-component.netlify.app/index.js)"></script>
</head>
<body>
<notification-center-component
style="display: inline-flex"
application-identifier="YOUR_APP_IDENTIFIER"
subscriber-id="YOUR_SUBSCRIBER_ID"
></notification-center-component>
<script>
// here you can attach any callbacks, interact with the web component API
let nc = document.getElementsByTagName('notification-center-component')[0];
nc.onLoad = () => console.log('hello world!');
</script>
</body>
</html>
然后，我们就可以使用通知标识符发送通知了：
await novu.trigger('Welcome Notification', {
to: "subscriberId"
payload: {
userName: "Muthu"
},
});
现在，每当我们的函数执行时，我们的订阅者都会收到一封电子邮件和您应用通知中心的通知。很简单，对吧？
总结
如今，通知功能几乎是大多数应用程序的必备功能。它让用户能够随时掌握平台内外的最新动态。有了 Novu 为您的应用程序通知系统提供支持，您将拥有一个功能强大的通知基础架构，其强大程度不受任何限制。此外，添加 SendGrid 还能让您实现 ISP 外联、信誉监控以及电子邮件服务的实时分析。
如果您想充分发挥 Novu 开源通知基础架构的潜力，请立即注册！注册完全免费，而且它可以集成到您所有常用的工具中。
文章来源：https://dev.to/novu/creating-a-notification-system-with-novu-and-sendgrid-1311