কীভাবে তৈরি করবেন এনিমেটেড ল্যাম্প লগইন ফর্ম? ফায়ারবেস অথেনটিকেশন সহ সম্পূর্ণ গাইড
আসসালামু আলাইকুম বন্ধুরা, কেমন আছেন সবাই? আশা করি আল্লাহর রহমতে আপনারা সবাই অনেক ভালো আছেন। TechPaice ওয়েবসাইটের পক্ষ থেকে আপনাদের সবাইকে আজকের একদম নতুন এবং ধামাকাদার একটি ওয়েব ডেভেলপমেন্ট টিউটোরিয়ালে স্বাগত জানাচ্ছি। আপনি যদি একজন ওয়েব ডিজাইনার বা ফ্রন্টএন্ড ডেভেলপার হয়ে থাকেন, তবে আজকের এই পোস্টটি আপনার জন্য অত্যন্ত গুরুত্বপূর্ণ হতে চলেছে।
আজকাল সাধারণ এবং বোরিং ডিজাইনের লগইন ফর্ম কেউ পছন্দ করে না। যেকোনো ওয়েবসাইটের ভিজিটর ধরে রাখতে হলে এবং তাদের একটি প্রিমিয়াম ইউজার এক্সপেরিয়েন্স (UX) দিতে হলে ইন্টারফেসের মধ্যে ইউনিক কিছু রাখা উচিত। সেই চিন্তা থেকেই আজকে আমরা সম্পূর্ণ স্ক্র্যাচ থেকে একটি Animated Lamp Login Form তৈরি করা শিখবো। এর বিশেষত্ব হলো, প্রথম অবস্থায় স্ক্রিন অন্ধকার থাকবে এবং একটি ঝোলানো ল্যাম্প বা ছাতার সুইচ দেখা যাবে। ইউজার যখনই ওই সুইচের দড়িতে টান দেবে, অমনি ল্যাম্প থেকে আলো ঠিকরে বের হবে এবং খুব সুন্দর একটি থ্রিডি টুইস্টের মাধ্যমে সম্পূর্ণ লগইন ফর্মটি চোখের সামনে ভেসে উঠবে! শুধু তাই নয়, এই ফর্মের ব্যাকএন্ড আমরা㵄ন্ট্রোল করব গুগল ফায়ারবেস (Firebase Auth) দিয়ে, যাতে একদম রিয়েল-টাইমে সাইন-ইন, সাইন-আপ এবং পাসওয়ার্ড রিসেট করা যায়।
১. কেন এই ল্যাম্প লগইন ফর্মটি সাধারণ ফর্ম থেকে আলাদা?
সাধারণত আমরা যে সমস্ত লগইন ফর্ম ইন্টারনেটে দেখে থাকি, সেগুলো পেজ লোড হওয়ার সাথে সাথেই স্ক্রিনে চলে আসে। কিন্তু আমাদের এই প্রজেক্টের কনসেপ্ট সম্পূর্ণ আলাদা। আমরা এখানে ডার্ক এবং লাইট মোডের একটি দারুণ সংমিশ্রণ তৈরি করেছি। অন্ধকার স্ক্রিনে যখন একটা লাইট জ্বলে ওঠে, তখন ইউজারের মনোযোগ সরাসরি সেই লাইটের আলোর দিকে যায়। আর সেই আলোর নিচেই যখন গ্লাস-মর্ফিজম (Glassmorphism) ডিজাইনের ট্রান্সপারেন্ট ফর্মটি সাবলীলভাবে এনিমেশনের মাধ্যমে ওপেন হয়, তখন পুরো ওয়েবসাইটটির স্ট্যান্ডার্ড কয়েক গুণ বেড়ে যায়। যেকোনো পোর্টফোলিও ওয়েবসাইট কিংবা প্রিমিয়াম ড্যাশবোর্ডের এন্ট্রি পেজ হিসেবে এটি ব্যবহার করার জন্য একদম পারফেক্ট।
২. এই প্রজেক্টের মূল আকর্ষণ ও ফিচারসমূহ
এই কোডটি তৈরি করার সময় আমরা বেশ কিছু আধুনিক ফ্রন্টএন্ড টেকনিক ব্যবহার করেছি। এর প্রধান প্রধান ফিচারগুলো নিচে দেওয়া হলো:
- স্মার্ট রেসপন্সিভনেস (Mobile-Friendly): অনেক সময় দেখা যায় বড় স্ক্রিনের চমৎকার ডিজাইন মোবাইলে গিয়ে ভেঙে যায়। কিন্তু এই কোডটি ল্যাপটপ বা ডেক্সটপে পাশাপাশি (Side-by-Side) দেখাবে এবং মোবাইল বা ট্যাবলেটে স্বয়ংক্রিয়ভাবে উপর-নিচ (Vertical) হয়ে যাবে। ফলে কোনো স্ক্রিন কাটবে না।
- ইউনিক পুল-ডাউন এনিমেশন: ল্যাম্পের দড়িটি মাউস দিয়ে ক্লিক করলে বা মোবাইলে টাচ করলে সেটি স্প্রিংয়ের মতো নিচে নেমে আবার উপরে উঠে যায়, যা দেখতে দারুণ রিয়েলিস্টিক লাগে।
- গ্লাস-মর্ফিজম ইউআই (Glassmorphism UI): ফর্মটির ব্যাকগ্রাউন্ডে ঝাপসা কাঁচের মতো ব্যাকড্রপ ফিল্টার ব্যবহার করা হয়েছে, যা বর্তমান কোডিং ট্রেন্ডে দারুণ জনপ্রিয়।
- ফায়ারবেস ইন্টিগ্রেশন (Firebase Auth v10): আমরা এতে লেটেস্ট মডুলার এসডিকে ব্যবহার করেছি। ফলে ইউজাররা নতুন অ্যাকাউন্ট খুলতে পারবেন, লগইন করতে পারবেন এবং পাসওয়ার্ড ভুলে গেলে ইমেইলে রিসেট লিঙ্ক পাঠাতে পারবেন।
৩. ফায়ারবেস (Firebase) কীভাবে সেটআপ করবেন?
এই ফর্মটিকে লাইভ কাজ করানোর জন্য আপনাকে আপনার নিজস্ব ফায়ারবেস প্রজেক্টের সাথে এটি যুক্ত করতে হবে। ভত্রের কিছু নেই, প্রক্রিয়াটি খুবই সহজ। নিচে ধাপে ধাপে গাইড দেওয়া হলো:
- প্রথমে গুগল ব্রাউজারে গিয়ে Firebase Console-এ প্রবেশ করুন এবং আপনার জিমেইল দিয়ে লগইন করুন।
- "Add Project" বাটনে ক্লিক করে আপনার ইচ্ছামতো যেকোনো একটি নাম দিয়ে নতুন প্রজেক্ট তৈরি করুন।
- প্রজেক্ট ড্যাশবোর্ডে আসার পর বাম পাশের মেনু থেকে Build > Authentication-এ যান এবং এটি সক্রিয় (Get Started) করুন।
- Sign-in method সেকশনে গিয়ে Email/Password প্রোভাইডারটি এনাবল (Enable) বা চালু করে দিন।
- এবার প্রজেক্টের মেইন ড্যাশবোর্ডে ফিরে এসে Web (</>) আইকনে ক্লিক করে একটি অ্যাপ রেজিস্টার করুন। সেখানে আপনি একটি
firebaseConfigঅবজেক্ট দেখতে পাবেন। - আমাদের দেওয়া সোর্স কোডের একদম নিচের দিকে গিয়ে
YOUR_API_KEY,YOUR_AUTH_DOMAINইত্যাদি লেখা জায়গাগুলোতে আপনার ফায়ারবেস কনসোলের নিজস্ব ডাটাগুলো বসিয়ে দিন। ব্যস, আপনার ব্যাকএন্ড রেডি!
৪. সম্পূর্ণ সোর্স কোড সংগ্রহ করুন
আপনাদের সুবিধার জন্য আমরা নিচে একটি প্রিমিয়াম Get Code বাটন যুক্ত করেছি। এই বাটনে ক্লিক করলেই সম্পূর্ণ কোডটি অটোমেটিক্যালি এক ক্লিকে আপনার ক্লিপবোর্ডে কপি হয়ে যাবে এবং আপনি স্ক্রিনের ওপর একটি লাইভ নোটিফিকেশন দেখতে পাবেন। কোডটি কপি করে আপনার কম্পিউটারে index.html নামে একটি ফাইল বানিয়ে পেস্ট করে রান করলেই ম্যাজিক দেখতে পাবেন!
৫. শেষ কথা ও মতামত
একটি সাধারণ ওয়েবসাইট এবং একটি প্রফেশনাল ওয়েবসাইটের মধ্যে পার্থক্য গড়ে দেয় এই ছোট ছোট সৃজনশীল কাজগুলোই। আশা করি আজকের এই Animated Lamp Login Form এর পুরো টিউটোরিয়াল এবং সোর্স কোডটি আপনাদের অনেক কাজে আসবে। আপনারা চাইলে এই কোডটিকে আরও মডিফাই করে নিজস্ব কালার কম্বিনেশন বা কাস্টম ফন্ট অ্যাড করে আরও আকর্ষণীয় করে তুলতে পারেন।
এই প্রজেক্টটি সেটআপ করতে বা ফায়ারবেস কানেক্ট করতে আপনাদের যদি বিন্দুমাত্র কোনো সমস্যা ফেস করতে হয়, তবে একদম দ্বিধা না করে নিচে কমেন্ট বক্সে আমাদের জানান। আমরা আপনাদের প্রতিটি কমেন্টের উত্তর দিয়ে সাহায্য করার চেষ্টা করব। নিয়মিত এই ধরনের এক্সক্লুসিভ কোডিং ট্রিকস, ইউআই ডিজাইন এবং টেকনোলজি আপডেট পেতে সর্বদা চোখ রাখুন আমাদের TechPaice.xyz ওয়েবসাইটে। আজ এ পর্যন্তই, সবাই ভালো থাকবেন, সুস্থ থাকবেন। আল্লাহ হাফেজ!
