গুগল ইকোসিস্টেমের সাহায্যে এআই অ্যাপ তৈরি করুন, গুগল ইকোসিস্টেমের সাহায্যে এআই অ্যাপ তৈরি করুন, গুগল ইকোসিস্টেমের সাহায্যে এআই অ্যাপ তৈরি করুন

১. শুরু করার আগে

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

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

আপনি যা শিখবেন

• গুগল স্টিচ দিয়ে UI ডিজাইন করুন।
• গুগল এআই স্টুডিও ব্যবহার করে একটি ওয়েব অ্যাপ কোড করুন।
• এআই ফিচার তৈরি করতে এবং ক্লাউডে তথ্য সংরক্ষণ করতে ফায়ারবেস ব্যবহার করুন।
• Google AI Studio (Cloud Run দ্বারা চালিত) ব্যবহার করে একটি ওয়েব অ্যাপ প্রোডাকশনে ডেপ্লয় করুন।

২. স্টিচ দিয়ে UI ডিজাইন করুন

1. মকআপ ছবিটি ( DecideForMeScreen.jpeg ) ডাউনলোড করুন। এটি আপনার স্থানীয় এমন একটি ফোল্ডারে সংরক্ষণ করুন যেখানে আপনি এটি খুঁজে পেতে পারেন।
2. Stitch- এ যান, ইনপুট ফিল্ডটি খুঁজুন এবং ওয়েব অপশনটি নির্বাচন করুন। (এই কোডল্যাবের জন্য, আপনি ওয়েব অভিজ্ঞতার উপর মনোযোগ দেবেন, কিন্তু আপনি মোবাইল স্ক্রিন তৈরি করতেও Stitch ব্যবহার করতে পারেন।)
3. মকআপ ছবিটি আপলোড করুন:
   1. + (যোগ করুন বোতাম)-এ ক্লিক করুন।
   2. ফাইল আপলোড নির্বাচন করুন।
   3. সেটআপ ধাপে ডাউনলোড করা ছবিটি ( DecideForMeScreen.jpeg ) সংযুক্ত করুন। এই হাতে আঁকা মকআপটি আপনাকে স্টিচ-এর মাল্টিমোডাল সক্ষমতা পরীক্ষা করতে সাহায্য করবে।
4. নিচের প্রম্পটটি কপি করে ইনপুট ফিল্ডে পেস্ট করুন:

   # General Guidance
   Create a modern, clean, and highly polished UI for a web application called
   "Decide For Me" - a hyper-rational decision assistant.
   
   CRITICAL: Replicate the exact layout, structure, and element placement shown in
   the hand-drawn mockup file DecideForMeScreen.jpeg. Do not add any extra menus,
   sidebars, buttons, or top/bottom navigation bars that are not explicitly drawn
   in the file. Stick strictly to the skeleton provided in the mockup.
   
   # Layout & Structure
   - Two-Column Split Screen:
     - Left Side (Main Chat Area): Takes up roughly 70-75% of the screen width. It
       should feel like a premium, focused workspace.
     - Right Side (Configuration Panel): A sidebar taking up 25-30% of the screen
       width with a distinct, subtle background color to separate it from the
       chat.
   
   # Right Panel: Configuration Screen
   - Header: Title it "My Priorities" with a clean, minimalist typography.
   - Content Card: A styled card containing a text box or paragraph area
     showcasing the user's priorities.
   - Interactions: Include a clear "Edit Priorities" button. When clicked, this
     area should visually toggle into an editable textarea or input field.
   
   # Left Panel: Chat & Dilemma Decision Screen
   - Chat History: A clean vertical flow of message bubbles.
     - The first message bubble must be aligned to the left (system message) and
       say: "Tell me your dilemma". Use a friendly, neutral background color for
       this bubble.
   - Bottom Input Area: Instead of a traditional single-line chat bar, create a
     unified, beautiful "Decision Submission" layout positioned at the bottom:
     - Dual Input Fields: Place two horizontal or cleanly stacked input fields.
       - Input 1 label: "Option A"
       - Input 2 label: "Option B"
     - Action Button: A prominent, styled "Go" action button to trigger the
       reasoning loop.
   
   # Theme & Aesthetic
   - Vibe: Hyper-rational, clean, trustworthy, and modern. Use a sophisticated
     color palette (e.g., deep slates, clean whites/grays, and a sharp accent
     color like a subtle indigo or teal for active states and buttons).
   - Spacing & Typography: Use generous whitespace, soft rounded corners
     (border-radius) for cards and buttons, and a highly legible sans-serif font.
   

5. ইনপুট ফিল্ডের নিচের-ডান কোণায় থাকা জেনারেট অ্যারোটিতে ক্লিক করুন। স্টিচ স্ক্রিন এবং একটি সম্পূর্ণ ডিজাইন সিস্টেম তৈরি করে দেবে, যার মধ্যে থাকবে কালার প্যালেট, ফন্ট অপশন, আইকনোগ্রাফি এবং UI এলিমেন্টগুলোর সামগ্রিক রূপ।

