ಒಂದು ಸಂವಾದಾತ್ಮಕ ಆ್ಯಪ್ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ನಿರ್ಮಿಸುವುದು
ಸಪೋರ್ಟ್ ತಂಡಗಳು ತಾವು ಎಂದಿಗೂ ಇನ್ಸ್ಟಾಲ್ ಮಾಡದ ಆ್ಯಪ್ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಅನೇಕ ಬಾರಿ ಕಷ್ಟಪಡುತ್ತವೆ.
ಸ್ಕ್ರೀನ್ಶಾಟ್ಗಳಿರುವ PDF ಒಂದು ಸಾಮಾನ್ಯ ಪರಿಹಾರವಾಗಿದೆ. ಆದರೆ ಹೆಚ್ಚಿನ ಜನರು PDFಗಳನ್ನು ಓದುವುದಿಲ್ಲ. ನಾನು ಅದಕ್ಕಿಂತ ಉತ್ತಮವಾದದ್ದನ್ನು ನಿರ್ಮಿಸಲು ಬಯಸಿದೆ. ನೈಜ ಆ್ಯಪ್ನಂತೆಯೇ ಅನುಭವ ನೀಡುವ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ನಾನು ಬಯಸಿದೆ. ನೀವು ಹೋಮ್ ಸ್ಕ್ರೀನ್ ಅನ್ನು ನೋಡಿ, ಒಂದು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ, ಮುಂದಿನ ಸ್ಕ್ರೀನ್ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.
ನಾನು ನೈಜ ಸ್ಕ್ರೀನ್ಶಾಟ್ಗಳು ಮತ್ತು ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದ ಹಾಟ್ಸ್ಪಾಟ್ಗಳನ್ನು (hotspots) ಬಳಸಿ ಒಂದು ಸಂವಾದಾತ್ಮಕ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ನಿರ್ಮಿಸಿದೆ.
ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
ನಾನು ಚಿತ್ರಗಳಿಗಾಗಿ Firebase Storage ಮತ್ತು ಲಾಜಿಕ್ಗಾಗಿ vanilla JavaScript ಅನ್ನು ಬಳಸಿದ್ದೇನೆ. ಯಾವುದೇ ಬಾಹ್ಯ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಿಲ್ಲ.
- ಪ್ರತಿ ಸ್ಕ್ರೀನ್ ಒಂದು ಪೂರ್ಣ ಚಿತ್ರವಾಗಿದೆ.
- ನಾನು ಚಿತ್ರದ ಮೇಲೆ 'ಹಾಟ್ಸ್ಪಾಟ್ಗಳು' ಎಂದು ಕರೆಯಲ್ಪಡುವ ಅದೃಶ್ಯ ಆಯತಗಳನ್ನು (rectangles) ಇರಿಸುತ್ತೇನೆ.
- ಈ ಹಾಟ್ಸ್ಪಾಟ್ಗಳು ಪಿಕ್ಸೆಲ್ಗಳ ಬದಲಿಗೆ ಶೇಕಡಾವಾರು (percentages) ಪ್ರಮಾಣವನ್ನು ಬಳಸುತ್ತವೆ. ಇದು ವಿಂಡೋ ಗಾತ್ರ ಬದಲಾದಾಗ ಅವುಗಳು ಸರಿಯಾಗಿ ಜೋಡಿಸ್ತಿರಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
- ಒಂದು ಸರಳ ಸ್ಟೇಟ್ ಮೆಷಿನ್ (state machine) ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಪ್ರತಿ ಸ್ಕ್ರೀನ್ ಒಂದು ID, ಒಂದು ಚಿತ್ರ ಮತ್ತು ಹಾಟ್ಸ್ಪಾಟ್ಗಳ ಪಟ್ಟಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ.
ಎಡಿಟರ್
ಕೈಯಿಂದ ಕೋಆರ್ಡಿನೇಟ್ಗಳನ್ನು (coordinates) ಅಳೆಯುವುದು ನಿಧಾನವಾದ ಕೆಲಸ. ಪ್ರಕ್ರಿಯೆಯನ್ನು ವೇಗಗೊಳಿಸಲು ನಾನು ಒಂದು ಸ್ವತಂತ್ರ HTML ಎಡಿಟರ್ ಅನ್ನು ನಿರ್ಮಿಸಿದೆ.
- ಸ್ಕ್ರೀನ್ಶಾಟ್ ಅಪ್ಲೋಡ್ ಮಾಡಿ.
- ಹಾಟ್ಸ್ಪಾಟ್ ಅನ್ನು ಬಿಡಿಸಲು ನಿಮ್ಮ ಮೌಸ್ ಅನ್ನು ಎಳೆಯಿರಿ.
- ಹಾಟ್ಸ್ಪಾಟ್ ಅನ್ನು ಗುರಿ ಸ್ಕ್ರೀನ್ಗೆ ಲಿಂಕ್ ಮಾಡಿ.
- ಕೋಡ್ ಅನ್ನು ನೇರವಾಗಿ ಎಕ್ಸ್ಪೋರ್ಟ್ ಮಾಡಿ.
ವಿನ್ಯಾಸದ ಆಯ್ಕೆಗಳು
ಪ್ರತಿಯೊಂದು ಸ್ಕ್ರೀನ್ನಲ್ಲಿ ಪೂರ್ಣ ನ್ಯಾವಿಗೇಷನ್ ಇರುವುದಿಲ್ಲ. ಗೊಂದಲವನ್ನು ತಪ್ಪಿಸಲು, ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶಗಳಿಗೆ ನಾನು ಪಲ್ಸಿಂಗ್ ನೀಲಿ ಹೊಳಪನ್ನು (pulsing blue glow) ಸೇರಿಸಿದ್ದೇನೆ. ಇದು ಬಳಕೆದಾರರು ಎಲ್ಲಿ ಟ್ಯಾಪ್ ಮಾಡಬಹುದು ಎಂಬುದನ್ನು ನಿಖರವಾಗಿ ತೋರಿಸುತ್ತದೆ.
ಪ್ರಮುಖ ತಾಂತ್ರಿಕ ಪಾಠಗಳು
- Firebase Storage: URLಗಳನ್ನು ಮ್ಯಾನುಯಲ್ ಆಗಿ ನಿರ್ಮಿಸಬೇಡಿ. SDK ವಿಧಾನವಾದ
getDownloadURLಅನ್ನು ಬಳಸಿ. ಇದು ಸೆಕ್ಯೂರಿಟಿ ರೂಲ್ಸ್ಗಳನ್ನು ಬೈಪಾಸ್ ಮಾಡಲು ಅಗತ್ಯವಿರುವ ಆಥ್ ಟೋಕನ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. - CSS Flexbox: ನೀವು ಕಾಲಂ ಲೇಔಟ್ನಲ್ಲಿ
flex: 1ಬಳಸುತ್ತಿದ್ದರೆ, ಪೇರೆಂಟ್ (parent) ಎಲಿಮೆಂಟ್ಗೆ ಸ್ಪಷ್ಟವಾದ ಎತ್ತರ (explicit height) ಇರಬೇಕು. ಓವರ್ಫ್ಲೋ ತಡೆಯಲು ಚೈಲ್ಡ್ (child) ಎಲಿಮೆಂಟ್ಗೆmin-height: 0ಅನ್ನು ಸೆಟ್ ಮಾಡಿ. - Performance: ಪ್ರತಿ ಕ್ಲಿಕ್ ಮಾಡುವಾಗ Firebase ಅನ್ನು ಕರೆಯುವುದು ವಿಳಂಬವನ್ನು (lag) ಉಂಟುಮಾಡುತ್ತದೆ. ನಾನು ಇನ್-ಮೆಮೊರಿ ಕ್ಯಾಶ್ (in-memory cache) ಅನ್ನು ಅಳವಡಿಸಿದೆ ಮತ್ತು ಮಾಡಲ್ ತೆರೆದಾಗ ಎಲ್ಲಾ ಚಿತ್ರಗಳನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡಿದೆ. ಇದು ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ತಕ್ಷಣವೇ ಮಾಡುವಂತೆ ಮಾಡುತ್ತದೆ.
- Scaling: CSS
transform: scale()ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ. ಇದು ಸ್ಕ್ರೀನ್ ಗಾತ್ರ ಏನೇ ಇರಲಿ, ಚಿತ್ರ ಮತ್ತು ಹಾಟ್ಸ್ಪಾಟ್ಗಳು ಸರಿಯಾಗಿ ಜೋಡಿಸ್ತಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಫಲಿತಾಂಶ
- ನೈಜ ಫೋನ್ನಂತೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬಹುದಾದ 20 ಸ್ಕ್ರೀನ್ಗಳು.
- ದೃಶ್ಯ ಸೂಚನೆಗಳೊಂದಿಗೆ (visual cues) 52 ಹಾಟ್ಸ್ಪಾಟ್ಗಳು.
- ಪ್ರೀಲೋಡಿಂಗ್ ಮತ್ತು ಕ್ಯಾಶಿಂಗ್ ಮೂಲಕ ತಕ್ಷಣವೇ ಲೋಡ್ ಆಗುವುದು.
- ಯಾವುದೇ ಮಾಡಲ್ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವ ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸೈನ್.