كيفية إرسال رسائل بريد إلكتروني من تطبيق Vue.js الخاص بك باستخدام EmailJS

قبل أيام قليلة قررت العمل في مشروع Vue بسيط وكنت بحاجة لإرسال رسائل بريد إلكتروني من خلال جهة اتصال قمت بإنشائها للتو. كنت أرغب في تلقي بريد إلكتروني آلي في كل مرة يملأ فيها شخص ما نموذج الاتصال الخاص بي.

لذلك حصلت على البحث وتعثرت في EmailJs. قررت كتابة هذا المقال لأنني شعرت أن وثائقهم كانت رائعة وكان من السهل حقًا استخدامها. آمل أيضًا أن يساعد شخصًا ما هناك :)

هيا بنا نبدأ!

في هذه المقالة ، سأوضح لك كيفية استخدام EmailJS لإرسال رسائل البريد الإلكتروني من تطبيق Vuejs الخاص بك.

قبل المتابعة ، أفترض أن لديك Vue CLI مثبتًا على جهاز الكمبيوتر الخاص بك حيث سأقوم بإنشاء مشروع تجريبي صغير به. إذا لم يكن كذلك ، فقد ترغب في التحقق من كيفية تثبيته هنا.

سننشئ المشروع باستخدام هذا الأمر:

vue create vue-emailjs-demo

ستتم مطالبتنا بعد ذلك بخيار اختيار إعداد مسبق افتراضي أو تحديد الميزات يدويًا. اختر default.

سيتم إنشاء دليل مشروع جديد ، ويمكنك التنقل فيه باستخدام هذا الأمر:

cd vue-emailjs-demo

كيفية تثبيت EmailJS

يساعدك EmailJS على إرسال رسائل البريد الإلكتروني باستخدام تقنيات جانب العميل فقط. لا يلزم وجود خادم - ما عليك سوى توصيل EmailJS بإحدى خدمات البريد الإلكتروني المدعومة ، وإنشاء قالب بريد إلكتروني ، واستخدام مكتبة JavaScript الخاصة بهم لتشغيل بريد إلكتروني.

قبل أن نبدأ في كتابة الكود الخاص بنا ، ستحتاج إلى إنشاء حساب EmailJS. باستخدام حسابك ، ستتمكن من إنشاء قوالب بريد إلكتروني واختيار البريد الإلكتروني الذي تريد أن تذهب إليه رسائل البريد الإلكتروني المؤتمتة.

بمجرد تسجيل الدخول إلى حسابك الجديد ، سيتم توجيهك إلى لوحة القيادة.

كيفية إنشاء قالب البريد الإلكتروني

يمكن أن تحتوي قوالب البريد الإلكتروني اختياريًا على متغيرات ديناميكية في أي حقل تقريبًا (على سبيل المثال ، الموضوع والمحتوى و TO البريد الإلكتروني والاسم FROM وما إلى ذلك). يتم ملؤها من استدعاء JavaScript. سوف ندخل في هذا قريبا.

لنقم أولاً بإضافة خدمة بريد إلكتروني. لقد اخترت Gmail ولكن لك مطلق الحرية في اختيار الخدمة التي تناسب احتياجاتك.

أيضًا ، إذا كنت لا تريد البدء في التفكير في اسم خاص بك Service ID، فانقر فوق رمز البحث وسيتم إنشاؤه تلقائيًا لك.

بعد ذلك ، سننشئ قالب البريد الإلكتروني الخاص بنا. انتقل إلى صفحة القوالب. قم بإنشاء قالب جديد. سيحدد قالب البريد الإلكتروني الخاص بنا موضوع بريدنا الإلكتروني ، والمحتوى الذي سيحتوي عليه ، ومكان إرساله ، وما إلى ذلك.

مجموعات الأقواس المزدوجة المجعدة الموضحة أعلاه مثل {{from_name}}المتغيرات. عندما يملأ المستخدم النموذج الخاص بنا ، سنقوم بتمرير هذه المعلومات إلى EmailJS باستخدام هذه المتغيرات.