সতর্কীকরণ: আপনার স্ক্রিনটি তৈরি হতে ৫ মিনিটের বেশি সময় লাগলে, পৃষ্ঠাটি পুনরায় লোড করুন এবং অনুরোধটি আবার জমা দিন।

৩. গুগল এআই স্টুডিও দিয়ে অ্যাপটি তৈরি করুন।

1. Stitch-এ তৈরি করা স্ক্রিনটি Google AI Studio-তে এক্সপোর্ট করুন:
   1. Stitch-এ তৈরি হওয়া ডিজাইনটিতে ক্লিক করুন।
   2. স্ক্রিনের উপরের ডান কোণায় থাকা এক্সপোর্ট বাটনে ক্লিক করুন।
   3. নিশ্চিত করুন যে নির্বাচিত বিকল্পটি গুগল এআই স্টুডিও ।
   4. Description ফিল্ড পর্যন্ত স্ক্রোল করুন।
2. নিচের প্রম্পটটি কপি করে Description ফিল্ডে পেস্ট করুন:

   # General Guidance
   Build the "Decide For Me" app: A hyper-rational decision assistant for
   chronically indecisive people facing life choices (moving apartments, changing
   careers, picking a hobby). The user enters a dilemma and their top priorities
   in life. The app will help with the decision. Follow the instructions below to
   build it:
   
   # UI Instructions
   Using the design artifacts exported from Stitch (the PNG image and HTML file),
   build a fully functional web application that accurately mirrors the design and
   layout.
   
   # App Architecture & Initialization Instructions
   - Initialize the Firebase JS SDK for client-side services.
   - Set up Firebase Authentication using the Google provider. If a user is not
     logged in, show a clean, minimalist sign-in state. If the user is logged in,
     take them directly to the dilemma decision screen.
   - Initialize Firebase App Check in debug mode
     (`self.FIREBASE_APPCHECK_DEBUG_TOKEN = true`) without a ReCaptchaV3Provider
     (we will add that later).
   
   # State & Database Management Instructions
   - User Priorities:
     - Once authenticated, pull the user's saved priorities from Firebase
       Firestore at the path: `users/{userId}`. Each document should contain one
       string field: 'priorities'.
     - Bind this data to the Right Panel ("My Priorities").
     - When the user clicks the "Edit" button, toggle the view to a textarea, with
       a 'save' button. When saved, write the updated string back to
       `users/{userId}`.
     - Make sure to implement and deploy strong Security Rules for Firestore.
   
   # UI Stream Update & Display Instructions
   - Once the user submits option A and option B in the dilemma decision screen,
     display both options as a single message on the user side of the chat. Then,
     display a sleek loading state in the main chat panel. Leave the app in this
     "loading" state and do nothing else, we will process both options and build
     the server-side thinking later.
   

3. "Build with Google AI Studio"- তে ক্লিক করুন। এটি একটি নতুন ট্যাবে Google AI Studio খুলবে এবং আপনার ডিজাইন ফাইল ও নির্দেশাবলী স্থানান্তর করবে।
   1. প্রম্পটটি সম্পূর্ণরূপে স্থানান্তরিত হয়েছে কিনা তা নিশ্চিত করুন।
   2. যদি আপনি প্রম্পটের কেবল অংশবিশেষ দেখতে পান, তবে সম্পূর্ণ প্রম্পটটি আবার পেস্ট করুন।
4. বিল্ড-এ ক্লিক করুন। গুগল এআই স্টুডিও আপনার দেওয়া নির্দেশনা এবং ইউআই ডিজাইন অনুযায়ী ডিসাইড ফর মি অ্যাপটি তৈরি করা শুরু করবে:
   1. তৈরি করার সময় এটি বিকল্প UI ডিজাইনের পরামর্শ দেয় (এই কোডল্যাবের জন্য এই ডিজাইনগুলো উপেক্ষা করুন, তবে ভবিষ্যতে আপনি ভিন্ন ডিজাইন বেছে নিতে পারেন)।
   2. Firebase চালু করতে বলা হলে, 'Enable'-এ ক্লিক করুন।
5. তৈরি করা অ্যাপটি পরিদর্শন ও যাচাই করুন:
   1. প্রিভিউ ট্যাবে অ্যাপটি পরীক্ষা করুন।
   2. তৈরি হওয়া সমস্ত ফাইল ও কোড পর্যালোচনা করতে কোড ট্যাবে যান।
   3. গুগল এআই স্টুডিও একটি ফায়ারবেস প্রজেক্টও তৈরি করেছে, ফায়ারবেস অথেনটিকেশন ও ফায়ারস্টোর সক্রিয় করেছে এবং আপনার কোডবেসে ফায়ারবেস কনফিগার করেছে। এই কোডল্যাবের পরবর্তী ধাপে আপনি এই ফায়ারবেস প্রজেক্টটি অ্যাক্সেস করবেন এবং এটি নিয়ে কাজ করবেন।

