قبل أول أمر في البرمجة بالوصف: 28 مفهومًا لتفهم كيف يعمل أي موقع

تخيّل أنك قلت للنادل: «أريد طعامًا لذيذًا». لن تحصل على ما في ذهنك. أمّا إن قلت: «دجاج مشوي، نصف دجاجة، وصلصة ليمون جانبية»، فستحصل عليه بالضبط. التعامل مع الذكاء الاصطناعي في البرمجة بالوصف (Vibe Coding) هو الفكرة نفسها.

كلما فهمت هذه المفاهيم، وصفت للذكاء الاصطناعي ما تريده بدقّة، وفهمت ردّه، وأمسكت خطأه قبل أن يصل إلى المستخدمين. الهدف ليس حفظ المصطلحات، بل بناء خريطة ذهنية لأي موقع: ماذا تفعل كل قطعة، وأين مكانها.

رحلة نقرة واحدة#

قبل التفاصيل، تتبّع ما يحدث حين تضغط زرّ «دخول» في أي منصة:

1. المستخدم

   أنت؛ تفتح المتصفح وتضغط «دخول». النقرة بداية الرحلة كلها.

2. المتصفح

   يحوّل نقرتك إلى طلب (Request) منظّم.

3. الإنترنت

   ينقل الطلب عبر بروتوكول HTTP أو HTTPS المشفّر.

4. الخادم

   يستقبل الطلب، ويشغّل منطق الكواليس (Backend): هل كلمة المرور صحيحة؟ هل الاشتراك سارٍ؟

5. قاعدة البيانات

   تُسترجع منها بيانات الحساب، ثم تعود الرحلة بالعكس حتى تظهر النتيجة على شاشتك.

المجموعة الأولى: مفاهيم الويب الأساسية#

الصورة الكبيرة والكواليس#

البيت والعنوان#

التجربة والمظهر#

التواصل بين الأنظمة#

POST /api/translate
{ "text": "مرحبًا", "to": "en" }
← الرد: { "result": "Hello" }

لبنات البناء والأدوات#

من الكود إلى النشر#

المجموعة الثانية: تشريح الصفحة#

كل موقع يتكوّن من العناصر نفسها تقريبًا، من الأعلى إلى الأسفل:

المجموعة الثالثة: لغة التصميم، أو كيف تصف «الشكل الجميل»#

الخلاصة: كل قطعة ومكانها في «المطعم»#

اختبر فهمك#