بازی ویدیویی تحت وب خود را با هوش مصنوعی راه‌اندازی کنید

۱. مقدمه

نمای کلی

ساخت و ساز با هوش مصنوعی امروزه از کجا شروع می‌شود؟ برای اکثر ما، با یک پرس و جو یا نمونه اولیه ساده شروع می‌شود. Google AI Studio یک حالت ساخت قدرتمند (که اغلب به عنوان "کدنویسی vibe" شناخته می‌شود) ارائه می‌دهد که به شما امکان می‌دهد برنامه‌های وب فول استک را با استفاده از تولید کد هدایت شده توسط مدل‌های Gemini طراحی، آزمایش و بسازید.

در این آزمایشگاه کد، شما یک بازی ویدیویی نوبتی مبتنی بر وب با استفاده از پایگاه داده Firestore به همراه Event Sourcing (برای حفظ اقدامات بازی به عنوان دنباله ای از رویدادها تا بازیکنان بتوانند تاریخچه مسابقات را مشاهده کرده و به نوبت های قبلی برگردند) و Firebase Authentication برای ورود کاربران خواهید ساخت. عامل AI Studio تمام سرویس‌های backend را پیکربندی کرده و frontend، منطق event sourcing و کد تعامل پایگاه داده را می‌نویسد. پس از اتمام برنامه، آن را مستقیماً با یک کلیک در Cloud Run مستقر خواهید کرد.

نسخه نهایی یک وب‌سایت نمونه‌کار

کاری که انجام خواهید داد

  • از استودیوی هوش مصنوعی گوگل بخواهید که یک نمونه اولیه از یک اپلیکیشن وب بازی ویدیویی چند نفره نوبتی بسازد.
  • پشتیبانی از یک کد بازی کوتاه و قابل اشتراک‌گذاری یا لینک عضویت را پیاده‌سازی کنید تا دوستان بتوانند به یک مسابقه مشترک متصل شوند.
  • پیاده‌سازی فضای ذخیره‌سازی پایگاه داده Firestore با الگوی منبع‌یابی رویداد برای ردیابی تاریخچه مسابقات و امکان سفر در زمان گیم‌پلی (لغو یا پخش مجدد نوبت‌ها).
  • پیکربندی و فعال‌سازی یکپارچه‌سازی Firebase برای ایجاد پایگاه داده Firestore و راه‌اندازی احراز هویت ورود به سیستم گوگل.
  • برنامه را در محیط پیش‌نمایش تعاملی (interactive preview sandbox) آزمایش کنید.
  • برنامه را مستقیماً از رابط کاربری Google AI Studio روی Cloud Run مستقر کنید.

آنچه یاد خواهید گرفت

  • چگونه از حالت ساخت (Build mode) در Google AI Studio برای نمونه‌سازی سریع یک سرویس بازی کامل با استفاده از زبان طبیعی استفاده کنیم.
  • نحوه پیاده‌سازی الگوی معماری منبع‌یابی رویداد با استفاده از Cloud Firestore برای ذخیره تاریخچه بازی.
  • چگونه Google AI Studio به طور خودکار یکپارچه‌سازی‌های Firebase Firestore و Authentication را پیکربندی می‌کند.
  • چگونه برنامه AI Studio خود را به عنوان یک کانتینر بدون سرور در Cloud Run مستقر کنید.
  • نحوه بررسی رکوردهای پایگاه داده و وضعیت امنیتی در کنسول Firebase.

۲. راه‌اندازی پروژه

قبل از راه‌اندازی AI Studio، وضعیت حساب کاربری و پیش‌نیازهای آن را بررسی کنید.

