Vibe Coding beginners کے لیے: میں نے ایک Photo Booth ویب ایپ کیسے بنائی

میں ایک لکھاری ہوں، کوڈر نہیں۔ میری تکنیکی مہارتیں 1999 میں بنیادی HTML تک محدود رہ گئیں۔

گزشتہ ہفتے، میں نے اپنا پہلا حقیقی ٹول بنایا۔ میں نے MLH کے لیے ایک کام کرنے والا فوٹو بوتھ ویب ایپ "vibe code" کرنے کے لیے Claude کا استعمال کیا۔

یہاں بتایا گیا ہے کہ ایک غیر کوڈر نے لائیو ایونٹس کے لیے ایک فعال ایپ کیسے بنائی۔

مسئلہ MLH بہت سے ایونٹس منعقد کرتا ہے۔ ہمیں براؤزر پر مبنی فوٹو بوتھ کی ضرورت تھی۔

• شرکاء اپنے فون پر ایک لنک کھولتے ہیں۔
• وہ ایک سیلفی لیتے ہیں یا تصویر اپ لوڈ کرتے ہیں۔
• وہ ایک برانڈڈ فریم شامل کرتے ہیں۔
• وہ تصویر کو اپنے کیمرہ رول میں محفوظ کرتے ہیں۔
• کوئی اکاؤنٹ نہیں۔ کوئی ایپ اسٹور نہیں۔ بس ایک لنک۔

تکنیکی حکمت عملی میں ایک پیچیدہ فریم ورک استعمال کرنا چاہتا تھا۔ Claude نے مجھے ایسا کرنے سے روک دیا۔

لائیو ایونٹس کے لیے، جتنے کم پیچیدہ حصے ہوں گے اتنا ہی بہتر ہے۔ میں نے پورا ٹول ایک ہی index.html فائل میں بنایا۔ یہ HTML، CSS، اور JavaScript استعمال کرتا ہے۔ اس میں کوئی پیچیدہ build step نہیں ہے۔ یہ مفت میں GitHub Pages پر رہتا ہے۔

پرائیویسی کا فائدہ میں نے فوٹو اور فریم کو یکجا کرنے کے لیے ایک HTML canvas کا استعمال کیا۔ تمام پروسیسنگ صارف کے براؤزر میں ہوتی ہے۔ تصویر کبھی بھی سرور پر اپ لوڈ نہیں ہوتی۔ یہ شرکاء کے لیے اسے نجی اور محفوظ بناتا ہے۔

بیک اینڈ کا جادو ایک اسٹیٹک سائٹ کا بیک اینڈ بھی ہو سکتا ہے۔ میں نے اسٹوریج کے لیے Supabase کا استعمال کیا۔

• منتظمین Supabase bucket میں فریم اپ لوڈ کرتے ہیں۔
• شرکاء سائٹ کے ذریعے ان فریموں کو دیکھتے ہیں۔
• سیکیورٹی ڈیٹا بیس پالیسیوں میں ہوتی ہے، نہ کہ چھپے ہوئے پاس ورڈز میں۔

ابتدائی مشکلات (Gotchas) Vibe coding آرکیٹیکچر میں مدد کرتی ہے، لیکن آپ کو آپریشنل تفصیلات کا خیال رکھنا چاہیے:

• ڈیٹا بیس سو جاتے ہیں۔ میں نے ایونٹ سے ایک دن پہلے اپنے Supabase پروجیکٹ کو جگانا سیکھا۔
• امیج سیکیورٹی۔ مجھے کینوس کو ریموٹ امیجز استعمال کرنے کی اجازت دینے کے لیے کوڈ کی ایک مخصوص لائن شامل کرنی پڑی۔
• صارف کا تجربہ (User experience)۔ فون پر "ڈاؤن لوڈ" تلاش کرنا مشکل ہوتا ہے۔ میں نے کوڈ کو تبدیل کر کے نیٹیو موبائل شیئر شیٹ (native mobile share sheet) استعمال کرنے کے لیے سیٹ کیا تاکہ تصویر براہ راست کیمرہ رول میں چلی جائے۔

