المطالبة الفعالة للكود
أساسيات المطالبة للكود
4 دقيقة للقراءة
جودة الكود المُنتج بالذكاء الاصطناعي تعتمد مباشرة على جودة مطالباتك. يعلم هذا الدرس التقنيات الأساسية التي تفصل النتائج المتوسطة عن الممتازة.
تشريح المطالبة الجيدة
┌─────────────────────────────────────────────────────────────┐
│ مطالبة الكود الفعالة │
├─────────────────────────────────────────────────────────────┤
│ 1. السياق │
│ - ما الموجود بالفعل؟ │
│ - ما التقنيات المستخدمة؟ │
│ │
│ 2. المهمة │
│ - ما الذي تريد إنشاءه/تغييره؟ │
│ - ما السلوك المتوقع؟ │
│ │
│ 3. القيود │
│ - مع ماذا يجب أن يعمل؟ │
│ - ما الأنماط للاتباع؟ │
│ │
│ 4. تنسيق المخرجات (اختياري) │
│ - هيكل الملفات؟ │
│ - نمط التوثيق؟ │
└─────────────────────────────────────────────────────────────┘
إطار CRISPE
نهج منظم لمطالبات الكود:
| المكون | الوصف | مثال |
|---|---|---|
| Context | خلفية المشروع | "هذا تطبيق Next.js 14 يستخدم Prisma" |
| Role | من يجب أن يكون AI | "تصرف كمطور خلفية أول" |
| Instructions | ماذا تفعل | "أنشئ نظام مصادقة مستخدم" |
| Specifics | تفاصيل تقنية | "استخدم JWT، bcrypt، cookies httpOnly" |
| Patterns | أمثلة للاتباع | "طابق النمط في auth.service.ts" |
| Exclusions | ما تتجنبه | "لا تستخدم APIs مهملة" |
المطالبات الجيدة مقابل السيئة
مثال 1: إنشاء دالة
سيء:
أنشئ دالة للتحقق من البريد الإلكتروني
جيد:
أنشئ دالة للتحقق من البريد الإلكتروني:
- TypeScript، مُصدّرة من src/utils/validation.ts
- تقبل string، تُرجع boolean
- تعالج الحالات الحدية: string فارغ، @ مفقود، @ متعدد
- تتضمن تعليق JSDoc
- تطابق نمط التحقق المستخدم في src/utils/phone.ts
مثال 2: بناء مكون
سيء:
اصنع نموذج تسجيل دخول
جيد:
أنشئ مكون LoginForm لتطبيق Next.js:
المتطلبات:
- حقول البريد وكلمة المرور مع التحقق
- مربع اختيار "تذكرني"
- زر إرسال مع حالة تحميل
- عرض رسالة الخطأ
- استخدم React Hook Form مع تحقق Zod
- اتبع التنسيق في src/components/forms/SignupForm.tsx
- أضف سمات إمكانية الوصول (aria-labels، إلخ)
- تضمين واجهات TypeScript للخصائص
السياق هو الملك
توفير سياق المشروع
الطريقة 1: وصف مباشر
هذا تطبيق React 18 للتجارة الإلكترونية يستخدم:
- وضع TypeScript الصارم
- Tailwind CSS للتنسيق
- React Query لحالة الخادم
- Zustand لحالة العميل
- Next.js 14 App Router
الطريقة 2: مرجع الملفات
بالنظر إلى الأنماط في:
- @src/components/ProductCard.tsx
- @src/hooks/useProducts.ts
أنشئ مكوناً مشابهاً لعرض ملفات المستخدمين.
مستويات التحديد
طابق تحديدك مع تعقيد المهمة:
المستوى 1: إصلاحات سريعة
أصلح خطأ TypeScript في السطر 42 من src/utils/format.ts
المستوى 2: ميزات صغيرة
أضف زر "نسخ إلى الحافظة" لمكون CodeBlock
يُظهر علامة صح لمدة 2 ثانية بعد النسخ.
المستوى 3: ميزات متوسطة
نفّذ التصفح لقائمة المستخدمين:
- استخدم التصفح المبني على المؤشر
- أظهر 20 مستخدم لكل صفحة
- أضف زر "تحميل المزيد"
- حافظ على موضع التمرير
- تعامل مع حالات التحميل والخطأ
مبدأ التكرار
لا تتوقع الكمال من المحاولة الأولى:
الجولة 1: توليد الكود الأولي
↓
الجولة 2: "أضف معالجة الأخطاء لفشل الشبكة"
↓
الجولة 3: "اجعل حالة التحميل أكثر ودية للمستخدم"
↓
الجولة 4: "أضف اختبارات الوحدة للدالة الرئيسية"
↓
تم: كود جاهز للإنتاج
الأخطاء الشائعة
1. أن تكون غامضاً جداً
❌ "اجعلها تعمل" ✅ "تعامل مع الحالة التي لم يُصادق فيها المستخدم"
2. افتراض السياق
❌ "أضفها للنموذج" ✅ "أضف حقل الهاتف لمكون UserProfileForm في src/components/forms/"
3. إغفال القيود
❌ "أنشئ نقطة نهاية API" ✅ "أنشئ نقطة نهاية API تتبع النمط الحالي في src/app/api/users/route.ts"
قوالب للمهام الشائعة
قالب إصلاح الأخطاء
الخطأ: [ما يحدث]
المتوقع: [ما يجب أن يحدث]
الموقع: [الملف والسطر إن عُرف]
خطوات إعادة الإنتاج: [كيفية التشغيل]
كود مرتبط: @[ملف ذو صلة]
قالب الميزة
الميزة: [الاسم]
قصة المستخدم:
كـ [نوع المستخدم]، أريد [الإجراء] حتى أتمكن من [الفائدة].
المتطلبات التقنية:
- [متطلب 1]
- [متطلب 2]
معايير القبول:
- [ ] [معيار 1]
- [ ] [معيار 2]
أنماط للاتباع: @[ملف مثال]
حقيقة المطالبة: المطالبة المُحكمة تستغرق 30 ثانية لكن توفر 10 دقائق من التكرار. استثمر في مطالباتك.
في الدرس التالي، سنستكشف تقنيات متقدمة مثل المطالبة بأمثلة قليلة وسلسلة التفكير. :::