সতর্কীকরণ: আপনার অ্যাপটি তৈরি হতে ১০ মিনিটের বেশি সময় লাগলে, ট্যাবটি বন্ধ করুন, Stitch-এ ফিরে যান এবং এক্সপোর্ট ধাপ থেকে পুনরায় শুরু করুন।

৪. আপনার অ্যাপ নিবন্ধন করুন ডিবাগ টোকেন পরীক্ষা করুন

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

আপনার ফায়ারবেস প্রজেক্ট অ্যাক্সেস করুন

1. Google AI Studio দ্বারা তৈরি Firebase প্রজেক্টের প্রজেক্ট আইডিটি খুঁজুন:
   1. Google AI Studio-এর কোড ট্যাবে যান।
   2. firebase-applet-config.json ফাইলটি খুলুন।
   3. projectId ফিল্ডের মানটি কপি করুন।
2. ফায়ারবেস কনসোলে যান এবং এই আইডি ব্যবহার করে প্রজেক্টটি অনুসন্ধান করুন।

   দ্রষ্টব্য: আপনি যদি প্রথমবারের মতো ফায়ারবেস প্রজেক্ট তৈরি করেন, তাহলে শুধুমাত্র একটি প্রজেক্টই উপলব্ধ থাকবে, যেটি হলো গুগল এআই স্টুডিও দ্বারা তৈরি প্রজেক্ট।

সতর্কীকরণ: যদি আপনি কোডে কনফিগারেশন ফাইলটি খুঁজে না পান, অথবা কনসোলে ফায়ারবেস প্রজেক্টটি খুঁজে না পান, তার মানে হলো প্রজেক্টটি তৈরি করা হয়নি। আপনি "অনুগ্রহ করে এই অ্যাপে ফায়ারবেস অথেন্টিকেশন এবং ফায়ারস্টোর যোগ করুন" এই বার্তাটি পাঠিয়ে গুগল এআই স্টুডিওকে এটি ঠিক করতে বলতে পারেন।

আপনার ডিবাগ টোকেন নিবন্ধন করুন

আপনার অ্যাপ Firebase App Check ব্যবহার করে তার ব্যাকএন্ড পরিষেবা এবং এআই মডেলগুলোকে অপব্যবহার থেকে রক্ষা করতে পারে, যা নিশ্চিত করে যে আগত ট্র্যাফিক শুধুমাত্র বৈধ অ্যাপ থেকেই আসছে।

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

যেহেতু আপনার অ্যাপটি গুগল এআই স্টুডিও প্রিভিউ এনভায়রনমেন্টে চলছে, তাই এটি অ্যাপ চেক ডিবাগ প্রোভাইডার ( self.FIREBASE_APPCHECK_DEBUG_TOKEN = true ) ব্যবহার করে। যখন ওয়েব অ্যাপটি লোড হয়, ফায়ারবেস স্বয়ংক্রিয়ভাবে আপনার ব্রাউজারের ডেভেলপার কনসোলে একটি ডিবাগ টোকেন আউটপুট করে।

1. আপনার ডিবাগ টোকেনটি খুঁজুন:
   1. Google AI Studio-তে, আপনার অ্যাপ প্রিভিউ দেখার সময় ব্রাউজারের ডেভেলপার টুলস খুলুন:
      • ক্রোম, এজ বা ফায়ারফক্স: F12 চাপুন (অথবা প্রিভিউয়ের যেকোনো জায়গায় রাইট-ক্লিক করে ‘Inspect’ নির্বাচন করুন), এবং তারপর ‘Console’ ট্যাবটি নির্বাচন করুন।
      • macOS: Cmd+Option+I চাপুন এবং তারপর Console ট্যাবটি নির্বাচন করুন।
   2. কনসোল লগগুলিতে, অ্যাপ চেক ডিবাগ বার্তাটি খুঁজুন:

      AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
      You will need to safelist it in the Firebase console for it to work.
      

   3. টোকেন স্ট্রিংটি (উদ্ধৃতি চিহ্ন ছাড়া) কপি করুন।
2. আপনার ডিবাগ টোকেন নিবন্ধন করুন:
   1. Firebase কনসোলে, Security > App Check > Apps ট্যাবে যান।
   2. তালিকা থেকে আপনার ওয়েব অ্যাপটি খুঁজুন, তিন-বিন্দু মেনুতে ( ⋮ ) ক্লিক করুন এবং ‘Manage debug tokens’ নির্বাচন করুন।
   3. 'Add debug token'-এ ক্লিক করুন, আপনার কপি করা টোকেনটি পেস্ট করুন, Google AI Studio Preview এর মতো একটি নাম লিখুন এবং 'Save'-এ ক্লিক করুন।
   

দ্রষ্টব্য: আপনি যদি ব্রাউজার কনসোলে ডিবাগ টোকেনটি দেখতে না পান, তাহলে Google AI Studio প্রিভিউ ট্যাবটি রিফ্রেশ করুন অথবা Google AI Studio এজেন্টকে বলুন: "অনুগ্রহ করে নিশ্চিত করুন যে firebase App Check, self.FIREBASE_APPCHECK_DEBUG_TOKEN = true ব্যবহার করে ডিবাগ মোডে ইনিশিয়ালাইজ করা হয়েছে।"

৫. অ্যাপটি পরীক্ষা করুন

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

1. ব্যবহারকারীর প্রমাণীকরণ পরীক্ষা করুন এবং অগ্রাধিকারগুলি সংরক্ষণ করুন:
   1. Google AI Studio-তে Decide For Me অ্যাপ প্রিভিউতে, একটি Google অ্যাকাউন্ট দিয়ে সাইন ইন করে অথেনটিকেশন স্ক্রিনটি পরীক্ষা করুন।
   2. ডানদিকের প্যানেল ( আমার অগ্রাধিকার ) ব্যবহার করে আপনার জীবনের অগ্রাধিকারগুলো সংরক্ষণ করুন।
2. ফায়ারবেস কনসোলে প্রমাণীকরণ যাচাই করুন:
   1. Firebase কনসোলে যান এবং Authentication খুলুন।
   2. Decide For Me অ্যাপে প্রমাণীকরণের জন্য আপনি যে Google অ্যাকাউন্টটি ব্যবহার করেছেন, সেটি সেখানে তালিকাভুক্ত আছে কিনা তা নিশ্চিত করুন:
   
3. ফায়ারস্টোর ডেটা স্টোরেজ যাচাই করুন:
   1. Firebase কনসোলে Firestore খুলুন।
   2. নিশ্চিত করুন যে আপনার অগ্রাধিকারগুলি users/{userId} পাথের অধীনে একটি ডকুমেন্টে সংরক্ষিত আছে:
   

সতর্কীকরণ: আপনি যদি ফায়ারস্টোরে কোনো ডকুমেন্ট দেখতে না পান, তাহলে রুলস (Rules) ট্যাবে যান এবং নিশ্চিত করুন যে আপনার শক্তিশালী নিরাপত্তা নিয়ম (security rules) প্রয়োগ করা আছে। যদি নিরাপত্তা নিয়মগুলো খালি থাকে অথবা প্রতিটি কলে false রিটার্ন করে, তাহলে আপনার অ্যাপ কোনো ফায়ারস্টোর কালেকশনে কোনো ডকুমেন্ট তৈরি করতে পারবে না। সেক্ষেত্রে, এআই স্টুডিওতে (AI Studio) ফিরে যান এবং অ্যাপটির জন্য শক্তিশালী নিরাপত্তা নিয়মগুলো প্রয়োগ করতে বলুন।

৬. ফায়ারবেস ব্যবহার করে একটি এআই-চালিত ডিসাইডার ফ্লো তৈরি করুন।

আপনার অ্যাপ তার 'ডিসাইড ফর মি' অ্যাকশনগুলো পরিচালনা করতে এআই ব্যবহার করবে। আপনি এই এআই-চালিত ডিসাইডার ফ্লোটি তৈরি করতে ফায়ারবেস ব্যবহার করতে পারেন।

ফায়ারবেস এআই লজিক সেট আপ করুন

1. Firebase AI Logic-এ Gemini Developer API সক্রিয় করুন:
   1. Firebase কনসোলে Firebase AI Logic খুলুন এবং তারপরে 'Get started'-এ ক্লিক করুন।
   2. Gemini Developer API নির্বাচন করুন এবং API-টি সক্রিয় করতে কনসোলের নির্দেশাবলী অনুসরণ করুন।

   দ্রষ্টব্য: এই পর্যায়ে Firebase AI Logic-এর জন্য অ্যাপ চেক স্বয়ংক্রিয়ভাবে প্রয়োগ করা হয়। এই কারণেই এই কোডল্যাবের শুরুতে অ্যাপ চেক ডিবাগ প্রোভাইডার সেট আপ এবং রেজিস্টার করা গুরুত্বপূর্ণ ছিল — এটি নিশ্চিত করে যে Google AI Studio-তে আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট থেকে আসা অনুরোধগুলি যাচাই করা হয় এবং Firebase AI Logic দ্বারা প্রত্যাখ্যাত না হয়।

2. ফায়ারবেস এআই লজিক সেটিংস কনফিগার করুন:
   1. সেটিংস ট্যাবে যান।
   2. ‘Enforce template-only mode’ অপশনটি ‘Enforced’- এ টগল করুন।
   3. ‘Enforce authenticated-users mode’ অপশনটি ‘Enforced’- এ টগল করুন।

একটি সার্ভার প্রম্পট টেমপ্লেট তৈরি করুন

এই কোডল্যাবে, আপনি Firebase AI Logic-এর মাধ্যমে Gemini API-এর সাথে যোগাযোগের জন্য সার্ভার প্রম্পট টেমপ্লেট ব্যবহার করবেন।

