एक इंटरअॅक्टिव्ह ॲप गाईड तयार करणे

सपोर्ट टीम्सना अनेकदा अशा ॲप्सचा वापर करताना अडचणी येतात जे त्यांनी कधीही इन्स्टॉल केलेले नसतात. PDF मॅन्युअल हा एक खराब उपाय आहे कारण कोणीही ते वाचत नाही.

मी एक असे टूल तयार केले आहे जे वापरकर्त्यांना ब्राउझरमध्येच वास्तविक ॲप स्क्रीनशॉट्ससोबत इंटरअॅक्ट करण्याची परवानगी देते. हे अगदी प्रत्यक्ष फोन वापरल्यासारखे वाटते. तुम्ही स्क्रीनशॉटवरील बटणावर क्लिक करता आणि पुढची स्क्रीन समोर येते.

ते कसे कार्य करते

मी इमेजसाठी Firebase Storage आणि लॉजिकसाठी vanilla JavaScript वापरले आहे. टूल हलके ठेवण्यासाठी मी बाह्य लायब्ररीज टाळल्या आहेत.

याचे रहस्य टक्केवारीवर आधारित (percentage-based) hotspots वापरण्यात आहे. फिक्स्ड पिक्सेल्सऐवजी, मी 0 ते 100 मधील कोऑर्डिनेट्स वापरून क्लिक करण्यायोग्य क्षेत्रे (clickable areas) परिभाषित केली आहेत. यामुळे विंडोचा आकार बदलला तरी बटणे योग्य ठिकाणी राहतात.

ही प्रणाली एक साधी state machine वापरते. प्रत्येक स्क्रीनमध्ये खालील गोष्टी असतात:

  • एक image ID
  • hotspots ची एक यादी
  • एक target destination

मी तयार केलेली साधने

डोळ्यांनी कोऑर्डिनेट्स मोजणे संथ असते. ही प्रक्रिया वेगवान करण्यासाठी मी एक स्वतंत्र HTML editor तयार केला आहे.

  • कॅनव्हासवर स्क्रीनशॉट अपलोड करा.
  • आयत (rectangle) काढण्यासाठी माऊस ड्रॅग करा.
  • एडिटर आपोआप टक्केवारी कोऑर्डिनेट्सची गणना करतो.
  • ड्रॉपडाउनद्वारे त्या क्षेत्राला दुसऱ्या स्क्रीनशी जोडा.
  • अंतिम ऑब्जेक्ट थेट तुमच्या कोडमध्ये एक्सपोर्ट करा.

वापरकर्त्यांना मदत करण्यासाठी, मी क्लिक करण्यायोग्य क्षेत्रांना एक 'पल्सिंग ब्लू ग्लो' (pulsing blue glow) दिला आहे. यामुळे त्यांना नेमके कुठे टॅप करायचे आहे हे समजते.

महत्त्वाचे तांत्रिक धडे

  1. Firebase Security: स्टोरेज URLs मॅन्युअली तयार करू नका. SDK मधील getDownloadURL मेथड वापरा. यामध्ये आवश्यक auth token समाविष्ट असतो. याशिवाय, एरर न दाखवता इमेज लोड होण्यास अपयश येईल.

  2. Layout Fixes: flex column लेआउटमध्ये, पॅरेंटला (parent) एक स्पष्ट उंची (explicit height) द्या. चिलड्रन्सना (children) min-height 0 सेट करा. यामुळे लेआउट कोलमडणे आणि overflow च्या समस्या टाळता येतात.

  3. Scaling: CSS transform scale प्रॉपर्टी वापरा. यामुळे इमेज आणि hotspots एकत्र रिसाईज होऊ शकतात. यामुळे स्क्रीनचा आकार काहीही असला तरी सर्व काही प्रमाणात (in proportion) राहते.

  4. Speed: एक-एक करून URLs फेच केल्यामुळे लॅग (lag) निर्माण होतो. मी इन-मेमरी कॅश (in-memory cache) आणि बॅकग्राउंड प्रीलोड फंक्शन लागू केले आहे. मॉडेल उघडल्यावर सर्व इमेज समांतर (in parallel) लोड होतात. यामुळे नेव्हिगेशन अगदी झटपट वाटते.

निकाल

  • पूर्ण नेव्हिगेशनसह 20 स्क्रीन.
  • 52 इंटरअॅक्टिव्ह hotspots.
  • ऑटो-स्केलिंगमुळे स्क्रोलबारची शून्य गरज.
  • प्रीलोडिंगमुळे झटपट ट्रान्झिशन्स.

स्त्रोत: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e