المقدمة
5 دقيقة للقراءة

أول 15 دقيقة لك (Your First 15 Minutes)

هل أنت جديد في عالم البرمجة بالإحساس؟ هذا الدليل سيأخذك من الصفر إلى أول كود يعمل بمساعدة الذكاء الاصطناعي في 15 دقيقة فقط.

🎯 ما ستتعلمه

في الدقائق القادمة، ستكتشف:

  • ✅ ما هو "البرمجة بالإحساس" حقاً
  • ✅ كيف تختار الأداة المناسبة لك
  • ✅ خطوات التثبيت والإعداد
  • ✅ كتابة أول كود بمساعدة الذكاء الاصطناعي
  • ✅ الخطوات التالية لمسيرتك

⏱️ الجدول الزمني

الدقيقة 0-3  : فهم المفهوم
الدقيقة 3-5  : اختيار الأداة
الدقيقة 5-10 : التثبيت والإعداد
الدقيقة 10-15: أول كود يعمل

📖 الدقيقة 0-3: ما هو البرمجة بالإحساس؟

البرمجة بالإحساس (Vibecoding) هي طريقة برمجة تعتمد على:

  1. التحدث مع الذكاء الاصطناعي كما تتحدث مع زميل خبير
  2. الثقة بحدسك في اتخاذ القرارات
  3. الشحن السريع (Ship Fast) - اجعل الشيء يعمل أولاً

الفرق بين البرمجة التقليدية والبرمجة بالإحساس

البرمجة التقليديةالبرمجة بالإحساس
حفظ القواعد النحويةكتابة الأوامر بالعربية
كتابة كل سطر يدوياًالذكاء الاصطناعي يكتب معك
البحث في الوثائق لساعاتالحصول على إجابات فورية
الخوف من الأخطاءالتجربة السريعة والتعلم

مثال بسيط

بدون البرمجة بالإحساس:

// يجب أن تتذكر: كيف تعمل الحلقات في JavaScript
// يجب أن تتذكر: كيف تعمل المصفوفات
// يجب أن تتذكر: صيغة الدوال
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

مع البرمجة بالإحساس:

أنت: "اطبع كل عنصر في المصفوفة"
الذكاء الاصطناعي: يكتب الكود لك

🤖 الدقيقة 3-5: اختر أداة البداية

اسأل نفسك هذا السؤال:

هل لديك خبرة برمجية سابقة؟

لا، أنا مبتدئ تماماً 👶 → ابدأ بـ Cursor Free → سهل التثبيت → واجهة بسيطة → مجاني

نعم، أبرمج بـ JavaScript/TypeScript 👨‍💻 → ابدأ بـ Windsurf → خفيف وسريع → دعم ممتاز للـ VS Code → مجاني

نعم، أريد أداة احترافية 💪 → ابدأ بـ Cursor Pro → أقوى ميزات الذكاء الاصطناعي → يحلل مشروعك بالكامل → $20/شهر (يمكنك البدء مجاناً)

شجرة القرار

أنت مبتدئ تماماً؟
├─ نعم → Cursor Free
└─ لا → هل تريد أداة احترافية؟
    ├─ نعم → Cursor Pro
    └─ لا → Windsurf

📥 الدقيقة 5-10: التثبيت والإعداد

خيار 1: Cursor (الموصى به للمبتدئين)

الخطوة 1: التحميل

  1. افتح الموقع: cursor.com
  2. حمّل النسخة المناسبة لنظامك (Windows/Mac/Linux)
  3. انتظر اكتمال التحميل

الخطوة 2: التثبيت

# Windows: شغّل الملف المحمّل
# Mac: اسحب التطبيق إلى Applications
# Linux: شغّل الملف المثبت

الخطوة 3: إنشاء حساب

  1. افتح Cursor لأول مرة
  2. اختر "Sign Up"
  3. استخدم بريدك الإلكتروني أو حساب Google
  4. تأكد من بريدك الإلكتروني

خيار 2: Windsurf (خفيف وسريع)

الخطوة 1: التثبيت عبر VS Code

# تأكد من تثبيت VS Code أولاً
# ثم افتح VS Code وانتقل إلى Extensions
# ابحث عن "Windsurf"
# اضغط Install

الخطوة 2: الإعداد

  1. افتح Windsurf من أيقونة Extensions
  2. سجّل الدخول أو أنشئ حساباً
  3. اتبع معالج الإعداد السريع

💻 الدقيقة 10-15: أول كود يعمل

الآن نأتي إلى الجزء الممتع! سنكتب أول كود لنا بمساعدة الذكاء الاصطناعي.

المثال الأول: آلة حاسبة بسيطة

