البرمجة والذكاء الاصطناعي · الصف الثاني الثانوي · الترم الأول
البنية العامة لتطبيقات الويب
نموذج الطبقات الثلاث لتطبيقات الويب — الواجهة الأمامية (العرض والتفاعل)، الواجهة الخلفية (المعالجة على الخادم)، وقاعدة البيانات (التخزين) — وكيف تتعاون هذه الطبقات لتنفيذ طلب المستخدم، بأمثلة من مواقع الفيديو والتواصل الاجتماعي والتجارة الإلكترونية.
آخر تحديث: · كيف نراجع المحتوى
مقدمة
- المادة: البرمجة والذكاء الاصطناعي
- المسار: مسار الهندسة وعلوم الحاسب
تكتب اسم منتج في مربع البحث في متجر إلكتروني، وبعد لحظة تظهر أمامك عشرات النتائج بصورها وأسعارها. ما يبدو خطوة واحدة هو في الحقيقة رحلة قصيرة يقطعها طلبك بين جهازك وخادم بعيد ومخزن بيانات ضخم، ثم يعود. في هذا الدرس نتعرف على البنية العامة لتطبيقات الويب، ونرى كيف تتعاون طبقاتها الثلاث — الواجهة الأمامية والواجهة الخلفية وقاعدة البيانات — لتحويل ما يفعله المستخدم إلى نتيجة.
أهداف التعلم
- أن تميّز بين أدوار الواجهة الأمامية والواجهة الخلفية وطبقة البيانات في نموذج تطبيق ويب مبسط.
- أن تتتبّع تدفق طلب المستخدم عبر طبقات تطبيق الويب حتى ظهور النتيجة.
- أن تصمم توزيعًا مناسبًا لمسؤوليات تطبيق ويب، وتبرر قراراته.
شرح الدرس
السؤال الرئيسي: كيف يُبنى تطبيق الويب، وكيف تعمل طبقاته الثلاث معًا للاستجابة لما يفعله المستخدم؟ الفكرة الأساسية أن تطبيق الويب يُبنى من ثلاث طبقات — الواجهة الأمامية، والواجهة الخلفية، وقاعدة البيانات — تتعاون معًا لتحويل إجراء المستخدم إلى نتيجة.
تطبيق الويب
تطبيق الويب: تطبيق يُستخدم عادةً من خلال متصفح الويب، وقد يكون بعضه قابلًا للتثبيت على الجهاز أيضًا. أمثلته: خدمات الفيديو، والتسوق، والبريد، والخرائط على الويب.
الطبقات الثلاث لتطبيق الويب
نموذج تعليمي مبسط يقسّم تطبيق الويب إلى ثلاثة أجزاء رئيسة (وقد تختلف البنية الفعلية من تطبيق إلى آخر):
| الطبقة | الدور | أمثلة |
|---|---|---|
| الواجهة الأمامية | الجزء الذي يراه المستخدم ويتعامل معه في المتصفح؛ يعرض المحتوى ويستقبل ما يكتبه المستخدم أو يختاره | شاشة البحث، صفحات عرض المنتجات، نماذج الإدخال |
| الواجهة الخلفية | الجزء الذي يعمل على الخادم، ويعالج الطلبات ويطبّق قواعد التطبيق | البحث عن منتجات تطابق معايير البحث، التحقق من تسجيل الدخول |
| قاعدة البيانات | طبقة تحفظ البيانات وتوفرها عند الحاجة؛ وقد تشمل قواعد بيانات أو تخزين ملفات وكائنات أو ذاكرة مخبأة أو خدمات بيانات خارجية | معلومات المنتجات، معلومات المستخدمين، سجل الطلبات |
تدفق تعاون الطبقات الثلاث
مثال: البحث عن منتج في متجر إلكتروني —
- تستقبل الواجهة الأمامية كلمات البحث التي أدخلها المستخدم.
- ترسل الواجهة الأمامية كلمات البحث إلى الواجهة الخلفية.
- تطلب الواجهة الخلفية من طبقة البيانات المنتجات التي تطابق عبارة البحث.
- تعيد طبقة البيانات النتائج المطلوبة إلى الواجهة الخلفية.
- تجهز الواجهة الخلفية النتائج لإرسالها إلى الواجهة الأمامية.
- تعرض الواجهة الأمامية نتائج البحث على شاشة المستخدم.
باختصار: الواجهة الأمامية تعرض وتجمع؛ والواجهة الخلفية تقرر وتعالج؛ وقاعدة البيانات تخزن وتسترجع.
أمثلة من خدمات مألوفة
| الخدمة | الواجهة الأمامية (العرض والتفاعل) | الواجهة الخلفية (المعالجة والتحكم) | قاعدة البيانات (التخزين والإدارة) |
|---|---|---|---|
| موقع مشاركة الفيديو | عرض شاشات تشغيل الفيديو والبحث؛ استقبال إجراءات المستخدم | اختيار الفيديوهات الموصى بها؛ تجميع عدد المشاهدات | تخزين بيانات الفيديو، ومعلومات المستخدمين، وسجل المشاهدة |
| شبكة التواصل الاجتماعي | عرض الخط الزمني وشاشات النشر؛ إرسال المحتوى المُدخَل | تحديد الجمهور المستهدف للمنشورات؛ التحكم في الإشعارات الفورية | تخزين بيانات المنشورات، وعلاقات المتابعة، والرسائل |
| موقع تجارة إلكترونية | عرض قوائم المنتجات وشاشات سلة التسوق؛ استقبال عمليات الطلب | التحقق من المخزون؛ إرسال طلبات الدفع والتعامل مع نتائجها | تخزين معلومات المنتجات، وسجل الطلبات، ومعلومات العملاء |
تُبنى تقريبًا كل خدمة عبر الإنترنت على نفس الطبقات الثلاث؛ والذي يتغيّر من خدمة إلى أخرى هو محتوى كل طبقة (ما تعرضه، وما تقرره، وما تخزّنه)، لا البنية العامة نفسها.
أمثلة وتطبيقات
مثال 1 (تسجيل الدخول):
- يكتب المستخدم اسمه وكلمة المرور في نموذج الواجهة الأمامية.
- تُرسل البيانات إلى الواجهة الخلفية.
- تطلب الخلفية من قاعدة البيانات بيانات الحساب المخزنة.
- تقارن الخلفية ما أُدخل بما هو مخزن وتقرر: السماح أو الرفض.
- تعرض الواجهة الأمامية الصفحة الرئيسية أو رسالة خطأ.
مثال 2 (تطبيق حجز مواعيد عيادة):
| الميزة | الطبقة المسؤولة | السبب |
|---|---|---|
| نموذج الحجز الذي يملؤه المريض | الواجهة الأمامية | عرض وتفاعل مع المستخدم |
| التحقق من أن الموعد متاح فعلًا | الواجهة الخلفية | قرار يعتمد على قواعد العمل |
| حفظ الزيارات السابقة | قاعدة البيانات | بيانات يجب حفظها بشكل دائم |
مثال 3 (تطبيق الطقس): الواجهة الأمامية تستقبل اسم المدينة وتعرض التوقعات، والخلفية تبحث عن بيانات التوقعات (وقد تتصل بمصدر بيانات خارجي)، وقاعدة البيانات تحفظ التوقعات السابقة. ولا تستطيع الواجهة الأمامية وحدها حفظ سجل دائم يمكن الرجوع إليه من أي جهاز.
ملاحظات مهمة
- الواجهة الأمامية لا تتصل بقاعدة البيانات مباشرة في هذا النموذج؛ الطلب يمر عبر الواجهة الخلفية.
- لا يصح الاعتماد على الواجهة الأمامية وحدها في التحقق المهم (مثل التأكد من الدفع أو الصلاحيات)؛ لأن المستخدم يستطيع التحكم في جهازه، فالقرار النهائي للخلفية.
- نموذج الطبقات الثلاث تعليمي مبسط؛ قد تختلف البنية الفعلية من تطبيق إلى آخر.
- ما يتغير بين الخدمات هو محتوى كل طبقة، أما الفكرة العامة فمتشابهة.
المفاهيم الأساسية
- تطبيق الويب: يُستخدم عادة عبر المتصفح، وقد يكون قابلًا للتثبيت أيضًا.
- الطبقات الثلاث: الواجهة الأمامية (عرض وتفاعل على جهاز المستخدم)، الواجهة الخلفية (معالجة وقواعد على الخادم)، قاعدة البيانات (تخزين وإدارة).
- يتنقل طلب المستخدم عبر الطبقات الثلاث ذهابًا وإيابًا: الأمامية → الخلفية → قاعدة البيانات → الخلفية → الأمامية.
- هذا نموذج تعليمي للفهم، وليس بنية إلزامية؛ فقد تختلف البنية الفعلية أو لا توجد قاعدة بيانات تقليدية أصلًا.
ملخص الدرس
تطبيق الويب يُستخدم عادةً عبر المتصفح، ويمكن فهمه بنموذج من ثلاث طبقات: الواجهة الأمامية التي تعرض المحتوى وتجمع مدخلات المستخدم، والواجهة الخلفية التي تعمل على الخادم فتعالج الطلبات وتطبق قواعد التطبيق، وقاعدة البيانات التي تخزن البيانات وتسترجعها. ويتنقل طلب المستخدم من الأمامية إلى الخلفية إلى البيانات ثم تعود النتيجة بالطريق نفسه. وتشترك خدمات الفيديو والتواصل والتسوق في هذه البنية، ويختلف ما تعرضه كل طبقة وما تقرره وما تخزنه.
أسئلة للتدريب
1. عند البحث عن منتج على موقع تسوق إلكتروني، أي طبقة مسؤولة عن البحث في البيانات عن المنتجات المطابقة لكلمات البحث؟
الإجابة: تتعاون الطبقات الثلاث، لكن المسؤولية الأساسية عن البحث نفسه (فهم الاستعلام وتنفيذ منطق المطابقة) تقع على الواجهة الخلفية، التي تطلب البيانات المطابقة من قاعدة البيانات ثم تعالج النتائج وتُعِدّها للعرض عبر الواجهة الأمامية.
2. تريد عيادة تطبيق ويب يحجز فيه المرضى المواعيد، ويتحققون من الأوقات المتاحة، ويطّلعون على زياراتهم السابقة. لثلاث ميزات — نموذج الحجز، والتحقق من الأوقات المتاحة، وتخزين الزيارات السابقة — حدد أي طبقة ينبغي أن تتولى كل منها.
الإجابة: نموذج الحجز (الشاشة التي يملأ فيها المريض بياناته ويختار الموعد) تتولاه الواجهة الأمامية، لأنه عنصر عرض وتفاعل مباشر مع المستخدم. التحقق من الأوقات المتاحة (منطق تحديد ما إذا كان الموعد المطلوب متاحًا فعلًا وفق حجوزات أخرى) تتولاه الواجهة الخلفية، لأنه قرار معالجة يعتمد على قواعد العمل. تخزين الزيارات السابقة تتولاه قاعدة البيانات، لأنها بيانات يجب حفظها بشكل دائم والرجوع إليها لاحقًا.
3. يتيح تطبيق طقس للمستخدمين كتابة اسم مدينة ورؤية توقعات الطقس. باستخدام نموذج الطبقات الثلاث، سمِّ أي طبقة تقوم بكل مهمة: أخذ اسم المدينة، والبحث عن بيانات التوقعات، وتخزين التوقعات السابقة. وحدد مهمة واحدة لا يمكن للواجهة الأمامية القيام بها وحدها.
الإجابة: أخذ اسم المدينة (استقبال ما يكتبه المستخدم وعرض النتيجة له) مهمة الواجهة الأمامية. البحث عن بيانات التوقعات (معالجة الطلب وربما الاتصال بمصدر بيانات طقس خارجي) مهمة الواجهة الخلفية. تخزين التوقعات السابقة مهمة قاعدة البيانات. مهمة لا يمكن للواجهة الأمامية وحدها القيام بها: الاحتفاظ الدائم بسجل توقعات سابقة عبر جلسات وأجهزة مختلفة للمستخدم — فالواجهة الأمامية تعمل على جهاز المستخدم نفسه ولا يمكنها حفظ بيانات دائمة مشتركة يمكن الوصول إليها لاحقًا من أي جهاز؛ هذا يتطلب قاعدة بيانات على الخادم.