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 (مستحسن)**

#### **الطريقة السريعة:**
```bash
# إنشاء مستودع منفصل للـ 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](https://dash.cloudflare.com)
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`

#### **متغيرات البيئة:**
```bash
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 (محلي)**

#### **تشغيل سريع:**
```bash
# بناء وتشغيل جميع الخدمات
docker-compose up --build -d

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

#### **Docker Compose:**
```yaml
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**

#### **النشر التلقائي:**
```bash
# إعداد 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. تثبيت التبعيات**
```bash
# Frontend
cd cloudflare/frontend
npm install

# Backend
cd ../backend
npm install
```

### **3. إعداد متغيرات البيئة**
```bash
# 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. استنساخ المشروع:**
```bash
git clone https://github.com/your-username/cursor-fullstack-ai-ide.git
cd cursor-fullstack-ai-ide
```

### **2. تثبيت التبعيات:**
```bash
# Frontend
cd cloudflare/frontend
npm install

# Backend
cd ../backend
npm install
```

### **3. تشغيل محلي:**
```bash
# Frontend
npm run dev

# Backend
npm run dev
```

### **4. النشر على Cloudflare:**
```bash
# إنشاء مستودع منفصل
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!**

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