আমি gầnে একটি ক্লায়েন্টের জন্য একটি সিম্পল ল্যান্ডিং পেজ ওয়েবসাইট বানাচ্ছিলাম যারা তাদের ওয়েবসাইটের মাধ্যমে ইমেইল পেতে চান তাদের ইমেইল শেয়ার না করে।
ইমানদারিতে, আমি কখনো নিজে এই ফাংশনালিটি ইমপ্লিমেন্ট করার চেষ্টা করিনি। আমি সবসময় একটি সিম্পল "Contact Us" বাটন ব্যবহার করতাম একটি অ্যাঙ্কর ট্যাগ এবং mailto এর href অ্যাট্রিবিউটে এরকম:
<button> <a href="mailto:myemail@example.com">Contact Me</a> </button> কিন্তু এই পদ্ধতির দুটি অসুবিধা আছে:
- এটি উভয় পক্ষকে, মেসেজ পাঠাতে চায় ইউজার এবং সেটি রিসিভ করতে চায় সাইট মালিক, তাদের ইমেইল একে অপরের সাথে শেয়ার করতে বাধ্য করে। যদিও এটি কিছুর জন্য ঠিক, গোপনীয়তা-সচেতন ব্যক্তিদের জন্য এটি আদর্শ নয়।
- সাইট ভিজিটরের জন্য, লিংকে ক্লিক করলে তাদের ডিভাইসে ডিফল্ট মেইল প্রোগ্রাম খুলতে বাধ্য করে, এবং এটি-frustrating হতে পারে। যদি তারা পাবলিক কম্পিউটার ব্যবহার করে? যদি তারা লগড ইন না থাকে? যদি তারা সিম্পলি তাদের মেইল প্রোগ্রাম ব্যবহার করতে না চায়?
হ্যাঁ, টেকনিক্যালি তারা শুধু রিসিপিয়েন্টের ইমেইল অ্যাড্রেস নিয়ে ব্রাউজার বা যেখানে লগড ইন আছে সেখান থেকে মেসেজ পাঠাতে পারেন। কিন্তু এগুলো সব এক্সট্রা স্টেপ এবং বাধা যা ইউজারদের মেসেজ পাঠানোর নিরুৎসাহিত করতে পারে এবং বিজনেস পটেনশিয়াল ফিডব্যাক বা সুযোগ হারাতে পারে।
এই কারণে, আমরা একটি ইমেইল ফর্ম বেছে নিলাম যেখান থেকে ইউজার সিম্পলি তাদের মেসেজ লিখে সাবমিট ক্লিক করলে, সাইট মালিকের কাছে ইমেইল চলে যাবে ওয়েবসাইট ছাড়া ছাড়া।
একটি দ্রুত গুগল সার্চ দেখায় থার্ড-পার্টি টুলস/উইডগেট আছে যা আপনি ওয়েবসাইটে এম্বেড করতে পারেন, কিন্তু অধিকাংশ ব্র্যান্ডেড এবং পূর্ণ কাস্টোমাইজেশনের জন্য পেইড সাবস্ক্রিপশন দরকার।
এবং যদি আপনি ওয়ার্ডপ্রেসের মতো একটি CMS ব্যবহার না করেন যেটিতে বিল্ট-ইন প্লাগইন আছে যা এটা করতে পারে, তবে এটি একটি অসুবিধাজনক রিকারিং কস্ট।
আমি বদলে সেটি নিজে কোড করার সিদ্ধান্ত নিলাম যাতে আমার পূর্ণ কন্ট্রোল থাকে।
এই গাইডের উদ্দেশ্যে আমি HTML এবং AWS সার্ভিসেস ব্যবহার করে সেই ফাংশনালিটি ইমপ্লিমেন্ট করার ধাপগুলো পুনরাবৃত্তি করব।
HTML ফর্ম
এখানে আমি সিম্পল রাখব এবং বেসিক HTML ফর্ম ব্যবহার করব কোনো CSS ছাড়া, শুধু আমাদের কাঙ্খিত ফাংশনালিটি টেস্ট করার জন্য।
<h2>Contact Us</h2> <form> <label for="name">Name:</label> <input name="name" type="text"/><br/><br/> <label for="email">Email:</label> <input name="email" type="email"/><br/><br/> <label for="name">Message:</label> <textarea name="message"></textarea><br/><br/> <input type="submit"/> <div> <p id="result-text"></p> </div> </form> 
এখন আমরা সাবমিট ফাংশনালিটি জাভাস্ক্রিপ্ট দিয়ে হ্যান্ডেল করতে চাই।
const form = document.querySelector('form') form.addEventListener('submit', event => { // ফর্ম সাবমিশন থেকে পেজ রিফ্রেশ বাধা দিন event.preventDefault() const { name, email, message } = event.target console.log('Name: ', name.value) console.log('email: ', email.value) console.log('Message: ', message.value) }) এই পয়েন্টে, আমাদের একটি ফর্ম আছে যা ইউজার থেকে ইনপুট নেয় এবং জাভাস্ক্রিপ্ট কোড যা শুধু রেজাল্ট কনসোলে দেখাচ্ছে।
আমরা এটা এই 상태로 রেখে দিতে পারি এবং ব্যাকএন্ড সার্ভিসগুলোতে কাজ শুরু করতে পারি যা ফর্ম ডেটা রিসিভ করবে এবং সেই ডেটা দিয়ে ইমেইল পাঠাবে।
ব্যাকএন্ড ওভারভিউ
AWS-এ ডুবিয়ে পড়ি এবং কোন সার্ভিসগুলো ব্যবহার করব এবং কীভাবে।
টাইটেলে উল্লিখিতleet, আমরা AWS Lambda এবং Simple Email Service (SES) ব্যবহার করব। SES একটি সার্ভারলেস মেসেজিং সার্ভিস যা ইমেইল মেসেজ পাঠাতে সক্ষম যখন আহ্বান করা হয়। AWS Lambda আপনাকে সার্ভার-সাইড কোড লিখতে দেয় যা ইভেন্টের প্রতিক্রিয়া হিসেবে এক্সিকিউট হয়।
আমরা API Gateway-ও ব্যবহার করব যা আমাদের Lambda ফাংশনকে HTTP-এর মাধ্যমে আহ্বান করতে সক্ষম করে।
এই কেসে, যখন আমাদের ফর্ম সাবমিট হবে, নিচের ওয়ার্কফ্লো হবে:
- আমাদের ব্রাউজার (জাভাস্ক্রিপ্ট) একটি পোস্ট রিকোয়েস্ট করবে, ফর্ম ডেটা রিকোয়েস্ট বডিতে রেখে, AWS API Gateway দ্বারা স্পেসিফাইড একটি এন্ডপয়েন্ট URL-এ
- API Gateway এই রিকোয়েস্টটি ভ্যালিডেট করবে। তারপর এটি Lambda ফাংশনটি ট্রিগার করবে যা একটি ইভেন্ট প্যারামিটার এক্সেপ্ট করে। API Gateway ফর্ম ডেটাটি ইভেন্ট প্যারামিটারের বডি প্রোপার্টিতে রাখবে।
- আমাদের Lambda ফাংশন ইভেন্ট বডি থেকে ডেটা এক্সট্রাক্ট করবে এবং আমরা এই ডেটা ব্যবহার করব ইমেইল বডি এবং এর রিসিপিয়েন্ট বানাতে। আমাদের ফাংশনটি AWS SDK ব্যবহার করে SES-কে ইমেইল ডেটার সাথে আহ্বান করবে।
- একবার SES sendMail রিকোয়েস্ট পেলে, এটি ইমেইল ডেটাকে একটি আসল টেক্সট ইমেইলে রূপান্তর করে এবং AWS-এর নিজস্ব মেইল সার্ভারের মাধ্যমে রিসিপিয়েন্টের কাছে পাঠায়।
ইমেইল পাঠানো হলে, আমাদের ব্রাউজার একটি রেসপন্স পাবে স্ট্যাটাস কোড ২০০ এবং সাকসেস মেসেজের সাথে। যদি AWS ক্লাউডে কোনো ধাপ ফেইল করে, রেসপন্সে ৫০০ স্ট্যাটাস কোড থাকবে।
স্টেপ ১: SES সেট আপ করার পদ্ধতি
আমরা আসলে প্রতিটি ধাপ রিভার্স অর্ডারে সেট আপ করব, SES-থেকে শুরু করে, যা সহজ।
আপনার AWS কনসোলে, SES সার্ভিসে যান —> তারপর সাইড মেনুতে Email Addresses-এ ক্লিক করুন —> তারপর "Verify a New Email Address" বাটনে ক্লিক করুন।
খুলা ডায়ালগে, সেই ইমেইল অ্যাড্রেস লিখুন যেটি আপনি চান SES সার্ভিস সেন্ডার হিসেবে রাখবে ইমেইল পাঠাতে সময়।
এটি আপনার দেওয়া ইমেইল অ্যাড্রেসে একটি ইমেইল পাঠাবে একটি লিংক ক্লিক করে ভেরিফাই করার জন্য। এটিই.aws জানার পদ্ধতি যে ইমেইল মালিক তার ইমেইল অ্যাড্রেস সেন্ডার অ্যাড্রেস হিসেবে ব্যবহার করার সম্মতি দিয়েছেন।
আপনি ইমেইল ভেরিফাই না করার পর্যন্ত, SES ইমেইল ড্যাশবোর্ড ভেরিফিকেশন স্ট্যাটাস পেন্ডিং রাখবে।
একবার ইমেইল মালিক AWS থেকে পাওয়া ইমেইলটি খুলে ভেরিফিকেশন লিংকে ক্লিক করলে, ভেরিফিকেশন স্ট্যাটাস verified-এ চেঞ্জ হবে (পেজ রিফ্রেশ করলে পরিবর্তন দেখতে পাবেন)।
এটিই SES-র জন্য আপনার করতে হবে। আপনি অপশনালি সার্ভিসটি টেস্ট করতে পারেন আপনার ভেরিফাইড ইমেইল লিস্টে সিলেক্ট করে "Send a Test Email" বাটনে ক্লিক করে। এটি আপনাকে একটি রিসিপিয়েন্টের ইমেইল অ্যাড্রেস, সাবজেক্ট, এবং মেসেজ দিয়ে পাঠাতে দেবে।
পাঠানো ইমেইলটি AWS সার্ভার দ্বারা সাইন করা থাকবে এবং আপনার ভেরিফাইড অ্যাড্রেস সেন্ডার হবে। এরকম দেখাবে:
স্টেপ ২: Lambda সেট আপ করার পদ্ধতি
এখন এটাই সবচেয়ে মজার অংশ। আমরা একটি ফাংশন তৈরি করব যা ফর্ম ডেটা রিসিভ করবে এবং SES কল করবে।
Lambda ফাংশনদের সৌন্দর্য হলো আপনাকে আপনার ব্যাকএন্ড কোড ২৪/৭ একটি সার্ভারে রান করানো এবং সার্ভার মেইনটেইন করার চিন্তা করতে হয় না। এটি সার্ভারলেস।
কিন্তু এর মানে এটা নয় যে কোনো সার্ভারই নেই। AWS সেটি হুডের নিচে संभालेगा যাতে আপনি শুধু কোড লিখতে ফোকাস করতে পারেন, সার্ভার মেইনটেইন করতে না। এছাড়া, আপনাকে বিল করা হয় শুধু আপনার ফাংশন কতবার কল হয়েছে এবং এক্সিকিউট হতে কতটুকু সময় লাগে, এবং এটি অবিশ্বাস্যভাবে সস্তা!
IAM রোল তৈরি করুন এবং কনফিগার করুন
আমাদের লям্বডা ফাংশন লিখা শুরু করার আগে, আমাদের একটি IAM রোল তৈরি করতে হবে যেটি ফাংশনের সাথে আট্যাচ হবে এবং SES সার্ভিস আহ্বান করার পারমিশন দেবে (AWS-এ পলিসি বলা হয়)।
আপনার AWS কনসোল থেকে, IAM সার্ভিসে যান —> সাইড মেনুতে Policies-এ ক্লিক করুন —> তারপর "Create Policy" বাটনে ক্লিক করুন।
পলিসি ক্রিয়েশন পেজে, JSON ট্যাবে যান এবং নিচের পারমিশনগুলো পেস্ট করুন, তারপর Next ক্লিক করুন।
{ "Version": "2012-10-17", "Statement": [ { "Sid": "VisualEditor0", "Effect": "Allow", "Action": [ "ses:SendEmail", "ses:SendRawEmail" ], "Resource": "*" } ] } তৃতীয় স্ক্রিনে, পলিসির নাম দিন এবং "Create Policy" বাটনে ক্লিক করুন।
এখন আমরা একটি IAM রোল তৈরি করব যা ল্যাম্বডার সাথে আট্যাচ হবে এবং এটিকে আমরা যা পলিসি তৈরি করলাম সেটির সাথে লিংক করব।
IAM সাইড মেনু থেকে, Roles-এ ক্লিক করুন তারপর "Create role" বাটনে ক্লিক করুন।
রোল ক্রিয়েশন স্ক্রিনে, নিশ্চিত করুন টাইপ সিলেক্ট করা "AWS service" এবং Lambda কেস সিলেক্ট করুন তারপর "Next:Permissions" বাটনে ক্লিক করুন।
পরবর্তী স্ক্রিনে, আমরা আগে যে পলিসি তৈরি করলাম সেটি তার নাম দিয়ে সার্চ করুন এবং সিলেক্ট করুন, তারপর next ক্লিক করুন।
রিভিউ স্ক্রিনে, রোলের একটি নাম দিন যা আপনি মনে রাখতে পারেন তারপর "Create role"-এ ক্লিক করুন।
এখন আমরা একটি নতুন ল্যাম্বডা ফাংশন তৈরি করতে পারি। Lambda সার্ভিস ড্যাশবোর্ডে যান এবং "Create Function" বাটনে ক্লিক করুন।
ফাংশন ক্রিয়েশন স্ক্রিনে, আপনার ফাংশন নাম দিন, "Author from scratch" অপশন সিলেক্ট করুন, এবং Node.js রানটাইম বেছে নিন।
"Change default execution role" এর নিচে "Use an existing role" অপশন বেছে নিন তারপর "Existing role" ড্রপ ডাউন থেকে আপনি আগের ধাপে তৈরি করা রোলের নাম বেছে নিন।
শেষে, "Create function" বাটনে ক্লিক করুন ফাংশন তৈরি করতে।
কোড লিখুন এবং টেস্ট করুন
এডিটরে, index.js ফাইলটি খুলুন (এই ফাইলটি এক্সিকিউট হবে যখন আপনার ল্যাম্বডা কল হবে), এবং এর কন্টেন্টটি নিচের কোড দিয়ে রিপ্লেস করুন:
const aws = require("aws-sdk"); const ses = new aws.SES({ region: "us-east-1" }); exports.handler = async function (event) { console.log('EVENT: ', event) const params = { Destination: { ToAddresses: ["your@email.com"], }, Message: { Body: { Text: { Data: `Hello from Lambda!` }, }, Subject: { Data: `Message from AWS Lambda` }, }, Source: "your@email.com", }; return ses.sendEmail(params).promise() }; লাইন ২-এ দ্রষ্টব্য যে আমরা AWS SDK ব্যবহার করছি এবং একটি SES ইনস্ট্যান্স তৈরি করছি। আমি us-east-1 রিজন বেছে নিলাম কারণ আমি আমার ইমেইল সেখানে রেজিস্টার ও ভেরিফাই করেছিলাম। নিশ্চিত করুন ইমেইল রিপ্লেস করুন এবং সেই AWS রিজন ব্যবহার করুন যেখানে আপনি আপনার ইমেইল রেজিস্টার করেছেন।
এই ফাংশনটি টেস্ট করতে, "Deploy" বাটনে ক্লিক করুন। তারপর Test বাটনে ক্লিক করুন —> Configure test event যা একটি টেস্ট কনফিগারেশন ডায়ালগ খুলবে যেখানে আপনি একটি নতুন টেস্ট ইভেন্ট তৈরি করতে পারেন।
টেস্ট ইভেন্ট বডি এডিটরে, নিচের JSON লিখুন যা আমাদের ব্রাউজার রিকোয়েস্ট থেকে আসবে। তারপর create ক্লিক করুন।
{ "body": { "senderName": "Namo", "senderEmail": "namo@trains.com", "message": "I love trains!" } } এখন টেস্ট বাটনে ক্লিক করলে আমরা যে টেস্ট তৈরি করলাম সেটি রান করবে। এডিটরে একটি নতুন ট্যাব খুলবে লগস দেখাতে যা ফাংশন রান করলে তৈরি হয়েছে, যেটি এরকম দেখাবে:
লগ করা ইভেন্ট অবজেক্টটি এখানে Function logs-এর নিচে দেখাচ্ছে বডি ডেটার সাথে যা আমরা টেস্ট ইভেন্টে ব্যবহার করলাম।
এই টেস্ট আমার ইনবক্সেও একটি ইমেইল পাঠানো উচিত ছিল – দেখা যাক ঘটল কিনা।
হ্যাঁ, ঠিক উদ্যোগমত। এবং এটি টেস্ট রান করার প্রায় সাথে সাথে হয়েছে।
এখন আমাদের ফাংশন কোড মডিফাই করি টেস্ট ডেটা থেকে আরও অর্থপূর্ণ মেসেজ পাওয়ার জন্য।
const aws = require("aws-sdk"); const ses = new aws.SES({ region: "us-east-1" }); exports.handler = async function (event) { console.log('EVENT: ', event) // ইভেন্ট বডি থেকে প্রোপার্টিগুলো এক্সট্রাক্ট করুন const { senderEmail, senderName, message } = JSON.parse(event.body) const params = { Destination: { ToAddresses: ["the.benhawy@gmail.com"], }, // ডেটা স্ট্রিংসে ইন্টারপোলেট করুন পাঠাতে Message: { Body: { Text: { Data: `You just got a message from ${senderName} - ${senderEmail}: ${message}` }, }, Subject: { Data: `Message from ${senderName}` }, }, Source: "the.benhawy@gmail.com", }; return ses.sendEmail(params).promise(); }; এটি নোট করা গুরুত্বপূর্ণ যে যখন API Gateway আমাদের ফাংশন কল করবে এটি ইভেন্ট বডিতে একটি স্ট্রিং পাস করবে। এইজন্য আমি JSON.parse ব্যবহার করছি event.body-তে, যাতে এটি JSON-এ রূপান্তরিত হয় এবং আমরা আমাদের সেন্ডারের ইমেইল, নাম, এবং মেসেজ এক্সট্রাক্ট করতে পারি। তারপর আমি এই ভেরিয়েবলগুলো ইমেইল বডি টেক্সট এবং সাবজেক্টে স্ট্রিং ইন্টারপোলেশন ব্যবহার করছি।
আপনি যদি এটি টেস্ট করেন, কোডটি একটি এরর রিটার্ন করবে। কারণ টেস্ট একটি JSON অবজেক্ট পাস করছে event.body-তে এবং আমরা JSON-এ JSON.parse ব্যবহার করছি, যা জাভাস্ক্রিপ্টে এরর করে।
দুর্ভাগ্যবশ, টেস্ট এডিটর আমাদের স্ট্রিং পাস করতে দেয় না event-এ, তাই আমাদের পরে অন্য কোথাও থেকে টেস্ট করতে হবে।
স্টেপ ৩: API Gateway সেট আপ করার পদ্ধতি
পরবর্তী, আমরা যে শেষ AWS সার্ভিসটি ব্যবহার করব সেটি হলো API Gateway, যা আমাদের ব্রাউজারের HTTP রিকোয়েস্ট Lambda ফাংশনে পাঠাতে সক্ষম করবে যা আমরা তৈরি করলাম।
আপনার ল্যাম্বডা ফাংশন পেজ ছাড়া না করে, "Function overview" সেকশন এক্সপ্যান্ড করুন এবং "Add trigger"-এ ক্লিক করুন।
পরবর্তী, ড্রপডাউন থেকে API Gateway বেছে নিন, HTTP API as the API type, "Open" as the security mechanism, এবং CORS চেকবক্স অপশন চেক করুন। তারপর "Add" ক্লিক করুন।
আপনাকে আপনার ফাংশনের "Configuration" ট্যাবে রিডাইরেক্ট করা হবে, যেখানে আপনি নতুন API Gateway ট্রিগার দেখবেন যা আপনি তৈরি করলাম। সেখান থেকে, API endpoint নোট করুন। এটি সেই URL যা আমরা আমাদের ব্রাউজার থেকে ফর্ম ডেটার সাথে কল করব।
HTML-এ ফিরে যান
আমরা অবশেষে ফর্মটি টেস্ট করতে পারি দেখতে ইমেইল পাঠাচ্ছে কিনা।
আমাদের জাভাস্ক্রিপ্ট মডিফাই করি সাবমিট হলে রিকোয়েস্ট পাঠাতে।
const form = document.querySelector("form"); form.addEventListener("submit", (event) => { // ফর্ম সাবমিশন থেকে পেজ রিফ্রেশ বাধা দিন event.preventDefault(); const { name, email, message } = event.target; // আপনার API endpoint URL ব্যবহার করুন যা আপনি আগের ধাপে কপি করলেন const endpoint = "<https://5ntvcwwmec.execute-api.us-east-1.amazonaws.com/default/sendContactEmail>"; // JSON.stringify ব্যবহার করি যাতে ডেটা স্ট্রিং হিসেবে HTTP-এ পাঠানো যায় const body = JSON.stringify({ senderName: name.value, senderEmail: email.value, message: message.value }); const requestOptions = { method: "POST", body }; fetch(endpoint, requestOptions) .then((response) => { if (!response.ok) throw new Error("Error in fetch"); return response.json(); }) .then((response) => { document.getElementById("result-text").innerText = "Email sent successfully!"; }) .catch((error) => { document.getElementById("result-text").innerText = "An unkown error occured."; }); }); এখন, সত্যের মুহূর্ত: ফর্মটি পূরণ করুন এবং সাবমিট ক্লিক করুন। আপনি সাকসেস মেসেজ দেখলে, তার মানে ইমেইল পাঠানো হয়েছে।
যেহেতু আমি ইমেইলের মালিক যেটি মেসেজ পাঠানো হয়েছিল, আমি দ্রুত আমার ইনবক্স চেক করলাম যে আমি নিজের থেকে একটি ইমেইল পেলাম ফর্মে ব্যবহার করা ডিটেইলসের সাথে!
আপনি যদি সাথে সাথে ফলো করেছেন, আপনার এখন একটি ফাংশনিং "Contact Us" ফর্ম আছে যেটি আপনি যেকোনো ওয়েবসাইটে প্লাগ ইন করতে পারেন। এবং আপনাকে বিল করা হবে শুধু যখন এটি ব্যবহার করা হবে।
আপনার বিষয়ে জানি না, কিন্তু আমি মনে করি এটি খুব awesome এবং প্রায় ম্যাজিক্যাল! এবং এটি ক্লাউড কম্পিউটিং/সার্ভিস আপনার ওয়ার্কফ্লোতে ব্যবহার করার একটি সুন্দর, প্রায়োগিক পদ্ধতি।
বিশ্বাসieten আপনি এই ফ্লো কাস্টোমাইজ করতে পারেন ফ্রন্টএন্ডে React বা Vue-এর মতো ফ্রেমওয়ার্ক ব্যবহার করে বা Lambda-তে Python বা Go-এর মতো ভিন্ন প্রোগ্রামিং ল্যাঙ্গুয়েজ ব্যবহার করে।
যাওয়ার আগে...
এতদূর পড়ার জন্য ধন্যবাদ! আমি জাভাস্ক্রিপ্ট, ক্লাউড ডেভেলপমেন্ট, এবং আমার ব্যক্তিগত শিক্ষামূলক ও পেশাদার অভিজ্ঞতা সম্পর্কে একটি সেলফ-টট ডেভেলপার হিসেবে পোস্ট লিখি। তাই ফ্রিলি ফলো করুন টুইটারে @adham_benhawy যেখানে আমি সেগুলো টুইট করি!
রিসোর্স
- https://aws.amazon.com/premiumsupport/knowledge-center/lambda-send-email-ses/
- https://docs.aws.amazon.com/lambda/latest/dg/lambda-invocation.html
- https://docs.aws.amazon.com/lambda/latest/dg/services-apigateway.html?icmpid=docs_lambda_console
