В этой статье я проведу вас через отправку уведомлений in-app и по электронной почте с помощью Novu в приложении Node.js. Сначала мы создадим проект Novu, добавим канал связи по электронной почте через Novu Manage Platform, установим Novu в приложение Express и отправим сообщения в приложении и по электронной почте с помощью Novu 🚀.

Для кого эта статья?

Вы хотите реализовать уведомления о продукте для своих пользователей, например, уведомления в приложении (как иконка колокольчика на facebook), отправку email / sms или push-уведомления в потоке.

Быстрый пример: Facebook отправляет вам уведомление в значке колокольчика (У вас новый запрос в друзья), и через 1 час, когда вы не прочитали его, они отправляют вам электронное письмо.

Почему Novu?

Novu — это первая инфраструктура уведомлений с открытым исходным кодом, которая управляет всеми формами коммуникации от электронной почты до SMS, Push-уведомлений и т.д.
https://github.com/novuhq/novu

Она позволяет добавлять несколько каналов электронной почты и SMS, создавать общие шаблоны сообщений, отслеживать каждую активность и переключаться между различными каналами коммуникации по вашему выбору.

Центральная коммуникационная система

Одной из причин, по которой Novu выделяется среди других, является возможность иметь централизованное средство коммуникации. Novu предоставляет приборную панель, где вы можете отслеживать и управлять всеми вашими SMS и электронными сообщениями. С помощью Novu вы можете легко отслеживать коммуникации по нескольким каналам на одной приборной панели.

Доступно несколько каналов связи

С Novu вы можете использовать как можно больше каналов связи и легко переключаться с одного на другой без редактирования существующего кода в вашем приложении.
Например, если вы используете Sendgrid для отправки электронной почты в своем веб-приложении, но сервис становится недоступным на некоторое время, вы можете переключиться на другие каналы связи, пока Sendgrid не станет доступным, не изменяя свой код. Novu делает коммуникацию с вашими пользователями простой в использовании и поддержке.

Система управления контентом

Novu предоставляет каждому пользователю систему управления контентом, где вы можете создавать многократно используемые шаблоны электронных писем и SMS, которые вы можете использовать в различных программных приложениях. С Novu вам не нужно беспокоиться о напряжении, связанном с созданием динамического контента. Novu использует шаблонизатор handlebars для принятия динамических переменных, создавая тем самым уникальный опыт для ваших пользователей.

Программное обеспечение с открытым исходным кодом

Novu — это программное обеспечение с открытым исходным кодом; это означает, что код легко доступен для всех желающих изменять и улучшать его. Novu имеет большое сообщество разработчиков и талантливых соавторов, которые постоянно поддерживают и улучшают программное обеспечение. Как пользователь, вы можете быть уверены в наилучшей производительности при использовании Novu. Вы также можете запрашивать изменения в документации, обращаться за помощью и общаться с сопровождающими, когда вам нужна помощь или вы столкнулись с ошибками.

BTW: Вы можете стать автором и получить признание! Мы создали специальную страницу для всех наших соавторов с признанием их усердной работы и значками, которые они могут разместить на своем Github 🚀.
Получить новый выпуск можно здесь: https://novu.co/contributors

Ладно, хватит саморекламы 😆🔫, давайте начнем.

Здесь я проведу вас через создание проекта Novu и настройку Novu для отправки электронных писем и уведомлений в приложении.

Создайте папку проекта и откройте ее.

mkdir <folder_name>
cd <folder_name>

Убедитесь, что на вашем компьютере установлен Node.js, затем выполните приведенный ниже фрагмент кода в терминале, чтобы создать проект Novu.

npx novu init

Перед созданием проекта 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

Приведенный выше фрагмент кода открывает Novu Manage Platform в браузере по умолчанию.

Страница Novu Dashboard

Поздравляем 🎊, вы успешно создали учетную запись в Novu. Далее нажмите кнопку Configure Now, чтобы добавить провайдера электронной почты. В этой статье я буду использовать Sendgrid.

Как добавить провайдера электронной почты Sendgrid в Novu

Я выбрал Sendgrid, но вы можете легко выбрать один из: Mailgun, SES, Postmark, NodeMailer, Mailjet, Mandrill, SendinBlue и EmailJS.

Если вам не хватает какого-то провайдера, просто откройте новый вопрос на Github 🙂

Давайте настроим новый аккаунт Sendgrid и добавим его в Novu.

Откройте другую вкладку, перейдите на сайт Twilio Sendgrid и создайте аккаунт, используя рабочий или корпоративный email.

Войдите в систему, нажмите Настройки на боковой панели и выберите API Keys, чтобы создать API-ключ SendGrid с полным доступом к разрешениям «Mail Send».

Скопируйте API-ключ и вставьте его в Novu Manage Platform.

Нажмите на значок настроек рядом с Twilio Sendgrid на изображении выше и вставьте API-ключ в поле API-ключа.

Вернитесь на панель Sendgrid, чтобы создать и проверить идентификатор отправителя.

Вставьте адрес электронной почты и имя отправителя в их поля на изображении выше, убедитесь, что они активны, и нажмите кнопку Обновить.

Поздравляем 🎊, вы успешно подключили свой аккаунт Sendgrid к Novu и можете начать отправлять электронные письма через Novu.

Далее, давайте создадим рабочий процесс, показывающий, как мы хотим отправлять уведомления в нашем Node.js приложении.

Как создать рабочий процесс уведомлений Novu

Нажмите Уведомления на боковой панели и выберите шаблон Уведомления, уже созданный для вас по умолчанию.

