Vibe-code یک بازی کودکانه با Gemini و انتشار با Firebase!، Vibe-code یک بازی کودکانه با Gemini و انتشار با Firebase!، Vibe-code یک بازی کودکان با Gemini و انتشار با Firebase!، Vibe-code یک بازی کودکان با Gemini و انتشار با Firebase!

Vibe-code یک بازی کودکانه با Gemini و انتشار با Firebase!

29 دقیقه باقیمانده

Vibe-code یک بازی کودکانه با Gemini و انتشار با Firebase!

درباره این codelab

آخرین به‌روزرسانی: مه ۱۳, ۲۰۲۵

نویسنده: Riccardo Carlesso

1. مقدمه

در 25 مارس 2025، گوگل Gemini 2.5 را راه اندازی کرد . یکی از به یاد ماندنی‌ترین جنبه‌های این راه‌اندازی این بود که به همه اجازه می‌داد ویژگی «کدگذاری پیشرفته» [ ویدئو ] را امتحان کنند:

Gemini 2.5: بازی دایناسور خود را از یک خط فرمان ایجاد کنید

در این نرم‌افزار، شما با "کدینگ vibe" یک برنامه ساده برای کودکان آشنا می‌شوید که از یک دستور معمول شروع می‌شود و سپس آن را به دلخواه شخصی‌سازی می‌کنید. ما برنامه را در p5.js آزمایش خواهیم کرد. در نهایت، ما این تغییرات را به میزبانی Firebase اعمال می کنیم. دیدنی ترین چیز در مورد این، کل پشته در حال حاضر رایگان است!

چیزی که یاد خواهید گرفت

از Gemini 2.5 برای کدنویسی یک برنامه بازی استفاده کنید.
کد را در p5js.org تست کنید
چگونه درخواست / برنامه خود را تکرار و اصلاح کنیم.
نحوه میزبانی یک برنامه استاتیک در Firebase

توجه داشته باشید که این آزمایشگاه کد از کدهای تولید شده توسط هوش مصنوعی استفاده می کند. این غیر قطعی است، بنابراین این کد دارای دستورالعمل هایی است زیرا خروجی شما برای نویسنده ناشناخته است. همچنین لطفا از این کد در تولید استفاده نکنید!

اگر این کد لبه را دوست دارید، حتماً 🔥 Firebase Studio را که تجربه کدنویسی شیک و یکپارچه ای را ارائه می دهد، بررسی کنید!

2. پیش نیازها

این کد لبه در دو فاز است:

توسعه فقط وب اینجاست که بیشترین لذت را خواهید داشت و نیازی به کدنویسی نیست. برای آن، از رابط کاربری Gemini ( gemini.google.com ) و p5.js خود استفاده خواهیم کرد.
محیط کدگذاری محلی اینجاست که به کمی مهارت کدنویسی/اسکریپت نویسی به اضافه نصب و استفاده از npm / npx و یک ویرایشگر محلی مانند vscode یا IntelliJ یا هر چیز دیگری نیاز است. این بخش دوم اختیاری است و فقط در صورتی لازم است که بخواهید برنامه خود را ادامه دهید تا دوستان و خانواده شما از طریق تلفن همراه یا رایانه با آن بازی کنند.

تنها پیش نیاز فاز 1 یک مرورگر و یک کامپیوتر است (صفحه نمایش بزرگ کمک خواهد کرد). برای فاز 2 ادامه مطلب را بخوانید.

رابط کاربری Gemini

gemini.google.com یک پلت فرم عالی است که در آن می توانید تمام آخرین مدل های Gemini خود را امتحان کنید و همچنین می توانید تصاویر و ویدیوهای خود را ایجاد کنید! با ادغام‌های Google، مانند نقشه‌های گوگل و هتل‌ها/پروازها/بررسی‌ها، فوق‌العاده شارژ می‌شود که آن را به همراهی ایده‌آل برای برنامه‌ریزی تعطیلات بعدی شما تبدیل می‌کند!

نکته: اگر اهل کدنویسی هستید، بازی با AI Studio را نیز در نظر بگیرید، رابطی مشابه که در آن می‌توانید یک تعامل LLM را نمونه‌سازی کنید (مثلاً یک تصویر ایجاد کنید)، و کد پایتون را بلافاصله از صفحه دریافت کنید!

p5.js