اطلاعات حساب و سطح گوگل

  1. اگر از قبل حساب گوگل ندارید، یک حساب گوگل ایجاد کنید .
    • نکته : در صورت امکان از یک حساب گوگل شخصی برای این آزمایشگاه استفاده کنید. حساب‌های کاربری گروهی، شرکتی یا مدرسه ممکن است سیاست‌های Workspace را اعمال کنند که ویژگی‌های آزمایشی یا ادغام‌های ابری را غیرفعال می‌کند.
  2. جزئیات صورتحساب برای استقرار را بررسی کنید:
    • سطح شروع گوگل کلود : امکان انتشار حداکثر دو برنامه کامل در یک منطقه منتخب را بدون هیچ هزینه‌ای و بدون ایجاد یک حساب پرداخت کامل گوگل کلود فراهم می‌کند.
    • استقرار استاندارد : به یک پروژه پولی موجود در گوگل کلود متصل می‌شود و محدودیت‌های ذخیره‌سازی، منابع CPU و APIها را افزایش می‌دهد.

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

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

  1. به پنل برنامه‌های Google AI Studio بروید و روی New App کلیک کنید.
  2. در کادر گفتگوی سریع، توضیحات مربوط به برنامه بازی ویدیویی نوبتی خود را وارد کنید:
    Build a web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    این لینک به طور خودکار کادر درخواست را برای شما پر می‌کند.
  3. برای شروع فرآیند تولید برنامه، روی ساخت (Build) کلیک کنید.

وقتی عامل AI Studio نیاز به ذخیره‌سازی پایگاه داده و ورود امن کاربر را تشخیص دهد، جریان پیکربندی خودکار Firebase را آغاز می‌کند.

  1. بعد از حدود یک دقیقه، یک کارت ادغام برای فعال کردن فایربیس در فضای کاری ظاهر می‌شود.
  2. برای تأیید و پذیرش شرایط خدمات، روی دکمه‌ی فعال‌سازی فایربیس کلیک کنید.
  3. عامل، تنظیمات پس‌زمینه را اجرا خواهد کرد. در پشت صحنه:
    • یک نمونه پایگاه داده Firestore ارائه شده است.
    • احراز هویت فایربیس با فعال بودن ورود به سیستم گوگل فعال است.
    • پیکربندی حساب کاربری سرویس ایجاد می‌شود (مثلاً ایجاد src/lib/firebase.ts حاوی اعتبارنامه‌های API).
    • یک firestore.rules شامل مرزهای امنیتی پیش‌فرض (قوانین جداسازی کاربر) اضافه شده است.

۴. آزمایش و تکرار

قبل از راه‌اندازی سرویس به صورت زنده، بررسی‌های اعتبارسنجی را در پیش‌نمایش تعاملی اجرا کنید.

  1. پنجره پیش‌نمایش را در داخل Google AI Studio باز کنید.
  2. برای فعال کردن احراز هویت ورود به سیستم گوگل در محیط سندباکس، روی دکمه ورود کلیک کنید.
    • نکته‌ای در مورد رفع خطاها : در طول تولید یا آزمایش، ممکن است گاهی اوقات با مشکلات زمان اجرا، خطاهای کامپایل یا عدم موفقیت مجوزهای Firestore به دلیل عدم تنظیم قوانین امنیتی مواجه شوید. در این صورت، AI Studio یک دکمه رفع مشکل را در چت نمایش می‌دهد و به شما امکان می‌دهد از اپراتور بخواهید که به طور خودکار مشکل را تشخیص داده و برطرف کند.
    محل دکمه رفع مشکل در استودیوی هوش مصنوعی گوگل
  3. پس از ورود به سیستم، یک مسابقه بازی جدید را شروع کنید، کد کوتاه بازی تولید شده یا لینک اشتراک‌گذاری را کپی کنید و تأیید کنید که می‌توانید از آن برای پیوستن به مسابقه استفاده کنید.
  4. چندین حرکت انجام دهید و تأیید کنید که تاریخچه مسابقه به درستی نمایش داده می‌شود.
  5. سعی کنید به نوبت‌های قبلی مسابقه برگردید. مطمئن شوید که به‌روزرسانی‌های صفحه یا وضعیت، آن نقطه گذشته در تاریخچه گیم‌پلی را منعکس می‌کنند و مطمئن شوید که می‌توانید آن وضعیت را بازیابی یا به عقب برگردانید.
  6. اگر می‌خواهید ظاهر یا رفتار را تغییر دهید، از طریق پنجره چت به اپراتور دستور دهید. برای مثال:
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. منتظر بمانید تا عامل، کدبیس را به‌روزرسانی کند و مرورگر پیش‌نمایش را برای مشاهده به‌روزرسانی‌ها بررسی کنید.