الخطوة 1: إنشاء مجلد للمشروع

# أنشئ مجلداً جديداً على سطح المكتب
# سمّه: "my-first-vibecode"

الخطوة 2: فتح المجلد في Cursor

  1. افتح Cursor
  2. اختر File → Open Folder
  3. اختر المجلد الذي أنشأته

الخطوة 3: إنشاء ملف HTML

  1. اضغط Ctrl+N (أو Cmd+N على Mac) لإنشاء ملف جديد
  2. احفظ الملف باسم index.html
  3. اكتب الكود التالي أو اطلب من الذكاء الاصطناعي كتابته:

الخطوة 4: التحدث مع الذكاء الاصطناعي

في Cursor، اضغط Ctrl+L (أو Cmd+L على Mac) لفتح نافذة الذكاء الاصطناعي، ثم اكتب:

أريد إنشاء آلة حاسبة بسيطة بـ HTML و JavaScript.
الآلة الحاسبة تحتوي على:
- حقلين للأرقام
- أزرار للعمليات الأساسية (+، -، ×، ÷)
- زر لمسح النتائج
- عرض النتيجة

**الخطوة 5: مراقبة السحر! ⭐

الذكاء الاصطناعي سيكتب لك الكود الكامل. قد يبدو هكذا:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>آلة حاسبة بسيطة</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .calculator {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 18px;
            box-sizing: border-box;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin: 20px 0;
        }
        button {
            padding: 15px;
            font-size: 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.1s;
        }
        button:hover {
            transform: scale(1.05);
        }
        button:active {
            transform: scale(0.95);
        }
        .add { background: #4CAF50; color: white; }
        .subtract { background: #2196F3; color: white; }
        .multiply { background: #FF9800; color: white; }
        .divide { background: #f44336; color: white; }
        .clear { background: #9E9E9E; color: white; }
        .result {
            font-size: 24px;
            text-align: center;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 8px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h2>آلة حاسبة بسيطة</h2>
        <input type="number" id="num1" placeholder="الرقم الأول">
        <input type="number" id="num2" placeholder="الرقم الثاني">
        <div class="buttons">
            <button class="add" onclick="calculate('+')">＋</button>
            <button class="subtract" onclick="calculate('-')">－</button>
            <button class="multiply" onclick="calculate('*')">×</button>
            <button class="divide" onclick="calculate('/')">÷</button>
        </div>
        <button class="clear" onclick="clearResult()" style="width: 100%;">مسح</button>
        <div class="result" id="result">النتيجة ستظهر هنا</div>
    </div>
    <script>
        function calculate(operation) {
            const num1 = parseFloat(document.getElementById('num1').value);
            const num2 = parseFloat(document.getElementById('num2').value);
            let result;

            switch(operation) {
                case '+':
                    result = num1 + num2;
                    break;
                case '-':
                    result = num1 - num2;
                    break;
                case '*':
                    result = num1 * num2;
                    break;
                case '/':
                    result = num2 !== 0 ? num1 / num2 : 'لا يمكن القسمة على صفر';
                    break;
            }

            document.getElementById('result').textContent = `النتيجة: ${result}`;
        }

        function clearResult() {
            document.getElementById('num1').value = '';
            document.getElementById('num2').value = '';
            document.getElementById('result').textContent = 'النتيجة ستظهر هنا';
        }
    </script>
</body>
</html>

الخطوة 6: تجربة الكود

  1. احفظ الملف: Ctrl+S (أو Cmd+S)
  2. افتح الملف في متصفحك:
    • في Cursor: اضغط بزر الماوس الأيمن على الملف
    • اختر "Open in Default Browser"
  3. جرب الآلة الحاسبة! 🎉

🎉 مبروك! لقد كتبت أول كود لك

ما الذي حدث للتو؟

  1. ✅ أنت حددت ما تريد - آلة حاسبة بسيطة
  2. ✅ الذكاء الاصطناعي كتب الكود - HTML و CSS و JavaScript
  3. ✅ أنت فهمت الكود - كل شيء واضح ومنطقي
  4. ✅ الشيء يعمل! - آلة حاسبة فعلية

لماذا هذا مهم؟

  • لم تحفظ أي قواعد نحوية - فقط وصفت ما تريد
  • لم تكتب كل سطر - الذكاء الاصطناعي ساعدك
  • تعلمت بالتجربة - رأيت النتيجة فوراً

🚀 الخطوات التالية

خيار 1: المزيد من التدريب العملي

جرب طلبات (Prompts) أكثر تعقيداً:

# طلب 2: قائمة مهام
أريد إنشاء تطبيق قائمة مهام (Todo List):
- إضافة مهام جديدة
- تحديد المهام كمكتملة
- حذف المهام
- حفظ المهام في المتصفح (localStorage)

# طلب 3: لعبة بسيطة
أريد إنشاء لعبة تخمين الأرقام:
- الكمبيوتر يختار رقماً عشوائياً من 1 إلى 100
- اللاعب يخمن الرقم
- الكمبيوتر يقول "أكبر" أو "أصغر"
-计数 اللاعب يحتاج كم محاولة

خيار 2: تعلم الأساسيات

اقرأ المقالات التالية في هذا الويكي:

  • "ما هو Vibe Coding؟" - الفهم العميق
  • "Vibe Stack" - الأدوات التي تحتاجها
  • "أمثلة عملية" - مشاريع حقيقية

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

  • 📱 انضم لمجموعات Discord و Telegram
  • 💬 شارك مشاريعك
  • 🆚 تعلم من الآخرين
  • � certifk حصل على شهادات

💡 نصائح للمبتدئين

✅ افعل هذا

  1. ابدأ بمشاريع صغيرة - لا تبني Facebook من اليوم الأول
  2. اكتب أوامر واضحة - كن محدداً في ما تريد
  3. جرب بنفسك - لا تعتمد 100% على الذكاء الاصطناعي
  4. تعلم من الأخطاء - كل مبرمج يرتكب أخطاء
  5. احتفظ بمشاريعك - سترى تطورك مع الوقت

❌ لا تفعل هذا

  1. لا تنسخ كوداً لا تفهمه - اسأل الذكاء الاصطناعي عن الشرح
  2. لا تتوقع الكمال من المرة الأولى - التكرار هو مفتاح التعلم
  3. لا تستخدم الذكاء الاصطناعي في الغش - الهدف هو التعلم
  4. لا تستسلم بسهولة - البرمجة تحتاج صبراً
  5. لا تخجل من السؤال - لا سؤال سخيف في البرمجة

🎚️ الخلاصة

في خلال 15 دقيقة، تعلمت:

  • ✅ ما هو الـ Vibecoding
  • ✅ كيف تختار أداة مناسبة
  • ✅ كيف تثبت الأداة
  • ✅ كيف تكتب أول كود يعمل
  • ✅ أين تذهب بعد ذلك

أنت الآن في بداية رحلة مثيرة!

البرمجة بالإحساس ليست مجرد طريقة برمجة - إنها عقلية جديدة.

بدلاً من "لا أعرف كيف أبرمج"، فكر:

"أنا أعرف ما أريد بناءه، والذكاء الاصطناعي سيساعدني على تحقيقه"

📞 هل تحتاج مساعدة؟

المصادر المتاحة

  • 📖 هذا الويكي - مئات المقالات والأمثلة
  • 💬 المجتمع - آلاف المبرمجين المستعدين للمساعدة
  • 🎥 الدروس المرئية - قنوات YouTube بالعربية
  • 📱 التطبيقات - تدريبات عملية مباشرة

الأسئلة الشائعة

س: هل أحتاج لمعرفة البرمجة مسبقاً؟ ج: لا! هذا الدليل مصمم للمبتدئين تماماً.

س: كم يستغرق تعلم البرمجة بالإحساس؟ ج: الأساسيات في أسبوع، الإتقان في 3-6 أشهر.

س: هل هذه البرمجة "حقيقية"؟ ج: نعم! شركات كبيرة تستخدم نفس الأساليب.

س: ماذا لو كان الكود خاطئاً؟ ج: هذا طبيعي! اطلب من الذكاء الاصطناعي إصلاح الخطأ.

🏁 التحدي التالي

الآن بعد أن فهمت الأساسيات، جرب هذا التحدي:

التحدي: بمن每小时 20 دقيقة، أنشئ:

  1. صفحة ويب شخصية
  2. معلومات عنك
  3. روابط لمواقعك المفضلة
  4. تصميم جميل بألوان متدرجة

استخدم Prompt مثل:

أريد إنشاء صفحة ويب شخصية بسيطة:
- اسمي: [اسمك]
- نبذة عني: [اكتب شيئاً عنك]
- روابط: [أضف روابطك]
- أريد تصميماً عصرياً بألوان متدرجة

🎊 تهانينا! لقد بدأت رحلتك في عالم البرمجة بالإحساس!

تذكر: كل خبير بدأ كمبتدئ. المهم هو أن تبدأ.

هل كان هذا الدليل مفيداً؟ هل لديك أسئلة؟ شارك تجربتك مع المجتمع!

السابقنظام البرمجة بالذكاء الاصطناعي (AI Coding Ecosystem)