شعار واحة أدوات الذكاء الاصطناعي
واحة أدواتالذكاء الاصطناعي
المستشار الذكي
بناء تطبيقات كاملة بدون كتابة كود: دليل متقدم لـ Cursor AI
سلسلة: دروس ومهارات متنوعة
متقدم

بناء تطبيقات كاملة بدون كتابة كود: دليل متقدم لـ Cursor AI

45 دقيقة
٢٣ مايو ٢٠٢٦
المرحلة 1 من 4

الفصل الأول: إعداد بيئة العمل المتقدمة وتهيئة Cursor AI

الفصل الأول: إعداد بيئة العمل المتقدمة وتهيئة Cursor AI

في هذا الفصل، سنقوم ببناء أساس متين لتجربة تطوير استثنائية باستخدام Cursor AI. لن نكتفي فقط بتثبيت الأداة، بل سنتعمق في فهم كيفية عملها، وتهيئتها لتناسب احتياجاتك الخاصة، وإعداد بيئة عمل احترافية تمكنك من بناء تطبيقات كاملة دون كتابة كود تقليدي. سنغطي كل شيء من التثبيت إلى التخصيص المتقدم، مع التركيز على الممارسات التي تجعل من Cursor AI شريكًا حقيقيًا في الإبداع البرمجي.

1.1 ما هو Cursor AI؟ ولماذا هو مختلف؟

Cursor AI ليس مجرد محرر نصوص عادي. إنه بيئة تطوير متكاملة (IDE) مبنية على أساس Visual Studio Code، ولكنها مزودة بذكاء اصطناعي متقدم يفهم سياق مشروعك بالكامل. الفرق الجوهري هو أن Cursor لا يقتصر على إكمال الكود (Autocomplete)، بل يمكنه فهم نواياك، إعادة هيكلة المشروع، إنشاء ملفات كاملة، وحتى تصحيح الأخطاء بناءً على أوامر باللغة العربية أو الإنجليزية.

💡 ملاحظة هامة:

Cursor AI يستخدم نماذج لغوية ضخمة (LLMs) مثل GPT-4 و Claude. هذا يعني أن جودة المخرجات تعتمد بشكل كبير على كيفية صياغة الأوامر (Prompts) التي سنتعلمها بالتفصيل في الفصول القادمة.

1.2 تحميل وتثبيت Cursor AI

عملية التثبيت بسيطة ومباشرة، ولكن سنركز على الخيارات التي تمنحك أقصى استفادة.

  • الخطوة الأولى: توجه إلى الموقع الرسمي cursor.com وانقر على زر "Download".
  • الخطوة الثانية: اختر نظام التشغيل الخاص بك (Windows, macOS, Linux).
  • الخطوة الثالثة: بعد التثبيت، قم بتشغيل Cursor. سيطلب منك تسجيل الدخول. يمكنك استخدام حساب GitHub أو Google.
  • الخطوة الرابعة (الأهم): عند أول تشغيل، سيُسأل إذا كنت تريد استيراد الإعدادات من VS Code. اختر "نعم" إذا كنت تستخدم VS Code، فهذا سينقل جميع إضافاتك وإعداداتك المفضلة.

✨ نصيحة احترافية:

بعد التثبيت، قم بتثبيت إضافة "Arabic Language Pack for VS Code" من متجر الإضافات. هذا سيجعل واجهة Cursor باللغة العربية، مما يسهل التنقل للمبتدئين.

1.3 فهم واجهة Cursor AI: الأدوات الأساسية

واجهة Cursor تشبه VS Code إلى حد كبير، ولكن مع إضافات ذكية. دعنا نتعرف على أهم العناصر:

  • شريط الأوامر (Command Palette): اختصار Ctrl+Shift+P (أو Cmd+Shift+P في macOS). هنا يمكنك الوصول لأي أمر في Cursor.
  • نافذة الدردشة (Chat): اختصار Ctrl+I. هذه هي نافذتك الرئيسية للتفاعل مع الذكاء الاصطناعي. يمكنك طرح أسئلة، طلب شرح كود، أو إنشاء وظائف كاملة.
  • وضع التحرير المباشر (Inline Edit): اختصار Ctrl+K. يتيح لك تعديل أي جزء من الكود مباشرة عن طريق كتابة أمر.
  • مستكشف الملفات (Explorer): على اليسار، لإدارة ملفات مشروعك.

1.4 تهيئة Cursor AI: إعدادات متقدمة لزيادة الإنتاجية

الآن سنقوم بتهيئة Cursor ليكون أكثر فعالية. سنعدل بعض الإعدادات الأساسية في ملف settings.json.

لفتح الإعدادات، اذهب إلى File > Preferences > Settings، ثم ابحث عن "Edit in settings.json". أضف الإعدادات التالية: 