۵. استقرار در Cloud Run

وقتی نمونه اولیه شما کاملاً کاربردی شد، آن را به عنوان یک سرویس عمومی در Cloud Run مستقر کنید.

  1. در گوشه سمت راست بالای Google AI Studio، روی دکمه Publish کلیک کنید تا ویزارد استقرار (deployment wizard) آغاز شود. مکان دکمه انتشار در استودیوی هوش مصنوعی گوگل
  2. برای پیکربندی پروژه Google Cloud خود، روی «شروع به کار» کلیک کنید.
    • تأیید کنید که منوی کشویی target Google Cloud Project با پروژه‌ای که به فضای کاری خود مرتبط کرده‌اید، مطابقت دارد.
    • AI Studio به طور خودکار یک شناسه سرویس منحصر به فرد برای نمونه Cloud Run ایجاد می‌کند.
    • به صورت اختیاری، می‌توانید یک پیشوند URL سفارشی .ai.studio (مثلاً your-portfolio-name.ai.studio ) را به عنوان بخشی از پیکربندی استقرار خود مشخص کنید.
  3. اگر این اولین بار است که از پارامترهای استاندارد Google Cloud استفاده می‌کنید، ممکن است از شما خواسته شود نوع سازمان را مشخص کنید و جزئیات صورتحساب را ارائه دهید.
  4. روی انتشار برنامه کلیک کنید.
  5. مراحل ساخت کانتینر، ثبت کانتینر و استقرار سرویس در پس‌زمینه اتفاق می‌افتد. این فرآیند معمولاً در عرض ۲ تا ۴ دقیقه تکمیل می‌شود.
  6. پس از اتمام استقرار، آدرس اینترنتی برنامه تولید شده را کپی کرده و لینک برنامه زنده را در یک برگه مرورگر مشاهده کنید.
  7. برنامه وب زنده را در مرورگر خود آزمایش کنید!

۶. در کنسول فایربیس بررسی کنید

نگاهی به زیربنا بیندازید تا ببینید چگونه طرحواره‌های داده و کاربران ردیابی می‌شوند.

  1. به کنسول فایربیس بروید.
  2. پروژه خود را انتخاب کنید (که دارای برچسب AI Studio یا شناسه پروژه‌ای است که به صورت دستی محدود کرده‌اید).
  3. در پنل ناوبری سمت چپ، گزینه Build > Firestore Database را انتخاب کنید:
    • مجموعه‌ها و اسناد پایگاه داده ایجاد شده توسط برنامه خود را مشاهده کنید.
    • تأیید کنید که هر سند دارای شناسه مالکی است که با اعتبارنامه‌های احراز هویت کاربر فعال مطابقت دارد.
  4. برای بررسی دستورالعمل‌های امنیتی خودکار تولید شده که مجوزهای خواندن و نوشتن را به مالکان تأیید شده سند محدود می‌کنند، برگه امنیت (Security) را در پنل Firestore انتخاب کنید.
  5. برای مشاهده‌ی فهرست اطلاعات کاربری فعال ثبت‌شده در طول آزمایش‌های ورود به سیستم، به بخش امنیت > احراز هویت بروید.

۷. تمیز کردن

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

  1. در Google AI Studio، به صفحه برنامه‌ها بروید.
  2. برنامه خود را در شبکه یا لیست پیدا کنید.
  3. برای حذف وضعیت برنامه و لغو انتشار سرویس از Cloud Run، روی نماد سطل زباله کلیک کنید.
  4. اگر با استفاده از یک پروژه استاندارد مستقر شده‌اید و می‌خواهید تمام منابع را به طور کامل خاموش کنید، به تنظیمات پروژه کنسول گوگل کلود بروید و پروژه اصلی را حذف کنید.

۸. نتیجه‌گیری

تبریک! شما یک بازی ویدیویی نوبتی را مستقیماً از استودیوی هوش مصنوعی گوگل طراحی، توسعه و مستقر کرده‌اید.

برای دریافت نشان Completed Builder Journey به این لینک مراجعه کنید!

برای ادامه سفرتان، برای آزمایشگاه بعدی به goo.gle/builders بروید.

اطلاعات بیشتر