نحوه ارسال ایمیل به طور مستقیم از وب سایت React: یک آموزش گام به گام

آیا به دنبال این هستید که مشتریان یا مشتریان بتوانند مستقیماً از وب سایت شما با شما در تماس باشند؟ افزودن یک ویژگی ارسال پیام می تواند این کار را انجام دهد! در این آموزش آسان برای دنبال کردن، به شما نشان خواهم داد که چگونه می توانید یک سیستم پیام رسانی را با استفاده از EmailJS در وب سایت خود ادغام کنید. با استفاده از این ویژگی، کنترل بهتر و ارتباط راحت تری با کاربران و بازدیدکنندگان خود خواهید داشت. چه در حال ساخت یک وب سایت نمونه کارها یا یک صفحه فرود کسب و کار باشید، این آموزش برای شما مناسب است!
قبل از اینکه به جنبه فنی این راهنما بپردازیم، اجازه دهید به سرعت EmailJS را به شما معرفی کنم.

EmailJS چیست؟

EmailJS ابزار قدرتمندی است که می تواند با استفاده از یک API ساده، ارتباط بین وب سایت شما و کاربران یا مشتریان شما را با کد سمت کلاینت ساده کند.
از سرویس های مختلفی مانند جیمیل، اوت لوک، یاهو به پشتیبانی می کند پیام های ارسال شده از وب سایت خود را دریافت کنید. با EmailJS می توانید به راحتی ویژگی های ارسال ایمیل را در وب سایت خود ادغام کنید.

چگونه یک ویژگی پیام رسانی را با استفاده از EmailJS به وب سایت React خود اضافه کنید

مرحله 1: برای یک حساب کاربری در EmailJS ثبت نام کنید

• برای افزودن یک ویژگی پیام رسانی به وب سایت React خود با استفاده از EmailJS، اولین قدم این است که برای یک حساب کاربری در وب سایت خود ثبت نام کنید تا بتوانید به طور کامل از خدمات آنها استفاده کنید. برای ثبت نام اینجا کلیک کنید.

• پس از اتمام ثبت نام، روی تب خدمات ایمیل در منوی ناوبری کلیک کنید، سپس روی افزودن سرویس جدید کلیک کنید.

• شما باید سرویس ایمیلی را انتخاب کنید که می خواهید از آن برای دریافت پیام های ارسال شده از وب سایت خود استفاده کنید. این می تواند ایمیل شخصی یا ایمیل شرکت شما باشد. در این آموزش با جیمیل همراه خواهم شد.

• پس از انتخاب یک سرویس ایمیل، یک تب جدید به شما نشان داده می شود که در آن خواهید دید نام و شناسه خدمات. شما می توانید نام سرویس ایمیل را متناسب با پروژه خود سفارشی کنید. شناسه سرویس خود را کپی کنید و آن را در جایی ذخیره کنید، من دفترچه یادداشت را برای دسترسی آسان توصیه می کنم. همچنین باید حساب ایمیلی را که می خواهید برای پروژه استفاده کنید متصل کنید. روی دکمه اتصال به رنگ آبی کلیک کنید و مراحل قانونی که به شما نشان داده می شود را دنبال کنید.

• هنگامی که حساب ایمیل خود را با موفقیت وصل کردید، روی “ایجاد سرویس” کلیک کنید. با استفاده از جیمیل، می توانید روزانه تا 500 پیام از وب سایت دریافت کنید.

مرحله 2: بسته سرویس را با استفاده از NPM نصب کنید

• پس از ایجاد موفقیت آمیز حساب کاربری در وب سایت رسمی EmailJS، باید بسته سرویس را در پروژه React خود نصب کنید. برای نصب EmailJS از طریق NPM، به سادگی دستور زیر را در ترمینال IDE خود اجرا کنید:

npm install @emailjs/browser --save

• پس از اتمام نصب، شما باید وارد کردن کتابخانه emailjs با استفاده از نحو ماژول ES6 از ماژول ‘@emailjs/browser’. یک جزء EmailForm ایجاد کنید و کتابخانه emailjs را با استفاده از کد زیر وارد کنید

import emailjs from '@emailjs/browser';

شما نیز نیاز دارید فایل CSS ایمیل JS را وارد کنید در کامپوننت با استفاده از کد زیر…

import './EmailForm.css';

مرحله 4: رابط کاربری فرم را با استفاده از JSX ایجاد کنید

