انتقل إلى المحتوى الرئيسي

إتقان قواعد الكود الكبيرة مع Cursor وGemini وClaude: دليل عملي

1. إعداد المشروع: وضع الأساس للتعاون مع الذكاء الاصطناعي​

فكر في مشروعك كورشة عمل منظمة جيداً حيث ستبني أنت ومتعاونيك من الذكاء الاصطناعي (Gemini و Claude) شيئاً مذهلاً. الخطوة الأولى هي إعداد الورشة بشكل صحيح.

1.1. تحديد قواعد المشاركة مع .cursorrules​

تماماً مثل أي ورشة عمل تحتاج إلى قواعد، يحتاج متعاونوك من الذكاء الاصطناعي إلى إرشادات. قم بإنشاء ملف .cursorrules في جذر مشروعك. يعمل هذا الملف كدستور، يحدد كيفية تفاعل الذكاء الاصطناعي مع الكود الخاص بك.

لماذا: هذا يضمن أن الجميع (أنت والذكاء الاصطناعي) على نفس الصفحة فيما يتعلق بالأولويات ومعايير البرمجة وكيفية معالجة المهام.

مثال .cursorrules:

{
    "rules": {
        "context_initialization": {
            "description": "نقطة البداية لكل تفاعل",
            "steps": [
                "دائماً اقرأ `.notes/project_overview.md` و `.notes/task_list.md`"
            ]
        },
        "operational_protocol": {
            "description": "كيفية معالجة المهام",
            "before_action": [
                "إنشاء تقسيم مهام MECE"
            ],
            "code_changes": [
                "قراءة أقسام الكود ذات الصلة قبل التحرير",
                "الحفاظ على الوظائف الموجودة",
                "الحفاظ على سلامة الأنواع"
            ]
        },
        "safety_requirements": [
            "لا تكسر أبداً سلامة الأنواع",
            "دائماً حافظ على معالجة الأخطاء المناسبة",
            "دائماً وثق الكود الجديد"
        ],
        "priorities": [
            {
                "source": ".notes/",
                "weight": 1.0
            }
        ],
        "modes": {
            "base": {
                "description": "للمهام الروتينية"
            },
            "enhanced": {
                "description": "للمشاكل المعقدة"
            }
        },
        "project_directives": {
            "name": "my_project",
            "ai_first": true
        }
    }
}

1.2. التحكم في رؤية الملفات مع .cursorignore​

استخدم .cursorignore لإخبار مساعديك من الذكاء الاصطناعي بما يجب تجاهله، مشابه لكيفية استخدام .gitignore للتحكم في الإصدار.

لماذا: هذا يبقي الذكاء الاصطناعي مركزاً على الأجزاء الأساسية من مشروعك، مما يقلل الضوضاء ويحسن الكفاءة.

مثال .cursorignore:

/node_modules
/build
/temp
.DS_Store

1.3. إنشاء مركز مركزي مع .notes​

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

لماذا: هذا يضمن أن لديك ومتعاونيك من الذكاء الاصطناعي فهماً مشتركاً لأهداف المشروع وحالته وتاريخه.

الملفات الرئيسية في .notes:

  • project_overview.md: وصف عالي المستوى لمشروعك وأهدافه وهيكله.
  • task_list.md: قائمة مفصلة بالمهام وحالتها (مثل "للقيام به" و "قيد التنفيذ" و "مكتمل") والأولويات وأي ملاحظات ذات صلة.
  • directory_structure.md: نظرة عامة يتم تحديثها تلقائياً على هيكل دليل مشروعك. هذا يساعد الذكاء الاصطناعي على فهم مكان وجود مكونات الكود المختلفة.
  • meeting_notes.md: سجل لتفاعلاتك مع الذكاء الاصطناعي، بما في ذلك الأسئلة المطروحة والإجابات المتلقاة والقرارات المتخذة.

2. إدارة .notes والسياق المشترك​

تخيل أنك تعمل مع فريق من الأشخاص. للتعاون بشكل فعال، تحتاج إلى ضمان أن لدى الجميع فهماً مشتركاً للمشروع مثل scrum/kanban/خطة المشروع. هنا يأتي دور استخدام مستندات markdown كدفاتر ملاحظات مشتركة.

