ممّ يتكوّن الموقع

الدرس 3 من 26 في دورة «البرمجة بالإحساس». مجاني، مع رسوم متحركة واختبار.

الواجهة الأمامية: ما تراه

الواجهة الأمامية (فرونت إند) هي كل ما يُحمَّل في المتصفح، أي ما تراه وتضغط عليه. تُبنى بثلاث لغات. HTML: البنية، أي العناوين والأزرار والصور. CSS: المظهر، أي الألوان والخطوط وترتيب العناصر. JavaScript ‏(JS): السلوك، أي ماذا يحدث عندما تضغط زرًا. باختصار: HTML الهيكل العظمي، وCSS الملابس، وJS الحركات.

الواجهة الخلفية: التحقق والمفاتيح

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

قاعدة البيانات: ذاكرة المشروع

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

الاستضافة والنطاق وDNS

الاستضافة حاسوب يقدّم موقعك على مدار الساعة لكل من يفتحه. النطاق (الدومين) اسم بشري مثل mysite.com، حتى لا يضطر أحد لحفظ العنوان الرقمي للخادم. يربط بينهما DNS، دليل هاتف الإنترنت: يسأل المتصفح «أين يسكن mysite.com؟» فيحصل على عنوان الاستضافة. نطاقك الخاص تشتريه من مسجّل نطاقات وتجدّده، عادةً مرة في السنة.

موقع أم تطبيق

الموقع الثابت واجهة أمامية فقط: الجميع يرى الصفحات نفسها. صفحة هبوط، معرض أعمال، آلة حاسبة: لا تحتاج إلى خادم ولا قاعدة بيانات. التطبيق واجهة أمامية مع خادم وقاعدة بيانات. مثال: متتبّع العادات. أزرار «أنجزت» وشاشة الإحصاءات: واجهة أمامية. تسجيل الدخول بكلمة مرور: خادم. سلسلة أيامك المحفوظة: قاعدة بيانات. الموقع الثابت أبسط في البناء والاستضافة.

لماذا يهمك هذا

عندما تعرف الأجزاء، يتضح أي خدمة تحتاج وماذا تطلب من الذكاء الاصطناعي. الكود يُحفظ على GitHub. خدمات استضافة مثل Cloudflare أو Vercel تنشر الموقع. خدمات مثل Supabase توفّر قاعدة البيانات. المزيد عن ذلك في المستويات التالية. لكثير منها خطة مجانية، وراجع الحدود على موقع الخدمة. وقل للذكاء الاصطناعي من البداية: «هذا موقع ثابت» أو «أحتاج تسجيل دخول وقاعدة بيانات».

اختبر نفسك

1. أين يجب التحقق من كلمة مرور المستخدم؟
   الإجابة الصحيحة: في الواجهة الخلفية، أي على الخادم. أي زائر يستطيع قراءة كود الواجهة الأمامية. التحقق والأسرار مكانها الخادم الذي لا يراه أحد.
2. ماذا يفعل DNS؟
   الإجابة الصحيحة: يجد عنوان الاستضافة من اسم النطاق. يعمل DNS كدليل الهاتف: من اسم mysite.com يعرف المتصفح على أي حاسوب يوجد الموقع.
3. معرض أعمال من ثلاث صفحات. ماذا يحتاج؟
   الإجابة الصحيحة: واجهة أمامية واستضافة فقط. الجميع يرى الشيء نفسه ولا يُحفظ شيء: هذا موقع ثابت. الخادم والقاعدة هنا زائدان.

← منشئ أم محرر أم وكيل كيف تكلّف الذكاء الاصطناعي بمهمة →