• مورد بعدی که باید روی آن کار کنیم، رابط کاربری فرمی است که کاربر با آن ارتباط برقرار می کند و از آن پیام می فرستد. ما UI فرم را با استفاده از JSX می سازیم. اگر با ساخت فرم ها در react آشنایی ندارید، نگران نباشید، شبیه نحوه ساخت فرم ها با HTML است. در زیر قطعه ای از فرم با استفاده از JSX آمده است.

export const EmailForm = () => {
return (

<form>
<input name="user_email" type="email" placeholder="Email" required />
<textarea name="user_message" placeholder="Write message..." required ></textarea>
<button type="submit">Send Message</button>
</form>

)}

• قطعه کد بالا یک فرم اساسی است که ایمیل کاربر را جمع آوری می کند و همچنین به کاربر اجازه می دهد پیام های خود را مستقیماً در داخل آن بنویسد. textarea. اما به همین جا ختم نمی شود. باید فرم را کاربردی کنیم.

ما باید تابعی را در کامپوننت تعریف کنیم که ارسال فرم را مدیریت کند و پیام را با استفاده از کد زیر ارسال کند

const sendEmail = (e) => {
e.preventDefault();
emailjs.sendForm('service_ID', 'template_ID', form.current, 'public_key')
    .then((result) => {
        console.log(result.text);
        console.log("message sent!")
    }, (error) => {
        console.log(error.text);
        console.log("error sending message, try again!")
    });
};

در این کد، تابع “sendEmail” از رفتار پیش فرض ارسال فرم با استفاده از “e.preventDefault()” جلوگیری می کند. سپس از کتابخانه emailJs استفاده می‌کند تا داده‌های فرم را به آدرس ایمیلی که قبلاً ضمیمه کردیم ارسال کند، که توسط service_ID، template_ID، و کلید عمومی در آرگومان های تابع “sendForm”. این تابع همچنین شامل دو گزارش کنسول است که نتیجه و خطاهای رخ داده را ثبت می کند.

اگر service_ID خود را طبق دستور قبلی کپی کرده اید، آن را در جایی که service_ID در تابع sendForm داریم قرار دهید. شما همچنین به یک template_ID نیاز دارید که می توانید آن را از داشبورد حساب ایمیلJS خود دریافت کنید.

روی تب Email templates کلیک کنید، به تنظیمات بروید، کل template_ID را کپی کنید. این یک مثال “template_abcdfg” است. آن را در جایی که template_ID داریم در تابع “sendForm” قرار دهید.

برای به دست آوردن کلید عمومی، در داشبورد خود، روی تب Account کلیک کنید، کلید عمومی را کپی کنید و آن را در جایی که ‘کلید عمومی’ در کد داریم، قرار دهید.

برای ارسال فرم باید یک مرجع تعریف کنید.

const form = useRef();

در نهایت، می توانید یک کنترل کننده onSubmit را به تگ بازکننده فرم اضافه کنید که تابع “sendEmail” را فراخوانی می کند:

<form ref={form} onSubmit={sendEmail}>
  ...
</form>

در این کد از ویژگی “ref” برای ایجاد ارجاع به فرم استفاده می شود که می تواند به عنوان آرگومان به تابع “sendForm” ارسال شود. ویژگی “onSubmit” برای فراخوانی تابع “sendEmail” هنگام ارسال فرم استفاده می شود.

قطعه کد کامل

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';
import './EmailForm.css';

export const EmailForm = () => {
    const form = useRef();
    const sendEmail = (e) => {
        e.preventDefault();

        emailjs.sendForm('service_ID', 'template_ID', form.current, 'public_key')
            .then((result) => {
                console.log(result.text);
                console.log("message sent!")
            }, (error) => {
                console.log(error.text);
                console.log("error sending message, try again!")
            });
        };
return (

<form ref={form} onSubmit={sendEmail}>
<input name="user_email" type="email" placeholder="Email" required />
<textarea name="user_message" placeholder="Write message..." required ></textarea>
<button type="submit">Send Message</button>
</form>

)};

در نتیجه، ارسال ایمیل به طور مستقیم از یک وب سایت یک ویژگی مفید برای بسیاری از وب سایت ها است. در این آموزش، نحوه انجام این کار را با استفاده از کتابخانه ای به نام بررسی کرده ایم ایمیل JS در یک برنامه React با انجام مراحل این آموزش می توانید به راحتی از وب سایت خود ایمیل ارسال کنید بدون اینکه نگران جزئیات پیچیده باشید. با EmailJS، ارسال ایمیل بسیار آسان است و می‌توانید بدون نگرانی در مورد پیچیدگی‌های ارسال ایمیل، روی ساخت برنامه‌های عالی تمرکز کنید.