البريد الإلكتروني هو وسيلة أساسية للتواصل التجاري وهو سريع جدًا ورخيص وخالي من المحتوى العضوي. عند إنشاء المنتجات ، يمكن أن توفر رسائل البريد الإلكتروني لشركتك بشكل كبير وسيلة فعالة وفاعلة لنقل أنواع مختلفة من البيانات ، إلكترونيًا.
في هذه المقالة ، سنتعلم كيفية إنشاء نموذج لإرسال رسائل البريد الإلكتروني باستخدام خدمة Mailgun. بالنسبة لتطبيق الواجهة الأمامية ، سنستخدم React ، في الواجهة الخلفية ، سنستخدم Node.js لتقديم طلبات غير متزامنة ، وسنستخدم Axios ، ولإظهار الإشعارات ، سنستخدم حزمة React-Toastify . في نهاية اليوم ، كان من المفترض أن نبني خدمة بريد تعمل على النحو التالي:
ملحوظة: يمكنك الوصول إلى مستودع هذا المشروع الذي ستقوم ببنائه شيئًا فشيئًا اليوم ، والتلاعب بالتنفيذ باستخدام هذا الارتباط على جيثب.
هيا بنا نبدأ!
إعداد مشروع
أول شيء سننشئه اليوم هو تطبيق الواجهة الأمامية باستخدام 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;
}
لتحسين أداء التطبيق ، أ 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.
أولاً ، قم بإنشاء دليل جديد في جذر المشروع يسمى backend
.
الآن، cd
في دليل الواجهة الخلفية وتشغيل npm init
من الجهاز لبدء إنشاء تطبيق Node.
$ npm init --y
تحقق من دليلنا العملي العملي لتعلم Git ، مع أفضل الممارسات ، والمعايير المقبولة في الصناعة ، وورقة الغش المضمنة. توقف عن أوامر Googling 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
طريقة تسمى. في طريقة الإرسال ، يتم تمرير كائن يحتوي على الخصائص التالية:
from
: الاسم الذي يراه المستخدمون في قسم "من" في رسالة بريد إلكتروني.to
عنوان البريد الإلكتروني الذي يتم إرسال البريد الإلكتروني إليه (البريد الإلكتروني الذي تم إدخاله في حقل الإدخال).subject
: دخل الموضوع.html
: ترميز HTML الذي يحدد الرسالة المراد إرسالها إلى عنوان البريد الإلكتروني.
تم تمرير المعلمة الثانية في send
الطريقة هي وظيفة تقبل الخطأ والجسم. في هذه الوظيفة نحن console.log
الخطأ ، قم بتعيين رمز الحالة إلى 500
، وإرسال رسالة مفادها "خطأ في إرسال البريد الإلكتروني". وإلا فإننا نسجل النص ونرسل رسالة تقول "تم إرسال البريد الإلكتروني بنجاح" عند النجاح.
في نهاية الملف ، نحصل على المنفذ من ملف .env
ملف واستدعاء app.listen()
لبدء الخادم.
تحديد مفاتيح API
تتمثل الخطوة الأولى لتحديد مفاتيح API لاستخدام Mailgun في تطبيقك في إنشاء حساب مجاني يستغرق 57 ثانية وفقًا لها الموقع الرسمي.
بعد إنشاء حساب ، سيتم إرسال مفتاح واجهة برمجة التطبيقات للحساب الذي أنشأته إليك ، بينما يمكنك الوصول إلى المجال من خلال الانتقال إلى علامة تبويب الإرسال في التنقل الجانبي للوحة القيادة.
انسخ كلاً من رابط وضع الحماية ومفتاح 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. إذا كنت بحاجة إلى مساعدة في استخدام الأداة ، فلا تتردد في التواصل معي أو مع أي شخص في مجتمع المطورين ، أنا متأكد من أنهم سيسعدون بتقديم المساعدة.
مصادر إضافية
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
- المصدر https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- ماهرون
- استمر
- يقبل
- الوصول
- يمكن الوصول
- وفقا
- حسابي
- في الواقع
- وأضاف
- العنوان
- بعد
- قدما
- ملاحظه
- الكل
- و
- آخر
- إجابة
- أي شخص
- API
- مفاتيح API
- التطبيق
- تطبيق
- التطبيقات
- حول
- البند
- تعيين
- السيارات
- أكسيوس
- الى الخلف
- الخلفية
- خلفية
- سحق
- أصبح
- يجري
- أقل من
- أفضل
- قطعة
- حظر
- الجسدي
- الحدود
- صندوق
- المتصفح
- نساعدك في بناء
- ابني
- بنيت
- الأعمال
- زر
- دعوة
- تسمى
- يستطيع الحصول على
- الحالات
- يو كاتش
- مركز
- تغيير
- حرف
- رخيص
- التحقق
- الكود
- Communication
- مجتمع
- الاعداد
- التواصل
- محتويات
- تحول
- خلق
- خلق
- يخلق
- خلق
- CSS
- لوحة أجهزة القياس
- البيانات
- يوم
- الترتيب
- تعريف
- يعرف
- تحديد
- المطور
- التطوير التجاري
- فعل
- نطاق
- كل
- في وقت سابق
- الطُرق الفعّالة
- فعال
- إلكترونيا
- البريد الإلكتروني
- رسائل البريد الإلكتروني
- تمكن
- أدخل
- دخل
- يدخل
- البيئة
- خطأ
- أساسي
- أساسيا
- إلخ
- الحدث/الفعالية
- الخبره في مجال الغطس
- التعبير
- خارجي
- تسهيل
- FAST
- حقل
- مجال
- قم بتقديم
- ملفات
- شغل
- الاسم الأول
- تركز
- متابعيك
- النموذج المرفق
- أشكال
- مجانا
- تبدأ من
- الواجهة
- وظيفة
- دولار فقط واحصل على خصم XNUMX% على جميع
- الحصول على
- GIF
- بوابة
- يعطي
- Go
- عظيم
- جدا
- توجيه
- مقبض
- تشابك الايدى
- رئيس
- مساعدة
- ضرب
- يحمل
- تحوم
- كيفية
- كيفية
- HTML
- HTTPS
- اي كون
- المثالي
- التنفيذ
- نفذت
- استيراد
- تحسن
- in
- شامل
- بما فيه
- البنية التحتية
- في البداية
- إدخال
- تثبيت
- تثبيت
- IT
- جافا سكريبت
- جون
- فلان الفلاني
- احتفظ
- القفل
- مفاتيح
- على نطاق واسع
- اسم العائلة
- تعلم
- تعلم
- تعلم
- LG
- المكتبة
- LINK
- جار التحميل
- بحث
- يبدو مثل
- تبدو
- صنع
- الرئيسية
- جعل
- القيام ب
- إدارة
- متوسط
- الرسالة
- طريقة
- يتحرك
- الاسم
- NAV
- التنقل
- حاجة
- جديد
- العقدة
- نود.جي إس
- الإخطارات
- موضوع
- موضوعي
- ONE
- خيار
- طلب
- عضوي
- وإلا
- نظرة عامة
- صفقة
- حزم
- المعلمة
- مرت
- كلمة المرور
- مسار
- أداء
- أفلاطون
- الذكاء افلاطون البيانات
- أفلاطون داتا
- بلايستشن
- من فضلك
- البوينت
- عملية
- منع
- عملية المعالجة
- المنتجات
- تنفيذ المشاريع
- HAS
- الملكية
- محمي
- تزود
- الوكيل
- غرض
- الأسئلة المتكررة
- سريع
- RE
- الوصول
- رد فعل
- العالم الحقيقي
- تسلم
- يستلم
- بقايا
- مستودع
- طلب
- طلبات
- مطلوب
- استجابة
- عائد أعلى
- حلقة
- جذر
- طريق
- يجري
- تشغيل
- رمل
- حفظ
- يقول
- الثاني
- ثواني
- القسم
- إرسال
- حساس
- خدمة
- الخدمة
- طقم
- إعدادات
- شادو
- ينبغي
- إظهار
- أظهرت
- جانب
- الاشارات
- منذ
- So
- الصلبة
- بعض
- شيء
- غزل
- ستاكابوز
- المعايير
- بداية
- بدأت
- الولايه او المحافظه
- الحالة
- خطوة
- قلة النوم
- موضوع
- تسليم
- تقدم
- تحقيق النجاح
- ناجح
- بنجاح
- هذه
- SVG
- يأخذ
- الهدف
- فريق
- يروي
- قالب
- محطة
- تجربه بالعربي
- •
- الصندوق الرمل
- من مشاركة
- في ذلك
- شيء
- ثلاثة
- عبر
- الوقت
- إلى
- خبز محمص
- اليوم
- جدا
- أداة
- أدوات
- انتقال
- نقل
- يثير
- صحيح
- البرنامج التعليمي
- مع
- تحديث
- تحديث
- us
- تستخدم
- مستخدم
- سهل الاستعمال
- المستخدمين
- التحقق من صحة
- قيمنا
- مختلف
- Ve
- المزيد
- الويب
- ترحيب
- التي
- في حين
- أبيض
- سوف
- بدون
- للعمل
- أعمال
- سوف
- XML
- أنت
- حل متجر العقارات الشامل الخاص بك في جورجيا
- نفسك
- زفيرنت