المستوى المبتدئ الثاني: تعلم أدوات برمجة الذكاء الاصطناعي
مقدمة هذا الفصل
1. ما هي البيئة والأدوات المطلوبة لكتابة الأكواد
1.1 تغيير طريقة التفكير: عند مواجهة مشكلة، اسأل الذكاء الاصطناعي أولاً
قبل البدء في تقديم البيئات والأدوات المختلفة، تجدر الإشارة أولاً إلى أنك بحاجة إلى تغيير عادات تفكيرك.
في تعلم البرمجة التقليدي، إذا كنت تريد تثبيت Python أو تكوين Conda أو حل مشكلة فشل تثبيت npm، فستفتح عادةً محرك البحث، وتجد درساً تعليمياً، ثم تتبع الخطوات خطوة بخطوة. إذا حدث خطأ في المنتصف، قد تحتاج إلى البحث عن رسالة الخطأ مرة أخرى والمحاولة بشكل متكرر.
خطأ! ❌
في عصر الذكاء الاصطناعي، خاصة عند استخدام AI IDE، تذكر مبدأ أساسياً: أي عملية يمكن أن تسأل عنها الذكاء الاصطناعي أولاً، بل ويمكنك تركه يقوم بها نيابة عنك.
- لا تعرف كيفية تثبيت البيئة؟ اسأل الذكاء الاصطناعي مباشرة في الشريط الجانبي: “أريد كتابة Python، ساعدني في التحقق مما إذا كان Python مثبتاً، وإذا لم يكن كذلك فساعدني في تثبيته.”
- هل الشبكة عالقة؟ إذا استمر التحميل أو ظهر خطأ أثناء تثبيت حزم التبعيات، أرسل الخطأ مباشرة إلى الذكاء الاصطناعي: “فشل التنزيل، هل هي مشكلة شبكة؟ هل يمكنك مساعدتي في تغيير مصدر مرآة محلي؟”
- لا تتذكر الأوامر؟ لا حاجة لحفظ أوامر Git أو Conda، أخبر الذكاء الاصطناعي مباشرة: “ساعدني في إنشاء بيئة افتراضية جديدة باسم demo.”
1.2 لماذا نحتاج إلى بيئة وأدوات
من “كتابة بضعة أسطر من الكود” إلى “إنشاء مشروع قابل للصيانة على المدى الطويل”، تختلف متطلبات البيئة والأدوات تماماً.
نظرياً، يمكنك كتابة الكود باستخدام برنامج المفكرة المدمج في النظام، لكن المشاكل ستظهر بسرعة:
- الكود كله نص أسود، الكلمات المفتاحية والسلاسل النصية والتعليقات مختلطة معاً، من الصعب تمييز البنية بنظرة واحدة
- لا توجد اقتراحات ذكية، يجب كتابة كل كلمة بالكامل يدوياً، خطأ إملائي في حرف واحد يتطلب فحصاً متكرراً
- الفوضى عند كثرة الملفات، التبديل بين عشرات الملفات، غالباً لا تجد السطر الذي تريد تعديله
- التخمين عند حدوث الأخطاء، لا تعرف أين المشكلة عند تعطل البرنامج، يجب طباعة السجلات سطراً سطراً للتجربة والخطأ
لذلك، أنت بحاجة إلى IDE (بيئة التطوير المتكاملة). فهي تعرض الكود بألوان مختلفة، وتقدم اقتراحات تلقائية أثناء الكتابة، وتنظم الملفات حسب المشروع، وتتبع الأخطاء خطوة بخطوة، مما يجعل التطوير أكثر كفاءة وأقل عرضة للأخطاء.
2. ما هو IDE، ولماذا نحتاجه
نصيحة للمراجعة
إذا لم تكن معتاداً على ماهية IDE وما هي وظيفة كل عنصر في الواجهة، ننصحك بقراءة مقدمة في IDE أولاً، للتعرف على المفاهيم الأساسية والوظائف الشائعة لـ IDE.
في العصر المبكر للبرمجة، كنا نحتاج فقط إلى محرر نصوص بسيط ومعالج لغة. لكن مع زيادة تعقيد المشاريع، احتاج المطورون بشدة إلى أداة يمكنها إدارة الملفات بكفاءة، ودعم تمييز بناء الجملة، وتصحيح الأخطاء، وهكذا ولدت بيئة التطوير المتكاملة (IDE).
يمكنك فهم IDE على أنه برنامج مخصص لـ “تحرير وإدارة وتشغيل وتصحيح” الأكواد. كان مظهر IDE المبكر “بدائياً” جداً، يعمل تقريباً بالكامل عبر لوحة المفاتيح.
واجهة الطرفية (Terminal) مصدر الصورة: https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
من بين “IDE المدمجة” المعروفة والمتطورة وظيفياً، مثل Vim، تُستخدم غالباً للعمليات البعيدة على الخوادم.
لزيادة الكفاءة، نحتاج إلى IDE حديث يدعم تشغيل الماوس، وعادة ما يتضمن:
- محرر الكود المصدري: تمييز بناء الجملة، الإكمال التلقائي.
- أدوات البناء والتشغيل: مترجم/مفسر مدمج.
- أداة التصحيح: نقاط التوقف، عرض المتغيرات.
غالباً ما تتضمن IDE الحديثة أيضاً أدوات مثل Git. الأكثر شعبية هو Visual Studio Code (VS Code) من Microsoft، وهو خفيف وقابل للتوسيع. على الرغم من وجود IDE احترافية مثل مجموعة JetBrains، إلا أن VS Code هو الأكثر صداقة للمبتدئين.
المفهوم الأساسي لـ VS Code هو “كل شيء هو مكون إضافي”. من خلال آلية المكونات الإضافية يدعم لغات متعددة؛ تثبيت مكون Python يجعله Python IDE، وتثبيت مكون C++ يجعله C++ IDE. بدون مكونات إضافية، هو مجرد محرر نصوص متقدم.
بل يمكن استخدامه حتى لتحرير مستندات Markdown.
باختصار، IDE هو مجموعة أدوات تساعد المطورين على كتابة الأكواد وتشغيل البرامج بكفاءة.
لمزيد من التفاصيل، يرجى مراجعة قسم مبادئ IDE المرئي في الملحق.
3. ما الفرق بين AI IDE و IDE العادي
IDE العادي (مثل VS Code الأصلي) هو في الأساس “مجموعة أدوات”: يمكنك فتح المشروع وكتابة الكود وتشغيله وتصحيح أخطائه، ويمكنك أيضاً تثبيت مكونات إضافية، لكن بشرط أن تعرف بنفسك ماذا تفعل وكيف تفعل:
- عند حدوث خطأ، تقرأ الرسالة بنفسك وتتحقق بنفسك من السطر المسبب للمشكلة؛
- إذا كنت تريد إضافة صفحة جديدة أو واجهة جديدة، تبحث بنفسك عن الملف المناسب وتكتب الكود بنفسك؛
- إذا كنت تريد تهيئة البيئة أو حزم المشروع، تبحث في التوثيق وتتبع الخطوات بنفسك.
لكن في AI IDE، يمكنك استخدام نموذج اللغة الكبير مباشرة لمساعدتك في البرمجة وتعديل الملفات:
- قل مباشرة “اصنع صفحة تسجيل دخول”، وسيقوم بتوليد هيكل الكود الأساسي؛
- أرسل رسالة الخطأ والكود ذي الصلة إليه، وسيقوم بتحليل السبب أولاً ثم تقديم اقتراحات التعديل؛
- بعد تأكيدك، دعه ينشئ ملفات جديدة تلقائياً ويعدل الكود دفعة واحدة، ويتعامل مع المهام الشاقة عبر الملفات.
على سبيل المثال، يمكنك تحديد جزء من التعليمات البرمجية وطلب "إعادة هيكلة" أو "إضافة تعليقات"؛ يمكنك أيضًا السؤال في الشريط الجانبي "كيف تم تصميم هذا المشروع؟"، ومن خلال @اسم_الملف أو @المشروع_بالكامل تحديد نطاق المرجع، واستخدام جملة واحدة لإكمال العمليات المعقدة تلقائيًا مثل إنشاء ملفات جديدة، وكتابة التعليمات البرمجية، وتشغيلها.
في أحدث إصدار من VS Code، تم دمج مساعد نموذج لغوي كبير مدمج. يمكنك التحدث مباشرة مع النموذج حول مستودع التعليمات البرمجية بالكامل، أو ملف معين، أو حتى دالة معينة. يمكنك أيضًا، تمامًا كما كنت تفعل عند استخدام أدوات كتابة التعليمات البرمجية التلقائية على الويب سابقًا، إرسال متطلباتك في شكل prompts إلى Agent البرمجة المدمج، ليتولى هو تلقائيًا تنفيذ الوظائف المطلوبة، وإنشاء الملفات، وتعديل التعليمات البرمجية، وإعداد البيئة، وغيرها.
يمكنك تنزيل وتثبيت VS Code، ثم النقر على مدخل الشريط الجانبي في الزاوية العلوية اليمنى لفتح منطقة وظائف AI وتجربة هذه القدرات.
ومع ذلك، فإن VS Code ليس بيئة التطوير المتكاملة (IDE) الأقوى في قدرات AI. في السيناريوهات التي تتطلب قدرًا كبيرًا من البرمجة بمساعدة AI، غالبًا ما نأمل في استخدام أدوات "أكثر ذكاءً وأعلى كفاءة" — فبيئة التطوير المتكاملة AI الجيدة يمكن أن توفر وقتًا كبيرًا في كتابة التعليمات البرمجية وإصلاح الأخطاء (Bugs). أدناه، سنقدم several بيئات تطوير متكاملة AI الأكثر شيوعًا حاليًا، ويمكنك اختيار أي بيئة تطوير متكاملة AI لاستخدامها وفقًا لتفضيلاتك الشخصية.
نظرًا لأن VS Code مفتوح المصدر (يمكن لأي شخص تنزيل التعليمات البرمجية المصدرية وتجميعها بنفسه)، فإن الغالبية العظمى من بيئات التطوير المتكاملة AI المتوفرة في السوق حاليًا تم تطويرها بشكل ثانوي بناءً على VS Code. لذلك لا داعي للقلق بشأن "تعلم العديد من بيئات التطوير المتكاملة" — طالما أنك على دراية بالاستخدام الأساسي لـ VS Code، فلن تحتاج إلى إعادة التعلم عند الانتقال إلى بيئات التطوير المتكاملة AI هذه.
بشكل عام، بالنسبة للاختلافات بين بيئات التطوير المتكاملة AI المختلفة، تتركز بشكل أساسي في أربعة جوانب: السعر؛ وأنواع النماذج المتاحة (قد تكون بعض النماذج المتقدمة مقيدة في مناطق معينة)؛ وقدرات Agent (مستوى الذكاء والقدرة على التنفيذ عند المساعدة في كتابة التعليمات البرمجية)؛ وسرعة التشغيل والأداء. يمكنك الاختيار بناءً على تأثيرات الاختبار الفعلي، فالأفضل هو ما يناسبك.
تتضمن بيئة التطوير المتكاملة AI النموذجية بشكل عام القدرات الأساسية التالية:
- إنشاء التعليمات البرمجية والإكمال الذكي: في بيئة التطوير المتكاملة التقليدية، نعتمد عادةً على إدخال بضعة أحرف لإكمال أسماء المتغيرات أو الدوال؛ في بيئة التطوير المتكاملة AI الحديثة، يمكنك كتابة بضعة أسطر من Pseudocode أو وصف المتطلبات ببساطة، والسماح لبيئة التطوير المتكاملة بإكمال المنطق بالكامل تلقائيًا، أو حتى إنشاء جزء كبير أو كتلة كاملة من التعليمات البرمجية مباشرة بناءً على التعليمات.
- فهم التعليمات البرمجية والإجابة على الأسئلة: يمكن لبيئة التطوير المتكاملة فهم والإجابة على الأسئلة حول جزء معين من التعليمات البرمجية، أو ملف معين، أو حتى بنية دليل المشروع بالكامل.
- إعادة هيكلة التعليمات البرمجية وتحسينها: يمكن لبيئة التطوير المتكاملة إعادة كتابة أو تحسين منطق تنفيذ جزء معين من التعليمات البرمجية بناءً على نيتك.
- إنشاء الاختبارات تلقائيًا: يمكن لبيئة التطوير المتكاملة إنشاء تعليمات برمجية للاختبار تلقائيًا لدوال ووحدات مختلفة، مما يسهل عليك إجراء اختبارات مستهدفة.
- تنفيذ المهام بأسلوب Agent: يمكن لـ Agent الذكي إنشاء التعليمات البرمجية وتعبئتها وتثبيتها وتشغيلها وتعديلها تلقائيًا، ويمكنه في العديد من المهام أن يحل محل مهندس البرمجيات المبتدئ جزئيًا.
Antigravity
Antigravity
Antigravity هو بيئة تطوير متكاملة AI جديدة أطلقتها Google في نوفمبر 2025 مع Gemini 3، وتتبنى نموذج تطوير "Agent-First" (الأولوية للوكيل الذكي). على عكس البرمجة بمساعدة AI التقليدية، يجعل Antigravity وكيل AI "منفذًا نشطًا"، قادرًا على تشغيل أدوات مثل المحرر والطرفية (Terminal) والمتصفح مباشرة، ليتولى المزيد من أعمال "التنفيذ" و"التخطيط" و"التحقق". يحتاج المطورون فقط إلى طرح النية العامة، وسيقوم الوكيل تلقائيًا بتقسيم المهام، ووضع الخطط، وتنفيذ التعليمات البرمجية، وتشغيل الاختبارات، وإنشاء النتائج. يدعم التبديل بين النماذج المتعددة، بما في ذلك Gemini 3 Pro و Claude Sonnet 4.5 وغيرها، وهو متوفر حاليًا كمعاينة عامة، ويدعم جميع الأنظمة الأساسية مثل Windows و macOS و Linux.
Trae
Trae
Trae هو مساعد برمجة AI أطلقته ByteDance، ويدعم أكثر من 100 لغة برمجة، ويمكن دمجه في بيئات التطوير المتكاملة السائدة. تشمل وظائفه: إنشاء التعليمات البرمجية باللغة الطبيعية، والتصحيح التلقائي، وتحويل التصاميم إلى مكونات React/Vue وغيرها. بعد التحديث الذي أجرته في أغسطس 2025، أضافت Trae ميزات مثل استيراد التبعيات الذكي، واقتراحات إعادة التسمية، وإدارة قوائم المهام؛ وبدأ وضع SOLO أيضًا في دعم إنشاء التعليمات البرمجية الخلفية وتحرير وثائق البنية التقنية.
Cursor
Cursor
Cursor هو محرر تعليمات برمجية AI طورته Anysphere، ومبني خصيصًا على VS Code، مع التركيز على تحسين سيناريوهات مستودعات التعليمات البرمجية الضخمة والتعاون متعدد الملفات. يدعم نماذج مثل GPT-4o و Claude 3.7؛ ويمكن لوضع Claude Max الذي أطلق في عام 2025 التعامل مع مشاريع بمستوى ملايين الأسطر من التعليمات البرمجية. ألغى الإصدار الاحترافي قيود عدد الطلبات، مما يجعله مناسبًا جدًا للمشاريع المعقدة على مستوى المؤسسات.
حاليًا، يمكن القول إن Cursor واحد من أفضل بيئات التطوير المتكاملة AI "التي تحتوي على واجهة أمامية" من حيث التجربة الشاملة، مع قاعدة مستخدمين ضخمة وتيرة تحديثات عالية جدًا. أكبر عيوبه هو ارتفاع سعره — حيث يكلف الإصدار الاحترافي حوالي 20 دولارًا شهريًا.
Qoder
Qoder
Qoder هو بيئة تطوير متكاملة AI أطلقتها Alibaba، وتؤكد على "التعاون الشفاف" و"تعزيز قدرات هندسة السياق". فهو يدعم من خلال Action Flow تقسيم المهام إلى خطوات متعددة، وتتبع عملية تنفيذ AI في الوقت الفعلي؛ كما يدعم التوجيه الديناميكي للنماذج المتعددة وإدارة آلة حالة المهام، وهو مناسب جدًا للإدارة المعمارية في المشاريع المتوسطة والكبيرة وتحليل "الهندسة العكسية" للأنظمة القديمة.
CodeBuddy
CodeBuddy
CodeBuddy هي أداة برمجة AI أطلقتها Tencent Cloud، وتؤكد على دعم التعليمات الصينية وقدرات الامتثال على مستوى المؤسسات. توفر ميزات مثل إكمال التعليمات البرمجية، ومراجعة التعليمات البرمجية المجمعة، والتبديل بين النماذج المتعددة؛ ويمكن لـ Agent الذكي المسمى Craft إنشاء تعليمات برمجية متعددة الملفات ودمج API. يدعم إصدار المؤسسات النشر الخاص، وقد اجتاز شهادة حماية البيانات من المستوى الثالث، وهو مناسب للصناعات ذات المتطلبات العالية لأمن البيانات مثل التمويل والرعاية الصحية.
VS Code + Cline
VS Code + Cline
Cline هو مكون إضافي لـ Agent برمجة AI لـ VS Code (Visual Studio Code)، ويمكنه التبديل بمرونة بين النماذج اللغوية الكبيرة المستخدمة من خلال تكوين نقاط نهاية API مختلفة. يدعم Cline الإدخال متعدد الوسائط، وامتداد أدوات MCP، ومراقبة التكاليف، وجميع العمليات تتطلب تأكيد المستخدم قبل تنفيذها. إنه مناسب جدًا للتحقق السريع من الأفكار أو التكامل مع عمليات التطوير الحالية. الوظائف الأساسية مجانية، بينما يدعم إصدار المؤسسات نشر النماذج في بيئات خاصة.
Kiro
Kiro
Kiro هو بيئة تطوير متكاملة AI للبرمجة أطلقتها AWS (Amazon Web Services)، وهي متكاملة بعمق مع Amazon Bedrock ونظام AWS للخدمات السحابية. يدعم Kiro مجموعة متنوعة من النماذج اللغوية الكبيرة مثل Claude و Nova، وهو مناسب بشكل خاص لسيناريوهات التطوير التي تتطلب تكاملاً وثيقًا مع خدمات AWS السحابية. يوفر Kiro قدرات إنشاء التعليمات البرمجية الذكية، والاختبار الآلي، والتوصيل السلس مع موارد AWS (مثل Lambda و S3 و DynamoDB)، مما يمنحه ميزة فريدة في تطوير التطبيقات السحابية الأصلية.
ملاحظة: إذا كنت ترغب في استخدام النماذج المتعلقة بـ Anthropic Claude، فستحتاج إلى استخدام Cursor أو Kiro أو Antigravity كبيئة تطوير متكاملة (IDE). بيئات التطوير المتكاملة هذه لديها تعاون رسمي أو تكامل عميق مع Anthropic، مما يوفر تجربة Claude أكثر استقرارًا واكتمالاً.
4. تطبيق عملي: إنشاء لعبة الثعبان محليًا باستخدام AI IDE
تحدثنا سابقًا بشكل أساسي عن "المفاهيم" و"الاختلافات". في هذا القسم الفرعي، من خلال تطبيق عملي كامل، سنحول المفاهيم المجردة إلى عمليات ملموسة: إنشاء مجلد فارغ جديد ← فتحه باستخدام AI IDE ← الدردشة في الشريط الجانبي، وجعله ينشئ لك لعبة ثعبان من الصفر باستخدام React. نأخذ Trae المذكور أعلاه كمثال، أولاً تحتاج إلى تثبيت Trae وفهم ماهيته ببساطة.
💡 نصيحة صغيرة: الانتقال السلس من الويب إلى المحلي
إذا كنت قد طورت بالفعل مشاريع سابقًا على منصات برمجة الذكاء الاصطناعي الويب مثل z.ai أو غيرها، يمكنك تنزيل الكود مباشرة إلى جهازك المحلي، ثم فتحه باستخدام AI IDE لمواصلة التطوير. بهذه الطريقة يمكنك الاحتفاظ بإنجازاتك السابقة، والاستمتاع بقدرات المساعدة الأقوى للذكاء الاصطناعي في بيئة التطوير المحلية (IDE).
خطوات العملية بسيطة للغاية:
- انقر على زر التنزيل في منصات مثل z.ai، واحفظ المشروع محليًا
- بعد فك الضغط، افتح المجلد باستخدام AI IDE مثل Trae/Cursor
- واصل الحوار مع الذكاء الاصطناعي في الشريط الجانبي، وقم بتحسين مشروعك بشكل تكراري
4.1 الاستعدادات: تثبيت Trae والتعرف عليه
4.1.1 ما هو Trae
الاسم الكامل لـ Trae يمكن فهمه على أنه "The Real AI Engineer"، وهو بيئة تطوير متكاملة (IDE) ذكية متكيفة مع الذكاء الاصطناعي طورتها شركة ByteDance. تم بناؤه على أساس VS Code الشهير، مما يعني أنه إذا كنت معتادًا بالفعل على VS Code، فستشعر بالألفة والراحة عند استخدام Trae، سواء في تخطيط الواجهة أو العمليات الأساسية.
الهدف الأساسي من Trae هو أن يصبح "شريك برمجة ذكي" للمطورين. من خلال التكامل العميق مع قدرات الذكاء الاصطناعي، يمكنه معالجة الكثير من الأعمال المتكررة تلقائيًا، مما يوفر لك تجربة تطوير أكثر بديهية وكفاءة. إنه ليس مجرد "أداة إكمال الكود"، بل يهدف إلى مرافقة سير عمل التطوير بالكامل، من إنشاء المشاريع وكتابة الكود والتصحيح والاختبار إلى النشر.
4.1.2 تثبيت Trae
ينقسم Trae إلى نسخة دولية ونسخة صينية. النسخة الدولية تتطلب القدرة على الوصول إلى الشبكات الخارجية، لكن يمكنها استخدام أحدث النماذج الخارجية مثل GPT-5؛ بينما النسخة الصينية تدعم بشكل أساسي أحدث النماذج الكبيرة المحلية، مثل GLM و Qwen و Kimi وغيرها.
رابط تنزيل النسخة الدولية: https://www.trae.ai/ رابط تنزيل النسخة الصينية: https://www.trae.cn/
تسعير Trae وطريقة الاستخدام
💡 نصيحة اختيار النسخة (يُنصح بالنسخة CN للمبتدئين)
- يُنصح المبتدئون بشدة بتنزيل النسخة الصينية (نسخة CN، trae.cn)، تجربة الاستخدام أفضل حاليًا، والميزات الأساسية مجانية دون الحاجة لشبكات خارجية
- إذا كنت بحاجة لاستخدام نماذج خارجية مثل GPT-5، وتسمح ظروف شبكتك بذلك، يمكنك اختيار النسخة الدولية
- إذا كان لديك مفتاح API لنموذج طرف ثالث، فإن ربط نموذج الطرف الثالث يمكن أن يوفر تحكمًا مرنًا في التكاليف
💡 يُنصح حاليًا باستخدام نموذج OpenRouter المجاني للاختبار
حتى وقت كتابة هذا الدليل (2026-02-12)، لا يزال من الممكن تجربة نموذج StepFun مجانًا. يمكنك الرجوع إلى طريقة ربط النموذج في القسم 4.2 أدناه، وربط
stepfun/step-3.5-flash:free.
فيما يتعلق بتكاليف Trae وطرق استخدامه، هناك الخيارات التالية المتاحة:
- النسخة المحلية CN (يُنصح بها بشدة): الاستخدام الأساسي مجاني، وتجربة الاستخدام العامة أفضل حاليًا من النسخة الدولية، ومناسبة جدًا للمبتدئين. نظرًا لوجود عدد كبير من المستخدمين، قد تحتاج أحيانًا للانتظار في طابور.
- النسخة الدولية: سعر الاشتراك حوالي 3 دولارات أمريكية شهريًا تقريبًا، ويمكنها الوصول إلى النماذج الخارجية مثل GPT-5، لكنها تتطلب القدرة على الوصول إلى الشبكات الخارجية.
- ربط نموذج طرف ثالث: إذا كان لديك بالفعل Token API لنموذج محلي كبير (مثل DeepSeek و Tongyi Qianwen و Kimi وغيرها)، يمكنك ربط هذه الـ APIs واستخدامها من خلال وظيفة تكوين نموذج الطرف الثالث في Trae. عادةً ما توفر مزودو الخدمات السحابية الكبرى (مثل Alibaba Cloud و Tencent Cloud و Baidu Cloud وغيرها) خطط اشتراك Coding Plan، وبعد الشراء يمكنك استخدام واجهات برمجة تطبيقات النماذج الكبيرة الخاصة بهم بأسعار أكثر تنافسية. بهذه الطريقة يمكنك اختيار النموذج المفضل لديك بحرية، والتحكم في تكاليف الاستخدام في نفس الوقت.
يُنصح المبتدئون بالبدء بتجربة النسخة المجانية CN المحلية (رابط التنزيل: https://www.trae.cn/)، تجربة استخدام النسخة CN أفضل حاليًا ومجانية تمامًا. إذا واجهت مشاكل في الانتظار أو كنت بحاجة لخدمة أكثر استقرارًا، يمكنك التفكير في ربط نموذج طرف ثالث وشراء خطة Coding Plan من مزود الخدمة السحابية المقابل.
4.1.3 مقدمة موجزة عن واجهة Trae
من حيث شكل الواجهة، Trae مشابه جدًا لـ VS Code الذي نستخدمه يوميًا: نفس التخطيط الكلاسيكي ذو الأعمدة الثلاثة مع مستكشف الموارد على اليسار، ومنطقة التحرير في الوسط، ولوحة الإضافات على اليمين.
الشريط الجانبي الموجود على اليمين هو نافذة تفاعل Copilot، ويمكن أيضًا فهمها كنافذة Agent. إذا لم تتمكن من رؤيتها مؤقتًا، يمكنك النقر على أيقونة الشريط الجانبي في الزاوية العلوية اليمنى من Trae لفتحها.
بعد فتح الشريط الجانبي، سترى خيار Builder، وهذا هو وضع Agent. ببساطة يمكن فهمه على أنه "النسخة المحلية" من z.ai، حيث يمكنه مساعدتك في تشغيل بيئة الجهاز المحلي، وتثبيت بيئات التشغيل، وفتح صفحات الويب وغيرها.
بعد النقر على "Builder"، سترى وضع "Chat" ووضع "Builder with MCP":
- وضع Chat: يُستخدم بشكل أساسي للحوار مع الكود الموجود في المجلد الحالي، أو استخدامه كنموذج دردشة عادي. (يمكنك فتح مجلد من خلال قائمة "File" في الزاوية العلوية اليسرى، وإجراء عمليات التحرير في هذا المجلد. في هذه الحالة، لن يتم إنشاء أو تعديل الملفات التي ينشئها Builder إلا داخل هذا المجلد.)
- وضع Builder with MCP: يوفر للمزيد من الأدوات المتاحة لـ Agent (مثل ربط نموذج اللغة ببرامج أخرى، والاستعلام عن الطقس، إلخ). يمكنك الفهم البسيط بأن: MCP يمكن أن يجعل نموذج اللغة يستدعي أدوات خارجية متنوعة بشكل أكثر ملاءمة.
في المنطقة السفلية، سترى أيضًا خيار اختيار النموذج، حيث يمكنك النقر لتعديل النموذج الكبير المستخدم حاليًا. في النسخة الصينية، يمكنك اختيار استخدام نماذج محلية مثل Kimi k2 أو GLM؛ وإذا كنت تستخدم النسخة الدولية من Trae، يمكنك أيضًا اختيار نماذج خارجية مثل ChatGPT أو Claude. ومع ذلك، نظرًا للتطور السريع للنماذج الكبيرة المحلية، أصبحت التجربة العملية لـ Kimi و Qwen و GLM وغيرها في العديد من المهام قريبة بالفعل من Claude 3.5 أو 3.7، وهي كافية تمامًا للتطوير اليومي، ولا نُلزم هنا باستخدام النسخة الدولية أو المحلية للعمل.
يجب ملاحظة أنه لا يُنصح هنا باستخدام وضع Auto (الاختيار التلقائي للنموذج)، إذا كانت نسخة دولية، ننصح باستخدام نموذج Gemini أو GPT، وإذا كانت نسخة محلية، ننصحك بتجربة نماذج محلية مثل Kimi k2 أو Minimax أو GLM، النماذج المختلفة لها سيناريوهات استخدام مختلفة، ولا يوجد قاعدة صارمة بأن أحدهما أفضل من الآخر بالتأكيد، يمكنك تغيير النموذج عند مواجهة صعوبات في مهام مختلفة وعدم القدرة على الحل، ومن خلال اختبارات متعددة الحصول على أفضل النتائج التجريبية الخاصة بك.
ما سبق كان مقدمة موجزة عن Trae. بعد ذلك، يمكننا مراجعة العمليات التي قمنا بها سابقًا في z.ai، ومحاولة القيام بنفس الأشياء في Trae.
4.2 الخطوة الأولى: إنشاء مجلد فارغ جديد وفتحه باستخدام AI IDE
قبل البدء الفعلي، نحتاج أولاً إلى إعداد دليل عمل مشروع نظيف. باستخدام مثال هذا القسم الفرعي كمثال، يمكنك إنشاء مجلد فارغ جديد محليًا باسم snake-game-react.
بعد ذلك، افتح AI IDE المثبت، واختر في واجهة البدء فتح مجلد أو Open Folder، واستورد هذا المجلد الفارغ كدليل جذر للمشروع؛ أو يمكنك سحب المجلد وإفلاته مباشرة في نافذة IDE لإتمام الفتح. في هذا الوقت، لن يظهر أي ملفات كود في مستكشف الموارد على اليسار، مما يشير إلى أننا نبدأ من حالة مشروع فارغة تمامًا.
📚 اختياري: ربط API أو Coding Plan من مزود خدمة سحابية
سيقدم هذا القسم كيفية ربط API أو Coding Plan من مزود خدمة سحابية، للحصول على استدعاءات نموذج أكثر استقرارًا وتكرارًا. سيتم تقديم لقطة شاشة للربط في Trae في الجزء الختامي.
ما هو Coding Plan
Coding Plan هو خطة اشتراك تطلقها مزودو الخدمات السحابية الكبرى، وبعد الشراء يمكنك استخدام واجهة برمجة تطبيقات النموذج الكبير الخاص بالمزود بشكل غير محدود أو بتكرار عالٍ خلال فترة زمنية معينة. مقارنة بطريقة الدفع حسب Token، فإن Coding Plan أشبه بـ "باقة شهرية" — تدفع مبلغًا ثابتًا، ويمكنك استخدامه بثقة وجرأة دون القلق من أن كل استدعاء سيكلفك رسومًا.
لماذا تحتاج لشراء Coding Plan قد تتساءل: بما أنه يمكن استخدام استدعاءات API للنماذج الكبيرة مباشرة، فلماذا نشتري خطة البرمجة (Coding Plan)؟ الأسباب الرئيسية هي: الاستخدام المستمر: الميزة الأساسية لخطة البرمجة هي أنه يمكنك استدعاء النماذج الكبيرة في أي وقت وبشكل متكرر، دون القلق من ارتفاع التكاليف، ولا تحتاج إلى مراقبة عداد الفوترة باستمرار.
خطط البرمجة المُوصى بها من خدمات السحابة المحلية
فيما يلي خيارات خطط البرمجة المُوصى بها التي تقدمها شركات الخدمات السحابية المحلية الرئيسية:
- Zhipu AI (BigModel Plan): https://bigmodel.cn/glm-coding
- Volcengine (ByteDance Cloud AI Plan): https://www.volcengine.com/activity/codingplan
💡 يمكنك أيضًا الاتصال مباشرة بواجهة برمجة تطبيقات النماذج الكبيرة (API) بالإضافة إلى خطة البرمجة، يمكنك أيضًا الاتصال بواجهات برمجة تطبيقات النماذج الكبيرة مباشرة من خلال Add Model. يمكنك الرجوع إلى طريقة الاتصال بواجهة برمجة تطبيقات StepFun المجانية عبر OpenRouter أدناه، وإدخال واجهة برمجة التطبيقات (API) إلى Trae لاستخدامها. لقد ثبت بالاختبار أنها تلبي احتياجات البرمجة الأساسية. إذا كنت بحاجة إلى إضافة رصيد، يُنصح بإضافة 10 يوانات أولاً لتجربة المدة التي ستستغرقها، مثل النماذج عالية التكلفة والفعالية مثل DeepSeek وغيرها.
كيفية الاتصال بخطة البرمجة (Coding Plan)
خطوات الاتصال بخطة البرمجة بسيطة جدًا، ويمكن إكمالها في بضع دقائق فقط:
- قم بزيارة الموقع الرسمي لمزود الخدمة السحابية الذي اخترته (مثل Zhipu AI: https://bigmodel.cn/glm-coding ، Volcengine: https://www.volcengine.com/activity/codingplan)
- قم بتسجيل حساب وتسجيل الدخول
- ابحث عن صفحة "التسعير" أو "Coding Plan"
- اختر الباقة المناسبة لك وأكمل عملية الدفع
- بعد نجاح الدفع، ستحصل على مفتاح واجهة برمجة التطبيقات (API Key) أو معرف الخطة (Plan ID)
🎯 توصية النموذج المخصص
عند إدخال نموذج مخصص في Trae، نوصي افتراضيًا باستخدام حل OpenRouter. يوفر OpenRouter واجهة برمجة تطبيقات (API) موحدة، مما يسمح بالاتصال بسهولة بمجموعة متنوعة من النماذج اللغوية الكبيرة.
حتى 12 فبراير 2026، يمكنك أيضًا استخدام واجهة برمجة تطبيقات StepFun المجانية:
stepfun/step-3.5-flash:free: نموذج مجاني توفره StepFun، ويدعم أيضًا الاتصال والاستخدام المباشر في Trae.
نماذج مجانية أخرى:
openrouter/free: هذا خيار نموذج يستخدم واجهة برمجة تطبيقات LLM مجانية افتراضيًا، ويمكن استخدامه مباشرة في الاتصال بالنموذج المخصص (Custom Model) في Trae (فقط اكتب معرف النموذج مباشرة)، ويمكنك تجربة وظائف برمجة الذكاء الاصطناعي دون دفع أي رسوم.
هذه الخيارات المجانية مثالية جدًا للمبتدئين لتجربة البرمجة بالذكاء الاصطناعي، وقبل الاستثمار في بيئة الإنتاج الرسمية، يمكنك أولاً التعرف على سير العمل في بيئة تطوير الذكاء الاصطناعي (AI IDE) من خلال هذه الحلول المجانية.
اختياري: الاتصال بواجهة برمجة تطبيقات استدعاء النماذج الكبيرة (باستخدام DeepSeek كمثال)
- قم بزيارة منصة DeepSeek: https://platform.deepseek.com/usage
- قم بتسجيل حساب وتسجيل الدخول
- قم بشراء حزمة Token بقيمة 10 يوانات في صفحة إضافة الرصيد
- بعد نجاح إضافة الرصيد، قم بإنشاء ونسخ مفتاح واجهة برمجة التطبيقات (API Key) في صفحة API Keys
- في Trae، انقر فوق "Add Model"، وابحث عن DeepSeek، واختر النموذج المقابل، وأدخل مفتاح واجهة برمجة التطبيقات (API Key) لبدء الاستخدام
من خلال الواجهة التالية، يمكنك الإضافة بنجاح (لاحظ أنه بعد تحديد خيار النموذج [يجب التمرير إلى الأسفل]، يوجد أدناه "نموذج مخصص"، وبعد النقر عليه يمكنك إدخال معرف النموذج، في هذه المرحلة يمكنك إدخال معرف النموذج الموصى به أعلاه مثل stepfun/step-3.5-flash:free وكتابته مباشرة، وفي نفس الوقت انقر فوق Get Key أدناه للذهاب إلى الموقع الرسمي للحصول على مفتاح واجهة برمجة التطبيقات (API Key) المقابل واكتبه للاستخدام العادي.)
4.3 الخطوة الثانية: الدردشة في الشريط الجانبي، وجعل الذكاء الاصطناعي يصمم لعبة الثعبان باستخدام React
بعد ذلك، افتح الشريط الجانبي لدردشة الذكاء الاصطناعي: عادةً بالضغط على Ctrl+L أو النقر على أيقونة الدردشة الموجودة على اليمين. ثم أدخل موجهًا واضحًا بما فيه الكفاية في الدردشة:
يُرجى تنفيذ لعبة الثعبان باستخدام بنية React، بما في ذلك التحكم بلوحة المفاتيح، وزيادة الطول والنقاط عند أكل الطعام، وعرض "انتهت اللعبة" عند الاصطدام بالجدار أو بنفسها مع إمكانية إعادة التشغيل. بعد التنفيذ، ساعدني في تشغيل هذا المشروع. إذا واجهت بيئة برنامج غير مثبتة، قم بتثبيت البيئة المفقودة تلقائيًا.
في هذه العملية، تحتاج إلى إدراك أن الذكاء الاصطناعي ليس مجرد نموذج دردشة، بل يمكنه مساعدتك في تشغيل بيئة الجهاز المحلي: إنشاء الملفات، وتثبيت التبعيات، وتنفيذ أوامر التشغيل، وما إلى ذلك. يمكنك ببساطة استخدام اللغة الطبيعية لوصف الهدف الذي تريد تحقيقه، وسيقوم الذكاء الاصطناعي بتحديد الأوامر المحددة التي يجب تنفيذها وكيفية تنظيم الكود البرمجي.
إذا واجهت مشاكل أثناء التنفيذ، سيعرض الذكاء الاصطناعي رسائل الخطأ وحلولها في المحادثة، ويمكنك الاستمرار في التحدث معه لتعديلها بدلاً من الاضطرار إلى تذكر جميع تفاصيل الأوامر بنفسك.
⚠️ ملاحظة هامة
على سبيل المثال، كما هو موضح في الشكل أدناه، أحيانًا يتوقف وكيل الذكاء الاصطناعي (AI Agent) أثناء التنفيذ، وذلك لأنه يحتاج إلى انتظارك لإدخال بعض المعلومات للتفاعل، مثل إدخال اسم الإنشاء، أو الضغط على Enter لتأكيد تنفيذ الأمر. أو النقر على الأمر لتنفيذه. في الحالات العادية، يمكننا ببساطة الضغط على Enter، وإذا لم تكن متأكدًا مما يجب فعله في هذه الخطوة، يمكنك التقاط لقطة شاشة للواجهة الحالية وسؤال النموذج الكبير عن كيفية المتابعة.
كما هو موضح في الشكل، نحتاج هنا إلى النقر فوق Run للتأكيد: 
كما هو موضح في الشكل، نحتاج هنا فقط إلى إدخال y للتأكيد: 
كما هو موضح في الشكل، نحن هنا نقوم بإنشاء قالب، لكننا لا نعرف كيفية المتابعة، يمكننا التقاط لقطة شاشة لهذا الجزء وسؤال النموذج الكبير:
هناك سبب آخر لتوقف وكيل الذكاء الاصطناعي (AI Agent) أثناء التنفيذ وهو أنه تم بدء تشغيل "خدمة" في هذه المرحلة، ولعبة الثعبان الخاصة بنا في حد ذاتها تعتبر نوعًا من "الخدمات"، وإذا رأيت عنوان URL للأمر كما يلي، فهذا يعني أن الوكيل قد بدأ تشغيل خدمة محلية على الكمبيوتر لنا، ويمكننا زيارة عنوان URL المقابل للوصول إلى لعبة الثعبان الخاصة بنا، وبما أن الخدمة تحتاج إلى الاستمرار في العمل، فستتوقف هنا. نحتاج فقط إلى النقر فوق زر Skip.
أثناء هذه العملية، إذا واجهت بعض المصطلحات أو محتوى يصعب فهمه، فلا تقلق، يمكنك الرجوع إلى قسم "شرح المصطلحات الحاسوبية" في الملحق، أو سؤال الذكاء الاصطناعي مباشرة، أو طرح أسئلة في الوقت المناسب!
إذا واجهت ظواهر غير متوقعة أثناء العملية، مثل عدم انتهاء اللعبة عند اصطدام الثعبان بالجدار، أو عدم تحرك الثعبان بعد النقر على "ابدأ"، فما عليك سوى وصف الظاهرة للوكيل (Agent) في الشريط الجانبي. وإذا واجهت رسائل خطأ، تذكر التقاط لقطة شاشة أو نسخ الخطأ إلى وكيل الشريط الجانبي، وإذا استمرت المشكلة دون حل بعد عدة محاولات، حاول تغيير النموذج.
بعد لحظات قصيرة، يمكننا الحصول على نتيجة مشابهة لـ z.ai:
يمكننا النقر على علامة الصح في الزاوية اليمنى السفلية لتأكيد تغييرات الكود، أو النقر فوق زر Cancel لإلغاء التغييرات. أو النقر فوق 2 files need review لتوسيع وعرض الكود بعد التغيير.
ومن الجدير بالملاحظة هنا أيضًا أنه نظرًا لأن تعديل الكود ليس صحيحًا بالضرورة، فنحن بحاجة إلى معرفة أن جميع وكلاء بيئات التطوير (IDE Agents) يدعمون التراجع عن الكود. على سبيل المثال، إذا قمت بإجراء تعديل خاطئ عن طريق الخطأ هنا، أو إذا كانت نتيجة هذه العملية غير مرضية لك، بعد انتهاء التعديل يمكننا العودة إلى جزء مربع الإدخال، والنقر على زر Revert للتراجع عن العملية إلى حالتها قبل التعديل، ويمكنك تعديل النص المدخل لإجراء عملية أخرى:
4.4 الخطوة الثالثة (اختياري): سؤال الذكاء الاصطناعي عن تفاصيل تنفيذ الكود
عندما تصبح لعبة الثعبان قابلة للتشغيل بشكل طبيعي، إذا لم تكن ملمًا جدًا بالواجهة الأمامية أو React، يمكنك الاستمرار في نفس نافذة الدردشة، واطلب من الذكاء الاصطناعي مساعدتك في استعراض الكود بطريقة سهلة ومبسطة قدر الإمكان. لست بحاجة إلى التبديل بين الأدوات، ولا داعي للبحث في الوثائق عمدًا، فقط استمر في طرح الأسئلة حول المشروع الحالي.
من الممارسات العملية الجيدة أن تطلب من الذكاء الاصطناعي شرح "كيف تتحرك اللعبة" بشكل عام أولاً، ثم الانتقال إلى التفاصيل الدقيقة. على سبيل المثال، يمكنك السؤال مباشرة:
"يُرجى الشرح من الأعلى إلى الأسفل، كيف تتحرك لعبة الثعبان هذه خطوة بخطوة؟ استخدم أقل قدر ممكن من المصطلحات التقنية."
ثم تابع طرح الأسئلة على النقاط الرئيسية بناءً على إجابته، على سبيل المثال:
"كيف يتم تسجيل كل جزء من جسم الثعبان على الشاشة؟ بأي هيكل بيانات؟ هل يمكنك إعطاء مثال توضيحي؟"
"كيف تتحكم في 'الحركة كل فترة زمنية'؟ أي جزء من الكود مسؤول عن ذلك؟"
"عندما يأكل الثعبان الطعام، ما هي الخطوات التي تقوم بها؟ وفي أي جزء من المنطق يتم الحكم على أنه أكله؟"
"الاصطدام بالجدار والاصطدام بنفسه، في أي أجزاء من الكود يتم الحكم على كل منهما؟"
إذا رأيت ملفًا معينًا (مثل SnakeGame.tsx) ولكنك لا تعرف على الإطلاق ماذا يفعل، فيمكنك أيضًا أن تطلب من الذكاء الاصطناعي شرحه لك بشكل مقسم إلى كتل:
"يرجى شرح
SnakeGame.tsxمقسمًا حسب الوظائف: ما المسؤول عنه كل كتلة تقريبًا، باستخدام مصطلحات أبسط."
في هذه الجولة من المحادثة، يمكنك اعتبار كل كلمة لا تفهمها مدخلًا لسؤال متابع، على سبيل المثال:
"ماذا تقصد بـ 'الحالة' التي ذكرتها للتو؟ هل يمكنك تفسيرها بمثال من الحياة اليومية؟"
"ما هو الغرض الرئيسي من 'المؤقت' الذي ذكرته هنا؟ ماذا سيحدث إذا أزلناه؟"
من خلال هذه الطريقة، هدفك ليس حفظ جميع المفاهيم دفعة واحدة، بل توضيح ثلاثة أشياء أولاً: ما هي البيانات الأساسية في هذه اللعبة (الثعبان، الطعام، النقاط، حالة اللعبة، إلخ)، متى تتغير هذه البيانات (عند الحركة، أكل الطعام، انتهاء اللعبة، إلخ)، وأي جزء صغير من الكود يتوافق مع كل تغيير. طالما تم توضيح هذه النقاط الثلاث، يمكنك بشكل أساسي فهم المنطق الرئيسي لهذا الكود.
4.5 الخطوة الرابعة: دع الذكاء الاصطناعي يجعل الواجهة أجمل
هنا نود تنبيهك أولاً لأمر مهم جدًا للمبتدئين: لا تقل للذكاء الاصطناعي فقط "أريد أن أجعل هذه الواجهة أجمل". هذا التعبير غامض جدًا حتى على المصممين البشر، فما بالك بالذكاء الاصطناعي — ما هو الأسلوب الذي تعنيه بـ "أجمل"؟ ما هي الأجزاء التي تحتاج إلى تعديل؟ هل المشكلة في التخطيط أم في الألوان؟ الذكاء الاصطناعي لا يمكنه استنتاج كل ذلك من جملتك هذه. لجعل الذكاء الاصطناعي ينتج حقًا شيئًا قريبًا مما تتخيل، تحتاج إلى تعلم كيفية تفكيك الهدف الغامض "أريد أن تبدو جميلة" إلى سلسلة من المتطلبات الصغيرة المحددة والقابلة للتنفيذ.
على سبيل المثال، سيقول الكثير من الناس في البداية هكذا:
"أريد أن أجعل هذه الواجهة أجمل قليلاً."
على سبيل المثال، يمكنك أولاً تقديم مجموعة من المتطلبات العامة:
"ساعدني في تحسين واجهة اللعبة بشكل عام:
- عرض منطقة اللعبة في الوسط، ولا تضعها في الزاوية اليسرى العليا؛
- تغيير لون الخلفية إلى لون أفتح، لجعل الثعبان والطعام أكثر بروزًا؛
- تكبير النقاط ووضعها في مكان واضح؛
- استخدام اللون الأزرق كلون رئيسي، وتحسين الألوان والأزرار بشكل عام."
إذا كنت تأمل في الحصول على ردود فعل أوضح عند "انتهاء اللعبة"، يمكنك إضافة المزيد من التفاصيل:
"عندما تنتهي اللعبة، يرجى عرض 'انتهت اللعبة' في وسط الشاشة، مع زر 'إعادة البدء' تحته، يمكنه إعادة ضبط اللعبة."
سيقوم الذكاء الاصطناعي بناءً على وصفك بتعديل مكونات React والأنماط مباشرة. بعد الحفظ، قم بتحديث المتصفح، وستتمكن من رؤية الواجهة الجديدة. إذا كان لا يزال هناك فارق بين التأثير وما تخيلته، يمكنك الاستمرار في إجراء تعديلات صغيرة خطوة بخطوة، على سبيل المثال:
"اجعل النقاط أكبر قليلاً، واللون أكثر بروزًا."
"اجعل منطقة اللعبة أكثر تماسكًا قليلاً، مع ترك مساحة بيضاء صغيرة حولها."
"غيّر زر إعادة البدء إلى نمط أزرق بزوايا دائرية، وضعه في الوسط أسفل الرسالة."
في هذه المرحلة، إذا تسبب أي تعديل في ظهور خطأ، فلا داعي للبحث عنه بنفسك. فقط انسخ رسالة الخطأ إلى نافذة الدردشة، أو أضف وصفًا موجزًا، مثل "هذا هو الخطأ الذي ظهر بعد أن قمت بتحسين الواجهة للتو"، ودع الذكاء الاصطناعي يساعدك في تحديد مكان المشكلة وإصلاحها في سياق المشروع الحالي. بهذه الطريقة، يمكنك من خلال حلقة مستمرة من "المحادثة والتحديث" صقل العرض التجريبي (Demo) الذي يعمل تدريجيًا إلى منتج صغير بواجهة واضحة وتفاعل سلس.
4.6 (اختياري) الرجوع إلى بنية z.ai لتعديل نتيجة لعبة الثعبان
بالنسبة لمبتدئي البرمجة بالذكاء الاصطناعي (vibe coding)، فإن أصعب شيء هو في الواقع عدم معرفة ما يُعد "أفضل ممارسة"، وعدم معرفة البنية الأنسب؛ وبسبب عدم المعرفة بأساسيات الحاسوب، لا يمكن توجيه الذكاء الاصطناعي بشكل جيد. طريقة حل هذه المشكلة هي "الرجوع مباشرة إلى نموذج"؛ هل تتذكر ما قلناه سابقًا عن إمكانية عرض الكود في z.ai؟ في الواقع، تم بالفعل تقديم مرجع لأفضل بنية في README (الجزء الخاص بتقديم الوظائف والبنية التقنية في المشروع):
نريد أن نجعل النتيجة المحلية تتطابق قدر الإمكان مع نتيجة z.ai، يمكننا نسخ المحتوى الكامل لـ README هذا ولصقه في الشريط الجانبي لـ Trae، وجعله يعدل الكود المحلي بناءً على بنية README.
أخيرًا، يمكننا الحصول على نمط تصميم صفحة مشابه جدًا لـ z.ai:
5. ما هي وظيفة كل زر في الواجهة
في العمليات المذكورة أعلاه، أكملنا بسرعة حلقة إنشاء البرامج المصغرة، لكننا لا نزال لا نعرف الكثير عن بيئة التطوير (IDE). من أجل التعرف بدقة على هذه الأداة التي سترافقنا لفترة طويلة. سنقوم في هذا القسم بشرح مفصل لكل تفصيلة في بيئة التطوير، ونبدأ بالواجهة. تختلف واجهات بيئات التطوير بالذكاء الاصطناعي قليلاً، لكن معظمها يتبع تخطيط VS Code.
الوظيفة المحددة لكل جزء هي:
- Title Bar (شريط العنوان): يعرض اسم الملف وأزرار التحكم بالنافذة.
- Activity Bar (شريط النشاط): للتبديل بين طرق عرض الملفات والبحث والوظائف الأخرى.
- Side Bar (الشريط الجانبي): يعرض محتويات محددة مثل قائمة الملفات.
- Editor Groups (منطقة التحرير): المنطقة الأساسية لكتابة الكود.
- Breadcrumbs (مسار التنقل): يعرض مسار الملف ويدعم الانتقال السريع.
- Minimap (خريطة الكود المصغرة): للمعاينة السريعة وتحديد موقع الكود.
- Panel (اللوحة السفلية): تحتوي على نافذة الطرفية والمخرجات.
- Status Bar (شريط الحالة): يعرض حالة البيئة الحالية.
للحصول على شرح أكثر تفصيلاً، يرجى الاطلاع على قسم مبادئ IDE الافتراضي والمرئي في الملحق.
6. كيف تتحدث مع الذكاء الاصطناعي بفعالية
مع تزايد قدرات الذكاء الاصطناعي، أصبح بإمكاننا تسليم الكثير من أعمال "جعل المبرمجين يكتبون الكود" إلى الذكاء الاصطناعي.
ولكن، في الاستخدام الفعلي ستكتشف: باستخدام نفس الذكاء الاصطناعي، يمكن لبعض الأشخاص الحصول على مشروع صغير يعمل بجمل قليلة، بينما يتحدث آخرون لفترة طويلة وتكون النتيجة مختلفة تمامًا عما يريدون. غالبًا لا يكمن الاختلاف في "من هو أذكى"، بل في — طريقتك في التحدث مع الذكاء الاصطناعي، هل هي محددة كفاية؟ هل تتبع خطوات كافية؟
في هذا القسم، سننطلق من عدة سيناريوهات شائعة لنقدم بعض طرق طرح الأسئلة المناسبة تمامًا للمبتدئين، لمساعدتك على جعل الذكاء الاصطناعي يقدم نتائج قابلة للاستخدام بشكل أكثر استقرارًا.
6.1 اشرح احتياجاتك بوضوح: من "الفكرة الغامضة" إلى "الوصف المحدد"
كثير من الناس عند استخدام الذكاء الاصطناعي لأول مرة، يعتادون على قول جملة عامة جداً، مثل:
"ساعدني في عمل صفحة ويب."
"ساعدني في كتابة برنامج صغير."
في هذه الحالة، يمكن للذكاء الاصطناعي فقط "تخيل" ما تريده، لذا سيعطيك شيئًا يبدو مكتملًا، ولكنه غالبًا ما يختلف كثيرًا عما تريد فعله حقًا.
لجعل الذكاء الاصطناعي يفهمك بشكل أفضل، تحتاج إلى تفكيك "الأفكار في رأسك" وشرحها خطوة بخطوة في بضع جمل.
يمكنك البدء بإضافة التفاصيل من هذه الجوانب:
أخبره بما ستستخدمه من أجله
على سبيل المثال، لا تقل فقط "موقع شخصي"، بل قل:- "أريد إنشاء صفحة ويب لمحة شخصية من صفحة واحدة فقط، لإرسالها إلى مسؤولي التوظيف."
أخبره بالأقسام الرئيسية التي تحتاجها تقريبًا
لا داعي لاستخدام مصطلحات تقنية، فقط صف ما تريد أن يظهر على الصفحة، مثل:- "يجب أن تحتوي الصفحة على ثلاثة أجزاء: الأعلى هو الاسم وجملة تعريفية عن النفس، والوسط يعرض عدة خبرات عمل، والأسفل يضع البريد الإلكتروني ورقم WeChat."
أخبره بمستواك وقيودك
اجعل AI يعمل بطريقة يفهمها المبتدئ تمامًا، مثل:- "أنا لا أعرف كيفية كتابة التعليمات البرمجية على الإطلاق، يرجى استخدام أبسط طريقة فقط، حتى أتمكن من نسخها مباشرة إلى ملف وفتحه في المتصفح."
أخبره كيف تريد استلام النتيجة
على سبيل المثال:- "يرجى إعطائي كود كامل يمكن حفظه مباشرة كـ
index.htmlوفتحه في المتصفح."
- "يرجى إعطائي كود كامل يمكن حفظه مباشرة كـ
بدمج كل ذلك معًا، يمكنك أن تقول لـ AI ما يلي:
"أنا لا أعرف كيفية كتابة التعليمات البرمجية على الإطلاق، وأريد إنشاء صفحة ويب لملف شخصي تحتوي على صفحة واحدة فقط، لإرسالها إلى مسؤولي التوظيف لرؤيتها.
تحتاج الصفحة إلى ثلاثة أجزاء: السطر العلوي هو الاسم وجملة تعريفية عن النفس، والوسط هو عدة خبرات عمل، والأسفل هو البريد الإلكتروني ورقم WeChat.
عندما توضح هذه المعلومات، سيتمكن AI من الاقتراب أكثر من احتياجاتك الحقيقية، بدلاً من إعطائك شيئًا "يبدو رائعًا ولكنك لا تستطيع استخدامه".
6.2 التحكم في الوتيرة: اجعلها "تعمل أولاً"، ثم اجعلها معقدة تدريجيًا
بالنسبة للمبتدئين تمامًا، فإن الفخ الأكثر شيوعًا هو: الرغبة في إنشاء شيء "كامل جدًا" و"ذو وظائف كثيرة" من البداية.
مثل:
"ساعدني في إنشاء موقع ويب مثل Taobao."
"ساعدني في إنشاء نظام يمكنه التسجيل وتسجيل الدخول ووضع الطلبات."
النتيجة غالبًا هي: يعطيك AI كومة كبيرة من التعليمات البرمجية، وبعد نسخها إما لا تفتح، أو تظهر أخطاء في كل مكان؛ ولا يمكنك فهم أين تكمن المشكلة، وفي النهاية تستسلم.
النهج الأنسب هو التحكم في الوتيرة بنشاط، وجعل AI يتبعك خطوة بخطوة، بدلاً من إلقاء كل شيء عليك دفعة واحدة. يمكنك تقديم المتطلبات بالترتيب التالي:
الخطوة الأولى: اطلب أولاً "أصغر مثال"
تحقق من شيء واحد فقط: هل يمكنك رؤية شيء ما في المتصفح.
على سبيل المثال:"يرجى إعطائي أبسط مثال أولاً، طالما أنني أستطيع رؤية سطر 'هذه صفحتي الرئيسية' في المتصفح.
ثم أخبرني خطوة بخطوة: ما يجب أن يسمى اسم الملف، وكيف يجب حفظه، وكيف تفتحه."الخطوة الثانية: على هذا الأساس، أضف المحتوى ببطء حتى يكتمل
عندما تتأكد من "أنني أستطيع بالفعل رؤية ذلك السطر"، قل:"على أساس ما سبق، ساعدني في إضافة منطقة 'خبرات العمل'، وأعد إرسال الكود الكامل إلي. لا ترسل الجزء المعدل فقط."
الخطوة الثالثة: بعد أن يصبح الهيكل جاهزًا تقريبًا، فكر فيما إذا كان يبدو جيدًا
على سبيل المثال:"الآن يمكن للصفحة عرض المحتوى بشكل طبيعي. بعد ذلك، يرجى مساعدتي في تحسينها قليلاً: توسيط المحتوى بالكامل، جعل العنوان أكبر قليلاً، واستخدام خط مريح. يرجى إعطائي الكود الكامل المحدث."
مع كل إضافة، تقوم بتشغيلها مرة واحدة أولاً، وتتأكد من حدوث تغيير فعلي، ثم تطلب من AI إضافة المزيد. بهذه الطريقة، حتى لو حدثت مشكلة في خطوة معينة، يمكنك العودة بسرعة إلى حالة "الإصدار السابق كان يعمل بشكل طبيعي"، بدلاً من الاضطرار إلى الهدم بالكامل والبدء من جديد.
6.3 استخدم لقطات الشاشة والنسخ بحكمة: إذا لم تكن تعرف كيف تقولها، "ألقِ الشاشة لـ AI"
تكمن الصعوبة التي يواجهها الكثير من المبتدئين تمامًا ليس في "عدم معرفة كيفية تعديل الكود"، بل في عدم معرفة كيفية التعبير عن المشكلة.
مثل:
- فجأة يظهر في المتصفح مجموعة كبيرة من رسائل الخطأ باللغة الإنجليزية، التي لا تفهمها على الإطلاق.
- تخطيط صفحة الويب ليس كما تريد، لكنك لا تعرف ما هي الكلمات التي يجب استخدامها لوصفه.
في هذه الحالات، لا داعي لاستخراج المصطلحات التقنية بالقوة، أسهل طريقة هي —— إعطاء ما تراه لـ AI كما هو.
يمكنك القيام بذلك:
انسخ نص الخطأ
عندما ترى سلسلة من رسائل الخطأ الحمراء، يمكنك نسخها مباشرة، ثم تقول:"هذه رسالة الخطأ الكاملة التي ظهرت بعد التشغيل. لا أفهم هذه الإنجليزية، يرجى شرحها أولاً بكلمات يفهمها الشخص العادي، ماذا تعني تقريبًا.
ثم أخبرني، ما هو أبسط تعديل يجب أن أقوم به الآن."أظهر لقطة الشاشة لـ AI إذا شعرت أن "هذه الصفحة تبدو خاطئة"، لكنك لا تعرف كيف تصفها، يمكنك:
- التقاط لقطة شاشة للصفحة الحالية؛
- نسخ الكود الذي تستخدمه بالكامل إلى AI؛
- ثم توضح:
"هذا هو شكل الصفحة الآن، وهذا هو الكود الكامل لدي. كنت أتمنى في الأصل أن يكون التخطيط بثلاثة أعمدة، لكنه أصبح الآن بعمود واحد. يرجى مساعدتي في معرفة السبب، وإعطائي كود كامل معدل."
💡 ملاحظة تكميلية حول وظيفة لقطة الشاشة
تجدر الإشارة إلى أن ليس كل نماذج AI تدعم "رؤية الصور". هذا يتضمن مفهومين مختلفين:
نماذج اللغة الكبيرة النصية البحتة (LLM): يمكنها فقط معالجة الإدخال النصي، ولا يمكنها التعرف على محتوى الصور. إذا أرسلت لها لقطة شاشة، فإما ترفض المعالجة، أو لا تستطيع فهم المعلومات الموجودة في الصورة بشكل صحيح.
النماذج متعددة الوسائط: يمكنها معالجة أنواع متعددة من المدخلات مثل النصوص والصور في نفس الوقت، ويمكنها "فهم" لقطة الشاشة التي أرسلتها، وتقديم اقتراحات بناءً على محتوى الصورة.
مرجع قدرات النماذج الشائعة (بأخذ النماذج المتاحة في Trae كمثال):
النموذج هل يدعم إدخال الصور سلسلة Doubao-Seed ✅ يدعم GLM-4.7 / 4.6 ❌ لا يدعم MiniMax-M2.7 / M2.5 ❌ لا يدعم DeepSeek-V3.1 ❌ لا يدعم Kimi-K2.5 ✅ يدعم Kimi-K2-0905 ❌ لا يدعم Qwen-3-Coder ❌ لا يدعم سلسلة Gemini ✅ يدعم سلسلة GPT ✅ يدعم اقتراحات للاستخدام: إذا كنت تريد من AI مساعدتك في فحص مشاكل الواجهة من خلال لقطة الشاشة، يرجى التأكد أولاً من أن النموذج الذي تستخدمه يدعم إدخال الصور. إذا لم يكن يدعم، يمكنك استخدام وصف نصي للمشكلة، أو نسخ رسالة الخطأ ولصقها لـ AI.
عندما تصادف صفحة ويب تعجبك وتريد إنشاء شيء مشابه
لا داعي لقول "ما هو اسم هذا التخطيط"، فقط:- التقط لقطة شاشة أو انسخ العناوين الرئيسية والفقرات لتلك الصفحة؛
- ثم قل:
"أريد إنشاء صفحة بهيكل مشابه لهذا، لا تحتاج إلى أن تكون متطابقة تمامًا.
يرجى مساعدتي في بناء إطار مشابه باستخدام كود أبسط، ثم سأقوم باستبدال النصوص بنفسي."
باختصار: أنت مسؤول عن "نقل ما تراه إلى AI"، ثم تستخدم أبسط الكلمات لتقول "كيف أريد أن يبدو"؛ أما الباقي من "ترجمة إلى كود، وشرح المصطلحات، وإيجاد المشاكل"، فاتركه لـ AI.
6.4 عندما لا يعمل الكود الذي أنشأه AI: مجموعة طرق تعامل عامة
في الممارسة الفعلية، ستواجه بالتأكيد هذا الموقف:
يعطيك AI كودًا بجدية، وأنت تنسخه بأمانة، لكن النتيجة إما أن تكون المتصفح فارغًا تمامًا، أو أنه ليس التأثير الذي قاله على الإطلاق.
هذا لا يعني أنك "لا تستطيع التعلم"، ولا يعني أن AI مخطئ تمامًا، بل إنه لا يزال هناك عدد قليل من جولات "التأكيد المتبادل" بينكما.
عندما "لا يعمل" الكود، يمكنك اتباع مجموعة العمليات الثابتة التالية للتحدث مع AI:
أوضح أولاً "ماذا فعلت + كيف يبدو الآن"
تجنب قول "لا يفتح" أو "لا يعمل" فقط. يمكنك وصفه هكذا:بعد الفتح، الصفحة فارغة تمامًا، ولم تظهر كلمة الترحيب التي قلتها. فتحت صفحة xxxx، ولا يوجد فيها الجزء الذي ذكرته للتو، هذا لا يمكن استخدامه
أرسل الكود الكامل الحالي لـ AI
في كثير من الأحيان تكمن المشكلة في: نسخ سطر أقل، أو اختلاط محتوى المرة السابقة مع محتوى هذه المرة.
يمكنك أن تقول:"فيما يلي كل الكود الموجود في ملفي حاليًا.
يرجى المقارنة لمعرفة ما إذا كان هناك شيء مفقود، أو مكتوب بشكل خاطئ، أو ترتيب غير صحيح.
يرجى إعطائي كود كامل مصحح مباشرة، لا ترسل جزءًا صغيرًا فقط."إذا كانت هناك رسائل خطأ، قدمها معًا
مثل الأخطاء التي تظهر في الزاوية العلوية اليمنى من المتصفح، أو بعض النصوص الحمراء في الأسفل. يمكنك:- نسخ نص الخطأ؛
- أو التقاط لقطة شاشة؛
- ثم تقول:
"هذه رسالة الخطأ التي أراها. لا أفهمها على الإطلاق، يرجى شرح ما هي المشكلة تقريبًا بطريقة بسيطة أولاً، ثم أخبرني ما هي الأسطر التي أحتاج إلى تعديلها الآن."
اطلب منه أن يشرح خطوة بخطوة باستخدام "وضع المبتدئ"
يمكنك توضح وضعك مباشرة، وجعله لا يحذف الخطوات الوسيطة:"أنا لا أعرف كيفية كتابة التعليمات البرمجية على الإطلاق، يرجى إخباري خطوة بخطوة:
في الخطوة 1 أي سطر يجب تعديله،
في الخطوة 2 كيف أحفظ،
في الخطوة 3 كيف أعد فتح الصفحة أو تحديثها.
يرجى كتابة كل خطوة بجمل كاملة."أخيرًا، اطلب منه مساعدتك في عمل "مقارنة لما يجب أن تراه"
على سبيل المثال:يرجى قول ذلك أولاً، وفقًا للكود الذي قمت بتعديله، ماذا يجب أن أرى عادةً عند فتح صفحة الويب.
طالما أنك تتفاعل مع AI وفقًا لهذه العملية، يمكن حل معظم حالات "الكود لا يعمل" في بضع جولات من التفاعل.
في نفس الوقت، ستتعرف تدريجيًا على أنواع المشاكل الشائعة، ويمكنك حلها مباشرة في المرة القادمة التي تواجه فيها موقفًا مشابهًا.
7. ملخص والخطوة التالية
في هذا الفصل، أتممتَ ترقية من "القدرة على لعب لعبة ثعبان مُولّدة بالذكاء الاصطناعي داخل صفحة ويب" إلى "القدرة على بناء لعبة صغيرة بنفسك محليًا باستخدام بيئة تطوير متكاملة مدعومة بالذكاء الاصطناعي". لقد فهمتَ ثلاثة أمور بشكل عام: لماذا لا يمكن الاستغناء عن بيئة تطوير متكاملة مثل VS Code عند كتابة التعليمات البرمجية؛ وبناءً على ذلك، عند إضافة الذكاء الاصطناعي (مثل Trae، Cursor، وغيرها)، لم تعد بيئة التطوير مجرد صندوق أدوات، بل أصبحت بمثابة "مهندس متدرب" قادر على فهم اللغة الطبيعية، ومساعدتك في إنشاء الملفات، وإعداد البيئة، وتعديل الكود؛ وما هي وظيفة كل منطقة في واجهة بيئة التطوير (الملفات على اليسار، الطرفية في الأسفل، منطقة التحرير في الوسط، ولوحة الذكاء الاصطناعي على اليمين)، وبالتالي لم تعد تشعر بالحيرة عند استخدامها.
والأهم من ذلك، أنك نفّذتَ بالفعل عملية كاملة: إنشاء مجلد فارغ محليًا ← فتحه باستخدام بيئة تطوير مدعومة بالذكاء الاصطناعي ← وصف المتطلبات في المحادثة الجانبية ← السماح للذكاء الاصطناعي بتوليد المشروع وتشغيل خادم التطوير ← عند ظهور مشاكل، إرسال "الظاهرة + الكود بالكامل + لقطة شاشة للخطأ" إلى الذكاء الاصطناعي، وطلب منه إصلاحها خطوة بخطوة في "وضع المبتدئين". خلال هذه العملية، تدربتَ أيضًا على كيفية كتابة مطالبات أكثر فعالية: توضيح الهدف، وهيكل المحتوى، ومستوى خبرتك، والتحكم في الوتيرة، والانتقال من "جعلها تعمل أولاً" إلى "جعلها تبدو جميلة وممتعة".
في الفصل التالي، سننقل التركيز من "معرفة كيفية استخدام الأدوات" إلى "بناء نموذج أولي يرغب الناس فعلاً في استخدامه": البدء من منظور المستخدم، وتصميم القواعد، والتفاعلات، والتغذية الراجعة، ثم السماح للذكاء الاصطناعي بمساعدتك في تحويل هذه الأفكار إلى نموذج مبدئي للمنتج.
8. 📚 واجب: بناء لعبة أكثر تعقيدًا باستخدام بيئة تطوير متكاملة محلية مدعومة بالذكاء الاصطناعي
لقد قمت سابقًا ببناء لعبة ثعبان باستخدام بيئة تطوير متكاملة محلية مدعومة بالذكاء الاصطناعي. والآن يُرجى تحدي نفسك ببناء لعبة صغيرة أكثر تعقيدًا، مع المرور بالعملية الكاملة المتمثلة في "وصف المتطلبات ← توليد المشروع ← التشغيل محليًا ← التصحيح والتكرار".
- اختر لعبة أكثر تعقيدًا من لعبة الثعبان
- يمكن أن تكون "تيتريس" أو "اضرب الخلد" أو "كاسحة الألغام" أو "2048" أو "حرب الطائرات" وما إلى ذلك
- أو لعبة أصلية بسيطة من تخيلك
- يجب استخدام بيئة تطوير متكاملة محلية مدعومة بالذكاء الاصطناعي لإكمال العملية بالكامل
- إنشاء مجلد فارغ جديد، وفتحه باستخدام بيئة التطوير المدعومة بالذكاء الاصطناعي
- وصف متطلبات اللعبة بوضوح في المحادثة الجانبية
- السماح للذكاء الاصطناعي بإنشاء الملفات، وبناء هيكل المشروع، وتنفيذ المنطق الأساسي
- تشغيل خادم التطوير محليًا، والتأكد من أن اللعبة تعمل بشكل صحيح
- يجب أن تحتوي على "قابلية اللعب" والتغذية الراجعة الأساسية
- يجب أن تتضمن ثلاث حالات على الأقل: البداية، قيد التقدم، والنهاية
- يجب أن يكون لدى اللاعب طريقة تشغيل واضحة (لوحة المفاتيح أو الماوس)
- يجب أن تكون هناك تغذية راجعة واضحة على الشاشة للنتيجة أو التقدم
- القيام بجولتين (2) من التكرار على الأقل
- في الجولة الأولى، دع الذكاء الاصطناعي يصنع نسخة "قابلة للعب"
- بعد الجولة الثانية، ابدأ تدريجيًا في اقتراح تحسينات محددة (الأنماط، الصعوبة، تحسين التفاعل، إلخ)
الملحق
الملحق الأول: جدول مرجعي سريع للمصطلحات الحاسوبية الشائعة
لا تحتاج إلى حفظ هذا القسم عن ظهر قلب، الأهم هو بناء انطباع أولي في ذهنك.
أولاً: المصطلحات المتعلقة بـ "واجهة الأداة"
1. IDE، المحرر، الطرفية
IDE (بيئة التطوير المتكاملة)
يمكنك تخيل الـ IDE على أنه "مكتب عمل المبرمج":
- من جهة هناك سطح للكتابة (المحرر)،
- ومن جهة أخرى مقابس طاقة وأزرار (التشغيل، التصحيح)،
- وفي الأدراج أدوات صغيرة متنوعة (البحث، إدارة الإصدارات).
كل من VS Code و Trae و Cursor يعتبر بيئة تطوير متكاملة (IDE) أو أدوات معدلة بناءً عليها.
محرر الأكواد (Editor)
أقرب ما يكون إلى "مفكرة متقدمة"، وهو مسؤول فقط عن:
- السماح لك بالكتابة والبرمجة؛
- استخدام الألوان للتمييز بين المحتوى المختلف (تلوين بناء الجملة)؛
- تزويدك بالإكمال التلقائي.
تلك المنطقة داخل الـ IDE التي تكتب فيها الكود، هي محرر الأكواد.
الطرفية / سطر الأوامر (Terminal / نافذة سطر الأوامر)
نافذة بخلفية سوداء ونص أبيض، تقوم فيها بإدخال الأوامر لجعل الكمبيوتر ينفذ المهام:
- مثلاً:
npm run devيعني "قم بتشغيل خادم التطوير من أجلي"؛ python main.pyيعني "قم بتشغيل ملف البايثون هذا".
يمكنك تخيلها على النحو التالي: "أنت ترسل رسائل نصية كأوامر إلى الكمبيوتر، وهو يرد عليك كتابياً بنتائج التنفيذ".
2. عدة مناطق شائعة داخل الـ IDE
شريط النشاط (Activity Bar)
الصف العمودي من الأيقونات الصغيرة في أقصى اليسار، يشبه "علامات التبويب الوظيفية":
- النقر على أيقونة الملفات → يعرض قائمة الملفات على اليسار؛
- النقر على أيقونة العدسة المكبرة → يتحول اليسار إلى نافذة بحث؛
- النقر على أيقونة Git → يعرض إدارة الإصدارات على اليسار.
الشريط الجانبي (Side Bar)
تلك المنطقة الكبيرة إلى يمين شريط النشاط، وهي مخصصة لعرض المحتوى الخاص بالوضع الحالي:
- وضع الملفات: يعرض الملفات والمجلدات الموجودة في المشروع؛
- وضع البحث: يعرض قائمة نتائج البحث؛
- وضع إدارة الكود المصدري: يعرض الملفات التي تم تعديلها.
منطقة التحرير (Editor)
أكبر منطقة في المنتصف، وهي المكان الذي تشاهد فيه المحتوى وتعدله فعلياً بعد فتح الملف؛
علامات التبويب (Tab) في الأعلى تمثل "الملفات المفتوحة حالياً".
اللوحة السفلية (Panel)
عادةً في الأسفل، ولها عدة أنواع شائعة:
- Terminal (الطرفية): لإدخال الأوامر وتشغيل المشروع؛
- Problems (المشاكل): تسرد الملفات وأرقام الأسطر التي بها أخطاء؛
- Output (المخرجات): معلومات التشغيل التي تطبعها بعض الأدوات؛
- Debug Console (وحدة تحكم التصحيح): المخرجات أثناء عملية التصحيح.
شريط الحالة (Status Bar)
ذلك الشريط الرفيع في الأسفل:
- يعرض لغة الملف الحالي (JS، HTML، Python، إلخ)؛
- يعرض المسافة البادئة سواء كانت "مسافتين" أم "4 مسافات"؛
- يعرض ما إذا كانت هناك أخطاء، وما هو فرع Git الحالي.
يمكنك اعتباره "تقريراً مصغراً عن حالة بيئة التحرير الحالية".
ثانياً: المصطلحات المتعلقة بـ "الويب / الشبكة / الخدمات"
1. URL، http، المنفذ، الخدمة المحلية
URL (عنوان الويب)
هي تلك السلسلة من الأحرف في شريط عنوان المتصفح، مثل:
https://www.trae.cn/http://localhost:3000/
إنه بمثابة "العنوان الكامل لغرفة ما في عالم الإنترنت".
HTTP / HTTPS
ما تراه في بداية عنوان الويب http:// أو https://:
- HTTP: طريقة النقل العادية؛
- HTTPS: تحتوي على طبقة تشفير إضافية، وهي أكثر أماناً.
يمكنك تذكرها مؤقتاً على النحو التالي: "عند كتابة عنوان الويب، يبدأ عادةً بـhttpأوhttps".
المنفذ (Port)
يمكنك تخيل الكمبيوتر كمبنى، والمنفذ هو رقم الغرفة:
:3000يمثل الغرفة رقم 3000؛- على نفس الكمبيوتر، يمكن تشغيل عدة خدمات في نفس الوقت، وتحتل كل منها منفذاً مختلفاً.
http://localhost:3000يعني "الوصول إلى الخدمة التي تعمل في الغرفة رقم 3000 على جهاز الكمبيوتر الخاص بي".
المحلي (Local / localhost)
يشير إلى جهاز الكمبيوتر الخاص بك.
- يمكن فهم
localhostعلى أنه "هذا الجهاز نفسه".
عندما تزورhttp://localhost:3000، فأنت في الواقع تتعامل مع برنامج يعمل على جهاز الكمبيوتر الخاص بك، بدلاً من الدخول إلى الإنترنت للوصول إلى خوادم الآخرين.
الخدمة (Service / Server)
"الخدمة" هي برنامج يعمل في الخلفية باستمرار، وينتظر تعليماتك في أي وقت:
- خدمة الويب: عندما يزور المتصفح عنواناً معيناً، تقوم بإرجاع محتوى صفحة الويب؛
- خدمة الألعاب: مسؤولة عن إدارة المباريات، وحفظ التقدم، ولوحة المتصدرين، إلخ.
إن تنفيذ الأمرnpm run devفي الطرفية لتشغيل المشروع، هو في جوهره "فتح خدمة ويب محلية".
ثالثاً: المصطلحات المتعلقة بـ "الواجهة الأمامية / الخلفية / البيانات"
1. الواجهة الأمامية، الخلفية
الواجهة الأمامية (Frontend)
الجزء الذي يستطيع المستخدم رؤيته والنقر عليه:
- الأزرار، النصوص، الصور، والرسوم المتحركة على صفحة الويب؛
- الصفحات المبرمجة باستخدام React / Vue. مسؤول عن عرض الواجهة والاستجابة لعمليات المستخدم (النقر، الإدخال، السحب والإفلات، إلخ).
الخلفية (Backend)
الجزء الذي لا يراه المستخدم، والذي يعمل على الخادم:
- تخزين وقراءة البيانات (معلومات المستخدم، الطلبات، النقاط، إلخ)؛
- تنفيذ قواعد العمل (التحقق من تسجيل الدخول، التحقق من الصلاحيات).
يمكنك تشبيه الواجهة الأمامية بـ "الواجهة والموظفين"، والخلفية بـ "المستودع ونظام الحسابات".
2. واجهة برمجة التطبيقات (API)، الطلب، الاستجابة، JSON
واجهة برمجة التطبيقات / API
مجموعة من القواعد "لطرح الأسئلة + تقديم الإجابات" تم الاتفاق عليها مسبقًا بين الواجهة الأمامية والخلفية.
- الواجهة الأمامية تقول: "سأسألك باستخدام هذا العنوان وهذا التنسيق"؛
- الخلفية تقول: "سأعيد لك النتائج بهذا التنسيق".
الطلب (Request)
"سؤال" ترسله الواجهة الأمامية إلى الخلفية:
- إلى أين يذهب الطلب (URL)؛
- بأي طريقة (GET، POST، إلخ)؛
- ما هي المعاملات المرفقة (مثل معرف المستخدم).
الاستجابة (Response)
"الرد" من الخلفية إلى الواجهة الأمامية:
- رمز الحالة (200 للنجاح، 404 غير موجود، 500 خطأ في الخادم)؛
- البيانات الفعلية (في الغالب تكون بصيغة JSON).
JSON
تنسيق لتمثيل البيانات باستخدام طريقة كتابة تشبه جداً كود JavaScript، على سبيل المثال:
{
"name": "Alice",
"score": 120
}يمكن فهمها على أنها "نسخة الآلة من دفتر ملاحظات أزواج المفاتيح والقيم"، وتستخدمها الواجهة الأمامية والخلفية بشكل متكرر لتبادل البيانات.
رابعًا: مصطلحات تتعلق بـ "كتابة الكود" بحد ذاته
1. المتغير، المُعرّف، الحالة
المتغير (Variable)
"ملصق يُلصق على قطعة من البيانات".
- على سبيل المثال، تسجيل شيء مثل النقاط باسم
score؛ - لاحقًا، باستخدام اسم
score، يمكنك قراءة وكتابة هذه البيانات:
let score = 0
score = score + 10المُعرّف (Identifier)
اسم شامل لـ "جميع الأسماء التي تختارها بنفسك":
- اسم المتغير:
score - اسم الدالة:
moveSnake - اسم المكون:
SnakeGame
الأمر يشبه تسمية المجلدات "صور" "عمل" "فواتير"، لتسهيل التمييز بين "الأشياء" المختلفة في الكود.
الحالة (State)
"سجل الحالة الرئيسية" الحالي للبرنامج:
- هل انتهت اللعبة أم لا؛
- في أي خلية توجد الأفعى الآن؛
- كم عدد النقاط الحالية.
في React، يتم الفهم بشكل عام على النحو التالي: بمجرد تغير الحالة، يجب أن تتحدث الواجهة وفقًا لذلك.
2. الدالة، المكون، الوحدة
الدالة (Function)
تغليف "شيء يمكن القيام به مرارًا وتكرارًا" وإعطاؤه اسمًا:
function sayHello(name) {
console.log('Hello, ' + name)
}لاحقًا، بمجرد كتابة sayHello('Bob')، يكون ذلك مكافئًا لإعادة تنفيذ تلك الأسطر مرة أخرى.
المكون (Component)
في الواجهة الأمامية، "قطعة صغيرة من الواجهة + منطق صغير يمكن إعادة استخدامه":
- يمكن أن يكون الزر مكونًا؛
- يمكن أن يكون شريط التنقل العلوي مكونًا؛
- يمكن أن تكون منطقة اللعبة بأكملها مكونًا أيضًا.
يمكن تجميع المكونات معًا، تمامًا مثل بناء مكعبات الليغو.
الوحدة (Module)
"ملف يتكون من مجموعة من التعليمات البرمجية ذات الصلة":
- يُخصص
snakeLogic.tsللكود المتعلق بـ "كيف تتحرك الأفعى"؛ - يُخصص
score.tsللكود الخاص بحساب النقاط.
يمكن للوحدات "استيراد / تصدير" بعضها البعض، مثل الأدوات الموجودة في أدراج مختلفة.
3. بناء الجملة، لغة البرمجة، إطار العمل
بناء الجملة (Syntax)
"القواعد النحوية" و"علامات الترقيم" الخاصة بلغة برمجة معينة:
- يجب وضع السلاسل النصية بين علامتي اقتباس؛
- هل يجب كتابة فاصلة منقوطة في نهاية كل جملة أم لا؛
- يجب إحاطة كتل الكود بأقواس معقوفة
{}.
إذا أخطأت في بناء الجملة، سيُصدر المترجم / المُفسّر مباشرة "خطأ في بناء الجملة".
لغة البرمجة (Programming Language)
مجموعة كاملة من القواعد والمفردات للتواصل مع الكمبيوتر، مثل:
- JavaScript، Python، Java، C++، Go……
تختلف اللغات المختلفة فيما يناسبها من مهام، وطرق الكتابة، والبيئة الأدواتية.
إطار العمل (Framework)
مجموعة كبيرة من الأكواد والأنماط التي يساعدك الآخرون على "بناء هيكلها الأساسي" مسبقًا:
- الواجهة الأمامية: React، Vue (تساعدك في التعامل مع تحديثات الواجهة، وإدارة الحالة، إلخ)؛
- الخلفية: Django، Spring Boot، إلخ.
أنت في الأساس "تملأ المحتوى على هيكل جاهز"، وهو أسهل بكثير من بناء العجلة من الصفر.
خامسًا: مصطلحات تتعلق بـ "التصحيح / البحث عن الأخطاء"
1. الخطأ البرمجي (Bug)، رسالة الخطأ، السجلات / console.log
الخطأ البرمجي (Bug)
عندما يختلف سلوك البرنامج عما توقعته، فهذا هو الـ Bug:
- من المفترض أن يظهر زر، لكنه لم يظهر؛
- من المفترض إضافة 10 نقاط، لكن تمت إضافة الكثير منها؛
- تظهر صفحة بيضاء بمجرد فتح الصفحة.
رسالة الخطأ (Error Message)
ذلك النص الإنجليزي "الذي يبدو مخيفًا" الذي يظهر على الشاشة / في الطرفية بعد تعطل البرنامج.
على الرغم من أنه يبدو سيئًا، إلا أنه عادةً يخبرك بـ:
- أين حدث الخطأ تقريبًا؛
- أي ملف، وحول أي سطر يجب التحقق.
يمكنك ببساطة نسخه وإعطائه للذكاء الاصطناعي لترجمته وتحليله.
السجل (Log)
"الكلام" الذي يقوله البرنامج بنفسه أثناء التشغيل.
الأكثر شيوعًا في الواجهة الأمامية هو:
console.log('النقاط الحالية', score)يمكنك فهمه على النحو التالي: الإبلاغ عن رقم بفاعلية في الخطوات الرئيسية، لتسهيل التأكد من أن البرنامج يسير كما تريد.
ما هو console.log؟
- يمكن فهم
consoleعلى أنه "سبورة صغيرة للتصحيح"؛.logيعني "كتابة سطر من النص على السبورة الصغيرة"؛- اضغط على F12 في المتصفح لفتح لوحة Console في أدوات المطور، وستتمكن من رؤية هذه المخرجات.
2. التصحيح، نقطة التوقف، التنفيذ خطوة بخطوة، اللقطة
التصحيح (Debug / تصحيح الأخطاء)
عندما تكون هناك مشكلة في البرنامج، لا تبدأ بالتعديل بشكل عشوائي، بل:
- أوقف البرنامج عند سطر معين (نقطة توقف)؛
- انظر إلى القيمة الحالية لكل متغير؛
- تقدم خطوة بخطوة، ولاحظ "من أين بدأ الأمر يصبح خاطئًا".
نقطة التوقف (Breakpoint)
يمكنك التفكير في نقطة التوقف على أنها "إدراج زر إيقاف مؤقت عند هذا السطر":
- عادةً ما يستمر البرنامج في العمل طوال الوقت للأسفل؛
- عندما يصل إلى السطر الذي أدخلت فيه نقطة التوقف، سيتوقف مؤقتًا، في انتظار أن تقوم بالفحص.
التنفيذ خطوة بخطوة (Step)
بعد التوقف عند نقطة التوقف، يمكنك اختيار:
- التنفيذ سطرًا بسطر للأسفل (step over)؛
- الدخول داخل دالة معينة لرؤية التفاصيل (step into).
الأمر يشبه مشاهدة التحلل الحركي لرقصة ما، بدلاً من مشاهدة فيديو سريع التشغيل مباشرة.
اللقطة (Snapshot) —— فهم مبسط
يمكن فهم "اللقطة" هنا على أنها:
في نقطة زمنية معينة، التقاط "صورة للحالة الحالية"، لتسهيل المقارنة لاحقًا.
في الأدوات الفعلية، قد تشير "اللقطة" إلى:
- الحالة الكاملة للمشروع في لحظة إجراء Commit؛
- الوضع العام للذاكرة / المتغيرات في نقطة زمنية معينة أثناء التصحيح.
يكفي أن تتذكر هذا التشبيه الآن: اللقطة ≈ صورة محفوظة لحالة في لحظة معينة.
سادسًا: مصطلحات تتعلق بـ "إدارة المشاريع"
1. المشروع، مساحة العمل، المجلد
المشروع (Project)
ما يتم وضعه في نفس المجلد لتحقيق تطبيق معين:
- ملفات الكود المصدري
- ملفات التكوين
- الأصول (الصور، الصوتيات، إلخ)
مساحة العمل (Workspace)
مفهوم يستخدمه VS Code / Trae لوصف "ما هي المجموعة من الأشياء التي تم فتحها في هذه المرة":
- فتح مجلد → مساحة عمل بسيطة؛
- في بعض الأحيان، يتم دمج مجلدات متعددة في مساحة عمل متعددة المشاريع.
2. Git، المستودع، الإيداع (Commit)
Git (أداة التحكم في الإصدارات)
يمكن فهمها على أنها "آلة زمن" للمشروع:
- في كل مرة تنتهي فيها من تعديل مجموعة من المحتوى، يمكنك "التقاط صورة جماعية للإصدار"؛
- عند الحاجة لاحقًا، يمكنك العودة إلى حالة تاريخية معينة.
المستودع (Repository / Repo)
بعد تفعيل Git، يُطلق على مجلد المشروع الذي يحتوي على "سجل الإصدارات" اسم "المستودع".
الإيداع (Commit)
في كل مرة تشعر فيها أن "هذه التعديلات تعتبر إنجازًا مرحليًا"، يمكنك:
- كتابة وصف (مثل:
Add score panel)؛ - تعبئة جميع التعديلات الحالية في إصدار واحد؛
- سيقوم Git بحفظ حالة هذه اللحظة.
هذا الإجراء يسمى "إجراء Commit".
سابعاً: المصطلحات المتعلقة بـ "أدوات تطوير الذكاء الاصطناعي"
1. بيئة التطوير المتكاملة للذكاء الاصطناعي (AI IDE)، والوكيل (Agent)، ووضع SOLO
AI IDE
بناءً على بيئة التطوير المتكاملة (IDE) العادية، تُضاف طبقة من الذكاء الاصطناعي "تستطيع فهم الكلام البشري والعمل بشكل مستقل":
- تقول لها "اصنع لعبة Snake"، فتقوم ببناء المشروع وكتابة الكود لك؛
- تعطيها لقطة شاشة لخطأ (Error)، فتقوم بشرحه أولاً ثم تحاول إصلاحه؛
- يمكنها تعديل ملفات متعددة معاً، وليس مجرد الإكمال سطراً بسطر.
Agent (الوكيل الذكي)
يمكنك تخيل الوكيل (Agent) على أنه مهندس ذكاء اصطناعي صغير في حالة استعداد دائم:
- يقرأ هيكل مشروعك؛
- يقسم المهام (تثبيت التبعيات أولاً، ثم توليد الكود، ثم تشغيل المشروع)؛
- عند ظهور خطأ أثناء التشغيل، يقوم بتعديل خطته بناءً على رسالة الخطأ.
وضع SOLO (باستخدام Trae كمثال)
يعني:
أنت فقط تحتاج إلى توضيح "النقطة النهائية"،
وهي تقوم بتخطيط "المسار" بنفسها،
وتنفذه خطوة بخطوة محلياً،
وتتوقف فقط عند النقاط الحراسية لتسألك ما إذا كنت تريد الاستمرار.
2. النماذج (Models)، والمفاتيح (API Key)
النموذج (Model، يشير هنا تحديداً إلى النموذج اللغوي الكبير)
يمكن فهم هذا المصطلح ببساطة على أنه "ذلك الكم الهائل من خلايا الدماغ الخاصة بالذكاء الاصطناعي" الموجود في الخلفية:
- مثل GPT، وClaude، وKimi، وGLM وغيرها؛
- تختلف مستويات النماذج في "فهم اللغة الصينية" و"كتابة الكود" و"الاستنتاج المنطقي"؛
- عادةً ما يمكنك التبديل بين نماذج مختلفة من القائمة المنسدلة داخل بيئة تطوير الذكاء الاصطناعي (AI IDE).
مفتاح API (API Key)
يمكنك فهم مفتاح API (API Key) على أنه "رقم هوية + كلمة مرور متقدمة" طويلة جداً،
وظيفته الوحيدة هي:
إخبار خوادم الطرف الآخر: "أنا المستخدم الفلاني، يرجى السماح لي باستخدام خدمات الذكاء الاصطناعي الخاصة بكم، وتسجيل الاستخدام في حسابي."
بعض النقاط المهمة:
- هذه السلسلة عادةً ما تكون عبارة عن حروف وأرقام عشوائية طويلة؛
- يجب عدم نشرها في أماكن عامة (المستودعات، لقطات الشاشة، الدردشات الجماعية)، لأن أي شخص يحصل عليها يمكنه انتحال حسابك؛
- إدخال مفتاح API في الأداة يعادل "إدخال المفتاح في القفل"، وبعدها يمكن للأداة مساعدتك في استدعاء خدمات الذكاء الاصطناعي المقابلة.
ثامناً،المصطلحات المتعلقة بـ "المتصفح / أدوات المطور"
Chrome (متصفح جوجل) أحد أكثر المتصفحات استخداماً في تطوير الواجهة الأمامية حالياً:
- يفتح صفحات الويب بسرعة؛
- يحتوي على "أدوات مطور" قوية ومدمجة، مما يسهل التحقق من المشاكل.
تحديث（Refresh / Reload）
إعادة تحميل صفحة الويب الحالية:
- بعد تعديل كود الواجهة الأمامية، إذا لم تكن هناك أداة تحديث تلقائي، يجب عليك الضغط على تحديث يدوياً لرؤية التأثير.
أدوات المطور（DevTools）
مجموعة من لوحات الأدوات المخصصة للمطورين داخل المتصفح:
- عرض هيكل صفحة الويب (Elements)؛
- عرض الأنماط (Styles)؛
- عرض الأخطاء والسجلات (Console)؛
- عرض طلبات الشبكة (Network).
في متصفح Chrome، يتم فتحها عادةً بالضغط علىF12أوCtrl+Shift+I.
Console（وحدة التحكم）
علامة تبويب داخل أدوات المطور، مخصصة لعرض:
- المخرجات التي تكتبها باستخدام
console.log(...)؛ - الأخطاء التي تحدث أثناء التشغيل (بالنص الأحمر).
يمكنك اعتبارها "صندوق محادثة البرنامج": - إذا كان للبرنامج شيء ليقوله، فإنه يكتبه هنا؛
- وهي المنطقة التي تنظر إليها أكثر شيء أثناء تصحيح الأخطاء (Debugging).
إذا واجهت مصطلحات جديدة لاحقاً أثناء عملية التعلم، يمكنك أيضاً اتباع هذا النمط وطلب المساعدة من الذكاء الاصطناعي لإضافة المحتوى بالكامل:
- اكتب أولاً جملة "ماذا يفعل؟"؛
- ثم اكتب جملة "بماذا يمكن تشبيهه؟"؛
- وأخيراً أعطِ مثالاً صغيراً وبسيطاً جداً.
هكذا ستزداد "قاموس مصطلحاتك الشخصي" فائدة مع الوقت، وستتمكن تدريجياً من التواصل مع الكمبيوتر بشكل أفضل.