Email là một phương thức giao tiếp kinh doanh thiết yếu rất nhanh, rẻ và miễn phí hàng đầu. Khi xây dựng sản phẩm, email có thể cung cấp cho doanh nghiệp của bạn một phương tiện hữu hiệu và hiệu quả để truyền các loại dữ liệu khác nhau bằng điện tử.
Trong bài viết này, chúng ta sẽ tìm hiểu cách xây dựng biểu mẫu để gửi email bằng dịch vụ Mailgun. Đối với ứng dụng giao diện người dùng, chúng tôi sẽ sử dụng React, trên phần phụ trợ, chúng tôi sẽ sử dụng Node.js, để thực hiện các yêu cầu không đồng bộ, chúng tôi sẽ sử dụng Axios và để hiển thị thông báo, chúng tôi sẽ sử dụng gói React-Toastify . Vào cuối ngày, lẽ ra chúng ta nên xây dựng một dịch vụ thư hoạt động như thế này:
Lưu ý: Bạn có thể có quyền truy cập vào kho lưu trữ cho dự án này mà bạn sẽ xây dựng từng chút một hôm nay và khám phá việc triển khai bằng cách sử dụng công cụ này liên kết trên GitHub.
Băt đâu nao!
Thiết lập dự án
Điều đầu tiên chúng ta sẽ xây dựng hôm nay là ứng dụng giao diện người dùng, sử dụng React.
Bắt đầu với thư viện React rất đơn giản bằng cách đưa tệp JavaScript (CDN) vào tệp HTML. Nhưng đối với ứng dụng thực tế và quy mô lớn, React CLI là cách tốt hơn để bắt đầu. Chúng tôi sẽ sử dụng React CLI trong hướng dẫn của chúng tôi ngày hôm nay.
Trong bài viết này, chúng ta sẽ sử dụng một công cụ CLI do nhóm React xây dựng để giúp tạo điều kiện phát triển nhanh chóng các ứng dụng React. Để cài đặt React CLI, hãy chạy lệnh sau –
npm install -g create-react-app
.
Bây giờ, chúng ta hãy tạo dự án và đặt tên cho nó react-node-email-app
, sử dụng lệnh dưới đây:
$ npx create-react-app react-node-email-app
Điều này sẽ tạo một mẫu khởi đầu để xây dựng dự án của chúng tôi. Bạn có thể xem mẫu này bằng cách vào thư mục dự án của mình và sau đó chạy máy chủ phát triển:
$ cd react-node-email-app
$ yarn start
Sau đó, chúng tôi có thể xem lối vào của mình trong trình duyệt tại localhost:3000
.
Xây dựng giao diện người dùng dự án
Bây giờ, chúng ta có thể bắt đầu xây dựng giao diện người dùng của ứng dụng. Chúng ta sẽ bắt đầu bằng cách xây dựng biểu mẫu để gửi email.
Chúng tôi sẽ làm điều này trong App.js
tập tin, để nó được cập nhật để trở thành:
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;
Ở đây, chúng tôi đã tạo một biểu mẫu có ba trường nhập liệu, một trường để nhập email của người nhận, một trường khác cho chủ đề của email và trường cuối cùng để nhập thông điệp chính của email.
Trong các trường nhập liệu khác nhau, chúng tôi đã thiết lập một trạng thái để xử lý thay đổi trong hộp nhập liệu – để bắt bất kỳ thay đổi nào được thực hiện khi người dùng nhập một ký tự vào trường nhập liệu bằng cách sử dụng onChange
người nghe sự kiện.
Chúng tôi cũng đã tạo một nút cho mục đích gửi email.
Để làm đẹp biểu mẫu, chúng tôi đã cập nhật App.css
tập tin với các kiểu CSS sau, để nội dung của nó trông như thế này:
.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;
}
Để cải thiện hiệu suất của ứng dụng, một onSubmit
chức năng xử lý sự kiện phải được xác định trên thành phần biểu mẫu để ngăn chặn hành vi mặc định của biểu mẫu thực sự làm mới một trang khi nhấp vào nút của trang đó. Không lý tưởng nếu trang của chúng tôi được làm mới khi nút được nhấp vì chúng tôi đang gửi yêu cầu ở chế độ nền, đây là trải nghiệm tốt hơn cho người dùng.
Điều lý tưởng là người dùng sẽ không thể gửi email nếu họ chưa nhập bất kỳ email, chủ đề hoặc tin nhắn nào. Để làm được điều đó, chúng tôi phải thực hiện một số xác thực đầu vào để kiểm tra xem các trường đó có trống không. Nếu đúng như vậy, chúng tôi sẽ trả về lỗi với thông báo “Vui lòng điền email, chủ đề và thông báo”.
Để làm điều này, chúng tôi sử dụng các nâng cốc chúc mừng gói trong ứng dụng của chúng tôi. Chúng ta cần cài đặt nó bằng cách chạy lệnh sau trong terminal của dự án:
$ yarn add react-toastify
Tiếp theo, cập nhật App.js
với submitHandler
chức năng:
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;
Giờ đây, mỗi khi người dùng nhấp vào nút để gửi email mà không cần điền trước địa chỉ email, chủ đề email và các trường nhập nội dung thư, thông báo chúc mừng sẽ nhắc người đó thực hiện tất cả những gì được yêu cầu.
Vì chúng tôi cũng cần axios
thư viện để thực hiện các yêu cầu AJAX, chúng tôi cũng sẽ cần cài đặt nó:
$ yarn add axios
Tiếp theo, tạo một try/catch
block để xử lý yêu cầu gửi email không đồng bộ.
App.js
hiện được cập nhật để trở thành:
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;
Xây dựng ứng dụng phụ trợ bằng Node
Tại thời điểm này, chúng tôi đã triển khai thành công giao diện người dùng của ứng dụng. Tiếp tục, chúng ta sẽ bắt đầu làm việc với phần phụ trợ bằng Node.
Đầu tiên, tạo một thư mục mới trong thư mục gốc của dự án được gọi là backend
.
Bây giờ, cd
vào thư mục phụ trợ và chạy npm init
từ thiết bị đầu cuối để bắt đầu tạo ứng dụng Nút.
$ npm init --y
Xem hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, các tiêu chuẩn được ngành công nghiệp chấp nhận và bảng lừa đảo đi kèm. Dừng lệnh Googling Git và thực sự học nó!
Chú thích: Các --y
tùy chọn yêu cầu NPM trả lời “có” cho tất cả các câu hỏi được đặt ra bởi init
yêu cầu. Điều này về cơ bản cung cấp cho bạn các cài đặt mặc định cho package.json
tập tin.
Điều này tạo ra một package.json
tệp cho phép quản lý các phụ thuộc ứng dụng của dự án phụ trợ.
Tiếp theo, cài đặt các gói sau:
express
: Tạo một máy chủ webdotenv
: Đọc dữ liệu cấu hình và phục vụ như một cách tuyệt vời để giữ dữ liệu nhạy cảm khỏi mã có thể truy cậpmailgun-js
: Cho phép gửi email bằng Mailgun
$ yarn add express dotenv mailgun-js
Với các gói này hiện đã được cài đặt, hãy tạo hai tệp mới server.js
và .env
trong backend
thư mục.
Trong tạp chí .env
tệp, chúng tôi sẽ giữ miền và khóa API cho Mailgun.
Xây dựng máy chủ
Với server.js
tệp, mục tiêu là tạo một máy chủ bằng Express.js. Trong đó, chúng tôi nhập khẩu express
, dotenv
và mailgun-js
gói.
server.js
được cập nhật để trở thành:
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}`);
});
Ở đây, chúng tôi đã gọi mg
chức năng và gán nó cho mailgun
. Trong mg
chức năng, chúng tôi chuyển khóa API và tên miền từ biến môi trường và sử dụng mailgun
để gửi email.
Sau đó, ứng dụng Express được tạo và hai phần mềm trung gian express.json()
và express.urlencoded
được sử dụng để tải trọng bằng Express từ yêu cầu API và chuyển đổi nó thành req.body
.
Tiếp theo, một POST
tuyến đường với đường dẫn /api/email
được tạo và trong đó, chức năng chấp nhận yêu cầu và phản hồi được xác định. Email, chủ đề và tin nhắn sau đó có thể được trích xuất từ req.body
sự vật. Đây là những dữ liệu mà người dùng nhập từ các trường đầu vào trên ứng dụng giao diện người dùng.
Một khi điều này được giải nén, các messages
phương pháp từ mailgun
hàm được thiết lập ban đầu được gọi, sau đó hàm send
phương thức được gọi. Trong phương thức gửi, một đối tượng chứa các thuộc tính sau được truyền:
from
: Tên mà người dùng nhìn thấy trong phần “từ” của email.to
Địa chỉ email mà email đang được gửi đến (email được nhập trong trường nhập liệu).subject
: Chủ đề đã nhập.html
: Đánh dấu HTML xác định thư sẽ được gửi đến địa chỉ email.
Tham số thứ hai được truyền trong send
phương thức là một hàm chấp nhận lỗi và phần thân. Trong chức năng này, chúng tôi console.log
lỗi, hãy đặt mã trạng thái thành 500
, và gửi thông báo có nội dung “Lỗi khi gửi email”. Nếu không, chúng tôi đăng nhập nội dung và gửi một thông báo cho biết “Email đã gửi thành công” khi thành công.
Ở cuối tệp, chúng tôi nhận được cổng từ .env
nộp hồ sơ và gọi điện app.listen()
để khởi động máy chủ.
Xác định các khóa API
Bước đầu tiên để xác định các khóa API để sử dụng Mailgun trong ứng dụng của bạn là tạo một tài khoản miễn phí, mất 57 giây theo quy định của họ. Trang web chính thức.
Sau khi bạn đã tạo tài khoản, khóa API cho tài khoản bạn đã tạo sẽ được gửi cho bạn, trong khi bạn có thể truy cập vào miền bằng cách điều hướng đến tab gửi ở phần điều hướng bên của bảng điều khiển.
Sao chép cả liên kết hộp cát và khóa API và đặt giá trị trong .env
tập tin, như tôi đã làm cho tôi:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Tiếp theo, quay lại trang tổng quan của tên miền bằng cách nhấp vào liên kết. Trang sẽ trông như thế này:
Trong đó, ở phía bên phải của trang, hãy nhập địa chỉ email bạn muốn kiểm tra việc gửi email đến – để tạo người nhận được ủy quyền.
Nhấp vào nút "Lưu người nhận" sẽ kích hoạt một email giống như hình bên dưới, sẽ được gửi:
Nhấp vào nút “Tôi đồng ý” và bạn sẽ được chuyển hướng đến một trang bên ngoài:
Nhấn nút “Yes” để tiến hành kích hoạt địa chỉ người nhận. Bây giờ địa chỉ đó có thể bắt đầu nhận email qua Mailgun.
Cuối cùng, chúng tôi đã thiết lập thành công Mailgun và xây dựng chương trình phụ trợ bằng Node.
Giờ đây, bạn có thể khởi động nhanh máy chủ Express bằng cách chạy đoạn mã sau từ thư mục phụ trợ:
$ node server.js
Kết nối Ứng dụng Nút với Ứng dụng React
Để kết nối giao diện người dùng với phụ trợ, hãy đi tới package.json
tệp nằm trong thư mục gốc của dự án cho ứng dụng React. Sau đó, dưới sự name
tài sản, thêm một tài sản mới được gọi là proxy
, sẽ có giá trị của cổng cho máy chủ phụ trợ. Nó sẽ trông giống như thế này:
"proxy": "http://localhost:4000/"
Với điều đó được thêm vào, tất cả các yêu cầu không đồng bộ mà chúng tôi thực hiện từ giao diện người dùng sẽ được chuyển hướng đến máy chủ phụ trợ mà chúng tôi đã tạo.
Khởi động lại máy chủ phát triển giao diện người dùng để tải lại ứng dụng.
Hãy tiếp tục để kiểm tra tất cả quá trình triển khai của chúng tôi cho đến nay, bằng cách nhập địa chỉ email (người nhận mà bạn đã kích hoạt trước đó), chủ đề email và thông báo, sau đó nhấn nút “Gửi”. Điều này sẽ hiển thị một bánh mì nướng thành công để nói rằng email đã thành công.
Và trong hộp thư đến của địa chỉ người nhận, bạn cũng sẽ nhận được một email, giống như tôi đã làm:
Tổng kết
Gửi email vẫn rất hữu ích cho các trường hợp như đặt lại mật khẩu, chào mừng người dùng đến với ứng dụng của bạn, xác nhận đơn đặt hàng, v.v. và trong bài viết này, chúng ta đã biết cách gửi email trong ứng dụng Node.js bằng Mailgun dễ dàng như thế nào . Chúng tôi thấy việc làm việc với Mailgun dễ dàng như thế nào cũng như việc tạo một tài khoản để bắt đầu nhanh chóng và thân thiện với người dùng như thế nào.
Lần tới khi bạn thấy mình cần xây dựng cơ sở hạ tầng email cho dự án của mình, vui lòng kiểm tra các công cụ gửi thư như Mailgun. Cần trợ giúp bằng cách sử dụng công cụ này, vui lòng liên hệ với tôi hoặc bất kỳ ai trong cộng đồng nhà phát triển, tôi chắc chắn rằng họ sẽ sẵn lòng trợ giúp.
Tài Nguyên Bổ Sung
- Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
- Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến thức. Truy cập Tại đây.
- nguồn: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- Có khả năng
- Chấp nhận
- Chấp nhận
- truy cập
- có thể truy cập
- Theo
- Tài khoản
- thực sự
- thêm
- địa chỉ
- Sau
- trước
- Cảnh báo
- Tất cả
- và
- Một
- trả lời
- bất kỳ ai
- api
- KHÓA API
- ứng dụng
- Các Ứng Dụng
- các ứng dụng
- xung quanh
- bài viết
- giao
- tự động
- Axios
- trở lại
- Backend
- lý lịch
- bash
- trở nên
- được
- phía dưới
- Hơn
- Một chút
- Chặn
- thân hình
- biên giới
- Hộp
- trình duyệt
- xây dựng
- Xây dựng
- xây dựng
- kinh doanh
- nút
- cuộc gọi
- gọi là
- Có thể có được
- trường hợp
- Catch
- Trung tâm
- thay đổi
- tính cách
- giá rẻ
- kiểm tra
- mã
- Giao tiếp
- cộng đồng
- Cấu hình
- Kết nối
- nội dung
- chuyển đổi
- tạo
- tạo ra
- tạo ra
- Tạo
- CSS
- bảng điều khiển
- dữ liệu
- ngày
- Mặc định
- xác định
- Xác định
- xác định
- Nhà phát triển
- Phát triển
- ĐÃ LÀM
- miền
- mỗi
- Sớm hơn
- Hiệu quả
- hiệu quả
- điện tử
- cho phép
- đăng ký hạng mục thi
- vào
- Nhập cảnh
- Môi trường
- lôi
- thiết yếu
- chủ yếu
- vv
- Sự kiện
- kinh nghiệm
- thể hiện
- ngoài
- tạo điều kiện
- NHANH
- lĩnh vực
- Lĩnh vực
- Tập tin
- Các tập tin
- điền
- Tìm kiếm
- Tên
- Tập trung
- tiếp theo
- hình thức
- các hình thức
- Miễn phí
- từ
- lối vào
- chức năng
- được
- nhận được
- gif
- đi
- cho
- Go
- tuyệt vời
- rất nhiều
- hướng dẫn
- xử lý
- hands-on
- cái đầu
- giúp đỡ
- Đánh
- giữ
- di chuột
- Độ đáng tin của
- Hướng dẫn
- HTML
- HTTPS
- ICON
- lý tưởng
- thực hiện
- thực hiện
- nhập khẩu
- nâng cao
- in
- bao gồm
- Bao gồm
- Cơ sở hạ tầng
- ban đầu
- đầu vào
- cài đặt, dựng lên
- cài đặt
- IT
- JavaScript
- nhà vệ sinh
- JOHN DOE
- Giữ
- Key
- phím
- quy mô lớn
- Họ
- LEARN
- học
- học tập
- LG
- Thư viện
- LINK
- tải
- Xem
- giống như
- NHÌN
- thực hiện
- Chủ yếu
- làm cho
- Làm
- quản lý
- trung bình
- tin nhắn
- phương pháp
- di chuyển
- tên
- nav
- điều hướng
- Cần
- Mới
- nút
- Node.js
- thông báo
- vật
- Mục tiêu
- ONE
- Tùy chọn
- gọi món
- hữu cơ
- nếu không thì
- tổng quan
- gói
- gói
- tham số
- thông qua
- Mật khẩu
- con đường
- hiệu suất
- plato
- Thông tin dữ liệu Plato
- PlatoDữ liệu
- Play
- xin vui lòng
- Điểm
- Thực tế
- ngăn chặn
- quá trình
- Sản phẩm
- dự án
- tài sản
- tài sản
- bảo vệ
- cho
- Proxy
- mục đích
- Câu hỏi
- nhanh
- RE
- đạt
- Phản ứng
- thế giới thực
- nhận
- nhận
- vẫn còn
- kho
- yêu cầu
- yêu cầu
- cần phải
- phản ứng
- trở lại
- Nhẫn
- nguồn gốc
- Route
- chạy
- chạy
- sandbox
- Lưu
- nói
- Thứ hai
- giây
- Phần
- gửi
- nhạy cảm
- phục vụ
- dịch vụ
- định
- thiết lập
- Bóng tối
- nên
- hiển thị
- thể hiện
- bên
- Đơn giản
- kể từ khi
- So
- rắn
- một số
- một cái gì đó
- Quay
- xếp chồng lên nhau
- tiêu chuẩn
- Bắt đầu
- bắt đầu
- Tiểu bang
- Trạng thái
- Bước
- Dừng
- Tiêu đề
- nộp hồ sơ
- trình
- thành công
- thành công
- Thành công
- như vậy
- SVG
- mất
- Mục tiêu
- nhóm
- nói
- mẫu
- Thiết bị đầu cuối
- thử nghiệm
- Sản phẩm
- Hộp cát
- cung cấp their dịch
- trong đó
- điều
- số ba
- Thông qua
- thời gian
- đến
- bánh mì nướng
- bây giờ
- quá
- công cụ
- công cụ
- quá trình chuyển đổi
- truyền
- kích hoạt
- đúng
- hướng dẫn
- Dưới
- Cập nhật
- cập nhật
- us
- sử dụng
- người sử dang
- sử dụng
- Người sử dụng
- xác nhận
- giá trị
- khác nhau
- Ve
- Xem
- web
- chào đón
- cái nào
- trong khi
- trắng
- sẽ
- không có
- Công việc
- công trinh
- sẽ
- XML
- Bạn
- trên màn hình
- mình
- zephyrnet