কিভাবে আপনার Vue.js অ্যাপ্লিকেশন থেকে EmailJS এর ​​মাধ্যমে ইমেল পাঠাবেন

কিছু দিন আগে আমি একটি সাধারণ Vue প্রকল্পে কাজ করার সিদ্ধান্ত নিয়েছি এবং আমি তৈরি করা একটি পরিচিতির মাধ্যমে ইমেল পাঠাতে হবে। প্রতিবার কেউ আমার যোগাযোগের ফর্ম পূরণ করলে আমি একটি স্বয়ংক্রিয় ইমেল পেতে চাই।

তাই আমি অনুসন্ধান করতে পেরেছি এবং ইমেলজেসে হোঁচট খেয়েছি। আমি এই নিবন্ধটি লেখার সিদ্ধান্ত নিয়েছি কারণ আমি অনুভব করেছি যে তাদের ডকুমেন্টেশন দুর্দান্ত এবং এটি ব্যবহার করা সত্যিই সহজ। আমি আশা করি এটি সেখানে কাউকে সাহায্য করবে :)

আসুন শুরু করা যাক!

এই নিবন্ধে, আমি আপনাকে দেখাব কিভাবে আপনার Vuejs অ্যাপ্লিকেশন থেকে ইমেল পাঠাতে EmailJS ব্যবহার করতে হয়।

আমি চালিয়ে যাওয়ার আগে আমি ধরে নিচ্ছি যে আপনি আপনার কম্পিউটারে Vue CLI ইনস্টল করেছেন কারণ আমি এটির সাথে একটি মিনি ডেমো প্রকল্প তৈরি করব। যদি না হয়, আপনি এখানে কিভাবে এটি ইনস্টল করবেন তা পরীক্ষা করতে চাইতে পারেন।

আমরা এই কমান্ডটি ব্যবহার করে প্রকল্পটি তৈরি করব:

vue create vue-emailjs-demo

তারপরে আমাদেরকে একটি ডিফল্ট প্রিসেট বাছাই করার বা ম্যানুয়ালি বৈশিষ্ট্যগুলি নির্বাচন করার বিকল্পের সাথে অনুরোধ করা হবে। default নির্বাচন করুন .

একটি নতুন প্রকল্প ডিরেক্টরি তৈরি করা হবে, এবং আপনি এই কমান্ডটি ব্যবহার করে এটিতে নেভিগেট করতে পারেন:

cd vue-emailjs-demo

ইমেলজেএস কিভাবে ইনস্টল করবেন

EmailJS আপনাকে শুধুমাত্র ক্লায়েন্ট সাইড প্রযুক্তি ব্যবহার করে ইমেল পাঠাতে সাহায্য করে। কোনো সার্ভারের প্রয়োজন নেই - শুধুমাত্র EmailJS কে সমর্থিত ইমেল পরিষেবাগুলির একটিতে সংযুক্ত করুন, একটি ইমেল টেমপ্লেট তৈরি করুন এবং একটি ইমেল ট্রিগার করতে তাদের JavaScript লাইব্রেরি ব্যবহার করুন৷

আমরা আমাদের কোড লেখা শুরু করার আগে, আপনি একটি EmailJS অ্যাকাউন্ট তৈরি করতে চাইবেন। আপনার অ্যাকাউন্টের মাধ্যমে, আপনি ইমেল টেমপ্লেট তৈরি করতে পারবেন এবং আপনার স্বয়ংক্রিয় ইমেলগুলি যেতে চান এমন ইমেল বেছে নিতে পারবেন।

একবার আপনি আপনার নতুন অ্যাকাউন্টে সাইন ইন করলে, আপনাকে ড্যাশবোর্ডে পাঠানো হবে৷

কিভাবে ইমেল টেমপ্লেট তৈরি করবেন

ইমেল টেমপ্লেটগুলি ঐচ্ছিকভাবে প্রায় যেকোনো ক্ষেত্রে গতিশীল ভেরিয়েবল ধারণ করতে পারে (উদাহরণস্বরূপ, বিষয়, বিষয়বস্তু, TO ইমেল, নাম থেকে, ইত্যাদি)। তারা জাভাস্ক্রিপ্ট কল থেকে জনবহুল হয়. আমরা শীঘ্রই এটি পেতে হবে.

প্রথমে একটি ইমেল পরিষেবা যোগ করা যাক। আমি জিমেইল নির্বাচন করেছি কিন্তু আপনি আপনার প্রয়োজনে সবচেয়ে উপযুক্ত যে কোনো পরিষেবা নির্বাচন করতে পারবেন।

