ایمیل یک روش ضروری برای ارتباط تجاری است که بسیار سریع، ارزان و ارگانیک است. هنگام ساخت محصولات، ایمیلها میتوانند تا حد زیادی یک رسانه مؤثر و کارآمد برای انتقال انواع مختلف دادهها به صورت الکترونیکی در اختیار کسب و کار شما قرار دهند.
در این مقاله با نحوه ساخت فرم ارسال ایمیل با استفاده از سرویس Mailgun آشنا می شویم. برای برنامه frontend، از React استفاده می کنیم، در backend از Node.js، برای درخواست های ناهمزمان، از Axios و برای نمایش اعلان ها، از بسته React-Toastify استفاده می کنیم. . در پایان روز، ما باید یک سرویس پست الکترونیکی می ساختیم که دقیقاً مانند این کار می کند:
توجه داشته باشید: شما می توانید به مخزن این پروژه که امروز می سازید ذره ذره دسترسی داشته باشید و با استفاده از آن با اجرای آن بازی کنید. لینک در GitHub.
بیا شروع کنیم!
راه اندازی پروژه
اولین چیزی که امروز میسازیم، اپلیکیشن frontend با استفاده از React است.
شروع به کار با کتابخانه React به سادگی شامل یک فایل جاوا اسکریپت (یک 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;
}
برای بهبود عملکرد برنامه، یک onSubmit
تابع رویداد handler باید بر روی عنصر فرم تعریف شود تا از رفتار پیشفرض فرمهایی که در واقع صفحه را با کلیک روی دکمه آن بازخوانی میکنند، جلوگیری شود. این ایده آل نیست که صفحه ما با کلیک روی دکمه به روز شود، زیرا ما درخواست را در پس زمینه ارسال می کنیم، که تجربه بهتری برای کاربر است.
همچنین ایده آل است که اگر کاربر هیچ ایمیل، موضوع یا پیامی وارد نکرده باشد، نتواند ایمیلی ارسال کند. برای آن، باید مقداری اعتبار ورودی را بررسی کنیم تا بررسی کنیم که آیا آن فیلدها خالی هستند یا خیر. در صورت وجود، خطایی را با پیام «لطفاً ایمیل، موضوع و پیام را پر کنید» برمیگردانیم.
برای این کار از برشته کردن بسته در برنامه ما باید آن را با اجرای دستور زیر در ترمینال پروژه نصب کنیم:
$ 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;
ساخت برنامه Backend با استفاده از Node
در این مرحله، ما frontend برنامه را با موفقیت پیاده سازی کرده ایم. با ادامه کار، با استفاده از Node شروع به کار روی باطن خواهیم کرد.
ابتدا یک دایرکتوری جدید در ریشه پروژه به نام ایجاد کنید backend
.
اکنون، cd
به پوشه Backend رفته و اجرا کنید npm init
از ترمینال به منظور شروع ایجاد یک برنامه Node.
$ npm init --y
راهنمای عملی و عملی ما برای یادگیری Git را با بهترین روش ها، استانداردهای پذیرفته شده در صنعت و برگه تقلب شامل بررسی کنید. دستورات Google 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
هدف - شی. اینها دادههایی هستند که کاربر از فیلدهای ورودی برنامه frontend وارد میکند.
هنگامی که این استخراج شد، messages
روش از mailgun
تابعی که در ابتدا تنظیم شده است فراخوانی می شود و پس از آن send
روش نامیده می شود. در متد ارسال، یک شی که دارای ویژگی های زیر است ارسال می شود:
from
: نامی که کاربران در بخش «از» یک ایمیل می بینند.to
آدرس ایمیلی که ایمیل به آن ارسال می شود (ایمیل وارد شده در قسمت ورودی).subject
: موضوع وارد شد.html
: نشانه گذاری HTML که پیام ارسال شده به آدرس ایمیل را مشخص می کند.
پارامتر دوم در send
متد تابعی است که خطا و بدنه را می پذیرد. در این تابع ما console.log
خطا، کد وضعیت را تنظیم کنید 500
و پیامی ارسال کنید که "خطا در ارسال ایمیل". در غیر این صورت، بدنه را وارد میکنیم و پیامی ارسال میکنیم که میگوید «ایمیل با موفقیت ارسال شد» در مورد موفقیت.
در انتهای فایل، پورت را از قسمت دریافت می کنیم .env
فایل و تماس بگیرید app.listen()
برای راه اندازی سرور
تعریف کلیدهای API
اولین قدم برای تعریف کلیدهای API برای استفاده از Mailgun در برنامه شما، ایجاد یک حساب کاربری رایگان است که با توجه به آنها 57 ثانیه طول می کشد. وب سایت رسمی.
پس از ایجاد یک حساب کاربری، یک کلید API برای حسابی که ایجاد کردهاید برای شما ارسال میشود، در حالی که میتوانید با رفتن به برگه ارسال در نوار کناری داشبورد، به دامنه دسترسی پیدا کنید.
پیوند sandbox و کلید API را کپی کنید و مقدار را در خود تنظیم کنید .env
فایل، همانطور که برای خودم انجام دادم:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
سپس با کلیک روی لینک به صفحه نمای کلی دامنه برگردید. صفحه باید شبیه این باشد:
در آنجا، در سمت راست صفحه، آدرس ایمیلی را که می خواهید آزمایش ارسال ایمیل به آن را وارد کنید - برای ایجاد یک گیرنده مجاز.
با کلیک بر روی دکمه "ذخیره گیرنده" باید ایمیلی به شکل زیر ارسال شود:
روی دکمه «موافقم» کلیک کنید و باید به یک صفحه خارجی هدایت شوید:
بر روی دکمه "بله" کلیک کنید تا آدرس گیرنده فعال شود. اکنون آن آدرس می تواند شروع به دریافت ایمیل از طریق Mailgun کند.
در نهایت، ما با موفقیت Mailgun را راهاندازی کردیم و با استفاده از Node backend را ساختیم.
اکنون، میتوانید با اجرای کد زیر از دایرکتوری باطن، سرور Express را به طرز لذت بخشی به چرخش درآورید:
$ node server.js
اتصال Node App به React App
برای اتصال قسمت جلویی به قسمت پشتی، به قسمت جلو بروید package.json
فایلی که در دایرکتوری ریشه پروژه برای برنامه React قرار دارد. سپس، در زیر name
ویژگی، اضافه کردن یک ویژگی جدید به نام proxy
، که باید مقدار پورت سرور باطن را داشته باشد. باید چیزی شبیه این باشد:
"proxy": "http://localhost:4000/"
با اضافه شدن آن، تمام درخواستهای ناهمزمان که از فرانتاند انجام میدهیم به سرور باطنی که ایجاد کردهایم هدایت میشوند.
برای بارگیری مجدد برنامه، سرور توسعه frontend را مجددا راه اندازی کنید.
با وارد کردن آدرس ایمیل (گیرنده ای که قبلاً فعال کرده اید)، موضوع ایمیل و پیام، تمام پیاده سازی های ما را تا کنون آزمایش کنید، سپس دکمه "ارسال" را فشار دهید. این باید نان تست موفقیت را نشان دهد تا بگوید ایمیل موفق بوده است.
و در صندوق ورودی آدرس گیرنده، شما نیز باید یک ایمیل دریافت کنید، درست مانند من:
پسگفتار
ارسال ایمیل برای مواردی مانند بازنشانی رمز عبور، استقبال کاربر از برنامه شما، تایید سفارش و غیره بسیار مفید است و در این مقاله یاد گرفتیم که ارسال ایمیل در یک برنامه Node.js با استفاده از Mailgun چقدر آسان است. . ما می بینیم که کار با Mailgun چقدر آسان است و ایجاد یک حساب کاربری برای شروع چقدر کاربر پسند و سریع است.
دفعه بعد که نیاز به ایجاد زیرساخت ایمیل برای پروژه خود پیدا کردید، با خیال راحت ابزارهای ارسال نامه مانند Mailgun را بررسی کنید. برای استفاده از این ابزار به کمک نیاز دارید، با خیال راحت با من یا هر کسی در جامعه توسعهدهنده تماس بگیرید، مطمئنم که آنها خوشحال خواهند شد که به شما کمک کنند.
منابع اضافی
- محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
- پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
- منبع: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- قادر
- پذیرفتن
- قبول می کند
- دسترسی
- در دسترس
- مطابق
- حساب
- واقعا
- اضافه
- نشانی
- پس از
- پیش
- هوشیار
- معرفی
- و
- دیگر
- پاسخ
- هر کس
- API
- کلیدهای API
- نرم افزار
- کاربرد
- برنامه های کاربردی
- دور و بر
- مقاله
- اختصاص داده
- خودکار
- Axios
- به عقب
- بخش مدیریت
- زمینه
- بر هم زدن
- شدن
- بودن
- در زیر
- بهتر
- بیت
- مسدود کردن
- بدن
- مرز
- جعبه
- مرورگر
- ساختن
- بنا
- ساخته
- کسب و کار
- دکمه
- صدا
- نام
- می توانید دریافت کنید
- موارد
- کشتی
- مرکز
- تغییر دادن
- شخصیت
- ارزان
- بررسی
- رمز
- ارتباط
- انجمن
- پیکر بندی
- اتصال
- محتویات
- تبدیل
- ایجاد
- ایجاد شده
- ایجاد
- ایجاد
- CSS
- داشبورد
- داده ها
- روز
- به طور پیش فرض
- مشخص
- تعریف می کند
- تعریف کردن
- توسعه دهنده
- پروژه
- DID
- دامنه
- هر
- پیش از آن
- موثر
- موثر
- به صورت الکترونیکی
- پست الکترونیک
- ایمیل
- را قادر می سازد
- وارد
- وارد
- وارد می شود
- محیط
- خطا
- ضروری است
- اساسا
- و غیره
- واقعه
- تجربه
- صریح
- خارجی
- تسهیل کردن
- FAST
- رشته
- زمینه
- پرونده
- فایل ها
- پر کردن
- پیدا کردن
- نام خانوادگی
- تمرکز
- پیروی
- فرم
- اشکال
- رایگان
- از جانب
- ظاهر
- تابع
- دریافت کنید
- گرفتن
- GIF
- رفتن
- می دهد
- Go
- بزرگ
- تا حد زیادی
- راهنمایی
- دسته
- دست
- سر
- کمک
- اصابت
- دارای
- در تردید بودن
- چگونه
- چگونه
- HTML
- HTTPS
- ICON
- دلخواه
- پیاده سازی
- اجرا
- واردات
- بهبود
- in
- مشمول
- از جمله
- شالوده
- در ابتدا
- ورودی
- نصب
- نصب شده
- IT
- جاوا اسکریپت
- جان
- جون خونه
- نگاه داشتن
- کلید
- کلید
- در مقیاس بزرگ
- نام
- یاد گرفتن
- آموخته
- یادگیری
- LG
- کتابخانه
- ارتباط دادن
- بارگیری
- نگاه کنيد
- شبیه
- مطالب
- ساخته
- اصلی
- ساخت
- ساخت
- مدیریت
- متوسط
- پیام
- روش
- متحرک
- نام
- نوا
- پیمایش
- نیاز
- جدید
- گره
- Node.js و
- اطلاعیه ها
- هدف
- هدف
- ONE
- گزینه
- سفارش
- سازمانی
- در غیر این صورت
- مروری
- بسته
- بسته
- پارامتر
- گذشت
- کلمه عبور
- مسیر
- کارایی
- افلاطون
- هوش داده افلاطون
- PlatoData
- بازی
- لطفا
- نقطه
- عملی
- جلوگیری از
- روند
- محصولات
- پروژه
- املاک
- ویژگی
- محفوظ
- ارائه
- پروکسی
- هدف
- سوالات
- سریع
- RE
- رسیدن به
- واکنش نشان می دهند
- دنیای واقعی
- گرفتن
- دریافت
- بقایای
- مخزن
- درخواست
- درخواست
- ضروری
- پاسخ
- برگشت
- حلقه
- ریشه
- مسیر
- دویدن
- در حال اجرا
- گودال ماسهبازی
- ذخیره
- می گوید:
- دوم
- ثانیه
- بخش
- در حال ارسال
- حساس
- خدمت
- سرویس
- تنظیم
- تنظیمات
- سایه
- باید
- نشان
- نشان داده شده
- طرف
- ساده
- پس از
- So
- جامد
- برخی از
- چیزی
- چرخش
- Stackabuse
- استانداردهای
- شروع
- آغاز شده
- دولت
- وضعیت
- گام
- توقف
- موضوع
- ارسال
- ارسال
- موفقیت
- موفق
- موفقیت
- چنین
- SVG
- طول می کشد
- هدف
- تیم
- می گوید
- قالب
- پایانه
- آزمون
- La
- ماسهبازی
- شان
- در آن
- چیز
- سه
- از طریق
- زمان
- به
- نان تست
- امروز
- هم
- ابزار
- ابزار
- انتقال
- انتقال
- ماشه
- درست
- آموزش
- زیر
- بروزرسانی
- به روز شده
- us
- استفاده کنید
- کاربر
- کاربر پسند
- کاربران
- اعتبار سنجی
- ارزش
- مختلف
- Ve
- چشم انداز
- وب
- استقبال
- که
- در حین
- سفید
- اراده
- بدون
- مهاجرت کاری
- با این نسخهها کار
- خواهد بود
- XML
- شما
- شما
- خودت
- زفیرنت