آپ کے لیے میرے اسباق

1. ایک ایسا پروجیکٹ منتخب کریں جس کی حدود واضح ہوں۔ فوٹو بوتھ ایک واضح اختتام (finish line) ہے۔ سوشل ایپ نہیں۔
2. AI سے "کیوں" پوچھیں۔ کوڈ سے زیادہ اس کی منطق (reasoning) اہم ہے۔
3. diffs پڑھیں۔ AI کو اپنے جائزے کے بغیر اپنی سائٹ تبدیل نہ کرنے دیں۔
4. فیصلوں کی ذمہ داری خود لیں۔ AI سنٹیکس (syntax) سنبھالتا ہے، لیکن حدود (constraints) آپ کو سنبھالنی ہوتی ہیں۔

Vibe coding کام سے بچنے کا نام نہیں ہے۔ یہ صحیح مسائل پر توجہ مرکوز کرنے کے بارے میں ہے۔

Beginners کے لیے Vibe Coding: میں نے Claude کے ساتھ ایک کام کرنے والا Photo Booth Web App کیسے بنایا

کیا آپ نے کبھی ایسا محسوس کیا ہے کہ آپ کوڈنگ نہیں کر رہے بلکہ صرف اپنے کوڈ کے ساتھ "vibe" کر رہے ہیں؟

حال ہی میں، پروگرامنگ کی دنیا میں ایک نیا تصور سامنے آیا ہے جسے "Vibe Coding" کہا جا رہا ہے۔ یہ کوڈنگ کا وہ انداز ہے جہاں آپ خود لائن بہ لائن کوڈ لکھنے کے بجائے، AI (جیسے Claude یا ChatGPT) کو یہ بتاتے ہیں کہ آپ کیا حاصل کرنا چاہتے ہیں، اور AI آپ کے لیے وہ کوڈ تیار کر دیتا ہے۔ سادہ الفاظ میں، آپ صرف "vibe" (احساس یا مقصد) بتاتے ہیں، اور AI اسے حقیقت میں بدل دیتا ہے۔

میں نے حال ہی میں اس طریقے کو آزمانے کا فیصلہ کیا اور ایک مکمل طور پر کام کرنے والا Photo Booth Web App بنایا۔ یہاں میں آپ کو بتاؤں گا کہ یہ تجربہ کیسا رہا۔

Vibe Coding کیا ہے؟

روایتی کوڈنگ میں، آپ کو سینٹیکس (syntax)، ڈیٹا اسٹرکچرز، اور الگورتھم کی گہری سمجھ ہونی چاہیے۔ لیکن Vibe Coding میں، آپ کا بنیادی ہتھیار آپ کی Prompting کی مہارت ہے۔ آپ AI کو ایک مقصد دیتے ہیں، اسے دیکھتے ہیں کہ وہ کیا بناتا ہے، اور پھر اسے مزید بہتر بنانے کے لیے ہدایات دیتے ہیں۔ یہ ایک مکالمے (dialogue) کی طرح ہے، نہ کہ صرف ایک کمانڈ دینے کے عمل کی طرح۔

میرا پروجیکٹ: ایک فوٹو بوتھ ویب ایپ

میرا مقصد ایک ایسی ویب ایپ بنانا تھا جہاں صارف اپنے کیمرے کا استعمال کر کے تصویر کھینچ سکے، مختلف فلٹرز لگا سکے، اور پھر اس تصویر کو ڈاؤن لوڈ کر سکے۔

مرحلہ 1: پہلا پرومپٹ (The Initial Vibe)

میں نے Claude 3.5 Sonnet کو ایک بہت ہی سادہ پرومپٹ دیا:

"ایک سادہ اور خوبصورت فوٹو بوتھ ویب ایپ بناؤ۔ اس میں کیمرہ ویو نظر آنا چاہیے، ایک 'Capture' بٹن ہونا چاہیے، اور تصویر لینے کے بعد اسے ڈاؤن لوڈ کرنے کا آپشن ہونا چاہیے۔ ڈیزائن جدید اور کلین ہونا چاہیے۔"

