ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਐਪ ਗਾਈਡ ਬਣਾਉਣਾ
ਸਪੋਰਟ ਟੀਮਾਂ ਨੂੰ ਅਕਸਰ ਉਨ੍ਹਾਂ ਐਪਸ ਨਾਲ ਮੁਸ਼ਕਲ ਆਉਂਦੀ ਹੈ ਜੋ ਉਨ੍ਹਾਂ ਨੇ ਕਦੇ ਇੰਸਟਾਲ ਨਹੀਂ ਕੀਤੀਆਂ।
ਸਕ੍ਰੀਨਸ਼ੌਟਸ ਵਾਲੀ ਇੱਕ PDF ਮਿਆਰੀ ਹੱਲ ਹੈ। ਜ਼ਿਆਦਾਤਰ ਲੋਕ PDF ਨਹੀਂ ਪੜ੍ਹਦੇ। ਮੈਂ ਕੁਝ ਬਿਹਤਰ ਬਣਾਉਣਾ ਚਾਹੁੰਦਾ ਸੀ। ਮੈਂ ਇੱਕ ਅਜਿਹੀ ਗਾਈਡ ਚਾਹੁੰਦਾ ਸੀ ਜੋ ਅਸਲੀ ਐਪ ਵਾਂਗ ਮਹਿਸੂਸ ਹੋਵੇ। ਤੁਸੀਂ ਹੋਮ ਸਕ੍ਰੀਨ ਦੇਖਦੇ ਹੋ, ਇੱਕ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ, ਅਤੇ ਅਗਲੀ ਸਕ੍ਰੀਨ ਆ ਜਾਂਦੀ ਹੈ।
ਮੈਂ ਅਸਲੀ ਸਕ੍ਰੀਨਸ਼ੌਟਸ ਅਤੇ ਕਲਿੱਕ ਕਰਨ ਯੋਗ hotspots ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਗਾਈਡ ਬਣਾਈ।
How It Works
ਮੈਂ ਤਸਵੀਰਾਂ ਲਈ Firebase Storage ਅਤੇ ਲੌਜਿਕ ਲਈ vanilla JavaScript ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਕੋਈ ਬਾਹਰੀ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨਹੀਂ।
- ਹਰ ਸਕ੍ਰੀਨ ਇੱਕ ਪੂਰੀ ਤਸਵੀਰ ਹੈ।
- ਮੈਂ ਤਸਵੀਰ ਦੇ ਉੱਪਰ ਅਦਿੱਖ ਆਇਤਾਂ (rectangles) ਰੱਖਦਾ ਹਾਂ, ਜਿਨ੍ਹਾਂ ਨੂੰ hotspots ਕਿਹਾ ਜਾਂਦਾ ਹੈ।
- ਇਹ hotspots pixels ਦੀ ਬਜਾਏ ਪ੍ਰਤੀਸ਼ਤ (percentages) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਇਹ ਵਿੰਡੋ ਦੇ ਆਕਾਰ ਦੇ ਬਦਲਣ 'ਤੇ ਉਹਨਾਂ ਨੂੰ ਅਲਾਈਨ ਰੱਖਦਾ ਹੈ।
- ਇੱਕ ਸਧਾਰਨ state machine ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਸੰਭਾਲਦੀ ਹੈ। ਹਰ ਸਕ੍ਰੀਨ ਦੀ ਇੱਕ ID, ਇੱਕ ਤਸਵੀਰ ਅਤੇ hotspots ਦੀ ਇੱਕ ਸੂਚੀ ਹੁੰਦੀ ਹੈ।
The Editor
ਹੱਥ ਨਾਲ ਕੋਆਰਡੀਨੇਟਸ (coordinates) ਮਾਪਣਾ ਹੌਲੀ ਪ੍ਰਕਿਰਿਆ ਹੈ। ਮੈਂ ਇਸ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਤੇਜ਼ ਕਰਨ ਲਈ ਇੱਕ ਸਟੈਂਡ-ਅਲੋਨ HTML ਐਡੀਟਰ ਬਣਾਇਆ।
- ਇੱਕ ਸਕ੍ਰੀਨਸ਼ੌਟ ਅਪਲੋਡ ਕਰੋ।
- hotspot ਬਣਾਉਣ ਲਈ ਆਪਣੇ ਮਾਊਸ ਨੂੰ ਡਰੈਗ ਕਰੋ।
- hotspot ਨੂੰ ਟਾਰਗੇਟ ਸਕ੍ਰੀਨ ਨਾਲ ਲਿੰਕ ਕਰੋ।
- ਕੋਡ ਨੂੰ ਸਿੱਧਾ ਐਕਸਪੋਰਟ ਕਰੋ।
Design Choices
ਹਰ ਸਕ੍ਰੀਨ ਵਿੱਚ ਪੂਰੀ ਨੈਵੀਗੇਸ਼ਨ ਨਹੀਂ ਹੁੰਦੀ। ਉਲਝਣ ਤੋਂ ਬਚਣ ਲਈ, ਮੈਂ ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਖੇਤਰਾਂ ਵਿੱਚ ਇੱਕ ਪਲਸਿੰਗ ਨੀਲੀ ਚਮਕ (pulsing blue glow) ਜੋੜੀ ਹੈ। ਇਹ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਹੀ ਤੌਰ 'ਤੇ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਉਹ ਕਿੱਥੇ ਟੈਪ ਕਰ ਸਕਦੇ ਹਨ।
Key Technical Lessons
- Firebase Storage: URL ਮੈਨੂਅਲੀ ਨਾ ਬਣਾਓ। SDK ਮੈਥਡ
getDownloadURLਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਸ ਵਿੱਚ ਸੁਰੱਖਿਆ ਨਿਯਮਾਂ ਨੂੰ ਬਾਈਪਾਸ ਕਰਨ ਲਈ ਲੋੜੀਂਦਾ auth token ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ। - CSS Flexbox: ਜੇਕਰ ਤੁਸੀਂ column layout ਵਿੱਚ
flex: 1ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਪੇਰੈਂਟ (parent) ਦੀ ਇੱਕ ਸਪਸ਼ਟ ਉਚਾਈ (explicit height) ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। Overflow ਨੂੰ ਰੋਕਣ ਲਈ ਚਾਈਲਡ (child) 'ਤੇmin-height: 0ਸੈੱਟ ਕਰੋ। - Performance: ਹਰ ਕਲਿੱਕ 'ਤੇ Firebase ਨੂੰ ਕਾਲ ਕਰਨ ਨਾਲ ਲੈਗ (lag) ਵਧਦਾ ਹੈ। ਮੈਂ ਇੱਕ in-memory cache ਲਾਗੂ ਕੀਤਾ ਅਤੇ ਮੋਡਲ ਖੁੱਲ੍ਹਣ ਵੇਲੇ ਸਾਰੀਆਂ ਤਸਵੀਰਾਂ ਨੂੰ preloaded ਕਰ ਦਿੱਤਾ। ਇਹ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਤੁਰੰਤ ਬਣਾਉਂਦਾ ਹੈ।
- Scaling: CSS
transform: scale()ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਸਕ੍ਰੀਨ ਦੇ ਆਕਾਰ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ ਤਸਵੀਰ ਅਤੇ hotspots ਬਿਲਕੁਲ ਅਲਾਈਨ ਰਹਿਣ।
The Result
- 20 ਸਕ੍ਰੀਨਾਂ ਇੱਕ ਅਸਲੀ ਫ਼ੋਨ ਵਾਂਗ ਨੈਵੀਗੇਟ ਕੀਤੀਆਂ ਗਈਆਂ।
- ਵਿਜ਼ੂਅਲ ਸੰਕੇਤਾਂ (visual cues) ਦੇ ਨਾਲ 52 hotspots।
- Preloading ਅਤੇ caching ਰਾਹੀਂ ਤੁਰੰਤ ਲੋਡਿੰਗ।
- ਰਿਸਪੌਂਸਿਵ ਡਿਜ਼ਾਈਨ ਜੋ ਕਿਸੇ ਵੀ ਮੋਡਲ ਆਕਾਰ ਵਿੱਚ ਫਿੱਟ ਹੁੰਦਾ ਹੈ।