১. ভূমিকা
২০২৫ সালের ২৫শে মার্চ গুগল জেমিনি ২.৫ চালু করে । এই লঞ্চের সবচেয়ে স্মরণীয় দিকগুলোর মধ্যে একটি ছিল যে এটি সবাইকে "অ্যাডভান্সড কোডিং" ফিচারটি চেষ্টা করার সুযোগ দিয়েছিল [ ভিডিও ]:
জেমিনি ২.৫: এক লাইনের নির্দেশনা থেকে আপনার নিজের ডাইনোসর গেম তৈরি করুন
এই কোডল্যাবে, আপনি একটি সাধারণ প্রম্পট থেকে শুরু করে নিজের পছন্দ অনুযায়ী কাস্টমাইজ করে একটি সহজ বাচ্চাদের অ্যাপ 'ভাইব কোডিং' করা শিখবেন। আমরা p5.js- এ অ্যাপটি পরীক্ষা করব। সবশেষে, আমরা এই পরিবর্তনগুলো ফায়ারবেস হোস্টিং- এ পুশ করব। এর সবচেয়ে চমৎকার বিষয়টি হলো, পুরো স্ট্যাকটি বর্তমানে বিনামূল্যে পাওয়া যাচ্ছে!
আপনি যা শিখবেন
- জেমিনি ২.৫ ব্যবহার করে একটি গেম অ্যাপকে ভাইব-কোড করুন।
- p5js.org- এ কোডটি পরীক্ষা করুন।
- আপনার প্রম্পট / অ্যাপকে কীভাবে পুনরাবৃত্তি ও পরিমার্জন করবেন
- ফায়ারবেসে কীভাবে একটি স্ট্যাটিক অ্যাপ্লিকেশন হোস্ট করবেন
মনে রাখবেন যে এই কোডল্যাবটি এআই-জেনারেটেড কোড ব্যবহার করে; এটি নন-ডিটারমিনিস্টিক, তাই এই কোডল্যাবে কিছু নির্দেশিকা রয়েছে, কারণ আপনার আউটপুট লেখকের কাছে অজানা। এছাড়াও, অনুগ্রহ করে এই কোডটি প্রোডাকশনে ব্যবহার করবেন না!
২. পূর্বশর্তসমূহ
এই কোডল্যাবটি দুটি পর্যায়ে রয়েছে:
- শুধুমাত্র ওয়েব-ভিত্তিক ডেভেলপমেন্ট। এখানেই আপনি সবচেয়ে বেশি মজা পাবেন এবং এর জন্য কোনো কোডিং দক্ষতার প্রয়োজন নেই। এর জন্য আমরা আমাদের Gemini UI ( gemini.google.com ) এবং p5.js ব্যবহার করব।
- স্থানীয় কোডিং পরিবেশ । এর জন্য সামান্য কোডিং/স্ক্রিপ্টিং দক্ষতার প্রয়োজন, সাথে
npm/npxইনস্টল ও ব্যবহার এবংvscode, IntelliJ বা এই জাতীয় একটি স্থানীয় এডিটর দরকার। এই দ্বিতীয় অংশটি ঐচ্ছিক এবং শুধুমাত্র তখনই প্রয়োজন হবে, যদি আপনি আপনার অ্যাপ্লিকেশনটি স্থায়ীভাবে সংরক্ষণ করতে চান যাতে আপনার বন্ধু ও পরিবার মোবাইল বা তাদের কম্পিউটার থেকে এটি ব্যবহার করতে পারে।
প্রথম পর্যায়ের জন্য একমাত্র পূর্বশর্ত হলো একটি ব্রাউজার এবং একটি কম্পিউটার (বড় স্ক্রিন হলে সুবিধা হবে)। দ্বিতীয় পর্যায়ের জন্য, পড়তে থাকুন।
জেমিনি UI
gemini.google.com একটি চমৎকার প্ল্যাটফর্ম, যেখানে আপনি আপনার সব লেটেস্ট জেমিনি মডেলগুলো পরখ করে দেখতে পারেন এবং নিজের ছবি ও ভিডিও তৈরি করতে পারেন! এটি গুগল ম্যাপস এবং হোটেল/ফ্লাইট/রিভিউ-এর মতো গুগল ইন্টিগ্রেশন দ্বারা পরিপূর্ণ, যা আপনার পরবর্তী ছুটির পরিকল্পনা করার জন্য এটিকে একটি আদর্শ সঙ্গী করে তোলে!
পরামর্শ: আপনি যদি কোডিং করতে আগ্রহী হন, তাহলে AI Studio নিয়েও কাজ করে দেখতে পারেন। এটির ইন্টারফেসটিও প্রায় একই রকম, যেখানে আপনি একটি LLM ইন্টারঅ্যাকশনের প্রোটোটাইপ (যেমন, একটি ছবি তৈরি করা) তৈরি করতে পারবেন এবং সরাসরি পেজ থেকেই পাইথন কোডটি পেয়ে যাবেন!
p5.js
p5.js হলো একটি ফ্রি, ওপেন-সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি যা শিল্পী, ডিজাইনার, শিক্ষাবিদ এবং অন্য সকলের জন্য সৃজনশীল কোডিংকে সহজলভ্য ও অন্তর্ভুক্তিমূলক করে তোলে। এটি প্রসেসিং ল্যাঙ্গুয়েজের উপর ভিত্তি করে তৈরি এবং ওয়েব ব্রাউজারে কোড ব্যবহার করে ইন্টারেক্টিভ ভিজ্যুয়াল ও ইন্টারেক্টিভ কন্টেন্ট তৈরির প্রক্রিয়াকে সহজ করে।
স্থানীয় কোডিং [ঐচ্ছিক]
আপনি যদি আপনার অ্যাপ্লিকেশনটি স্থায়ীভাবে রাখতে চান, তবে আরও কিছু সেটআপের প্রয়োজন হবে:
- একটি স্থানীয় কোড এডিটর ( ভিজ্যুয়াল স্টুডিও কোড , ইন্টেলিজ , ইত্যাদি)
- আপনার কোড সংরক্ষণের জন্য একটি গিট অ্যাকাউন্ট ( github / gitlab / bitbucket )।
- স্থানীয়ভাবে
npmইনস্টল করা থাকতে হবে, তবে ইউজার স্পেসে (npxবা সমতুল্য প্রযুক্তির মাধ্যমে) হলে আরও ভালো।
এছাড়াও, আমরা পরে একটি ফায়ারবেস অ্যাকাউন্ট তৈরি করব।
এছাড়াও আমাদের কিছু কোডিং দক্ষতার প্রয়োজন, যেমন:
- একটি
npmপ্যাকেজ ইনস্টল করার ক্ষমতা - ফাইল সিস্টেমের সাথে মিথস্ক্রিয়া করার ক্ষমতা (ফোল্ডার এবং ফাইল তৈরি করা)
-
gitসাথে কাজ করার ক্ষমতা (git add,git commit,git push)।
এখানকার কোনো কিছু যদি কঠিন মনে হয়, তবে মনে রাখবেন: এলএলএম (LLM) আপনাকে এক্ষেত্রে দারুণভাবে সাহায্য করবে। উদাহরণস্বরূপ, পরামর্শ পাওয়ার জন্য আপনি " Gemini 2.0 flash " বা এর সমতুল্য মডেলটি ব্যবহার করতে পারেন। এরপরও যদি এটি খুব কঠিন মনে হয়, তবে আপনি দ্বিতীয় পর্যায়টি পুরোপুরি বাদ দিতে পারেন। প্রথম পর্যায়টিই যথেষ্ট ফলপ্রসূ হওয়া উচিত।
৩. চলো আমাদের প্রথম গেমটি তৈরি করি!
gemini.google.com খুলুন এবং একটি কোড-সক্ষম মডেল বেছে নিন, যেমন ২.৫। প্রাপ্যতা, খরচ এবং তারিখের উপর নির্ভর করে এই পছন্দটি ভিন্ন হতে পারে। এই লেখাটি লেখার সময়, সেরা পছন্দটি হবে:
- জেমিনি ২.৫ ফ্ল্যাশ (দ্রুততর সংস্করণ)
- জেমিনি ২.৫ প্রো (উন্নত আউটপুট)।
আমাদের জেমিনি মডেলগুলো সম্পর্কে আরও তথ্য এখানে পাওয়া যাবে।
আমাদের প্রথম গেম প্রম্পট
এই ভিডিওটি থেকে যেমনটা দেখতে পাচ্ছেন, একটি প্রাথমিক নির্দেশ এতটাই সহজ হতে পারে:
Make me a captivating endless runner game. Key instructions on the screen. p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.
আপনি চাইলে এটিকে কিছুটা পরিবর্তন করে নিতে পারেন:
- মধ্যযুগীয় / ভবিষ্যৎ / সাইবারপাঙ্ক প্রেক্ষাপট
- ইমোজিতে ভরা, নাকি কোনো একটি নির্দিষ্ট ইমোজিতে?
- আপনি হলুদ রঙ অথবা বেগুনি রঙের বিভিন্ন আভা পছন্দ করেন।
- হয়তো আপনার বাচ্চা ইউনিকর্ন, ডাইনোসর বা পোকেমন ভালোবাসে।
একবার আপনি আপনার ব্রাউজারে প্রম্পটটি পেস্ট করলে, আপনি জেমিনির চিন্তাভাবনা পর্যবেক্ষণ করতে পারবেন। হ্যাঁ, জেমিনি ২.৫ একটি চিন্তাশীল মডেল, তাই এটি বেশ কিছু কাজ শুরু করবে যা আপনি সময়ের সাথে সাথে পরিবর্তিত হতে দেখতে পাবেন। কী ঘটছে তা দেখতে আপনি পরিবর্তনশীল ড্রপডাউনে ক্লিক করতে পারেন, অথবা আপনি শুধু ফলাফলের জন্য অপেক্ষা করতে পারেন।
সবশেষে, আপনার একটি কার্যকর জাভাস্ক্রিপ্ট তৈরি হয়ে যাবে।
এখন আপনি উপরের কপি বাটনটিতে ক্লিক করতে পারেন:
p5.js-এ গেমটি পরীক্ষা করা হচ্ছে
এখন গেমটি পরীক্ষা করার সময়!
- p5.js এডিটরটি এখানে খুলুন: https://editor.p5js.org/
- বিদ্যমান sketch.js কোডটি নির্বাচন করে মুছে ফেলুন।
- আপনার কোড পেস্ট করুন
আপনার পৃষ্ঠাটি দেখতে এইরকম হওয়া উচিত:
অবশেষে, আপনি প্লে বাটনটি চাপতে পারেন।
এখন দুটি জিনিস ঘটতে পারে: হয় আপনার কোডটি কাজ করবে অথবা ব্যর্থ হবে। চলুন, উভয় ক্ষেত্রের ওপর নির্ভর করে নির্দেশাবলী অনুসরণ করা যাক:
- আপনার কোড ব্যর্থ হয়েছে
- আপনার কোডটি প্রথম চেষ্টাতেই কাজ করছে!
পরবর্তী দুটি অনুচ্ছেদে দেখা যাক, কীভাবে উভয় পরিস্থিতি সামাল দেওয়া যায়।
(কেস ১) আমার কোডটি ব্যর্থ হচ্ছে!
আপনি যদি এই ধরনের কোনো ত্রুটি পান, তাহলে আপনি কেবল এটি কপি করে জেমিনিতে পেস্ট করতে পারেন। তাকে আপনার জন্য কোডটি ঠিক করতে দিন!
(ক্ষেত্র ২) আমার কোড কাজ করে!
আপনার কোডটি কাজ করলে, পেজের ডান প্রান্তে একটি ভিজ্যুয়াল গেম দেখতে পাবেন।
👏 অভিনন্দন, আপনি আপনার প্রথম এআই গেমটি চালাচ্ছেন!
দ্রষ্টব্য: আপনার কাছে কোডটি থাকা অবস্থায়, অ্যাপটি শুধুমাত্র আপনার ব্রাউজারে কাজ করবে। আপনি যদি আপনার পরিবার এবং বন্ধুদের অ্যাপটি দেখাতে চান, তাহলে আপনার একটি হোস্টিং সলিউশন প্রয়োজন হবে। সৌভাগ্যবশত, আমাদের কাছে আপনার জন্য একটি দারুণ বিকল্প রয়েছে! পড়তে থাকুন।
আপনি এখন পরবর্তী অধ্যায়ের জন্য প্রস্তুত।
আরও পুনরাবৃত্তি
এখন আপনার কোডটি কোথাও সংরক্ষণ করার সময়, যদি এটি ভেঙে যায়। আপনি চাইলে একবার পুনরাবৃত্তি করতে পারেন। উদাহরণস্বরূপ, লেখক সুপার মারিও ডাবল জাম্প খুব পছন্দ করেন, তাই আপনি এইরকম কিছু যোগ করতে পারেন:
The game is great, thanks! Please allow for my character to double jump.
আপনি আপনার ইচ্ছামতো যেকোনো কিছু পরিবর্তন করতে পারেন, সম্ভাবনার কোনো সীমা নেই! হতে পারে আপনি বেশি স্কোরের জন্য চরিত্রের নাম সংরক্ষণ করতে চান, অথবা খেলাটিকে আরও কঠিন করার জন্য সময়ের সাথে সাথে গতি বাড়াতে চান, ইত্যাদি। আপনার নির্দেশনার একমাত্র সীমাবদ্ধতা হলো ইংরেজি ভাষা!
পরামর্শ: জেমিনি সাধারণত আপনাকে শুধু প্রয়োজনীয় পরিবর্তনটুকুই দেখায় (যেমন, এটি হলো XYZ ফাংশনের জন্য পরিবর্তন)। আপনি চাইলে প্রম্পটটি এমনভাবে সেট করতে পারেন যাতে এটি আপনাকে সম্পূর্ণ আপডেট করা কোডটি দেখায়, যেমন—
"Please give me the entire updated code, not just the changed function"
এটি আপনার জন্য কাট-পেস্ট করার অভিজ্ঞতাকে আরও সহজ করে তুলবে।
সতর্কতা
আপনি আপনার জেমিনি চ্যাটটি বুকমার্ক করে রাখতে পারেন। হয়তো আপনি এটির নাম পরিবর্তন করে "p5js my first game" রাখতে পারেন, অথবা পরে ব্যবহারের জন্য জেমিনির পারমালিঙ্কটি লিখে রাখতে পারেন, যেমন " https://gemini.google.com/app/abcdef123456789 "।
৪. চলুন এই কোডটি স্থানীয়ভাবে রান করি।
এই পর্যায়ে, আপনার যা যা থাকা উচিত:
- একটি খোলা জেমিনি ব্রাউজার উইন্ডো, যেখানে কিছু কার্যকরী কোড রয়েছে।
- একটি খোলা p5.js ব্রাউজার উইন্ডো যেখানে একটি চালু গেম রয়েছে।
-
npmইনস্টল করা একটি স্থানীয় কোডিং পরিবেশ।
এটি কোডল্যাবের কঠিনতম অংশ। এর জন্য কোডিং-এর প্রাথমিক অভিজ্ঞতা থাকা প্রয়োজন।
নির্ভরতা ইনস্টল করুন
আপনার সিস্টেমে যদি npm এবং node ইনস্টল করা না থাকে, তবে nvm-এর মতো কোনো ভার্সন ম্যানেজারের মাধ্যমে npm ইনস্টল করাই আপনার জন্য সবচেয়ে ভালো উপায়। আপনার অপারেটিং সিস্টেমের জন্য দেওয়া ইনস্টলেশন নির্দেশাবলী অনুসরণ করুন।
আমরা এটাও ধরে নিচ্ছি যে আপনি একটি কোডিং IDE ব্যবহার করছেন। আমরা আমাদের স্ক্রিনশট এবং উদাহরণগুলিতে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করব, তবে যেকোনো কিছুই চলবে।
স্থানীয় পরিবেশ তৈরি করুন
এই মুহূর্তেই আপনি আপনার নিজস্ব ফাইল কাঠামো তৈরি করতে পারেন।
উদাহরণস্বরূপ একটি সেটআপ স্ক্রিপ্ট দেওয়া হলো। আপনি ফোল্ডার এবং ফাইল তৈরি করে এটি ম্যানুয়ালি করতে পারেন:
# This works for Mac and Linux. For Windows, please use other tools. mkdir my-first-vibecoding-project/ cd my-first-vibecoding-project/ git init touch README.md PROMPT.md mkdir public/ cd public/ touch index.html sketch.js style.css git add . # Skipping quotes which can be tricky git commit -a -m committing_empty_skeleton
চূড়ান্ত ফোল্ডার কাঠামোটি দেখতে এইরকম হবে:
my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
├── index.html
├── sketch.js
└── style.css
আপনি এটিও এখানে খুঁজে পেতে সক্ষম হবেন।
এখন আপনার পছন্দের কোড এডিটরটি খুলুন (যেমন code my-first-vibecoding-project/ ) এবং editor.p5js.org- এর কন্টেন্টগুলো public/ এর অধীনে থাকা ৩টি ফাইলে পেস্ট করা শুরু করুন:
-
README.md← এখানে আপনি জেমিনি চ্যাটের পারমালিঙ্কটি দিতে পারবেন এবং অ্যাপটির ল্যান্ডিং পেজ (যখন এটি আসবে) এখানে রাখবেন। -
PROMPT.md← এখানে আপনি আপনার সমস্ত প্রম্পট একটি H2 প্যারাগ্রাফ দিয়ে আলাদা করে যোগ করতে পারেন। যদি আপনি কোনো নির্দিষ্ট প্রম্পট দেওয়ার কারণ ব্যাখ্যা করতে চান, তাহলে আপনি আপনার প্রম্পটটিকে ৩টি ব্যাকটিকের মধ্যে রাখতে পারেন ( উদাহরণ )। - **
public/index.html** ← আপনার HTML কোড এখানে কপি করুন - **
public/sketch.js** ← আপনার JS কোড এখানে কপি করুন - **
public/style.css**← আপনার CSS কোড এখানে কপি করুন
পাবলিক ফোল্ডারে কাস্টম পিএনজি-এর মতো অতিরিক্ত অ্যাসেট থাকতে পারে।
৫. ফায়ারবেসে সেট আপ এবং ডেপ্লয় করুন
ফায়ারবেস সেট আপ করুন (শুধুমাত্র প্রথমবারের জন্য)
আপনার কম্পিউটারে npm ইনস্টল করা আছে কিনা তা নিশ্চিত করুন।
টার্মিনালে নিচের যেকোনো একটি টাইপ করুন (যেকোনো একটি হলেই চলবে):
# to install on the machine (requires privilege) npm install -g firebase-tools # to install locally (low privilege needed but might need to repeat a few times) npm install firebase-tools
এখন আপনি firebase কমান্ডটি কল করতে পারবেন। কোনো সমস্যা হলে, পাবলিক ডক্স অনুসরণ করুন।
ফায়ারবেস প্রারম্ভিককরণ
এই অংশে আমরা ফায়ারবেস হোস্টিং সেট আপ করব। এর প্রক্রিয়াটি খুবই সহজ, কিন্তু প্রথমবার এর সাথে পরিচিত হতে কিছুটা সময় লাগতে পারে।
নিশ্চিত করুন যে আপনি public/ ডিরেক্টরির ঠিক উপরের ডিরেক্টরিতে আছেন, যেখানে আপনার ফাইলগুলো রয়েছে। তালিকাটি ( ls -al বা dir ) দেখতে এইরকম হবে:
$ ls PROMPT.md README.md public/
- [ধাপ ১] কনসোলে টাইপ করুন:
firebase init
- কার্সার দিয়ে নিচে "Hosting: .." পর্যন্ত যান এবং SPACE চেপে তারপর ENTER চাপুন । (কেন? কারণ এটি একটি বহু-নির্বাচনী বিকল্প, তাই আপনাকে নির্বাচন করার পাশাপাশি পরবর্তী পৃষ্ঠায়ও যেতে হবে।)
- [ধাপ ২] এখন আপনি একটি বিদ্যমান প্রজেক্ট বেছে নিতে পারেন (বিকল্প ১) অথবা একটি নতুন প্রজেক্ট তৈরি করতে পারেন (বিকল্প ২):
- দ্রষ্টব্য: আপনার যদি আগে থেকেই কোনো ক্লাউড প্রজেক্ট থাকে, তবে সেটি ফায়ারবেস প্রজেক্ট নাও হতে পারে। ফায়ারবেস প্রজেক্টগুলো হলো জিসিপি (GCP) প্রজেক্টের একটি উপশ্রেণী। সেগুলোকে ফায়ারবেস প্রজেক্টে রূপান্তর করতে অতিরিক্ত কাজ করতে হয়, যার জন্যই (বিকল্প ৩) দেওয়া হয়েছে।
- যদি সিদ্ধান্তহীন থাকেন, তাহলে "Create a new project" ব্যবহার করুন এবং "p5js-YOURNAME-YOURAPP" (উদাহরণস্বরূপ, "p5js-riccardo-tetris")-এর মতো একটি নাম যোগ করুন।
- [ধাপ ৩]
What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris) - এন্টার চাপুন।
- [ধাপ ৪]
? What do you want to use as your public directory? (public) - এন্টার চাপুন (আমরা এটি
public/ইচ্ছাকৃতভাবে স্থাপন করেছি)
- [ধাপ ৫]
? Configure as a single-page app (rewrite all urls to /index.html)? No - এন্টার চাপুন (না)
- [ধাপ ৬]
? Set up automatic builds and deploys with GitHub? No - এন্টার চাপুন - না
- [ধাপ ৭]
? File public/index.html already exists. Overwrite? (y/N) - এন্টার (না) চাপুন।
- সতর্কীকরণ: এতে ত্রুটি হওয়ার সম্ভাবনা রয়েছে; যদি আপনি এটি ওভাররাইট করেন, তাহলে নতুন index.html ফাইলটি p5js-এর সাথে সামঞ্জস্যপূর্ণ হবে না!
সবকিছু ঠিকঠাক কাজ করলে আপনি এটি দেখতে পাবেন:
এই পদক্ষেপগুলোর ফলে কয়েকটি ফাইল তৈরি হওয়ার কথা ছিল:
.firebaserc .gitignore firebase.json public/404.html
বিশেষ করে, .firebaserc আপনার প্রজেক্ট আইডি থাকা উচিত, যা আপনি নিম্নলিখিত কমান্ডের মাধ্যমে প্রোগ্রাম্যাটিকভাবে পেতে পারেন: cat .firebaserc | jq .projects.default -r
সতর্কতা: index.html ফাইলটি পরীক্ষা করুন। যদি এটি ১৬ লাইনের বেশি দীর্ঘ হয়, এবং/অথবা এতে firebase শব্দটি থাকে, তাহলে আপনি ভুলবশত p5js ফাইলগুলো ওভাররাইট করে ফেলেছেন। কোনো সমস্যা নেই, শুধু মনে রাখবেন git অথবা p5js এডিটর থেকে পুরোনো index.html ফাইলটি ফিরিয়ে নিতে হবে।
স্থানীয় পরীক্ষা
ফিডব্যাক লুপের ল্যাটেন্সি কমাতে, আপনি প্রথমে স্থানীয়ভাবে বিষয়গুলো পরীক্ষা করে দেখতে পারেন।
এর জন্য, আপনি ফায়ারবেস টিমের শক্তিশালী CLI স্যুটটি ব্যবহার করে দেখতে পারেন। উদাহরণস্বরূপ:
$ firebase emulators:start
পুশ করার আগে স্থানীয়ভাবে পরীক্ষা করার জন্য পোর্ট 5000 ( http://127.0.0.1:5000/ ) এ একটি ওয়েবসার্ভার চালু করা উচিত।
ফায়ারবেসে স্থাপন করুন
এখন চূড়ান্ত নির্দেশ দেওয়ার পালা:
$ firebase deploy
এর ফলে বেশ কিছু পদক্ষেপ নেওয়া হবে। শেষের কয়েকটি লাইন দেখতে অনেকটা এইরকম হবে:
$ firebase deploy [...] ✔ hosting[YOUR_PROJECT]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview Hosting URL: https://YOUR_PROJECT.web.app
এটি আপনাকে হোস্টিং ইউআরএলটি দেবে। চেষ্টা করে দেখুন!
যদি ডেপ্লয়মেন্ট সফল হয় , কিন্তু আপনি কোনো ফাঁকা পৃষ্ঠা বা অন্য কোনোভাবে ত্রুটিপূর্ণ ডেপ্লয়মেন্ট দেখতে পান, তাহলে আপনি কয়েকটি কাজ করতে পারেন:
- আপনার ব্রাউজারের 'ডেভেলপার টুলস' খুলুন এবং ত্রুটিটি খুঁজুন, এবং এটি ঠিক করতে জেমিনিকে এই ধরনের একটি প্রম্পট দিয়ে সাহায্য করতে বলুন:
I've deployed the script correctly with Firebase, but I now see a blank page with this error: [ paste detailed JS console error ]
♾️ পুনরাবৃত্তি করুন!
আপনি যতবার ইচ্ছা এই ধাপগুলো পুনরাবৃত্তি করতে পারেন। ফলাফলে সন্তুষ্ট না হওয়া পর্যন্ত আপনি নির্দেশনা দেওয়া চালিয়ে যেতে পারেন।
কয়েকটি বিষয় উল্লেখ করা গুরুত্বপূর্ণ:
- Gemini > p5.js > Gemini লুপটিতে পুনরাবৃত্তির প্রক্রিয়াটি, Gemini > local host > deploy to cloud run > test app on browser (hit refresh) লুপটির চেয়ে অনেক দ্রুত।
- প্রম্পট এবং কোড উভয়ের ভার্সনিংয়ের জন্য গিট ব্যবহার করুন। আপনি হয়তো প্রম্পট N এবং কোড N- এ ফিরে যেতে চাইতে পারেন। বিশেষ করে, আপনার পুশ করা প্রতিটি
sketch.jsফাইল গিট কমিট করা উচিত, কারণ সেখানে বাগ অলক্ষ্যে লুকিয়ে থাকতে পারে।
লক্ষ্য করুন যে কিছু গেম কিবোর্ডের সাথে ভালোভাবে কাজ করলেও মোবাইল ফোনে মাউস বা ট্যাপের মাধ্যমে ঠিকমতো কাজ করে না। কোডটি উন্নত করার জন্য এটি একটি দারুণ সুযোগ।
৬. প্রম্পটিং টিপস
ইতিমধ্যে বেশ কয়েকটি গেম তৈরি করার অভিজ্ঞতা থেকে কিছু পরামর্শ।
আপনার প্রম্পটের সংস্করণ তৈরি করুন
আপনার মূল প্রম্পটে সম্ভবত ভুল খুঁজে পাবেন। এটির একটি git সংস্করণ রয়েছে। এখানে কয়েকটি কোড পাথ আছে:
- আপনি যা দেখছেন তা যদি আপনার ভালো লাগে এবং পরবর্তী উপ-প্রম্পটগুলো নিয়ে জেমিনির সাথে কাজ চালিয়ে যেতে চান, তাহলে সেগুলোকে কোথাও খুঁজে বের করাটা আকর্ষণীয় হতে পারে (প্রম্পট ১,২,৩ - ৩-শট উদাহরণ১ - উদাহরণ২ )।
- যদি আপনি prompt1 দ্বারা তৈরি অ্যাপটি নিয়ে খুব বেশি খুঁতখুঁতে না হন, তাহলে এর পরিবর্তে আপনি প্রম্পটটিকে নিখুঁত করে, কোডটি ফেলে দিয়ে, এবং পরিবর্তিত কোড দিয়ে আবার শুরু করতে পারেন (prompt 1 v1, prompt1 v2, prompt1 v3, ..)।
আপনি অবশ্যই এই দুটি পদ্ধতিকে একত্রিত করতে পারেন।
মোবাইল কার্যকারিতা
আপনি যে গেমটি তৈরি করছেন তার উপর নির্ভর করে, ব্যবহারকারীর সাথে আপনার কিছু ইন্টারঅ্যাকশনের প্রয়োজন হতে পারে। এই ইন্টারঅ্যাকশনের জন্য কি কীবোর্ডের প্রয়োজন আছে? নাকি শুধু স্ক্রিনে ট্যাপ করেই (যেমন, মোবাইল দিয়ে) এটি ব্যবহার করা যাবে? প্রম্পটে এই বিষয়টি স্পষ্টভাবে উল্লেখ করতে ভুলবেন না। আপনাকে আপনার কীবোর্ডে কিছু বাটন তৈরি করতে হতে পারে (আমার টেট্রিস 3D উদাহরণটি দেখুন)। মোবাইল সামঞ্জস্যের জন্য ডানজিমোজি ঝামেলাও দেখুন।
জাভাস্ক্রিপ্ট ত্রুটি / স্ক্রিনশট সরাসরি জেমিনিতে জানান।
যেহেতু জেমিনি আপনার p5js-এর সাথে করা কার্যকলাপ দেখতে পায় না, তাই যেকোনো জাভাস্ক্রিপ্ট ত্রুটি জেমিনিতে পেস্ট করতে ভুলবেন না। মনে রাখবেন যে জেমিনি মাল্টিমোডাল, তাই যদি আপনার UI-তে কোনো পরিবর্তন থাকে (যেমন শিরোনাম ছোট করা বা স্কোর কমানো), তাহলে আপনি গেমটির স্ক্রিনশটও সংযুক্ত করতে পারেন! কোডিং ফিডব্যাকের এই অভিজ্ঞতা আগে কখনও এত মজার ছিল না!
৭. অভিনন্দন!
🎉 কোডল্যাবটি সম্পন্ন করার জন্য অভিনন্দন।
আমরা দেখেছি জেমিনি দিয়ে গেম তৈরি করা কতটা সহজ, এবং কীভাবে ফায়ারবেস আপনার গেম সংরক্ষণ ও অন্যদের সাথে শেয়ার করার জন্য একটি সহজ হোস্টিং সমাধান প্রদান করে।
আমরা যা আলোচনা করেছি
- জেমিনি ২.৫ এর মাধ্যমে একটি গেম তৈরি করুন।
- ফায়ারবেসে স্থাপন করুন
এবার এটা নিয়ে বড়াই করার পালা! আপনি কেন আপনার সর্বশেষ গেমটি ( your-project.web.app ) #VibeCodeAGameWithGemini হ্যাশট্যাগটি দিয়ে লিঙ্কডইন বা টুইটারে শেয়ার করছেন না (এবং সম্ভব হলে লিঙ্কডইনে লেখককে ট্যাগও করতে পারেন)? এর মাধ্যমে আমরা জানতে পারব এই কোডল্যাবটি কতটা আকর্ষণীয়, এবং সম্ভবত এই ধরনের আরও কোডল্যাব তৈরি করতে পারব!
আমি আরও চাই!
আপনি যদি অতিরিক্ত রিসোর্স খুঁজে থাকেন, তাহলে এই গেম ও প্রম্পটগুলো দেখুন:
- এক সপ্তাহান্তে Gemini 2.5 এবং p5.js ব্যবহার করে বাচ্চাদের জন্য পাঁচটি গেম কোড করুন! এই নিবন্ধটি ৬টি উদাহরণের মাধ্যমে একটি গেম ভাইব কোডিং করার চিন্তাভাবনার প্রক্রিয়া সম্পর্কে আপনাকে নির্দেশনা দেবে।
- palladius/genai-googlecloud-scripts (গিটহাব রিপো যেখানে প্রায় ১০টি অ্যাপ - কোড এবং প্রম্পট রয়েছে): টেট্রিস, প্যাকম্যান, কানেক্ট ৪ এবং এমনকি নস্টালজিকদের জন্য একটি রোগ (Rogue) ক্লোন ! এতে এই সমস্ত গেমের প্রম্পটগুলো রয়েছে। আপনার পছন্দেরটি বেছে নিন, প্রম্পটটি নিজের মতো করে সাজিয়ে নিন এবং উপভোগ করুন!
আপনি তৈরি করতে পারেন এমন কিছু নমুনা গেম:
চূড়ান্ত খেলাটি দেখতে এইরকম হতে পারে:
- একটি 3D টেট্রিস
- একটি ভাষার খেলা
- একটি বিদ্রোহী ক্লোন
- প্যাকম্যানের একটি ক্লোন।
আবারও, ইংরেজিই একমাত্র সীমাবদ্ধতা!
|
|
|
|
|
|
🎉 কোডিং উপভোগ করুন!