এছাড়াও, আপনি যদি আপনার Service ID-এর জন্য একটি নাম ভাবা শুরু করতে না চান , অনুসন্ধান আইকনে আলতো চাপুন এবং এটি আপনার জন্য স্বয়ংক্রিয়ভাবে তৈরি হবে।

এর পরে, আমরা আমাদের ইমেল টেমপ্লেট তৈরি করব। টেমপ্লেট পৃষ্ঠা নেভিগেট করুন. একটি নতুন টেমপ্লেট তৈরি করুন। আমাদের ইমেল টেমপ্লেট আমাদের ইমেলের বিষয় নির্ধারণ করবে, এতে কোন বিষয়বস্তু থাকবে, কোথায় পাঠাতে হবে ইত্যাদি।

{{from_name}} এর মত উপরে দেখানো ডাবল কোঁকড়া ধনুর্বন্ধনীর সেট ভেরিয়েবল হয় যখন একজন ব্যবহারকারী আমাদের ফর্মটি পূরণ করেন, তখন আমরা এই ভেরিয়েবলগুলি ব্যবহার করে ইমেলজেএস-এ সেই তথ্য পাঠাব৷

নীচে আমাদের টেমপ্লেটে উপলব্ধ ক্ষেত্রগুলির সামান্য ব্যাখ্যা রয়েছে:

• বিষয়: ইমেইলের বিষয়।
• সামগ্রী: ইমেইলের মূল অংশ। আমরা এখানে ব্যবহারকারীর বার্তা, তাদের নাম এবং তাদের ফেরত ঠিকানা পাঠাতে যাচ্ছি।
• ইমেল করতে: এই ইমেলের গন্তব্য রয়েছে।
• নাম থেকে : এটি ঐচ্ছিক। তবে আপনি সেখানে আপনার নাম লিখতে পারেন।
• ইমেল থেকে: প্রেরকের ইমেল ঠিকানাটি প্রাপকের জন্য প্রদর্শিত হবে। যদি ডিফল্ট ইমেল ঠিকানা চেকবক্স সক্রিয় থাকে তাহলে EmailJS ব্যবহার করা ইমেল পরিষেবার সাথে যুক্ত ইমেল ঠিকানা ব্যবহার করবে।
• উত্তর দিন: ইমেল ঠিকানা সেট করে যেখানে উত্তর পাঠানো হবে।
• BCC এবং CC: এই দুটি ক্ষেত্র সাধারণত আপনার তালিকাভুক্ত প্রত্যেককে বার্তার একটি অনুলিপি পাঠাতে ব্যবহৃত হয়। Reply To , BCC and CC এই নির্দেশিকাটিতে ব্যবহার করা হবে না কারণ আমরা এটিকে যতটা সম্ভব সহজ রাখতে চাই। আপনার আরও তথ্যের প্রয়োজন হলে, আপনি এখানে ইমেইলজেএস ডক্স চেক করতে পারেন।

দ্রষ্টব্য:এই নিবন্ধের এক পর্যায়ে, আমরা Service ID ব্যবহার করব এবং Template ID . আমাদের একটি User ID প্রয়োজন হবে . আপনি আপনার User ID খুঁজে পেতে পারেন একীকরণে ড্যাশবোর্ডের অংশ। আপনি আপনার ক্লিপবোর্ডে বিশদগুলি অনুলিপি করতে পারেন এবং প্রয়োজনে সেগুলি আটকাতে পারেন৷

আপনার অ্যাপ্লিকেশনে কিভাবে ইমেলজেএস ইনস্টল করবেন

এখন কোডে চলে যাচ্ছেন :) আপনার অ্যাপ্লিকেশনে EmailJS ইনস্টল করতে, এই কমান্ডটি ব্যবহার করুন:

npm install emailjs-com --save

আমরা একটি খুব সাধারণ যোগাযোগ ফর্ম থেকে ইমেল পাঠাতে যাচ্ছি। এটি সহ ডেটা সংগ্রহ করবে:নাম (প্রেরকের), ইমেল (প্রেরকের), এবং বার্তা সামগ্রী। সহজ জিনিস!

আপনি HelloWorld.Vue সম্পাদনা করতে পারেন উপাদান যা আমাদের জন্য স্বয়ংক্রিয়ভাবে তৈরি হয়েছিল যখন আমরা Vue CLI ব্যবহার করি বা আপনি ContactForm.vue নামে একটি নতুন উপাদান তৈরি করতে পারেন . আমি পরেরটি করব৷

