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

مقدمة: إرسال البريد الإلكتروني من تطبيقات الويب الحديثة

في عالم تطوير الويب سريع التطور، غالبًا ما نحتاج إلى دمج وظائف إرسال البريد الإلكتروني في تطبيقاتنا. سواء كان ذلك لنموذج اتصال، أو إشعارات للمستخدمين، أو تأكيدات للطلبات، فإن الحاجة إلى إرسال رسائل بريد إلكتروني تلقائية أمر بالغ الأهمية. تقليديًا، يتطلب هذا إعداد خادم خلفي معقد أو استخدام واجهات برمجة تطبيقات خارجية تتطلب مصادقة من جانب الخادم. ولكن ماذا لو كان بإمكانك إنجاز هذه المهمة مباشرة من جانب العميل في تطبيقك المبني بـ Vue.js؟

هنا يأتي دور EmailJS، وهي خدمة قوية ومبتكرة تسمح لك بإرسال رسائل البريد الإلكتروني باستخدام تقنيات جانب العميل فقط، دون الحاجة إلى أي خادم خلفي. لقد وجدتُ أن وثائقهم ممتازة وسهلة الاستخدام للغاية، مما دفعني لكتابة هذا الدليل التفصيلي لمساعدتك على دمج هذه الوظيفة في مشاريعك.

البدء: المتطلبات الأساسية وتجهيز المشروع

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

تثبيت Vue CLI وإنشاء مشروع جديد

للبدء، سنقوم بإنشاء مشروع Vue.js جديد. افتح سطر الأوامر (CLI) ونفّذ الأمر التالي:

vue create vue-emailjs-demo

سيُطلب منك بعد ذلك اختيار إعداد مسبق افتراضي أو تحديد الميزات يدويًا. اختر الخيار default. بعد اكتمال الإنشاء، سيتم إنشاء دليل مشروع جديد. انتقل إليه باستخدام الأمر التالي:

cd vue-emailjs-demo

ما هو EmailJS وكيف يسهل إرسال البريد الإلكتروني؟

EmailJS هي خدمة تتيح لك إرسال رسائل البريد الإلكتروني مباشرة من تطبيقات الويب الخاصة بك باستخدام JavaScript فقط. لا يتطلب الأمر أي خادم خلفي؛ ما عليك سوى ربط EmailJS بإحدى خدمات البريد الإلكتروني المدعومة (مثل Gmail أو Outlook)، وإنشاء قالب بريد إلكتروني، ثم استخدام مكتبة JavaScript الخاصة بهم لتشغيل عملية الإرسال.

المزايا الرئيسية لـ EmailJS

• لا حاجة لخادم: يقلل من تعقيد البنية التحتية وتكاليف الصيانة.
• سهولة التكامل: مكتبة JavaScript بسيطة وواضحة.
• قوالب قابلة للتخصيص: دعم المتغيرات الديناميكية في القوالب.
• دعم لخدمات بريد إلكتروني متعددة: مرونة في اختيار مزود الخدمة.
• أمان: لا يتم كشف بيانات الاعتماد الخاصة بك في جانب العميل.

إعداد حسابك وقوالب البريد الإلكتروني في EmailJS

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

إنشاء حساب جديد في EmailJS

توجه إلى موقع EmailJS وقم بإنشاء حساب جديد. العملية بسيطة ومباشرة.

ربط خدمة البريد الإلكتروني وإنشاء قالب

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

أولاً، دعنا نضيف خدمة بريد إلكتروني. يمكنك اختيار أي خدمة تناسب احتياجاتك (على سبيل المثال، Gmail). إذا كنت لا ترغب في التفكير في اسم لـ Service ID الخاص بك، ما عليك سوى النقر على أيقونة البحث وسيتم إنشاؤه تلقائيًا لك.

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

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

شرح حقول قالب البريد الإلكتروني

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

• Subject (الموضوع): موضوع البريد الإلكتروني.
• Content (المحتوى): نص البريد الإلكتروني. سنقوم بتمرير رسالة المستخدم، اسمه، وعنوان بريده الإلكتروني هنا.
• To Email (إلى البريد الإلكتروني): يحتوي على وجهة هذا البريد الإلكتروني.
• From Name (اسم المرسل): هذا اختياري، ولكن يمكنك كتابة اسمك هنا.
• From Email (بريد المرسل الإلكتروني): عنوان البريد الإلكتروني للمرسل كما سيظهر للمستلم. إذا تم تمكين مربع الاختيار default email address، فسيستخدم EmailJS عنوان البريد الإلكتروني المرتبط بخدمة البريد الإلكتروني المستخدمة.
• Reply To (الرد على): يحدد عنوان البريد الإلكتروني الذي يجب إرسال الردود إليه.
• BCC و CC: تُستخدم هذه الحقول عادةً لإرسال نسخة من الرسالة إلى جميع من قمت بإدراجهم.

