code-server/cursor-fullstack/UNIFIED_GUIDE.md

🎯 الدليل الموحد - Cursor Full Stack AI IDE

📋 نظرة عامة

هذا هو الدليل الموحد والشامل لتطبيق Cursor Full Stack AI IDE مع دعم كامل لجميع المنصات والطرق.

🚀 الميزات الرئيسية

Frontend (React + Vite + Tailwind)

• ✅ Monaco Editor - محرر كود متقدم مع دعم 50+ لغة
• ✅ Real-time Chat - محادثة مباشرة مع AI
• ✅ File Explorer - مستكشف ملفات تفاعلي
• ✅ Terminal Integration - طرفية مدمجة
• ✅ AI Provider Selection - اختيار مزود AI
• ✅ API Key Management - إدارة مفاتيح API

Backend (Cloudflare Workers)

• ✅ 5 AI Providers - OpenAI, Anthropic, Google, Mistral, OpenRouter
• ✅ WebSocket Support - دعم WebSocket للتواصل المباشر
• ✅ File Operations - عمليات الملفات
• ✅ Tool Execution - تنفيذ الأدوات
• ✅ Real-time Streaming - تدفق البيانات المباشر

AI Integration

• ✅ OpenAI GPT-4 - أحدث نماذج GPT
• ✅ Anthropic Claude - نماذج Claude المتقدمة
• ✅ Google Gemini - نماذج Gemini الذكية
• ✅ Mistral AI - نماذج Mistral المفتوحة
• ✅ OpenRouter - جميع نماذج OpenRouter

🛠️ طرق النشر

1. Cloudflare Pages (مستحسن)

الطريقة السريعة:

# إنشاء مستودع منفصل للـ Frontend
gh repo create cursor-ide-frontend --public

