ملخص البرمجة والذكاء الاصطناعي تانية ثانوي، الترم الأول تطبيقات الويب

أهداف التعلم

1. تمييز أدوار الواجهة الأمامية والواجهة الخلفية وطبقة البيانات في نموذج تطبيق ويب مبسط.
2. تتبع تدفق طلب المستخدم عبر الطبقات الثلاث حتى ظهور النتيجة على شاشة المتصفح.
3. تصميم توزيع مناسب للمسؤوليات بين الطبقات الثلاث وتبرير الاختيارات المتخذة.
4. شرح مفهوم تطبيق الويب واستخدامه الشائع عبر المتصفح أو كبرنامج قابل للتثبيت.
5. مقارنة تطبيقات الويب المختلفة (الفيديو، التسوق، البريد، الخرائط) من حيث توزيع الطبقات.
6. حل مسائل تطبيقية تتطلب تحديد الطبقة المسؤولة عن كل وظيفة في سيناريوهات واقعية.

المصطلحات والتعريفات

بنية تطبيق الويب ثلاثية الطبقات

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

1. الواجهة الأمامية

   • تُظهر المحتوى (نصوص، صور، فيديو) وتستقبل مدخلات المستخدم مثل كلمات البحث أو بيانات النموذج.
   • تُنفّذ عمليات بسيطة على المتصفح (مثلاً التحقق من صحة الإدخال قبل الإرسال).
   • لا تتعامل مباشرةً مع البيانات المخزنة؛ بل تُرسل الطلبات إلى الواجهة الخلفية.

2. الواجهة الخلفية

   • تستقبل الطلبات من الواجهة الأمامية عبر بروتوكولات الويب (HTTP/HTTPS).
   • تُطبق منطق العمل (قواعد التطبيق) مثل التحقق من صلاحية الدخول، حساب الأسعار، أو اختيار النتائج المتطابقة.
   • تتواصل مع طبقة البيانات لاسترجاع أو تعديل السجلات المطلوبة.

3. طبقة البيانات

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

مثال توضيحي لتدفق الطلب

عند كتابة كلمة بحث في مربع البحث على موقع تجارة إلكترونية:

• الواجهة الأمامية تستقبل كلمة البحث وتُرسلها إلى الواجهة الخلفية.
• الواجهة الخلفية تُحوِّل الطلب إلى استعلام قاعدة البيانات وتستقبل النتائج.
• طبقة البيانات تُعيد السجلات المطابقة (منتجات) إلى الواجهة الخلفية.
• الواجهة الخلفية تُجهِّز البيانات (مثلاً ترتيبها حسب الصلة) وتُعيدها إلى الواجهة الأمامية.
• الواجهة الأمامية تعرض النتائج على شاشة المستخدم.

هذا التعاون المتسلسل يضمن أن كل طبقة تركز على مسؤوليتها دون تداخل غير ضروري، ما يُسهِّل صيانة النظام وتوسيع وظائفه.

تدفق التعاون بين الطبقات (مقارنة المسؤوليات)

خطوات تدفق الطلب في مثال البحث

مقارنة بين الطبقات في خدمات مختلفة

تطبيقات وأمثلة محلولة

مثال 1: البحث عن منتج في متجر إلكتروني

1. المستخدم يكتب "هاتف ذكي" في مربع البحث.
2. الواجهة الأمامية تُرسل النص إلى الخادم عبر طلب HTTP GET.
3. الواجهة الخلفية تستقبل النص، تُنشئ استعلام SQL مثل:

   SELECT * FROM المنتجات WHERE الاسم LIKE '%هاتف ذكي%';
   

4. طبقة البيانات تُنفّذ الاستعلام وتُعيد قائمة بالمنتجات المطابقة.
5. الواجهة الخلفية تُضيف ترتيبًا حسب السعر أو التقييم، ثم تُعيد النتيجة إلى الواجهة الأمامية.
6. الواجهة الأمامية تعرض بطاقات المنتج (صورة، اسم، سعر) للمستخدم.

