إطلاق لعبة فيديو مستندة إلى الويب باستخدام الذكاء الاصطناعي

1. مقدمة

نظرة عامة

أين تبدأ عملية الإنشاء باستخدام الذكاء الاصطناعي اليوم؟ بالنسبة إلى معظمنا، تبدأ بطلب بحث بسيط أو نموذج أوّلي. يوفّر Google AI Studio وضع الإنشاء الفعّال (يُشار إليه غالبًا باسم "الترميز السريع") الذي يتيح لك تصميم تطبيقات الويب الكاملة واختبارها وإنشاؤها باستخدام ميزة إنشاء الرموز البرمجية المستندة إلى نماذج Gemini.

في هذا الدرس التطبيقي، ستنشئ لعبة فيديو مستندة إلى الويب بالتناوب بين اللاعبين باستخدام قاعدة بيانات Firestore مع تتبُّع مصدر الحدث (للحفاظ على إجراءات اللعبة كسلسلة من الأحداث حتى يتمكّن اللاعبون من الاطّلاع على سجلّ المباريات والرجوع إلى الأدوار السابقة) ومصادقة Firebase لتسجيلات دخول المستخدمين. سيضبط وكيل AI Studio جميع خدمات الخلفية ويكتب الرمز البرمجي للواجهة الأمامية ومنطق تتبُّع مصدر الحدث ورمز التفاعل مع قاعدة البيانات. بعد تحسين التطبيق، ستنشره مباشرةً على Cloud Run بنقرة واحدة.

النسخة النهائية من موقع ويب للملف الشخصي

الإجراءات التي ستنفذّها

  • اطلب من Google AI Studio إنشاء نموذج أوّلي لتطبيق ويب متعدد اللاعبين للعبة فيديو بالتناوب بين اللاعبين.
  • نفِّذ ميزة دعم رمز لعبة قصير قابل للمشاركة أو رابط انضمام للسماح للأصدقاء بالاتصال بالمباراة نفسها.
  • نفِّذ ميزة تخزين قاعدة بيانات Firestore باستخدام نمط تتبُّع مصدر الحدث لتتبُّع سجلّات المباريات والسماح بالرجوع إلى وقت سابق في اللعبة (التراجع عن الأدوار أو إعادة تشغيلها).
  • اضبط عملية التكامل مع Firebase وفعِّلها لتوفير قاعدة بيانات Firestore وإعداد ميزة "تسجيل الدخول باستخدام حساب Google".
  • اختبِر التطبيق في وضع الحماية التفاعلي للمعاينة.
  • انشر التطبيق على Cloud Run مباشرةً من واجهة مستخدم Google AI Studio.

أهداف الدورة التعليمية

  • كيفية استخدام وضع الإنشاء في Google AI Studio لإنشاء نموذج أوّلي بسرعة لخدمة ألعاب كاملة باستخدام اللغة الطبيعية
  • كيفية تنفيذ نمط معماري لتتبُّع مصدر الحدث باستخدام Cloud Firestore لتخزين سجلّ اللعبة
  • كيفية ضبط عمليات التكامل مع Firebase Firestore و"مصادقة Firebase" تلقائيًا في Google AI Studio
  • كيفية نشر تطبيق AI Studio كحاوية بلا خادم على Cloud Run
  • كيفية فحص سجلّات قاعدة البيانات وحالة الأمان داخل "وحدة تحكّم Firebase"

2. إعداد المشروع

قبل تشغيل AI Studio، تحقَّق من حالة حسابك والمتطلبات الأساسية.

حساب Google ومعلومات الطبقة

  1. إذا لم يكن لديك حساب حاليًا، يمكنك إنشاء حساب على Google.
    • ملاحظة: استخدِم حسابًا شخصيًا على Google في هذا المختبر إن أمكن. قد تفرض حسابات المجموعة أو حسابات المؤسسة أو الحسابات التعليمية سياسات Workspace التي توقف الميزات التجريبية أو عمليات التكامل مع السحابة الإلكترونية.
  2. راجِع تفاصيل الفوترة لعمليات النشر:
    • طبقة Google Cloud Starter: تتيح نشر ما يصل إلى تطبيقَين كاملَين في منطقة محدّدة بدون أي تكلفة، بدون إنشاء حساب فوترة كامل على Google Cloud.
    • عملية النشر العادية: تتصل بمشروع على السحابة الإلكترونية حالي مدفوع على Google Cloud وتوسّع حدود التخزين وموارد وحدة المعالجة المركزية وواجهات برمجة التطبيقات.

3. إنشاء لعبة فيديو بالتناوب بين اللاعبين في وضع الإنشاء في AI Studio

لننشئ هيكل التطبيق ونطلب من مساعد الرموز البرمجية المستنِد إلى الذكاء الاصطناعي إنشاء طبقات الأمان ومنطق اللعبة وطبقات الحفاظ على البيانات المستندة إلى تتبُّع مصدر الحدث.

  1. انتقِل إلى لوحة التطبيقات في Google AI Studio وانقر على تطبيق جديد.
  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. انقر على إنشاء لبدء عملية إنشاء التطبيق.