p5.js یک کتابخانه جاوا اسکریپت رایگان و منبع باز است که کدنویسی خلاق را برای هنرمندان، طراحان، مربیان و هر کس دیگری در دسترس و فراگیر می کند. این بر اساس زبان پردازش است و فرآیند ایجاد محتوای تعاملی بصری و تعاملی را با استفاده از کد در مرورگر وب ساده می کند.

کدگذاری محلی [اختیاری]

اگر می خواهید درخواست خود را ادامه دهید، تنظیمات بیشتری لازم است:

یک ویرایشگر کد محلی ( کد ویژوال استودیو ، IntelliJ ، ..)
یک حساب git ( github / gitlab / bitbucket ) که در آن کد خود را حفظ کنید.
یک npm به صورت محلی نصب شده باشد، اگر در فضای کاربر (از طریق npx یا فناوری معادل آن) باشد، بهتر است.

علاوه بر این، بعداً یک حساب Firebase راه‌اندازی خواهیم کرد.

ما همچنین به مهارت های کدنویسی نیاز داریم، مانند:

امکان نصب پکیج npm
امکان تعامل با فایل سیستم (ایجاد پوشه و فایل)
امکان تعامل با git ( git add , git commit , git push ).

اگر چیزی در اینجا دلهره آور است، به یاد داشته باشید: LLM ها برای کمک به شما در اینجا عالی هستند. برای مثال می‌توانید از « Gemini 2.0 flash » یا مدل مشابه برای دریافت پیشنهاد استفاده کنید. اگر این هنوز خیلی سخت است، می توانید مرحله 2 را به طور کامل رد کنید. فاز 1 باید به اندازه کافی پاداش دهنده باشد.

3. بیایید اولین بازی خود را بسازیم!

gemini.google.com را باز کنید و یک مدل با قابلیت کد انتخاب کنید، به عنوان مثال 2.5. این انتخاب ممکن است بر اساس در دسترس بودن، هزینه، و تاریخ متفاوت باشد. در زمان نگارش، بهترین انتخاب این خواهد بود:

فلش Gemini 2.5 (تکرار سریعتر)
Gemini 2.5 Pro (خروجی بهتر).

اطلاعات بیشتر در مورد مدل های Gemini ما در اینجا موجود است.

اولین درخواست بازی ما

همانطور که از این ویدئو مشاهده می کنید، یک دستور اولیه می تواند به سادگی زیر باشد:

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

این را کمی سفارشی کنید:

تنظیمات قرون وسطایی / آینده نگر / سایبرپانک
پر از ایموجی یا یک ایموجی خاص؟
شما عاشق رنگ زرد یا رنگ های مختلف بنفش هستید.
شاید فرزند شما عاشق تک شاخ یا دایناسور یا پوکمون باشد.

وقتی دستور را در مرورگر خود جای‌گذاری کردید، باید تفکر Gemini را مشاهده کنید. درست است، Gemini 2.5 یک مدل تفکر است، بنابراین تعدادی کار را شروع می‌کند که می‌توانید در طول زمان تغییرات را مشاهده کنید. می‌توانید روی منوی کشویی در حال تغییر کلیک کنید تا ببینید چه اتفاقی می‌افتد، یا فقط می‌توانید منتظر نتیجه باشید:

در پایان، شما باید یک جاوا اسکریپت فعال داشته باشید.

اکنون می توانید روی دکمه کپی در بالا کلیک کنید:

تست بازی روی p5.js

حالا وقت تست بازی است!

ویرایشگر p5.js را در اینجا باز کنید: https://editor.p5js.org/
کد sketch.js موجود را انتخاب و حذف کنید.
کد خود را جایگذاری کنید

صفحه شما باید شبیه این باشد:

در نهایت می توانید دکمه PLAY را فشار دهید.

اکنون دو چیز ممکن است اتفاق بیفتد: یا کد شما کار می کند یا از کار می افتد. بیایید دستورالعمل ها را بسته به هر دو مورد دنبال کنیم:

کد شما خراب می شود
کد شما در اولین تلاش کار می کند!

بیایید در دو پاراگراف بعدی ببینیم که چگونه هر دو شرایط را مدیریت کنیم.

(مورد 1) کد من خراب می شود!

اگر با چنین خطایی مواجه شدید، به سادگی می توانید آن را کپی کرده و در Gemini قرار دهید. بگذارید او کد را برای شما درست کند!

(مورد 2) کد من کار می کند!