2.1. ملء project_overview.md​

هذا المستند هو مثل "عرض المصعد" لمشروعك. يجب أن يقدم نظرة عامة موجزة عن ماهية مشروعك وأهدافه وهيكله عالي المستوى و(اختيارياً، ولكن موصى به بشدة) بعض رحلات المستخدم النموذجية.

مثال:

# نظرة عامة على المشروع

## الهدف

بناء تطبيق ويب يتيح للمستخدمين إنشاء وإدارة قوائم المهام.

## الهيكل

- **الواجهة الأمامية:** تطبيق React باستخدام TypeScript.
- **الواجهة الخلفية:** API بدون خادم باستخدام Node.js وقاعدة بيانات سحابية.
- **إدارة الحالة:** استخدام حل إدارة حالة مخصص يعتمد على خطافات React.

## الميزات الرئيسية

- مصادقة المستخدم
- إنشاء وتحرير وحذف قوائم المهام
- تحديد المهام كمكتملة
- المزامنة في الوقت الفعلي

2.2. إنشاء task_list.md​

هذا الملف هو "قائمة المهام" لمشروعك. يجب أن يتتبع جميع المهام وحالتها والأولويات وأي ملاحظات ذات صلة.

مثال:

# قائمة المهام

## أولوية عالية

- [ ] تنفيذ تدفق مصادقة المستخدم. (**الحالة:** قيد التنفيذ، **مُسند إلى:** Gemini، **ملاحظات:** يعمل حالياً على مكون تسجيل الدخول.)
- [ ] تصميم مخطط قاعدة البيانات. (**الحالة:** للقيام به، **مُسند إلى:** Claude، **ملاحظات:** يجب مراعاة قابلية التوسع.)

## أولوية متوسطة

- [ ] إنشاء واجهة مستخدم أساسية لإنشاء قائمة المهام. (**الحالة:** للقيام به، **مُسند إلى:** Gemini، **ملاحظات:** في انتظار اكتمال المصادقة.)

## أولوية منخفضة

- [ ] إضافة دعم لتصنيف المهام. (**الحالة:** للقيام به، **مُسند إلى:** لا أحد، **ملاحظات:** يمكن تنفيذه لاحقاً.)

## مكتمل

- [x] إعداد هيكل المشروع.
- [x] إنشاء مكونات React أساسية للرأس والتذييل.

2.3. توليد directory_structure.md​

هذا الملف يوفر خريطة لتخطيط مشروعك. يمكنك إنشاؤه يدوياً أو استخدام نص برمجي لتوليده تلقائياً.

مثال (يدوي):

# هيكل الدليل

