إرسال رسائل البريد الإلكتروني مباشرة من ل frontend

مقدمة :

فهاد المقال غانشوفو كيفاش ترسل رسائل البريد الألكتروني مباشرة من ل Frontend بدون الحاجة لل Backend, بإستخدام javascript و EmailJS .

شناهو EmailJS ؟

هي منصة كاتمكنك من أنك ترسل رسائل البريد الإلكتروني مباشرة من ل Frontend بلا ما تحتاج ل Backend. المنصة عندها واجهة مستخدم بسيطة و سهلة, بالإضافة انه بإمكانك تقاد نموذج Template للرسالة و كذلك الرد الألي. و الرائع هو ان المنصة كاتقدم Plan مجاني هو اللي غانستخدمو.

فاش غانحتاجها ؟

العديد من المواقع مكاتحتاش ل Backend بحال مواقع portfolio اللي كاتكون المهمة ديالها تشرح شي خدمة أو منتوج أو portfolio ديالك انت كمبرمج اللي كاتبين فيه المهارات ديالك و .... فهاد المواقع ضروري خاص contact form اللي من خلالها إقدرو الناس يتواصلو مع صاحب الموقع. داكشي علاش بدل ما تقاد backend اللي تعالج دوك الرسائل, بإمكانك تستعمل هاد المنصة بكل سهولة.

شرح EmailJS :

• إنشاء مشروع جديد بإستخدام create-react-app

فهاد الشرح غانستعمل React. غانبداو بإنشاء مشروع جديد بإستخدام create-react-app , فتح terminal و كتب.

npx create-react-app contact-form

غايتم إنشاء مجلد بإسم contact-form و فالداخل ديالو غاتلقا جميع ملفات create-react-app. الأن غاندخلو لهاد المجلد من terminal بإستخدام هاد الأمر.

cd contact-form

و غانقومو بتثبيت ل package ديال EmailJS

npm install emailjs-com

ثم غانفتو المجلد في text editor , انا كانستخدم VScode غانستخدم هاد الأمر.

code .

غاتلقا ملفات بحال هاد الشكل :

الملف اللي غانخدمو فيه هو ملف app.js. دخل ليه و مسح داكشي اللي فيه و حط هاد ل code 👇

import React from "react";

function App() {
  return (
    <div className="App">

    </div>
  );
}
export default App;

• فتح حساب في منصة EmailJS

الأن غانمشيو لموقع EmailJS و غانفتحو حساب, كيف ما قلت لكم كاين Plan مجاني. ملي غاتفتح حساب غايرسلوليك رسالة في البريد الإلكتروني ديالك باش يتأكدو من الصحة ديالو. من بعد ملي تسجل الدخول غاتلقى صفحة بحال هادي 👇

الأن ضغط على Add New Service و ختار Gmail.

من بعد غاطلع ليك واحد النافذة ضغط على Connect Account. غاتحل نافذة ديال google فيها الحسابات اللي عندك, ختار الحساب باش بغيتي ترسل الرسائل. ثم ختار Send email on your behalf و وافق على الشروط. ملي غايتم الربط ديال الحساب ديالك بنجاح غايباليك بحال هكا .

إنشاء ل contact form :

هادي هي Documentation ديال EmailJS إلى بغيتي تزيد تعمق.

الأن غانمشيو لملف app.js.

ل code الخاص بال contact form غايكون على هاد الشكل:

<form ref={form} onSubmit={sendEmail}>
  <label>Name</label>
  <input type="text" name="user_name" required />
  <label>Email</label>
  <input type="email" name="user_email" required />
  <label>Message</label>
  <textarea name="message" required />
  <input type="submit" value="Send" />
</form>

• عندنا 2 input و 1 textarea عطيتهم required باش ماتمشي ل form حتى إعمر كلشي.

• ل form كاتعطينا event سميتو onSubmit كايتفعل ملي كايتم الضغط على زر الإرسال submit button.هاد ل event عطيتو function سميتها sendEmail هي اللي غاتكفل بإرسال المعلومات ل EmailJS

• ref هو Hook كايعطيك نسخة قابلة للتعديل من العنصر اللي تعطاليه. بإمكانك تقرا عليه أكثر هنا

ل function اللي عطيناها لل event ديال onSubmit غاتكون على هاد الشكل :

const sendEmail = (e) => {
  e.preventDefault();
  emailjs.sendForm(
    "YOUR_SERVICE_ID",
    "YOUR_TEMPLATE_ID",
    form.current,
    "YOUR_PUBLIC_KEY"
 ). then(
    result => console.log(result.text),
    error => console.log(error.text)
  );
};

• ()e.preventDefault : ستعملناها باش نمنعو الصفحة من إعادة التحميل.

• YOUR_SERVICE_ID : غاتلقاه مكتوب على Gmail اللي ضفتي.

• YOUR_TEMPLATE_ID : هي template اللي بغيتي تخدم بها . غانشرحوها من بعد.

• YOUR_PUBLIC_KEY : غاتمشي ل Account ثم General غاتلقاها ثم.

• form.current : هي ل form اللي غانرسلو.

ملي تبغي تحط هادشي في الموقع ديالك خاصك تنشئ ملف env. وتحط فيه YOUR_SERVICE_ID و YOUR_TEMPLATE_ID و كذلك YOUR_PUBLIC_KEY .

في الأخير ل code غايكون على هاد الشكل

import React, { useRef } from "react";
import emailjs from "emailjs-com";
function App() {
   const form = useRef();
  const sendEmail = (e) => {
    e.preventDefault();
    emailjs.sendForm(
       "YOUR_SERVICE_ID",
       "YOUR_TEMPLATE_ID",
       form.current,
       "YOUR_PUBLIC_KEY"
    ). then(
       result => console.log(result.text),
      error => console.log(error.text)
    );
  };
  return (
  <div className="App">
    <form ref={form} onSubmit={sendEmail}>
      <label>Name</label>
       <input type="text" name="user_name" />
       <label>Email</label>
       <input type="email" name="user_email" />
      <label>Message</label>
        <textarea name="message" />
       <input type="submit" value="Send" />
    </form>
  </div>
  );
export default App;

Email templates

دبا غانقادو template اللي غانستخدمو. غانقادو 2 . اللولة هي اللي غاتوصلك فيها الرسالة اللي سافطليك شي واحد. و الثانية هي رد تلقائي كايتم إرساله للمرسل باش يعرف باللي توصلتي بالرسالة.

• template الأولى : غاتمشي للحساب ديالك في EmailJS في القائمة اللي على اليسار ضغط على Email Templates ثم ضغط على Create New Template.غاطلع لك هاد الصفحة :

لاحظ دوك المعقوفات {{to_name}} و {{from_name}} و {{message}} , غايتم إستبدالهم بالمعلومات اللي جاو من ل form, لذلك خاصك ما تمسحهمش.

• template الثانية : ملي تقاد template الأولى كيف بغيتي , ضغط على Auto-Reply و قاد الرسالة اللي بغيتي يتم إرسالها كرد تلقائي. خاصك تضغط على الخيار اللي مكتوب فيه Enable Auto-Reply Form

النهاية :

الأن بإمكانك تستقبل الرسائل مباشرة من ل frontend .

** بالصحة و الراحة.**