اگر کد شما کار می کند، باید یک بازی بصری را در انتهای سمت راست صفحه ببینید.

👏 تبریک می گویم، شما اولین بازی هوش مصنوعی خود را اجرا می کنید!

توجه: زمانی که کد را دارید، برنامه فقط در مرورگر شما کار می کند. اگر می خواهید برنامه را به خانواده و دوستان خود نشان دهید، به یک راه حل میزبانی نیاز دارید. خوشبختانه، ما یک گزینه عالی برای شما داریم! به خواندن ادامه دهید.

اکنون برای فصل بعدی آماده هستید.

تکرارهای بیشتر

اکنون زمان آن است که کد خود را در جایی ذخیره کنید، در صورت شکستن آن. در صورت تمایل می توانید یک بار تکرار کنید. به عنوان مثال، نویسنده واقعاً پرش دوبل سوپر ماریو را دوست دارد، بنابراین می توانید چیزی شبیه به این اضافه کنید:

The game is great, thanks! Please allow for my character to double jump.

شما می توانید هر چیزی را که می خواهید تغییر دهید، آسمان حد است! شاید بخواهید نام کاراکتر را برای نمرات بالاتر ذخیره کنید یا به مرور زمان سرعت را افزایش دهید تا کار سخت تر شود و غیره. زبان انگلیسی محدودیتی برای درخواست شماست!

نکته: Gemini تمایل دارد فقط تغییراتی را که باید اعمال کنید به شما ارائه می‌کند (مثلاً این تغییر برای تابع XYZ است). ممکن است بخواهید دستور را طوری تنظیم کنید که در عوض کل کد به روز شده را با چیزی شبیه به آن در اختیار شما قرار دهد

"Please give me the entire updated code, not just the changed function"

. این کار تجربه برش چسباندن را برای شما آسان تر می کند.

هشدارها

ممکن است بخواهید چت Gemini خود را نشانه گذاری کنید. شاید بخواهید نام آن را به "p5js my first game" تغییر دهید، یا پیوند ثابت Gemini را مانند " https://gemini.google.com/app/abcdef123456789 " برای بعد یادداشت کنید.

4. بیایید این کد را به صورت محلی اجرا کنیم

در این مرحله، شما باید داشته باشید:

یک پنجره باز مرورگر Gemini با مقداری کد کار.
یک پنجره مرورگر p5.js باز با یک بازی کارآمد
یک محیط کدگذاری محلی با npm نصب شده است.

این بخش سخت‌تر از نرم‌افزار کد است. برخی از تجربه های اولیه کد نویسی مورد نیاز است.

وابستگی ها را نصب کنید

اگر npm و node از دست داده‌اید، بهترین گزینه این است که npm از طریق مدیر نسخه‌ای مانند nvm نصب کنید. دستورالعمل های نصب سیستم عامل خود را دنبال کنید.

ما همچنین فرض می کنیم که از یک 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 روی 3 فایل زیر public/ کنید:

README.md ← در اینجا می‌توانید پیوند دائمی چت Gemini را قرار دهید و در اینجا صفحه فرود برنامه را در زمان آمدن آن قرار دهید.
PROMPT.md ← در اینجا ممکن است بخواهید تمام دستورات خود را که با یک پاراگراف H2 از هم جدا شده اند اضافه کنید. اگر می خواهید توضیح دهید که چرا یک اعلان خاص داده اید، می توانید درخواست خود را در 3 بکتیک ( مثال ) قرار دهید.
** public/index.html **← کد HTML خود را اینجا کپی کنید
** public/sketch.js ** ← کد JS خود را اینجا کپی کنید
** public/style.css ** ← کد CSS خود را اینجا کپی کنید

پوشه عمومی ممکن است دارایی های اضافی مانند PNG سفارشی را میزبانی کند.

5. راه اندازی و استقرار در Firebase

راه اندازی Firebase (فقط برای اولین بار)

مطمئن شوید که 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 را فراخوانی کنید. اگر مشکلی دارید، اسناد عمومی را دنبال کنید.

مقداردهی اولیه Firebase

در این قسمت میزبانی Firebase را راه اندازی می کنیم. این یک جریان بسیار ساده است، اما ممکن است مدتی طول بکشد تا بار اول با آن آشنا شوید.

مطمئن شوید که در دایرکتوری مستقیماً بالای دایرکتوری public/ که حاوی فایل های شما است هستید. فهرست ( ls -al یا dir ) باید چیزی شبیه به این را نشان دهد:

