ایک انٹرایکٹو ایپ گائیڈ بنانا
سپورٹ ٹیموں کو اکثر ان ایپس کے ساتھ مشکلات کا سامنا کرنا پڑتا ہے جو انہوں نے کبھی انسٹال نہیں کی ہوتیں۔
اسکرین شاٹس کے ساتھ پی ڈی ایف (PDF) ایک معیاری حل ہے۔ لیکن زیادہ تر لوگ پی ڈی ایف نہیں پڑھتے۔ میں کچھ بہتر بنانا چاہتا تھا۔ میں ایک ایسی گائیڈ چاہتا تھا جو اصل ایپ کی طرح محسوس ہو۔ آپ ہوم اسکرین دیکھیں، ایک بٹن پر کلک کریں، اور اگلی اسکرین سامنے آ جائے۔
میں نے اصل اسکرین شاٹس اور کلک کرنے کے قابل ہاٹ اسپاٹس (hotspots) کا استعمال کرتے ہوئے ایک انٹرایکٹو گائیڈ بنائی۔
یہ کیسے کام کرتا ہے
میں نے تصاویر کے لیے Firebase Storage اور لاجک کے لیے vanilla JavaScript کا استعمال کیا۔ کوئی بیرونی لائبریری استعمال نہیں کی۔
- ہر اسکرین ایک مکمل تصویر ہے۔
- میں تصویر کے اوپر غیر مرئی مستطیل (rectangles) رکھتا ہوں، جنہیں ہاٹ اسپاٹس (hotspots) کہا جاتا ہے۔
- یہ ہاٹ اسپاٹس پکسلز کے بجائے فیصد (percentages) کا استعمال کرتے ہیں۔ اس سے ونڈو کا سائز تبدیل ہونے پر بھی وہ اپنی جگہ پر درست رہتے ہیں۔
- ایک سادہ اسٹیٹ مشین (state machine) نیویگیشن کو سنبھالتی ہے۔ ہر اسکرین کی ایک ID، ایک تصویر اور ہاٹ اسپاٹس کی ایک فہرست ہوتی ہے۔
ایڈیٹر
کوآرڈینیٹس (coordinates) کو ہاتھ سے ناپنا سست عمل ہے۔ میں نے اس عمل کو تیز کرنے کے لیے ایک اسٹینڈ الون (standalone) HTML ایڈیٹر بنایا۔
- اسکرین شاٹ اپ لوڈ کریں۔
- ہاٹ اسپاٹ بنانے کے لیے ماؤس کو ڈریگ کریں۔
- ہاٹ اسپاٹ کو ٹارگٹ اسکرین سے لنک کریں۔
- کوڈ کو براہ راست ایکسپورٹ کریں۔
ڈیزائن کے انتخاب
ہر اسکرین میں مکمل نیویگیشن نہیں ہوتی۔ الجھن سے بچنے کے لیے، میں نے کلک کرنے کے قابل حصوں پر ایک نیلی چمک (pulsing blue glow) شامل کی۔ یہ صارفین کو بالکل واضح طور پر دکھاتا ہے کہ وہ کہاں ٹیپ کر سکتے ہیں۔
اہم تکنیکی اسباق
- Firebase Storage: یو آر ایل (URLs) کو دستی طور پر نہ بنائیں۔ SDK میتھڈ
getDownloadURLاستعمال کریں۔ اس میں سیکیورٹی رولز کو بائی پاس کرنے کے لیے ضروری آتھ ٹوکن (auth token) شامل ہوتا ہے۔ - CSS Flexbox: اگر آپ کالم لے آؤٹ میں
flex: 1استعمال کرتے ہیں، تو پیرنٹ (parent) کی ایک واضح ہائٹ (height) ہونی چاہیے۔ اوور فلو (overflow) سے بچنے کے لیے چائلڈ (child) پرmin-height: 0سیٹ کریں۔ - کارکردگی (Performance): ہر کلک پر Firebase کو کال کرنے سے تاخیر (lag) ہوتی ہے۔ میں نے ان میموری کیش (in-memory cache) کا استعمال کیا اور ماڈل (modal) کھلتے ہی تمام تصاویر پہلے سے لوڈ (preload) کر دیں۔ اس سے نیویگیشن فوری ہو جاتی ہے۔
- اسکیلنگ (Scaling): CSS
transform: scale()پراپرٹی کا استعمال کریں۔ یہ اس بات کو یقینی بناتا ہے کہ اسکرین کا سائز کچھ بھی ہو، تصویر اور ہاٹ اسپاٹس بالکل درست ترتیب میں رہیں۔
نتیجہ
- 20 اسکرینز جنہیں ایک حقیقی فون کی طرح استعمال کیا جا سکتا ہے۔
- بصری اشاروں (visual cues) کے ساتھ 52 ہاٹ اسپاٹس۔
- پری لوڈنگ اور کیشنگ کے ذریعے فوری لوڈنگ۔
- ریسپانسیو ڈیزائن جو کسی بھی ماڈل سائز کے مطابق ہو سکے۔