ফুল-স্ট্যাক অ্যাপ কী? সহজ ভাষায় ব্যাখ্যা

একটি ফুল-স্ট্যাক অ্যাপ হলো এমন একটি অ্যাপ, যাতে কাজ করার জন্য প্রয়োজনীয় সব স্তর থাকে: মানুষের দেখা ও ক্লিক করা ফ্রন্টএন্ড, সার্ভারে চলে নিয়ম প্রয়োগকারী ব্যাকএন্ড, এবং সবকিছু মনে রাখা ডেটাবেস। যে ক-টি কাজ সংরক্ষণ করে, নিজের তালিকা যেকোনো ডিভাইস থেকে খুলতে দেয় এবং অন্য কাউকে আপনার তালিকা দেখতে দেয় না — তেমন একটি টু-ডু লিস্ট ফুল-স্ট্যাক। শুধু আপনার খোলার সময় দেখায় এমন একটি পেজ তেমন নয়।

“স্ট্যাক” মানে প্রযুক্তির স্তরগুলো একের উপর আরেকটি সাজানো। “ফুল” মানে সব স্তরই আছে।

AI দিয়ে তৈরি করলে কেন গুরুত্বপূর্ণ

AI বিল্ডারকে অ্যাপ বর্ণনা করার সময় আপনি যে শব্দগুলো ব্যবহার করেন, সেগুলোই ঠিক করে কোন স্তরগুলো বানানো হবে। “আমাদের মেনু দেখানোর একটি পেজ বানাও” একটি ফ্রন্টএন্ড তৈরি করে। “গ্রাহকরা যেন আমাদের মেনু থেকে অর্ডার করতে পারে এবং রান্নাঘর নতুন অর্ডার দেখতে পায়” — এর জন্য তিনটি স্তরই লাগবে, কারণ অর্ডার সংরক্ষণ করতে হবে, দুই ধরনের ব্যবহারকারীর মধ্যে ভাগ করতে হবে এবং গোপন রাখতে হবে।

এই পার্থক্য জানলে তিনভাবে সাহায্য হয়:

• আপনি সঠিক জিনিসটি চান। ডেটা সংরক্ষণ চাইলে স্পষ্ট করে বলুন। শুধু ফ্রন্টএন্ড বানানো বিল্ডার দেখতে সম্পূর্ণ মনে হবে, কিন্তু রিফ্রেশ দিলে সব ভুলে যাবে।
• নকল সম্পূর্ণতা ধরতে পারেন। নমুনা ডেটার একটি ডেমো দেখতে হুবহু একটি কার্যকর অ্যাপের মতো হতে পারে। স্তরগুলো জানলে যাচাই করতে পারবেন যে ডেটা সত্যিই কোথাও যাচ্ছে।
• চলতি খরচ বোঝেন। শুধু ফ্রন্টএন্ড স্ট্যাটিক ফাইল হিসেবে সার্ভ করা যায়। ব্যাকএন্ড ও ডেটাবেস সার্ভারে চলা প্রোগ্রাম, আর বেশিরভাগ হোস্টিং খরচ সেখান থেকেই আসে।

একটি দৈনন্দিন উপমা: একটি রেস্তোরাঁ

একটি রেস্তোরাঁর কথা ভাবুন।

• খাবারের ঘর হলো ফ্রন্টএন্ড। মেনু, টেবিল ও ওয়েটারের নোটপ্যাড। অতিথিরা যা দেখেন, তা হওয়া উচিত আনন্দদায়ক ও ব্যবহার সহজ।
• রান্নাঘর হলো ব্যাকএন্ড। অতিথিরা সেখানে ঢোকেন না। সেখানে অর্ডার নেওয়া হয়, খাবার আছে কি না যাচাই হয়, রান্না হয় এবং অদ্ভুত অনুরোধ প্রত্যাখ্যান করা হয়। নিয়মগুলো এখানে থাকে।
• ভাঁড়ার ও অর্ডার খাতা হলো ডেটাবেস। কী আছে আর কী অর্ডার হয়েছে তা ধরে রাখে, যাতে শিফট বদলালেও কিছু ভুলে না যায়।

শুধু খাবারের ঘর থাকা একটি রেস্তোরাঁ আপনাকে সুন্দর মেনু দেখাতে পারে, কিন্তু খাওয়াতে পারে না। ফ্রন্টএন্ড-শুধু একটি অ্যাপ ফুল-স্ট্যাকের ভান করা সেই রেস্তোরাঁর মতো।

তিনটি স্তর বিস্তারিত