টেমপ্লেটটি নিয়ে কাজ শুরু করার আগে, মডেল কনফিগারেশন, সিস্টেম নির্দেশনা এবং প্রম্পটগুলো সার্ভার-সাইডে সংরক্ষণ করা কেন গুরুত্বপূর্ণ, তা বোঝার জন্য নিম্নলিখিত বিষয়গুলো পর্যালোচনা করুন:

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

যেভাবে একটি সার্ভার প্রম্পট টেমপ্লেট তৈরি ও পরীক্ষা করবেন:

1. সার্ভার প্রম্পট টেমপ্লেট তৈরি করুন:
   1. প্রম্পট টেমপ্লেট ট্যাবে যান।
   2. টেমপ্লেট তৈরি করুন -এ ক্লিক করুন।
   3. খালি টেমপ্লেট নির্বাচন করুন।
   4. নিম্নলিখিত তথ্য ব্যবহার করে আপনার প্রথম টেমপ্লেটটি তৈরি করুন:
      • টেমপ্লেটের নাম: ডিসাইডার ফ্লো
      • টেমপ্লেট আইডি: decider-flow
      • কনফিগারেশন (ফ্রন্টম্যাটার)

        model: "gemini-3.5-flash-lite"
        input:
          schema:
            priorities: "string, user's core priorities"
            optionA: "string, option A under consideration"
            optionB: "string, option B under consideration"
        output:
          format: json
          schema:
            verdict: string
            justification: string
            firstStep: string
        

      • প্রম্পট এবং (ঐচ্ছিক) সিস্টেম নির্দেশাবলী

        {role "system"}
        You are the Decider Agent, a multi-stage reasoning engine that
        combines the roles of an honest and polite behavioral economist, a
        long-term strategic forecaster, and an executive decision coach.
        Your job is to take a user's dilemma and their core priorities, run
        them through a rigorous, adversarial 3-phase thinking process, and
        output a highly analytical, reasoning-backed final verdict. You must be
        direct, sharp, and realistic. Do not give generic platitudes or claim
        that "both options are great." You must force a clear choice.
        
        {role "user"}
        # Context & Inputs
        You are analyzing a critical life decision for the user. Base your
        entire multi-phase reasoning flow strictly on these three specific
        inputs:
        - User's Core Priorities: {{priorities}}
        - Option A under consideration: {{optionA}}
        - Option B under consideration: {{optionB}}
        
        Execute your reasoning flow through the following three phases:
        
        # Phase 1: Cynical Breakdown (Input-Driven Analysis)
        Analyze {{optionA}} and {{optionB}} strictly through the lens of the
        user's explicit {{priorities}}. Do not evaluate them in a vacuum.
        - Identify the hidden flaws, compromises, and psychological costs
          embedded in both choices.
        - Pinpoint exactly how {{optionA}} could directly conflict with or
          undermine their {{priorities}}.
        - Pinpoint exactly how {{optionB}} could directly conflict with or
          undermine their {{priorities}}.
        - Uncover any cognitive biases (like status quo bias or loss aversion)
          the user might be falling for in either option.
        
        # Phase 2: Long-Term Regret Projection
        Project the user 5 years into the future. Apply the Regret Minimization
        Framework to both paths:
        - The {{optionA}} Timeline: Quantify the absolute worst-case, deep,
          structural 5-year regret of choosing this path. Focus heavily on
          failures of courage vs. failures of action based on their
          {{priorities}}.
        - The {{optionB}} Timeline: Quantify the matching 5-year regret for
          this path.
        - Contrast these two timelines. Which option carries the kind of regret
          that fundamentally breaks the user's {{priorities}}?
        
        # Phase 3: Final Recommendation & Action Step
        Synthesize the cynical critiques and long-term regret scores.
        Weigh them against the user's {{priorities}} to determine which
        choice minimizes long-term disappointment.
        - Verdict: You must declare either {{optionA}} or {{optionB}} as the
          definitive winner. No compromise, no "it depends," and no hybrid
          options.
        - Justification: Provide a sharp, reasoning-backed explanation showing why
          the losing option was eliminated based on the Phase 1 and Phase 2
          analysis.
        - First Step: Give one microscopic, low-friction task the user can
          execute within the next 15 minutes to commit to or move toward the
          chosen verdict.
        

        আপনার সিস্টেমের নির্দেশাবলী এবং প্রম্পট সঠিক সিনট্যাক্সে লেখার জন্য {role "system"} এবং {role "user"} এর চারপাশে একটি অতিরিক্ত {} যোগ করুন:
      • পরীক্ষার ইনপুট

        {
          "priorities": "Be financially stable, have a good work-life balance where I can travel twice a year",
          "optionA": "Buy a house for 615000 British pounds with a mortgage of 2800 per month for the next 35 years",
          "optionB": "Keep renting for 2400 per month for the foreseeable"
        }
        

2. টেমপ্লেট সংরক্ষণ করুন -এ ক্লিক করুন।
3. টেমপ্লেটটি পরীক্ষা করুন:
   1. রান প্রম্পট টেস্ট-এ ক্লিক করুন।
   2. টেস্ট রেসপন্সটি খুঁজে বের করুন এবং যাচাই করুন যে এতে প্রম্পটে আপনার নির্দিষ্ট করা সমস্ত ফিল্ড ( verdict , justification , এবং firstStep ) আছে কিনা।
   3. যদি সবকিছু প্রত্যাশিত ফলাফলের সাথে মিলে যায়, তাহলে ভার্সনের স্থিতিশীলতা নিশ্চিত করতে এবং অনিচ্ছাকৃত পরিবর্তন রোধ করতে টেমপ্লেটের উপরের ডান কোণায় থাকা লক আইকনটি ব্যবহার করে টেমপ্লেটটি লক করুন।

আপনার টেমপ্লেটটি আপনার অ্যাপে ব্যবহারের জন্য প্রস্তুত!

৭. অ্যাপে ডিসাইডার প্রম্পট টেমপ্লেটটি ব্যবহার করুন।

আপনার ওয়েব অ্যাপটি টেমপ্লেট ব্যবহার করে তৈরি করুন:

1. Google AI Studio-তে আপনার অ্যাপে ফিরে যান।
2. Google AI Studio এজেন্টকে 'Decide For Me' অ্যাকশনটি বাস্তবায়ন করতে বলুন:
   1. নিম্নলিখিত প্রম্পটটি কপি করুন:

      Now let's implement the "Decide For Me" button action. When clicked, it
      should call the Firebase AI Logic SDK using a Template Generative Model.
      The prompt is stored in a prompt template with the id "decider-flow". When
      calling the API, pass the following variables as the input payload object:
      - priorities
      - optionA
      - optionB
      
      The API will return a JSON object. Handle the response asynchronously and
      extract:
      - verdict
      - justification
      - firstStep
      
      Once the data is received, update the UI state to append a new message to
      the chat array. Ensure it renders as a system chat bubble positioned on
      the left side of the chat screen, mapping these three fields clearly into
      the bubble's layout.
      
      Please provide the necessary front-end component state updates and the
      Firebase SDK call.
      

   2. প্রম্পটটি গুগল এআই স্টুডিও চ্যাট ইনপুটে পেস্ট করুন এবং সেন্ড-এ ক্লিক করুন।
3. কনফিগারেশন যাচাই করুন এবং ডিসিশন অ্যাসিস্ট্যান্ট পরীক্ষা করুন:
   1. গুগল এআই স্টুডিও আপনার অ্যাপে ফায়ারবেস এআই লজিক যুক্ত করা শেষ না করা পর্যন্ত অপেক্ষা করুন।
   2. কোড ট্যাবে যান এবং নিশ্চিত করুন যে আপনার firebase-applet-config.json ফাইলে একটি API কী আছে। যদি কনফিগারেশন ফাইলে Firebase API কী না থাকে, তাহলে Google AI Studio-কে এটি ইম্পোর্ট করতে বলুন।
   3. প্রিভিউ ট্যাবে যান
   4. বিকল্প A এবং B জমা দিন, এবং যাচাই করুন যে AI সিদ্ধান্ত, তার যৌক্তিকতা এবং প্রথম পদক্ষেপটি ফেরত দিচ্ছে।

সতর্কীকরণ: Firebase API কী কনফিগার করা থাকা সত্ত্বেও যদি Firebase AI Logic-এ কল ব্যর্থ হয়, তবে নিম্নলিখিত প্রম্পট ব্যবহার করে Google AI Studio এজেন্টকে এটি ঠিক করতে বলুন:

অনুগ্রহ করে নিশ্চিত করুন যে Firebase AI Logic কলটি decider-flow টেমপ্লেটের সাথে getAI(app) এবং getTemplateGenerativeModel(aiInstance) ব্যবহার করে , JSON রেসপন্সটিকে verdict , justification এবং firstStep এ সঠিকভাবে পার্স করে , এবং এতে কোনো টাইমআউট সীমাবদ্ধতা বা অপ্রয়োজনীয় ফাংশন চেক নেই।

তথ্যসূত্র হিসেবে, গুগল এআই স্টুডিও দ্বারা তৈরি কোডটি দেখতে এইরকম হওয়া উচিত:

const aiInstance = getAI(app);
const templateModel = getTemplateGenerativeModel(aiInstance);

const result = await templateModel.generateContent('decider-flow', {
  priorities: priorities,
  optionA: optA,
  optionB: optB
});

const rawText = result.response.text();

// Parse response text to extract fields
const cleaned = rawText.replace(/```json|```/g, '').trim();
const parsedData: { verdict?: string; justification?: string; firstStep?: string } = JSON.parse(cleaned);

const verdict = parsedData.verdict;
const justification = parsedData.justification;
const firstStep = parsedData.firstStep;

অনুরোধগুলি ডিবাগ এবং নিরীক্ষণ করুন

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

