فل اسٹیک ایپ کیا ہے؟ ایک سادہ وضاحت

فل اسٹیک ایپ وہ ایپ ہے جس میں وہ تمام تہیں شامل ہوں جن کی اسے کام کرنے کے لیے ضرورت ہے: فرنٹ اینڈ جو لوگ دیکھتے اور کلک کرتے ہیں، بیک اینڈ جو سرور پر چلتا ہے اور اصول نافذ کرتا ہے، اور ڈیٹابیس جو سب کچھ یاد رکھتا ہے۔ کاموں کی ایک فہرست جو آپ کے کام محفوظ کرتی ہے، آپ کو کسی بھی آلے سے لاگ ان کرنے دیتی ہے اور کسی دوسرے کو آپ کی فہرست نہیں دکھاتی، فل اسٹیک ہے۔ ایک صفحہ جو صرف آپ کے کھلنے کے اوقات دکھاتا ہے، ایسا نہیں ہے۔

“Stack” کا مطلب ہے ٹیکنالوجی کی وہ تہیں جو ایک دوسرے کے اوپر رکھی جاتی ہیں۔ “Full” کا مطلب ہے کہ وہ سب موجود ہیں۔

AI کے ساتھ تعمیر کرتے وقت یہ کیوں اہم ہے

جب آپ AI بلڈر کو ایپ کی تفصیل دیتے ہیں، تو آپ کے استعمال کیے گئے الفاظ طے کرتے ہیں کہ وہ کون سی تہیں بنائے گا۔ “ایک ایسا صفحہ بناؤ جو ہمارا مینو دکھائے” فرنٹ اینڈ بناتا ہے۔ “گاہکوں کو مینو سے آرڈر کرنے دو اور کچن کو نئے آرڈر دکھاؤ” تینوں تہیں مانگتا ہے، کیونکہ آرڈرز محفوظ ہونے چاہئیں، دو طرح کے صارفین کے درمیان شیئر ہونے چاہئیں، اور نجی رہنے چاہئیں۔

فرق جاننے سے آپ کو تین طریقوں سے مدد ملتی ہے:

• آپ درست چیز مانگتے ہیں۔ اگر آپ چاہتے ہیں کہ ڈیٹا محفوظ ہو، تو یہ واضح کہیں۔ جو بلڈر صرف فرنٹ اینڈ بناتا ہے، وہ مکمل نظر آئے گا مگر ریفریش پر سب کچھ بھول جائے گا۔
• مصنوعی طور پر مکمل ہونے کو پہچانتے ہیں۔ نمونہ ڈیٹا والا ڈیمو بالکل کام کرنے والی ایپ جیسا لگ سکتا ہے۔ تہیں جاننے سے آپ جانچ سکتے ہیں کہ ڈیٹا واقعی کہیں جا رہا ہے۔
• چلانے کی لاگت سمجھتے ہیں۔ صرف فرنٹ اینڈ کو جامد فائلوں کے طور پر چلایا جا سکتا ہے۔ بیک اینڈ اور ڈیٹابیس وہ پروگرام ہیں جو سرورز پر چلتے ہیں، اور زیادہ تر ہوسٹنگ کی لاگت یہیں سے آتی ہے۔

روزمرہ کی مثال: ایک ریستوراں

ایک ریستوراں کا تصور کریں۔

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

صرف ڈائننگ روم والا ریستوراں آپ کو ایک خوبصورت مینو دکھا سکتا ہے، مگر آپ کھانا نہیں کھا سکتے۔ یہ ایک فرنٹ اینڈ والی ایپ ہے جو فل اسٹیک ہونے کا دعویٰ کرتی ہے۔

تینوں تہیں تفصیل سے

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

یہ ترتیب پورے اسٹیک کا سب سے اہم سیکیورٹی خیال ہے۔ فرنٹ اینڈ میں موجود ہر چیز کو وزیٹر پڑھ اور بدل سکتا ہے، کیونکہ وہ اس کے آلے پر چلتی ہے۔ اس لیے اصول، جیسے “صرف مالک یہ انوائس دیکھ سکتا ہے” یا “کوپن ایک بار استعمال ہو سکتا ہے”، بیک اینڈ پر نافذ ہونے چاہئیں۔ تقسیم پر مزید کے لیے دیکھیں فرنٹ اینڈ بمقابلہ بیک اینڈ۔

