১. ভূমিকা
এই কোডল্যাবে, আপনি জেমিনি ৩ এবং অ্যান্টিগ্র্যাভিটি কোডিং এজেন্ট ব্যবহার করে ক্লাউডক্রাশ নামক একটি ম্যাচ ৩ আর্কেড গেম তৈরি করবেন। গেমটি গো (Go) ভাষায় লেখা হবে এবং ক্লাউড রান ব্যবহার করে গুগল ক্লাউডে ডেপ্লয় করা হবে।
উল্লেখ্য যে, গো (Go) ল্যাঙ্গুয়েজের জ্ঞান থাকা বাঞ্ছনীয় হলেও এই ওয়ার্কশপটি করার জন্য তা আবশ্যক নয়, কারণ এজেন্টই সমস্ত কোডিং করবে। এই কোডল্যাবের মূল লক্ষ্য হলো, নিজে হাতে কোড লেখার পরিবর্তে আপনার জন্য অ্যাপ্লিকেশন তৈরি করতে এজেন্টকে পরিচালনা করার দক্ষতা অর্জন করা।
এই কোডল্যাবটি মধ্যবর্তী স্তরের ডেভেলপারদের জন্য, যারা উন্নত এজেন্টিক ওয়ার্কফ্লো শিখতে আগ্রহী। এই ল্যাবটির আনুমানিক মোট সময়কাল ৬০ মিনিট । এই কোডল্যাবে তৈরি রিসোর্সগুলোর মূল্য ব্যবহার-ভিত্তিক।
আপনি যা করবেন
- Go এবং Ebitengine ফ্রেমওয়ার্ক ব্যবহার করে ম্যাচ-৩ গেমের মূল লজিকটি তৈরি করুন।
- ওয়েবঅ্যাসেম্বলি (WASM) ব্যবহার করে গেমটিকে ওয়েব ব্রাউজারে চালানোর উপযোগী করে তুলুন।
- গেমটি এবং এর হাই-স্কোর এপিআই ক্লাউড রান- এ ডেপ্লয় করুন।
- টেস্টিং এবং কোড পর্যালোচনার জন্য বিশেষায়িত সাব-এজেন্ট ও এক্সটেনশনসমূহ পরিচালনা করুন।
পূর্বশর্ত
- প্রোগ্রামিং ভাষা সম্পর্কে প্রাথমিক জ্ঞান
- ক্লাউড অবকাঠামোর প্রাথমিক জ্ঞান
- গুগল ক্লাউড কনসোল সম্পর্কে প্রাথমিক জ্ঞান
আপনি যা শিখবেন
- কোডিং এজেন্টের সাহায্যে কীভাবে জটিল অ্যাপ্লিকেশন তৈরি করা যায়
- বহুমাত্রিক প্রেক্ষাপটে মিথুন রাশির সাথে কীভাবে কাজ করবেন
- Cloud Run ব্যবহার করে কীভাবে ক্লাউডে অ্যাপ্লিকেশন স্থাপন করবেন
আপনার যা যা লাগবে
এই ওয়ার্কশপটি ক্লাউড শেল ব্যবহার করে সম্পূর্ণভাবে ক্লাউডে করা যেতে পারে, কিন্তু আপনি যদি আপনার লোকাল মেশিন ব্যবহার করতে পছন্দ করেন তবে আপনার নিম্নলিখিত জিনিসগুলির প্রয়োজন হবে:
- অ্যান্টিগ্র্যাভিটি ২.০ এবং অ্যান্টিগ্র্যাভিটি সিএলআই। antigravity.google- এ দেওয়া নির্দেশাবলী অনুসরণ করে এটি ডাউনলোড ও ইনস্টল করুন।
- গো টুলচেইন (সংস্করণ ১.২৬ বা উচ্চতর)। go.dev- এ দেওয়া নির্দেশাবলী অনুসরণ করে এটি ডাউনলোড ও ইনস্টল করুন।
- গুগল ক্লাউডের সাথে সংযোগ স্থাপনের জন্য gcloud CLI ব্যবহার করুন। গুগল ক্লাউড ডকুমেন্টেশনে দেওয়া নির্দেশাবলী অনুসরণ করে এটি ডাউনলোড ও ইনস্টল করুন।
- একটি গুগল ক্লাউড বিলিং অ্যাকাউন্ট (ক্লাউডে গেমটি স্থাপন করার জন্য)
মূল প্রযুক্তি
আমরা যে প্রযুক্তিগুলো ব্যবহার করব সে সম্পর্কে আরও তথ্য এখানে পেতে পারেন:
- অ্যান্টিগ্র্যাভিটি সিএলআই : উন্নয়ন এজেন্ট
- জেমিনি ৩ : আমাদের অগ্রণী বৃহৎ ভাষা মডেলের সর্বশেষ সংস্করণ
২. পরিবেশ সেটআপ
নিম্নলিখিত বিকল্পগুলির মধ্যে একটি বেছে নিন: আপনি যদি এই কোডল্যাবটি আপনার নিজের মেশিনে চালাতে চান তবে 'সেলফ-পেজড এনভায়রনমেন্ট সেটআপ' , অথবা আপনি যদি এই কোডল্যাবটি সম্পূর্ণরূপে ক্লাউডে চালাতে চান তবে 'স্টার্ট ক্লাউড শেল' ।
স্ব-গতিতে পরিবেশ সেটআপ
- Google Cloud Console- এ সাইন-ইন করুন এবং একটি নতুন প্রজেক্ট তৈরি করুন অথবা বিদ্যমান কোনো প্রজেক্ট পুনরায় ব্যবহার করুন। যদি আপনার আগে থেকে Gmail বা Google Workspace অ্যাকাউন্ট না থাকে, তবে আপনাকে অবশ্যই একটি তৈরি করতে হবে।
- প্রজেক্টের নামটি হলো এই প্রজেক্টের অংশগ্রহণকারীদের প্রদর্শিত নাম। এটি একটি ক্যারেক্টার স্ট্রিং যা গুগল এপিআই ব্যবহার করে না। আপনি যেকোনো সময় এটি আপডেট করতে পারেন।
- প্রজেক্ট আইডি সমস্ত গুগল ক্লাউড প্রজেক্ট জুড়ে অনন্য এবং অপরিবর্তনীয় (একবার সেট করার পর এটি পরিবর্তন করা যায় না)। ক্লাউড কনসোল স্বয়ংক্রিয়ভাবে একটি অনন্য স্ট্রিং তৈরি করে; সাধারণত এটি কী তা নিয়ে আপনার মাথা ঘামানোর দরকার নেই। বেশিরভাগ কোডল্যাবে, আপনাকে আপনার প্রজেক্ট আইডি উল্লেখ করতে হবে (যা সাধারণত
PROJECT_IDহিসাবে চিহ্নিত করা হয়)। তৈরি করা আইডিটি আপনার পছন্দ না হলে, আপনি এলোমেলোভাবে আরেকটি তৈরি করতে পারেন। বিকল্পভাবে, আপনি আপনার নিজের আইডি দিয়ে চেষ্টা করে দেখতে পারেন যে সেটি উপলব্ধ আছে কিনা। এই ধাপের পরে এটি পরিবর্তন করা যাবে না এবং প্রজেক্টের পুরো সময়কাল জুড়ে এটি অপরিবর্তিত থাকবে। - আপনার অবগতির জন্য জানাচ্ছি যে, তৃতীয় একটি ভ্যালু রয়েছে, যা হলো প্রজেক্ট নম্বর , এবং কিছু এপিআই এটি ব্যবহার করে থাকে। ডকুমেন্টেশনে এই তিনটি ভ্যালু সম্পর্কে আরও বিস্তারিত জানুন।
- এরপর, ক্লাউড রিসোর্স/এপিআই ব্যবহার করার জন্য আপনাকে ক্লাউড কনসোলে বিলিং চালু করতে হবে। এই কোডল্যাবটি সম্পন্ন করতে খুব বেশি খরচ হবে না, এমনকি আদৌ কোনো খরচ নাও হতে পারে। এই টিউটোরিয়ালের পর বিলিং এড়াতে রিসোর্সগুলো বন্ধ করার জন্য, আপনি আপনার তৈরি করা রিসোর্সগুলো অথবা প্রজেক্টটি ডিলিট করে দিতে পারেন। নতুন গুগল ক্লাউড ব্যবহারকারীরা ৩০০ মার্কিন ডলারের ফ্রি ট্রায়াল প্রোগ্রামের জন্য যোগ্য।
ক্লাউড শেল শুরু করুন
যদিও গুগল ক্লাউড আপনার ল্যাপটপ থেকে দূরবর্তীভাবে পরিচালনা করা যায়, এই কোডল্যাবে আপনি গুগল ক্লাউড শেল ব্যবহার করবেন, যা ক্লাউডে চালিত একটি কমান্ড লাইন পরিবেশ।
গুগল ক্লাউড কনসোল থেকে, উপরের ডানদিকের টুলবারে থাকা ক্লাউড শেল আইকনটিতে ক্লিক করুন:
পরিবেশটি প্রস্তুত করতে এবং এর সাথে সংযোগ স্থাপন করতে মাত্র কয়েক মুহূর্ত সময় লাগবে। এটি শেষ হলে, আপনি এইরকম কিছু দেখতে পাবেন:
এই ভার্চুয়াল মেশিনটিতে আপনার প্রয়োজনীয় সমস্ত ডেভেলপমেন্ট টুলস লোড করা আছে। এটি একটি স্থায়ী ৫ জিবি হোম ডিরেক্টরি প্রদান করে এবং গুগল ক্লাউডে চলে, যা নেটওয়ার্ক পারফরম্যান্স ও অথেনটিকেশনকে ব্যাপকভাবে উন্নত করে। এই কোডল্যাবে আপনার সমস্ত কাজ একটি ব্রাউজারের মধ্যেই করা যাবে। আপনাকে কিছুই ইনস্টল করতে হবে না।
৩. প্রজেক্ট সেটআপ
প্রজেক্ট ডিরেক্টরি তৈরি করুন
প্রথমে, আপনার প্রোজেক্টের জন্য একটি নতুন ডিরেক্টরি তৈরি করতে হবে। আপনার টার্মিনালে নিম্নলিখিত কমান্ডগুলো চালান:
mkdir -p codelab-match3 && cd codelab-match3
অ্যান্টিগ্র্যাভিটি সিএলআই চালু করুন
প্রথমে, Antigravity CLI সঠিকভাবে ইনস্টল হয়েছে কিনা তা পরীক্ষা করে নেওয়া যাক। আপনার টার্মিনালে চালান:
agy --version
আপনার এইরকম কিছু দেখা উচিত:
$ agy --version 1.0.2
এখন agy কমান্ডটি দিয়ে Antigravity CLI চালু করুন।
agy
অ্যান্টিগ্র্যাভিটি আপনাকে জিজ্ঞাসা করবে আপনি এই প্রজেক্টটিকে বিশ্বাস করেন কিনা। যেহেতু আমরা এইমাত্র একটি খালি ফোল্ডার তৈরি করেছি, তাই এটিকে বিশ্বাস করা নিরাপদ। সুতরাং, অ্যাক্সেসটি নিশ্চিত করুন এবং আপনাকে CLI প্রম্পটে নিয়ে যাওয়া হবে:
আপনি যদি Antigravity CLI প্রম্পট দেখতে পান, তাহলে আর কোনো সমস্যা নেই। যদি না দেখতে পান, তাহলে আগের সেটআপ ধাপগুলোর কোনোটি বাদ পড়েছে কিনা তা পুনরায় যাচাই করুন।
৪. প্ল্যানিং মোডে বেস গেমটি তৈরি করুন।
চলুন মূল ম্যাচ-৩ গেম লজিক তৈরি করে শুরু করা যাক। অ্যান্টিগ্র্যাভিটি ডিফল্টভাবে প্ল্যানিং মোডে চালু হয়, তাই প্ল্যানিং-এ যাওয়ার জন্য আপনাকে কোনো বিশেষ কমান্ড দিতে হবে না।
তবে, এটা জেনে রাখা দরকার যে, আপনি Antigravity CLI প্রম্পটে /planning স্ল্যাশ কমান্ডটি ব্যবহার করে যেকোনো সময় প্ল্যানিং মোড চালু করতে পারেন:
/planning
আপনি এখন এই কমান্ডটি চালানোর চেষ্টা করলে, অ্যান্টিগ্র্যাভিটি আপনাকে মনে করিয়ে দেবে যে এটি ইতিমধ্যেই পরিকল্পনা পর্যায়ে রয়েছে।
প্ল্যানিং মোডের বিপরীত হলো ফাস্ট মোড, যা আপনি /fast মাধ্যমে চালু করতে পারেন।
/fast
ফাস্ট মোডে অ্যান্টিগ্র্যাভিটি সাথে সাথেই কাজটি শুরু করে দেবে এবং এটি অপেক্ষাকৃত সহজ ও স্বয়ংসম্পূর্ণ কাজের জন্য তৈরি। প্ল্যানিং মোডটি জটিল কাজের জন্য ডিজাইন করা হয়েছে, যেখানে এজেন্ট প্রথমে একটি পরিকল্পনা তৈরি করবে যা আপনি কাজটি শুরু করার আগে পর্যালোচনা ও পরিমার্জন করতে পারবেন।
সম্পদগুলি ডাউনলোড করুন
আমাদের সেই ছবিগুলো ডাউনলোড করতে হবে যেগুলো গেমে ব্যবহার করা হবে। যেহেতু এটি একটি ছোট এবং স্বয়ংসম্পূর্ণ কাজ, তাই এটিকে প্ল্যানিং মোডে চালানোর কোনো প্রয়োজন নেই, সুতরাং আমরা ফাস্ট মোডে আছি এই সুযোগটি কাজে লাগিয়ে কাজটি এখনই করে ফেলি:
Create a folder named "assets" and download the images
background.png, gcp_sprites.png, gemini.png and logo.png,
from this GitHub repository to the "assets" folder:
https://github.com/GoogleCloudPlatform/devrel-demos/tree/main/codelabs/gemini-cli/gemini-cli-match3-golang
ফাইলগুলো ডাউনলোড করার জন্য অ্যান্টিগ্র্যাভিটি কয়েকটি শেল কমান্ড চালানোর অনুমতি চাইবে। এটি সম্পন্ন হলে আপনি এইরকম কিছু দেখতে পাবেন:
মূল গেমটি তৈরি করুন
অ্যাসেটগুলো প্রস্তুত হয়ে গেলে, এখন মূল গেমটি তৈরি করার পালা। যেহেতু একটি গেম তৈরি করা বেশ জটিল কাজ, তাই এটিকে নির্দেশ দেওয়ার আগে চলুন পরিকল্পনা মোডে ফিরে যাই:
/planning
প্ল্যানিং মোডে, নিম্নলিখিত প্রম্পটটি কপি করে Antigravity CLI-তে পেস্ট করুন:
Build a Match-3 game called 'Cloud Crush' in Go using Ebitengine v2.
The entire game screen should have background.png as background.
The play area should be an 8x8 grid with white background.
On the right side of the play area include a side panel with UI elements
like player score and how to play instructions.
The side panel should have a solid background colour to help with readability of the UI.
Use standard GCP product logos (e.g. Compute Engine, Cloud Storage, BigQuery, etc.)
as icons. These icons are provided in the gcp_sprites.png file.
The icons are saved as 64x64 sprites but scale them as necessary
based on the screen resolution. Implement swapping, clearing 3+ gems, and gravity.
Use ebitengine native font rendering (size 48 for titles and size
24 for normal text) for all text and not the debug print.
The font should be monospaced (golang.org/x/image/font/gofont/gomono).
Keep the UI tidy and harmonic, e.g. centered text should always be
adjusted based on text length, not just guess based on estimates.
পরিকল্পনাটি তৈরি করার আগে এটি কিছু অনুসন্ধান করতে পারে, যেমন, PNG ফাইলগুলির মাত্রা দেখার জন্য সেগুলি পরীক্ষা করা। পরিকল্পনাটি তৈরি হয়ে গেলে আপনাকে এটি পর্যালোচনা করার জন্য বলা হবে:
অনুগ্রহ করে নীচের ডান কোণায় ভালোভাবে খেয়াল করুন, যেখানে 1 artifact লেখা আছে এবং পর্যালোচনার জন্য /artifact ব্যবহার করার ইঙ্গিত দেওয়া আছে। Antigravity-তে, প্ল্যান, টাস্ক লিস্ট এবং ওয়াকথ্রু-এর মতো সহায়ক ফাইলগুলিকে "আর্টিফ্যাক্ট" বলা হয়, যাতে সেগুলিকে সমাধানের অংশ এমন সাধারণ ফাইল (যেমন সোর্স কোড) থেকে আলাদা করা যায়।
প্রম্পটে /artifact কমান্ডটি প্রবেশ করালে আপনি প্ল্যানটি দেখতে পারবেন এবং প্রয়োজনে কোনো পরিবর্তনের জন্য সেটির উপর মন্তব্য করতে পারবেন।
/artifact
আপনার এইরকম কিছু দেখা উচিত:
লক্ষ্য করুন, implementation_plan.md নামে একটি ফাইল আছে যেখানে খোলার, অনুমোদন করার বা প্রত্যাখ্যান করার বিকল্প রয়েছে। এটি খোলার জন্য এন্টার চাপুন। আমার সিস্টেমে প্ল্যানটি দেখতে কেমন তার একটি উদাহরণ নিচে দেওয়া হলো:
আপনি অ্যারো কী ব্যবহার করে উপরে এবং নিচে স্ক্রল করতে পারেন, এবং যেকোনো লাইনে C কী চেপে একটি মন্তব্য যোগ করতে পারেন। এক্ষেত্রে, Go-এর একটি পুরোনো সংস্করণ ব্যবহার করা হয়েছে যা আমার পছন্দ নয়, তাই আমি ১৬ নম্বর লাইনে Go 1.26 (এই লেখাটি লেখার সময়কার সবচেয়ে সাম্প্রতিক সংস্করণ) ব্যবহার করার জন্য একটি মন্তব্য যোগ করব:
আপনি মন্তব্যটি প্রবেশ করালেই তা ইনলাইন হিসেবে প্রদর্শিত হবে:
যাচাই করার জন্য একটি গুরুত্বপূর্ণ অংশ হলো "ভেরিফিকেশন প্ল্যান"। গেমগুলো স্বয়ংক্রিয়ভাবে পরীক্ষা করা বেশ কঠিন, কিন্তু গো একটি কম্পাইলড ল্যাঙ্গুয়েজ, তাই আমাদের অন্তত এটা নিশ্চিত করা উচিত যে মডেলটি আমাদের এমন কোড দিচ্ছে যা কম্পাইল হয়। যদি বাইনারি তৈরির জন্য কোনো স্বয়ংক্রিয় ধাপ অন্তর্ভুক্ত না থাকে, তবে সেটিকে একটি কমেন্ট হিসেবে যোগ করুন:
যাচাই করার জন্য একটি গুরুত্বপূর্ণ অংশ হলো "ভেরিফিকেশন প্ল্যান"। গেমগুলো স্বয়ংক্রিয়ভাবে পরীক্ষা করা বেশ কঠিন, কিন্তু গো একটি কম্পাইলড ল্যাঙ্গুয়েজ, তাই আমাদের অন্তত এটা নিশ্চিত করা উচিত যে মডেলটি আমাদের এমন কোড দিচ্ছে যা কম্পাইল হয়। যদি বাইনারি তৈরির জন্য কোনো স্বয়ংক্রিয় ধাপ অন্তর্ভুক্ত না থাকে, তবে এটিকে একটি কমেন্ট হিসেবে যোগ করুন:
পরিকল্পনাটি নিয়ে সন্তুষ্ট না হওয়া পর্যন্ত এই প্রক্রিয়াটি পুনরাবৃত্তি করুন এবং ফিরে যেতে ESC চাপুন। তারপর এজেন্টের কাছে মন্তব্যগুলো পাঠানো নিশ্চিত করতে Y চাপুন:
আপনি Y চাপার পর এজেন্টটি সাথে সাথে কাজ শুরু করবে। "আর্টিফ্যাক্ট" মেনু থেকে বের হওয়ার জন্য আপনাকে আরও একবার ESC চাপতে হবে। এটি আপনাকে প্রম্পট মোডে ফিরিয়ে আনবে। এই সময়ের মধ্যে, শেল কমান্ড চালানোর প্রয়োজন হওয়ায় এজেন্টটি আরও অনেক টুল কল কনফার্মেশন চাইতে পারে।
অপেক্ষা করার সময়, আমরা প্রম্পটগুলো সারিবদ্ধ করে ডিজাইনের কাজ চালিয়ে যেতে পারি। উদাহরণস্বরূপ, আমরা এই সুযোগটি ব্যবহার করে এমন একটি নতুন প্রয়োজনীয়তা যোগ করতে পারি যা মূল প্রম্পটে বাদ পড়েছিল:
Add a 60-seconds countdown timer and an in-memory high-score tracker to enhance the arcade game experience. Combos should give a score bonus of 10% per combo number.
মেসেজ হিস্ট্রিতে একটি কিউড প্রম্পট দেখা যাবে, যার সামনে একটি ছোট তীরের মাথা থাকবে:
আপনি হয়তো আরও লক্ষ্য করবেন যে আর্টিফ্যাক্টের সংখ্যা বাড়ছে। পরিকল্পনার পাশাপাশি, অ্যান্টিগ্র্যাভিটি তার বাস্তবায়নযোগ্য প্রতিটি কাজ বা করণীয় প্রতিটি পদক্ষেপের হিসাব রাখার জন্য একটি টাস্ক লিস্ট (task.md) তৈরি করবে। এটি সম্পন্ন হয়ে গেলে, অর্জিত উদ্দেশ্যগুলোর ব্যাখ্যাসহ এটি একটি ওয়াকথ্রু ফাইল (walkthrough.md) তৈরি করবে। আপনি আবার /artifact কমান্ডটি ব্যবহার করে এই সবকিছু খতিয়ে দেখতে পারেন।
মূল গেমটি বাস্তবায়ন সম্পন্ন করার পর task.md ফাইলটির একটি উদাহরণ নিচে দেওয়া হলো:
যেকোনো মুহূর্তে আপনি এই ফাইলগুলো খুলতে এবং এতে মন্তব্য যোগ করতে পারেন, যা এজেন্টের কাছে পাঠানোর পর একটি কিউড প্রম্পটের মতোই এক্সিকিউশনের জন্য কিউতে যুক্ত হবে। আপনার অনুরোধ সম্পর্কে এজেন্টকে অতিরিক্ত প্রেক্ষাপট দেওয়ার জন্য এই ফাইলগুলোতে মন্তব্য করা একটি ভালো অভ্যাস।
বাইনারিটি সফলভাবে তৈরি হয়ে গেলে, আপনি এইরকম কিছু দেখতে পাবেন:
গেমটি চালিয়ে দেখুন এটি প্রত্যাশা অনুযায়ী কাজ করে কিনা। এজেন্ট প্রম্পটের ভেতর থেকে এটি চালানো একটি ভালো উপায়। একটি বিস্ময়সূচক চিহ্ন "!" টাইপ করে আপনি প্রম্পটটিকে "শেল মোডে" পরিবর্তন করতে পারেন।
আপনি প্রম্পটের নিচে "অ্যাক্টিভেটেড ব্যাশ মোড" বার্তাটি দেখতে পাবেন। কমান্ডটি চালানোর জন্য এন্টার চাপুন। এই মোডে বাইনারিটি চালানোর সুবিধা হলো, এজেন্ট টার্মিনালে যেকোনো আউটপুটের উপর নজর রাখে। ফলে, যদি গেমটি চলতে ব্যর্থ হয় বা হঠাৎ ক্র্যাশ করে, তাহলে কী সমস্যা হয়েছে তা এজেন্টকে ব্যাখ্যা করার প্রয়োজন হয় না। শেল কনটেক্সট থেকেই এটি তাৎক্ষণিকভাবে তার প্রয়োজনীয় সমস্ত তথ্য পেয়ে যাবে।
গেমটি খেলে দেখুন এবং এর প্যারামিটারগুলো সূক্ষ্মভাবে সমন্বয় করতে থাকুন যতক্ষণ না আপনি অভিজ্ঞতাটিতে সন্তুষ্ট হচ্ছেন (যেমন: অ্যানিমেশনটি দ্রুত বা ধীর করা, কমান্ডের প্রতি এর প্রতিক্রিয়া সামঞ্জস্য করা, ইত্যাদি)।
উদাহরণস্বরূপ, এই প্রম্পটটি একটি অ্যাক্সেসিবিলিটি মোড এবং নতুন কীবোর্ড কমান্ড যোগ করে অভিজ্ঞতাকে উন্নত করবে:
Update the implementation to include: 'Q' to quit, 'F' for full-screen
and 'A' for Accessibility Mode: swap GCP logos for high-contrast coloured blocks.
Also enable Arrow Keys to move the selection cursor and Space to select the gem to
swap (space is pressed once to select, then arrow key immediately makes
the move - no need to press space again).
Use a golden square (4 px border, transparent fill) with a simple animation
to highlight where the cursor is at the moment.
পরিমার্জনের কাজ শেষ হয়ে গেলে, এটিকে একটি ওয়েব অ্যাপে রূপান্তর করতে পরবর্তী বিভাগে যান।
৫. গেমটিকে ওয়েব ব্রাউজারে চালানোর উপযোগী করে তুলুন।
Ebitengine গেমটি বর্তমানে একটি ডেস্কটপ অ্যাপ্লিকেশন। চলুন, Antigravity CLI-কে বলি যেন এটি WebAssembly (WASM) ব্যবহার করে একটি ওয়েব ব্রাউজারে চালানোর উপযোগী করে তোলে। এর জন্য ব্রাউজারের উপযোগী করে Go কোড কম্পাইল করতে হবে এবং একটি সাধারণ ওয়েব সার্ভার সেট আপ করতে হবে।
এজেন্টকে নির্দেশনা দিতে নিম্নলিখিত নির্দেশটি ব্যবহার করুন:
We need to enable this game to run on a web browser. Compile the game to WASM
and create a Go web server to serve the compiled WASM and the assets.
লক্ষ্য করুন যে এজেন্ট আপনার ফাইলসিস্টেমে wasm_exec.js নামের একটি ফাইল খোঁজার চেষ্টা করবে। এটি প্রত্যাশিত এবং আপনাকে এর অনুমতি দিতে হবে, কারণ এই ফাইলটিই হলো সেই র্যাপার যা JS-এর মাধ্যমে Go বাইনারিগুলো চালাতে সাহায্য করে। উদাহরণস্বরূপ:
এজেন্টটি কাজটি সম্পন্ন করার পর, আপনি তাকে ব্যাকগ্রাউন্ডে গেম সার্ভারটি চালানোর নির্দেশ দিতে পারেন।
এখন ওয়েবে গেমটি চলতে দেখতে আপনার ব্রাউজারে http://localhost:8080 খুলুন:
এখন যেহেতু আপনি এটি ওয়েবে চালু করে ফেলেছেন, ক্লাউডে স্থাপন করার আগে চলুন এটিকে আরেকটু নিখুঁত করে নেওয়া যাক।
৬. টাইটেল স্ক্রিন ও লিডারবোর্ড তৈরি করুন
গেমটি কাজ করছে, কিন্তু একটি যথাযথ আর্কেড অভিজ্ঞতার জন্য এতে কয়েকটি গুরুত্বপূর্ণ ফিচারের অভাব রয়েছে। প্রথমে একটি টাইটেল স্ক্রিন যোগ করা যাক এবং তারপর একটি লিডারবোর্ড যোগ করা যাক, যাতে আপনি আপনার বন্ধুদের সাথে প্রতিযোগিতা করতে পারেন! নিম্নলিখিত প্রম্পটটি ব্যবহার করুন:
Create a title screen that displays the game logo (logo.png) over the cloud background.
The logo should be centered and occupy no more than 75% of the screen area.
The title screen should display "Press ENTER to play" (black/bold) right below the logo,
with every letter animated in a slow wavy (cosine) pattern.
Once the player presses ENTER, it should be prompted to add their name, which
will then be recorded to populate the leaderboard at the end of the round.
Once the game is over, play the animated leaderboard with the top 10 highest scores.
The animated leaderboard should render entries one by one up to 10 entries,
using a fade in effect just like old school arcade games. The leaderboard
should fade out to the title screen after 15 seconds.
Please note that name entry should be processed independently of the play state
key handlers (e.g. pressing A during name entry should not toggle accessibility mode).
Leaderboard scores should be saved in-memory, server-side.
এটা এখন দেখতে আরেকটু পেশাদারী লাগছে! 🙂
৭. গেমটি ক্লাউড রানে স্থাপন করুন।
অবশেষে আমাদের সৃষ্টিটি বিশ্বের সাথে ভাগ করে নেওয়ার সময় এসেছে! আমরা সম্পূর্ণ অ্যাপ্লিকেশনটি গুগল ক্লাউড রান-এ স্থাপন করব, যাতে যেকোনো জায়গা থেকে এটি ব্যবহার করা যায়।
Use the gcloud CLI to provision and deploy the Go web server and its assets to
Google Cloud Run. Provide the live URL when complete.
যেহেতু গেমটি এখন ক্লাউডে লাইভ আছে, তাই এটিকে মোবাইল ডিভাইসে চালানোর সুযোগ না দেওয়াটা একটা বড় সুযোগ হাতছাড়া করার শামিল হবে। আপনি নিম্নলিখিত প্রম্পটটি অনুসরণ করে এটি করতে পারেন:
Now enable this game to run on mobile devices. You need to update the input system to handle "taps" as well as key presses and clicks. Since mobile devices most likely won't have a keyboard, add a virtual keyboard to the name entry screen and a confirmation button to the name entry.
Finally, generate a QR code for the CloudRun link and display it on the screen so that people can scan it to access the mobile version and compete against their friends for the high score.
আপনার ব্রাউজারে গেমটি আবার চালান। একটি মোবাইল ডিভাইস থেকেও ইউআরএলটি অ্যাক্সেস করার চেষ্টা করুন (এই অভিজ্ঞতাটি সহজ করার জন্য আপনি একটি কিউআর কোড তৈরি করতে পারেন)।
৮. গেমটি পরীক্ষা করার জন্য ব্রাউজার এজেন্ট ব্যবহার করুন।
যেহেতু একটি গেম ভিজ্যুয়াল ফিডব্যাকের উপর নির্ভর করে, তাই এটিকে স্বয়ংক্রিয়ভাবে পরীক্ষা করা প্রায়শই কঠিন। তবুও, ডেপ্লয়মেন্টটি সঠিকভাবে কাজ করছে কিনা এবং এর মৌলিক উপাদানগুলো যথাস্থানে আছে কিনা, তা অন্ততপক্ষে নিশ্চিত করার জন্য আমরা কিছু অটোমেশন ব্যবহার করতে পারি।
এটি করার জন্য, আমরা ব্রাউজার সাবএজেন্ট ব্যবহার করব। অ্যান্টিগ্র্যাভিটিতে, সাবএজেন্ট হলো একটি বিচ্ছিন্ন সত্তা যার একটি নতুন প্রেক্ষাপট থাকে। এটি এমন সব কাজের জন্য আদর্শ যেখানে আপনি চান না যে বর্তমান প্রেক্ষাপট ফলাফলকে প্রভাবিত করুক, অথবা যখন আপনি চান না যে কাজটি আপনার মূল প্রেক্ষাপট উইন্ডোকে "দূষিত" করুক।
ব্রাউজার এজেন্ট হলো ব্রাউজার-সম্পর্কিত কাজের জন্য একটি বিশেষ বিল্ট-ইন এজেন্ট। অনুগ্রহ করে মনে রাখবেন যে, শুধুমাত্র এই ধাপটির জন্য আমাদের অ্যান্টিগ্র্যাভিটি ডেস্কটপ অ্যাপ ব্যবহার করতে হবে, কারণ ব্রাউজার এজেন্ট বর্তমানে কমান্ড লাইনে উপলব্ধ নয়।
আপনার Antigravity ডেস্কটপ অ্যাপটি খুলুন এবং Cloud Crush প্রোজেক্টে একটি নতুন আলোচনা শুরু করুন:
আপনি /browser টাইপ করে এবং তারপরে এই প্রম্পটটি লিখে ব্রাউজার সাব-এজেন্টটি চালু করতে পারেন:
Go to http://localhost:8080 and capture screenshots of the following game screens:
1. Title Screen (initial state: "PRESS ENTER TO PLAY")
2. Name Entry Screen (press Enter to reach this screen)
3. Main Gameplay Screen (type a name like "PLAYER" and press Enter to start)
4. Leaderboard Screen (let the game timer run out to view the high scores)
এই পদ্ধতিটি আমাদের স্ক্রিনশট ব্যবহার করে UI-এর এমন উপাদানগুলো ঠিক করতে সাহায্য করে, যা অন্যথায় শুধুমাত্র লেখার মাধ্যমে বর্ণনা করা কঠিন হতে পারে।
আপনি "@" চিহ্নের পরে ফাইলের নাম লিখে ফাইল উল্লেখ করতে পারেন। উদাহরণস্বরূপ, এখানে আমি এজেন্টকে টাইটেল স্ক্রিনের লোগোর আকার বাড়াতে বলছি:
যদিও এই উদাহরণটি কিছুটা কৃত্রিম, কারণ আকারে ৫০% সংশোধন প্রয়োগ করার জন্য মডেলটির ছবিটি 'দেখার' প্রয়োজন নেই, তবুও এটি UI সামঞ্জস্য করার জন্য একটি কার্যকর কৌশল, যেখানে সমস্যাটি লিখিত আকারে বর্ণনা করা কঠিন হতে পারে। এটি এজেন্টকে আগের ও পরের স্ক্রিনশট নিয়ে তার নিজের কাজ যাচাই করার সুযোগও দেয়, তাই এই কৌশলটি আপনার সংগ্রহে রাখুন।
৯. গেমটি সুরক্ষিত করার জন্য একটি কাস্টম এজেন্ট তৈরি করুন।
"ভাইব-কোডেড" অ্যাপ্লিকেশনগুলোর ক্ষেত্রে একটি সাধারণ উদ্বেগ হলো কোডিং এবং নিরাপত্তা উভয় দৃষ্টিকোণ থেকে কীভাবে উচ্চ গুণমান এবং সর্বোত্তম অনুশীলন বজায় রাখা যায়। যদিও আপনি এই দুটি ক্ষেত্রেই আপনার প্রম্পটগুলোকে খুব কঠোর করার চেষ্টা করতে পারেন, কিন্তু একটি প্রম্পটে আপনি যত বেশি কিছু যোগ করবেন, এজেন্ট তত কম মনোযোগী হবে, যার ফলে প্রায়শই আশানুরূপ ফলাফল পাওয়া যায় না।
এই ধরনের পরিস্থিতির জন্য সাবএজেন্ট ব্যবহার করা আদর্শ, কারণ তারা আপনার দেওয়া কাজের উপর পুরোপুরি মনোনিবেশ করতে পারে। চলুন এই কোডটির উপর একটি নিরাপত্তা নিরীক্ষা চালানোর জন্য একটি কাস্টম এজেন্ট তৈরি করি এবং নিশ্চিত করি যে এই গেমটি ডেপ্লয় করার সময় আমরা কোনো ক্রেডেনশিয়াল ফাঁস করছি না বা নিজেদেরকে অপ্রয়োজনীয় ঝুঁকির মুখে ফেলছি না।
এই নির্দেশটি এজেন্টের জন্য একটি ভালো ভিত্তি প্রদান করে:
create a new subagent called "security_auditor" using the following instructions:
You are a ruthless Security Auditor. Your job is to analyze code for potential vulnerabilities.
Focus on:
1. SQL Injection
2. XSS (Cross-Site Scripting)
3. Hardcoded credentials
4. Unsafe file operations
When you find a vulnerability, explain it clearly and suggest a fix. Do not fix it yourself; just report it.
উল্লেখ্য যে, Antigravity নতুন এজেন্টটি তৈরি করার জন্য "DefineSubagent" টুলটি ব্যবহার করবে:
নিম্নলিখিত প্রম্পটটি ব্যবহার করে এজেন্টকে গেম কোডের উপর একটি নিরাপত্তা যাচাই করতে বলুন:
Run the security auditor agent in this code
আপনার এইরকম কিছু দেখা উচিত:
এজেন্ট তার কাজটি সম্পন্ন করলে আপনি এইরকম একটি রিপোর্ট দেখতে পাবেন:
চলুন অ্যান্টিগ্র্যাভিটিকে বলি এগুলো আমাদের জন্য ঠিক করে দিতে 🙂:
Fix these findings for me please!
আর এই তো:
অনুগ্রহ করে মনে রাখবেন যে, এইভাবে তৈরি করা এজেন্টগুলি শুধুমাত্র কথোপকথন চলাকালীন সময়ের জন্যই বিদ্যমান থাকে। আপনি যদি সেশনগুলির মধ্যে "পুনরায় ব্যবহারযোগ্য" একটি এজেন্ট চান, তবে আপনি একটি কনফিগারেশন ফাইল ব্যবহার করে সেটি তৈরি করতে পারেন। অতিরিক্ত তথ্যের জন্য, /agents কমান্ডটি দেখুন।
১০. উপসংহার
অভিনন্দন! আপনি সফলভাবে Antigravity CLI ব্যবহার করে একটি আর্কেড গেম বিল্ড, ডেপ্লয়, টেস্ট এবং অডিট করেছেন, যা প্রাথমিক কাঠামো তৈরি থেকে শুরু করে ডেপ্লয়মেন্ট পর্যন্ত উন্নত এজেন্টিক ওয়ার্কফ্লো প্রদর্শন করে।
পরিষ্কার করা
আপনার গুগল ক্লাউড অ্যাকাউন্টে চলমান চার্জ এড়াতে, এই কোডল্যাব চলাকালীন তৈরি করা রিসোর্সগুলো মুছে ফেলুন।
- ক্লাউড রান সার্ভিসটি মুছে ফেলুন:
I'm finished with this project. Delete the cloud run deployment.
- প্রজেক্ট ডিরেক্টরিটি মুছে ফেলুন:
cd .. && rm -rf codelab-match3
বিকল্পভাবে, যদি গুগল ক্লাউড প্রজেক্টটি শুধুমাত্র এই কোডল্যাবের জন্য তৈরি করা হয়ে থাকে, তবে আপনি পুরো প্রজেক্টটিই মুছে ফেলতে পারেন।
পরবর্তী পদক্ষেপ
আপনি এই প্ল্যাটফর্মের অন্যান্য কোডল্যাবগুলো ঘুরে দেখে, অথবা নিজের মতো করে ক্লাউড ক্রাশ-এর উন্নতি করে আপনার শেখার যাত্রা চালিয়ে যেতে পারেন; শুধু কাজ শেষ হয়ে গেলে রিসোর্সগুলো পরিষ্কার করতে ভুলবেন না!
কোডিং উপভোগ করুন!