Электронная почта является важным методом делового общения, очень быстрым, дешевым и органичным. При создании продуктов электронная почта может в значительной степени предоставить вашему бизнесу эффективную и действенную среду для передачи различных видов данных в электронном виде.
В этой статье мы узнаем, как создать форму для отправки писем с помощью сервиса Mailgun. Для внешнего интерфейса мы будем использовать React, для внутреннего интерфейса мы будем использовать Node.js, для выполнения асинхронных запросов мы будем использовать Axios, а для отображения уведомлений мы будем использовать пакет React-Toastify. . В конце концов, мы должны были создать почтовый сервис, который работает примерно так:
Примечание: Вы можете получить доступ к репозиторию для этого проекта, который вы будете постепенно создавать сегодня, и поэкспериментировать с реализацией, используя этот ссылка на GitHub.
Давайте начнем!
Настройка проекта
Первое, что мы сегодня создадим, — это фронтенд-приложение с использованием React.
Начать работу с библиотекой React очень просто: нужно включить файл JavaScript (CDN) в файл HTML. Но для реального и крупномасштабного приложения React CLI — лучший способ начать работу. Сегодня в нашем руководстве мы будем использовать React CLI.
В этой статье мы будем использовать инструмент командной строки, созданный командой React, чтобы облегчить быструю разработку приложений React. Чтобы установить React CLI, выполните следующую команду:
npm install -g create-react-app
.
Теперь давайте создадим проект и назовем его react-node-email-app
, используя следующую команду:
$ npx create-react-app react-node-email-app
Это создаст стартовый шаблон для создания нашего проекта. Вы можете просмотреть этот шаблон, войдя в каталог вашего проекта и запустив сервер разработки:
$ cd react-node-email-app
$ yarn start
Затем мы можем просмотреть наш интерфейс в браузере по адресу localhost:3000
.
Создание пользовательского интерфейса проекта
Теперь мы можем приступить к созданию внешнего интерфейса приложения. Мы начнем с создания формы, через которую можно отправлять электронные письма.
Мы сделаем это в App.js
файл, чтобы он стал следующим:
import './App.css';
import { useState } from 'react'; function App() { const = useState('') const [subject, setSubject] = useState('') const [message, setMessage] = useState('') return ( <div className="App"> <section> <form> <h1>Send Email</h1> <div className='form-wrapper'> <div> <label htmlFor='email'>Email Address</label> <input onChange={(e)=>setEmail(e.target.value)} type="email" id="email"></input> </div> <div> <label htmlFor='subject'>Email Subject</label> <input onChange={(e)=>setSubject(e.target.value)} type="text" id="subject"></input> </div> <div> <label htmlFor='message'>Message Body</label> <textarea onChange={(e)=>setMessage(e.target.value)} type="text" id="message"></textarea> </div> <div> <button type='submit'>Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
Здесь мы создали форму с тремя полями ввода: одно для ввода электронной почты получателя, другое для темы электронного письма и последнее для ввода основного сообщения электронной почты.
В различных полях ввода мы настроили состояние для обработки изменений в поле ввода — чтобы перехватывать любые изменения, сделанные, когда пользователь вводит символ в поле ввода с помощью кнопки onChange
слушатель событий.
Мы также создали кнопку для отправки сообщения по электронной почте.
Чтобы украсить форму, мы обновили App.css
файл со следующими стилями CSS, чтобы его содержимое выглядело так:
.App { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #282c34;
}
.App section form { min-width: 25rem; margin: 0 auto; border: solid 1px #bdbdbd; border-radius: 8px; padding: 2rem;
}
form h1 { text-align: center; color: #ffffff;
}
form .form-wrapper { margin: 0 auto;
} form .form-wrapper > div { margin-bottom: 1rem;
}
form .form-wrapper > div > label { margin-bottom: 0.5rem; color: #ffffff; display: block;
}
form .form-wrapper > div > input, form .form-wrapper > div > textarea { padding: 0.5rem; border-radius: 4px; border: none; outline: none; min-width: 20rem; font-family: Arial, Helvetica, sans-serif;
}
form .form-wrapper > div > button { padding: 1rem 2.5rem; color: white; background: rgb(4, 144, 199); border-radius: 4px; border: none; cursor: pointer;
}
Для повышения производительности приложения, onSubmit
Функция события обработчика должна быть определена в элементе формы, чтобы предотвратить поведение форм по умолчанию, которое фактически обновляет страницу при нажатии кнопки. Не идеально, чтобы наша страница обновлялась при нажатии кнопки, поскольку мы отправляем запрос в фоновом режиме, что удобнее для пользователя.
Также идеально, чтобы пользователь не мог отправить электронное письмо, если он/она не ввел адрес электронной почты, тему или сообщение. Для этого нам нужно выполнить некоторую проверку ввода, чтобы проверить, пусты ли эти поля. Если они есть, мы возвращаем ошибку с сообщением «Пожалуйста, заполните адрес электронной почты, тему и сообщение».
Для этого воспользуемся функцией поджаривать пакет в нашем приложении. Нам нужно установить его, выполнив следующую команду в терминале проекта:
$ yarn add react-toastify
Далее обновим App.js
с submitHandler
функция:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css' function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button type="submit">Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
Теперь каждый раз, когда пользователь нажимает кнопку, чтобы отправить электронное письмо, без предварительного заполнения адреса электронной почты, темы электронного письма и полей ввода сообщения, всплывающее сообщение предлагает ему/ей сделать все, что требуется.
Так как нам также необходимо axios
библиотека для выполнения AJAX-запросов, нам также потребуется ее установить:
$ yarn add axios
Затем создайте try/catch
блок для обработки асинхронного запроса на отправку электронной почты.
App.js
теперь обновляется, чтобы стать:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios"; function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const [loading, setLoading] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); try { setLoading(true); const { data } = await axios.post(`/api/email`, { email, subject, message, }); setLoading(false); toast.success(data.message); } catch (error) { setLoading(false); toast.error( error.response && error.response.data.message ? error.response.data.message : error.message ); } }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button disabled={loading} type="submit"> {loading ? "Sending..." : "Send Email"} </button> </div> </div> </form> </section> </div> );
} export default App;
Создание серверного приложения с использованием Node
На данный момент мы успешно реализовали интерфейс приложения. Двигаясь дальше, мы начнем работать над серверной частью, используя Node.
Сначала создайте новый каталог в корне проекта с именем backend
.
Теперь, cd
в бэкэнд-каталог и запустите npm init
с терминала, чтобы начать создание приложения Node.
$ npm init --y
Ознакомьтесь с нашим практическим руководством по изучению Git с рекомендациями, принятыми в отрасли стандартами и прилагаемой памяткой. Перестаньте гуглить команды Git и на самом деле изучить это!
Внимание: --y
опция говорит NPM отвечать «да» на все вопросы, заданные init
команда. По сути, это дает вам настройки по умолчанию для вашего package.json
.
Это создает package.json
файл, который позволяет управлять зависимостями приложений внутреннего проекта.
Далее устанавливаем следующие пакеты:
express
: Создает веб-серверdotenv
: считывает данные конфигурации и служит отличным способом защиты конфиденциальных данных от доступного кода.mailgun-js
: позволяет отправлять электронные письма с помощью Mailgun.
$ yarn add express dotenv mailgun-js
Теперь, когда эти пакеты установлены, создайте два новых файла. server.js
и .env
в backend
папку.
В .env
файл, мы сохраним домен и ключ API для Mailgun.
Сборка сервера
В этом server.js
файл, цель состоит в том, чтобы создать сервер с помощью Express.js. При этом мы импортируем express
, dotenv
и mailgun-js
пакеты.
server.js
обновляется, чтобы стать:
const express = require("express");
const dotenv = require("dotenv");
const mg = require("mailgun-js"); dotenv.config(); const mailgun = () => mg({ apiKey: process.env.MAILGUN_API_KEY, domain: process.env.MAILGUN_DOMAIN, });
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true })); app.post("/api/email", (req, res) => { const { email, subject, message } = req.body; mailgun() .messages() .send( { from: "John Doe <>", to: `${email}`, subject: `${subject}`, html: `<p>${message}</p>`, }, (error, body) => { if (error) { console.log(error); res.status(500).send({ message: "Error in sending email" }); } else { console.log(body); res.send({ message: "Email sent successfully" }); } } );
}); const port = process.env.PORT || 4000;
app.listen(port, () => { console.log(`App is served at port ${port}`);
});
Здесь мы назвали mg
функцию и присвоил ей mailgun
. В mg
функцию, мы передаем ключ API и домен из переменной окружения и используем mailgun
для отправки электронных писем.
После этого создается приложение Express и два промежуточных ПО. express.json()
и express.urlencoded
используются для получения полезной нагрузки с помощью Express из запроса API и преобразования ее в req.body
.
Далее POST
маршрут с дорожкой /api/email
создается, и в нем определяется функция для приема запроса и ответа. Электронная почта, тема и сообщение могут быть затем извлечены из req.body
объект. Это данные, которые пользователь вводит из полей ввода в интерфейсном приложении.
Как только это будет извлечено, messages
метод из mailgun
вызывается первоначально настроенная функция, после чего send
метод называется. В методе send передается объект, который содержит следующие свойства:
from
: имя, которое пользователи видят в разделе «от» электронной почты.to
Адрес электронной почты, на который отправляется электронное письмо (электронная почта, введенная в поле ввода).subject
: Тема введена.html
: HTML-разметка, определяющая сообщение, отправляемое на адрес электронной почты.
Второй параметр передается в send
метод — это функция, которая принимает ошибку и тело. В этой функции мы console.log
ошибка, установите код состояния на 500
и отправьте сообщение «Ошибка отправки электронной почты». В противном случае мы регистрируем тело и отправляем сообщение «Электронная почта успешно отправлена» в случае успеха.
В самом конце файла получаем порт из .env
подать и позвонить app.listen()
для запуска сервера.
Определение ключей API
Первым шагом к определению ключей API для использования Mailgun в вашем приложении является создание бесплатной учетной записи, что занимает 57 секунд в соответствии с их Официальном сайте.
После того, как вы создали учетную запись, вам будет отправлен ключ API для созданной вами учетной записи, а вы можете получить доступ к домену, перейдя на вкладку отправки на боковой панели навигации.
Скопируйте ссылку на песочницу и ключ API и установите значение в своем .env
файл, как я сделал для себя:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Затем вернитесь на страницу обзора домена, нажав на ссылку. Страница должна выглядеть так:
Там, в правой части страницы, введите адрес электронной почты, на который вы хотите проверить отправку электронного письма, чтобы создать авторизованного получателя.
Нажатие кнопки «Сохранить получателя» должно привести к отправке электронного письма, как показано ниже:
Нажмите кнопку «Я согласен», и вы должны быть перенаправлены на внешнюю страницу:
Нажмите кнопку «Да», чтобы перейти к активации адреса получателя. Теперь этот адрес может начать получать электронные письма через Mailgun.
Наконец, мы успешно настроили Mailgun и создали серверную часть с помощью Node.
Теперь вы можете восхитительно раскрутить сервер Express, запустив следующий код из внутреннего каталога:
$ node server.js
Подключение приложения Node к приложению React
Чтобы подключить интерфейс к серверу, перейдите на страницу package.json
файл, который находится в корневом каталоге проекта для приложения React. Затем, под name
свойство, добавьте новое свойство с именем proxy
, который должен иметь значение порта внутреннего сервера. Это должно выглядеть примерно так:
"proxy": "http://localhost:4000/"
С учетом этого все асинхронные запросы, которые мы делаем из внешнего интерфейса, перенаправляются на созданный нами внутренний сервер.
Перезапустите сервер разработки внешнего интерфейса, чтобы перезагрузить приложение.
Идите вперед, чтобы протестировать всю нашу реализацию, введя адрес электронной почты (получатель, которого вы активировали ранее), тему электронной почты и сообщение, а затем нажмите кнопку «Отправить». Это должно показать тост об успехе, чтобы сказать, что электронное письмо было успешным.
И в папке «Входящие» адреса получателя вы тоже должны получить электронное письмо, как и я:
Подводя итог
Отправка электронных писем остается очень полезной для таких случаев, как сброс пароля, приветствие пользователя в вашем приложении, подтверждение заказа и т. д., и в этой статье мы узнали, как легко отправлять электронные письма в приложении Node.js с помощью Mailgun. . Мы видим, как легко работать с Mailgun и как удобно и быстро создать учетную запись для начала работы.
В следующий раз, когда вам понадобится создать инфраструктуру электронной почты для своего проекта, не стесняйтесь проверить инструменты отправки почты, такие как Mailgun. Нужна помощь в использовании инструмента, не стесняйтесь обращаться ко мне или к кому-либо из сообщества разработчиков, я уверен, что они будут рады помочь.
Дополнительные ресурсы
- SEO-контент и PR-распределение. Получите усиление сегодня.
- Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. Доступ здесь.
- Источник: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- в состоянии
- Принять
- Принимает
- доступ
- доступной
- По
- Учетная запись
- на самом деле
- добавленный
- адрес
- После
- впереди
- Оповещение
- Все
- и
- Другой
- ответ
- кто угодно
- API
- КЛЮЧИ API
- приложение
- Применение
- Приложения
- около
- гайд
- назначенный
- автоматический
- Вардар
- назад
- Backend
- фон
- колотить
- становиться
- не являетесь
- ниже
- Лучшая
- Немного
- Заблокировать
- тело
- граница
- Коробка
- браузер
- строить
- Строительство
- построенный
- бизнес
- кнопка
- призывают
- под названием
- Может получить
- случаев
- Привлекайте
- Центр
- изменение
- персонаж
- дешево
- проверка
- код
- Связь
- сообщество
- Конфигурация
- Свяжитесь
- содержание
- конвертировать
- Создайте
- создали
- создает
- Создающий
- CSS
- приборная панель
- данным
- день
- По умолчанию
- определенный
- Определяет
- определяющий
- Застройщик
- Развитие
- DID
- домен
- каждый
- Ранее
- Эффективный
- эффективный
- в электронном виде
- Писем
- позволяет
- Enter
- вошел
- Вводит
- Окружающая среда
- ошибка
- существенный
- по существу
- и т.д
- События
- опыт
- экспресс
- и, что лучший способ
- содействовал
- БЫСТРО
- поле
- Поля
- Файл
- Файлы
- заполнять
- Найдите
- Во-первых,
- Фокус
- после
- форма
- формы
- Бесплатно
- от
- Frontend
- функция
- получить
- получающий
- GIF
- идти
- дает
- Go
- большой
- значительно
- инструкция
- обрабатывать
- практический
- помощь
- Удар
- имеет
- зависать
- Как
- How To
- HTML
- HTTPS
- ICON
- идеальный
- реализация
- в XNUMX году
- Импортировать
- улучшать
- in
- включены
- В том числе
- Инфраструктура
- первоначально
- вход
- устанавливать
- установлен
- IT
- JavaScript
- John
- ДЖОН ДОУ
- Сохранить
- Основные
- ключи
- крупномасштабный
- Фамилия
- УЧИТЬСЯ
- узнали
- изучение
- LG
- Библиотека
- LINK
- погрузка
- посмотреть
- выглядит как
- ВЗГЛЯДЫ
- сделанный
- Главная
- сделать
- Создание
- управление
- средний
- сообщение
- метод
- перемещение
- имя
- навигационный
- навигационный
- Необходимость
- Новые
- узел
- Node.js
- Уведомления
- объект
- цель
- ONE
- Опция
- заказ
- органический
- в противном случае
- обзор
- пакет
- пакеты
- параметр
- Прошло
- Пароль
- путь
- производительность
- Платон
- Платон Интеллектуальные данные
- ПлатонДанные
- Играть
- пожалуйста
- Точка
- практическое
- предотвращать
- процесс
- Продукция
- Проект
- свойства
- собственность
- защищенный
- обеспечивать
- полномочие
- цель
- Вопросы
- быстро
- RE
- достигать
- реагировать
- реальный мир
- Получать
- получение
- остатки
- хранилище
- запросить
- Запросы
- обязательный
- ответ
- возвращают
- кольцо
- корень
- дорога
- Run
- Бег
- песочница
- Сохранить
- говорит
- Во-вторых
- секунды
- Раздел
- отправка
- чувствительный
- служить
- обслуживание
- набор
- настройки
- Shadow
- должен
- показывать
- показанный
- сторона
- просто
- с
- So
- твердый
- некоторые
- удалось
- Вращение
- Стекабьюс
- стандартов
- Начало
- и политические лидеры
- Область
- Статус:
- Шаг
- Stop
- предмет
- представление
- отправить
- успех
- успешный
- Успешно
- такие
- SVG
- принимает
- цель
- команда
- говорит
- шаблон
- Терминал
- тестXNUMX
- Ассоциация
- Песочница
- их
- в нем
- задача
- три
- Через
- время
- в
- тост
- сегодня
- слишком
- инструментом
- инструменты
- переход
- передавать
- вызвать
- правда
- учебник
- под
- Обновление ПО
- обновление
- us
- использование
- Информация о пользователе
- удобно
- пользователей
- Проверка
- ценностное
- различный
- Ve
- Вид
- Web
- приветствуя
- который
- в то время как
- белый
- будете
- без
- Работа
- работает
- бы
- XML
- Ты
- ВАШЕ
- себя
- зефирнет