{
  // تفعيل الاقتراحات الذكية بشكل فوري
  "editor.inlineSuggest.enabled": true,
  
  // جعل Cursor يفهم سياق الملفات المفتوحة
  "cursor.ai.enableContextAwareness": true,
  
  // تحديد نموذج الذكاء الاصطناعي المفضل (GPT-4 أو Claude)
  "cursor.ai.defaultModel": "gpt-4",
  
  // تفعيل التصحيح التلقائي للأخطاء
  "cursor.ai.autoFixErrors": true,
  
  // جعل الاقتراحات تظهر بشكل أسرع
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  
  // تفعيل الإكمال التلقائي للأقواس والعلامات
  "editor.autoClosingBrackets": "always",
  "editor.autoClosingQuotes": "always"
}

📘 شرح الإعدادات:

الإعداد enableContextAwareness هو الأهم. يخبر Cursor بأن ينظر إلى جميع الملفات المفتوحة في مشروعك لفهم السياق الكامل، مما يجعل الاقتراحات أكثر دقة وملاءمة.

1.5 إنشاء أول مشروع: تطبيق "مرحبًا بالعالم" الذكي

لنختبر قوة Cursor AI. سنقوم بإنشاء تطبيق ويب بسيط باستخدام HTML و JavaScript، ولكن بطريقة مختلفة: سنطلب من Cursor كتابة الكود نيابة عنا.

الخطوة 1: افتح Cursor وأنشئ مجلدًا جديدًا للمشروع (File > Open Folder).

الخطوة 2: أنشئ ملفًا جديدًا باسم index.html.

الخطوة 3: اضغط Ctrl+I لفتح نافذة الدردشة، واكتب الأمر التالي بالعربية: 

"أنشئ صفحة HTML كاملة تحتوي على عنوان رئيسي باللغة العربية يقول 'مرحبًا بالعالم من Cursor AI'، مع زر عند الضغط عليه يظهر رسالة ترحيبية في نافذة منبثقة. استخدم ألوانًا زرقاء داكنة وخلفية فاتحة."

النتيجة: سيقوم Cursor بإنشاء الكود التالي (أو ما يشبهه): 

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تطبيق Cursor AI الأول</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f4f8;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            background-color: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #1e3a5f;
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        button {
            background-color: #1e3a5f;
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 1.2rem;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2c5282;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>مرحبًا بالعالم من Cursor AI</h1>
        <button onclick="showMessage()">اضغط هنا</button>
    </div>

    <script>
        function showMessage() {
            alert('أهلاً بك! هذا أول تطبيق لك مع Cursor AI 🚀');
        }
    </script>
</body>
</html>

🌟 تحليل الكود:

لاحظ كيف أن Cursor فهم السياق بالكامل: استخدم اللغة العربية، جعل الاتجاه من اليمين لليسار (dir="rtl")، واستخدم ألوانًا زرقاء داكنة كما طلبت. هذا هو الفرق بين أداة ذكية وأداة تقليدية.

1.6 إعداد Git و GitHub للتكامل مع Cursor

للاستفادة القصوى من Cursor، يجب ربطه بنظام تحكم الإصدارات (Version Control). هذا يسمح لك بتتبع التغييرات والعودة لأي إصدار سابق.

الخطوة 1: تأكد من تثبيت Git على جهازك. اكتب في الطرفية: 

git --version

الخطوة 2: في Cursor، افتح الطرفية المدمجة (Terminal > New Terminal) وقم بتهيئة Git: 

git init
git add .
git commit -m "المشروع الأول مع Cursor AI"

الخطوة 3: اربط المشروع بـ GitHub. أنشئ مستودعًا جديدًا على GitHub، ثم: 

git remote add origin https://github.com/your-username/your-repo.git
git branch -M main
git push -u origin main

⚠️ تحذير مهم:

لا تدفع (push) أي ملفات تحتوي على مفاتيح API أو كلمات مرور إلى GitHub. استخدم ملف .gitignore لتجاهل هذه الملفات. Cursor يمكنه مساعدتك في إنشاء هذا الملف تلقائيًا.

1.7 تثبيت الإضافات الأساسية (Extensions)

لجعل تجربة التطوير أكثر سلاسة، قم بتثبيت هذه الإضافات من متجر الإضافات في Cursor:

  • Prettier: لتنسيق الكود تلقائيًا.
  • ESLint: لتحليل جودة الكود واكتشاف الأخطاء.
  • Live Server: لتشغيل تطبيقات الويب محليًا وتحديثها تلقائيًا.
  • GitLens: لتحسين تجربة Git داخل Cursor.

لتثبيت إضافة، اذهب إلى أيقونة الإض

فيديو الدرس

جاري تحميل التقييمات...