ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਐਪ ਗਾਈਡ ਬਣਾਉਣਾ
ਸਪੋਰਟ ਟੀਮਾਂ ਨੂੰ ਅਕਸਰ ਉਦੋਂ ਮੁਸ਼ਕਲ ਆਉਂਦੀ ਹੈ ਜਦੋਂ ਉਹ ਅਜਿਹੀਆਂ ਐਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ ਜੋ ਉਨ੍ਹਾਂ ਨੇ ਕਦੇ ਇੰਸਟਾਲ ਨਹੀਂ ਕੀਤੀਆਂ। ਇੱਕ PDF ਮੈਨੂਅਲ ਇੱਕ ਮਾੜਾ ਹੱਲ ਹੈ ਕਿਉਂਕਿ ਕੋਈ ਵੀ ਉਨ੍ਹਾਂ ਨੂੰ ਨਹੀਂ ਪੜ੍ਹਦਾ।
ਮੈਂ ਇੱਕ ਅਜਿਹਾ ਟੂਲ ਬਣਾਇਆ ਹੈ ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਅੰਦਰ ਅਸਲੀ ਐਪ ਸਕ੍ਰੀਨਸ਼ੌਟਸ ਨਾਲ ਇੰਟਰਐਕਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਹ ਅਸਲੀ ਫ਼ੋਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਂਗ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ। ਤੁਸੀਂ ਸਕ੍ਰੀਨਸ਼ੌਟ 'ਤੇ ਇੱਕ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ, ਅਤੇ ਅਗਲੀ ਸਕ੍ਰੀਨ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ।
How It Works
ਮੈਂ ਤਸਵੀਰਾਂ ਲਈ Firebase Storage ਅਤੇ ਲੌਜਿਕ ਲਈ vanilla JavaScript ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਇਸਨੂੰ ਹਲਕਾ ਰੱਖਣ ਲਈ ਮੈਂ ਬਾਹਰੀ ਲਾਇਬ੍ਰੇਰੀਆਂ ਤੋਂ ਬਚਿਆ।
ਇਸ ਦਾ ਭੇਦ ਪ੍ਰਤੀਸ਼ਤ-ਅਧਾਰਤ (percentage-based) ਹੌਟਸਪੌਟਸ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ। ਫਿਕਸਡ ਪਿਕਸਲ ਦੀ ਬਜਾਏ, ਮੈਂ 0 ਤੋਂ 100 ਤੱਕ ਦੇ ਕੋਆਰਡੀਨੇਟਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਖੇਤਰਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹਾਂ। ਇਹ ਵਿੰਡੋ ਦਾ ਆਕਾਰ ਬਦਲਣ 'ਤੇ ਵੀ ਬਟਨਾਂ ਨੂੰ ਅਲਾਈਨ ਰੱਖਦਾ ਹੈ।
ਸਿਸਟਮ ਇੱਕ ਸਧਾਰਨ ਸਟੇਟ ਮਸ਼ੀਨ (state machine) ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਹਰੇਕ ਸਕ੍ਰੀਨ ਵਿੱਚ ਹੁੰਦਾ ਹੈ:
- ਇੱਕ image ID
- ਹੌਟਸਪੌਟਸ ਦੀ ਇੱਕ ਸੂਚੀ
- ਇੱਕ target destination
The Tools I Built
ਅੱਖਾਂ ਨਾਲ ਕੋਆਰਡੀਨੇਟਸ ਮਾਪਣਾ ਹੌਲੀ ਹੁੰਦਾ ਹੈ। ਮੈਂ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਤੇਜ਼ ਕਰਨ ਲਈ ਇੱਕ ਸਟੈਂਡਅਲੋਨ HTML ਐਡੀਟਰ ਬਣਾਇਆ।
- ਕੈਨਵਸ (canvas) 'ਤੇ ਇੱਕ ਸਕ੍ਰੀਨਸ਼ੌਟ ਅਪਲੋਡ ਕਰੋ।
- ਆਇਤ (rectangle) ਬਣਾਉਣ ਲਈ ਆਪਣੇ ਮਾਊਸ ਨੂੰ ਡਰੈਗ ਕਰੋ।
- ਐਡੀਟਰ ਆਪਣੇ ਆਪ ਪ੍ਰਤੀਸ਼ਤ ਕੋਆਰਡੀਨੇਟਸ ਦੀ ਗਣਨਾ ਕਰਦਾ ਹੈ।
- ਡ੍ਰੌਪਡਾਊਨ ਰਾਹੀਂ ਖੇਤਰ ਨੂੰ ਦੂਜੀ ਸਕ੍ਰੀਨ ਨਾਲ ਜੋੜੋ।
- ਅੰਤਿਮ ਆਬਜੈਕਟ ਨੂੰ ਸਿੱਧਾ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਐਕਸਪੋਰਟ ਕਰੋ।
ਉਪਭੋਗਤਾਵਾਂ ਦੀ ਮਦਦ ਕਰਨ ਲਈ, ਮੈਂ ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਖੇਤਰਾਂ ਵਿੱਚ ਇੱਕ ਪਲਸਿੰਗ ਨੀਲੀ ਚਮਕ (pulsing blue glow) ਜੋੜੀ ਹੈ। ਇਹ ਦੱਸਦਾ ਹੈ ਕਿ ਉਹ ਬਿਲਕੁਲ ਕਿੱਥੇ ਟੈਪ ਕਰ ਸਕਦੇ ਹਨ।
Key Technical Lessons
Firebase Security: ਸਟੋਰੇਜ URL ਮੈਨੂਅਲੀ ਨਾ ਬਣਾਓ। SDK ਤੋਂ
getDownloadURLਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਸ ਵਿੱਚ ਲੋੜੀਂਦਾ auth token ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ। ਇਸ ਤੋਂ ਬਿਨਾਂ, ਤਸਵੀਰਾਂ ਬਿਨਾਂ ਕੋਈ ਐਰਰ ਦਿਖਾਏ ਲੋਡ ਹੋਣ ਵਿੱਚ ਅਸਫਲ ਰਹਿ ਜਾਣਗੀਆਂ।Layout Fixes: ਇੱਕ flex column ਲੇਆਉਟ ਵਿੱਚ, ਪੇਰੈਂਟ (parent) 'ਤੇ ਇੱਕ ਸਪਸ਼ਟ ਉਚਾਈ (explicit height) ਸੈੱਟ ਕਰੋ। ਬੱਚਿਆਂ (children) 'ਤੇ
min-heightਨੂੰ 0 'ਤੇ ਸੈੱਟ ਕਰੋ। ਇਹ ਲੇਆਉਟ ਕੋਲੈਪਸ ਅਤੇ ਓਵਰਫਲੋ (overflow) ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਰੋਕਦਾ ਹੈ।Scaling: CSS
transform scaleਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਤਸਵੀਰ ਅਤੇ ਹੌਟਸਪੌਟਸ ਨੂੰ ਇਕੱਠੇ ਰੀਸਾਈਜ਼ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਹ ਸਕ੍ਰੀਨ ਦੇ ਆਕਾਰ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ ਸਭ ਕੁਝ ਅਨੁਪਾਤ ਵਿੱਚ ਰੱਖਦਾ ਹੈ।Speed: ਇੱਕ-ਇੱਕ ਕਰਕੇ URL ਫੈਚ ਕਰਨਾ ਲੈਗ (lag) ਪੈਦਾ ਕਰਦਾ ਹੈ। ਮੈਂ ਇੱਕ in-memory cache ਅਤੇ ਇੱਕ ਬੈਕਗ੍ਰਾਊਂਡ preload ਫੰਕਸ਼ਨ ਲਾਗੂ ਕੀਤਾ। ਜਦੋਂ ਮੋਡਲ ਖੁੱਲ੍ਹਦਾ ਹੈ ਤਾਂ ਸਾਰੀਆਂ ਤਸਵੀਰਾਂ ਇੱਕੋ ਸਮੇਂ (in parallel) ਲੋਡ ਹੁੰਦੀਆਂ ਹਨ। ਇਹ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਤੁਰੰਤ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦਾ ਹੈ।
The Result
- ਪੂਰੀ ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਨਾਲ 20 ਸਕ੍ਰੀਨਾਂ।
- 52 ਇੰਟਰਐਕਟਿਵ ਹੌਟਸਪੌਟਸ।
- ਆਟੋ-ਸਕੇਲਿੰਗ ਦੇ ਸਦਕਾ ਜ਼ੀਰੋ ਸਕ੍ਰੋਲਬਾਰ।
- ਪ੍ਰੀਲੋਡਿੰਗ ਰਾਹੀਂ ਤੁਰੰਤ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ।