مسارات التعلم
5 دقيقة للقراءة

المسار 1: أول تطبيق

Path 1: Complete Beginner to First App (2 weeks)

الهدف: تحويلك من شخص لا يعرف البرمجة إلى مطور يمتلك تطبيقًا عمليًا يعمل في غضون أسبوعين.

الأسبوع الأول: التأسيس (Week 1: Foundations)

اليوم 1-2: فهم البرمجة بالإحساس (Understanding Vibecoding)

📖 ماذا ستتعلم

  • ما هو الـ Vibecoding وكيف يختلف عن البرمجة التقليدية
  • الفلسفة الأساسية: الحدس فوق الحفظ
  • الأدوات التي ستحتاجها
  • لماذا هذا هو الوقت الأفضل لتعلم البرمجة

✅ المهام

  1. اقرأ مقال "ما هو Vibe Coding؟" في هذا الويكي
  2. شاهد فيديو مقدمة عن البرمجة بالذكاء الاصطناعي (15 دقيقة)
  3. أنشئ حسابًا على GitHub (إذا لم يكن لديك واحد)
  4. انضم لمجتمع Discord أو Slack للمبرمجين بالذكاء الاصطناعي

🎯 التمارين

  • تمرين 1: اكتب 3 أفكار لمشاريع صغيرة تود بناءها
  • تمرين 2: صف شكل تطبيق مثالي باستخدام لغتك الخاصة
  • تمرين 3: حدد أداة واحدة تريد تعلمها أولاً (Cursor أو Windsurf)

اليوم 3-4: تجهيز بيئتك (Setup Your Environment)

📖 ماذا ستتعلم

  • كيف تثبت وتُشغل محرر AI (Cursor أو Windsurf)
  • أساسيات JavaScript/TypeScript
  • كيف تستخدم Prompt الأول مع AI
  • المفاهيم الأساسية للتحكم في الإصدارات (Git)

✅ المهام

  1. تثبيت Cursor (موصى به للمبتدئين):

    # على macOS
brew install --cask cursor

# على Windows
# حمّل من https://cursor.com/downloads

  2. أو تثبيت Windsurf (بديل مجاني):

  3. تثبيت Node.js عبر nvm:

    # تثبيت nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# تثبيت Node.js
nvm install 20

  4. إعداد GitHub:

    # إعداد git
git config --global user.name "Your Name"
git config --global user.email "your@email.com"

🎯 التمارين

  • تمرين 1: Hello World بالذكاء الاصطناعي

    • افتح Cursor
    • اضغط Ctrl+L (أو Cmd+L)
    • اكتب: "Create a simple HTML page that says Hello World"
    • شاهد كيف يولد AI الكود

  • تمرين 2: عدّل الصفحة

    • اسأل AI: "Change the background color to blue"
    • لاحظ كيف يفهم AI وينفذ طلبك

اليوم 5-7: تعلم أداة CLI واحدة (Learn One CLI Tool)

📖 ماذا ستتعلم

  • كيف تتفاعل مع AI من خلال Terminal
  • الأوامر الأساسية لـ Claude CLI أو Copilot CLI
  • كيف تبني سكريبت بسيط بمساعدة AI
  • أفضل الممارسات للبرومبتات

✅ المهام

  1. اختر أداة CLI:

    • Claude CLI (موصى به): أفضل للتعلّم والشرح
    • Copilot CLI: مجانٍ وسهل الاستخدام

  2. تثبيت Claude CLI:

    npm install -g @anthropic-ai/claude-cli
claude init

  3. تثبيت Copilot CLI:

    # تثبيت GitHub CLI أولاً
brew install gh  # macOS
winget install GitHub.cli  # Windows

# تثبيت امتداد Copilot
gh extension install github/gh-copilot
gh auth login

🎯 التمارين

  • تمرين 1: 10 أوامر أساسية

    # Claude CLI
claude ask "What is a JavaScript variable?"
claude ask "Explain arrays in JavaScript"
claude ask "How do I create a function?"
claude ask "What is a loop?"
claude ask "Explain objects in JavaScript"

# Copilot CLI
gh copilot suggest "list all files in current directory"
gh copilot suggest "find all JavaScript files"
gh copilot explain "npm install"
gh copilot explain "git status"

  • تمرين 2: بناء سكريبت بسيط

    • اسأل Claude: "Create a JavaScript script that calculates the sum of numbers from 1 to 100"
    • احفظ الملف
    • شغّله: node script.js

الأسبوع الثاني: مشروعك الأول (Week 2: Your First Project)

اليوم 8-10: تخطيط مشروعك (Plan Your Project)

📖 ماذا ستتعلم

  • كيف تختار مشروع مناسب لمستواك
  • أساسيات التصميم البسيط (UI/UX)
  • كيف تطلب من AI تخطيط المعمارية
  • تقسيم المشروع لمهام صغيرة

✅ المهام

  1. اختر مشروعًا واحدًا:

    • خيار أ: تطبيق Todo List

      • إضافة مهام
      • حذف مهام
      • تحديد مهام كمكتملة

    • خيار ب: موقع شخصي (Portfolio)

      • صفحة رئيسية
      • قسم "عني"
      • معرض أعمال
      • نموذج تواصل

  2. ارسم مخططًا بسيطًا:

    • استخدم الورقة والقلم
    • أو استخدم FigJam
    • حدد الصفحات والمكونات

  3. اطلب من AI التخطيط:

    Prompt: "I want to build a Todo app with Next.js.
