تخطيط التطبيقات وإنشاؤها باستخدام Gemini CLI Conductor

1- مقدمة

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية التخطيط لتطبيقات البرامج وإنشائها باستخدام إضافة Gemini CLI Conductor. ستبدأ بإنشاء تطبيق "جديد" بالكامل من الصفر. بعد ذلك، ستتعامل معه كمشروع "موجود" وتكرّر العمل عليه لإضافة المصادقة والتخزين.

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

  • تثبيت Gemini CLI وإضافة Conductor
  • إنشاء تطبيق ويب "Picker Wheel" من الصفر باستخدام إمكانات التخطيط والتنفيذ في Conductor
  • إضافة التخصيص إلى التطبيق من خلال إضافة المصادقة والتخزين باستخدام Firebase

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

  • كيفية استخدام إضافة Conductor للتخطيط لتطبيق "جديد" وتنفيذه ومراجعته
  • كيفية استخدام إضافة Conductor لإضافة ميزات إلى تطبيق "موجود"

المتطلبات

  • متصفّح ويب، مثل Chrome
  • مشروع على Google Cloud تم تفعيل الفوترة له
  • Node.js تثبيت (الإصدار 18 أو أحدث هو الإصدار المقترَح)
  • محرّر رموز برمجية محلي، مثل Visual Studio Code

2. قبل البدء

إنشاء مشروع على Google Cloud

  1. في Google Cloud Console، في صفحة اختيار المشروع، اختَر مشروعًا على السحابة الإلكترونية أو أنشِئ مشروعًا على السحابة الإلكترونية.
  2. تأكَّد من تفعيل الفوترة لمشروعك على السحابة الإلكترونية. تعرّف على كيفية التحقّق مما إذا كانت الفوترة مفعّلة في مشروع.

بدء Cloud Shell

Cloud Shell هي بيئة سطر أوامر تعمل في Google Cloud وتأتي محمّلة مسبقًا بالأدوات اللازمة.

  1. انقر على تفعيل Cloud Shell في أعلى Google Cloud Console.
  2. بعد الاتصال بـ Cloud Shell، تحقَّق من عملية المصادقة:
    gcloud auth list
  3. أكِّد أنّ مشروعك مضبوط:
    gcloud config get project
  4. إذا لم يكن مشروعك مضبوطًا على النحو المتوقّع، اضبطه:
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

تفعيل واجهات برمجة التطبيقات

فعِّل Firebase Management API في مشروعك على Google Cloud.

gcloud services enable firebase.googleapis.com

إضافة Firebase إلى مشروعك

تأتي Firebase CLI مثبّتة مسبقًا في Cloud Shell. من Cloud Shell، سجِّل الدخول باستخدام حساب Google نفسه الذي يمنحك إمكانية الوصول إلى مشروع Google Cloud. إذا كنت تعمل محليًا، ثبِّت Firebase CLI باتّباع الـ تعليمات.

firebase login

نفِّذ الأمر التالي لإضافة Firebase إلى مشروعك على Google Cloud:

firebase projects:addfirebase

إذا كانت هذه هي المرة الأولى التي تنفِّذ فيها firebase CLI، أجِب عن أي أسئلة تُطرح عليك.

الخروج من Cloud Shell

يمكنك إغلاق نافذة Cloud Shell. في القسم التالي، سنضبط بيئتك المحلية.

4. تثبيت Gemini CLI وConductor محليًا

في هذه الخطوة، ستُعدّ بيئة التطوير المحلية من خلال تثبيت Gemini CLI وإضافة Conductor باستخدام محرّر الرموز البرمجية ونافذة الأوامر المحلية.

تثبيت Gemini CLI

  1. ثبِّت أحدث إصدار من Gemini CLI على مستوى العالم باستخدام npm:
    npm install -g @google/gemini-cli
  2. أعِد تشغيل نافذة الأوامر ليتم إضافة gemini إلى PATH.
  3. تأكَّد من أنّ عملية التثبيت قد ثبّتت أحدث إصدار:
    gemini --version
  4. أنشِئ دليل مشروع جديدًا وانتقِل إليه: في قسم لاحق، سننشئ مشروعًا في دليل picker-wheel. أنشِئ هذا الدليل الآن وانتقِل إليه:
    mkdir picker-wheel