فيما يلي شرح بسيط للحقول المتاحة في نموذجنا:

  • الموضوع: موضوع البريد الإلكتروني.
  • المحتوى: إننص البريد الإلكتروني. سنقوم بتمرير رسالة المستخدم واسمه وعنوان عودته هنا.
  • إلى بريد إلكتروني: يحتوي على وجهة هذا البريد الإلكتروني.
  • من الاسم : هذا اختياري. لكن يمكنك كتابة اسمك هناك.
  • من البريد الإلكتروني: عنوان البريد الإلكتروني للمرسل كما سيظهر للمستلم. إذا تم تمكين مربع الاختيار الافتراضي لعنوان البريد الإلكتروني ، فسيستخدم EmailJS عنوان البريد الإلكتروني المرتبط بخدمة البريد الإلكتروني قيد الاستخدام.
  • الرد على: يعيّن عنوان البريد الإلكتروني الذي يجب إرسال الردود إليه.
  • نسخة مخفية الوجهة و نسخة: يتم استخدام هذين الحقلين عادة لإرسال نسخة من الرسالة إلى كل شخص قمت بإدراجها. Reply ToوBCC and CCلن يتم استخدامه في هذا الدليل لأننا نريد أن نجعله بسيطًا قدر الإمكان. إذا كنت بحاجة إلى مزيد من المعلومات ، يمكنك التحقق من مستندات EmailJS هنا.

ملاحظة: في مرحلة ما من هذه المقالة ، سنستخدم ملف Service IDو Template ID. سنحتاج أيضًا إلى ملف User ID. يمكنك العثور User IDعلى جزء التكامل من لوحة القيادة. يمكنك نسخ التفاصيل إلى الحافظة الخاصة بك ولصقها عند الحاجة.

كيفية تثبيت EmailJS في تطبيقك

ننتقل الآن إلى الكود :) لتثبيت EmailJS في تطبيقك ، استخدم هذا الأمر:

npm install emailjs-com --save

سنرسل بريدًا إلكترونيًا من نموذج اتصال بسيط للغاية. سيجمع البيانات بما في ذلك: الاسم (الخاص بالمرسل) والبريد الإلكتروني (للمرسل) ومحتوى الرسالة. أشياء بسيطة!

يمكنك تحرير HelloWorld.Vueالمكون الذي تم إنشاؤه تلقائيًا لنا عندما استخدمنا Vue CLI أو يمكنك إنشاء مكون جديد يسمى ContactForm.vue. سأفعل هذا الأخير.

أدناه سنقوم ببناء مكون نموذج الاتصال ، ContactForm.vue.

لنبدأ بـ template:

 Name  Email  Message 

شرح الترميز لدينا

كما ذكرت سابقًا ، سنرسل بريدًا إلكترونيًا من نموذج اتصال بسيط للغاية. لذلك قم بإنشاء divعنصر يحتوي على محتوى النموذج الخاص بنا. سنضيف نمطًا إلى نموذجنا ، لذا أضف فئة containerإلى div العنصر.

 * {box-sizing: border-box;} .container { display: block; margin:auto; text-align: center; border-radius: 5px; background-color: #f2f2f2; padding: 20px; width: 50%; } label { float: left; } input[type=text], [type=email], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } 

يمكنك بدء خادمك بالأمر:

npm run serve

الآن ، افتح المستعرض الخاص بك على localhost: 8080 وسترى النموذج الخاص بك:

سنقوم أيضًا بإنشاء طريقة تسمى sendEmailوالتي تتعامل مع إرسال بياناتنا. ولكن قبل القيام بذلك ، نحتاج إلى الاستيراد emailjsفي ملفنا.

أضف السطر التالي أسفله مباشرة script:

import emailjs from 'emailjs-com';

فيما يلي باقي الكود المطلوب في موقعنا script:

 export default { name: 'ContactUs', data() { return { name: '', email: '', message: '' } }, methods: { sendEmail(e) { try { emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID', { name: this.name, email: this.email, message: this.message }) } catch(error) { console.log({error}) } // Reset form field this.name = '' this.email = '' this.message = '' }, } } 

ما يفعله هذا الرمز

لقد استخدمت ما ورد try...catchأعلاه ولكن ليس عليك بالضرورة استخدامه. تذكر عندما طلبت منك ذلكانسخ معرف الخدمة ومعرف النموذج وتفاصيل معرف المستخدم إلى الحافظة الخاصة بك والصقها عند الحاجة؟ حسنًا ، أنت في حاجة إليها تمامًا الآن! لذا استبدل هذا الجزء من المقتطف بتفاصيلك الفعلية.

emailjs.sendForm() is how we send data to EmailJS after passing the Service ID, Template ID, User ID and form data that were passed into sendEmail(). We console.log() any error encountered with the catch() block.

It is important to note that sendForm() sends an email based on the specified email template and the passed form data. So make sure that your form input name is the same as the variable in your EmailJS template.

Below is my modified EmailJS template with the name (of the sender), email (of the sender), and the message content.

That's it!

Check the To Email address included in your template and you should have your email sent there already. You could also play around with the Test it or playground feature on the top-right corner of the template if you want.

GitHub Repo

يمكنك العثور على رمز هذه المقالة في حسابي على GitHub.

لا تتردد في مشاركة هذه المقالة إذا وجدت أنها مفيدة. شكرا للقراءة!