Plan the architecture and file structure.
What components do I need?
What state management should I use?"

🎯 التمارين

  • تمرين 1: قائمة المكونات

    • اكتب قائمة بكل المكونات التي يحتاجها مشروعك
    • رتبها من الأهم إلى الأقل أهمية

  • تمرين 2: خطة العمل

    • قسم العمل لمهام يومية
    • قدّر الوقت لكل مهمة

اليوم 11-13: البناء مع AI (Build with AI)

📖 ماذا ستتعلم

  • كيف تولّد المكونات مع AI
  • التكرار والتحسين مع AI
  • تصحيح الأخطاء بمساعدة AI
  • دمج المكونات معًا

✅ المهام

  1. إنشاء المشروع:

    # مع Cursor
File → New Project → Next.js

# أو يدويًا
npx create-next-app@latest my-app

  2. توليد المكونات:

    • اضغط Ctrl+L في Cursor
    • اكتب: "Create a TodoItem component with checkbox and delete button"

  3. التكرار:

    • راجع الكود المولد
    • اطلب تعديلات: "Make the checkbox green when checked"
    • افهم التغييرات

  4. التصحيح:

    • عند ظهور خطأ، حدّده واضغط Ctrl+L
    • اكتب: "Fix this error"

🎯 التمارين

  • تمرين 1: بناء 5 مكونات

    1. المكون الرئيسي (App/TodoList)
    2. مكون العنصر (TodoItem)
    3. نموذج الإضافة (AddTodoForm)
    4. شريط الحالة (StatusBar)
    5. الفلتر (FilterButtons)

  • تمرين 2: إدارة الحالة

    • اسأل AI: "Add state management for todos using useState"
    • افهم كيف تعمل الحالة

اليوم 14: النشر والمشاركة (Deploy & Share)

📖 ماذا ستتعلم

  • كيف تنشر مشروعك على Vercel
  • كيف تشاركه على GitHub
  • كيف تقدم مشاركتك
  • ماذا تعلّمت وكيف تواصل

✅ المهام

  1. النشر على Vercel:

    # تثبيت Vercel CLI
npm i -g vercel

# النشر
vercel

# أو ادفع لـ GitHub وانشر من لوحة التحكم

  2. رفع على GitHub:

    git init
git add .
git commit -m "Initial commit: My first AI-built app"
gh repo create my-first-app --public --source=.
git push -u origin main

  3. المشاركة:

    • انشر الرابط على Twitter/X
    • شاركه في مجتمع Discord
    • أضفه لملفك الشخصي على LinkedIn

🎯 التمارين

  • تمرين 1: تقديم المشروع

    • اكتب فقرة عن مشروعك
    • صف التحديات التي واجهتها
    • كيف ساعدك AI

  • تمرين 2: خطة التحسين

    • اكتب 3 ميزات تود إضافتها
    • حدد أولويتها

🎉 تهانينا! (Congratulations!)

ماذا حققت؟

  • ✅ فهمت فلسفة البرمجة بالإحساس
  • ✅ جهّزت بيئة التطوير
  • ✅ تعلّمت أداة CLI واحدة
  • ✅ بنيت تطبيقًا عمليًا
  • ✅ نشرت مشروعك الأول
  • ✅ شاركت عملك مع العالم

المهارات المكتسبة

  1. JavaScript/TypeScript الأساسيات
  2. React/Next.js المبادئ
  3. استخدام AI للبرمجة
  4. Git و GitHub
  5. النشر على Vercel
  6. حل المشكلات مع AI

🚀 الخطوات التالية (Next Steps)

خيار 1: التعمق أكثر

  • أكمل المسار الثاني: من المبرمج التقليدي إلى AI-Assisted Dev
  • تعلم Vue.js أو Svelte
  • استكشف قواعد البيانات (Supabase)

خيار 2: بناء المزيد

  • طبّق ما تعلّمت على مشروع جديد
  • حاول بناء تطبيق أكثر تعقيدًا
  • أضف ميزات لمشروعك الحالي

خيار 3: الانضمام للمجتمع

  • شارك تجربتك على مدونة
  • ساعد مبتدئين آخرين
  • شارك في هاكاثونات

💡 نصائح للمستقبل

افعل (DO) ✅

  • استمر في التعلم كل يوم
  • جرّب أدوات AI جديدة
  • شارك معرفتك مع الآخرين
  • اقرأ كود الآخرين
  • حاول فهم ما يولده AI

لا تفعل (DON'T) ❌

  • لا تعتمد كليًا على AI
  • لا تنسخ دون فهم
  • لا تستسلم عند الأخطاء
  • لا تقارن نفسك بمطورين محترفين
  • لا تهمل الأساسيات

📚 موارد إضافية

مقالات في هذا الويكي

موارد خارجية

هل أنت مستعد للمسار التالي؟ 🚀

الآن بعد أن أكملت أول تطبيق، حان الوقت للانتقال إلى المسار الثاني: Traditional Dev → AI-Assisted Dev حيث ستتعلم كيف تدمج AI في سير عمل التطوير الحالي لديك.