ایک عملی مثال: کلاس بکنگ ایپ

فرض کریں آپ یوگا اسٹوڈیو چلاتے ہیں اور چاہتے ہیں کہ لوگ کلاسز آن لائن بک کریں۔

وزیٹر کیا کرتا ہے: سائٹ کھولتا ہے، اس ہفتے کی کلاسز دیکھتا ہے، ایک کو چھوتا ہے، سائن ان کرتا ہے اور جگہ بک کرتا ہے۔

پسِ پردہ کیا ہوتا ہے:

1. فرنٹ اینڈ ٹائم ٹیبل دکھاتا ہے۔ اسے بھرنے کے لیے بیک اینڈ سے پوچھتا ہے، “اس ہفتے کون سی کلاسز ہیں، اور کتنی جگہیں باقی ہیں؟”
2. بیک اینڈ ڈیٹابیس سے کلاسز مانگتا ہے، ہر ایک کی بکنگز گنتا ہے، اور جواب دیتا ہے۔
3. وزیٹر Book دباتا ہے۔ فرنٹ اینڈ بھیجتا ہے “اس سائن ان شخص کے لیے کلاس 42 بک کرو”۔
4. بیک اینڈ جانچتا ہے: کیا یہ شخص واقعی سائن ان ہے؟ کیا کلاس بھری ہوئی ہے؟ کیا انہوں نے یہ کلاس پہلے ہی بک کر رکھی ہے؟ صرف سب ٹھیک ہونے پر وہ ڈیٹابیس میں نئی بکنگ کی قطار لکھتا ہے۔
5. بیک اینڈ جواب دیتا ہے “بک ہو گئی”، اور فرنٹ اینڈ تصدیق دکھاتا ہے۔
6. بعد میں اسٹوڈیو کی مالک لاگ ان کرتی ہے اور کلاس کی فہرست دیکھتی ہے۔ بیک اینڈ تصدیق کرتا ہے کہ وہ ایڈمن ہے، اس سے پہلے کہ تمام ناموں کی فہرست دکھائی جائے۔

اب تصور کریں کہ یہ صرف فرنٹ اینڈ کے طور پر بنا ہوتا۔ ٹائم ٹیبل شاید دکھ جاتا، اور Book بٹن شاید خوبصورت ٹِک دکھاتا، مگر ریفریش پر بکنگ غائب ہو جاتی، دوسروں کے لیے “باقی جگہیں” کا شمار غلط ہوتا، اور مالک کبھی اسے نہ دیکھ پاتی۔ مرحلہ 4، یعنی جانچیں، سرے سے غائب ہوتیں۔ عملی فرق یہی ہے۔

اہم اصطلاحات

• فرنٹ اینڈ (کلائنٹ سائیڈ): وہ حصہ جو براؤزر میں چلتا ہے۔
• بیک اینڈ (سرور سائیڈ): وہ حصہ جو سرور پر چلتا ہے۔ اسے API سرور بھی کہتے ہیں۔
• ڈیٹابیس: جہاں ڈیٹا منظم طریقے سے محفوظ ہوتا ہے۔ دیکھیں ڈیٹابیس کیا ہے۔
• API: وہ درخواستیں جو بیک اینڈ فرنٹ اینڈ یا دوسرے پروگراموں سے قبول کرتا ہے۔
• Authentication: یہ جانچنا کہ کوئی کون ہے (لاگ ان)۔ Authorisation: یہ جانچنا کہ اسے کیا کرنے کی اجازت ہے۔
• Deployment: تمام تہوں کو سرورز پر ڈالنا تاکہ عوام انہیں استعمال کر سکے۔
• Monolith بمقابلہ services: ایک پروگرام جو سب کچھ کرتا ہے، بمقابلہ کئی چھوٹے پروگرام (مثلاً ایک ویب سائٹ اور ایک الگ API)۔ دونوں فل اسٹیک ہیں۔

عام غلطیاں اور غلط فہمیاں

