🎥فيديو 30 min4 / 7

Claude Code: التثبيت والإعداد

Claude Code هو CLI احترافي يحوّل Claude إلى مساعد برمجي حقيقي يعمل مباشرةً في terminal ويتفاعل مع ملفات مشروعك الفعلية.

لماذا Claude Code؟

الفرق بين Claude.ai وClaude Code:

| | Claude.ai | Claude Code | |--|-----------|------------| | الوصول للملفات | ترفع يدوياً | يقرأ/يكتب مباشرةً | | تشغيل الأوامر | لا | يشغّل terminal commands | | السياق | محادثة فقط | المشروع كله | | الاستخدام | Browser | Terminal | | المناسب لـ | أسئلة عامة | تطوير فعلي |

متطلبات التثبيت

Node.js 18+ (للتحقق: node --version)
npm 8+ أو Bun
حساب Claude مع API key (من console.anthropic.com)
OS: macOS / Linux / Windows (WSL2 موصى به)

التثبيت

# التثبيت العالمي
npm install -g @anthropic-ai/claude-code

# التحقق من التثبيت
claude --version

# أو باستخدام Bun (أسرع)
bun install -g @anthropic-ai/claude-code

الإعداد الأول

# إعداد الـ API key
claude

# في أول تشغيل ستُسأل عن:
# 1. API key (من console.anthropic.com)
# 2. Default model (Sonnet موصى به)
# 3. Theme preference

الأوامر الأساسية

التفاعل اليومي

# بدء جلسة تفاعلية في المشروع الحالي
claude

# سؤال مباشر (بدون جلسة تفاعلية)
claude "ما هو الغرض من هذه الدالة؟"

# تشغيل مهمة محددة
claude "أضف error handling لجميع async functions في src/"

# مراجعة ملف معين
claude "راجع هذا الملف وأخبرني بالمشاكل" < src/api/route.ts

إدارة السياق

# عرض السياق الحالي
claude /context

# إضافة ملف للسياق
claude /add src/types/index.ts

# مسح السياق والبدء من جديد
claude /clear

ملف CLAUDE.md — قلب الإعداد

CLAUDE.md هو ملف تضعه في جذر مشروعك، يقرأه Claude Code تلقائياً في كل جلسة:

# اسم المشروع

## التقنيات
- Next.js 15 + TypeScript
- Supabase (auth + database)
- TailwindCSS

## قواعد الكود
- استخدم async/await لا .then()
- كل الـ API routes يجب أن تتحقق من المصادقة
- اتبع naming convention: camelCase للـ variables، PascalCase للـ components

## ما لا تفعله أبداً
- لا تحذف ملفات بدون تأكيد
- لا تعدّل ملفات الـ .env
- لا تغيّر schema قاعدة البيانات بدون مراجعة

## هيكل المجلدات
src/
├── app/          # Next.js routes
├── components/   # React components
├── lib/          # Utilities
└── data/         # Static data

اختصارات مفيدة في الجلسة التفاعلية

| الاختصار | الوظيفة | |---------|---------| | Ctrl+C | إيقاف الرد الحالي | | Ctrl+L | مسح الشاشة | | ↑↓ | التنقل بين الأوامر السابقة | | /help | عرض كل الأوامر | | /exit | الخروج |

أوضاع العمل

الوضع الحذر (افتراضي): يطلب التأكيد قبل تعديل الملفات — مناسب للمشاريع الحساسة.

الوضع التلقائي: يطبّق التغييرات مباشرةً — مناسب للمهام الواضحة:

claude --dangerously-skip-permissions "أضف JSDoc لكل الدوال في utils/"

تكامل مع VS Code

# تثبيت امتداد VS Code
code --install-extension anthropics.claude-code

# الآن يمكنك استخدام Claude Code من VS Code مباشرةً

bash

#!/bin/bash
# سكريبت إعداد Claude Code لمشروع جديد
# احفظه كـ setup-claude.sh وشغّله مرة واحدة

set -e

echo "🤖 إعداد Claude Code للمشروع..."

# 1. التحقق من التثبيت
if ! command -v claude &> /dev/null; then
    echo "📦 تثبيت Claude Code..."
    npm install -g @anthropic-ai/claude-code
fi

echo "✅ Claude Code v$(claude --version) مثبّت"

# 2. إنشاء CLAUDE.md
cat > CLAUDE.md << 'EOF'
# مشروع NexaLearn AI Academy

## Stack التقني
- Next.js 15 (App Router) + TypeScript strict
- Supabase (auth + PostgreSQL + Storage)
- TailwindCSS + shadcn/ui
- @react-pdf/renderer للشهادات

## قواعد لا تكسرها
- كل الـ API routes تتحقق من authentication
- استخدم Server Components بالـ default
- error handling في كل fetch/await
- لا تعدّل ملفات .env أبداً

## هيكل المجلدات
src/
├── app/[locale]/     # Pages (bilingual AR/EN)
├── app/api/          # API Routes
├── components/       # Reusable components
├── data/             # Static data files
├── lib/              # Utilities & helpers
└── types/            # TypeScript types

## Style Guide
- PascalCase: Components, Types, Interfaces
- camelCase: variables, functions, hooks
- kebab-case: files, folders, IDs
- SCREAMING_SNAKE: constants

## لغة الكود
- Comments: بالعربية للسياق العام
- Code: بالإنجليزية (variable names, etc.)
- Error messages: بالعربية للمستخدم
EOF

echo "✅ تم إنشاء CLAUDE.md"

# 3. إنشاء .claudeignore (ملفات Claude لا يحتاجها)
cat > .claudeignore << 'EOF'
node_modules/
.next/
.git/
*.log
*.lock
dist/
build/
coverage/
public/automation/workflows-json/
EOF

echo "✅ تم إنشاء .claudeignore"

# 4. إنشاء سكريبت مساعد للمهام الشائعة
cat > scripts/claude-tasks.sh << 'EOF'
#!/bin/bash
# مهام Claude Code المشتركة

case "$1" in
  review)
    claude "راجع الكود في ${2:-src/} وأخبرني بأي مشاكل أمان أو أداء"
    ;;
  types)
    claude "تحقق من TypeScript types وأخبرني بأي أخطاء محتملة في src/"
    ;;
  tests)
    claude "اكتب unit tests لـ ${2:-src/lib/} باستخدام Jest"
    ;;
  docs)
    claude "أضف JSDoc documentation لجميع functions المُصدَّرة في ${2:-src/lib/}"
    ;;
  *)
    echo "الاستخدام: ./claude-tasks.sh [review|types|tests|docs] [مسار اختياري]"
    ;;
esac
EOF

chmod +x scripts/claude-tasks.sh
echo "✅ تم إنشاء scripts/claude-tasks.sh"

echo ""
echo "🎉 Claude Code جاهز! الأوامر المتاحة:"
echo "  claude                    # جلسة تفاعلية"
echo "  ./scripts/claude-tasks.sh review   # مراجعة الكود"
echo "  ./scripts/claude-tasks.sh types    # فحص TypeScript"

السابقالتالي