- **components/**: مكونات واجهة المستخدم القابلة لإعادة الاستخدام (مثل Button و Input و List)
- **hooks/**: خطافات React مخصصة (مثل useAuth و useData)
- **lib/**: وظائف المساعدة وعملاء API
- **pages/**: صفحات التطبيق على المستوى الأعلى (مثل Home و Login و Register)
- **styles/**: التنسيقات العالمية وتعريفات السمات

مثال النص البرمجي (PowerShell):

# حفظ كـ update_directory.ps1
$projectRoot = "."
$outputFile = "./.notes/directory_structure.md"

# توليد قائمة الدليل
function Get-FormattedDirectory {
    param (
        [string]$path,
        [int]$indent = 0
    )

    $indentString = "    " * $indent
    $content = ""

    foreach ($item in Get-ChildItem -Path $path -Force) {
        if ($item.PSIsContainer) {
            $content += "$indentString- **$($item.Name)/**`n"
            $content += Get-FormattedDirectory -path $item.FullName -indent ($indent + 1)
        } else {
            $content += "$indentString- $($item.Name)`n"
        }
    }
    return $content
}

# توليد محتوى لملف markdown
$markdownContent = @"
# هيكل الدليل الحالي

## المكونات الأساسية

$(Get-FormattedDirectory -path $projectRoot)

"@

# إخراج إلى ملف
$markdownContent | Out-File -FilePath $outputFile -Encoding UTF8

Write-Host "تم تحديث هيكل الدليل في $($outputFile)"

3. إتقان التوجيه والتركيز على المحادثات​

الآن بعد أن قمت بإعداد "ورشة عمل" رقمية مع أنت و Claude و Gemini جميعاً على نفس الصفحة من خلال المستندات التي تم إنشاؤها أعلاه، حان الوقت لبدء العمل مع المؤلف في الوضع العادي مع Gemini. هنا يأتي فن التوجيه.

3.1. لماذا السياق مهم؟​

  • التركيز: مثل الضوء الكاشف، يساعد السياق الذكاء الاصطناعي على التركيز على الأجزاء ذات الصلة من قاعدة الكود الخاصة بك، متجاهلاً التفاصيل غير ذات الصلة.
  • الدقة: الفهم المشترك لأهداف المشروع وحالته وهيكله يضمن أن تكون الردود دقيقة ومتوافقة مع نواياك.
  • الاتساق: يمكنك مساعدة الذكاء الاصطناعي في الحفاظ على سلامة هيكل مشروعك، ومنعه من إجراء تغييرات قد تكسر الوظائف الموجودة أو تدخل عدم اتساق.

3.2. استخدام @ لتركيز الذكاء الاصطناعي​

الرمز @ هو أداتك الأساسية لتوفير السياق لـ Gemini و Claude داخل Cursor. إنه مثل الإشارة إلى مستند أو قسم كود معين أثناء المحادثة.

أمثلة:

  • @components/Button.tsx: "مرحباً Gemini، دعنا نركز على هذا المكون المحدد."
  • @.notes/task_list.md: "Claude، تحقق من قائمة المهام والأولويات الحالية."
  • @.notes/project_overview.md: "Gemini، تذكر الأهداف والهيكل العام الذي ناقشناه؟"

3.3. تأسيس إجابات الذكاء الاصطناعي بالدقة والاتساق​

  • كن محدداً: اطرح أسئلة مباشرة ومحددة. تجنب اللغة الغامضة أو المبهمة.
    • بدلاً من: "كيف يمكنني تحسين هذا الكود؟"
    • جرب: "Gemini، كيف يمكنني جعل وظيفة handleSubmit في @components/LoginForm.tsx أكثر كفاءة؟"
  • استخدم MECE: MECE (متبادل الحصر، شامل جماعياً) هو تقنية قوية لحل المشكلات. قم بتقسيم المهام المعقدة إلى مهام فرعية أصغر غير متداخلة.
    • مثال: "Claude، دعنا نقسم تنفيذ تدفق مصادقة المستخدم باستخدام MECE:
      1. إدخال المستخدم: معالجة إدخال اسم المستخدم وكلمة المرور.
      2. استدعاء API: إرسال بيانات الاعتماد إلى API المصادقة.
      3. معالجة الاستجابة: معالجة استجابة API (نجاح أو خطأ).
      4. تحديث الحالة: تحديث حالة التطبيق بناءً على نتيجة المصادقة. ما رأيك في هذا التقسيم؟ هل لديك أي اقتراحات؟"
  • التكرار والتحسين: لا تتوقع نتائج مثالية في المحاولة الأولى. انخرط في حوار تكراري مع الذكاء الاصطناعي. قدم تعليقات على اقتراحاته، واطرح أسئلة توضيحية، وحسن توجيهاتك بناءً على ردوده.
    • مثال: "Gemini، اقتراحك لتحسين وظيفة handleSubmit جيد، لكنه لا يعالج احتمال حدوث تنافس. كيف يمكننا تعديله لمعالجة هذا السيناريو؟"
  • اسأل "لماذا": شجع الذكاء الاصطناعي على شرح منطقه. هذا يساعدك على فهم عملية تفكيره وتحديد أي سوء فهم محتمل.
    • مثال: "Claude، لماذا اقترحت استخدام نهج إدارة الحالة هذا بدلاً من النهج المحدد في @.notes/project_overview.md؟"