𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵 𝘄𝗶𝘁𝗵 𝗖𝗹𝗮𝘂𝗱𝗲
ਮੈਂ ਇੱਕ ਲੇਖਕ ਹਾਂ, ਕੋਡਰ ਨਹੀਂ। ਮੇਰੀ ਤਕਨੀਕੀ ਮੁਹਾਰਤ 1999 ਦੇ ਬੁਨਿਆਦੀ HTML ਤੱਕ ਹੀ ਸੀਮਤ ਹੈ।
ਪਰ ਮੈਂ ਹੁਣੇ ਇੱਕ ਅਸਲੀ, ਕੰਮ ਕਰਨ ਵਾਲਾ ਟੂਲ ਬਣਾਇਆ ਹੈ।
ਮੈਂ MLH ਇਵੈਂਟਸ ਲਈ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਤ ਫੋਟੋ ਬੂਥ ਬਣਾਇਆ ਹੈ। ਹਾਜ਼ਰ ਹੋਣ ਵਾਲੇ ਇੱਕ ਸੈਲਫੀ ਖਿੱਚ ਸਕਦੇ ਹਨ, ਇੱਕ ਬ੍ਰਾਂਡਡ ਫਰੇਮ ਜੋੜ ਸਕਦੇ ਹਨ, ਅਤੇ ਇਸਨੂੰ ਆਪਣੇ ਫ਼ੋਨਾਂ ਵਿੱਚ ਸੇਵ ਕਰ ਸਕਦੇ ਹਨ। ਕੋਈ ਐਪ ਸਟੋਰ ਨਹੀਂ। ਕੋਈ ਖਾਤਾ ਨਹੀਂ। ਸਿਰਫ਼ ਇੱਕ ਲਿੰਕ।
ਮੈਂ Claude ਦੇ ਨਾਲ 'ਵਾਈਬ ਕੋਡਿੰਗ' (vibe coding) ਨਾਮਕ ਇੱਕ ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਮੈਂ ਇਹ ਕਿਵੇਂ ਕੀਤਾ ਅਤੇ ਮੈਂ ਕੀ ਸਿੱਖਿਆ।
𝗧𝗵𝗲 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆
ਮੈਂ ਲਾਈਵ ਇਵੈਂਟਸ ਲਈ ਕੁਝ ਭਰੋਸੇਯੋਗ ਚਾਹੁੰਦਾ ਸੀ। Claude ਨੇ ਗੁੰਝਲਦਾਰ ਫਰੇਮਵਰਕਸ ਦੀ ਬਜਾਏ ਇੱਕ ਸਿੰਗਲ index.html ਫਾਈਲ ਬਣਾਉਣ ਦੀ ਸਲਾਹ ਦਿੱਤੀ।
- ਇਹ ਇੱਕ ਹੀ ਫਾਈਲ ਵਿੱਚ HTML, CSS, ਅਤੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
- ਇਸ ਵਿੱਚ ਕੋਈ ਬਿਲਡ ਸਟੈਪਸ ਜਾਂ ਇੰਸਟਾਲੇਸ਼ਨ ਨਹੀਂ ਹਨ।
- ਇਹ GitHub Pages 'ਤੇ ਮੁਫ਼ਤ ਵਿੱਚ ਹੋਸਟ ਹੁੰਦਾ ਹੈ।
- ਇਸ ਵਿੱਚ ਘੱਟ ਹਿੱਸੇ ਹਨ, ਇਸ ਲਈ ਇਸਨੂੰ ਖਰਾਬ ਕਰਨਾ ਮੁਸ਼ਕਲ ਹੈ।
𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗕𝗶𝗹𝗱
ਐਪ ਇੱਕ ਸੈਲਫੀ ਨੂੰ ਟ੍ਰਾਂਸਪੇਰੈਂਟ PNG ਫਰੇਮ ਦੇ ਨਾਲ ਜੋੜਨ ਲਈ HTML canvas ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ। ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੁੰਦਾ ਹੈ।
- ਯੂਜ਼ਰ ਦੀ ਫੋਟੋ ਕਦੇ ਵੀ ਉਨ੍ਹਾਂ ਦੇ ਡਿਵਾਈਸ ਤੋਂ ਬਾਹਰ ਨਹੀਂ ਜਾਂਦੀ।
- ਇਹ ਆਪਣੇ ਆਪ ਪ੍ਰਾਈਵੇਸੀ ਦੀ ਰੱਖਿਆ ਕਰਦਾ ਹੈ।
- ਮੈਂ ਫੋਟੋ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਅਲਾਈਨ ਕਰਨ ਲਈ 'pinch-to-zoom' ਵਰਗੇ ਜੈਸਚਰ (gestures) ਜੋੜੇ ਹਨ।
ਇੱਕ ਗੁੰਝਲਦਾਰ ਸਰਵਰ ਤੋਂ ਬਿਨਾਂ ਫਰੇਮਾਂ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ, ਮੈਂ Supabase ਦੀ ਵਰਤੋਂ ਕੀਤੀ।
- ਆਯੋਜਕ ਸਟੋਰੇਜ ਬੱਕਟ (storage bucket) ਵਿੱਚ ਫਰੇਮ ਅਪਲੋਡ ਕਰਦੇ ਹਨ।
- ਹਾਜ਼ਰ ਹੋਣ ਵਾਲੇ ਉਨ੍ਹਾਂ ਨੂੰ ਇੱਕ ਪਬਲਿਕ ਲਿੰਕ ਰਾਹੀਂ ਦੇਖ ਸਕਦੇ ਹਨ।
- ਸੁਰੱਖਿਆ ਡੇਟਾਬੇਸ ਪਾਲਿਸੀਆਂ ਦੁਆਰਾ ਸੰਭਾਲੀ ਜਾਂਦੀ ਹੈ, ਨਾ ਕਿ ਲੁਕਵੇਂ ਪਾਸਵਰਡਾਂ ਦੁਆਰਾ।
𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀
ਵਾਈਬ ਕੋਡਿੰਗ ਆਰਕੀਟੈਕਚਰ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ, ਪਰ ਤੁਹਾਨੂੰ ਕਾਰਜਸ਼ੀਲ ਵੇਰਵਿਆਂ (operational details) 'ਤੇ ਧਿਆਨ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ:
- ਡੇਟਾਬੇਸ ਸਲੀਪ (Database Sleep): ਮੁਫ਼ਤ Supabase ਪ੍ਰੋਜੈਕਟ ਨਿਰੱਲਤਾ (inactivity) ਤੋਂ ਬਾਅਦ ਰੁਕ ਜਾਂਦੇ ਹਨ। ਤੁਹਾਨੂੰ ਇਵੈਂਟ ਤੋਂ ਪਹਿਲਾਂ ਉਨ੍ਹਾਂ ਨੂੰ ਜਗਾਉਣਾ ਪਵੇਗਾ।
- ਕੈਨਵਸ ਟੇਂਟਿੰਗ (Canvas Tainting): ਕਿਸੇ ਵੱਖਰੇ ਸਰੋਤ ਤੋਂ ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਨਾਲ ਸੇਵ ਫੰਕਸ਼ਨ ਖਰਾਬ ਹੋ ਸਕਦਾ ਹੈ। ਮੈਂ ਇਸਨੂੰ crossOrigin ਸੈਟਿੰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਠੀਕ ਕੀਤਾ।
- ਮੋਬਾਈਲ UX: ਫ਼ੋਨਾਂ 'ਤੇ, ਮੈਂ ਨੇਟਿਵ ਸ਼ੇਅਰ ਸ਼ੀਟ (native share sheet) ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਇਹ ਯੂਜ਼ਰਾਂ ਨੂੰ ਇੱਕ ਟੈਪ ਵਿੱਚ ਸਿੱਧਾ ਆਪਣੇ ਕੈਮਰਾ ਰੋਲ ਵਿੱਚ ਫੋਟੋਆਂ ਸੇਵ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
𝗠𝘆 𝗔𝗱𝘃𝗶𝗰𝗲 𝗳𝗼𝗿 𝗬𝗼𝘂
ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਅਜ਼ਮਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਹਨਾਂ ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ:
- ਇੱਕ ਅਜਿਹਾ ਪ੍ਰੋਜੈਕਟ ਚੁਣੋ ਜਿਸਦੀਆਂ ਸੀਮਾਵਾਂ ਸਪੱਸ਼ਟ ਹੋਣ। ਇੱਕ ਫੋਟੋ ਬੂਥ ਇੱਕ ਸਪੱਸ਼ਟ ਟੀਚਾ ਹੈ। ਇੱਕ ਸੋਸ਼ਲ ਮੀਡੀਆ ਐਪ ਬਹੁਤ ਵੱਡੀ ਹੈ।
- AI ਨੂੰ "ਕਿਉਂ" ਸਮਝਾਉਣ ਲਈ ਕਹੋ। ਤਰਕ (reasoning) ਕੋਡ ਨਾਲੋਂ ਵਧੇਰੇ ਮਹੱਤਵਪੂਰਨ ਹੈ।
- ਡਿਫਸ (diffs) ਪੜ੍ਹੋ। ਬਿਨਾਂ ਰਿਵਿਊ ਕੀਤੇ AI ਨੂੰ ਆਪਣੀ ਸਾਈਟ ਬਦਲਣ ਨਾ ਦਿਓ।
ਵਾਈਬ ਕੋਡਿੰਗ ਦਾ ਮਤਲਬ ਇਹ ਨਹੀਂ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਨਹੀਂ ਸਮਝਦੇ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ AI ਸਿੰਟੈਕਸ (syntax) ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ ਜਦੋਂ ਕਿ ਤੁਸੀਂ ਲੌਜਿਕ (logic) ਅਤੇ ਟ੍ਰੇਡ-ਆਫਸ (tradeoffs) ਨੂੰ ਸੰਭਾਲਦੇ ਹੋ।
ਵਿਕਲਪਿਕ ਸਿੱਖਣ ਭਾਈਚਾਰਾ: https://t.me/GyaanSetuAi