Это вторая часть туториала, посвященного реализации Real World App — подписки на обновления с помощью гугл таблиц, бессерверных функций и реакта. Вот ссылка на первую часть. Напомню, что основной функционал нашего приложения, который мы реализовали в первой части туториала, является следующим: Дополнительный функционал, реализацией которого мы займемся в этой части: Демо приложения, разработкой которого мы занимаемся, можно посмотреть здесь (оно вполне работоспособное, если хотите, можете подписаться на обновления). Код приложения находится здесь. Для реализации приложения используются следующие технологии: Начнем с деплоя приложения на Netlify. Заходим на Netlify, создаем аккаунт, затем вводим в терминале следующую команду: Вводим логин и пароль, получаем сообщение об успешной авторизации. Выполняем сборку проекта: И разворачиваем приложение в тестовом режиме: Отвечаем на вопросы (новое приложение, название приложения (например, mail-list), директория для деплоя (build) и т.д.), получаем ссылку на развернутое приложение. Переходим по ссылке, видим, что приложение не работает. Почему? Потому что мы не добавили переменные среды окружения. Переходим в раздел sites, открываем наше приложение, выбираем вкладку Site settings, затем вкладку Build & deploy, находим раздел Environment, добавляем переменные (Environment variables). Не будем ходить вокруг да около, а сразу развернем приложение в продакшн-режиме: Готово. Легко, правда? Вот за что я люблю Netlify. Теперь, когда у нас имеется URL, мы можем зарегистрировать наше приложение в Google ReCAPTCHA. Заходим в консоль администратора и создаем новое приложение (+). Вводим название сайта (ярлык), выбираем reCAPTCHA v2, указываем домен (URL нашего приложения без протокола), принимаем условия использования (флажок "Отправлять владельцам оповещения" можно снять), нажимаем "Отправить". Получаем ключ сайта и секретный ключ, нам нужен только первый. Добавляем в .env такую переменную: Вносим изменение в Subscribe.js: Повторно собираем и разворачиваем приложение: Если все сделано правильно, то на странице с формой появится «настоящая» капча. Отлично. Переходим к автоматизации рассылки уведомлений и реализации возможности отписаться от обновлений. Давайте подумаем о том, что нам нужно для того, чтобы пользователь имел возможность отписаться от обновлений. Мы, например, могли бы добавлять в уведомление специальную ссылку, при переходе по которой выполняется отписка. Для идентификации пользователя, выразившего такое желание, нам нужен его адрес электронной почты. Следовательно, ссылка должна формироваться из пути к соответствующей странице нашего приложения + email пользователя (для того, чтобы мы могли извлекать его из параметров строки запроса). Для реализации автоматической рассылки уведомлений мы будем использовать nodemailer, а для тестирования — Mailtrap. Создаем аккаунт на Mailtrap, открываем автоматически созданный проект MyInbox, на вкладке SMTP Settings в разделе Integrations выбираем Node.js -> Nodemailer, получаем данные для авторизации. Сохраняем эти данные в .env: В корне проекта создаем директорию send-mail, а в ней — index.js следующего содержания: Добавим в package.json (раздел scripts) команду для рассылки уведомлений: Запускаем скрипт (разумеется, в таблице должны быть какие-то данные): Получаем «Сообщения отправлены» в терминале и письмо в Mailtrap. Для взаимодействия с реальными почтовыми службами (yahoo в моем случае) нужен реальный SMTP-провайдер. Среди наиболее популярных решений можно назвать SendGrid и SendingBlue, но в случае выбора одного из этих сервисов, нам придется долго и упорно убеждать их владельцев в том, что мы не собираемся заниматься рассылкой спама. Еще есть Mailgun, но он платный с трехмесячным free trial. Поэтому мы будем использовать Gmail. Безусловно, если очень хочется, можно поднять собственный SMPT-сервер. Также существуют инструменты для рассылки писем, которые, как заявляют их разработчики, работают без SMTP, например, sendmail. Добавляем в .env переменные с данными вашего Gmail-аккаунта: И вносим изменения в send-mail/index.js: Запускаем скрипт (в таблице должен быть указан ваш email): Существует один нюанс, связанный с использованием Gmail в качестве сервиса для рассылки писем — гугл может блокировать к нему доступ, считая приложение ненадежным (существует платная версия Gmail — Google Workspace, которая с точки зрения гугла, конечно же, является надежной). Для того, чтобы снять блокировку, заходим в настройки гугл аккаунта, открываем вкладку «Безопасность», переходим в раздел «Ненадежные приложения, у которых есть доступ к аккаунту» и разрешаем небезопасные приложения. С реализацией автоматической рассылки мы закончили, но при переходе по ссылке, указанной в письме, мы попадаем на резервную страницу, поскольку в нашем приложении нет страницы для отписки от обновлений, как и соответствующей бессерверной функции. Давайте это исправим. Добавляем в приложение (src/pages) новую страницу Unsubscribe.js. На этой странице после скрытия индикатора загрузки, мы пытаемся получить email пользователя из параметров строки запроса с помощью хука useParams. Если email отсутствует, выполняется перенаправление на главную страницу. Иначе мы отправляем email в функцию, которая удаляет из таблицы соответствующую строку. Если пользователь с указанным email не оформлял подписку на обновления, выбрасывается исключение. При успешном завершении операции отображается сообщение о том, что пользователь больше не будет получать уведомлений. Все, что нам осталось сделать, это реализовать функцию unsubscribe. Она очень похожа на функцию subscribe — загружается таблица, выполняется поиск и удаление соответствующей строки: Еще раз (обещаю, что в последний) собираем и разворачиваем проект: Не забудьте обновить переменные среды окружения на Netlify. Теперь при переходе по ссылке, указанной в письме, пользователь попадает на страницу с сообщением о том, что он успешно отписался от обновлений, а в таблице удаляется соответствующая строка. При переходе на данную страницу без указания email выполняется перенаправление на главную страницу, а при указании несуществующего email — отображается сообщение о том, что пользователь с таким email не найден. Туториал получился гораздо больше, чем я изначально планировал, но, надеюсь, вы не жалеете потраченного времени. Я постарался максимально подробно осветить все аспекты, связанные с разработкой нашего приложения, прошу меня извинить, если что-то упустил. Как бы то ни было, если вы в точности следовали инструкциям, а еще лучше — реализовали какие-то дополнительные возможности, то в вашем портфолио появилось настоящее Real World App, разработанное с использованием самых современных технологий (да, мы не использовали TypeScript, но для нашего небольшого проекта это было бы слишком круто). Облачные серверы от Маклауд быстрые и безопасные. Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!