عندما يدرك وكيل AI Studio الحاجة إلى مساحة تخزين في قاعدة البيانات وتسجيل دخول آمن للمستخدم، يبدأ تدفق الإعداد التلقائي في Firebase.

  1. بعد دقيقة واحدة تقريبًا، تظهر بطاقة تكامل تفعيل Firebase في مساحة العمل.
  2. انقر على الزر تفعيل Firebase للتأكيد وقبول بنود الخدمة.
  3. سيُجري الوكيل عملية الإعداد في الخلفية. الخيارات المتقدمة:
    • يتم توفير مثيل قاعدة بيانات Firestore.
    • يتم تفعيل "مصادقة Firebase" مع تفعيل ميزة "تسجيل الدخول باستخدام حساب Google".
    • يتم إعداد حساب خدمة (مثلاً، إنشاء src/lib/firebase.ts الذي يحتوي على بيانات اعتماد واجهة برمجة التطبيقات).
    • تتم إضافة firestore.rules الذي يحتوي على حدود الأمان التلقائية (قواعد عزل المستخدم).

4. الاختبار والتكرار

قبل تشغيل الخدمة، عليك إجراء عمليات التحقق من الصحة في المعاينة التفاعلية.

  1. افتح جزء المعاينة داخل Google AI Studio.
  2. انقر على الزر "تسجيل الدخول" لبدء عملية المصادقة في وضع الحماية باستخدام ميزة "تسجيل الدخول باستخدام حساب Google".
    • ملاحظة حول إصلاح الأخطاء: أثناء الإنشاء أو الاختبار، قد تواجه أحيانًا مشاكل في وقت التشغيل أو أخطاء في التجميع أو أخطاء في أذونات Firestore بسبب عدم تطابق قواعد الأمان. في حال حدوث ذلك، يعرض AI Studio زر إصلاح في المحادثة، ما يتيح لك أن تطلب من الوكيل تشخيص المشكلة وإصلاحها تلقائيًا.
    موقع زر "الإصلاح" في Google 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. انتظِر إلى أن يعدِّل الوكيل قاعدة الرموز البرمجية واطّلِع على متصفّح المعاينة للاطّلاع على التعديلات.

5. النشر على Cloud Run

بعد أن يصبح النموذج الأوّلي جاهزًا تمامًا، انشره كخدمة عامة على Cloud Run.

  1. في أعلى يسار Google AI Studio، انقر على الزر نشر لبدء معالج النشر.موقع زر "النشر" في Google AI Studio
  2. انقر على البدء لضبط مشروعك على Google Cloud.
    • تأكَّد من أنّ القائمة المنسدلة مشروع Google Cloud المستهدَف تطابق المشروع الذي ربطته بمساحة عملك.
    • سيُنشئ AI Studio تلقائيًا معرّف خدمة فريدًا لمثيل Cloud Run.
    • يمكنك اختياريًا تحديد بادئة عنوان URL مخصّصة لـ .ai.studio (مثلاً، your-portfolio-name.ai.studio) كجزء من إعدادات النشر.
  3. إذا كانت هذه هي المرة الأولى التي تنشر فيها وكنت تستخدم مَعلمات Google Cloud العادية، قد يُطلب منك تحديد نوع مؤسسة وتقديم تفاصيل الفوترة.
  4. انقر على نشر التطبيق.
  5. تحدث خطوات إنشاء الحاوية وتسجيل الحاوية ونشر الخدمة في الخلفية. تكتمل هذه العملية عادةً خلال دقيقتَين إلى 4 دقائق.
  6. عند اكتمال عملية النشر، انسخ عنوان URL للتطبيق الذي تم إنشاؤه وانتقِل إلى رابط التطبيق المباشر في علامة تبويب المتصفّح.
  7. اختبِر تطبيق الويب المباشر في متصفّحك.

6. الفحص في "وحدة تحكّم Firebase"

ألقِ نظرة على الخيارات المتقدمة لمعرفة كيفية تتبُّع مخططات البيانات والمستخدمين.

  1. انتقِل إلى "وحدة تحكّم Firebase".
  2. اختَر مشروعك (الذي يحمل التصنيف AI Studio أو رقم تعريف المشروع الذي ربطته يدويًا).
  3. في لوحة التنقّل على يمين الصفحة، انقر على الإنشاء > قاعدة بيانات Firestore:
    • اطّلِع على مجموعات قاعدة البيانات والمستندات التي أنشأها تطبيقك.
    • تأكَّد من أنّ كل مستند يحتوي على معرّف مالك يطابق بيانات اعتماد مصادقة المستخدم النشط.
  4. انقر على علامة التبويب الأمان في لوحة Firestore لمراجعة توجيهات الأمان التي تم إنشاؤها تلقائيًا والتي تحدّ من أذونات القراءة والكتابة لمالكي المستندات الذين تم التحقّق منهم.
  5. انتقِل إلى الأمان > المصادقة للاطّلاع على قائمة ببيانات اعتماد المستخدم النشط التي تمت تعبئتها أثناء اختبارات تسجيل الدخول.

7. تنظيف

لتجنُّب أي رسوم فوترة غير متوقّعة أو لتنظيف موارد مساحة العمل:

  1. في Google AI Studio، انتقِل إلى صفحة التطبيقات.
  2. ابحث عن تطبيقك في الشبكة أو القائمة.
  3. انقر على رمز المهملات لحذف حالة التطبيق وإلغاء نشر الخدمة من Cloud Run.
  4. إذا نشرت باستخدام مشروع عادي وأردت إيقاف جميع الموارد بالكامل، انتقِل إلى إعدادات المشروع في Google Cloud Console واحذف المشروع الأساسي.

8. الخاتمة

تهانينا! لقد صمّمت وطوّرت ونشرت لعبة فيديو بالتناوب بين اللاعبين مباشرةً من Google AI Studio.

انتقِل إلى هذا الرابط للحصول على شارة رحلة المنشئ المكتملة.

لمواصلة رحلتك، انتقِل إلى goo.gle/builders للمختبر التالي.

مزيد من المعلومات