1. Firebase কনসোলে, AI Services > AI Logic > AI monitoring ট্যাবে যান।
2. ড্যাশবোর্ডে পরিমাণগত মেট্রিকগুলো যাচাই করুন:
   • অনুরোধের পরিমাণ এবং অবস্থা: যাচাই করুন যে আগত অনুরোধগুলি ব্যাকএন্ডে পৌঁছাচ্ছে এবং 200 OK ফেরত দিচ্ছে, নাকি ক্লায়েন্ট বা সার্ভার ত্রুটির কারণে ব্যর্থ হচ্ছে।
   • লেটেন্সি: এন্ড-টু-এন্ড রেসপন্স টাইম যাচাই করতে লেটেন্সি গ্রাফটি দেখুন।
   • টোকেন সংখ্যা: প্রতি অনুরোধে ইনপুট ও আউটপুট টোকেন ব্যবহার নিরীক্ষণ করুন।
3. গভীর ডিবাগিংয়ের জন্য স্বতন্ত্র অনুরোধ ট্রেস পরীক্ষা করুন: এর পেলোড পরীক্ষা করতে ট্রেস টেবিলে একটি নির্দিষ্ট অনুরোধ ট্রেসে ক্লিক করুন।
   • ইনপুট: নিশ্চিত করুন যে ভেরিয়েবলগুলো ( priorities , optionA , এবং optionB ) ক্লায়েন্ট অ্যাপ থেকে সঠিকভাবে পাঠানো হয়েছে।
   • আউটপুট: মডেলটি স্কিমার সাথে সামঞ্জস্যপূর্ণ বৈধ JSON রিটার্ন করেছে কিনা তা যাচাই করতে, মডেল দ্বারা তৈরি মূল টেক্সটটি দেখুন।
   • ত্রুটির বিবরণ: যদি কোনো অনুরোধ ব্যর্থ হয়, তাহলে অবৈধ অ্যাপ চেক টোকেন, প্রমাণীকরণ প্রত্যাখ্যান, কোটার সীমা, বা প্রম্পট যাচাইকরণ ত্রুটির মতো কারণগুলির জন্য ট্রেস এরর লগটি পরীক্ষা করুন।
4. গুগল এআই স্টুডিও-এর সমস্যা সমাধান করুন:
   • যদি আপনি ট্রেসে কোনো ত্রুটি শনাক্ত করেন (উদাহরণস্বরূপ, ত্রুটিপূর্ণ JSON প্রতিক্রিয়া পার্সিং বা অনুপস্থিত প্যারামিটার), তাহলে ত্রুটির বার্তা বা পেলোডটি কপি করুন।
   • Google AI Studio-তে ফিরে যান এবং অ্যাপ কোডের সংশ্লিষ্ট সমস্যাটি সমাধান করার জন্য অ্যাসিস্ট্যান্টকে নির্দেশ দিন।

৮. ঐচ্ছিক: অ্যাপটি স্থাপন করুন।

এখন যেহেতু আপনার অ্যাপটি প্রিভিউ মোডে কাজ করছে, এটিকে প্রোডাকশনে ডেপ্লয় করুন।

প্রোডাকশনে আপনার Firebase এন্ডপয়েন্টগুলিকে সুরক্ষিত রাখতে, Firebase App Check-এর সাথে ব্যবহারের জন্য একটি প্রোডাকশন অ্যাটেস্টেশন প্রোভাইডার কনফিগার করুন (এই কোডল্যাবে, আপনি reCAPTCHA v3 ব্যবহার করবেন)।

আপনাকে প্রথমে আপনার অ্যাপটি ডেপ্লয় করতে হবে এর সঠিক লাইভ ইউআরএলটি পাওয়ার জন্য, যাতে আপনি সমস্ত ai.studio অ্যাপকে অনুমতি না দিয়ে reCAPTCHA-এর মাধ্যমে নির্দিষ্ট ডোমেইনটি রেজিস্টার করতে পারেন।

আপনার অ্যাপটি স্থাপন করুন এবং reCAPTCHA কনফিগার করুন:

