एक इंटरअॅक्टिव्ह ॲप गाईड तयार करणे
सपोर्ट टीम्सना अनेकदा अशा ॲप्ससोबत काम करताना अडचणी येतात जी त्यांनी कधीही इन्स्टॉल केलेली नसतात.
स्क्रीनशॉट्ससह PDF देणे हा एक सामान्य उपाय आहे. पण बहुतेक लोक PDF वाचत नाहीत. मला त्यापेक्षा काहीतरी चांगले तयार करायचे होते. मला अशी गाईड हवी होती जी प्रत्यक्ष ॲपसारखी वाटेल. तुम्ही होम स्क्रीन पाहता, एका बटणावर क्लिक करता आणि पुढची स्क्रीन समोर येते.
मी प्रत्यक्ष स्क्रीनशॉट्स आणि क्लिक करण्यायोग्य hotspots वापरून एक इंटरअॅक्टिव्ह गाईड तयार केली.
ते कसे कार्य करते
मी इमेजसाठी Firebase Storage आणि लॉजिकसाठी vanilla JavaScript वापरले आहे. कोणतेही बाह्य लायब्ररी (external libraries) वापरलेली नाहीत.
- प्रत्येक स्क्रीन ही एक पूर्ण इमेज आहे.
- मी इमेजवर 'hotspots' नावाचे अदृश्य आयत (rectangles) ठेवतो.
- हे hotspots पिक्सेलऐवजी टक्केवारीचा (percentages) वापर करतात. यामुळे विंडोचा आकार बदलला तरी ते योग्य ठिकाणी अलाइन राहतात.
- नेव्हिगेशनसाठी एक साधे state machine वापरले आहे. प्रत्येक स्क्रीनला एक ID, एक इमेज आणि hotspots ची एक यादी असते.
एडिटर
हाताने कोऑर्डिनेट्स (coordinates) मोजणे संथ काम आहे. ही प्रक्रिया वेगवान करण्यासाठी मी एक स्वतंत्र HTML एडिटर तयार केला.
- स्क्रीनशॉट अपलोड करा.
- हॉटस्पॉट काढण्यासाठी तुमचा माऊस ड्रॅग करा.
- हॉटस्पॉटला लक्ष्यित (target) स्क्रीनशी जोडा.
- कोड थेट एक्सपोर्ट करा.
डिझाइनचे पर्याय
प्रत्येक स्क्रीनवर पूर्ण नेव्हिगेशन नसते. गोंधळ टाळण्यासाठी, मी क्लिक करण्यायोग्य भागांवर एक 'pulsing blue glow' जोडला आहे. यामुळे वापरकर्त्यांना नेमके कुठे टॅप करायचे आहे हे स्पष्टपणे समजते.
महत्त्वाचे तांत्रिक धडे
- Firebase Storage: URLs मॅन्युअली तयार करू नका.
getDownloadURLही SDK मेथड वापरा. यामध्ये सिक्युरिटी रूल्स बायपास करण्यासाठी आवश्यक असलेला auth token समाविष्ट असतो. - CSS Flexbox: जर तुम्ही कॉलम लेआउटमध्ये
flex: 1वापरत असाल, तर पैरेंटला (parent) स्पष्ट उंची (explicit height) असणे आवश्यक आहे. ओव्हरफ्लो टाळण्यासाठी चाइल्डला (child)min-height: 0सेट करा. - Performance: प्रत्येक क्लिकवर Firebase कॉल केल्यामुळे विलंब (lag) होऊ शकतो. मी इन-मेमरी कॅशे (in-memory cache) लागू केला आणि मॉडेल (modal) उघडताच सर्व इमेजेस प्रीलोड केल्या. यामुळे नेव्हिगेशन त्वरित होते.
- Scaling: CSS
transform: scale()प्रॉपर्टी वापरा. यामुळे स्क्रीनचा आकार काहीही असला तरी इमेज आणि hotspots अचूकपणे अलाइन राहतात.
निकाल
- २० स्क्रीन प्रत्यक्ष फोनप्रमाणे नेव्हिगेट करता येतात.
- व्हिज्युअल क्यूजसह (visual cues) ५२ hotspots.
- प्रीलोडिंग आणि कॅशिंगमुळे त्वरित लोडिंग.
- कोणत्याही मॉडेल आकारात बसणारे रिस्पॉन्सिव्ह डिझाइन.