• “یہ مکمل نظر آتا ہے، تو مکمل ہے۔” نمونہ ڈیٹا اور کام کرتا نظر آنے والا بٹن محفوظ شدہ ڈیٹا کے برابر نہیں۔ صفحہ ریفریش کریں، پرائیویٹ ونڈو میں کھولیں، اور چیک کریں کہ ڈیٹا اب بھی موجود ہے۔
• اصول فرنٹ اینڈ میں ڈالنا۔ بٹن چھپانا سیکیورٹی نہیں ہے۔ اگر بیک اینڈ جانچ نہ کرے، تو جو بھی درخواست کا طریقہ جانتا ہے وہ اسے بنا سکتا ہے۔
• خفیہ کلیدیں فرنٹ اینڈ میں ڈالنا۔ براؤزر کوڈ میں ادائیگی یا AI فراہم کنندہ کی کلید ہر وزیٹر پڑھ سکتا ہے۔ کلیدیں بیک اینڈ پر، ماحولیاتی متغیرات میں رہنی چاہئیں۔ دیکھیں ماحولیاتی متغیرات اور سیکرٹس۔
• فل اسٹیک کا مطلب پیچیدہ سمجھنا۔ ایک چھوٹی فل اسٹیک ایپ چند اسکرینز، چند بیک اینڈ راستے اور تین ڈیٹابیس ٹیبلز ہو سکتی ہے۔ یہ تہوں کی تفصیل ہے، سائز کی نہیں۔
• سمجھنا کہ آپ کو ہر ٹیکنالوجی خود چننی ہوگی۔ پہلے ورژن کے لیے کوئی بھی معقول، وسیع پیمانے پر استعمال ہونے والا اسٹیک کام کرے گا۔ ڈیٹا اور اصولوں کی واضح تفصیل زیادہ اہم ہے۔

AI بلڈر سے کیا مانگیں

ایپ کو تین تہوں کے لحاظ سے بیان کریں، چاہے آپ ان کے نام نہ بھی لیں:

• ڈیٹا: “کلاسز (نام، وقت، گنجائش) اور بکنگز (کلاس، شخص، بکنگ کا وقت) ڈیٹابیس میں محفوظ کرو۔”
• اصول: “کسی کلاس کی گنجائش سے زیادہ بکنگ نہیں ہو سکتی۔ ایک شخص ایک کلاس صرف ایک بار بک کر سکتا ہے۔ صرف ایڈمن دیکھ سکے کہ کس نے بک کیا۔”
• اسکرینیں: “ہفتہ وار ٹائم ٹیبل، بکنگ کی تصدیق، اور ایڈمن صفحہ جو ہر کلاس کی بکنگز دکھائے۔”
• جانچیں: “یہ اصول صرف صفحے پر نہیں، سرور پر نافذ کرو۔ کوئی بھی API کلید سرور پر رکھو۔”

پھر شکی انسان کی طرح جانچیں: ریفریش کریں، دو مختلف لوگوں کے طور پر سائن ان کریں، اور وہ ڈیٹا دیکھنے کی کوشش کریں جو آپ کو نہیں دیکھنا چاہیے۔ AI سے ایپ بنانے کا رہنما اس پورے سائیکل کو شروع سے آخر تک بیان کرتا ہے۔

Mythex پر فل اسٹیک ایپس

Mythex چیٹ میں دی گئی تفصیل سے فل اسٹیک ویب ایپس بناتا ہے۔ ڈیفالٹ طور پر نئی ایپ کو React اور TypeScript کا فرنٹ اینڈ ملتا ہے؛ جب ایپ کو ڈیٹا محفوظ کرنا ہو تو Mythex پروجیکٹ میں ایک مخصوص Postgres ڈیٹابیس شامل کرتا ہے، اور آپ ویب سائٹ کے ساتھ ایک الگ API سرور (مثلاً Python، Node، C# یا Java) مانگ سکتے ہیں۔ سب کچھ ایک لائیو پریویو میں ایک ساتھ چلتا ہے اور ایک عوامی URL پر شائع ہوتا ہے۔ دستاویزات کا صفحہ ملٹی سروس ایپس دکھاتا ہے کہ ویب سائٹ اور API کیسے ایک ساتھ پریویو اور شائع ہوتے ہیں، اور فل اسٹیک ایپ بلڈر کا صفحہ ابتدائی نقطے دیتا ہے۔

سوالات