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