স্তরগুলো একটি নির্দিষ্ট ক্রমে কথা বলে। ফ্রন্টএন্ড একটি API-র মাধ্যমে ব্যাকএন্ডের কাছে কিছু চায় — ব্যাকএন্ড যে অনুরোধগুলো গ্রহণ করে তার একটি নির্ধারিত সেট। ব্যাকএন্ড অনুরোধ যাচাই করে, ডেটাবেস পড়ে বা লেখে, এবং একটি উত্তর পাঠায়। ফ্রন্টএন্ড কখনো সরাসরি ডেটাবেসের সঙ্গে কথা বলে না।

এই ক্রমটিই পুরো স্ট্যাকের সবচেয়ে গুরুত্বপূর্ণ নিরাপত্তা ধারণা। ফ্রন্টএন্ডের যেকোনো কিছু দর্শক পড়তে ও বদলাতে পারেন, কারণ তা তাঁর ডিভাইসে চলে। তাই নিয়মগুলো — “শুধু মালিক এই ইনভয়েস দেখতে পারবে”, “একটি কুপন একবারই ব্যবহার করা যাবে” — ব্যাকএন্ডে প্রয়োগ করতে হবে। এই বিভাজন সম্পর্কে আরও জানতে দেখুন ফ্রন্টএন্ড বনাম ব্যাকএন্ড।

একটি বাস্তব উদাহরণ: একটি ক্লাস বুকিং অ্যাপ

ধরুন আপনি একটি যোগা স্টুডিও চালান এবং মানুষ অনলাইনে ক্লাস বুক করতে পারুক তা চান।

দর্শক কী করেন: সাইট খোলেন, এই সপ্তাহের ক্লাসগুলো দেখেন, একটিতে ট্যাপ করেন, সাইন ইন করেন এবং একটি স্থান বুক করেন।

ভেতরে কী ঘটে:

1. ফ্রন্টএন্ড সময়সূচি দেখায়। এটি ভরাট করতে ব্যাকএন্ডকে জিজ্ঞেস করে, “এই সপ্তাহে কোন ক্লাস আছে, এবং কয়টি স্থান খালি?”
2. ব্যাকএন্ড ডেটাবেসকে ক্লাসগুলো জিজ্ঞেস করে, প্রতিটির বুকিং গোনে, তারপর উত্তর পাঠায়।
3. দর্শক Book-এ ট্যাপ করেন। ফ্রন্টএন্ড পাঠায়, “এই সাইন-ইন করা ব্যক্তির জন্য ক্লাস ৪২ বুক করো।”
4. ব্যাকএন্ড যাচাই করে: ব্যক্তিটি সত্যিই সাইন ইন করা আছে কি? ক্লাস কি ভরে গেছে? তারা কি আগেই বুক করেছেন? সব ঠিক থাকলেই ডেটাবেসে একটি নতুন বুকিং সারি লেখে।
5. ব্যাকএন্ড “booked” উত্তর দেয়, এবং ফ্রন্টএন্ড একটি নিশ্চিতকরণ দেখায়।
6. পরে স্টুডিওর মালিক সাইন ইন করে ক্লাসের তালিকা দেখেন। ব্যাকএন্ড যাচাই করে যে তিনি অ্যাডমিন, তারপর সবার নাম দেখায়।

এখন কল্পনা করুন এটি শুধু ফ্রন্টএন্ড দিয়ে বানানো হয়েছে। সময়সূচি হয়তো দেখা যেত, এবং Book বাটন হয়তো সুন্দর একটি টিক দেখাত, কিন্তু রিফ্রেশ দিলে বুকিং উধাও হতো, অন্যদের জন্য “স্থান খালি” সংখ্যা ভুল হতো, এবং মালিক কখনো তা দেখতে পেতেন না। ৪ নম্বর ধাপ — যাচাইগুলো — পুরোপুরি বাদ পড়ত। বাস্তব পার্থক্য এটাই।

মূল পরিভাষা

• ফ্রন্টএন্ড (ক্লায়েন্ট সাইড): ব্রাউজারে চলা অংশ।
• ব্যাকএন্ড (সার্ভার সাইড): সার্ভারে চলা অংশ। একে API সার্ভারও বলা হয়।
• ডেটাবেস: যেখানে ডেটা একটি সুসংগঠিত উপায়ে সংরক্ষিত থাকে। দেখুন ডেটাবেস কী।
• API: ফ্রন্টএন্ড বা অন্য প্রোগ্রামের কাছ থেকে ব্যাকএন্ড যে অনুরোধগুলো গ্রহণ করে তার তালিকা।
• অথেনটিকেশন: কে সে (লগ-ইন), তা যাচাই। অথোরাইজেশন: সে কী করতে পারে, তা যাচাই।
• ডিপ্লয়মেন্ট: জনসাধারণের ব্যবহারের জন্য সব স্তর সার্ভারে বসানো।
• মনোলিথ বনাম সার্ভিস: একটি প্রোগ্রাম যা সবকিছু করে, বনাম কয়েকটি ছোট প্রোগ্রাম (যেমন একটি ওয়েবসাইট ও আলাদা একটি API)। দুটোই ফুল-স্ট্যাক।

