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.
- إدخال طلب الإنشاء: ألصِق الطلب التفصيلي التالي في مربّع المحادثة:
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 الرمز البرمجي ويعرض عادةً "معاينة مباشرة" على الجانب الأيسر (كما هو موضّح أدناه):
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. تهانينا
تهانينا! لقد أكملت بنجاح عملية إنشاء تطبيق باستخدام Vibe Coding في AI Studio ونشرته على Cloud Run.
AI Studio هي منصة مثالية لتطوير التطبيقات واختبارها، ما يتيح للمستخدمين تصور تصاميمهم على الفور أثناء العمل.
يتيح التكامل السلس بين AI Studio وCloud Run للمستخدمين نشر تطبيقاتهم بسهولة مباشرةً على Google Cloud. يمنح استخدام Cloud Run جميع المزايا المتأصلة في بيئة بلا خادم، ما يزيل تعقيدات إدارة البنية التحتية وتكاليفها.