۱. مرور کلی
در این آزمایشگاه کد، شما یک برنامه وب "Snake & Beats" خواهید ساخت، یک بازی قدیمی Snake با یک پخش کننده موسیقی یکپارچه. شما از Gemini برای تولید یک برنامه React تک فایلی با ظاهری نئونی استفاده خواهید کرد، سپس آن را کنترل نسخه کرده و در Cloud Run مستقر خواهید کرد.
کاری که انجام خواهید داد
- ساخت و اعلان : از حالت «ساخت» استودیوی هوش مصنوعی گوگل برای تولید یک بازی کاربردی از یک اعلان واحد استفاده کنید.
- با دستورالعملهای سیستم اصلاح کنید : با تنظیم یک شخصیت ماندگار برای ویرایشهای آینده، هوش مصنوعی خود را «بررسی ارتعاش» کنید.
- ذخیره در گیتهاب : یک مخزن جدید را مستقیماً از AI Studio بوتاسترپ کنید.
- ارسال به Cloud Run : بازی خود را با یک کلیک به Google Cloud Run ارسال کنید.
آنچه یاد خواهید گرفت
- نحوه استفاده از حالت ساخت (Build Mode) در Google AI Studio برای نمونهسازی سریع برنامهها.
- نحوه استفاده از دستورالعملهای سیستمی برای حفظ «حس و حال کدنویسی» ثابت در طول تکرار.
- نحوه اتصال Google AI Studio به GitHub و Cloud Run.
آنچه نیاز دارید
- مرورگر وب کروم
- یک حساب جیمیل
- یک پروژه ابری با قابلیت پرداخت صورتحساب
- یک کلید API جمینی
- یک حساب کاربری گیتهاب
۲. قبل از شروع
- در کنسول گوگل کلود ، در صفحه انتخاب پروژه، یک پروژه گوگل کلود را انتخاب یا ایجاد کنید.
- مطمئن شوید که صورتحساب برای پروژه ابری شما فعال است. یاد بگیرید که چگونه بررسی کنید که آیا صورتحساب در یک پروژه فعال است یا خیر .
۳. ساخت و راهاندازی (هسته)
ما قصد داریم با ساخت کل برنامه به صورت یکجا شروع کنیم. به 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 (یا آخرین مدل پیشنمایش) برای سریعترین تولید کد انتخاب شده است.
- اجرا : روی Build کلیک کنید (یا Cmd + Enter را فشار دهید).
- پیشنمایش : Gemini کد را تولید میکند و معمولاً یک پیشنمایش زنده در سمت راست (مطابق شکل زیر) ارائه میدهد:
۴. با حاشیهنویسی، تصاویر و صدا، متن را اصلاح کنید
گاهی اوقات، توصیف یک تغییر بصری با کلمات دشوار است. حالت حاشیهنویسی به شما امکان میدهد تا با استفاده از پیشنمایش برنامه، فوراً دیدگاه خود را بیان کنید.
استفاده از حالت حاشیهنویسی
- فعال کردن حالت حاشیهنویسی : در رابط کاربری AI Studio (پنل سمت چپ یا نوار ابزار پایین پنجره پیشنمایش را بررسی کنید)، ابزار حاشیهنویسی یا اصلاح را انتخاب کنید.
- برنامه خود را علامت گذاری کنید :
- رسم : با استفاده از ابزار جعبه، یک مستطیل دور شمارنده امتیاز رسم کنید.
- نظر : یک پیام ضمیمه شده به آن کادر تایپ کنید: «این فونت را بزرگتر، دیجیتالی و دارای اشکال کن.»
- طرح : از ابزار فلش برای اشاره به دکمههای پخش/مکث استفاده کنید.
- نظر : تایپ کنید: "اینها را به آیکونهای نئون درخشان تغییر دهید."
- تکرار : روی «افزودن به چت» کلیک کنید و سپس روی «ارسال اعلان» کلیک کنید. جمینی علائم بصری و دستورات متنی شما را برای بهروزرسانی کد تفسیر میکند.
- تأیید : پیشنمایش بهروزرسانی را بهصورت زنده تماشا کنید. بازخورد بصری شما اکنون باید در کد منعکس شود!
ورودی صوتی (حس گفتاری)
بعضی وقتها گفتن «حس و حال» راحتتر از نوشتن آن است.
- اقدام : روی نماد میکروفون در نوار ورودی (کنار دکمه +) کلیک کنید.
- بگویید: «هی، انیمیشن مار خیلی کند است. سرعتش را زیاد کنید و کاری کنید که دمش رد درخشانی از خود به جا بگذارد.»
- ارسال: جمینی گفتار شما را به متن تبدیل میکند و تغییرات را اعمال میکند.
۵. تنظیم دستورالعملهای سیستم و بازسازی
برخلاف یک اعلان معمولی، دستورالعمل سیستم در کل جلسه ادامه مییابد. این بهترین مکان برای تعریف استانداردهای کدنویسی، قراردادهای نامگذاری یا یک شخصیت بصری خاص است که نباید تغییر کند.
- تنظیمات پیشرفته را باز کنید : در رابط کاربری Google AI Studio (حالت ساخت)، کادر دستورالعملهای سیستم را پیدا کنید. اگر قابل مشاهده نیست، روی تنظیمات (نماد چرخدنده) یا تنظیمات پیشرفته در بالا یا کنار پنل چت کلیک کنید.
- دستورالعمل "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.
- ایجاد تغییر : تغییر دستورالعمل سیستم به طور خودکار کد را بازنویسی نمیکند. شما باید به Gemini بگویید که این قوانین جدید را اعمال کند.
- پنل تنظیمات را ببندید.
- در ورودی چت/پیام، تایپ کنید: «رابط کاربری برنامه را طوری بازسازی کنید که دقیقاً از دستورالعملهای جدید سیستم پیروی کند.»
- روی اجرا/ارسال کلیک کنید.
- به روزرسانی را مشاهده کنید : جوزا این تغییر را تأیید خواهد کرد.
۶. ذخیره در گیتهاب
به جای دانلود فایلها و کلنجار رفتن با خط فرمان، از یکپارچهسازی داخلی گیتهاب برای راهاندازی فوری یک مخزن استفاده خواهیم کرد.
- محل ادغام را پیدا کنید : در نوار ابزار بالای رابط کاربری Google AI Studio، به دنبال آیکون GitHub که بین آیکونهای Download و Deploy قرار دارد، بگردید.
- حساب کاربری خود را متصل کنید : روی نماد کلیک کنید. اگر این اولین بار است که این کار را انجام میدهید، از شما خواسته میشود که به Google AI Studio اجازه دسترسی به حساب GitHub خود را بدهید.
- ایجاد مخزن : یک کادر محاورهای با عنوان «اطلاعات زیر را برای ایجاد مخزن خود پر کنید» ظاهر میشود.
- نام مخزن : یک نام وارد کنید، مثلاً «بازی مار تولید شده توسط هوش مصنوعی با React».
- توضیحات مخزن : توضیحات مخزن را وارد کنید.
- قابلیت مشاهده : عمومی (تا بتوانید به راحتی آن را به اشتراک بگذارید) یا خصوصی را انتخاب کنید.
- ارسال به گیتهاب : روی دکمهی «ایجاد مخزن گیت» کلیک کنید.
۷. استقرار در Cloud Run
حالا که برنامه آماده و در GitHub ذخیره شده است، بیایید آن را در Cloud Run مستقر کنیم.
- شروع استقرار : روی دکمهای که در زیر مشخص شده است کلیک کنید. این دکمه در گوشه سمت راست بالای صفحه AI Studio قرار دارد.
- انتخاب پروژه : روی منوی کشویی «انتخاب یک پروژه ابری» کلیک کنید و پروژه خود را از منوی کشویی انتخاب کنید.
- عیبیابی : در صورتی که نمیتوانید پروژه خود را در منوی کشویی پیدا کنید، روی «وارد کردن پروژه» کلیک کنید و پروژه خود را از پنجره «وارد کردن پروژه» انتخاب کنید.
- تأیید صورتحساب : پس از انتخاب پروژه، فعال بودن صورتحساب برای آن تأیید میشود. این تأیید به طور خودکار انجام میشود زیرا ما حساب صورتحساب را در بخش «قبل از شروع» به پروژه متصل کردهایم.
- استقرار : روی دکمهی استقرار برنامه کلیک کنید و منتظر بمانید تا برنامه روی Cloud Run مستقر شود. توجه: نام سرویس Cloud Run به طور خودکار تولید میشود.
- استقرار باید ظرف چند دقیقه تکمیل شود و شما URL برنامه را دریافت خواهید کرد. با کلیک بر روی URL، میتوانید برنامه وب مستقر شده خود را به صورت زنده در اینترنت مشاهده کنید!
۸. تمیز کردن
برای جلوگیری از تحمیل هزینه به حساب Google Cloud خود برای منابع استفاده شده در این پست، این مراحل را دنبال کنید:
- در کنسول گوگل کلود، به صفحه مدیریت منابع بروید.
- در لیست پروژهها، پروژهای را که میخواهید حذف کنید انتخاب کنید و سپس روی حذف کلیک کنید.
- در کادر محاورهای، شناسه پروژه را تایپ کنید و سپس برای حذف پروژه، روی خاموش کردن کلیک کنید.
۹. تبریک
تبریک! شما با موفقیت کدنویسی ویبره یک برنامه را در AI Studio به پایان رساندید و آن را در Cloud Run مستقر کردید!!
AI Studio یک پلتفرم ایدهآل و کاربردی برای توسعه و آزمایش برنامهها است و به کاربران این امکان را میدهد که بلافاصله طرحهای خود را در عمل تجسم کنند.
ادغام یکپارچهی AI Studio با Cloud Run به کاربران این امکان را میدهد که برنامههای خود را بدون دردسر مستقیماً روی Google Cloud مستقر کنند. استفاده از Cloud Run تمام مزایای ذاتی یک محیط بدون سرور را ارائه میدهد و پیچیدگیها و سربارهای مدیریت زیرساخت را از بین میبرد.