एक इंटरैक्टिव ऐप गाइड बनाना
सपोर्ट टीमें अक्सर उन ऐप्स का उपयोग करते समय संघर्ष करती हैं जिन्हें उन्होंने कभी इंस्टॉल नहीं किया होता है। PDF मैनुअल एक बुरा समाधान है क्योंकि कोई उन्हें पढ़ता नहीं है।
मैंने एक ऐसा टूल बनाया है जो उपयोगकर्ताओं को ब्राउज़र के अंदर वास्तविक ऐप स्क्रीनशॉट के साथ इंटरैक्ट करने की अनुमति देता है। यह वास्तविक फोन का उपयोग करने जैसा महसूस होता है। आप स्क्रीनशॉट पर एक बटन क्लिक करते हैं, और अगला स्क्रीन दिखाई देता है।
यह कैसे काम करता है
मैंने इमेज के लिए Firebase Storage और लॉजिक के लिए vanilla JavaScript का उपयोग किया है। इसे हल्का रखने के लिए मैंने बाहरी लाइब्रेरीज़ से परहेज किया।
इसका रहस्य प्रतिशत-आधारित (percentage-based) हॉटस्पॉट्स का उपयोग करना है। फिक्स्ड पिक्सेल के बजाय, मैं 0 से 100 तक के कोऑर्डिनेट्स का उपयोग करके क्लिक करने योग्य क्षेत्रों को परिभाषित करता हूँ। इससे विंडो का आकार बदलने पर भी बटन संरेखित (aligned) रहते हैं।
सिस्टम एक सरल स्टेट मशीन (state machine) का उपयोग करता है। प्रत्येक स्क्रीन में होता है:
- एक इमेज ID
- हॉटस्पॉट्स की एक सूची
- एक लक्षित गंतव्य (target destination)
मेरे द्वारा बनाए गए टूल्स
आंखों से कोऑर्डिनेट्स मापना धीमा है। मैंने इस प्रक्रिया को तेज़ करने के लिए एक स्टैंडअलोन HTML एडिटर बनाया।
- कैनवास पर एक स्क्रीनशॉट अपलोड करें।
- आयत (rectangle) बनाने के लिए अपने माउस को ड्रैग करें।
- एडिटर स्वचालित रूप से प्रतिशत कोऑर्डिनेट्स की गणना करता है।
- ड्रॉपडाउन के माध्यम से क्षेत्र को दूसरे स्क्रीन से लिंक करें।
- अंतिम ऑब्जेक्ट को सीधे अपने कोड में एक्सपोर्ट करें।
उपयोगकर्ताओं की मदद के लिए, मैंने क्लिक करने योग्य क्षेत्रों में एक पल्सिंग ब्लू ग्लो (pulsing blue glow) जोड़ा है। यह ठीक से दिखाता है कि वे कहाँ टैप कर सकते हैं।
मुख्य तकनीकी सबक
Firebase Security: स्टोरेज URL मैन्युअल रूप से न बनाएं। SDK से getDownloadURL मेथड का उपयोग करें। इसमें आवश्यक auth token शामिल होता है। इसके बिना, इमेज बिना कोई एरर दिखाए लोड होने में विफल हो जाएंगी।
Layout Fixes: एक flex column लेआउट में, पैरेंट पर एक स्पष्ट ऊंचाई (explicit height) सेट करें। बच्चों (children) पर min-height को 0 पर सेट करें। यह लेआउट कोलैप्स और ओवरफ्लो समस्याओं को रोकता है।
Scaling: CSS transform scale प्रॉपर्टी का उपयोग करें। यह इमेज और हॉटस्पॉट्स को एक साथ रीसाइज करने की अनुमति देता है। यह स्क्रीन के आकार की परवाह किए बिना सब कुछ अनुपात में रखता है।
Speed: एक-एक करके URL प्राप्त करने से लैग (lag) पैदा होता है। मैंने एक इन-मेमोरी कैश (in-memory cache) और एक बैकग्राउंड प्रीलोड फंक्शन लागू किया है। जब मोडल खुलता है, तो सभी इमेज समानांतर (parallel) रूप से लोड होती हैं। इससे नेविगेशन तुरंत महसूस होता है।
परिणाम
- पूर्ण नेविगेशन के साथ 20 स्क्रीन।
- 52 इंटरैक्टिव हॉटस्पॉट्स।
- ऑटो-स्केलिंग की बदौलत शून्य स्क्रॉलबार।
- प्रीलोडिंग के माध्यम से तत्काल ट्रांज़िशन।