cd picker-wheel
  5. المصادقة:
    • ابدأ استخدام Gemini CLI.
      gemini
    • عندما يُطلب منك "هل تثق بالملفات في هذا المجلد؟"، اختَر Trust folder (picker-wheel) (المجلد الموثوق به (picker-wheel))
    • عندما يُطلب منك "كيف تريد المصادقة لهذا المشروع؟"، اختَر Vertex AI. اتّبِع دليل المصادقة للحصول على مفتاح Google Cloud API واضبط متغيّر البيئة GOOGLE_API_KEY. ننصحك بالاطّلاع على مستويات الاستخدام المختلفة usage tiers والحدود القصوى المقابلة لطلبات واجهة برمجة التطبيقات rate limits.
  6. الخروج من Gemini CLI: اكتب /quit من نافذة الأوامر لإنهاء جلستك المباشرة على Gemini CLI قبل المتابعة.

تثبيت إضافة Conductor

Conductor هي إضافة مفتوحة المصدر من تصميم Google لـ Gemini CLI، وتتيح ميزات التطوير المستند إلى السياق، مثل التخطيط وتتبُّع التنفيذ.

  1. تثبيت الإضافة:
    gemini extensions install https://github.com/gemini-cli-extensions/conductor
  2. تأكَّد من أنّ عملية التثبيت:
    • ابدأ استخدام Gemini CLI. 
      gemini
    • اكتب /conductor وسيظهر لك قائمة بالأوامر، مثل setup وnewTrack وimplement وما إلى ذلك.
  3. الخروج من Gemini CLI: اكتب /quit من نافذة الأوامر لإنهاء جلستك المباشرة على Gemini CLI قبل المتابعة.

4. التطوير الجديد: Picker Wheel

بعد إعداد بيئتك، ستنشئ تطبيقًا جديدًا من الصفر. ستنشئ "Picker Wheel"، وهو تطبيق ويب خفيف الوزن يدور لاختيار خيار عشوائي.

إعداد سياق المنتج

  1. تأكَّد من أنّك في picker-wheel الدليل الذي أنشأته في القسم السابق:
    pwd
  2. ابدأ استخدام Gemini CLI: ابدأ جلسة جديدة على Gemini CLI من دليل مشروعك.
    gemini
  3. إعداد Conductor: نفِّذ أمر الإعداد لإنشاء بنية المشروع وإعداد بيئة Conductor.
    /conductor:setup
  4. اتّبِع التعليمات التفاعلية: لن تتطابق التعليمات التفاعلية التي تظهر لك مع هذه الأمثلة تمامًا. ركِّز على تصميم أبسط للتعرّف على سير عمل Conductor.
    • هدف المنتج: تطبيق ويب يعرض عجلة قابلة للتدوير قابلة للضبط لاختيار عنصر عشوائي من قائمة.
      • الجمهور المستهدف ← عامة الجمهور
      • التفاعل ← النقر/النقر للتدوير
      • التخصيص ← أساسي
      • النظام الأساسي ← سطح المكتب أولاً
    • الإرشادات المتعلقة بالمنتجات: يتم إنشاؤها تلقائيًا.
    • حزمة التكنولوجيا:
      • اللغات ← TypeScript/JavaScript: مثالية للويب الكامل
      • الواجهة الأمامية ← Vue.js: واجهات ويب سهلة الاستخدام
      • الواجهة الخلفية ← Express.js: واجهة خلفية سريعة لـ Node
      • قاعدة البيانات ← لا شيء: لا حاجة إلى قاعدة بيانات
    • سير العمل: عادي
    • المتطلبات المتعلقة بالمنتجات:
      • قصص المستخدمين ← خيارات قابلة للتخصيص، عرض واضح للفائز
      • الميزات الرئيسية ← قائمة خيارات قابلة للتعديل، ألوان عشوائية
      • القيود ← من جهة العميل فقط، أداء عالٍ
      • غير وظيفية ← تغطية عالية للاختبار، TypeScript وVue.js، تصميم سريع الاستجابة
    ستنشئ Conductor ملفات السياق في دليل conductor/.

إنشاء مسار جديد

يمثّل "المسار" في Conductor ميزة أو وحدة عمل.

  1. ابدأ مسارًا جديدًا باستخدام /conductor:newTrack. قد تقترح Conductor مسارًا أوليًا استنادًا إلى سياق المنتج. بدلاً من ذلك، يمكنك اقتراح مسارك الخاص أو أن تطلب من Conductor اقتراح مسار.
  2. راجِع الخطة التي تم إنشاؤها: ستنشئ Conductor ملف index.md وspec.md وplan.md داخل conductor/tracks/{track-id}/. ننصحك بقراءتها. إذا كان كل شيء يبدو على ما يُرام، ستطلب منك Conductor حفظ ملفات الإعداد الأولية وتنفيذها.

