Create a notifications system using in-app (bell icon) and emails Who is this article for? Why Novu? Ok, enough with the self promotion 😆🔫, let's start

2025-06-10

使用应用内（铃铛图标）和电子邮件创建通知系统

这篇文章适合哪些人阅读？

为什么选择 Novu？

好了，自我宣传就到此为止吧😆🔫，我们开始吧

在本文中，我将指导您在 Node.js 应用程序中使用 Novu 在应用内和电子邮件中发送通知。我们将首先创建一个 Novu 项目，通过 Novu 管理平台添加电子邮件通信渠道，将 Novu 安装到 Express 应用程序中，然后使用 Novu 🚀 发送应用内和电子邮件消息。

这篇文章适合哪些人阅读？

您想为您的用户实现产品通知，例如应用内通知（如您在 Facebook 上的铃铛图标）、在流程中发送电子邮件/短信或推送通知。

一个简单的例子是： Facebook 向您的铃铛图标发送通知（您有一个新的好友请求），并且 1 小时后您还没有阅读，他们会向您发送一封电子邮件。

为什么选择 Novu？

Novu 是第一个开源通知基础设施，可管理从电子邮件到短信、推送通知等所有形式的通信。https
://github.com/novuhq/novu

它使您能够添加多个电子邮件和短信通信渠道，创建共享消息模板，监控每个活动，并在您选择的不同通信渠道之间切换。

中央通讯系统

Novu 脱颖而出的原因之一是其拥有集中沟通的能力。Novu 提供了一个仪表板，您可以在其中监控和管理所有短信和电子邮件通信。使用 Novu，您可以在一个仪表板上轻松跟踪多个渠道的通信。

有多种沟通渠道可供选择

使用 Novu，您可以使用尽可能多的沟通渠道，并且无需编辑应用程序中的现有代码即可轻松切换。
例如，如果您在 Web 应用程序中使用 Sendgrid 发送电子邮件，但该服务暂时不可用，您可以切换到其他沟通渠道，直到 Sendgrid 恢复正常，而无需更改代码。Novu 使与用户的沟通更加易于使用和维护。

内容管理系统

Novu 为每位用户提供内容管理系统，您可以创建可重复使用的电子邮件和短信模板，并在各种软件应用程序之间共享。使用 Novu，您无需担心创建动态内容的压力。Novu 使用 Handlebars 模板引擎来接受动态变量，从而为您的用户打造独特的体验。

开源软件

Novu 是开源软件；这意味着代码可供所有人随时修改和改进。Novu 拥有庞大的 开发者社区和才华横溢的贡献者，他们不断维护和改进软件。作为用户，您可以确保在使用 Novu 时获得最佳性能。您还可以请求文档修改、寻求帮助，并在需要帮助或遇到错误时与维护人员交流。

顺便说一句：您可以成为贡献者并获得认可！我们为所有贡献者创建了一个特别页面，以表彰他们的辛勤工作，并为他们提供可在 Github 上使用的徽章 🚀
点击此处获取新问题：https://novu.co/contributors
图片描述

好了，自我宣传就到此为止吧😆🔫，我们开始吧

在这里，我将指导您创建 Novu 项目并设置 Novu 以发送电子邮件和应用内通知。

创建您的项目文件夹并打开该文件夹。

mkdir <folder_name>
cd <folder_name>
Enter fullscreen mode Exit fullscreen mode

确保您的计算机上安装了 Node.js，然后在终端中运行下面的代码片段来创建 Novu 项目。

npx novu init
Enter fullscreen mode Exit fullscreen mode

在创建 Novu 项目之前，您需要使用 Github 登录。下面的代码片段包含运行后应遵循的步骤npx novu init。

Now let's setup your account and send your first notification
❓ What is your application name? <Your_application_name>
❓ Now lets setup your environment. How would you like to proceed? 
   > Create a free cloud account (Recommended)
   Create your account with: Sign-in with GitHub
✔️ Create your account successfully.

Now let's setup your account and send your first notification
❓ Looks like you already have a created an account for Development (Use arrow keys)
> Visit Development Dashboard
  Cancel
Enter fullscreen mode Exit fullscreen mode

上面的代码片段会 在您的默认浏览器中打开Novu Manage 平台。

Novu 仪表板页面

Novu 仪表板页面

恭喜🎊，您已成功创建 Novu 帐户。接下来，点击Configure Now按钮添加电子邮件提供商。本文中我将使用 Sendgrid。

如何将 Sendgrid 电子邮件提供商添加到 Novu

