1- نظرة عامة
في هذا الدرس العملي، ستنشئ تطبيق ويب "Snake & Beats"، وهي لعبة Snake قديمة تتضمّن مشغّل موسيقى مدمجًا. ستستخدم Gemini لإنشاء تطبيق React يتضمّن ملفًا واحدًا بتصميم عصري، ثم ستتحكّم في الإصدار وتنشره على Cloud Run.
الإجراءات التي ستنفذّها
- إنشاء الألعاب وتقديم الطلبات: استخدِم وضع "إنشاء" في Google AI Studio لإنشاء لعبة تعمل من طلب واحد.
- التحسين باستخدام تعليمات النظام: يمكنك "التحقّق من الأجواء" في الذكاء الاصطناعي من خلال ضبط شخصية ثابتة للتعديلات المستقبلية.
- الحفظ في GitHub: يمكنك إنشاء مستودع جديد مباشرةً من AI Studio.
- النشر على Cloud Run: يمكنك نشر لعبتك على Google Cloud Run بنقرة واحدة.
أهداف الدورة التعليمية
- كيفية استخدام "وضع الإنشاء" في Google AI Studio لإنشاء نماذج أوّلية للتطبيقات بسرعة
- كيفية استخدام "تعليمات النظام" للحفاظ على "أسلوب ترميز" متّسق أثناء التكرار
- كيفية ربط Google AI Studio بـ GitHub وCloud Run
المتطلبات
- متصفّح الويب Chrome
- حساب Gmail
- مشروع على السحابة الإلكترونية تم تفعيل الفوترة فيه
- مفتاح Gemini API
- حساب على GitHub
2. قبل البدء
- في Google Cloud Console، في صفحة اختيار المشروع، اختَر أو أنشِئ مشروعًا على Google Cloud.
- تأكَّد من تفعيل الفوترة لمشروعك على Cloud. تعرَّف على كيفية التحقّق مما إذا كانت الفوترة مفعَّلة في مشروع .
3- البناء والطلب (الأساس)
سنبدأ بإنشاء التطبيق بأكمله دفعة واحدة. سجِّل الدخول إلى Google AI Studio وتأكَّد من أنّك في واجهة "إنشاء".
- إدخال طلب الإنشاء: ألصِق الطلب التفصيلي التالي في مربّع المحادثة:
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 (أو أحدث نموذج تجريبي) لإنشاء الرموز البرمجية بأسرع ما يمكن.
- التشغيل: اضغط على إنشاء (أو اضغط على Cmd + Enter).
- المعاينة: سينشئ Gemini الرمز البرمجي ويعرض عادةً "معاينة مباشرة" على الجانب الأيسر (كما هو موضّح أدناه):
4. تحسين البحث باستخدام التعليقات التوضيحية والصور والصوت
في بعض الأحيان، يصعب وصف تغيير مرئي بالكلمات. يتيح لك "وضع التعليق التوضيحي" الرسم على معاينة تطبيقك لتوصيل فكرتك على الفور.
استخدام "وضع التعليق التوضيحي"
- تفعيل "وضع التعليق التوضيحي": في واجهة AI Studio (راجِع اللوحة الجانبية اليمنى أو شريط الأدوات السفلي في نافذة المعاينة)، اختَر أداة "التعليق التوضيحي" أو "التحسين".
- ترميز تطبيقك:
- الرسم: استخدِم أداة المربّع لرسم مستطيل حول "عداد النقاط".
- التعليق: اكتب طلبًا مرتبطًا بهذا المربّع: "اجعل هذا الخط أكبر حجمًا ورقميًا ومشوّشًا".
- رسم: استخدِم أداة السهم للإشارة إلى زرَّي "تشغيل" و"إيقاف مؤقت".
- التعليق: النوع: "تغيير هذه الرموز إلى رموز نيون متوهجة"
- التكرار: انقر على "إضافة إلى المحادثة"، ثم انقر على إرسال الطلب. سيفسّر Gemini العلامات المرئية وأوامر النص لتعديل الرمز.
- التحقّق: يمكنك مشاهدة معاينة التحديث مباشرةً. من المفترض أن تظهر ملاحظاتك المرئية الآن في الرمز.
الإدخال الصوتي (The Spoken Vibe)
في بعض الأحيان، يكون من الأسهل التعبير عن "الأجواء" شفهيًا بدلاً من كتابتها.
- الإجراء: انقر على رمز الميكروفون في شريط الإدخال (بجانب الزر +).
- قل: "مرحبًا، سرعة حركة الثعبان بطيئة جدًا. أريد أن أسرّع من حركته وأن يترك ذيله أثرًا متوهجًا".
- الإرسال: يحوّل Gemini كلامك إلى نص ويطبّق التغييرات.
5- ضبط تعليمات النظام وإعادة الإنشاء
على عكس الطلب العادي، تظل تعليمات النظام سارية طوال الجلسة بأكملها. وهي أفضل مكان لتحديد معايير الترميز أو اصطلاحات التسمية أو الشخصية المرئية المحددة التي يجب ألا تتغير.
- فتح "الإعدادات المتقدّمة": في واجهة Google AI Studio (وضع الإنشاء)، ابحث عن مربّع "تعليمات النظام". إذا لم يكن مرئيًا، انقر على "الإعدادات" (رمز الترس) أو "الإعدادات المتقدّمة" في أعلى لوحة المحادثة أو جانبها.
- إضافة تعليمات "الأجواء": الصِق التعليمات التالية في مربّع النص. يحدّد هذا الرمز شخصية "فن الأخطاء" في لعبتنا:
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 تطبيق هذه القواعد الجديدة.
- أغلِق لوحة الإعدادات.
- في حقل إدخال "الدردشة/الطلب"، اكتب: "Rebuild the application UI to strictly follow the new System Instructions."
- انقر على "تشغيل" أو "إرسال".
- ملاحظة التحديث: سيؤكّد Gemini التغيير.
6. الحفظ في GitHub
بدلاً من تنزيل الملفات والتعامل مع سطر الأوامر، سنستخدم ميزة التكامل المضمّنة في GitHub لإنشاء مستودع على الفور.
- تحديد موقع عملية الدمج: في شريط الأدوات أعلى واجهة Google AI Studio، ابحث عن رمز GitHub بين رمزي "تنزيل" و"نشر".
- ربط حسابك: انقر على الرمز. إذا كانت هذه هي المرة الأولى، سيُطلب منك منح Google AI Studio الإذن بالوصول إلى حسابك على GitHub.
- إنشاء المستودع: سيظهر مربّع حوار بعنوان "املأ المعلومات أدناه لإنشاء المستودع".
- اسم المستودع: أدخِل اسمًا، مثل "لعبة الثعبان من إنشاء الذكاء الاصطناعي باستخدام React"
- وصف المستودع: أدخِل وصف المستودع.
- مستوى العرض: اختَر "متاح للجميع" (لتتمكّن من مشاركته بسهولة) أو "خاص".
- الدفع إلى GitHub: انقر على الزر "إنشاء مستودع Git".
7. النشر على Cloud Run
بعد أن أصبح التطبيق جاهزًا وتم حفظه في GitHub، لننشره على Cloud Run.
- بدء عملية النشر: انقر على الزر المميّز أدناه. يظهر هذا الخيار في أعلى يسار صفحة "استوديو الذكاء الاصطناعي".
- اختيار مشروع: انقر على القائمة المنسدلة "اختيار مشروع على السحابة الإلكترونية" واختَر مشروعك من القائمة المنسدلة.
- تحديد المشاكل وحلّها: في حال لم تتمكّن من العثور على مشروعك في القائمة المنسدلة، انقر على "استيراد المشروع"، ثم اختَر مشروعك من لوحة "استيراد المشروع".
- التحقّق من الفوترة: بعد اختيار المشروع، يتم التحقّق من تفعيل الفوترة فيه. سيتم اجتياز عملية إثبات الملكية هذه تلقائيًا لأنّنا ربطنا حساب الفوترة بالمشروع في قسم "قبل البدء".
- النشر: انقر على الزر "نشر التطبيق" (Deploy app)، وانتظِر إلى أن يتم نشر التطبيق على Cloud Run. ملاحظة: سيتم إنشاء اسم خدمة Cloud Run تلقائيًا.
- من المفترض أن يكتمل النشر في غضون بضع دقائق، وسيصلك عنوان URL للتطبيق. عند النقر على عنوان URL، يمكنك مشاهدة تطبيق الويب الذي تم نشره مباشرةً على الإنترنت.
8. تَنظيم
لتجنُّب تحمّل رسوم في حسابك على Google Cloud مقابل الموارد المستخدَمة في هذه المشاركة، اتّبِع الخطوات التالية:
- في Google Cloud Console، انتقِل إلى صفحة إدارة الموارد.
- في قائمة المشاريع، اختَر المشروع الذي تريد حذفه، ثم انقر على "حذف".
- في مربّع الحوار، اكتب رقم تعريف المشروع، ثم انقر على "إيقاف" لحذف المشروع.
9- تهانينا
تهانينا! لقد أكملت بنجاح عملية ترميز تطبيق باستخدام AI Studio ونشرته على Cloud Run.
AI Studio هي منصة مثالية لتطوير التطبيقات واختبارها، ما يتيح للمستخدمين عرض تصاميمهم على الفور أثناء العمل.
يتيح الدمج السلس لـ AI Studio مع Cloud Run للمستخدمين نشر تطبيقاتهم بسهولة مباشرةً على Google Cloud. يمنح استخدام Cloud Run جميع المزايا المتأصّلة في بيئة بلا خادم، ما يزيل تعقيدات إدارة البنية التحتية وتكاليفها.