المستوى الخامس: مشروع عملي كامل
دليل هذا الفصل
1. رفض "المسار السعيد": إكمال المسار الأساسي
العديد من المبتدئين عند صنع النماذج الأولية غالبًا ما يصنعون فقط "المسار السعيد" (المسار الأكثر مثالية): المستخدم ينقر -> API يستجيب بنجاح -> تظهر النتيجة. لكن في العالم الحقيقي، الأمور غالبًا لا تسير بسلاسة. لجعل النموذج الأولي الخاص بك يبدو كمنتج حقيقي، تحتاج إلى مراعاة العناصر "الخفية" التالية.
1.1 إضافة "الانتظار" و"التغذية الراجعة"
عندما ينقر المستخدم على "توليد نص"، غالبًا ما يحتاج AI إلى بضع ثوانٍ للاستجابة. إذا لم تكن الواجهة تستجيب، سيعتقد المستخدم أن البرنامج معطل. تحتاج إلى جعل AI IDE يضيف حالة التحميل:
مثال على التعليمات: "عندما أنقر على زر التوليد، قم بتغيير الزر إلى 'جارٍ التوليد...' واجعله غير قابل للنقر، وفي نفس الوقت اعرض رسمًا متحركًا للتحميل في المنطقة اليمنى. حتى تعود نتيجة API، ثم استعد الحالة الطبيعية."
1.2 التعامل مع "الفشل" و"الاستثناءات"
قد تنتهي صلاحية API Key، وقد ينقطع الاتصال بالشبكة. تحتاج إلى جعل AI IDE يعالج الأخطاء:
مثال على التعليمات: "إذا فشل طلب API، لا تبلغ عن الخطأ مباشرة في وحدة التحكم، بل اعرض مربع رسالة حمراء (Toast) في أعلى الصفحة، تخبر المستخدم بـ 'فشل التوليد، يرجى المحاولة لاحقًا'، واسمح للمستخدم بالنقر على التوليد مرة أخرى."
1.3 استمرارية سجل المحادثة
في عملية التفاعل مع AI، نحتاج إلى حفظ محتوى المحادثة، حتى يتمكن المستخدم من مراجعة التاريخ ومواصلة التواصل السابق. في هذه المرحلة لا نقدم قاعدة بيانات بعد، ويمكننا اختيار أحد الحلول الخفيفة التالية:
اختيار حل التخزين:
| الحل | سيناريو الاستخدام | الميزات |
|---|---|---|
| LocalStorage | مشروع أمامي فقط، بيانات المستخدم محفوظة في المتصفح | تنفيذ بسيط، لا تضيع عند التحديث، لا يمكن المزامنة عبر الأجهزة |
| ملف JSON | نموذج أولي محلي، البيانات مخزنة كملف | هيكل واضح، سهل التصحيح، قابل للتعديل يدويًا |
| ملف TXT | الحل الأبسط، تسجيل سريع للمحتوى النصي | تنسيق حر، توافق جيد |
مثال على محتوى المحادثة: سجل المحادثة المحفوظ عادةً ما يتضمن المحتوى التالي:
[
{
"role": "user",
"content": "ساعدني في توليد نص تسويقي لسماعات بلوتوث لمنصة Douyin",
"timestamp": "2026-01-20 10:30:00"
},
{
"role": "assistant",
"content": "[نص تسويقي لسماعات بلوتوث]\n\n🎧 وداعًا للتأخير، تجربة استماع غامرة\n\nيا بنات! هذه السماعات رهيبة حقًا\n\n✅ عزل ضوضاء نشط 40 ديسيبل، دخول فوري لعالم الموسيقى\n✅ 30 ساعة عمر بطارية فائق، أسبوع تنقل بدون شحن\n✅ مكالمات واضحة وجهاً لوجه، حتى في المترو الصاخب\n✅ تصميم نصف داخل الأذن، مريح حتى مع الاستخدام الطويل\n\n💰 عرض محدود، انقر على الرابط أدناه للحصول عليها!",
"timestamp": "2026-01-20 10:30:05"
}
]تعليمات التنفيذ:
"ساعدني في تنفيذ وظيفة حفظ سجل المحادثة. ادعم حفظ سجل محادثات المستخدم و AI كملف JSON (أو استخدم LocalStorage). عند الدخول إلى الصفحة في كل مرة، يتم تحميل المحادثات السابقة تلقائيًا، مع دعم عرض وحذف سجل المحادثات الفردية."
2. ضخ الروح: محاكاة البيانات الحقيقية (Mock Data)
الصفحة الفارغة لا يمكنها إقناع أحد. تخيل أنك تعرض "محطة مواد التجارة الإلكترونية" لشخص آخر، لكن السجل فارغ تمامًا، أو يحتوي فقط على سطر واحد "test / test / test". للحصول على أفضل تأثير عرضي، نحتاج إلى "تزوير" بعض البيانات الواقعية لجعل النموذج الأولي يبدو كمنتج حقيقي تم تشغيله لمدة نصف عام.
2.1 دع AI يساعدك في تصميم هيكل البيانات
لا نحتاج إلى التفكير بأنفسنا في ماذا نسمي كل حقل (مثلاً هل نسميه name أم title)، يمكن ترك هذا الأمر تمامًا لـ AI.
تحتاج فقط إلى إخبار AI بـ سيناريو عملك:
مثال على التعليمات: "أقوم بصنع نموذج أولي لـ محطة مواد التجارة الإلكترونية على Douyin. ساعدني في تصميم هيكل بيانات JSON لوصف 'مهمة منتج'. يجب أن تتضمن هذه المهمة: المعلومات الأساسية للمنتج (الاسم، الفئة)، المواد المدخلة (روابط الصور)، ونتائج AI المولدة (العنوان، النص، صورة الملصق). أعطني مباشرة مثال JSON."
سيقوم AI تلقائيًا بناءً على وصفك بابتكار حقول مثل productName و generatedContent.
2.2 دع AI ينتج دفعة واحدة بيانات "واقعية"
بعد الحصول على هيكل البيانات، الخطوة التالية هي جعل AI يساعدك في "ملء الفراغات" وتوليد مجموعة من البيانات التي تبدو حقيقية.
نصائح حول التعليمات: لا يمكنك فقط إخبار AI "ساعدني في توليد بيانات"، تحتاج أن تخبره كما لو كنت تكلف متدربًا، إخباره بـ خلفية العمل ومتطلبات المحتوى:
- خلفية العمل: أخبر AI أننا نعمل في "التجارة الإلكترونية على Douyin"، لذا يجب أن تكون عناوين المنتجات جذابة (مثل "سر النحافة" و"لا بد للطلاب")، وأن يكون النص بأسلوب محادثة.
- متطلبات الصور: لجعل النموذج الأولي يبدو جيدًا، يجب ألا تكون الصور رموزًا رمادية بدائية، بل يفضل أن تكون صورًا ملونة عشوائية للمناظر الطبيعية أو الأشياء الحقيقية.
مثال على التعليمات: "بناءً على الهيكل المصمم للتو، ساعدني في توليد 10 بيانات محاكاة واقعية. (ملاحظة: ليس بالضرورة بصيغة JSON. إذا كنت تكتب كودًا أماميًا، يمكنك جعله يولد مصفوفة JavaScript مباشرة؛ إذا كنت تستخدم Python، يمكنك جعله يولد List.)
متطلبات سيناريو العمل:
- افترض أن هذا متجر متعدد الأقسام، وتشمل المنتجات فئات 'ملابس نسائية' و'إلكترونيات' و'مستحضرات تجميل'.
- العناوين والنصوص المولدة يجب أن تكون بأسلوب Douyin: مثلاً العناوين يجب أن تتضمن رموز تعبيرية (🔥, ✨)، والنصوص يجب أن تستخدم عبارات مثل 'رهيبة' و'جربتها بنفسي'.
- حقل الصور: استخدم التنسيق
https://picsum.photos/seed/{random_id}/300/400بشكل موحد، لضمان اختلاف كل صورة."
مثال على بيانات المحاكاة المولدة:
export const mockProductTasks = [
{
id: 'task_001',
name: 'فستان صيفي بنقشات فرنسي كلاسيكي',
status: 'completed',
input: {
category: 'ملابس نسائية',
features: ['تضييق الخصر', 'يرقق القوام', 'أنيق'],
originalImage: 'https://picsum.photos/seed/dress_input/300/400'
},
output: {
generatedTitle: '✨من تلبسها تحلى! هذا الفستان المنقوش الفرنسي رهيب حقًا🔥',
generatedCopy:
'يا بنات! هذا الفستان ينحّف القوام حقًا! تصميم تضييق الخصر رهيب، بمجرد لبسه يظهر لك خصرك. القماش منفس جدًا، في الصيف ما يخنق أبدًا. الخيار الأول للمواعيد والتنزهات! 👗',
generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
},
createdAt: '2026-01-20T10:00:00Z'
},
{
id: 'task_002',
name: 'سماعات بلوتوث فائقة عزل الضوضاء Pro',
status: 'completed',
input: {
category: 'إلكترونيات',
features: ['عزل الضوضاء', 'عمر بطارية فائق', 'تأخير منخفض'],
originalImage: 'https://picsum.photos/seed/tech_input/300/400'
},
output: {
generatedTitle: '🎧 أخيرًا وجدتها! عزل الضوضاء في هذه السماعات قوي جدًا! 🔇',
generatedCopy:
'بمجرد لبسها، يسكت العالم فورًا. جودة صوت رائعة، الاستماع للموسيقى كأنك في الحفل. عمر البطارية ممتاز أيضًا، شحنة واحدة تكفي لأسبوع! لا بد للطلاب!',
generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
},
createdAt: '2026-01-21T14:30:00Z'
}
// ... المزيد من البيانات
]2.3 (متقدم) استخدام LocalStorage لتنفيذ "الإضافة والحذف والتعديل المزيف"
إذا كنت تريد أن تكون بيانات المحاكاة المولدة للتو قابلة للعرض والحذف والتعديل، بل وحتى أن تكون المهام المولدة حديثًا لا تزال موجودة بعد تحديث الصفحة، يمكنك الجمع بين LocalStorage.
مثال على التعليمات: "ساعدني في تنفيذ وظيفة تخزين البيانات.
- اقرأ البيانات من
localStorageأولاً.- إذا كان
localStorageفارغًا، استخدم بيانات المحاكاة المولدة للتو للتهيئة، واحفظها فيlocalStorage.- في نفس الوقت ساعدني في كتابة دالتي
addProductTaskوdeleteProductTask، كل عملية يجب أن تقوم بتحديثlocalStorageبشكل متزامن."
من خلال هذه الخطوة، سيكون لدى النموذج الأولي الخاص بك "ذاكرة"، وتجربة المستخدم ستكون مطابقة تقريبًا للمنتج الحقيقي.
3. جمع التعليقات والتكرار السريع
العمل خلف الأبواب المغلقة لا ينتج منتجات جيدة. الآن نموذجك الأولي لديه "الوظائف الأساسية" + "المسار الكامل" + "بيانات العرض"، حان الوقت لعرضه على الآخرين.
3.1 من تختبر؟ كيف تختبر؟
- ابحث عن أصدقاء / زملاء: لا يحتاجون إلى فهم التكنولوجيا، فقط دعهم يحاولون استخدامه.
- راقب بدلاً من التوجيه: لا تقل "انقر هنا"، بل انظر إلى أين سينقرون. إذا لم يتمكنوا من العثور على الزر، فهذا يعني أن التصميم به مشكلة.
- طريقة ساحر أوز العجيب (Wizard of Oz): إذا لم يكن AI متصلاً بعد، يمكنك تعديل البيانات يدويًا في الخلفية (أو قاعدة البيانات) لمحاكاة استجابة AI، والتحقق أولاً مما إذا كان المستخدم يحتاج هذه الوظيفة.
3.2 مواجهة الأخطاء والشكاوى
- تشوهات في التصميم: قد تظهر فوضوية على أحجام شاشات مختلفة.
- الإجراء: خذ لقطة شاشة وأرسلها إلى AI IDE -> "التصميم تشوه على هذا العرض، ساعدني في إصلاحه."
- تفاعل غير مريح: "هذه العملية معقدة جدًا".
- الإجراء: أخبر AI IDE بالاقتراح -> "المستخدم يشعر أن الرفع ثم التوليد بطيء جدًا، هل يمكن تغييره إلى توليد بنقرة واحدة؟"
- متطلبات جديدة: "لو كانت هناك هذه الوظيفة لكان رائعًا".
- الإجراء: قيّم ما إذا كانت أساسية، وإذا كانت كذلك، دع AI ينفذ نسخة مبسطة بسرعة.
تذكر: في هذه المرحلة، AI هو أفضل مساعد لك في التعديل. أنت مسؤول فقط عن اكتشاف المشاكل، واترك تعديل الكود له.
4. 🎓 مشروع التخرج: أكمل "مشروع التخرج" الخاص بك
تهانينا! لقد أكملت العملية الكاملة من "المتطلبات" إلى "النموذج الأولي" ثم إلى "تكامل AI". الآن، حان وقت عرض نتيجتك النهائية.
مشروع التخرج هذا لا يقتصر على "محطة مواد التجارة الإلكترونية" فقط. تحتاج إلى الجمع بين اهتماماتك أو خلفيتك المهنية لصنع نموذج أولي لمنتج AI فريد.
اختيار الموضوع والمتطلبات
تحتاج إلى اختيار السيناريو الأقرب من مرجع اتجاهات السيناريوهات متعددة التصنيفات، أو ابتكار سيناريو جديد تمامًا بناءً على أفكارك الخاصة.
يجب أن يستخدم المشروع بشكل شامل كل ما تعلمته في الفصول السابقة:
- بناء النموذج الأولي: استخدم تقنيات الواجهة الأمامية لبناء واجهة جميلة وسهلة الاستخدام.
- التحكم في المتطلبات: لا تسعَ للشمولية، بل ركز على الإغلاق المنطقي للوظائف الأساسية.
- توصيل API: قم بتوصيل نماذج AI حقيقية (LLM / VLM إلخ)، لمنح التطبيق ذكاءً حقيقيًا.
- تنفيذ تطبيق قابل للتشغيل: ليس مجرد صفحة ثابتة، بل تطبيق ديناميكي فيه تدفق بيانات وتغذية راجعة تفاعلية.
مخرجات المشروع
في النهاية تحتاج إلى تقديم المحتوى التالي:
- تطبيق نموذج أولي كامل: منشور عبر الإنترنت أو قابل للتشغيل محليًا، مع مسار استخدام كامل.
- فيديو عرض لمدة 30 ثانية: سجل فيديو يقدم باختصار سيناريو تطبيقك ويعرض التشغيل الفعلي للوظائف الأساسية.
هذه هي المعركة الأخيرة في المرحلة الأولى. تحقق من عملك وفقًا للقائمة التالية:
الخطوة التالية
بعد إكمال مشروع التخرج، أصبح لديك القدرة على "تطوير نموذج أولي لتطبيق AI بشكل مستقل". في المرحلة الثانية القادمة، سنتعمق في تطوير Full Stack الأكثر تعقيدًا، ونتعلم كيفية تحويل هذا النموذج الأولي إلى تطبيق حقيقي قابل للنشر بقاعدة بيانات ونظام مستخدمين بمستوى تجاري.
نلتقي في المرحلة القادمة!