1. সংক্ষিপ্ত বিবরণ
এই কোডল্যাবে, আপনি একটি "Snake & Beats" ওয়েব অ্যাপ্লিকেশন তৈরি করবেন, একটি ইন্টিগ্রেটেড মিউজিক প্লেয়ার সহ একটি রেট্রো স্নেক গেম। আপনি Gemini ব্যবহার করে একটি নিয়ন অ্যাসথেটিক সহ একটি একক-ফাইল রিঅ্যাক্ট অ্যাপ্লিকেশন তৈরি করবেন, তারপর সংস্করণ নিয়ন্ত্রণ করবেন এবং এটি Cloud Run-এ স্থাপন করবেন।
তুমি কি করবে
- বিল্ড এবং প্রম্পট : একটি একক প্রম্পট থেকে একটি কার্যকরী গেম তৈরি করতে গুগল এআই স্টুডিওর "বিল্ড" মোড ব্যবহার করুন।
- সিস্টেম নির্দেশাবলীর সাহায্যে পরিমার্জন করুন : ভবিষ্যতের সম্পাদনার জন্য একটি স্থায়ী ব্যক্তিত্ব সেট করে আপনার AI "Vibe Check" করুন।
- GitHub-এ সংরক্ষণ করুন : AI স্টুডিও থেকে সরাসরি একটি নতুন সংগ্রহস্থল বুটস্ট্র্যাপ করুন।
- ক্লাউড রানে ডিপ্লয় করুন : এক ক্লিকেই আপনার গেমটি গুগল ক্লাউড রানে পাঠান।
তুমি কি শিখবে
- গুগল এআই স্টুডিওতে বিল্ড মোড ব্যবহার করে দ্রুত প্রোটোটাইপিং অ্যাপ তৈরি করবেন কীভাবে?
- পুনরাবৃত্তির সময় একটি ধারাবাহিক "কোডিং ভাইব" বজায় রাখার জন্য সিস্টেম নির্দেশাবলী কীভাবে ব্যবহার করবেন।
- গুগল এআই স্টুডিওকে গিটহাব এবং ক্লাউড রানের সাথে কীভাবে সংযুক্ত করবেন।
তোমার যা লাগবে
- ক্রোম ওয়েব ব্রাউজার
- একটি জিমেইল অ্যাকাউন্ট
- বিলিং সক্ষম করা একটি ক্লাউড প্রকল্প
- একটি জেমিনি এপিআই কী
- একটি গিটহাব অ্যাকাউন্ট
2. শুরু করার আগে
- গুগল ক্লাউড কনসোলে , প্রজেক্ট সিলেক্টর পৃষ্ঠায়, একটি গুগল ক্লাউড প্রজেক্ট নির্বাচন করুন বা তৈরি করুন।
- আপনার ক্লাউড প্রোজেক্টের জন্য বিলিং সক্ষম আছে কিনা তা নিশ্চিত করুন। কোনও প্রোজেক্টে বিলিং সক্ষম আছে কিনা তা কীভাবে পরীক্ষা করবেন তা শিখুন।
৩. বিল্ড অ্যান্ড প্রম্পট (কোর)
আমরা একসাথে সম্পূর্ণ অ্যাপ্লিকেশন তৈরি করে শুরু করতে যাচ্ছি। গুগল এআই স্টুডিওতে লগইন করুন এবং নিশ্চিত করুন যে আপনি বিল্ড ইন্টারফেসে আছেন।
- বিল্ড প্রম্পট লিখুন : চ্যাট বক্সে নিম্নলিখিত বিস্তারিত প্রম্পটটি পেস্ট করুন:
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.
- আপনার মডেল নির্বাচন করুন : ডানদিকের সেটিংস প্যানেলে, নিশ্চিত করুন যে জেমিনি 3.0 প্রো (অথবা সর্বশেষ প্রিভিউ মডেল) দ্রুততম কোড জেনারেশনের জন্য নির্বাচিত।
- রান করুন : বিল্ড টিপুন (অথবা Cmd + Enter টিপুন)।
- প্রিভিউ : জেমিনি কোডটি তৈরি করবে এবং সাধারণত ডানদিকে একটি লাইভ প্রিভিউ রেন্ডার করবে (নীচে দেখানো হয়েছে):
৪. টীকা, ছবি এবং ভয়েস দিয়ে পরিমার্জন করুন
কখনও কখনও, শব্দে দৃশ্যমান পরিবর্তন বর্ণনা করা কঠিন। অ্যানোটেশন মোড আপনাকে আপনার অ্যাপ প্রিভিউতে অঙ্কন করে তাৎক্ষণিকভাবে আপনার দৃষ্টিভঙ্গি প্রকাশ করতে দেয়।
অ্যানোটেশন মোড ব্যবহার করুন
- অ্যানোটেশন মোড সক্রিয় করুন : এআই স্টুডিও ইন্টারফেসে (প্রিভিউ উইন্ডোর বাম দিকের প্যানেল বা নীচের টুলবারটি দেখুন), অ্যানোটেশন বা রিফাইন টুলটি নির্বাচন করুন।
- আপনার অ্যাপটি মার্ক আপ করুন :
- অঙ্কন : স্কোর কাউন্টারের চারপাশে একটি আয়তক্ষেত্র আঁকতে বক্স টুলটি ব্যবহার করুন।
- মন্তব্য : সেই বাক্সের সাথে সংযুক্ত একটি প্রম্পট টাইপ করুন: "এই ফন্টটি আরও বড়, ডিজিটাল এবং গ্লিচি করুন।"
- স্কেচ : প্লে/পজ বোতামগুলি নির্দেশ করতে তীর টুলটি ব্যবহার করুন।
- মন্তব্য : টাইপ করুন: "এগুলো গ্লোয়িং নিয়ন আইকনে পরিবর্তন করুন।"
- Iterate : "Add to chat" এ ক্লিক করুন, এবং তারপর Send প্রম্পট টিপুন। Gemini কোড আপডেট করার জন্য আপনার ভিজ্যুয়াল চিহ্ন এবং টেক্সট কমান্ড ব্যাখ্যা করবে।
- যাচাই করুন : প্রিভিউ আপডেটটি লাইভ দেখুন। আপনার ভিজ্যুয়াল প্রতিক্রিয়া এখন কোডে প্রতিফলিত হওয়া উচিত!
ভয়েস ইনপুট (স্পোকেন ভাইব)
কখনও কখনও "ভাইব" লেখার চেয়ে বলা সহজ।
- ক্রিয়া : ইনপুট বারে (+ বোতামের পাশে) মাইক্রোফোন আইকনে ক্লিক করুন।
- বলুন: "আরে, সাপের অ্যানিমেশনটি খুব ধীর। গতি বাড়ান এবং লেজটি একটি উজ্জ্বল পথ তৈরি করুন।"
- পাঠান: মিথুন আপনার বক্তৃতাকে টেক্সটে রূপান্তর করে এবং পরিবর্তনগুলি প্রয়োগ করে।
৫. সিস্টেম নির্দেশাবলী সেট করুন এবং পুনর্নির্মাণ করুন
একটি সাধারণ প্রম্পটের বিপরীতে, সিস্টেম নির্দেশনা পুরো সেশন জুড়েই থাকে। এটি আপনার কোডিং মান, নামকরণের নিয়মাবলী, অথবা একটি নির্দিষ্ট ভিজ্যুয়াল ব্যক্তিত্ব সংজ্ঞায়িত করার জন্য সেরা জায়গা যা পরিবর্তন করা উচিত নয়।
- অ্যাডভান্সড সেটিংস খুলুন : গুগল এআই স্টুডিও ইন্টারফেসে (বিল্ড মোড), সিস্টেম ইন্সট্রাকশন বক্সটি সন্ধান করুন। যদি এটি দৃশ্যমান না হয়, তাহলে চ্যাট প্যানেলের উপরে বা পাশে সেটিংস (গিয়ার আইকন) অথবা অ্যাডভান্সড সেটিংসে ক্লিক করুন।
- "Vibe" নির্দেশনা যোগ করুন : নিচের নির্দেশনাটি টেক্সট বক্সে পেস্ট করুন। এটি আমাদের গেমের জন্য একটি "Glitch Art" ব্যক্তিত্ব সংজ্ঞায়িত করে:
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 পুনর্নির্মাণ করুন।"
- রান / সেন্ড ক্লিক করুন।
- আপডেটটি লক্ষ্য করুন : মিথুন রাশি পরিবর্তনটি স্বীকার করবে।
৬. GitHub-এ সংরক্ষণ করুন
ফাইল ডাউনলোড করে কমান্ড লাইনের সাথে লড়াই করার পরিবর্তে, আমরা তাৎক্ষণিকভাবে একটি রিপোজিটরি বুটস্ট্র্যাপ করতে বিল্ট-ইন গিটহাব ইন্টিগ্রেশন ব্যবহার করব।
- ইন্টিগ্রেশনটি সনাক্ত করুন : গুগল এআই স্টুডিও ইন্টারফেসের উপরের টুলবারে, ডাউনলোড এবং ডিপ্লয় আইকনের মধ্যে অবস্থিত গিটহাব আইকনটি সন্ধান করুন।
- আপনার অ্যাকাউন্ট সংযুক্ত করুন : আইকনে ক্লিক করুন। যদি এটি আপনার প্রথমবার হয়, তাহলে আপনাকে আপনার GitHub অ্যাকাউন্ট অ্যাক্সেস করার জন্য Google AI Studio-কে অনুমোদন করতে বলা হবে।
- সংগ্রহস্থল তৈরি করুন : "আপনার রেপো তৈরি করতে নীচের তথ্য পূরণ করুন" শিরোনামে একটি ডায়ালগ বক্স প্রদর্শিত হবে।
- রিপোজিটরির নাম : একটি নাম লিখুন, যেমন, "প্রতিক্রিয়া সহ AI-জেনারেটেড স্নেক গেম।"
- সংগ্রহস্থলের বর্ণনা : সংগ্রহস্থলের বিবরণ লিখুন।
- দৃশ্যমানতা : সর্বজনীন (যাতে আপনি এটি সহজেই ভাগ করতে পারেন) বা ব্যক্তিগত নির্বাচন করুন।
- GitHub-এ পুশ করুন : "Create Git repo" বোতামে ক্লিক করুন।
৭. ক্লাউড রানে স্থাপন করুন
এখন যেহেতু অ্যাপ্লিকেশনটি প্রস্তুত এবং GitHub-এ সংরক্ষিত, আসুন এটি ক্লাউড রানে স্থাপন করি।
- স্থাপনা শুরু করুন : নীচে হাইলাইট করা বোতামে ক্লিক করুন। এটি AI স্টুডিও পৃষ্ঠার উপরের ডানদিকে অবস্থিত।
- প্রকল্প নির্বাচন করুন : একটি ক্লাউড প্রকল্প নির্বাচন করুন ড্রপডাউনে ক্লিক করুন এবং ড্রপডাউন থেকে আপনার প্রকল্প নির্বাচন করুন।
- সমস্যা সমাধান : যদি আপনি ড্রপডাউনে আপনার প্রকল্পটি খুঁজে না পান, তাহলে Import project-এ ক্লিক করুন এবং Import project ফলক থেকে আপনার প্রকল্পটি নির্বাচন করুন।
- বিলিং যাচাইকরণ : একবার আপনি প্রকল্পটি নির্বাচন করলে, প্রকল্পটি বিলিং সক্ষম করার জন্য যাচাই করা হবে। "শুরু করার আগে" বিভাগে আমরা প্রকল্পের সাথে বিলিং অ্যাকাউন্ট সংযুক্ত করার সাথে সাথে এই যাচাইকরণ স্বয়ংক্রিয়ভাবে সম্পন্ন হবে।
- ডিপ্লোয় : ডিপ্লোয় অ্যাপ বাটনে ক্লিক করুন এবং ক্লাউড রানে অ্যাপ্লিকেশনটি ডিপ্লোয় করা পর্যন্ত অপেক্ষা করুন। দ্রষ্টব্য: ক্লাউড রান পরিষেবার নামটি স্বয়ংক্রিয়ভাবে তৈরি হবে।
- কয়েক মিনিটের মধ্যে ডিপ্লয়মেন্ট সম্পন্ন হবে, এবং আপনি অ্যাপের URL পাবেন। URL-এ ক্লিক করলে, আপনি ইন্টারনেটে আপনার ডিপ্লয় করা ওয়েব অ্যাপ্লিকেশনটি সরাসরি দেখতে পাবেন!
৮. পরিষ্কার করা
এই পোস্টে ব্যবহৃত রিসোর্সের জন্য আপনার Google ক্লাউড অ্যাকাউন্টে চার্জ এড়াতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- গুগল ক্লাউড কনসোলে, রিসোর্স পরিচালনা পৃষ্ঠায় যান।
- প্রকল্পের তালিকায়, আপনি যে প্রকল্পটি মুছতে চান তা নির্বাচন করুন এবং তারপরে মুছুন ক্লিক করুন।
- ডায়ালগে, প্রজেক্ট আইডি টাইপ করুন, এবং তারপর প্রজেক্টটি মুছে ফেলতে Shut down এ ক্লিক করুন।
৯. অভিনন্দন
অভিনন্দন! আপনি এআই স্টুডিওতে একটি অ্যাপ্লিকেশনের ভাইব-কোডিং সফলভাবে সম্পন্ন করেছেন এবং এটি ক্লাউড রানে স্থাপন করেছেন!!
এআই স্টুডিও অ্যাপ্লিকেশন তৈরি এবং পরীক্ষা করার জন্য একটি আদর্শ, সর্বজনীন প্ল্যাটফর্ম, যা ব্যবহারকারীদের তাদের নকশাগুলিকে তাৎক্ষণিকভাবে কার্যকরভাবে কল্পনা করার সুযোগ দেয়।
ক্লাউড রানের সাথে এআই স্টুডিওর নিরবচ্ছিন্ন সংহতকরণ ব্যবহারকারীদের সহজেই তাদের অ্যাপ্লিকেশনগুলি সরাসরি গুগল ক্লাউডে স্থাপন করতে সক্ষম করে। ক্লাউড রান ব্যবহার করে সার্ভারবিহীন পরিবেশের সমস্ত অন্তর্নিহিত সুবিধা প্রদান করা হয়, অবকাঠামো ব্যবস্থাপনার জটিলতা এবং ওভারহেডকে বিমূর্ত করে।