نقطة هامة: لا يمكن للواجهة الأمامية أن تُجري الاستعلام مباشرةً على قاعدة البيانات؛ فهي تحتاج إلى الواجهة الخلفية لتطبيق منطق العمل وحماية البيانات.

مثال 2: تطبيق طقس يطلب اسم المدينة

1. الواجهة الأمامية تُظهر حقلًا لإدخال اسم المدينة وتُرسل الاسم إلى الخادم عند الضغط على زر "احصل على الطقس".
2. الواجهة الخلفية تستقبل الاسم، تُستدعي خدمة طقس خارجية (API) للحصول على بيانات الطقس الحالية.
3. الواجهة الخلفية تُخزن النتيجة في قاعدة البيانات لتاريخ الاستعلام (لتحليل الاستخدام لاحقًا).
4. طبقة البيانات تُضيف سجلًا يحتوي على اسم المدينة، التاريخ، وبيانات الطقس.
5. الواجهة الخلفية تُعيد البيانات إلى الواجهة الأمامية.
6. الواجهة الأمامية تُظهر درجة الحرارة، حالة السماء، وتُظهر أيقونة مناسبة.

ملاحظة: المهمة التي لا يمكن للواجهة الأمامية القيام بها وحدها هي استدعاء خدمة الطقس الخارجية؛ لأنها تتطلب اتصالًا بخادم خارجي ومعالجة البيانات قبل الإرسال إلى المستخدم.

تنبيهات الامتحان (أخطاء شائعة)

1. خلط الواجهة الأمامية مع الخلفية – يظن البعض أن معالجة البيانات يمكن أن تُجرى في المتصفح، بينما في الواقع تُجرى على الخادم لحماية البيانات وتطبيق القواعد.
2. اعتقاد أن قاعدة البيانات تُظهر الواجهة – قاعدة البيانات لا تتعامل مع العرض؛ وظيفتها فقط التخزين والاسترجاع.
3. إهمال خطوة تدفق الطلب – عند الإجابة على أسئلة التدفق، يجب ذكر كل طبقة بالترتيب (أمامية → خلفية → بيانات → خلفية → أمامية).
4. دمج مسؤوليات الطبقات في سيناريو واحد – مثال: وضع منطق التحقق من المخزون في الواجهة الأمامية يؤدي إلى أخطاء أمان وإمكانية تعديل البيانات من قبل المستخدم.

قائمة المراجعة

• [ ] تعريف تطبيق الويب واختلافه عن تطبيق سطح المكتب.
• [ ] تمييز الواجهة الأمامية عن الواجهة الخلفية من حيث الموقع (المتصفح vs الخادم).
• [ ] شرح دور قاعدة البيانات في تخزين السجلات وإدارتها.
• [ ] رسم mental model لنموذج ثلاث طبقات وتحديد مسؤوليات كل طبقة.
• [ ] تتبع تدفق طلب من إدخال المستخدم إلى عرض النتيجة (خطوات 1‑5).
• [ ] معرفة أمثلة التطبيقات (فيديو، تواصل اجتماعي، تجارة إلكترونية، طقس) وتحديد الطبقة المسؤولة عن كل وظيفة.
• [ ] كتابة استعلام بسيط (SQL) يُظهر كيف تتواصل الطبقة الخلفية مع قاعدة البيانات.
• [ ] توضيح الفرق بين الذاكرة المخبأة (Cache) وقاعدة البيانات.
• [ ] معرفة متى يُستَخدم API خارجي (مثل خدمة الطقس) ودور الواجهة الخلفية في استدعائه.
• [ ] القدرة على تصميم توزيع المسؤوليات لتطبيق جديد (مثال: نظام حجز مواعيد لعيادة).
• [ ] التعرف على الأخطاء الشائعة في توزيع الطبقات وتجنبها في التصميم.
• [ ] مراجعة أسئلة الاختيار المتعدد والملء في النص لتأكيد الفهم الصحيح للمصطلحات.
• [ ] التدريب على كتابة إجابات توضح الطبقة المسؤولة عن كل خطوة في سيناريو عملي.

بالتوفيق في امتحاناتك!