নীচে আমরা যোগাযোগ ফর্ম উপাদান তৈরি করব, ContactForm.vue .

চলুন শুরু করা যাক template দিয়ে :

<template>
    <div class="container">
        <form>
          <label>Name</label>
          <input 
            type="text" 
            v-model="name"
            name="name"
            placeholder="Your Name"
          >
          <label>Email</label>
          <input 
            type="email" 
            v-model="email"
            name="email"
            placeholder="Your Email"
            >
          <label>Message</label>
          <textarea 
            name="message"
            v-model="message"
            cols="30" rows="5"
            placeholder="Message">
          </textarea>
          
          <input type="submit" value="Send">
        </form>
    </div>
</template>

আমাদের মার্কআপ ব্যাখ্যা করা

আমি আগে উল্লেখ করেছি, আমরা একটি খুব সাধারণ যোগাযোগ ফর্ম থেকে ইমেল পাঠাব। তাই একটি div তৈরি করুন উপাদান যা আমাদের ফর্ম বিষয়বস্তু ধারণ করবে। আমরা আমাদের ফর্মে স্টাইল যোগ করব, তাই একটি ক্লাস 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 এ খুলুন এবং আপনার ফর্মটি দেখতে হবে:

আমরা sendEmail নামে একটি পদ্ধতিও তৈরি করব যা আমাদের ডেটা জমা দেওয়ার কাজ পরিচালনা করে। কিন্তু আমরা তা করার আগে, আমাদের emailjs আমদানি করতে হবে আমাদের ফাইলে।

script-এর অধীনে নিচের লাইনটি যোগ করুন :

import emailjs from 'emailjs-com';

আমাদের script-এ প্রয়োজনীয় কোডের বাকি অংশ নীচে দেওয়া হল :

<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 = ''
    },
  }
}
</script>

এই কোডটি কি করছে

আমি একটি try...catch ব্যবহার করেছি উপরে কিন্তু আপনাকে অগত্যা এটি ব্যবহার করতে হবে না। মনে রাখবেন যখন আমি আপনাকে করতে বলেছিলাম৷ আপনার সার্ভিস আইডি, টেমপ্লেট আইডি এবং ইউজার আইডির বিশদ আপনার ক্লিপবোর্ডে অনুলিপি করুন এবং সেগুলি যখন প্রয়োজন হবে তখন পেস্ট করবেন? ওয়েল আপনি একেবারে এখন তাদের প্রয়োজন! তাই স্নিপেটের সেই অংশটিকে আপনার প্রকৃত বিবরণ দিয়ে প্রতিস্থাপন করুন।

emailjs.sendForm() সার্ভিস আইডি, টেমপ্লেট আইডি, ইউজার আইডি এবং ফর্ম ডেটা পাস করার পরে আমরা কীভাবে ইমেলজেএস-এ ডেটা পাঠাই যা sendEmail()-এ পাস করা হয়েছিল . আমরা console.log() catch() এর সাথে যে কোনো ত্রুটির সম্মুখীন হই ব্লক

এটা মনে রাখা গুরুত্বপূর্ণ যে sendForm() নির্দিষ্ট ইমেল টেমপ্লেট এবং পাস করা ফর্ম ডেটার উপর ভিত্তি করে একটি ইমেল পাঠায়। তাই নিশ্চিত করুন যে আপনার ফর্ম ইনপুট নামটি আপনার ইমেলজেএস টেমপ্লেটের ভেরিয়েবলের মতোই৷

নীচে (প্রেরকের নাম), ইমেল (প্রেরকের), এবং বার্তা সামগ্রী সহ আমার পরিবর্তিত ইমেলজেএস টেমপ্লেট।

এটাই!

To Email চেক করুন ঠিকানা আপনার টেমপ্লেটে অন্তর্ভুক্ত করা হয়েছে এবং আপনার ইমেল ইতিমধ্যেই সেখানে পাঠানো উচিত। আপনি এটি পরীক্ষা করুন এর সাথেও খেলতে পারেন৷ অথবা খেলার মাঠ আপনি চাইলে টেমপ্লেটের উপরের-ডান কোণে বৈশিষ্ট্য।

GitHub রেপো

আপনি আমার GitHub অ্যাকাউন্টে এই নিবন্ধটির কোড খুঁজে পেতে পারেন।

আপনি যদি এটি সহায়ক বলে মনে করেন তবে এই নিবন্ধটি ভাগ করতে দ্বিধা করবেন না। পড়ার জন্য ধন্যবাদ!