لن نستخدم Reply To أو BCC و CC في هذا الدليل للحفاظ على البساطة قدر الإمكان. إذا كنت بحاجة إلى مزيد من المعلومات، يمكنك مراجعة وثائق EmailJS.

معرفات EmailJS الأساسية: Service ID، Template ID، و User ID

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

تكامل EmailJS مع تطبيق Vue.js الخاص بك

الآن ننتقل إلى الجزء العملي وكتابة الكود.

تثبيت مكتبة EmailJS

لتثبيت مكتبة EmailJS في تطبيق Vue.js الخاص بك، استخدم الأمر التالي:

npm install emailjs-com --save

بناء نموذج الاتصال (Contact Form Component)

سنقوم بإرسال البريد الإلكتروني من نموذج اتصال بسيط للغاية. سيجمع هذا النموذج البيانات بما في ذلك: اسم المرسل (name)، بريد المرسل الإلكتروني (email)، ومحتوى الرسالة (message). يمكنك تعديل المكون HelloWorld.vue الذي تم إنشاؤه تلقائيًا لنا عند استخدام Vue CLI، أو يمكنك إنشاء مكون جديد باسم ContactForm.vue. سنقوم بالخيار الأخير.

فيما يلي سنقوم ببناء مكون نموذج الاتصال، ContactForm.vue. لنبدأ بـ template:

<template>
  <div class="container">
    <form>
      <label>الاسم</label>
      <input type="text" v-model="name" name="name" placeholder="اسمك" >

      <label>البريد الإلكتروني</label>
      <input type="email" v-model="email" name="email" placeholder="بريدك الإلكتروني" >

      <label>الرسالة</label>
      <textarea name="message" v-model="message" cols="30" rows="5" placeholder="رسالتك">
      </textarea>

      <input type="submit" value="إرسال">
    </form>
  </div>
</template>

شرح هيكل النموذج (Markup)

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

<style scoped>
* {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;
}
</style>

تشغيل التطبيق وعرض النموذج

يمكنك الآن تشغيل الخادم الخاص بك باستخدام الأمر التالي:

npm run serve

افتح متصفحك على العنوان localhost:8080 ويجب أن ترى نموذجك:

إرسال البريد الإلكتروني: منطق المكون (Script Logic)

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

import emailjs from 'emailjs-com';

فيما يلي بقية الكود المطلوب في جزء <script> من مكون ContactForm.vue:

<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
        })
        .then((result) => {
            alert('تم إرسال رسالتك بنجاح!');
            console.log('SUCCESS!', result.status, result.text);
        }, (error) => {
            alert('فشل إرسال الرسالة. يرجى المحاولة مرة أخرى.');
            console.log('FAILED...', error);
        });
      } catch (error) {
        console.log({error})
      }
      // إعادة تعيين حقول النموذج بعد الإرسال
      this.name = ''
      this.email = ''
      this.message = ''
    },
  }
}
</script>

تحليل دالة sendEmail() وشرحها

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

الدالة emailjs.sendForm() هي الطريقة التي نرسل بها البيانات إلى EmailJS بعد تمرير Service ID و Template ID و User ID وبيانات النموذج التي تم تمريرها إلى sendEmail(). نحن نسجل أي خطأ يتم مواجهته باستخدام كتلة catch().

من المهم ملاحظة أن sendForm() ترسل بريدًا إلكترونيًا بناءً على قالب البريد الإلكتروني المحدد وبيانات النموذج الممررة. لذا تأكد من أن اسم إدخال النموذج (name) هو نفسه اسم المتغير في قالب EmailJS الخاص بك. على سبيل المثال، إذا كان لديك {{from_name}} في قالبك، فيجب أن يكون لديك حقل إدخال بـ name="from_name" في نموذج HTML الخاص بك.

فيما يلي قالب EmailJS المعدّل الخاص بي مع الاسم (اسم المرسل)، والبريد الإلكتروني (بريد المرسل الإلكتروني)، ومحتوى الرسالة:

هذا كل شيء! تحقق من عنوان To Email المضمن في قالبك، ويجب أن تكون قد تلقيت بريدك الإلكتروني هناك بالفعل. يمكنك أيضًا اللعب بميزة Test it أو playground في الزاوية العلوية اليمنى من القالب إذا أردت.

الخلاصة التقنية

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

نصائح إضافية وموارد مفيدة

يمكنك العثور على الكود الكامل لهذا المقال في حسابي على GitHub. لا تتردد في مشاركة هذا المقال إذا وجدته مفيدًا. شكرًا لقراءتك!