১. সংক্ষিপ্ত বিবরণ
এই কোডল্যাবে, আপনি একটি "স্নেক অ্যান্ড বিটস" ওয়েব অ্যাপ্লিকেশন তৈরি করবেন, যা একটি সমন্বিত মিউজিক প্লেয়ারসহ একটি রেট্রো স্নেক গেম। আপনি জেমিনি (Gemini) ব্যবহার করে নিয়ন নান্দনিকতাসহ একটি একক-ফাইল রিয়্যাক্ট (React) অ্যাপ্লিকেশন তৈরি করবেন, তারপর সেটির ভার্সন কন্ট্রোল করে ক্লাউড রান (Cloud Run)-এ ডেপ্লয় করবেন।
আপনি যা করবেন
- বিল্ড ও প্রম্পট : গুগল এআই স্টুডিও-এর "বিল্ড" মোড ব্যবহার করে একটিমাত্র প্রম্পট থেকে একটি কার্যকরী গেম তৈরি করুন।
- সিস্টেম নির্দেশাবলী দিয়ে পরিমার্জন করুন : ভবিষ্যতের সম্পাদনার জন্য একটি স্থায়ী ব্যক্তিত্ব সেট করে আপনার AI-এর "ভাইব চেক" করুন।
- গিটহাবে সংরক্ষণ করুন : সরাসরি এআই স্টুডিও থেকে একটি নতুন রিপোজিটরি বুটস্ট্র্যাপ করুন।
- ক্লাউড রান-এ ডেপ্লয় করুন : এক ক্লিকেই আপনার গেমটি গুগল ক্লাউড রান-এ পাঠিয়ে দিন।
আপনি যা শিখবেন
- গুগল এআই স্টুডিও-তে বিল্ড মোড ব্যবহার করে কীভাবে দ্রুত অ্যাপের প্রোটোটাইপ তৈরি করবেন।
- ইটারেশনের সময় একটি সামঞ্জস্যপূর্ণ 'কোডিং ভাইব' বজায় রাখতে সিস্টেম ইনস্ট্রাকশন কীভাবে ব্যবহার করবেন
- কীভাবে গুগল এআই স্টুডিওকে গিটহাব এবং ক্লাউড রানের সাথে সংযুক্ত করবেন।
আপনার যা যা লাগবে
- ক্রোম ওয়েব ব্রাউজার
- একটি জিমেইল অ্যাকাউন্ট
- বিলিং সক্ষম একটি ক্লাউড প্রজেক্ট
- একটি জেমিনি এপিআই কী
- একটি গিটহাব অ্যাকাউন্ট
২. শুরু করার আগে
- গুগল ক্লাউড কনসোলের প্রজেক্ট সিলেক্টর পেজে, একটি গুগল ক্লাউড প্রজেক্ট নির্বাচন করুন বা তৈরি করুন।
- আপনার ক্লাউড প্রোজেক্টের জন্য বিলিং চালু আছে কিনা তা নিশ্চিত করুন। কোনো প্রোজেক্টে বিলিং চালু আছে কিনা তা কীভাবে পরীক্ষা করবেন, তা জেনে নিন।
৩. গঠন করুন ও নির্দেশ দিন (মূল বিষয়)
আমরা সম্পূর্ণ অ্যাপ্লিকেশনটি একবারে তৈরি করার মাধ্যমে কাজ শুরু করব। Google AI Studio- তে লগইন করুন এবং নিশ্চিত করুন যে আপনি Build ইন্টারফেসে আছেন।
- বিল্ড প্রম্পট প্রবেশ করান : নিম্নলিখিত বিস্তারিত প্রম্পটটি চ্যাট বক্সে পেস্ট করুন:
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- আপনার মডেল নির্বাচন করুন : দ্রুততম কোড জেনারেশনের জন্য, ডানদিকের সেটিংস প্যানেলে Gemini 3.0 Pro (বা সর্বশেষ প্রিভিউ মডেল) নির্বাচিত আছে কিনা তা নিশ্চিত করুন।
- রান : বিল্ড- এ ক্লিক করুন (অথবা Cmd + Enter চাপুন)।
- প্রিভিউ : জেমিনি কোডটি তৈরি করবে এবং সাধারণত ডানদিকে একটি লাইভ প্রিভিউ রেন্ডার করবে (যেমনটি নিচে দেখানো হয়েছে):
৪. টীকা, ছবি ও ভয়েস দিয়ে পরিমার্জন করুন
কখনও কখনও, কোনো দৃশ্যমান পরিবর্তন কথায় বর্ণনা করা কঠিন। অ্যানোটেশন মোড আপনাকে আপনার অ্যাপ প্রিভিউতে আঁকার সুযোগ দেয়, যার মাধ্যমে আপনি আপনার ভাবনাটি তাৎক্ষণিকভাবে প্রকাশ করতে পারেন।
অ্যানোটেশন মোড ব্যবহার করুন
- অ্যানোটেশন মোড সক্রিয় করুন : AI Studio ইন্টারফেসে (বাম পাশের প্যানেল অথবা প্রিভিউ উইন্ডোর নিচের টুলবার দেখুন), Annotation অথবা Refine টুলটি নির্বাচন করুন।
- আপনার অ্যাপে মার্ক আপ করুন :
- আঁকুন : বক্স টুল ব্যবহার করে স্কোর কাউন্টারের চারপাশে একটি আয়তক্ষেত্র আঁকুন।
- মন্তব্য : ঐ বাক্সে একটি নির্দেশ টাইপ করুন: "এই ফন্টটিকে আরও বড়, ডিজিটাল এবং ত্রুটিপূর্ণ করুন।"
- স্কেচ : প্লে/পজ বাটনগুলো নির্দেশ করতে অ্যারো টুল ব্যবহার করুন।
- মন্তব্য : টাইপ: "এগুলোকে উজ্জ্বল নিয়ন আইকনে পরিবর্তন করুন।"
- পুনরাবৃত্তি করুন : "Add to chat"-এ ক্লিক করুন, এবং তারপর "Send prompt" -এ চাপুন। Gemini আপনার দৃশ্যমান চিহ্ন এবং লিখিত নির্দেশগুলো বিশ্লেষণ করে কোডটি আপডেট করবে।
- যাচাই করুন : প্রিভিউ আপডেটটি সরাসরি দেখুন। আপনার দেখা মতামত এখন কোডে প্রতিফলিত হওয়া উচিত!
কণ্ঠস্বর ইনপুট (কথ্য ভাব)
কখনো কখনো অনুভূতিটা লেখার চেয়ে বলা সহজ।
- করণীয় : ইনপুট বারে (+ বোতামের পাশে) থাকা মাইক্রোফোন আইকনে ক্লিক করুন।
- বলুন: "আরে, সাপটার অ্যানিমেশনটা খুব ধীর। এটার গতি বাড়ান এবং লেজটাকে একটা উজ্জ্বল রেখা তৈরি করতে দিন।"
- প্রেরণ: জেমিনি আপনার কথাকে লেখায় রূপান্তর করে এবং পরিবর্তনগুলো প্রয়োগ করে।
৫. সিস্টেম নির্দেশাবলী সেট করুন এবং পুনর্নির্মাণ করুন
সাধারণ প্রম্পটের মতো নয়, সিস্টেম নির্দেশনা পুরো সেশন জুড়েই বজায় থাকে। আপনার কোডিং স্ট্যান্ডার্ড, নামকরণের রীতি, বা এমন কোনো নির্দিষ্ট ভিজ্যুয়াল পারসোনা যা পরিবর্তন হওয়া উচিত নয়, তা নির্ধারণ করার জন্য এটিই সেরা জায়গা।
- উন্নত সেটিংস খুলুন : Google AI Studio ইন্টারফেসে (বিল্ড মোড), সিস্টেম নির্দেশাবলী বক্সটি খুঁজুন। যদি এটি দেখা না যায়, তাহলে চ্যাট প্যানেলের উপরে বা পাশে থাকা সেটিংস (গিয়ার আইকন) বা উন্নত সেটিংসে ক্লিক করুন।
- "ভাইব" নির্দেশনা যোগ করুন : নিম্নলিখিত নির্দেশনাটি টেক্সট বক্সে পেস্ট করুন। এটি আমাদের গেমের জন্য একটি "গ্লিচ আর্ট" পার্সোনা নির্ধারণ করে:
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- পরিবর্তন কার্যকর করা : সিস্টেম নির্দেশনা পরিবর্তন করলে কোড স্বয়ংক্রিয়ভাবে পুনর্লিখিত হয় না। এই নতুন নিয়মগুলো প্রয়োগ করার জন্য আপনাকে জেমিনিকে নির্দেশ দিতে হবে।
- সেটিংস প্যানেলটি বন্ধ করুন।
- চ্যাট/প্রম্পট ইনপুটে টাইপ করুন: "নতুন সিস্টেম নির্দেশাবলী কঠোরভাবে অনুসরণ করার জন্য অ্যাপ্লিকেশন UI পুনর্নির্মাণ করুন।"
- রান / সেন্ড-এ ক্লিক করুন।
- আপডেটটি লক্ষ্য করুন : জেমিনি পরিবর্তনটি স্বীকার করবে।
৬. গিটহাবে সংরক্ষণ করুন
ফাইল ডাউনলোড করা এবং কমান্ড লাইনের সাথে লড়াই করার পরিবর্তে, আমরা তাৎক্ষণিকভাবে একটি রিপোজিটরি চালু করতে গিটহাবের বিল্ট-ইন ইন্টিগ্রেশন ব্যবহার করব।
- ইন্টিগ্রেশনটি খুঁজুন : Google AI Studio ইন্টারফেসের উপরের টুলবারে, Download এবং Deploy আইকনগুলির মধ্যে অবস্থিত GitHub আইকনটি খুঁজুন।
- আপনার অ্যাকাউন্ট সংযুক্ত করুন : আইকনটিতে ক্লিক করুন। আপনি যদি প্রথমবার এটি করেন, তাহলে আপনাকে আপনার GitHub অ্যাকাউন্ট অ্যাক্সেস করার জন্য Google AI Studio-কে অনুমোদন দিতে বলা হবে।
- রিপোজিটরি তৈরি করুন : "আপনার রিপো তৈরি করতে নিচের তথ্যগুলো পূরণ করুন" শিরোনামে একটি ডায়ালগ বক্স প্রদর্শিত হবে।
- রিপোজিটরি নাম : একটি নাম লিখুন, যেমন, 'রিঅ্যাক্ট দিয়ে তৈরি এআই-জেনারেটেড স্নেক গেম'।
- রিপোজিটরি বিবরণ : রিপোজিটরি বিবরণ লিখুন।
- দৃশ্যমানতা : সর্বজনীন (যাতে আপনি সহজেই শেয়ার করতে পারেন) অথবা ব্যক্তিগত নির্বাচন করুন।
- গিটহাবে পুশ করুন : 'Create Git repo' বোতামটি ক্লিক করুন।
৭. ক্লাউড রানে স্থাপন করুন
অ্যাপ্লিকেশনটি তৈরি হয়ে গিটহাবে সেভ করা হয়ে গেলে, চলুন এবার এটিকে ক্লাউড রানে ডিপ্লয় করা যাক।
- ডেপ্লয়মেন্ট শুরু করুন : নিচে হাইলাইট করা বোতামটিতে ক্লিক করুন। এটি এআই স্টুডিও পেজের উপরের ডান কোণায় অবস্থিত।
- প্রজেক্ট নির্বাচন করুন : 'একটি ক্লাউড প্রজেক্ট নির্বাচন করুন' ড্রপডাউনে ক্লিক করুন এবং সেখান থেকে আপনার প্রজেক্টটি নির্বাচন করুন।
- সমস্যা সমাধান : যদি আপনি ড্রপডাউনে আপনার প্রজেক্টটি খুঁজে না পান, তাহলে 'Import project'-এ ক্লিক করুন এবং 'Import project' প্যানেল থেকে আপনার প্রজেক্টটি নির্বাচন করুন।
- বিলিং যাচাইকরণ : আপনি প্রজেক্টটি নির্বাচন করার পর, সেটিতে বিলিং চালু আছে কিনা তা যাচাই করা হয়। এই যাচাইকরণটি স্বয়ংক্রিয়ভাবে সম্পন্ন হবে, কারণ আমরা "শুরু করার আগে" অংশে প্রজেক্টটির সাথে বিলিং অ্যাকাউন্টটি সংযুক্ত করে দিয়েছি।
- ডিপ্লয় করুন : ‘ডিপ্লয় অ্যাপ’ বোতামে ক্লিক করুন এবং ক্লাউড রান-এ অ্যাপ্লিকেশনটি ডিপ্লয় হওয়া পর্যন্ত অপেক্ষা করুন। দ্রষ্টব্য: ক্লাউড রান সার্ভিসের নামটি স্বয়ংক্রিয়ভাবে তৈরি হয়ে যাবে।
- ডেপ্লয়মেন্টটি কয়েক মিনিটের মধ্যেই সম্পন্ন হয়ে যাবে এবং আপনি অ্যাপের ইউআরএলটি পেয়ে যাবেন। ইউআরএলটিতে ক্লিক করলেই আপনি ইন্টারনেটে আপনার ডেপ্লয় করা ওয়েব অ্যাপ্লিকেশনটি সরাসরি দেখতে পাবেন!
৮. পরিষ্কার করুন
এই পোস্টে ব্যবহৃত রিসোর্সগুলোর জন্য আপনার গুগল ক্লাউড অ্যাকাউন্টে চার্জ হওয়া এড়াতে, এই ধাপগুলো অনুসরণ করুন:
- গুগল ক্লাউড কনসোলে, রিসোর্স পরিচালনা (Manage resources) পৃষ্ঠায় যান।
- প্রজেক্ট তালিকা থেকে, আপনি যে প্রজেক্টটি মুছতে চান সেটি নির্বাচন করুন এবং তারপর ডিলিট-এ ক্লিক করুন।
- ডায়ালগ বক্সে প্রজেক্ট আইডি টাইপ করুন এবং তারপর প্রজেক্টটি মুছে ফেলার জন্য 'শাট ডাউন'-এ ক্লিক করুন।
৯. অভিনন্দন
অভিনন্দন! আপনি AI Studio-তে সফলভাবে একটি অ্যাপ্লিকেশনের ভাইব-কোডিং সম্পন্ন করেছেন এবং এটিকে Cloud Run-এ ডেপ্লয় করেছেন!!
এআই স্টুডিও অ্যাপ্লিকেশন তৈরি এবং পরীক্ষা করার জন্য একটি আদর্শ ও নির্ভরযোগ্য প্ল্যাটফর্ম, যা ব্যবহারকারীদের তাদের ডিজাইনগুলো বাস্তবে কী অবস্থায় আছে তা তাৎক্ষণিকভাবে দেখতে দেয়।
ক্লাউড রানের সাথে এআই স্টুডিও-র নির্বিঘ্ন একীকরণ ব্যবহারকারীদের অনায়াসে তাদের অ্যাপ্লিকেশন সরাসরি গুগল ক্লাউডে স্থাপন করতে সক্ষম করে। ক্লাউড রান ব্যবহার করলে সার্ভারবিহীন পরিবেশের সমস্ত সহজাত সুবিধা পাওয়া যায় এবং পরিকাঠামো ব্যবস্থাপনার জটিলতা ও অতিরিক্ত বোঝা দূর হয়।