সাধারণ ভুল ও ভুল ধারণা

• “দেখতে শেষ, তাই শেষ।” নমুনা ডেটা এবং কার্যকর মনে হওয়া বাটন মানেই সংরক্ষিত ডেটা নয়। পেজ রিফ্রেশ দিন, একটি প্রাইভেট উইন্ডোতে খুলুন, এবং যাচাই করুন যে ডেটা এখনো আছে।
• নিয়ম ফ্রন্টএন্ডে রাখা। একটি বাটন লুকানো নিরাপত্তা নয়। ব্যাকএন্ড যাচাই না করলে, সেই অনুরোধ জানা যে কেউ তা পাঠাতে পারে।
• সিক্রেট কী ফ্রন্টএন্ডে রাখা। ব্রাউজার কোডে পেমেন্ট বা AI প্রদানকারীর কী প্রতিটি দর্শক পড়তে পারে। কী থাকবে ব্যাকএন্ডে, এনভায়রনমেন্ট ভেরিয়েবলে — দেখুন এনভায়রনমেন্ট ভেরিয়েবল ও সিক্রেট।
• ফুল-স্ট্যাক মানেই জটিল ভাবা। একটি ছোট ফুল-স্ট্যাক অ্যাপ কয়েকটি স্ক্রিন, হাতে গোনা কয়েকটি ব্যাকএন্ড রুট এবং তিনটি ডেটাবেস টেবিল হতে পারে। এটি স্তরের বর্ণনা, আকারের নয়।
• প্রতিটি প্রযুক্তি নিজে বাছতে হবে ভাবা। প্রথম সংস্করণের জন্য যেকোনো যুক্তিসংগত, বহুল ব্যবহৃত স্ট্যাকই চলবে। ডেটা ও নিয়মের একটি স্পষ্ট বর্ণনা আরও গুরুত্বপূর্ণ।

আপনার AI বিল্ডারের কাছে কী চাইবেন

নাম না জানলেও স্তরগুলোর দিক থেকে অ্যাপটি বর্ণনা করুন:

• ডেটা: “ক্লাস (নাম, সময়, ধারণক্ষমতা) এবং বুকিং (ক্লাস, ব্যক্তি, বুক করার সময়) একটি ডেটাবেসে সংরক্ষণ করো।”
• নিয়ম: “ধারণক্ষমতার বেশি ক্লাস বুক করা যাবে না। একজন ব্যক্তি একটি ক্লাস শুধু একবারই বুক করতে পারবে। শুধু অ্যাডমিন দেখতে পারবে কে বুক করেছে।”
• স্ক্রিন: “একটি সাপ্তাহিক সময়সূচি, একটি বুকিং নিশ্চিতকরণ, প্রতি ক্লাসের বুকিংয়ের তালিকাসহ একটি অ্যাডমিন পেজ।”
• যাচাই: “এই নিয়মগুলো শুধু পেজে নয়, সার্ভারে প্রয়োগ করো। API কী সার্ভারে রাখো।”

তারপর সন্দিহানের মতো পরীক্ষা করুন: রিফ্রেশ দিন, দুজন ভিন্ন ব্যক্তি হিসেবে সাইন ইন করুন, যে ডেটা দেখার কথা নয় তা দেখার চেষ্টা করুন। AI দিয়ে অ্যাপ বানানোর গাইড-এ পুরো প্রক্রিয়াটি শুরু থেকে শেষ পর্যন্ত আছে।

Mythex-এ ফুল-স্ট্যাক অ্যাপ

Mythex একটি চ্যাট বর্ণনা থেকে ফুল-স্ট্যাক ওয়েব অ্যাপ তৈরি করে। ডিফল্টভাবে নতুন অ্যাপ পায় একটি React ও TypeScript ফ্রন্টএন্ড; অ্যাপের ডেটা সংরক্ষণ দরকার হলে Mythex প্রজেক্টে একটি নিবেদিত Postgres ডেটাবেস যোগ করে, এবং আপনি ওয়েবসাইটের পাশে একটি আলাদা API সার্ভার (যেমন Python, Node, C# বা Java) চাইতে পারেন। সবকিছু একসঙ্গে একটি লাইভ প্রিভিউতে চলে এবং একটি পাবলিক URL-এ প্রকাশ হয়। ডকুমেন্টেশনের মাল্টি-সার্ভিস অ্যাপ পৃষ্ঠায় দেখানো আছে কীভাবে একটি ওয়েবসাইট ও একটি API একসঙ্গে প্রিভিউ ও প্রকাশ হয়, আর ফুল-স্ট্যাক অ্যাপ বিল্ডার পৃষ্ঠায় শুরুর উপাদান আছে।

প্রশ্নোত্তর