۱. مقدمه
در ۲۵ مارس ۲۰۲۵، گوگل نسخه ۲.۵ نرمافزار Gemini را عرضه کرد . یکی از به یاد ماندنیترین جنبههای این عرضه این بود که به همه اجازه میداد ویژگی «کدنویسی پیشرفته» را امتحان کنند [ ویدئو ]:
Gemini 2.5: بازی دایناسور خودتان را با یک دستور تکخطی بسازید
در این آزمایشگاه کد، شما در مورد "کدنویسی vibe" برای یک برنامه ساده کودکان، با شروع از یک دستور رایج و سپس سفارشیسازی آن به دلخواه خود، یاد خواهید گرفت. ما برنامه را روی p5.js آزمایش خواهیم کرد. در نهایت، این تغییرات را به Firebase Hosting منتقل خواهیم کرد. نکته جالب در مورد این، این است که کل این مجموعه در حال حاضر رایگان است!
آنچه یاد خواهید گرفت
- از Gemini 2.5 برای کدنویسی ویبره یک برنامه بازی استفاده کنید.
- کد را در p5js.org تست کنید
- چگونه اعلان/برنامه خود را تکرار و اصلاح کنید.
- نحوه میزبانی یک برنامه استاتیک در Firebase
توجه داشته باشید که این آزمایشگاه کد از کد تولید شده توسط هوش مصنوعی استفاده میکند؛ این کد قطعی نیست، بنابراین این آزمایشگاه کد شامل دستورالعملهایی است زیرا خروجی شما برای نویسنده ناشناخته است. همچنین لطفاً از این کد در محیط تولید استفاده نکنید!
۲. پیشنیازها
این آزمایشگاه کد در دو مرحله است:
- توسعه فقط تحت وب. این جایی است که شما بیشترین لذت را خواهید برد و هیچ توانایی کدنویسی لازم نیست. برای آن، ما از رابط کاربری Gemini ( gemini.google.com ) و p5.js استفاده خواهیم کرد.
- محیط کدنویسی محلی . اینجا جایی است که کمی مهارت کدنویسی/اسکریپتنویسی، به علاوه نصب و استفاده از
npm/npxو یک ویرایشگر محلی مانندvscodeیا IntelliJ یا هر چیز دیگری مورد نیاز است. این بخش دوم اختیاری است و فقط در صورتی مورد نیاز است که بخواهید برنامه خود را برای استفاده دوستان و خانوادهتان از طریق موبایل یا رایانههایشان، دائمی کنید.
تنها پیشنیاز برای مرحله ۱، یک مرورگر و یک کامپیوتر است (یک صفحه نمایش بزرگ کمک خواهد کرد). برای مرحله ۲، ادامه مطلب را بخوانید.
رابط کاربری جمینی
gemini.google.com یک پلتفرم عالی است که میتوانید در آن تمام مدلهای جدید Gemini خود را امتحان کنید و همچنین میتوانید تصاویر و ویدیوهای خودتان را بسازید! این پلتفرم با ادغامهای فوقالعاده با گوگل، مانند نقشههای گوگل و هتلها/پروازها/نظرات، به همراهی ایدهآل برای برنامهریزی تعطیلات بعدی شما تبدیل میشود!
نکته: اگر به کدنویسی علاقه دارید، کار با AI Studio را نیز در نظر بگیرید، رابط کاربری مشابهی که در آن میتوانید یک تعامل LLM را نمونهسازی کنید (مثلاً یک تصویر ایجاد کنید) و کد پایتون را مستقیماً از صفحه دریافت کنید!
p5.js
p5.js یک کتابخانه جاوا اسکریپت رایگان و متنباز است که کدنویسی خلاقانه را برای هنرمندان، طراحان، مربیان و هر کس دیگری در دسترس و فراگیر میکند. این کتابخانه مبتنی بر زبان Processing است و فرآیند ایجاد محتوای بصری و تعاملی تعاملی را با استفاده از کد در مرورگر وب ساده میکند.
کدگذاری محلی [اختیاری]
اگر میخواهید برنامهتان را دائمی کنید، تنظیمات بیشتری لازم است:
- یک ویرایشگر کد محلی ( Visual Studio code ، IntelliJ ، ..)
- یک حساب کاربری گیت ( github / gitlab / bitbucket ) که کد شما در آن ذخیره میشود.
- یک
npmکه به صورت محلی نصب شده باشد، بهتر است در فضای کاربر (از طریقnpxیا فناوری معادل آن) باشد.
علاوه بر این، بعداً یک حساب Firebase راهاندازی خواهیم کرد.
ما همچنین به مهارت کدنویسی نیاز داریم، مانند:
- امکان نصب پکیج
npm - قابلیت تعامل با سیستم فایل (ایجاد پوشه و فایل)
- توانایی تعامل با
git(git add،git commit،git push).
اگر چیزی در اینجا دلهرهآور است، به یاد داشته باشید: LLM ها برای کمک به شما در اینجا عالی هستند. به عنوان مثال، میتوانید از مدل " Gemini 2.0 flash " یا مدل معادل آن برای دریافت پیشنهادات استفاده کنید. اگر این هنوز خیلی سخت است، میتوانید مرحله ۲ را به طور کامل رد کنید. مرحله ۱ باید به اندازه کافی پاداش دهنده باشد.
۳. بیایید اولین بازی خود را بسازیم!
gemini.google.com را باز کنید و یک مدل با قابلیت کدنویسی، مثلاً ۲.۵، را انتخاب کنید. این انتخاب ممکن است بسته به در دسترس بودن، هزینه و تاریخ متفاوت باشد. در زمان نگارش این مطلب، بهترین انتخاب این است:
- فلش جمینی ۲.۵ (نسخه سریعتر)
- جمینی ۲.۵ پرو (خروجی بهتر).
اطلاعات بیشتر در مورد مدلهای 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 ) را فشار دهید.
حالا دو اتفاق ممکن است بیفتد: یا کد شما کار میکند یا با شکست مواجه میشود. بیایید بسته به هر دو حالت، دستورالعملها را دنبال کنیم:
- کد شما با خطا مواجه میشود
- کد شما در اولین تلاش کار میکند!
بیایید در دو پاراگراف بعدی ببینیم که چگونه هر دو شرایط را مدیریت کنیم.
(مورد ۱) کد من با خطا مواجه میشود!
اگر با خطایی مانند این مواجه شدید، میتوانید به سادگی آن را کپی کرده و در Gemini پیست کنید. بگذارید او کد را برای شما اصلاح کند!
(مورد ۲) کد من کار میکند!
اگر کد شما کار کند، باید یک بازی تصویری در انتهای سمت راست صفحه ببینید.
👏 تبریک میگویم، شما اولین بازی هوش مصنوعی خود را اجرا میکنید!
توجه: تا زمانی که کد را دارید، برنامه فقط در مرورگر شما کار میکند. اگر میخواهید برنامه را به خانواده و دوستانتان نشان دهید، به یک راهکار میزبانی نیاز دارید. خوشبختانه، ما گزینه بسیار خوبی برای شما داریم! به خواندن ادامه دهید.
حالا شما برای فصل بعدی آماده هستید.
تکرارهای بیشتر
حالا وقت آن است که کد خود را جایی ذخیره کنید، برای مواقعی که ممکن است کد خراب شود. اگر بخواهید، میتوانید یک بار آن را تکرار کنید. برای مثال، نویسنده واقعاً پرش دوتایی سوپر ماریو را دوست دارد، بنابراین میتوانید چیزی شبیه به این اضافه کنید:
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"
این کار تجربه برش و چسباندن را برای شما آسانتر میکند.
هشدارها
شاید بخواهید چت جمینی خود را نشانهگذاری کنید. شاید بخواهید نام آن را به «p5js my first game» تغییر دهید، یا پیوند دائمی جمینی، مانند « https://gemini.google.com/app/abcdef123456789 » را برای بعداً یادداشت کنید.
۴. بیایید این کد را به صورت محلی اجرا کنیم
در این مرحله، شما باید موارد زیر را داشته باشید:
- یک پنجره مرورگر Gemini باز با مقداری کد کاربردی.
- یک پنجره مرورگر p5.js باز با یک بازی در حال اجرا
- یک محیط کدنویسی محلی که
npmروی آن نصب شده باشد.
این بخش سختتر codelab است. کمی تجربه کدنویسی مقدماتی لازم است.
نصب وابستگیها
اگر npm و node ندارید، بهترین راه نصب npm از طریق یک مدیر نسخه مانند nvm است. دستورالعملهای نصب را برای سیستم عامل خود دنبال کنید.
ما همچنین فرض میکنیم که شما از یک IDE کدنویسی استفاده میکنید. ما در تصاویر و مثالهای خود از Visual Studio code استفاده خواهیم کرد، اما هر چیزی کار میکند.
محیط محلی را تنظیم کنید
این لحظهای است که میتوانید ساختار فایل خودتان را ایجاد کنید.
یک اسکریپت راهاندازی برای اهداف نمایشی ارائه شده است. میتوانید این کار را به صورت دستی با ایجاد پوشهها و فایلها انجام دهید:
# 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← اینجا میتوانید لینک ثابت چت Gemini را قرار دهید و اینجا میتوانید صفحه فرود برنامه را که قرار است چه زمانی منتشر شود، قرار دهید. -
PROMPT.md← در اینجا میتوانید تمام درخواستهای خود را که با یک پاراگراف H2 از هم جدا شدهاند، اضافه کنید. اگر میخواهید توضیح دهید که چرا یک درخواست خاص را ارائه دادهاید، میتوانید درخواست خود را در ۳ علامت بکتیک ( مثال ) قرار دهید. - **
public/index.html**← کد HTML خود را اینجا کپی کنید - **
public/sketch.js**← کد جاوا اسکریپت خود را اینجا کپی کنید - **
public/style.css**← کد CSS خود را اینجا کپی کنید
پوشه عمومی ممکن است شامل فایلهای اضافی مانند یک PNG سفارشی باشد.
۵. راهاندازی و استقرار در فایربیس
راهاندازی فایربیس (فقط برای اولین بار)
مطمئن شوید که 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 را راهاندازی خواهیم کرد. این یک روند بسیار ساده است، اما ممکن است برای اولین بار کمی طول بکشد تا با آن آشنا شوید.
مطمئن شوید که در دایرکتوری درست بالای دایرکتوری public/ هستید که فایلهای شما در آن قرار دارند. لیست ( ls -al یا dir ) باید چیزی شبیه به این را نشان دهد:
$ ls PROMPT.md README.md public/
- [مرحله ۱] در کنسول، تایپ کنید:
firebase init
- با مکاننما به پایین بروید تا به «میزبانی: ..» برسید و فاصله (SPACE ) و سپس ENTER را تایپ کنید. (چرا؟ از آنجایی که این یک گزینه چندگزینهای است، باید هم انتخاب کنید و هم به صفحه بعد بروید)
- [مرحله ۲] اکنون میتوانید یک پروژه موجود را انتخاب کنید (گزینه ۱) یا یک پروژه جدید ایجاد کنید (گزینه ۲):
- توجه: اگر از قبل یک پروژه ابری دارید، ممکن است یک پروژه فایربیس نباشد. پروژههای فایربیس زیرمجموعهای از پروژههای GCP هستند. برای تبدیل آنها به پروژه فایربیس به کار بیشتری نیاز دارید، که (گزینه ۳) برای همین کار است.
- اگر هنوز تصمیم نگرفتهاید، از گزینهی «ایجاد یک پروژهی جدید» استفاده کنید و نامی مانند «p5js-YOURNAME-YOURAPP» (مثلاً «p5js-riccardo-tetris») اضافه کنید.
- [مرحله ۳]
What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris) - کلید ENTER را فشار دهید.
- [مرحله ۴]
? What do you want to use as your public directory? (public) - ENTER را فشار دهید (ما
public/را عمداً تنظیم کردهایم)
- [مرحله ۵]
? Configure as a single-page app (rewrite all urls to /index.html)? No - ENTER را فشار دهید (خیر)
- [مرحله ۶]
? Set up automatic builds and deploys with GitHub? No - ENTER را فشار دهید - خیر
- [مرحله ۷]
? 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 را بررسی کنید. اگر بیش از ۱۶ خط است و/یا کلمه firebase در آن وجود دارد، به اشتباه فایلهای p5js را بازنویسی کردهاید. مشکلی نیست، فقط به یاد داشته باشید که فایل index.html قدیمی را از گیت یا ویرایشگر p5js برگردانید.
آزمایش محلی
برای کاهش تأخیر حلقه بازخورد، شاید بهتر باشد ابتدا موارد را به صورت محلی امتحان کنید.
برای انجام این کار، میتوانید مجموعه قدرتمند CLI از تیم Firebase را امتحان کنید. برای مثال:
$ firebase emulators:start
باید یک وبسرور روی پورت ۵۰۰۰ ( 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
این باید آدرس میزبانی وب را به شما بدهد. آن را امتحان کنید!
اگر استقرار موفقیتآمیز باشد ، اما صفحه خالی یا استقرار ناقصی را مشاهده کنید، میتوانید چند کار انجام دهید:
- «ابزارهای توسعهدهندگان» مرورگر خود را باز کنید و خطا را پیدا کنید و از 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 > local host > deploy to cloud run > test app on browser (دکمه refresh را بزنید) است.
- از گیت برای نسخهبندی هم برای اعلان و هم برای کد استفاده کنید. شاید بخواهید بتوانید به اعلان N و کد N برگردید. به خصوص باید هر فایل
sketch.jsکه ارسال میکنید را با گیت کامیت کنید، زیرا ممکن است اشکالات در آنجا پنهان شده باشند و شناسایی نشده باشند.
توجه داشته باشید که بعضی از بازیها با کیبورد خوب کار میکنند اما با ماوس یا لمس صفحه گوشی خوب کار نمیکنند. الان زمان بسیار خوبی برای بهبود کد است.
۶. نکات انگیزشی
چند نکته از تجربه ساخت بازیهای زیاد.
نسخهبندی درخواست شما
احتمالاً در اعلان اصلی خود اشتباهاتی پیدا خواهید کرد. اگر نسخه git آن را داشته باشید، چند مسیر کد در اینجا وجود دارد:
- اگر از آنچه میبینید خوشتان آمده و میخواهید با Gemini با sub prompt های بعدی تکرار کنید، شاید جالب باشد که همه آنها را در جایی (prompt 1،2،3 - 3-shot example1 - example2 ) ردیابی کنید.
- اگر در مورد برنامه ایجاد شده توسط prompt1 حساس نیستید، در عوض، ممکن است بخواهید prompt را کامل کنید، کد را دور بیندازید و با کد اصلاح شده (prompt 1 v1، prompt1 v2، prompt1، v3، ..) مجدداً راه اندازی کنید.
البته میتوانید این دو رویکرد را با هم ترکیب کنید.
قابلیت حرکت M
بسته به بازیای که میسازید، ممکن است به تعامل با کاربر نیاز داشته باشید. آیا این تعامل به صفحهکلید نیاز دارد؟ یا میتوان فقط با ضربه زدن روی صفحه (مثلاً با موبایل) از آن استفاده کرد؟ حتماً در سوال مربوطه به طور واضح در مورد این موضوع توضیح دهید. ممکن است لازم باشد چند دکمه روی صفحهکلید خود ایجاد کنید (به مثال Tetris 3D من مراجعه کنید). همچنین برای سازگاری با موبایل به dungemoji hassle مراجعه کنید.
بازخورد خطاهای جاوا اسکریپت / تصاویر مستقیماً روی Gemini
از آنجایی که Gemini نمیتواند تعامل شما با p5js را ببیند، حتماً هرگونه خطای جاوا اسکریپت را در Gemini پیست کنید. توجه داشته باشید که Gemini چندوجهی است، بنابراین اگر تغییراتی در رابط کاربری دارید (مانند کوچکتر کردن عنوان یا کاهش امتیاز) میتوانید اسکرینشاتهایی از بازی را نیز پیوست کنید! ظاهر بازخورد کدنویسی هرگز تا این حد سرگرمکننده نبوده است!
۷. تبریک میگویم!
🎉 تبریک میگویم که آزمایشگاه کد را تمام کردید.
ما دیدهایم که ساخت یک بازی با Gemini چقدر آسان است، و چگونه Firebase یک راهحل میزبانی آسان برای ذخیره و اشتراکگذاری بازی شما با دیگران ارائه میدهد.
آنچه ما پوشش دادهایم
- با استفاده از Gemini 2.5 یک بازی بسازید.
- استقرار در فایربیس
حالا وقتشه که 👥 بهش افتخار کنیم! چرا آخرین بازیات ( your-project.web.app ) رو با هشتگ #VibeCodeAGameWithGemini توی لینکدین یا توییتر به اشتراک نمیذاری (و شاید نویسندهش رو توی لینکدین تگ کنی)؟ این کار به ما اجازه میده بفهمیم این کد چقدر جذابه و شاید بتونیم از این نوع کدها بیشتر بنویسیم!
من بیشتر میخواهم!
اگر به دنبال منابع بیشتری هستید، این بازیها و دستورالعملها را بررسی کنید:
- کدنویسی پنج بازی کودکانه با Gemini 2.5 و p5.js در یک آخر هفته! این مقاله با 6 مثال، شما را در فرآیند فکری کدنویسی vibe یک بازی راهنمایی میکند.
- palladius/genai-googlecloud-scripts (مخزن گیتهاب با حدود ۱۰ برنامه - کد و دستورالعمل): تتریس، پکمن، کانکت ۴ و حتی یک کپی از روگ برای علاقهمندان به نوستالژی! این شامل دستورالعملهای همه این بازیها است. مورد علاقه خود را بردارید، دستورالعمل را تغییر دهید و از آن لذت ببرید!
چند نمونه بازی که میتوانید بسازید:
بازی فینال شاید به این شکل باشد:
- تتریس سه بعدی
- یک بازی زبانی
- یک کلون سرکش
- یک کلون از پکمن.
باز هم، انگلیسی حد و مرز است!
|
|
|
|
|
|
🎉 کدنویسی خوبی داشته باشید!