1. مقدمة
مع ازدياد أهمية وكلاء الترميز في تطوير البرامج يوميًا، سواء كنت مهندسًا متمرسًا أو مطوّرًا جديدًا يتطلّع إلى إطلاق تطبيقك الأول، فإنّ طريقة التطوير وما يتم تطويره يتغيران بشكل أساسي. عندما تبدأ استخدام وكلاء الترميز، تبدأ عادةً بطلبات "التنفيذ المباشر"، وهي تعليمات فردية توضّح بإيجاز وباللغة البشرية ما تريده. يؤدي ذلك إلى حدوث مشاكل بسرعة:
- تحيّز إرضاء الآخرين: غالبًا ما تقبل النماذج قيودًا أو فرضيات معيبة، وتسعى إلى إكمال طلبك في أسرع وقت ممكن، ولا تتحقّق من أنّ ما تصنعه يحقّق بالفعل ما كنت تقصده.
- فجوة التحقّق: لا يتحقّق العملاء عادةً من عملهم للتأكّد من أنّه يعمل، حتى عندما يكتبون اختبارات. محاولة استخدام المواقع الإلكترونية في متصفّح مباشر يؤدي إلى ظهور أخطاء مخفية وتصميمات غير متوافقة وعناصر تحكّم لا يمكن الوصول إليها.
- الديون الفنية: بسبب طريقة تدريب النماذج وعملها، يميل الرمز الذي تكتبه إلى الأنماط القديمة التي عفا عليها الزمن، ما يزيد من الديون الفنية التي تتطلب المزيد من الرموز المميزة والمزيد من الوقت والجهد من البشر والآلات لإدارتها. ويمكن أن يؤثر الدين التقني سلبًا في تجربة المستخدم.
خطة اللعبة المكوّنة من 4 خطوات
للمساعدة في توجيه وكلاء الترميز لإنتاج رمز أفضل يتوافق بشكل أكبر مع متطلباتك، ننصحك باتّباع دورة حياة تطوير المنتج المكوّنة من 4 خطوات:
- التخطيط والتصميم: يمكنك التعاون مع الوكيل في كتابة مستندات متطلبات المنتج (PRD)، ثم الطلب منه إنشاء نماذج أولية وتصميم مستندات متطلبات المنتج في المتصفح قبل بدء تنفيذ الإنتاج، ثم إنشاء مسودات لمستندات تصميم معمارية (مواصفات) من مستندات متطلبات المنتج والتصاميم قبل بدء الترميز.
- الترميز والإنشاء: اطلب من الوكلاء إنشاء رموز برمجية استنادًا إلى مستندات متطلبات المنتج والتصاميم والمواصفات بدلاً من طلبات بدون أمثلة، واطلب منهم تشغيل وكيل آخر للتحقّق من عملهم.
- التكرار: كرِّر الخطوتَين 1 و2 لكل ميزة جديدة تريد إضافتها.
- النشر: الشحن إلى مرحلة الإنتاج
يوضّح لك هذا المستند كيفية استخدام وكلاء الذكاء الاصطناعي كشركاء تعاون نشطين مع ممارسات تهدف إلى مساعدتك في تقليل الديون الفنية وتحسين جودة الرمز البرمجي الناتج. تستخدم Antigravity مع إرشادات الويب الحديث وأدوات مطوّري البرامج للوكلاء لإنشاء لعبة كلمات عادية وتحسينها باستخدام إمكانات الذكاء الاصطناعي. بعد ذلك، يمكنك نشرها على Google Cloud باستخدام Firebase لمشاركتها مع أصدقائك وعائلتك.
أهداف الدورة التعليمية
- كيفية التعامل مع مهام الترميز المستندة إلى الذكاء الاصطناعي باعتبارها دورات حياة مصغّرة لتطوير المنتجات
- أهمية فصل متطلبات المنتج عن مواصفات التصميم
- كيفية تنظيم سير عمل يتضمّن عدة وكلاء لإنشاء نماذج أولية مباشرةً في المتصفّح ومراجعة الرموز البرمجية
- كيفية الاستفادة من المهارات والأدوات التابعة لجهات خارجية لتحسين تجربة التطوير وتجربة المستخدم
- كيفية نشر تطبيقات الويب مباشرةً في مرحلة الإنتاج باستخدام Firebase MCP
المتطلبات الأساسية
- حساب Google شخصي ومشروع Google Cloud أو Firebase (التعليمات في إعداد المشروع)
- يجب أن تكون على دراية ببعض أساسيات HTML وCSS وJavaScript.
- متصفّح ويب، مثل Chrome
- تثبيت Node.js (يُنصح باستخدام إصدار LTS).
2. إعداد المشروع
حساب Google
إذا لم يكن لديك حساب Google شخصي، يمكنك إنشاء حساب على Google.
تسجيل الدخول إلى Google Cloud Console
سجِّل الدخول إلى Google Cloud Console باستخدام حساب Google شخصي.
تفعيل الفوترة
لإعداد حساب فوترة شخصي، انتقِل إلى خيار تفعيل الفوترة في Cloud Console.
إنشاء مشروع Firebase
- انتقِل إلى وحدة تحكّم Firebase وسجِّل الدخول باستخدام حسابك الشخصي على Google.
- انقر على إضافة مشروع (أو إنشاء مشروع).
- في معالج إنشاء المشروع:
- أدخِل اسم مشروع (مثل
wordup-web-app)، أو أعِد استخدام مشروع Google Cloud الذي أعددته أثناء إعداد المشروع.
- أدخِل اسم مشروع (مثل
- ربط حساب الفوترة
- في الشريط الجانبي لوحدة تحكّم Firebase، ابحث عن شارة الخطة في أسفل الصفحة (مكتوب عليها "Spark"). انقر على الترقية.
- اختَر خطة الدفع المسبق.
- اختَر حساب الفوترة الذي أعددته خلال خطوة إعداد المشروع.
- أكِّد اختيارك لربط حساب الفوترة بالمشروع. (توفّر خدمة "استضافة Firebase" مستوى مجانيًا سخيًا، وعادةً ما تبلغ تكلفة إكمال هذا البرنامج التعليمي 0 دولار أمريكي).
تثبيت الأدوات
- Antigravity 2.0: هي أداة الترميز الأساسية المستندة إلى الذكاء الاصطناعي المستقلّ التي تستخدمها، وهي متوافقة مع أحدث نموذج Gemini Flash لترميز سريع ومتطوّر.
- إرشادات الويب الحديث: مهارة ترميز الوكلاء لمساعدتهم في كتابة CSS وHTML وJavaScript الحديثة يمكنك تثبيت المكوّن الإضافي من خلال الإعدادات > التخصيص > الإنشاء باستخدام مكوّنات Google الإضافية > إرشادات الويب الحديث في Antigravity.
- أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء: تتيح للوكلاء التحكّم في Chrome وفحص نموذج المستند المباشر (DOM) واختبار التنسيق وتصحيح الأخطاء أثناء وقت التشغيل. ثبِّت الإضافة من خلال الإعدادات > التخصيص > الإنشاء باستخدام مكوّنات Google الإضافية > أدوات مطوّري البرامج في Chrome والإعدادات > التخصيص > إضافة خوادم MCP > أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء.
- خادم MCP في Firebase: لإعداد المشاريع بسلاسة وعمليات النشر التي تتم بطلب واحد ثبِّت من خلال الإعدادات > التخصيص > الإنشاء باستخدام مكوّنات Google الإضافية > إعدادات Firebase وAntigravity > التخصيص > إضافة خوادم MCP > Firebase.
3- البدء بخطة
عند استخدام الترميز المستند إلى الوكلاء، يميل المستخدمون إلى إرسال طلب من النوع zero-shot ("أريد إنشاء لعبة كلمات") على أمل الحصول على أفضل نتيجة. ويؤدي ذلك دائمًا تقريبًا إلى تخطّي الحالات القصوى، وتضخّم قواعد الرموز البرمجية، ودورات لا نهاية لها لإصلاح الأخطاء.
بدلاً من ذلك، تعامَل مع كل مهمة على أنّها دورة حياة مصغّرة لتطوير المنتجات. تتضمّن برامج الترميز الآلية أدوات بحث واستدلال تتيح لها العمل كشريك متعاون لمساعدتك في توضيح أفكارك قبل كتابة أي رمز برمجي. إنّ التحدث عن فكرتك غالبًا ما يساعدك في العثور على الأسئلة والإجابة عنها قبل أن تصبح مشاكل، ويُعرف ذلك في هندسة البرمجيات باسم تصحيح الأخطاء باستخدام لعبة البطّة المطاطية. يمكنك استخدام وكلاء الترميز كألعاب بطة مطاطية للتخطيط لمشاريعك وميزاتك.
أنت بصدد إنشاء لعبة كلمات بسيطة. اطلب من الوكيل مساعدتك في تصميم اللعبة التي تريدها.
I want to make a casual word guessing game. Go do deep research on those kinds
of games, then ask me questions to help me write a PRD for the game's features.
هذا هو الشكل الأساسي للطلب، ويمكنك تعديله ليناسب احتياجاتك. الأمر الأساسي هنا هو أن تطلب من الذكاء الاصطناعي إجراء بحث معمّق وطرح أسئلة عليك استنادًا إلى هذا البحث لمساعدتك في التخطيط لعملك.
ابدأ بهذا الطلب لأنّ العمل مع وكلاء الترميز يتضمّن الكثير من المراجعة. إنّ تقسيم خطة التنفيذ الكاملة إلى أجزاء أصغر ومركّزة يسهّل مراجعتها كثيرًا، ويتيح لك رصد الحالات الحدّية مبكرًا، ويمكن أن يقدّم لك معلومات خارج بيانات تدريب الوكيل، والأهم من ذلك أنّه يتيح لك أخذ المزيد من الاستراحات بين المراجعات.
- فصل "ماذا" عن "كيف": يتيح لك تحديد تجربة المستخدم ونطاق المنتج في "مستند متطلبات المنتج" الرسمي فصل ما تريد حدوثه عن كيفية تنفيذه، ما يتيح لك التركيز على جانب واحد من تطوير المنتج في كل مرة بدلاً من التركيز على كل شيء في الوقت نفسه.
- تحديد حالات الاستخدام غير الشائعة في وقت مبكر: تجبرك جلسة الأسئلة والأجوبة التفاعلية على توضيح متطلباتك قبل بدء التصميم أو التنفيذ.
- البحث النشط باستخدام الوكيل: بما أنّ تدريب الوكيل يتوقف في تاريخ معيّن وتصبح المعلومات فيه موجزة للغاية، يمكن أن يؤدي استخلاص المعلومات من البحث المباشر إلى توفير معلومات جديدة كان سيتعذّر الحصول عليها.
التمرين 1
حان دورك الآن. إعداد مشروعك وإنشاء مستند متطلبات المنتج
- أضِف تعليمات إلى ملف
AGENTS.mdلتوجيهه بحفظ الناتج فيdocs/plans/{{YYYY-MM-DD}}-{{description}}.md. - نفِّذ طلب البحث السابق، مع إجراء أي تعديلات تريدها، لإنشاء مستند متطلبات المنتج.
- [هدف إضافي] عدِّل ملف
AGENTS.mdبإضافة المهام التي ينجزها الوكيل ولا تعجبك، ثم شغِّل الطلب مرة أخرى.
4. التصميم في المتصفّح
يعتمد تصميم واجهة المستخدم الثابتة على نماذج أوّلية تبدو غالبًا مذهلة ولكنها قد لا تأخذ في الاعتبار الحالات الحدّية والقيود وتفاعلات المستخدمين الفعلية. وكما هو الحال مع الرموز البرمجية، يؤدي الطلب من وكيل الذكاء الاصطناعي "تصميم" تطبيق موقعك الإلكتروني إلى الحصول على تصاميم تتشابه مع تصميم عام (غالبًا ما يكون باللون الأرجواني).
بالنسبة إلى تطبيقات الويب، يمكنك استخدام قدرة وكيلك على التحكّم في متصفّح الويب من خلال أدوات مطوري البرامج للوكلاء لتصميم داخل المتصفّح. سواء كنت مصممًا يعمل على تحسين دقة تصاميمك، أو مبرمجًا أو مطوّرًا يتطلّع إلى تحسين واجهة المستخدم وتجربة المستخدم لمشروعك، أو كنتما تعملان معًا، فإنّ العمل في الوسيط الفعلي الذي تصمّمه يحقّق نتائج أفضل.
يتيح لك التصميم في المتصفّح أيضًا فرصة التنسيق بين وكلاء متعدّدين يعملون معًا لإنتاج ناتج واحد. الوكلاء الفرعيون هم وكلاء لديهم شخصيات وأهداف محدّدة يمكن تنسيقها لتحقيق نتائج أفضل من وكيل واحد يعمل بمفرده. في ما يتعلق بالتصميم، يمكنك أن تطلب من وكيل التصميم المرئي ووكيل تجربة المستخدم ووكيل تسهيل الاستخدام العمل معًا لمساعدتك في تصميمك، وأن يعرضوا لك النتائج مباشرةً في المتصفّح.
ابدأ لوحة تضم وكلاء تصميم لمساعدتك في اختيار تصميم استنادًا إلى مستند متطلبات المنتج.
Using the PRD, start a panel of expert agents: one UX design, one web
accessibility, and one for visual design, and have them work together to design
3 different UI mockups and show them to me in-browser.
يتيح لك التصميم في الوسيط الذي تنشئ فيه، في هذه الحالة الويب، بدلاً من التصميم الثابت، رصد الحالات الحدّية والقيود التي يصعب إدارتها بطريقة أخرى، كما يتيح لك الحصول على ملاحظات مرئية فورية تتوافق مع الإنتاج.
التمرين 2
حان دورك الآن. تصميم مشروعك
- نفِّذ طلب التصميم السابق مع إجراء أي تعديلات تريدها لإنشاء تصميمك. أدرِج أفكارًا بشأن اتجاهات التصميم المختلفة التي تريد رؤيتها (مثل التصميم العصري والمرح والواقعي وما إلى ذلك).
- اختَر تصميمًا يعجبك وكرِّر العملية مع الوكيل.
- اطلب من الوكيل تعديل مستند متطلبات المنتج للإشارة إلى التصميم المتفق عليه.
- هدف إضافي: إجراء اختبارات إمكانية الوصول واختبارات التصميم المتجاوب للتصميم الذي اخترته، وتعديل تصميمك استنادًا إلى عمليات التدقيق هذه
5- كتابة مواصفات
بعد الحصول على موافقة على مستند متطلبات المنتج ("ما يجب إنشاؤه") واختيار تصميم مرئي ("كيف سيبدو")، عليك الآن تحقيق توافق فني بشأن التصميم ("كيفية إنشائه").
يقدّم مستند التصميم الفني أو المواصفات، ويُطلق عليهما اختصارًا المواصفات، تفاصيل حول بنى الملفات وإدارة الحالة وواجهات المكوّنات ومسارات الأحداث والتبعيات. يتيح لك إنشاء مواصفات قبل كتابة الرمز البرمجي رصد حالات عدم التوافق وأنماط الترميز غير المرغوب فيها في وقت مبكر، قبل أن تتحوّل إلى رمز يصعب فهمه وإعادة هيكلته.
Write a detailed technical design document on how to implement the game with
the chosen design.
سبب إجراء هذا التغيير
- وضوح التصميم: يساعد تحديد التسلسل الهرمي للمكوّنات ومسار انتقال الحالة (مثل
Idle→InGame→EvaluatingGuess→GameOver) في تجنُّب حالات التزامن غير المتوقّعة ورمز السباغيتي الهش. - التوافق مع المعايير الحديثة: عند تفعيل إرشادات الويب الحديث، يشير البرنامج إلى المعايير الحديثة (مثل طلبات بحث CSS
@containerوعناصرالمضمّنة للنوافذ المنبثقة أو تراكبات المساعدة ووحدات ES النمطية) بدلاً من استرداد المكتبات القديمة الكبيرة. - المراجعات على مراحل: يتيح لك فصل مراجعة مستند متطلبات المنتج الوظيفية عن مراجعة مستند التصميم الفني تقييم البنية بشكل مستقل عن تجربة المستخدم.
التمرين 3
- اطلب من
AGENTS.mdحفظ الناتج في المجلد الحالي:PRDs should _always_ be written to the current project's root in `docs/plans/{{YYYY-MM-DD}}-{{description}}.md` format - نفِّذ طلب مستند التصميم وراجِعه، وتأكَّد من أنّه يغطّي جوانب مثل بنية الدليل ومعالجة الأحداث والتخزين.
- هدف إضافي: تضمين مخططات Mermaid لشرح تدفّق الحالة خلال التطبيق، إذا لم تكن مضمّنة من قبل.
6. أخيرًا، أنشئ التطبيق
بعد إعداد مستند متطلبات المنتج ونموذج واجهة المستخدم ومستند التصميم، حان الوقت للبدء في الإنشاء. هذه العناصر الثلاثة هي الإرشادات الواضحة وغير المبهمة التي يحتاجها الموظفون لتحديد ما يجب عليهم إنشاؤه.
إليك فرصة أخرى جيدة لاستخدام الوكلاء الفرعيين. يمكنك تشغيلها بعد إنشاء الرمز لمراجعة مدى التزام الرمز الذي تم إنشاؤه بتصاميمك الأولية، وتشغيل اختبار آخر للتحقّق من جودة الرمز الذي تم إنشاؤه.
Use the PRD, design doc, and mockup to implement the site, then send out 2
agents, one to check how closely you followed the requirements, and one to
review the code.
سبب إجراء هذا التغيير
يمنح التطوير المستند إلى المواصفات مع المراجعين الأوائل وكيلك متطلبات واضحة ومُدقَّقة مسبقًا للبناء عليها، كما يمنحه مجموعة جديدة من المراجعين للتأكّد من التزامه بالخطة قبل أن تصل إليك، ما يحسّن الجودة والدقة.
- متطلبات تم التحقّق منها: لا يحتاج الوكيل إلى تخمين ما تريده، لأنّك سبق أن راجعت كل شيء باستثناء التنفيذ قبل كتابة أي رمز.
- مراجعة جديدة: لا يملك وكيل المراجعة الذي تم إنشاؤه في سياق جديد أي تحيّز تأكيدي من إنشاء قاعدة الرموز البرمجية، ما يجعله فعّالاً في رصد الحالات الحدّية غير المعالَجة ومتطلبات التنفيذ غير المتوفّرة وتفاصيل الرموز البرمجية أو المنتجات الأخرى التي تم إغفالها.
التمرين 4
- نفِّذ طلب الإنشاء، مع الإشارة إلى الملفات المحدّدة التي تريد مراجعتها.
- شاهِد الناتج أثناء تنفيذه. يمكنك رؤية عملية الاستدلال في متطلباتك أثناء محاولة إنشاء التطبيق. إذا بدا أنّ شيئًا ما سيخرج عن مساره، يمكنك إيقافه وتصحيحه.
- اطلب منه تشغيل خادم التطوير للاطّلاع على الموقع الإلكتروني النهائي والتحقّق من عمله.
- هدف إضافي: نفِّذ هذه العملية مرة أخرى لإضافة اختبارات مبرمَجة.
- هدف إضافي: اختَر إطار عمل أو حزمة تكنولوجية محدّدة تريد أن يتم إنشاء الموقع الإلكتروني بها، ومع فصل مستند متطلبات المنتج والنموذج الأوّلي ومستند التصميم، يجب أن يكون من السهل التكيّف مع إطارات العمل والحزم التكنولوجية المختلفة.
7. النشر في الإصدار العلني
لقد خطّطت وصمّمت وكتبت الرمز. ما هي الخطوات المتبقية؟ النشر في الإصدار العلني
Deploy this site to my Firebase project [YOUR_PROJECT_ID] using Firebase
Hosting.
التمرين 5
- نفِّذ طلب النشر مع استبدال رقم تعريف مشروعك.
- انسخ عنوان URL الخاص باستضافة البث المباشر الذي قدّمه لك موظف الدعم.
- افتح عنوان URL المباشر للتأكّد من أنّه تم نشره ويعمل بشكل صحيح.
- هدف إضافي: استخدام DevTools for Agents لإجراء تدقيق Lighthouse على موقعك الإلكتروني المباشر، وإجراء تعديلات لتحسين نتيجة Lighthouse، ونشر التعديلات.
8. [اختياري] التحسينات المستندة إلى الذكاء الاصطناعي
أصبحت لعبة الكلمات تعمل الآن بكامل وظائفها باستخدام قاموس ثابت. لتغيير القاموس الثابت إلى كلمة ديناميكية، يمكنك بدلاً من ذلك طلب كلمة في كل مرة باستخدام نموذج لغة صغير ومحلي من Prompt API.
بما أنّ هذه الميزة غير متاحة على جميع الأجهزة، يمكنك استخدام التحسين التدريجي للتحقّق من توفّر واجهة برمجة التطبيقات والنموذج. إذا كانت هذه القيم متوفّرة، يمكنك استخدامها، وإلا عليك الرجوع إلى القائمة الثابتة.
التمرين 6
طبِّق كل ما تعلّمته.
- اعمل مع وكيلك لكتابة مستند متطلبات المنتج (PRD) لاستخدام Prompt API لإنشاء كلمة مخفية صالحة.
- تصميم شريط تقدّم عملية التنزيل وواجهة المستخدم المدمجة مع الذكاء الاصطناعي في المتصفّح
- اكتب مواصفات التنفيذ. (ملاحظة: شغِّل برنامجًا للتأكّد من استخدام بنية واجهة برمجة التطبيقات الصحيحة هنا).
- طوِّر الميزة الجديدة.
- نشرها في الإصدار العلني
9. الخاتمة
تهانينا لقد نجحت في إنشاء تطبيق ويب عصري وسهل الاستخدام ومزوّد بميزات الذكاء الاصطناعي، وتحسينه، وتعزيزه، ونشره باستخدام أفضل الممارسات في مجال البرمجة المستندة إلى الذكاء الاصطناعي الوكيل.
ما تعلّمته
- سير عمل الوكيل المستند إلى المنتج: كيف يؤدي التعامل مع المهام باعتبارها دورات حياة مصغّرة للمنتج (مستند متطلبات المنتج → التصميم → المواصفات → الإنشاء) إلى الحدّ من الديون، وتكاليف المراجعة، والجهد المبذول في التواصل ذهابًا وإيابًا.
- لوحات المتخصصين المتعدّدة الوكلاء: كيف يمكن أن يساعد تشغيل وكلاء فرعيين متعدّدين مستندين إلى الذكاء الاصطناعي في تحسين جودة عملك ودقته؟
- مستند متطلبات المنتج مقابل مستند التصميم: لماذا يُعدّ فصل النطاق الوظيفي (الخطة) عن البنية الفنية (المواصفات) عملية أكثر قابلية للتوسّع ودقة من طلب الميزات بدون أمثلة؟
- النشر السلس: كيفية استخدام خوادم MCP (مثل Firebase MCP) لتسهيل الوصول إلى الأنظمة التابعة لجهات خارجية، مثل نشر موقعك الإلكتروني