# نسخ ملفات الـ Frontend
cp -r cloudflare/frontend/* cursor-ide-frontend/
cd cursor-ide-frontend

# إعداد Git
git init
git add .
git commit -m "Initial frontend commit"
git remote add origin https://github.com/your-username/cursor-ide-frontend.git
git push -u origin main

ربط Cloudflare Pages:

1. انتقل إلى Cloudflare Dashboard
2. اختر Pages > Create a project
3. اختر Connect to Git
4. اختر المستودع الجديد cursor-ide-frontend
5. إعدادات البناء:
   • Framework preset: Vite
   • Build command: npm run build
   • Build output directory: dist

متغيرات البيئة:

VITE_BACKEND_URL=https://cursor-backend.workers.dev
VITE_WS_URL=wss://cursor-backend.workers.dev
VITE_APP_NAME=Cursor Full Stack AI IDE
VITE_APP_VERSION=1.0.0

2. Docker (محلي)

تشغيل سريع:

# بناء وتشغيل جميع الخدمات
docker-compose up --build -d

# الوصول للتطبيق
# Frontend: http://localhost:5173
# Backend: http://localhost:3001
# WebSocket: ws://localhost:8080

Docker Compose:

version: '3.8'
services:
  frontend:
    build: ./cloudflare/frontend
    ports:
      - "5173:5173"
    environment:
      - VITE_BACKEND_URL=http://localhost:3001
      - VITE_WS_URL=ws://localhost:8080

  backend:
    build: ./cloudflare/backend
    ports:
      - "3001:3001"
      - "8080:8080"
    environment:
      - NODE_ENV=production

3. GitHub Pages

النشر التلقائي:

# إعداد GitHub Actions
mkdir -p .github/workflows
cp cloudflare/github-actions.yml .github/workflows/

# دفع التغييرات
git add .
git commit -m "Add GitHub Actions deployment"
git push origin main

🔧 إعداد المشروع

1. متطلبات النظام

• Node.js 18+
• npm 8+
• Git
• Cloudflare Account (للنشر على Cloudflare)
• Docker (للنشر المحلي)

2. تثبيت التبعيات

# Frontend
cd cloudflare/frontend
npm install

# Backend
cd ../backend
npm install

3. إعداد متغيرات البيئة

# Frontend (.env)
VITE_BACKEND_URL=https://cursor-backend.workers.dev
VITE_WS_URL=wss://cursor-backend.workers.dev

# Backend (.env)
NODE_ENV=production
PORT=3001

🎨 واجهة المستخدم

Layout الرئيسي:

┌─────────────────────────────────────────────────────────────┐
│ Header: Logo, AI Provider, API Key, Settings               │
├─────────────────────────────────────────────────────────────┤
│ Sidebar: File Explorer, AI Chat, Tools, Terminal          │
├─────────────────────────────────────────────────────────────┤
│ Main: Monaco Editor, Live Preview, Output                  │
├─────────────────────────────────────────────────────────────┤
│ Footer: Status, Line/Column, Language, Theme               │
└─────────────────────────────────────────────────────────────┘

المكونات الرئيسية:

• Sidebar - مستكشف الملفات ومحادثة AI
• MonacoEditor - محرر الكود المتقدم
• ChatAssistant - مساعد AI ذكي
• FileExplorer - مستكشف الملفات
• Terminal - طرفية مدمجة

🔧 استكشاف الأخطاء

مشاكل Cloudflare Pages:

• المشكلة: المستودع الخاطئ

• الحل: إنشاء مستودع منفصل للـ Frontend

• المشكلة: إعدادات البناء

• الحل: استخدام Vite preset

• المشكلة: متغيرات البيئة

• الحل: إضافة متغيرات البيئة في Cloudflare Dashboard

مشاكل Docker:

• المشكلة: Port conflicts

• الحل: تغيير المنافذ في docker-compose.yml

• المشكلة: Build failures

• الحل: تنظيف Docker cache وإعادة البناء

مشاكل AI Integration:

• المشكلة: API Key غير صحيح

• الحل: التحقق من صحة مفتاح API

• المشكلة: Rate limiting

• الحل: إضافة retry logic وdelay

📚 الوثائق

أدلة النشر:

• DEPLOYMENT_SOLUTION.md - دليل شامل للنشر
• cloudflare/frontend/QUICK_DEPLOY.md - دليل سريع
• cloudflare/frontend/README_DEPLOY.md - دليل مفصل

أدلة التطوير:

• DEVELOPMENT_GUIDE.md - دليل التطوير
• API_DOCUMENTATION.md - وثائق API
• CONTRIBUTING.md - دليل المساهمة

أدلة الاستخدام:

• USER_GUIDE.md - دليل المستخدم
• FEATURES.md - دليل الميزات
• TROUBLESHOOTING.md - استكشاف الأخطاء

🚀 البدء السريع

1. استنساخ المشروع:

git clone https://github.com/your-username/cursor-fullstack-ai-ide.git
cd cursor-fullstack-ai-ide

2. تثبيت التبعيات:

# Frontend
cd cloudflare/frontend
npm install

# Backend
cd ../backend
npm install

3. تشغيل محلي:

# Frontend
npm run dev

# Backend
npm run dev

4. النشر على Cloudflare:

# إنشاء مستودع منفصل
gh repo create cursor-ide-frontend --public

# نسخ الملفات
cp -r cloudflare/frontend/* cursor-ide-frontend/
cd cursor-ide-frontend

# إعداد Git
git init && git add . && git commit -m "Initial commit"
git remote add origin https://github.com/your-username/cursor-ide-frontend.git
git push -u origin main

# ربط Cloudflare Pages
# انتقل إلى Cloudflare Dashboard > Pages > Create project

🎉 النتيجة النهائية

بعد النشر، ستحصل على:

• Frontend: https://cursor-ide.pages.dev
• Backend: https://cursor-backend.workers.dev
• WebSocket: wss://cursor-backend.workers.dev

🔗 الروابط المفيدة

• Cloudflare Dashboard: https://dash.cloudflare.com
• GitHub: https://github.com/your-username/cursor-fullstack-ai-ide
• Documentation: https://cursor-ide.pages.dev/docs
• API Reference: https://cursor-backend.workers.dev/api

---

🎯 هذا هو الدليل الموحد والشامل لتطبيق Cursor Full Stack AI IDE!

🚀 ابدأ الآن واختر طريقة النشر المناسبة لك!