Електронна пошта — це важливий спосіб ділового спілкування, який є дуже швидким, дешевим і безкоштовним. Під час створення продуктів електронні листи можуть у значній мірі надати вашому бізнесу ефективне та ефективне середовище для передачі різноманітних даних в електронному вигляді.
У цій статті ми дізнаємося, як створити форму для відправки листів за допомогою сервісу Mailgun. Для інтерфейсної програми ми будемо використовувати React, на серверній частині ми будемо використовувати Node.js, для створення асинхронних запитів ми будемо використовувати Axios, а для показу сповіщень ми будемо використовувати пакет React-Toastify . Зрештою, ми повинні були створити поштову службу, яка працює так:
Примітка: Ви можете отримати доступ до сховища для цього проекту, який ви збираєтесь потроху сьогодні, і пограти з реалізацією за допомогою цього посилання на GitHub.
Давайте розпочнемо!
Налаштування проекту
Перше, що ми сьогодні створимо, це зовнішня програма за допомогою React.
Почати роботу з бібліотекою React досить просто: включити файл JavaScript (CDN) у файл HTML. Але для реальних і великомасштабних програм React CLI є кращим способом почати роботу. У нашому сьогоднішньому підручнику ми будемо використовувати React CLI.
У цій статті ми використаємо інструмент 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;
}
Щоб покращити продуктивність програми, an 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
Далі створіть a 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
опція повідомляє НПМ відповісти «так» на всі запитання, поставлені 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. Потрібна допомога з використанням інструменту, не соромтеся зв’язатися зі мною або будь-ким із спільноти розробників, я впевнений, що вони будуть раді допомогти.
Додаткові ресурси
- Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
- Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
- джерело: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- Здатний
- Прийняти
- Приймає
- доступ
- доступною
- За
- рахунки
- насправді
- доданий
- адреса
- після
- попереду
- Оповіщення
- ВСІ
- та
- Інший
- відповідь
- будь
- API
- КЛЮЧІ API
- додаток
- додаток
- застосування
- навколо
- стаття
- призначений
- автоматичний
- Axios
- назад
- Backend
- фон
- бити
- ставати
- буття
- нижче
- Краще
- Біт
- Блокувати
- тіло
- border
- Box
- браузер
- будувати
- Створюємо
- побудований
- бізнес
- button
- call
- званий
- Може отримати
- випадків
- Залучайте
- Центр
- зміна
- характер
- дешево
- перевірка
- код
- Комунікація
- співтовариство
- конфігурація
- З'єднуватися
- зміст
- конвертувати
- створювати
- створений
- створює
- створення
- CSS
- приладова панель
- дані
- день
- дефолт
- певний
- Визначає
- визначаючи
- Розробник
- розробка
- DID
- домен
- кожен
- Раніше
- Ефективний
- ефективний
- в електронному вигляді
- повідомлення електронної пошти
- дозволяє
- Що натомість? Створіть віртуальну версію себе у
- увійшов
- Входить
- Навколишнє середовище
- помилка
- істотний
- по суті
- і т.д.
- Event
- досвід
- експрес
- зовнішній
- фасилітувати
- ШВИДКО
- поле
- Поля
- філе
- Файли
- заповнювати
- знайти
- Перший
- Сфокусувати
- після
- форма
- форми
- Безкоштовна
- від
- Frontend
- функція
- отримати
- отримання
- GIF
- Git
- дає
- Go
- великий
- значно
- керівництво
- обробляти
- практичний
- голова
- допомога
- хіт
- тримає
- hover
- Як
- How To
- HTML
- HTTPS
- ICON
- ідеальний
- реалізація
- реалізовані
- імпорт
- удосконалювати
- in
- включені
- У тому числі
- Інфраструктура
- спочатку
- вхід
- встановлювати
- встановлений
- IT
- JavaScript
- Джон
- ДЖОН ДОУ
- тримати
- ключ
- ключі
- масштабний
- останній
- УЧИТЬСЯ
- вчений
- вивчення
- LG
- бібліотека
- LINK
- погрузка
- подивитися
- виглядає як
- ВИГЛЯДИ
- made
- головний
- зробити
- Робить
- управління
- середа
- повідомлення
- метод
- переміщення
- ім'я
- nav
- навігація
- Необхідність
- Нові
- вузол
- Node.js
- Повідомлення
- об'єкт
- мета
- ONE
- варіант
- порядок
- органічний
- інакше
- огляд
- пакет
- пакети
- параметр
- Пройшов
- Пароль
- шлях
- продуктивність
- plato
- Інформація про дані Платона
- PlatoData
- Play
- будь ласка
- точка
- Практичний
- запобігати
- процес
- Продукти
- проект
- властивості
- власність
- захищений
- забезпечувати
- повноваження
- мета
- питань
- швидко
- RE
- досягати
- Реагувати
- Реальний світ
- отримати
- отримання
- залишається
- Сховище
- запросити
- запитів
- вимагається
- відповідь
- повертати
- кільце
- корінь
- Маршрут
- прогін
- біг
- sandbox
- зберегти
- говорить
- другий
- seconds
- розділ
- відправка
- чутливий
- служити
- обслуговування
- комплект
- налаштування
- тінь
- Повинен
- Показувати
- показаний
- сторона
- простий
- з
- So
- solid
- деякі
- що в сім'ї щось
- Спін
- Stackabuse
- стандартів
- старт
- почалася
- стан
- Статус
- Крок
- Стоп
- тема
- уявлення
- представляти
- успіх
- успішний
- Успішно
- такі
- SVG
- приймає
- Мета
- команда
- розповідає
- шаблон
- термінал
- тест
- Команда
- Пісочниця
- їх
- в ньому
- річ
- три
- через
- час
- до
- тост
- сьогодні
- занадто
- інструмент
- інструменти
- перехід
- передавати
- викликати
- правда
- підручник
- при
- Оновити
- оновлений
- us
- використання
- користувач
- зручно
- користувачі
- перевірка достовірності
- значення
- різний
- Ve
- вид
- Web
- вітальний
- який
- в той час як
- білий
- волі
- без
- Work
- працює
- б
- XML
- Ти
- вашу
- себе
- зефірнет