我选择了 Sendgrid，但您可以轻松选择以下之一：Mailgun、SES、Postmark、NodeMailer、Mailjet、Mandrill、SendinBlue 和 EmailJS。

如果您缺少提供商，只需在 Github 上打开一个新问题 :)

让我们设置一个新的 Sendgrid 帐户并将其添加到 Novu。

打开另一个标签，访问 Twilio Sendgrid 网站 并使用工作或公司电子邮件创建一个帐户。

登录，单击侧边栏上的“设置”，然后选择“API 密钥”以创建具有“邮件发送”权限的 SendGrid API 密钥。

复制 API 密钥，并将其粘贴到 Novu 管理平台

新 Sendgrid.png

单击上图中 Twilio Sendgrid 旁边的设置图标，然后将 API 密钥粘贴到 API 密钥字段中。

Novu API 字段.png

返回您的 Sendgrid 仪表板以创建并验证发件人身份。

将电子邮件地址和发件人姓名粘贴到上图中的字段中，确保其处于活动状态，然后单击“更新”按钮。

恭喜🎊，您已成功将您的 Sendgrid 帐户连接到 Novu，并且您可以开始通过 Novu 发送电子邮件。

接下来，让我们创建一个工作流程，展示如何在 Node.js 应用程序中发送通知。

如何创建 Novu 通知工作流程

单击 侧边栏中的通知并选择默认为您创建的通知模板。

选择工作流编辑器来创建通知工作流，然后将不同的通知渠道从右侧拖到页面中心的大框中。

Novu 工作流程.png

确保工作流程与上图相同，然后单击“更新”按钮保存步骤。

接下来，让我们创建一个 Express 应用程序并将 Novu 添加到 Node.js 应用程序中。

将 Novu 添加到 Express 应用程序

在本节中，您将学习如何设置 Express Node.js 服务器并将 Novu 添加到应用程序中。

在上一节创建的项目文件夹中，创建一个package.json文件和一个index.js文件 - Node.js 应用程序的入口点。

cd <project-folder>
npm init -y & touch index.js
Enter fullscreen mode Exit fullscreen mode

安装 Express 和 Novu SDK for Node.js。Express.js 是一个快速、简约的框架，提供了多种用于在 Node.js 中构建 Web 应用程序的功能。

npm install express @novu/node
Enter fullscreen mode Exit fullscreen mode

将下面的代码片段复制并粘贴到index.js文件中以创建 Express 应用程序。

const express = require('express'); //import expressjs
const app = express();
const PORT = 4000; // where the server runs
const path = require('path');

//allows access to data sent from the client - index.html file
app.use(express.urlencoded({ extended: true }));

//creates a route that displays an index.html file.
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '/index.html'));
});

