الهدف
بنهاية هذا الدرس، سيكون الطالب قادرًا على وصف معمارية تطبيقات الويب، وشرح نموذج Client-Server، وتحديد دور كل مكوّن في البنية التحتية للويب.
شرح الدرس
نموذج العميل-الخادم (Client-Server): العميل (المتصفح) يطلب، والخادم يستجيب.
طبقات تطبيق الويب (3-Tier Architecture):
- طبقة العرض (Presentation Layer): ما يراه المستخدم — HTML, CSS, JavaScript في المتصفح.
- طبقة الأعمال/المنطق (Business Logic Layer): معالجة الطلبات، قواعد العمل — خادم التطبيق (Python/Node.js/PHP).
- طبقة البيانات (Data Layer): تخزين واسترداد البيانات — قاعدة البيانات (MySQL, MongoDB).
الخادم المواجه (Front-end Server) مقابل خادم التطبيق (Back-end):
Front-end يُقدم الصفحات ويتعامل مع المتصفح. Back-end يُنفّذ المنطق ويتصل بقاعدة البيانات.
CDN (Content Delivery Network): شبكة خوادم موزعة جغرافيًا تُوصل المحتوى من أقرب نقطة للمستخدم — تُسرّع التحميل.
DNS: يُحوّل اسم النطاق (google.com) لعنوان IP رقمي.
أسئلة تدريبية
1. مستخدم في القاهرة يكتب ‘youtube.com’ في متصفحه ويضغط Enter. صِف بالترتيب كل ما يحدث حتى تظهر الصفحة.
عرض الإجابة
(1) المتصفح يسأل خادم DNS لتحويل ‘youtube.com’ لعنوان IP. (2) DNS يُرجع عنوان IP. (3) المتصفح يُرسل طلب HTTP/HTTPS للخادم على ذلك IP. (4) الخادم يُعالج الطلب (يتحقق من هوية المستخدم، يجلب البيانات من قاعدة البيانات). (5) يُرجع HTML/CSS/JS. (6) المتصفح يُحلل ويعرض الصفحة.
2. موقع تجارة إلكترونية يعتمد بنية 3 طبقات. المستخدم يضغط ‘أضف للسلة’. ما الطبقة التي تتعامل مع كل من: (أ) الزر نفسه، (ب) التحقق أن الكمية المتاحة > 0، (ج) تحديث جدول قاعدة البيانات؟
عرض الإجابة
(أ) الزر — طبقة العرض (HTML/CSS/JavaScript في المتصفح). (ب) التحقق من الكمية — طبقة الأعمال (Business Logic على خادم التطبيق — قاعدة العمل: لا تُضف للسلة إذا الكمية 0). (ج) التحديث في قاعدة البيانات — طبقة البيانات (Database Layer).
3. ما ميزة CDN لموقع عالمي مثل Netflix؟ وماذا يحدث لو تعطّلت كل نقاط CDN في منطقة معينة؟
عرض الإجابة
الميزة: بدلًا من إرسال الفيديو من خادم مركزي واحد لكل العالم (بطء وازدحام)، CDN تُخزّن نسخًا من المحتوى على خوادم قريبة من المستخدمين — المصري يُحمّل من دبي لا من أمريكا. لو تعطّل CDN الإقليمي: المتصفح يُرجع للخادم الأصلي (Origin Server) مع بطء أكبر، أو تتلقى نقطة CDN مجاورة الحمل.
4. ما الفرق بين التطبيق أحادي الصفحة (SPA) والتطبيق متعدد الصفحات (MPA)؟ أيهما يناسب تطبيق محادثات فورية؟
عرض الإجابة
MPA: كل نقرة تُطلب صفحة HTML كاملة من الخادم (إعادة تحميل). SPA: يُحمّل مرة واحدة ويُحدث أجزاء الصفحة ديناميكيًا بدون إعادة تحميل كاملة (مثل Gmail). المحادثات الفورية: SPA أنسب بكثير — لا يحتمل تطبيق المحادثة إعادة تحميل الصفحة كل رسالة.
5. لماذا يُنصح بفصل طبقة العرض عن طبقة الأعمال في تطبيقات الويب؟ ما الفائدة العملية؟
عرض الإجابة
الفائدة: (1) كل طبقة تُطوَّر وتُختبر وتُنشر باستقلالية — تغيير تصميم الواجهة لا يمس منطق العمل. (2) يمكن استخدام نفس طبقة الأعمال لتطبيق ويب وتطبيق موبايل وAPI. (3) سهولة التوسع — إذا احتجت خوادم تطبيق أكثر تُضيفها دون تغيير قاعدة البيانات أو الواجهة.
6. ما الخادم العكسي (Reverse Proxy)؟ وما دوره في بنية تطبيق ويب ضخم؟
عرض الإجابة
الخادم العكسي: يستقبل طلبات المستخدمين ويُوزعها على خوادم تطبيق متعددة خلفه (Load Balancing)، ويُخفي بنية الخادم الداخلية. أدواره: (1) توزيع الحمل بين خوادم متعددة. (2) التخزين المؤقت (Caching). (3) إنهاء SSL. (4) حماية إضافية — المهاجم لا يرى الخوادم الحقيقية. مثال: Nginx, Apache.
7. ما الفرق بين الاستضافة المشتركة (Shared Hosting) والخادم الافتراضي (VPS) والحوسبة السحابية؟ أيهما يناسب متجرًا إلكترونيًا ناميًا؟
عرض الإجابة
مشتركة: موارد مقسومة بين مواقع كثيرة، أرخص لكن أداء غير مضمون. VPS: خادم افتراضي مخصص لك داخل خادم فيزيائي، أغلى قليلًا لكن أداء محكوم. سحابية (AWS/Azure): موارد مرنة تتوسع بحسب الطلب وتدفع ما تستهلك فقط. المتجر النامي: السحابية تتيح التوسع تلقائيًا وقت ذروة المبيعات دون شراء بنية تحتية ثابتة مسبقًا.
8. شرح مفهوم ‘عديم الحالة’ (Stateless) في بروتوكول HTTP. وكيف تحتفظ تطبيقات الويب بجلسة المستخدم رغم ذلك؟
عرض الإجابة
HTTP عديم الحالة: كل طلب مستقل تمامًا — الخادم لا ‘يتذكر’ أنك أرسلت طلبًا قبل ثانية. لكن تطبيقات الويب تحتفظ بالجلسة بـ: (1) Cookies: يُرسل الخادم معرف جلسة (Session ID) للمتصفح في Cookie يُرسله المتصفح مع كل طلب. (2) JWT Tokens: رمز مشفر يحمل بيانات المستخدم يُرسله العميل مع الطلبات.
9. ما الفرق بين قاعدة بيانات علائقية (SQL) وغير علائقية (NoSQL)؟ أيهما يناسب تطبيق يخزن تغريدات مستخدمين متنوعة البنية؟
عرض الإجابة
SQL: بيانات منظمة في جداول ذات مخطط ثابت. علاقات معقدة. قوية للاستعلامات المعقدة. NoSQL: بيانات مرنة (JSON مثلًا) بدون مخطط ثابت. تتوسع أفقيًا بسهولة. التغريدات: NoSQL أنسب لأن التغريدات قد تحتوي صورًا، فيديوهات، استطلاعات، مقاطع صوتية — بنيتها متغيرة. MongoDB أو Cassandra مثلًا.
10. ما مفهوم الـ API (واجهة برمجة التطبيقات)؟ وكيف تُمكّن تطبيقات مختلفة من التواصل؟
عرض الإجابة
API: عقد محدد يُتيح لتطبيقٍ ما طلب خدمة من تطبيق آخر دون معرفة كيفية تنفيذها داخليًا. مثال: تطبيق سفر يُرسل طلب API لشركة طيران ليحجز مقعدًا — لا يعرف كيف يعمل نظام الطيران داخليًا لكن يعرف كيف ‘يسأل’. التواصل: عبر HTTP مع JSON/XML كتنسيق للبيانات (REST API).
11. موقع يعرض خريطة Google Maps داخله. ما التقنية الويب التي تجعل ذلك ممكنًا؟ وما الموارد التي يستخدمها الموقع مقارنة بما يستخدمه Google؟
عرض الإجابة
التقنية: iframe يُضمّن صفحة Google داخل صفحتك، أو Google Maps JavaScript API يُتيح دمج الخريطة برمجيًا. الموارد: الموقع يستخدم API key لـ Google، يُرسل الطلبات لـ Google، وGoogle يُرجع بيانات الخريطة — البنية التحتية (خوادم الخرائط والصور) كلها لدى Google.
12. ما ميزة بنية الخدمات المتناهية الصغر (Microservices) على التطبيق الكتلي (Monolithic)؟ ومتى يُفضَّل المونوليث؟
عرض الإجابة
Microservices: كل وظيفة (المدفوعات، الشحن، المستخدمون) خدمة مستقلة تُطوَّر وتُنشر وتتوسع باستقلالية — خلل في خدمة لا يوقف الباقي. Monolithic: التطبيق كله كتلة واحدة — أبسط في البداية لكن صعب التوسع والتعديل. يُفضَّل المونوليث: للمشاريع الصغيرة ذات الفريق المحدود والمتطلبات البسيطة حيث تعقيد Microservices غير مبرر.