ಸಂವಾದಾತ್ಮಕ ಆ್ಯಪ್ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ನಿರ್ಮಿಸುವುದು

ಸಪೋರ್ಟ್ ತಂಡಗಳು ತಾವು ಎಂದಿಗೂ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡದ ಆ್ಯಪ್‌ಗಳನ್ನು ಬಳಸುವಾಗ ಅನೇಕ ಬಾರಿ ಕಷ್ಟಪಡುತ್ತವೆ. PDF ಮ್ಯಾನುಯಲ್ ಒಂದು ಕೆಟ್ಟ ಪರಿಹಾರವಾಗಿದೆ ಏಕೆಂದರೆ ಯಾರೂ ಅವುಗಳನ್ನು ಓದುವುದಿಲ್ಲ.

ಬಳಕೆದಾರರು ಬ್ರೌಸರ್‌ನ ಒಳಗೇ ನೈಜ ಆ್ಯಪ್ ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು ಅನುವು ಮಾಡಿಕೊಡುವ ಒಂದು ಸಾಧನವನ್ನು ನಾನು ನಿರ್ಮಿಸಿದ್ದೇನೆ. ಇದು ನಿಜವಾದ ಫೋನ್ ಬಳಸಿದಂತೆಯೇ ಇರುತ್ತದೆ. ನೀವು ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ನಲ್ಲಿ ಒಂದು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ, ಮುಂದಿನ ಸ್ಕ್ರೀನ್ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ನಾನು ಚಿತ್ರಗಳಿಗಾಗಿ Firebase Storage ಮತ್ತು ಲಾಜಿಕ್‌ಗಾಗಿ vanilla JavaScript ಅನ್ನು ಬಳಸಿದ್ದೇನೆ. ಇದನ್ನು ಹಗುರವಾಗಿಸಲು ನಾನು ಬಾಹ್ಯ ಲೈಬ್ರರಿಗಳನ್ನು (external libraries) ಬಳಸದಂತೆ ನೋಡಿಕೊಂಡೆ.

ಇದರ ರಹಸ್ಯವೆಂದರೆ ಶೇಕಡಾವಾರು ಆಧಾರಿತ ಹಾಟ್‌ಸ್ಪಾಟ್‌ಗಳನ್ನು (percentage-based hotspots) ಬಳಸುವುದು. ಸ್ಥಿರ ಪಿಕ್ಸೆಲ್‌ಗಳ ಬದಲಿಗೆ, ನಾನು 0 ರಿಂದ 100 ರವರೆಗಿನ ಕೋಆರ್ಡಿನೇಟ್‌ಗಳನ್ನು ಬಳಸಿ ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇನೆ. ಇದು ವಿಂಡೋ ಗಾತ್ರ ಬದಲಾದಾಗಲೂ ಬಟನ್‌ಗಳು ಸರಿಯಾದ ಸ್ಥಾನದಲ್ಲಿರುವಂತೆ ನೋಡಿಕೊಳ್ಳುತ್ತದೆ.

ಈ ವ್ಯವಸ್ಥೆಯು ಸರಳ ಸ್ಟೇಟ್ ಮೆಷಿನ್ (state machine) ಅನ್ನು ಬಳಸುತ್ತದೆ. ಪ್ರತಿ ಸ್ಕ್ರೀನ್‌ನಲ್ಲಿ ಇವು ಇರುತ್ತವೆ:

  • ಒಂದು ಇಮೇಜ್ ID
  • ಹಾಟ್‌ಸ್ಪಾಟ್‌ಗಳ ಪಟ್ಟಿ
  • ಗುರಿ ತಲುಪಬೇಕಾದ ಸ್ಥಳ (target destination)

ನಾನು ನಿರ್ಮಿಸಿದ ಪರಿಕರಗಳು

ಕಣ್ಣಿನಿಂದ ಕೋಆರ್ಡಿನೇಟ್‌ಗಳನ್ನು ಅಳೆಯುವುದು ನಿಧಾನವಾದ ಕೆಲಸ. ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ವೇಗಗೊಳಿಸಲು ನಾನು ಒಂದು ಸ್ವತಂತ್ರ HTML ಎಡಿಟರ್ ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದೇನೆ.

  • ಕ್ಯಾನ್ವಾಸ್‌ಗೆ ಸ್ಕ್ರೀನ್‌ಶಾಟ್ ಅಪ್‌ಲೋಡ್ ಮಾಡಿ.
  • ಆಯತ ಚೌಕಟ್ಟನ್ನು (rectangle) ಬಿಡಿಸಲು ಮೌಸ್ ಅನ್ನು ಎಳೆಯಿರಿ.
  • ಎಡಿಟರ್ ಶೇಕಡಾವಾರು ಕೋಆರ್ಡಿನೇಟ್‌ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ.
  • ಡ್ರಾಪ್‌ಡೌನ್ ಮೂಲಕ ಆ ಪ್ರದೇಶವನ್ನು ಇನ್ನೊಂದು ಸ್ಕ್ರೀನ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ.
  • ಅಂತಿಮ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ಎಕ್ಸ್‌ಪೋರ್ಟ್ ಮಾಡಿ.