//listens to updates made on the project and shows the status of the project
app.listen(PORT, () => {
  console.log(`⚡️[server]: Server is running at https://localhost:${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

创建index.html上面引用的文件并将下面的代码复制到文件中。

<!DOCTYPE html>
<head>
  <title>Generating Employment Letter</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
    }
    form {
      min-height: 100vh;
      width: 100%;
      padding: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    input {
      padding: 10px;
      width: 100%;
      outline: none;
      border: 1px solid #ddd;
      border-radius: 3px;
      margin-bottom: 20px;
    }
    #button {
      width: 200px;
      padding: 20px;
      outline: none;
      border: none;
      background-color: #333;
      color: #fff;
      cursor: pointer;
      margin-top: 30px;
      border-radius: 3px;
    }
    h2 {
      margin-bottom: 20px;
    }
    .container {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
    }
    .container div {
      width: 45%;
    }
    #personnel {
      margin-top: 30px;
    }
    #others div {
      width: 30%;
    }

  </style>
</head>
<body>
    <form method="POST" action="/sent">
      <h2>Candidate's information</h2>
      <div class="container">
          <div>
            <label for="candidateFirstName">Candidate's First Name</label>
            <input type="text" name="candidateFirstName" id="candidateFirstName"/>
          </div>

          <div>
            <label for="candidateLastName">Candidate's Last Name</label>
            <input type="text" name="candidateLastName" id="candidateLastName"/>
          </div>
      </div>

      <div class="container" id="others">
          <div>
            <label for="candidateEmail" >Candidate's Email</label>
            <input type="email" name="candidateEmail" id="candidateEmail"/>
          </div>

          <div>
            <label for="candidateSalary" >Proposed Salary</label>
            <input type="number" name="candidateSalary" id="candidateSalary"/>
          </div>

          <div>
            <label for="candidatePosition" >Proposed Position</label>
            <input type="text" name="candidatePosition" id="candidatePosition"/>
          </div>
      </div>

      <h2 id="personnel">Official Personnel</h2>

        <div class="container">
            <div>
              <label for="officialFullName" >Full Name</label>
              <input type="text" name="officialFullName" id="officialFullName"/>
            </div>
            <div>
              <label for="officialPosition" >Position Held</label>
              <input type="text" name="officialPosition" id="officialPosition"/>
            </div>
        </div>

        <button id="button">SEND OFFER</button>
    </form>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

index.js复制以下代码即可运行该文件。访问http://localhost:4000即可查看该index.html文件。

node index.js
Enter fullscreen mode Exit fullscreen mode

接下来，我将向您展示如何通过 Novu 发送电子邮件和应用内通知，具体方法是创建一个 Web 应用程序，为组织中成功的求职者生成录用通知。该index.html文件是该应用程序的 Web 客户端/布局。

如何使用 Novu 发送电子邮件通知

在这里，我将指导您创建电子邮件模板并通过 Novu 将其发送给用户。

进入 Novu 管理平台，选择通知模板，然后单击工作流编辑器。

从中心大框中选择电子邮件来编辑模板。

Novu 编辑模板.png

Novu 允许我们使用带有Handlebars 模板引擎的 HTML 模板添加纯文本和自定义代码 作为电子邮件内容。

复制并粘贴此内容作为电子邮件的主题行

OFFER LETTER FROM NOVU - CONGRATULATIONS {{candidateFirstName}}
Enter fullscreen mode Exit fullscreen mode

选择“自定义代码”作为内容类型，并复制以下代码。电子邮件内容和主题行允许我们使用Handlebars 模板引擎将动态数据传递到变量中。

<body>
  <p>Dear {{candidateFirstName}} {{candidateLastName}}</p>
  <p>This is to inform you that you've been offered a position at Novu as a
    {{candidatePosition}}
    with a starting salary of
    {{candidateSalary}}
  </p>
  <p>Kindly sign the attached document.</p>
  <p>Congratulations, once again</p>
  <br />
  <p>{{officialFullName}} </p>
  <p><em>{{officialPosition}}</em></p>
</body>
Enter fullscreen mode Exit fullscreen mode

现在您可以保存模板了。接下来，我将指导您如何通过电子邮件发送此模板。

将 Novu 导入到 index.js 文件中。要获取您的 API 密钥，请点击 Novu 管理平台上的“设置” ，选择“API 密钥”，然后将其复制到下面的代码中。

//Import and instantiate Novu in the index.js file

const { Novu } = require('@novu/node');
const novu = new Novu(<YOUR_API_KEY>);
Enter fullscreen mode Exit fullscreen mode

在 index.js 文件中创建一个\sent仅接受 POST 请求的路由，并复制以下代码。此路由从客户端接收所有用户数据并将其记录到控制台。

app.post('/sent', (req, res) => {
  //Gets the inputs from the web client
  const {
    officialPosition,
    officialFullName,
    candidateEmail,
    candidateSalary,
    candidatePosition,
    candidateFirstName,
    candidateLastName,
  } = req.body;

  //Logs the data to the client
  console.log({
    officialPosition,
    officialFullName,
    candidateEmail,
    candidateSalary,
    candidatePosition,
    candidateFirstName,
    candidateLastName,
  });
});
Enter fullscreen mode Exit fullscreen mode

从客户端检索数据后，更新 POST 路由以使用 Novu 模板将电子邮件发送到应用程序。

app.post('/sent', async (req, res) => {
  const {
    officialPosition,
    officialFullName,
    candidateEmail,
    candidateSalary,
    candidatePosition,
    candidateFirstName,
    candidateLastName,
  } = req.body;

  await novu
    .trigger('on-boarding-notification', {
      to: {
        subscriberId: '<YOUR SUBSCRIBER_ID>',
        email: candidateEmail,
      },
      payload: {
        officialPosition,
        officialFullName,
        candidateSalary,
        candidatePosition,
        candidateFirstName,
        candidateLastName,
      },
    })
    .then((data) => {
      console.log(data);
    })
    .catch((err) => console.error(err));

  // redirects to the sent.html file
  res.sendFile(path.join(__dirname, '/sent.html'));
});
Enter fullscreen mode Exit fullscreen mode

根据上面的代码片段，我在添加 Novu 之前将回调函数改为异步函数。之后，Novu 通过其 ID 触发电子邮件模板，并将模板发送到候选人的邮箱。payload 对象包含模板所需的所有动态数据。

要获取您的订户 ID，请单击 Novu 管理平台上的“设置” ，然后复制并粘贴应用程序标识符。

创建sent.html上面代码片段中引用的文件。

<!DOCTYPE html>
  <head>
    <title>Email Sent!</title>
  </head>
  <body>
    <p> Message sent!</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

通过运行以下代码启动 Node.js 服务器。

node index.js
Enter fullscreen mode Exit fullscreen mode

要将附件添加到电子邮件中，您可以在有效负载对象内创建附件数组或通过 Novu 管理平台上传文档。

await novu
    .trigger('on-boarding-notification', {
      to: {
        subscriberId: '<YOUR SUBSCRIBER_ID>',
        email: candidateEmail,
      },
      payload: {
        ...,
        attachments: [
          {
            file: fs.readFileSync(__dirname + '/test.jpeg'),
            name: 'test.jpeg',
            mime: 'image/jpg',
          },
      ],
      },
    })
    .then((data) => {
      console.log(data);
    }).catch((err) => console.error(err));
Enter fullscreen mode Exit fullscreen mode

上面的代码片段在将电子邮件发送给收件人之前，会将一张图片附加到电子邮件中。接下来，让我们学习如何将应用内通知发送到 Web 客户端。

如何使用 Novu 发送应用内通知

在本节中，您将学习如何发送应用内通知并将其显示在应用程序的 Web 客户端上。

访问 Novu Manage 平台，选择您正在使用的模板，然后单击工作流编辑器。

从中心大框中选择“应用内”，单击“编辑模板”按钮来编辑通知并保存内容。

Novu 应用内通知.png

更新sent.html文件，使其在结束 body 标签之前包含 JavaScript 代码和铃铛图标。当用户点击铃铛图标时，JavaScript 代码会显示应用内通知栏。

<!DOCTYPE html>
<head>
    <title>Sent!</title>
    <!-- FontAwesome CDN link-->
    <script src="https://kit.fontawesome.com/0c7ff73f65.js" crossorigin="anonymous"></script>
</head>

<body>
    <p> Message sent!</p>

    <!-- The elements Novu needs to display the Notification bar -->
    <div id="notification-bell" style="min-height: 300px; width: 100%">
        <i class="fa fa-bell"></i>
        <span id="unseen-badge"></span>
    </div>

    <script type="module">
        (function(n,o,t,i,f, m) {
          n[i] = {}, m = ['init']; n[i]._c = [];m.forEach(me => n[i][me] = function() {n[i]._c.push([me, arguments])});
          var elt = o.createElement(f); elt.type = "text/javascript"; elt.async = true; elt.src = t;
          var before = o.getElementsByTagName(f)[0]; before.parentNode.insertBefore(elt, before);
        })(window, document, 'https://embed.novu.co/embed.umd.min.js', 'novu', 'script');

        novu.init('Xr_knh-UYIPD', '#notification-bell', {
          subscriberId: "Xr_knh-UYIPD",
          email: "nevo@novu.co",
          firstName: "Nevo",
          lastName: "David",
        });
      </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

注意：您可以从Font Awesome获取铃铛图标 ，并确保 JavaScript 代码中引用的 CSS id 存在于您的 HTML 文件中。

Novu 应用内通知栏.png

源代码

您可以在此处查看完整的源代码：
https://github.com/novuhq/blog/tree/main/sending%20notifications%20with%20Novu
这只是与 Novu 交互的 Express 服务器。
在克隆项目之前，请先运行。

npx novu init
Enter fullscreen mode Exit fullscreen mode

结论

在本教程中，您了解了什么是 Novu、为什么要使用它、如何创建 Novu 项目、如何将 Novu 添加到 Express.js Web 应用程序以及如何使用 Novu 发送电子邮件和应用内通知。

Novu 让您能够轻松地通过各种短信和电子邮件通信渠道发送、监控和管理通知。它使您能够在应用程序中创建丰富的通知系统，从而为用户提供卓越的用户体验。

您还可以加入 社区 做出贡献、与维护人员聊天并改进软件。

感谢您的阅读！

鏂囩珷鏉ユ簮锛�https://dev.to/novu/create-a-notifications-system-using-in-app-bell-icon-and-emails-5c15
Devto 翻译
PREV
如何打造一场黑客马拉松
NEXT
React 最佳实践 - 2022 年编写更优质代码的方法