একটি ইন্টারেক্টিভ অ্যাপ গাইড তৈরি করা
সাপোর্ট টিমগুলো প্রায়শই এমন অ্যাপ ব্যবহার করতে গিয়ে সমস্যার সম্মুখীন হয় যা তারা কখনও ইনস্টল করেনি। একটি PDF ম্যানুয়াল খুব একটা ভালো সমাধান নয় কারণ কেউ সেগুলো পড়ে না।
আমি এমন একটি টুল তৈরি করেছি যা ব্যবহারকারীদের ব্রাউজারের ভেতরেই আসল অ্যাপের স্ক্রিনশটের সাথে ইন্টারঅ্যাক্ট করতে দেয়। এটি ব্যবহার করলে মনে হয় যেন আসল ফোনটি ব্যবহার করা হচ্ছে। আপনি একটি স্ক্রিনশটে কোনো বাটনে ক্লিক করলে পরবর্তী স্ক্রিনটি চলে আসে।
এটি যেভাবে কাজ করে
আমি ইমেজের জন্য Firebase Storage এবং লজিকের জন্য vanilla JavaScript ব্যবহার করেছি। এটিকে হালকা রাখার জন্য আমি কোনো এক্সটার্নাল লাইব্রেরি ব্যবহার করিনি।
এর মূল রহস্য হলো পার্সেন্টেজ-ভিত্তিক (percentage-based) হটস্পট ব্যবহার করা। ফিক্সড পিক্সেলের পরিবর্তে, আমি ০ থেকে ১০০ পর্যন্ত কোঅর্ডিনেট ব্যবহার করে ক্লিকযোগ্য এলাকাগুলো নির্ধারণ করি। এর ফলে উইন্ডোর সাইজ পরিবর্তন হলেও বাটনগুলো সঠিক অবস্থানে থাকে।
সিস্টেমটি একটি সাধারণ state machine ব্যবহার করে। প্রতিটি স্ক্রিনে থাকে:
- একটি image ID
- হটস্পটের একটি তালিকা
- একটি টার্গেট ডেস্টিনেশন
আমি যে টুলগুলো তৈরি করেছি
খালি চোখে কোঅর্ডিনেট পরিমাপ করা অনেক ধীরগতির কাজ। এই প্রক্রিয়াটি দ্রুত করার জন্য আমি একটি স্ট্যান্ডঅ্যালোন HTML এডিটর তৈরি করেছি।
- একটি ক্যানভাসে স্ক্রিনশট আপলোড করুন।
- একটি আয়তক্ষেত্র আঁকতে মাউস ড্র্যাগ করুন।
- এডিটরটি স্বয়ংক্রিয়ভাবে পার্সেন্টেজ কোঅর্ডিনেট গণনা করে।
- একটি ড্রপডাউনের মাধ্যমে ওই এলাকাটিকে অন্য একটি স্ক্রিনের সাথে লিঙ্ক করুন।
- ফাইনাল অবজেক্টটি সরাসরি আপনার কোডে এক্সপোর্ট করুন।
ব্যবহারকারীদের সাহায্য করার জন্য, আমি ক্লিকযোগ্য এলাকাগুলোতে একটি পালসিং ব্লু গ্লো (pulsing blue glow) যোগ করেছি। এটি ঠিক কোন জায়গায় ট্যাপ করতে হবে তা দেখায়।
মূল প্রযুক্তিগত শিক্ষা
১. Firebase Security: স্টোরেজ URL ম্যানুয়ালি তৈরি করবেন না। SDK থেকে getDownloadURL মেথডটি ব্যবহার করুন। এতে প্রয়োজনীয় auth token অন্তর্ভুক্ত থাকে। এটি ছাড়া ইমেজ লোড হতে ব্যর্থ হবে এবং কোনো এররও দেখাবে না।
২. Layout Fixes: একটি flex column লেআউটে, প্যারেন্ট এলিমেন্টে একটি নির্দিষ্ট উচ্চতা (explicit height) সেট করুন। চিল্ডেন এলিমেন্টগুলোতে min-height ০ সেট করুন। এটি লেআউট ভেঙে যাওয়া এবং ওভারফ্লো সমস্যা প্রতিরোধ করে।
৩. Scaling: CSS transform scale প্রপার্টি ব্যবহার করুন। এটি ইমেজ এবং হটস্পট উভয়কেই একসাথে রিসাইজ করতে সাহায্য করে। এর ফলে স্ক্রিন সাইজ যাই হোক না কেন, সবকিছু আনুপাতিক থাকে।
৪. Speed: একটির পর একটি URL ফেচ করলে ল্যাগ তৈরি হয়। আমি একটি ইন-মেমরি ক্যাশ (in-memory cache) এবং একটি ব্যাকগ্রাউন্ড প্রিলোড ফাংশন ইমপ্লিমেন্ট করেছি। মোডাল খোলার সাথে সাথে সব ইমেজ প্যারালালি লোড হয়। এর ফলে নেভিগেশন একদম তাৎক্ষণিক মনে হয়।
ফলাফল
- সম্পূর্ণ নেভিগেশনসহ ২০টি স্ক্রিন।
- ৫২টি ইন্টারেক্টিভ হটস্পট।
- অটো-স্কেলিংয়ের কারণে কোনো স্ক্রলবার নেই।
- প্রিলোডিংয়ের মাধ্যমে তাৎক্ষণিক ট্রানজিশন।