صرف چند سیکنڈ کے اندر، Claude نے مجھے HTML، CSS، اور JavaScript کا ایک مکمل کوڈ فراہم کر دیا۔ جب میں نے اسے اپنے براؤزر میں چلایا، تو میں حیران رہ گیا! یہ بالکل ویسا ہی کام کر رہا تھا جیسا میں نے سوچا تھا۔

مرحلہ 2: فیچرز کا اضافہ (Iterative Refinement)

اب اصل مزہ شروع ہوا۔ میں نے کوڈ کو ہاتھ لگانے کے بجائے، Claude کو مزید ہدایات دینا شروع کیں:

• فلٹرز کا اضافہ: "اب اس میں کچھ دلچسپ فلٹرز شامل کرو، جیسے کہ Black & White، Sepia، اور ایک 'Vintage' لک۔"
• کاؤنٹ ڈاؤن ٹائمر: "تصویر لینے سے پہلے 3 سیکنڈ کا کاؤنٹ ڈاؤن ٹائمر شامل کرو تاکہ صارف تیار ہو سکے۔"
• ڈیزائن میں بہتری: "اسے تھوڑا اور 'Aesthetic' بناؤ۔ بٹنز پر اینیمیشنز ڈالو اور بیک گراؤنڈ میں ایک ہلکا سا گریڈینٹ (gradient) استعمال کرو۔"

ہر بار، Claude نے کوڈ کو اپ ڈیٹ کیا اور میں نے صرف یہ دیکھا کہ میری ایپ کیسے بہتر ہو رہی ہے۔

مرحلہ 3: ڈیبگنگ اور مسائل کا حل (Handling the Bugs)

کچھ مسائل بھی آئے، جیسے کہ موبائل فون پر کیمرہ صحیح طرح کام نہیں کر رہا تھا۔ میں نے کوڈ خود ٹھیک کرنے کے بجائے، ایرر (error) کا اسکرین شاٹ لیا اور Claude کو بھیج دیا:

"یہ موبائل پر کام نہیں کر رہا، کیمرہ پرمیشن کا مسئلہ لگ رہا ہے۔ اسے ٹھیک کرو۔"

Claude نے فوراً کوڈ میں ضروری تبدیلیاں کیں تاکہ موبائل براؤزرز کے ساتھ مطابقت (compatibility) بہتر ہو سکے۔

میں نے کیا سیکھا؟

اس تجربے نے مجھے چند اہم باتیں سکھائیں:

1. مقصد کی وضاحت (Clarity of Intent): آپ جتنا واضح طور پر اپنا مقصد بیان کریں گے، AI اتنا ہی بہتر نتیجہ دے گا۔
2. تکرار (Iteration) ہی کلید ہے: پہلی بار میں ہی مکمل ایپ ملنا مشکل ہے۔ اصل جادو تب ہوتا ہے جب آپ بار بار اسے بہتر بناتے ہیں۔
3. بنیادی سمجھ ضروری ہے: اگرچہ میں نے کوڈ نہیں لکھا، لیکن مجھے یہ پتہ ہونا چاہیے تھا کہ کیا کام کر رہا ہے اور کیا نہیں۔ اگر آپ کو بالکل بھی پروگرامنگ کا علم نہیں ہے، تو آپ AI کے نتائج کو سمجھنے اور ان میں غلطیاں پکڑنے میں مشکل محسوس کریں گے۔

نتیجہ

Vibe Coding نے کوڈنگ کی حدوں کو وسیع کر دیا ہے۔ اب آپ کے پاس ایک آئیڈیا ہے، تو آپ کے پاس ایک ایپ بھی ہو سکتی ہے۔ یہ طریقہ ان لوگوں کے لیے بہترین ہے جو تیزی سے پروٹو ٹائپ (prototype) بنانا چاہتے ہیں یا ان تخلیقی ذہنوں کے لیے جو کوڈنگ کی پیچیدگیوں میں الجھنے کے بجائے اپنے تصورات کو حقیقت کا روپ دینا چاہتے ہیں۔

تو، آپ کی اگلی "Vibe" کیا ہے؟