Выберите Редактор рабочих процессов для создания рабочего процесса уведомлений, затем перетащите различные каналы уведомлений с правой стороны в большое поле в центре страницы.

Убедитесь, что рабочий процесс выглядит так же, как на изображении выше, и нажмите кнопку Обновить, чтобы сохранить шаги.

Далее давайте создадим приложение Express и добавим Novu в приложение Node.js.

Добавление Novu в приложение Express

В этом разделе вы узнаете, как настроить Node.js-сервер Express и добавить Novu в приложение.

В папке проекта, созданной в предыдущем разделе, создайте файл package.json и файл index.js — точку входа в приложение Node.js.

cd <project-folder>
npm init -y & touch index.js

Установите Express и Novu SDK для Node.js. Express.js — это быстрый, минималистичный фреймворк, который предоставляет несколько возможностей для создания веб-приложений на Node.js.

npm install express @novu/node

Скопируйте и вставьте приведенный ниже фрагмент кода в файл 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}`);
});

Создайте файл 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>

Запустите файл index.js, скопировав в него приведенный ниже код. Посетите сайт http://localhost:4000 для просмотра файла index.html.

node index.js

Далее я покажу вам, как отправлять электронные письма и уведомления в приложении через Novu, создав веб-приложение, которое генерирует письма с предложениями для успешных кандидатов на работу в организации. Файл index.html — это веб-клиент/макет приложения.

Как отправлять уведомления по электронной почте с помощью Novu

Здесь я расскажу вам, как создать шаблоны электронных писем и отправить их пользователям с помощью Novu.

Перейдите в Novu Manage Platform, выберите шаблон Notification и нажмите на Workflow Editor.

Выберите Email в большом центральном поле для редактирования шаблона.

Novu позволяет нам добавлять обычный текст и пользовательский код, используя шаблоны HTML с шаблонизатором Handlebars в качестве содержимого электронной почты.

Скопируйте и вставьте это в качестве строки темы письма

OFFER LETTER FROM NOVU - CONGRATULATIONS {{candidateFirstName}}

Выберите Custom Code в качестве типа содержимого и скопируйте приведенный ниже код. Содержимое письма и строка темы позволяют нам передавать динамические данные в переменные с помощью шаблонизатора 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>

Теперь вы можете сохранить шаблон. Далее я расскажу вам, как отправить этот шаблон по электронной почте.

Импортируйте Novu в файл index.js. Чтобы получить ключ API, нажмите на Настройки на платформе Novu Manage, выберите Ключи API и скопируйте его в код ниже.

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

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

Создайте маршрут sent, принимающий только POST-запросы в файле index.js, и скопируйте код ниже. Этот маршрут получает все данные пользователя от клиента и записывает их в консоль.

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,
  });
});

Получив данные от клиента, обновите 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'));
});

Согласно приведенному выше фрагменту кода, я изменил функцию обратного вызова на асинхронную перед добавлением Novu. Затем Novu запускает шаблоны электронной почты через свой ID и отправляет шаблон на электронную почту кандидата. Объект полезной нагрузки содержит все динамические данные, необходимые шаблону.

Чтобы получить идентификатор подписчика, нажмите на Настройки на платформе Novu Manage, скопируйте и вставьте идентификатор приложения.

Создайте файл sent.html, указанный в приведенном выше фрагменте кода.

<!DOCTYPE html>
  <head>
    <title>Email Sent!</title>
  </head>
  <body>
    <p> Message sent!</p>
  </body>
</html>

Запустите сервер Node.js, выполнив приведенный ниже код.

node index.js

Чтобы добавить вложения в сообщения электронной почты, вы можете создать массив вложений в объекте полезной нагрузки или загрузить документ через Novu Manage Platform.

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));

Приведенный выше фрагмент кода прикрепляет изображение к электронному письму перед отправкой письма получателю. Далее давайте узнаем, как отправлять уведомления в приложении в веб-клиенте.

Как отправлять уведомления в приложении с помощью Novu

В этом разделе вы узнаете, как отправлять уведомления в приложении и отображать их в веб-клиенте вашего приложения.

Зайдите в Novu Manage Platform, выберите используемый шаблон и нажмите на Редактор рабочих процессов.

Выберите In-app в большом центральном поле, нажмите кнопку Edit Template, чтобы отредактировать уведомление и сохранить содержимое.

Обновите файл sent.html, чтобы он содержал код JavaScript и значок колокольчика перед закрывающим тегом body. Код 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>

NB: Вы можете взять значок колокольчика из Font Awesome и убедиться, что CSS id, на который ссылается код JavaScript, существует в вашем HTML файле.

Исходный код

Полный исходный код можно посмотреть здесь:
https://github.com/novuhq/blog/tree/main/sending%20notifications%20with%20Novu
Это только экспресс-сервер для взаимодействия с Novu.
Прежде чем клонировать проект, пожалуйста, запустите его.

npx novu init

Заключение

В этом руководстве вы узнали, что такое Novu, почему вы должны его использовать, как создать проект Novu, как добавить Novu в веб-приложение Express.js и как отправлять электронные письма и уведомления в приложении с помощью Novu.

Novu упрощает отправку, мониторинг и управление уведомлениями по различным каналам связи SMS и Email. Он позволяет создать богатую систему уведомлений в ваших приложениях, тем самым обеспечивая отличный пользовательский опыт для ваших пользователей.

Вы также можете присоединиться к сообществу, чтобы внести свой вклад, пообщаться с сопровождающими и улучшить программное обеспечение.

Спасибо за прочтение!