১. ভূমিকা
সংক্ষিপ্ত বিবরণ
আজ এআই দিয়ে নির্মাণের শুরুটা কোথায়? এর শুরুটা হয় একটি স্ফুলিঙ্গ থেকে: প্রোটোটাইপ করার মতো একটি ধারণা। গুগল এআই স্টুডিও-এর বিল্ড মোড 'ভাইব কোডিং'-এর মাধ্যমে সেই স্ফুলিঙ্গকে বাস্তবে পরিণত করে। জেমিনি মডেল ব্যবহার করে, আপনি সম্পূর্ণভাবে কনভারসেশনাল কোড জেনারেশনের মাধ্যমে ফুল-স্ট্যাক ওয়েব অ্যাপ্লিকেশন ডিজাইন, টেস্ট এবং ডেপ্লয় করতে পারেন।
এই কোডল্যাবে, আপনি ‘ব্লক এক্সপ্লোরার’ তৈরি করবেন, যা একটি ইন্টারেক্টিভ জিওস্পেশিয়াল গেম এবং এটি বাস্তব জগতের ম্যাপিং ডেটার সাথে জেনারেটিভ এআই-কে একত্রিত করে। আপনি অ্যাপ্লিকেশনটি জেনারেট করতে এবং এটিকে গুগল ম্যাপস প্ল্যাটফর্ম ও জেমিনি এপিআই-এর সাথে ইন্টিগ্রেট করতে এআই স্টুডিও ব্যবহার করবেন। এরপর আপনি শিখবেন কীভাবে তৈরি অ্যাপ্লিকেশনটি সরাসরি ক্লাউড রান- এ ডেপ্লয় করতে হয়, যাতে অন্যরাও এটি ব্যবহার করে দেখতে পারে।
আপনি যা করবেন
- গুগল এআই স্টুডিও ব্যবহার করে একটি ইন্টারেক্টিভ ভূ-স্থানিক ম্যাপিং এবং কুইজ ওয়েব অ্যাপ্লিকেশনের প্রোটোটাইপ তৈরি করুন।
- সরাসরি এআই স্টুডিও ওয়ার্কস্পেসের মধ্যে একটি গুগল ম্যাপস প্ল্যাটফর্ম ডেমো কী সক্রিয় করুন এবং স্বয়ংক্রিয়ভাবে সরবরাহ করুন।
- স্বাভাবিক ভাষার প্রম্পট ব্যবহার করে ডাইনামিক অ্যাড্রেস জিওকোডিং, স্থান আবিষ্কার এবং এআই-জেনারেটেড ট্রিভিয়া কুইজ বাস্তবায়ন করুন।
- Maps Grounding Lite সংহত করার মাধ্যমে ট্রিভিয়া কুইজের নির্ভুলতা বাড়ান।
- ইন্টারেক্টিভ প্রিভিউ স্যান্ডবক্সে অ্যাপ্লিকেশনটি পরীক্ষা করুন এবং এর উন্নতি সাধন করুন।
- সরাসরি গুগল এআই স্টুডিও UI থেকে ক্লাউড রান-এ অ্যাপ্লিকেশনটি ডেপ্লয় করুন।
আপনি যা শিখবেন
- স্বাভাবিক ভাষা ব্যবহার করে কীভাবে গুগল এআই স্টুডিও-এর বিল্ড মোডের সাহায্যে দ্রুত একটি ফুল-স্ট্যাক সার্ভিসের প্রোটোটাইপ তৈরি করা যায়।
- ভূ-স্থানিক ডেটা ব্যবহার করে অ্যাপ্লিকেশন তৈরি করতে কীভাবে গুগল ম্যাপস প্ল্যাটফর্ম এপিআই ব্যবহার করবেন।
- গতিশীল কুইজ এবং স্থানীয় অন্তর্দৃষ্টি তৈরি করার জন্য কীভাবে এলএলএম প্রশ্নাবলীকে বাস্তব-জগতের ভূ-স্থানিক প্রেক্ষাপটের সাথে সংযুক্ত করা যায়।
- ক্লাউড রান-এ আপনার এআই স্টুডিও অ্যাপ্লিকেশনটিকে সার্ভারলেস কন্টেইনার হিসেবে কীভাবে ডেপ্লয় করবেন।
এখানে পিপি-টির একটি পূর্বরূপ দেওয়া হলো:
২. আপনার প্রজেক্টটি সেট আপ করুন।
এআই স্টুডিও চালু করার আগে আপনার অ্যাকাউন্টের অবস্থা, পূর্বশর্ত এবং এপিআই অ্যাক্সেস যাচাই করুন।
গুগল অ্যাকাউন্ট এবং টিয়ার তথ্য
- আপনার যদি আগে থেকে কোনো গুগল অ্যাকাউন্ট না থাকে, তাহলে একটি গুগল অ্যাকাউন্ট তৈরি করুন ।
- পরামর্শ : সম্ভব হলে এই ল্যাবের জন্য একটি ব্যক্তিগত গুগল অ্যাকাউন্ট ব্যবহার করুন। গ্রুপ, কর্পোরেট বা স্কুল অ্যাকাউন্টের ক্ষেত্রে এমন নীতিমালা থাকতে পারে যা পরীক্ষামূলক ফিচার বা ক্লাউড ইন্টিগ্রেশন নিষ্ক্রিয় করে দেয়।
- ডেপ্লয়মেন্টের বিলিং বিবরণ পর্যালোচনা করুন:
- গুগল ক্লাউড স্টার্টার টিয়ার : একটি পূর্ণাঙ্গ গুগল ক্লাউড বিলিং অ্যাকাউন্ট তৈরি না করেই, কোনো খরচ ছাড়াই একটি নির্দিষ্ট অঞ্চলে সর্বোচ্চ দুটি ফুল-স্ট্যাক অ্যাপ্লিকেশন প্রকাশ করার সুযোগ দেয়।
- স্ট্যান্ডার্ড ডেপ্লয়মেন্ট : একটি বিদ্যমান পেইড গুগল ক্লাউড প্রজেক্টের সাথে সংযুক্ত হয় এবং স্টোরেজ সীমা, সিপিইউ রিসোর্স ও এপিআই সম্প্রসারণ করে।
গুগল ম্যাপস প্ল্যাটফর্ম ডেমো কী
প্রোটোটাইপিং সহজ করার জন্য, গুগল এআই স্টুডিও গুগল ম্যাপস প্ল্যাটফর্মের সাথে নেটিভভাবে ইন্টিগ্রেট করে। এটি আপনার প্রোজেক্টের মধ্যেই সরাসরি গুগল ম্যাপস প্ল্যাটফর্মের মূল এপিআইগুলো (যেমন ম্যাপস জাভাস্ক্রিপ্ট এপিআই, জিওকোডিং এপিআই, প্লেসেস এপিআই, এবং রুটস এপিআই) দিয়ে পরীক্ষা ও নির্মাণের একটি ঝামেলাহীন উপায় প্রদান করে। এআই স্টুডিও স্বয়ংক্রিয়ভাবে আপনার জন্য একটি গুগল ম্যাপস প্ল্যাটফর্ম ডেমো কী তৈরি করবে।
ডেমো কী-এর প্রধান সুবিধাগুলো হলো:
- কোনো ক্রেডিট কার্ড বা বিলিং সেটআপের প্রয়োজন নেই : আপনি গুগল ক্লাউড বিলিং অ্যাকাউন্ট কনফিগার না করেই তাৎক্ষণিকভাবে প্রোটোটাইপ তৈরি ও মূল্যায়ন করতে পারবেন।
- উদার প্রোটোটাইপিং কোটা : এর মধ্যে পরীক্ষা এবং পুনরাবৃত্তির জন্য প্রতিটি এপিআই-এর জন্য প্রতিদিন ১০০টি পর্যন্ত বিনামূল্যে অনুরোধ অন্তর্ভুক্ত।
- নির্বিঘ্ন অন্তর্নির্মিত ইন্টিগ্রেশন : আপনাকে কোনো বাহ্যিক পোর্টালে যেতে বা ক্রেডেনশিয়াল কপি-পেস্ট করতে হবে না। আপনার অ্যাপ্লিকেশনটির কখন গুগল ম্যাপস প্ল্যাটফর্মের সাথে ইন্টিগ্রেট করার প্রয়োজন, তা গুগল এআই স্টুডিও স্বয়ংক্রিয়ভাবে শনাক্ত করে এবং আপনার জন্য সবকিছু কনফিগার করে দেয়।
৩. এআই স্টুডিও বিল্ড মোডে অ্যাপ্লিকেশন শেল তৈরি করুন
আপনি গুগল এআই স্টুডিও ব্যবহার করে অ্যাপ্লিকেশন শেল তৈরি করার মাধ্যমে শুরু করবেন।
- Google AI Studio অ্যাপস প্যানেলে যান এবং নতুন অ্যাপে ক্লিক করুন (অথবা বিল্ড ট্যাবটি নির্বাচন করুন)।
- প্রম্পট ইনপুট বক্সে, আপনার ভূ-স্থানিক অ্যাপ্লিকেশনের প্রাথমিক বিবরণ লিখুন। আপনি প্রম্পট সাজেশনের অধীনে থাকা গুগল ম্যাপস প্ল্যাটফর্ম ডিসকভারি চিপটিতেও ক্লিক করতে পারেন:
Build a highly polished, responsive, split-screen application. This application should be called "Block Explorer". It is meant to be a geospatial exploration app. It will use Google Maps Platform.
Key Features & Functionality:
- Split-Screen Layout: On desktop, a 1/3-width left-side editorial control panel and a 2/3-width right-side full-height map.
- Include a search bar where users can type a location such as a city or neighborhood. Submitting should issue a Geocoding request to the Google Geocoding V4 API REST endpoint (https://geocode.googleapis.com/v4/geocode/address/). Then pan the map to the geocoded location.
- Interactive Google Map: Render the Map inside an interactive container allowing users to pan, drag, and zoom freely. Place customized markers representing the currently selected/geocoded location.
- Also include five buttons for presets the users can click on: Buenos Aires, Shibuya, Copacabana, Cologne, and Lima. Clicking on this should geocode the location and pan the map there.
- Make sure to also include a mechanism to clearly show error messages when they occur so users can easily troubleshoot.
- অ্যাপ্লিকেশন তৈরির প্রক্রিয়া শুরু করতে বিল্ড-এ ক্লিক করুন।
এআই স্টুডিও অ্যাপ্লিকেশন কোড তৈরি করা শুরু করবে। ডিজাইন থিম বেছে নিতে বলা হলে, আপনার পছন্দের যেকোনো স্টাইল নির্বাচন করুন।
গুগল ম্যাপস প্ল্যাটফর্ম সক্রিয় করুন এবং ডেমো কী প্রদান করুন
গুগল ম্যাপস প্ল্যাটফর্ম জিওকোডিং এপিআই প্রদান করে, যা মানুষের পাঠযোগ্য ঠিকানার কোয়েরিকে (যেমন "শিবুয়া" বা "বুয়েনস আইরেস") ভৌগোলিক স্থানাঙ্কে (অক্ষাংশ এবং দ্রাঘিমাংশ) রূপান্তর করে মানচিত্রকে কেন্দ্রে আনতে এবং মার্কার প্রদর্শন করতে সাহায্য করে।
যখন আপনি ভূ-স্থানিক উদ্দেশ্য সহ কোনো অনুরোধ পাঠান (যেমন গুগল ম্যাপস, দোকান লোকেটার, বা স্থানীয় অন্বেষণের জন্য অনুরোধ), তখন এআই স্টুডিও স্বয়ংক্রিয়ভাবে ভূ-স্থানিক প্রয়োজনীয়তা শনাক্ত করে এবং মূল পরিষেবা প্রদানে সহায়তা করে:
- প্রাসঙ্গিক সক্রিয়করণ পর্দা : কথোপকথনের পালা চলাকালীন "গুগল ম্যাপস প্ল্যাটফর্ম সেট আপ করুন" শিরোনামের একটি ইনলাইন কার্ড প্রদর্শিত হয়।
- শর্তাবলী গ্রহণ করুন এবং সক্রিয় করুন :
- ম্যাপস ডেমো প্রজেক্টের পরিষেবার শর্তাবলী (এবং অনুরোধ করা হলে স্টার্টার টিয়ারের অতিরিক্ত পরিষেবার শর্তাবলী ) পর্যালোচনা করুন এবং গ্রহণ করুন।
- গুগল ম্যাপস সক্ষম করুন -এ ক্লিক করুন।
- স্বয়ংক্রিয় কী প্রোভিশনিং ও সিক্রেট ইনজেকশন : এআই স্টুডিও স্বয়ংক্রিয়ভাবে গুগল হোস্টেড প্রজেক্ট (GHP) ইনফ্রাস্ট্রাকচারে একটি গুগল ম্যাপস প্ল্যাটফর্ম ডেমো কী প্রোভিশন করে এবং এটিকে সরাসরি আপনার প্রজেক্টের সিক্রেট-এ
GOOGLE_MAPS_PLATFORM_KEYনামে ইনজেক্ট করে। - তাৎক্ষণিক লাইভ প্রিভিউ : অ্যাপ্লিকেশন প্রিভিউ স্যান্ডবক্সটি সাথে সাথে একটি লাইভ, সম্পূর্ণ কার্যকরী ইন্টারেক্টিভ গুগল ম্যাপ দিয়ে রিফ্রেশ হয়।
একটি নতুন অবস্থান প্রবেশ করিয়ে অথবা পূর্বনির্ধারিত অবস্থান বাটনগুলোর মধ্যে একটি নির্বাচন করে প্রিভিউ স্যান্ডবক্সে অ্যাপ্লিকেশনটি পরীক্ষা করুন!
৪. জেমিনি এপিআই (Gemini API) ব্যবহার করে স্থানীয় তথ্য যোগ করুন
এরপরে, ব্যবহারকারীরা যখন মানচিত্রটি অন্বেষণ করবে, তখন স্থানগুলো সম্পর্কে সমৃদ্ধ ও স্থানীয় তথ্য তৈরি করার জন্য আপনি জেমিনি এপিআই (Gemini API) সংহত করবেন।
- চ্যাট উইন্ডোতে এআই অ্যাসিস্ট্যান্টকে নিম্নলিখিত নির্দেশটি পাঠান:
Now, let's bring in the AI using the Gemini API.
1. Once geocoding successfully identifies the City and State (e.g., "Miami, Florida"), trigger a call to the Gemini API (using the gemini-3.8-flash model).
2. Use the following prompt template for the AI:
"You are a local tour guide for [City, State]. Give me exactly 3 short, highly engaging, and unusual or surprising fun facts about this place. Keep each fact under 2 sentences. Format the response as a clean HTML unordered list (<ul>) so I can inject it directly."
3. Display these fun facts in a beautiful "Local Insights" banner on the bottom portion of the map screen. Add a subtle loading spinner while the AI is thinking.
4. Make sure to make this handling robust. If an API request fails, display a user-friendly error notification in the UI.
- প্রিভিউ প্যানে যাচাই করুন যে কোনো স্থান নির্বাচন বা অনুসন্ধান করার সময় জেমিনি দ্বারা তৈরি গতিশীল মজার তথ্য প্রদর্শিত হচ্ছে কিনা।
আপনি দেখবেন এআই স্টুডিও অ্যাপ্লিকেশনটি আপডেট করবে, যার ফলে স্ক্রিনের নিচে 'লোকাল ইনসাইটস' সেকশনটি যুক্ত হবে।
৫. এআই-নির্মিত ট্রিভিয়া কুইজটি তৈরি করুন।
এখন যেহেতু আপনার অ্যাপ্লিকেশনটি অবস্থানের স্থানাঙ্ক এবং স্থানীয় তথ্য সংগ্রহ করতে পারে, তাই নির্বাচিত গন্তব্যের উপর ভিত্তি করে ইন্টারেক্টিভ ট্রিভিয়া কুইজ তৈরি করতে এই ক্ষমতাগুলোকে একত্রিত করুন।
- এজেন্টের কাছে কুইজ তৈরির প্রম্পটটি পাঠান:
Now let's build the actual game! We will have Gemini generate a 3-question quiz based on the real places we just got information about.
After the local insights are generated, show the user a button to "Test their local knowledge". Once clicked, offer them 3 options to choose from:
- Local cuisine
- Art and culture
- Local history
Once selected, generate a 3-question quiz based on the category and the place. The quiz should be multiple choice. Once the user submits the quiz show them their score and the correct answer.
- স্টেট ম্যানেজমেন্ট, উত্তর নির্বাচন এবং স্কোর প্রদর্শন পরীক্ষা করার জন্য প্রিভিউ উইন্ডোতে তৈরি করা কুইজটি খেলুন।
৬. ম্যাপস গ্রাউন্ডিং লাইট একীভূত করুন
ডিফল্টরূপে, জেমিনি তার প্রশিক্ষণ ডেটা থেকে প্রাপ্ত জ্ঞান ব্যবহার করে তথ্য ও কুইজ তৈরি করে। নির্ভুলতা বাড়াতে এবং রিয়েল-টাইম স্থানিক ডেটার সুবিধা নিতে, ম্যাপস গ্রাউন্ডিং লাইট (Maps Grounding Lite) ইন্টিগ্রেট করুন। এই পরিষেবাটি জেমিনিকে সরাসরি গুগল ম্যাপস প্ল্যাটফর্ম থেকে লাইভ ডেটার সাথে সংযুক্ত করে।
- AI Studio-তে নিম্নলিখিত প্রম্পটটি পাঠান:
Add a toggle to make the quiz more difficult. Call this "Hyperlocal mode". When enabled, use the Google Maps Grounding Lite service with the Gemini API to fetch more local data, making the quiz more difficult.
Add information for the user so they know that Hyperlocal Mode is more difficult and how it works.
- গ্রাউন্ডেড কুইজ জেনারেশন যাচাই করতে প্রিভিউ উইন্ডোতে হাইপারলোকাল মোড টগলটি পরীক্ষা করুন।
এলএলএম-রা নির্দিষ্ট ব্যবসায়িক সময়, সাম্প্রতিক খালি পদ বা সঠিক স্থানের আইডি কল্পনা করতে পারে। ম্যাপস গ্রাউন্ডিং লাইট বাস্তব গুগল ম্যাপস প্লেসেস সত্তা এবং অ্যাট্রিবিউশনের মাধ্যমে উত্তরগুলোকে ভিত্তি দেয়, যা ট্রিভিয়া প্রশ্নগুলোর তথ্যগত নির্ভুলতা উল্লেখযোগ্যভাবে উন্নত করে।
৭. ক্লাউড রানে স্থাপন করুন
আপনার প্রোটোটাইপটি সম্পূর্ণরূপে কার্যকর হয়ে গেলে, সরাসরি এআই স্টুডিও থেকে এটিকে ক্লাউড রান-এ একটি পাবলিক সার্ভারলেস কন্টেইনার হিসেবে ডেপ্লয় করুন।
- গুগল এআই স্টুডিও-এর উপরের ডান কোণায় থাকা পাবলিশ বোতামটি ক্লিক করে ডেপ্লয়মেন্ট উইজার্ডটি চালু করুন।
- আপনার গুগল ক্লাউড প্রজেক্ট কনফিগার করতে 'Get Started'- এ ক্লিক করুন।
- নিশ্চিত করুন যে টার্গেট গুগল ক্লাউড প্রজেক্ট ড্রপ-ডাউনটি আপনার উদ্দিষ্ট ডেপ্লয়মেন্ট প্রজেক্টের সাথে মেলে।
- এআই স্টুডিও ক্লাউড রান ইনস্ট্যান্সের জন্য স্বয়ংক্রিয়ভাবে একটি অনন্য পরিষেবা শনাক্তকারী তৈরি করবে।
- অ্যাপ প্রকাশ করুন-এ ক্লিক করুন।
- কন্টেইনার বিল্ড, রেজিস্ট্রেশন এবং সার্ভিস ডেপ্লয়মেন্ট ব্যাকগ্রাউন্ডে সম্পাদিত হবে। এই প্রক্রিয়াটি সাধারণত ২-৪ মিনিটের মধ্যে সম্পন্ন হয়।
- ডেপ্লয়মেন্ট শেষ হলে, তৈরি হওয়া অ্যাপ URL- টি কপি করুন এবং একটি ব্রাউজার ট্যাবে লাইভ অ্যাপ্লিকেশন লিঙ্কটি ভিজিট করুন!
৮. নিরাপত্তা ও উৎপাদন সংক্রান্ত সর্বোত্তম অনুশীলন পর্যালোচনা করুন।
এই অ্যাপটিকে প্রোটোটাইপ থেকে প্রোডাকশন এনভায়রনমেন্টে স্থানান্তরের সময়, নিরাপত্তার এই মূলনীতিগুলো মনে রাখবেন:
১. গুগল ম্যাপস এপিআই কী-এর সীমাবদ্ধতা
প্রোডাকশন গুগল ম্যাপস এপিআই কীগুলো কখনোই অনিয়ন্ত্রিত রাখবেন না। গুগল ক্লাউড কনসোলে :
- এপিআই সীমাবদ্ধতা: কী-টিকে এমনভাবে সীমাবদ্ধ করুন যাতে এটি শুধুমাত্র নির্দিষ্ট এপিআই (ম্যাপস জাভাস্ক্রিপ্ট এপিআই, জিওকোডিং এপিআই, প্লেসেস এপিআই) কল করতে পারে।
- অ্যাপ্লিকেশন সীমাবদ্ধতা: তৃতীয় পক্ষের সাইটগুলিতে অননুমোদিত ব্যবহার রোধ করতে HTTP রেফারার (যেমন,
https://yourgame.com/*) ব্যবহার করে কী-টি সীমাবদ্ধ করুন।
২. জেমিনি এপিআই কী সুরক্ষিত করা
ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্টে জেমিনি এপিআই কী কখনোই প্রকাশ করা উচিত নয়।
- প্রোডাকশন আর্কিটেকচার: প্রক্সি হিসেবে কাজ করার জন্য একটি লাইটওয়েট ব্যাকএন্ড সার্ভিস (যেমন, ক্লাউড রান বা ক্লাউড ফাংশনস) তৈরি করুন। আপনার ফ্রন্টএন্ড আপনার ব্যাকএন্ডকে (
/api/get-fun-facts) কল করবে, এবং ব্যাকএন্ড একটি এনভায়রনমেন্ট ভ্যারিয়েবল (GEMINI_API_KEY) ব্যবহার করে নিরাপদে গুগল এআই স্টুডিও-র সাথে যোগাযোগ করবে।
৯. সম্পদ পরিষ্কার করুন
যেকোনো অপ্রত্যাশিত বিলিং চার্জ এড়াতে অথবা আপনার ওয়ার্কস্পেসের রিসোর্সগুলো গুছিয়ে নিতে:
- Google AI Studio-তে অ্যাপস পৃষ্ঠায় যান।
- গ্রিড বা তালিকা থেকে আপনার অ্যাপ্লিকেশনটি খুঁজুন।
- অ্যাপের অবস্থা মুছে ফেলতে এবং ক্লাউড রান থেকে পরিষেবাটি অপ্রকাশিত করতে ট্র্যাশ আইকনে ক্লিক করুন।
- আপনি যদি একটি স্ট্যান্ডার্ড প্রজেক্ট ব্যবহার করে ডেপ্লয় করে থাকেন এবং সমস্ত রিসোর্স সম্পূর্ণরূপে বন্ধ করতে চান, তাহলে Google Cloud Console-এর প্রজেক্ট সেটিংসে গিয়ে মূল প্রজেক্টটি ডিলিট করে দিন।
১০. উপসংহার
অভিনন্দন! আপনি গুগল এআই স্টুডিও ব্যবহার করে একটি এআই-চালিত ভূ-স্থানিক ওয়েব অ্যাপ্লিকেশন ডিজাইন, ডেভেলপ এবং ডেপ্লয় করেছেন। আপনি বাস্তব জগতের ডেটা দ্বারা চালিত একটি ইন্টারেক্টিভ গেম তৈরি করতে সফলভাবে গুগল ম্যাপস প্ল্যাটফর্ম এপিআই ব্যবহার করেছেন।
'Completed Builder Journey' ব্যাজটি সংগ্রহ করতে এই লিঙ্কে যান!
আপনার যাত্রা অব্যাহত রাখতে, পরবর্তী ল্যাবের জন্য goo.gle/builders- এ যান।