1. Google AI Studio ব্যবহার করে ওয়েব অ্যাপটি স্থাপন করুন:
   1. Google AI Studio-তে, উপরের নেভিগেশন বারে থাকা Publish- এ ক্লিক করুন।
   2. 'Get started'- এ ক্লিক করুন, অ্যাপ্লিকেশনটির নাম ও বিবরণ পর্যালোচনা বা নিজের মতো করে সাজিয়ে নিন এবং 'Publish your app'-এ ক্লিক করুন।
   3. গুগল এআই স্টুডিও আপনার অ্যাপটি বিল্ড ও ডিপ্লয় করা পর্যন্ত অপেক্ষা করুন (সাধারণত ১-২ মিনিট সময় লাগে)।
   4. তৈরি হওয়া লাইভ ভ্যানিটি ইউআরএলটি (উদাহরণস্বরূপ, https://decide-for-me-123.ai.studio ) কপি করুন এবং এর ডোমেইনটি (উদাহরণস্বরূপ, decide-for-me-123.ai.studio ) নোট করে রাখুন।
2. Google reCAPTCHA-তে reCAPTCHA v3 কী তৈরি করুন:
   1. Google reCAPTCHA অ্যাডমিন কনসোলে যান।
   2. একটি লেবেল লিখুন (উদাহরণস্বরূপ, Decide For Me - Production )।
   3. reCAPTCHA-এর ধরণ নির্বাচন করুন > reCAPTCHA v3 (স্কোর-ভিত্তিক) ।
   4. ডোমেইনস সেকশনে, আপনার অ্যাপের হুবহু ডেপ্লয় করা ডোমেইনটি যোগ করুন (উদাহরণস্বরূপ, decide-for-me-123.ai.studio , যেখানে https:// এবং যেকোনো পাথ বাদ থাকবে) অথবা আপনি যদি কোনো কাস্টম ডোমেইন ব্যবহার করার পরিকল্পনা করেন, তবে সেটিও যোগ করুন।
   5. পরিষেবার শর্তাবলী গ্রহণ করুন এবং 'জমা দিন'-এ ক্লিক করুন।
   6. এই ট্যাবটি খোলা রাখুন: আপনার সাইট কী (পাবলিক ক্লায়েন্ট কী) এবং সিক্রেট কী (প্রাইভেট সার্ভার কী) উভয়ই প্রয়োজন হবে।
3. ফায়ারবেস কনসোলে আপনার গোপন কী নিবন্ধন করুন:
   1. Firebase কনসোলে App Check- এ যান।
   2. অ্যাপস ট্যাবে যান।
   3. তালিকা থেকে আপনার ওয়েব অ্যাপ্লিকেশনটি খুঁজুন, সেটিতে ক্লিক করুন (অথবা তিন-বিন্দু মেনুতে ⋮ ক্লিক করুন), এবং reCAPTCHA v3 নির্বাচন করুন।
   4. আপনার reCAPTCHA সিক্রেট কী-টি নির্দিষ্ট ফিল্ডে পেস্ট করুন এবং সেভ-এ ক্লিক করুন।
4. ReCaptchaV3Provider ব্যবহার করার জন্য ক্লায়েন্ট অ্যাপটি কনফিগার করুন :
   1. Google AI Studio-তে, চ্যাট প্যানেলে যান এবং প্রোডাকশনের জন্য আপনার অ্যাপ চেক কনফিগারেশন আপডেট করতে অ্যাসিস্ট্যান্টকে নির্দেশ দিন:

      Please update our Firebase App Check initialization to use
      ReCaptchaV3Provider with the reCAPTCHA site key "YOUR_RECAPTCHA_SITE_KEY",
      while retaining support for debug tokens in non-production environments.
      

   2. আপনি যদি সরাসরি কোড ট্যাবে কোডটি পর্যালোচনা করেন, তাহলে নিশ্চিত করুন যে আপনার অ্যাপ চেক ইনিশিয়ালাইজেশন এই কাঠামোর সাথে মেলে:

      import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
      
      const appCheck = initializeAppCheck(app, {
        provider: new ReCaptchaV3Provider("YOUR_RECAPTCHA_SITE_KEY"),
        isTokenAutoRefreshEnabled: true
      });
      

   3. কোড আপডেট করার পর, আপনার লাইভ সাইটে আপডেট করা অ্যাপ চেক কনফিগারেশনটি পুশ করতে Google AI Studio-তে আপনার অ্যাপটি পুনরায় পাবলিশ করুন।
5. প্রোডাকশন ট্র্যাফিক যাচাই করুন এবং অ্যাপ চেক নিরীক্ষণ করুন:
   1. একটি ইনকগনিটো ব্রাউজার উইন্ডোতে আপনার লাইভ অ্যাপের ইউআরএলটি খুলুন, গুগল দিয়ে সাইন ইন করুন এবং একটি দ্বিধা জমা দিয়ে পরীক্ষা করুন।
   2. Firebase কনসোলে App Check- এ ফিরে যান এবং API ও Monitoring ট্যাবগুলো পরীক্ষা করে যাচাই করুন যে Firestore এবং Firebase AI Logic-এর জন্য অনুরোধগুলো সফলভাবে নিবন্ধিত হয়েছে কিনা।

দ্রষ্টব্য: Firebase AI Logic-এর জন্য অ্যাপ চেক ইতিমধ্যেই চালু করা আছে। অ্যাপ চেক মেট্রিক্সে যখন আপনি দেখবেন যে ১০০% বৈধ ট্র্যাফিক যাচাই করা হয়েছে, তখন আপনিও Firestore- এর জন্য অ্যাপ চেক এনফোর্সমেন্ট স্ট্যাটাসটি ' এনফোর্স'- এ পরিবর্তন করতে পারেন, যাতে সমস্ত যাচাইবিহীন ট্র্যাফিক স্বয়ংক্রিয়ভাবে বাতিল হয়ে যায়।

৯. উপসংহার

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

'Completed Builder Journey' ব্যাজটি সংগ্রহ করতে এই লিঙ্কে যান!

আপনার যাত্রা অব্যাহত রাখতে, পরবর্তী ল্যাবের জন্য goo.gle/builders- এ যান।

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