ಬಳಕೆದಾರರಿಗೆ ಸಹಾಯ ಮಾಡಲು, ನಾನು ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶಗಳಿಗೆ ಪಲ್ಸಿಂಗ್ ನೀಲಿ ಹೊಳಪನ್ನು (pulsing blue glow) ಸೇರಿಸಿದ್ದೇನೆ. ಇದು ಅವರು ಎಲ್ಲಿ ಟ್ಯಾಪ್ ಮಾಡಬಹುದು ಎಂಬುದನ್ನು ನಿಖರವಾಗಿ ತೋರಿಸುತ್ತದೆ.

ಪ್ರಮುಖ ತಾಂತ್ರಿಕ ಪಾಠಗಳು

  1. Firebase Security: ಸ್ಟೋರೇಜ್ URLಗಳನ್ನು ಮ್ಯಾನುಯಲ್ ಆಗಿ ನಿರ್ಮಿಸಬೇಡಿ. SDK ನಿಂದ getDownloadURL ಮೆಥಡ್ ಅನ್ನು ಬಳಸಿ. ಇದು ಅಗತ್ಯವಿರುವ auth ಟೋಕನ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಇಲ್ಲದಿದ್ದರೆ, ಯಾವುದೇ ಎರರ್ ತೋರಿಸದೆ ಚಿತ್ರಗಳು ಲೋಡ್ ಆಗಲು ವಿಫಲವಾಗುತ್ತವೆ.

  2. Layout Fixes: ಫ್ಲೆಕ್ಸ್ ಕಾಲಂ ಲೇಔಟ್‌ನಲ್ಲಿ (flex column layout), ಪೇರೆಂಟ್ ಮೇಲೆ ಸ್ಪಷ್ಟವಾದ ಎತ್ತರವನ್ನು (explicit height) ನಿಗದಿಪಡಿಸಿ. ಚೈಲ್ಡ್‌ಗಳ ಮೇಲೆ min-height ಅನ್ನು 0 ಎಂದು ಹೊಂದಿಸಿ. ಇದು ಲೇಔಟ್ ಕುಸಿತ ಮತ್ತು ಓವರ್‌ಫ್ಲೋ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ.

  3. Scaling: CSS transform scale ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ. ಇದು ಚಿತ್ರ ಮತ್ತು ಹಾಟ್‌ಸ್ಪಾಟ್‌ಗಳು ಒಟ್ಟಿಗೆ ಗಾತ್ರ ಬದಲಿಸಿಕೊಳ್ಳಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಸ್ಕ್ರೀನ್ ಗಾತ್ರ ಏನೇ ಇರಲಿ ಎಲ್ಲವನ್ನೂ ಸಮಾನುಪಾತದಲ್ಲಿ ಇರಿಸುತ್ತದೆ.

  4. Speed: URLಗಳನ್ನು ಒಂದೊಂದಾಗಿ ಪಡೆಯುವುದು ವಿಳಂಬವನ್ನು (lag) ಉಂಟುಮಾಡುತ್ತದೆ. ನಾನು ಇನ್-ಮೆಮರಿ ಕ್ಯಾಶ್ (in-memory cache) ಮತ್ತು ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಪ್ರೀಲೋಡ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಅಳವಡಿಸಿದ್ದೇನೆ. ಮಾಡಲ್ ತೆರೆದಾಗ ಎಲ್ಲಾ ಚಿತ್ರಗಳು ಸಮಾಂತರವಾಗಿ (in parallel) ಲೋಡ್ ಆಗುತ್ತವೆ. ಇದು ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ತಕ್ಷಣವೇ ನಡೆಯುವಂತೆ ಮಾಡುತ್ತದೆ.

ಫಲಿತಾಂಶ

  • ಪೂರ್ಣ ನ್ಯಾವಿಗೇಶನ್ ಹೊಂದಿರುವ 20 ಸ್ಕ್ರೀನ್‌ಗಳು.
  • 52 ಸಂವಾದಾತ್ಮಕ ಹಾಟ್‌ಸ್ಪಾಟ್‌ಗಳು.
  • ಆಟೋ-ಸ್ಕೇಲಿಂಗ್‌ನಿಂದಾಗಿ ಯಾವುದೇ ಸ್ಕ್ರಾಲ್‌ಬಾರ್‌ಗಳಿಲ್ಲ.
  • ಪ್ರೀಲೋಡಿಂಗ್ ಮೂಲಕ ತಕ್ಷಣದ ಪರಿವರ್ತನೆಗಳು.

ಮೂಲ: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e