تنفيذ المسار

  1. بدء التنفيذ:
    /conductor:implement
    ستعمل Conductor الآن على الخطة، وتكتب الرموز البرمجية للمشروع.
  2. التحقّق من التطبيق: خلال مرحلة التنفيذ، ستطلب منك Conductor اختبار التطبيق يدويًا. على سبيل المثال، ستطلب منك فتح خادم الويب المحلي ومعاينة التطبيق في متصفّحك والتحقّق من التغييرات. عند اكتمال التنفيذ، من المفترض أن ترى عجلة اختيار عملية.تطبيق Picker Wheel
  3. مراجعة التنفيذ: كخطوة أخيرة، يمكنك أن تطلب من Conductor مراجعة التنفيذ. يجب أن تراجع Conductor رمز المصدر وتزامن مستندات المشروع وأرشفة المسار.
    /conductor:review

5. التكرار في مشروع موجود: إضافة التخصيص

ستنتقل الآن إلى تطوير مشروع موجود. ستعمل على تحسين تطبيق الويب Picker Wheel من القسم السابق ليتمكّن المستخدمون الذين سجّلوا الدخول من حفظ إعدادات Picker Wheel واستعادتها.

إنشاء مسار تخصيص

  1. في مثال "المشروع الموجود" التالي، سنستخدم Firebase للمصادقة والتخزين. ثبِّت إضافة Gemini CLI Firebase ليتمكّن Conductor من استخدامها.
    gemini extensions install https://github.com/firebase/agent-skills
  2. ابدأ استخدام Gemini CLI: ابدأ جلسة جديدة على Gemini CLI من دليل مشروعك.
    gemini
  3. ابدأ مسارًا جديدًا: ابدأ مسارًا جديدًا.
    /conductor:newTrack "I want users to be able to log in to their accounts and
save their picker wheel configurations."
  4. اتّبِع التعليمات التفاعلية: لن تتطابق التعليمات التفاعلية التي تظهر لك مع هذه الأمثلة تمامًا. ركِّز على تصميم أبسط للتعرّف على سير عمل Conductor.
    • هدف المسار:
      • مزوّد المصادقة ← Firebase Auth
      • الإعدادات المحفوظة ← خيارات العجلة
      • تخزين البيانات ← Firestore
      • واجهة مستخدم تسجيل الدخول إلى Firestore ← تراكب مشروط
    ستنشئ Conductor ملفات السياق لمسار جديد داخل conductor/tracks/{track-id}.
  5. راجِع الخطة التي تم إنشاؤها: ننصحك بقراءة index.md وspec.md وplan.md داخل conductor/tracks/{track-id}/.
  6. التنفيذ: إذا كان كل شيء يبدو على ما يُرام، يمكنك بدء التنفيذ.
    /conductor:implement
  7. التحقّق: أعِد تحميل تطبيقك. من المفترض أن يظهر لك تطبيق محدّث. &quot;عجلة الاختيار&quot; مع خيار &quot;تسجيل الدخول&quot;

في ما يلي الرمز الذهبي لنموذج تنفيذ. عليك تقديم مشروع Firebase الخاص بك في .firebaserc وإعدادات Firebase في firebase.ts لبدء تطبيقك بشكل صحيح.

6. تَنظيم

لتجنُّب الرسوم المستمرة على حسابك على Google Cloud، احذف الموارد التي تم إنشاؤها خلال هذا الدرس التطبيقي حول الترميز.

حذف مشروع Firebase (ومشروع Google Cloud)

أسهل طريقة للتنظيف هي حذف المشروع بالكامل.

  1. في Google Cloud Console، اختَر المشروع الذي أنشأته.
  2. انقر على حذف.

بدلاً من ذلك، إذا أردت الاحتفاظ بالمشروع ولكن حذف الموارد:

  1. حذف قاعدة بيانات Firestore: انتقِل إلى Firebase Console > Firestore واحذف قاعدة البيانات.
  2. حذف المصادقة: انتقِل إلى Firebase Console > المصادقةطريقة تسجيل الدخول، وأوقِف Google.

7. تهانينا

تهانينا! لقد استخدمت بنجاح إضافة Gemini CLI Conductor لإنشاء تطبيق ويب من الصفر ثم تكرار العمل عليه باستخدام ميزات معقّدة، مثل المصادقة ودمج قاعدة البيانات.

الخطوات التالية