Feathersjs является надежной структурой веб-приложений для приложений в реальном времени и API REST. Он отлично подходит для того, чтобы служить минимальным жизнеспособным продуктом (MVP) и масштабируется, когда вы готовы выйти за рамки MVP и вырастить свою клиентскую базу.
Перья обеспечивает Инструмент командной строки Для быстрого обоснования проекта и нескольких генераторов для создания услуг для удовлетворения потребностей вашего проекта.
Одной из первых функций, которые я разработал с перьями, является транзакционные электронные письма.
Эта статья охватывает создание красивых шаблонных электронных писем – даже если у вас нет навыков дизайна. Используя комбинацию нескольких инструментов, довольно легко разработать профессиональные электронные письма для вашей платформы.
Кодовая база для этого урока будет создавать предыдущий пост, который я написал – Intro: Fullstack JS пользовательские роли и управление Анкет В конце этой серии функциональность электронной почты уже существует как часть управления учетной записью и регистрации, но электронные письма – это скучные текстовые электронные письма, такие как Нажмите ссылку здесь.
В этой статье я использую комбинацию следующего для преобразования текстовых электронных писем в красивые фирменные электронные письма:
Шаблон
Начиная с Пользовательские роли и управление репо Я создал новую репо, используя его в качестве шаблона. Вы можете следить за этим, если хотите, по Создание копии из приведенного выше репо. Последний репо находится здесь .
Этот репо уже включает в себя функциональность для входа в систему пользователя, сброса пароля и регистрации учетной записи, которые отправляют электронное письмо при запуска. Я не буду вдаваться в подробности в этой статье, но если вы хотите узнать больше, прочитайте мою предыдущую статью, которая охватывает ее более подробно.
Функции проекта
Этот проект использует Перья-автонтификация-управление предоставить функциональность управления учетной записью. Служба электронной почты также создана для отправки электронных писем.
Электронная служба
Служба электронной почты довольно проста. Я установил его после инструкций, найденных в Документы Анкет
Перья генерируют обслуживание с именем «Электронная почта».
Это строится услуга с названием по электронной почте. Затем я определил конфигурацию Mailer в файле службы.
module.exports = function (app) {
// Initialize our service with any options it requires
app.use(
'/email',
Mailer(
smtpTransport({
host: app.get('smtp_host'),
secure: true,
auth: {
user: app.get('smtp_user'),
pass: app.get('smtp_pw'),
},
})
)
);
};
app.get ('переменная') Функция вытаскивает значение из файла конфигурации. Подробности об этом можно найти в Peathersjs Configuration Docs Анкет
Служба электронной почты использует модуль перьев, который является оберткой для Nodmailer библиотека Таким образом, он поддерживает те же варианты транспорта. Для этого проекта я использовал AWS SES Transport , но вы также можете настроить свой сервис с различной поддержкой Транспортные варианты или Параметры SMTP Анкет
Для настройки для AWS в вашей учетной записи AWS потребуются следующие ключи конфигурации:
{
"smtp_user": "aws_smtp_user",
"smtp_pw": "aws_smtp_pw",
"smtp_host": "aws_smtp_host"
}
Вы можете добавить их в $ {env} .json Файл конфигурации или default.json конфигурационный файл.
Отправка электронных писем
Управление перьями-автоенсилиями позволяет определить, какие электронные письма отправляются на основе запрошенного действия. Всего есть 6 действий: ResendVerifySignup, VerifySignup, SendResetPWD, ResetPWD, PasswordChange и IdentityChange.
Все они определены в Функция уведомления , который передается в Службу автозаправления. Вот выдержка функции уведомления для действия сброса пароля:
module.exports = function (app) {
// generates the token link
function getLink(type, hash) {
const url = app.get('client_url') + '/' + type + '?token=' + hash;
return url;
}
// sends the email using an email service
function sendEmail(email) {
return app
.service('email')
.create(email)
.then(function (result) {
console.log('Sent email', result);
})
.catch((err) => {
console.log('Error sending email', err);
});
}
const FROM_EMAIL = app.get('from_email');
return {
notifier: function (type, user) {
let tokenLink;
let email;
switch (type) {
// user clicks link from email to verify their email
case 'sendResetPwd':
tokenLink = getLink('reset-password', user.resetToken);
email = {
from: FROM_EMAIL,
to: user.email,
subject: 'Reset Password',
html: `Reset Password: ${tokenLink}`,
};
return sendEmail(email);
}
},
};
};
Функция уведомления – это то, где мы захотим отправить фирменные электронные письма, которые мы скоро создадим.
Преобразование электронных писем
До этого момента код просто отправляет простую строку HTML с некоторым контентом. Мы хотим, чтобы это сделало больше. Мы хотим, чтобы он отправил красивое электронное письмо HTML, которое персонализировано для пользователя. Чтобы сгенерировать этот HTML, мы будем использовать язык шаблона, чтобы мы могли вставить переменные и разрешать настройку для каждого пользователя.
Я использовал Мопс , но вы можете использовать другой язык шаблона, если вы предпочитаете. Шаблон будет компилировать HTML, который вы можете отправить в качестве электронной почты, где мы в настоящее время предоставляем текстовую строку HTML.
В каталоге сервера установите мопс:
npm i pug -save
Мопс немного более краткий, чем HTML, что устраняет необходимость в кодовых блоках. Он полагается на объявление типа элемента перед предоставлением контента.
Взглянем:
p Welcome #{name}! You're now registered for #{event}.
Когда шаблон будет составлен, вы получите что -то вроде этого:
Welcome Sarah! You're now registered for Fullstack Javascript.
Вы также можете использовать кодовые блоки для генерации HTML -тегов.
-
var list = ["Apples", "Bananas", "Oranges",
"Kiwis", "Jackfruit", "Kumquats"]
each item in list
li= item
Который приводит к:
Взгляните на Документы Чтобы увидеть, что это полные функции.
Шаблоны электронной почты
Хотя я не обязателен, я использовал шаблоны электронной почты, найденные в Действительно хорошие электронные письма Чтобы сократить время дизайна. Я могу легко настроить дизайн, который мне нравится, и сопоставить цвета/бренды, которые я хочу использовать. Они сортируют шаблоны электронной почты в категории, поэтому вы можете легко искать электронные письма, соответствующие шаблону, который вы хотите использовать, из раздача к Настройка учетной записи Анкет
После того, как вы найдете письмо, которое вам нравится, вы также можете изменить его в прямом эфире на их сайте, прежде чем экспортировать в другие места.
Для этого проекта я буду использовать простой Шаблон сброса пароля Анкет
HTML к мопсу
Как только я закончу создать шаблон в соответствии с моим брендом, я могу использовать другой инструмент для составления HTML в мопс, называемый HTML-TO-PUG Анкет Скопируйте/вставьте HTML с одной стороны, выключите мопса с другой стороны. Быстро и просто! Это не идеально, но он делает большую часть тяжелой работы для создания необходимого кода мопса:
Я сохраняю код мопса в новый файл шаблона, непосредственно вложенные в папку управления Auth. Вы найдете код мопса в рамках /server/src/services/auth-management/templates/password-reset.pug Анкет
Теперь я могу добавить некоторую настройку, как только у меня есть код шаблона моника.
Для этого проекта я делаю это простым. Я хочу изменить заголовок, чтобы включить имя пользователя, и я добавлю в ссылку сброса. Так что, если я сброшу пароль своей собственной учетной записи, я увижу Сбросьте свой пароль, Рэйчел Анкет
Я обновил шаблон моски, чтобы включить переменную FirstName и ссылку URL для кнопки:
Reset your password #{firstname}
...
...
a.Button-primary(href=url ...)
Затем переменные предоставляются функции компиляции HTML, поэтому новый код уведомления выглядит так:
case 'sendResetPwd': {
tokenLink = getLink('reset-password', user.resetToken);
// create the function to compile the pug template to HTML
const pwReset = pug.compileFile(
path.join(__dirname, 'templates', 'password-reset.pug')
);
email = {
from: FROM_EMAIL,
to: user.email,
subject: 'Reset Password',
// use the function and add in the variables required by the template. This will output customized HTML.
html: pwReset({
firstname: user.firstname,
url: tokenLink
}),
};
return sendEmail(email);
}
Теперь, когда я отправляю запрос на сброс пароля, я получаю следующее электронное письмо:
Затем я могу повторить этот процесс для других транзакционных электронных писем или даже создать автоматическую электронную кампанию.
Теперь твоя очередь. Что вы создадите?
Список ресурсов
Я что-то пропустил?
Оставьте комментарий и дайте мне знать, как это работает для вас. Если что -то не ясно, спросите.
Оригинал: “https://dev.to/rachel_cheuk/create-beautiful-transactional-emails-with-the-feathers-mailer-module-3ll”