$ ls 
PROMPT.md
README.md
public/

[مرحله 1] در کنسول، تایپ کنید: firebase init

با نشانگرها به سمت «Hosting: ..» بروید و SPACE را تایپ کنید و سپس ENTER را وارد کنید . (چرا؟ از آنجایی که این چند گزینه ای است، باید هم انتخاب کنید و هم به صفحه بعدی بروید)
[مرحله 2] اکنون می توانید یک پروژه موجود (گزینه 1) را انتخاب کنید یا یک پروژه جدید ایجاد کنید (گزینه 2):

توجه: اگر یک پروژه Cloud موجود دارید، ممکن است پروژه Firebase نباشد. پروژه های Firebase زیرمجموعه ای از پروژه های GCP هستند. برای ساختن پروژه Firebase که (گزینه 3) است، به کار بیشتری نیاز دارید.
اگر تصمیم ندارید، از «ایجاد یک پروژه جدید» استفاده کنید و نامی مانند «p5js-YOURNAME-YOURAPP» (به عنوان مثال، «p5js-riccardo-tetris») اضافه کنید.

[مرحله 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
ENTER را فشار دهید.

[مرحله 4] ? What do you want to use as your public directory? (public)
ENTER را فشار دهید ( public/ عمدی را تنظیم کردیم)

[مرحله 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
ENTER را فشار دهید (خیر)

[مرحله 6] ? Set up automatic builds and deploys with GitHub? No
ENTER - NO را فشار دهید

[مرحله 7] ? File public/index.html already exists. Overwrite? (y/N)
ENTER (خیر) را فشار دهید.
هشدار ممکن است مستعد خطا باشد. اگر آن را بازنویسی کنید، index.html جدید با p5js ناسازگار خواهد بود!

اگر همه چیز خوب است، باید این را ببینید:

این اقدامات باید چند فایل ایجاد می کردند:

.firebaserc
.gitignore
firebase.json
public/404.html

به طور خاص، .firebaserc باید شناسه پروژه شما را داشته باشد که می توانید به صورت برنامه ریزی شده با این شناسه بکشید: cat .firebaserc | jq .projects.default -r

هشدار: index.html را بررسی کنید. اگر بیش از 16 خط باشد و/یا کلمه firebase در آن باشد، به اشتباه فایل‌های p5js را بازنویسی کرده‌اید. مشکلی نیست، فقط یادتان باشد که index.html قدیمی را از git یا از ویرایشگر p5js برگردانید.

تست محلی

برای تشدید تاخیر حلقه بازخورد، ممکن است بخواهید ابتدا چیزها را به صورت محلی امتحان کنید.

برای انجام این کار، می توانید مجموعه قدرتمند CLI از تیم Firebase را امتحان کنید. به عنوان مثال:

$ firebase emulators:start

باید یک وب سرور در پورت 5000 ( http://127.0.0.1:5000/ ) راه اندازی کند تا بتوانید قبل از فشار دادن به صورت محلی تست کنید.

در Firebase مستقر شوید

حالا نوبت به دستور نهایی می رسد:

$ 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

این باید URL میزبانی را به شما بدهد. آن را امتحان کنید!

اگر استقرار موفقیت آمیز بود ، اما برخی از صفحه های خالی یا استقرار شکسته را مشاهده کردید، می توانید چند کار را انجام دهید:

"ابزار توسعه دهندگان" مرورگر خود را باز کنید و خطا را پیدا کنید و از Gemini بخواهید که به شما در رفع آن کمک کند، با یک اعلان مانند این:

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 > میزبان محلی > deploy to cloud run > برنامه آزمایشی در مرورگر است (بازسازی را بزنید).
از git برای ورژن اعلان و کد استفاده کنید. ممکن است بخواهید بتوانید به دستور N و کد N برگردید. مخصوصاً شما می‌خواهید که هر sketch.js را که فشار می‌دهید، git commit کنید، زیرا ممکن است باگ‌ها در آنجا کشف نشده در کمین باشند.

توجه داشته باشید که برخی از بازی ها با صفحه کلید به خوبی کار می کنند اما با ماوس یا ضربه زدن روی تلفن همراه خوب کار نمی کنند. این یک لحظه عالی برای بهبود کد است.

6. نکات پیشنهادی

چند نکته از ایجاد چند بازی در حال حاضر.

نسخه درخواستی شما

احتمالاً اشتباهاتی را در اعلان اصلی خود پیدا خواهید کرد. داشتن نسخه git آن. در اینجا چند مسیر کد وجود دارد:

اگر آنچه را که می بینید دوست دارید و می خواهید با اعلان های فرعی بعدی با جمینی ها تکرار کنید، ممکن است جالب باشد که همه آنها را در جایی دنبال کنید (اعلام 1،2،3 - 3-شات مثال1 - مثال2 ).
اگر در مورد برنامه ایجاد شده توسط prompt1 ارزشمند نیستید، در عوض، ممکن است بخواهید دستور را کامل کنید، کد را دور بریزید و با کد اصلاح شده مجدداً راه اندازی کنید (prompt 1 v1, prompt1 v2, prompt1, v3, ..)

البته می توانید این 2 رویکرد را با هم ترکیب کنید.

قابلیت M obile

بسته به بازی ای که ایجاد می کنید، ممکن است نیاز به تعامل با کاربر داشته باشید. آیا این تعامل به صفحه کلید نیاز دارد؟ یا فقط با ضربه زدن روی صفحه (مثلاً با موبایل) می توان از آن استفاده کرد؟ اطمینان حاصل کنید که در این مورد در اعلان صریح است. ممکن است مجبور شوید چند دکمه روی صفحه کلید خود ایجاد کنید (به مثال Tetris 3D من مراجعه کنید). همچنین برای سازگاری با موبایل، dungemoji hassle را ببینید.

بازخورد خطاهای جاوا اسکریپت / تصاویر به طور مستقیم بر روی Gemini

از آنجایی که Gemini نمی تواند تعامل شما با p5js را ببیند، مطمئن شوید که خطاهای جاوا اسکریپت را روی Gemini قرار دهید. توجه داشته باشید که Gemini چند وجهی است، بنابراین اگر تغییراتی در رابط کاربری دارید (مانند کوچکتر کردن عنوان یا پایین آوردن امتیاز) می توانید اسکرین شات های بازی را نیز ضمیمه کنید! نگاه بازخورد برنامه نویسی هرگز اینقدر سرگرم کننده نبوده است!

7. تبریک می گویم!

🎉 بابت تکمیل کدلاب تبریک می گویم.

ما دیدیم که ساختن یک بازی با Gemini چقدر آسان است، و چگونه Firebase یک راه حل میزبانی آسان برای تداوم و اشتراک گذاری بازی شما با دیگران ارائه می دهد.

آنچه را پوشش داده ایم

ایجاد یک بازی از طریق Gemini 2.5.
در Firebase مستقر شوید

اکنون وقت آن است که درباره آن 👥 لاف بزنیم! چرا آخرین بازی خود ( your-project.web.app ) را در لینکدین یا توییتر با هشتگ #VibeCodeAGameWithGemini به اشتراک نمی گذارید (و شاید نویسنده را در لینکدین تگ کنید)؟ این به ما این امکان را می دهد که بدانیم این کد لبه چقدر جذاب است و امکان نوشتن بیشتر از این نوع وجود دارد!

من بیشتر می خواهم!

اگر به دنبال منابع اضافی هستید، این بازی‌ها و درخواست‌ها را بررسی کنید:

کد پنج بازی بچه با Gemini 2.5 و p5.js در یک آخر هفته! این مقاله با 6 مثال شما را در فرآیند فکری کدنویسی یک بازی راهنمایی می کند.
palladius/genai-googlecloud-scripts (repo github با 10 برنامه - کد و درخواست): Tetris، Pacman، Connect 4 و حتی یک کلون Rogue برای نوستالژیک ها! این شامل دستورات همه این بازی ها است. مورد علاقه خود را بگیرید، درخواست را تطبیق دهید، و حال و هوای خود را به دست آورید!

اگر کاری که امروز انجام داده‌اید تلاش زیادی به نظر می‌رسد، می‌توانید 🔥 Firebase Studio را نیز امتحان کنید که در آن ایده > prompt > code > app loop همگی در یک پنجره مرورگر وجود دارد.

چند بازی نمونه که می توانید بسازید:

بازی نهایی ممکن است به این صورت باشد:

یک تتریس سه بعدی
یک بازی زبان
یک کلون سرکش
یک کلون پکمن

باز هم، انگلیسی محدودیت است!

🎉 کد نویسی مبارک!

گزارش اشتباه