في هذا الدرس 6تصفّح المواضيع
تعرّفنا في الدروس السابقة على كيفية بناء شاشات الواجهة الأمامية داخل المتصفح. ولكن من أين تأتي أسعار المنتجات الحية، ودرجات الحرارة اليومية، ونتائج البحث، وبيانات حسابك الشخصي؟ إنها مخزنة في الخوادم وقواعد البيانات داخل الواجهة الخلفية ()! في هذا الدرس سنفهم بأسلوب قصصي وبصري مبسط—ودون أي تعقيد برمجي—كيف تتحدث الواجهة الأمامية مع الواجهة الخلفية عبر واجهة برمجة التطبيقات () من خلال تشبيه نادل المطعم، وكيف تنتقل البيانات بصيغة JSON، وكيف تتحدث الشاشة بسلاسة دون إعادة تحميل الصفحة كاملة.
قبل الغوص في تفاصيل هذا الدرس، استعرض جدول المصطلحات الأساسية التالية:
| المصطلح بالعربية | المصطلح بالإنجليزية | النطق التقني | المعنى المبسط |
|---|---|---|---|
| واجهة برمجة التطبيقات | إيه بي آي | الوسيط المنظم (مثل نادل المطعم) الذي يستلم طلب الواجهة الأمامية وينقله للواجهة الخلفية ويعود بالرد. | |
| صيغة تبادل البيانات JSON | جيسون | صيغة نصية خفيفة ومنظمة على شكل (مفتاح: قيمة) تُستخدم لتبادل البيانات بين المتصفح والخادم. | |
| التحديث غير المتزامن بالخلفية | أجاكس / فيتش | آلية تسمح للمتصفح بطلب بيانات جديدة من الخادم وتحديث جزء من الشاشة فقط دون إعادة تحميل الصفحة كاملة. | |
| تطبيق الصفحة الواحدة | سينجل بيج أبليكيشن | موقع ويب يحمّل إطار الصفحة مرة واحدة ثم يبدل المحتوى والبيانات لحظياً عبر طلبات API. | |
| حالات شاشة الواجهة | يو آي داتا ستيتس | الأوضاع البصرية الأربعة التي يصممها المطور أثناء طلب البيانات: التحميل، والنجاح، والفراغ، والخطأ. | |
| نقطة اتصال الخدمة | إند بوينت | الرابط المحدد على الخادم المخصص لاستقبال طلب معين مثل جلب قائمة الدروس أو تسجيل الدخول. |
في كل مرة تتفاعل فيها مع موقع أو تطبيق ويب حديث، يدور حوار منظم خلف الكواليس بين الواجهة الأمامية (على شاشتك) والواجهة الخلفية (على الخادم البعيد):
- البحث عن منتج أو دورة تدريبية: تكتب كلمة البحث في حقل الواجهة الأمامية -> ترسل الواجهة الأمامية الكلمة إلى الواجهة الخلفية -> تبحث الواجهة الخلفية في قاعدة البيانات وتعيد النتائج المطابقة -> ترسمها الواجهة الأمامية كبطاقات أنيقة أمامك.
- تسجيل الدخول إلى حسابك: تكتب بريدك وكلمة مرورك في نموذج الواجهة الأمامية -> تُرسل البيانات عبر اتصال مشفر إلى الواجهة الخلفية -> تتأكد الواجهة الخلفية من صحتها وترد بالسماح بالدخول.
- إرسال تعليق أو إتمام طلب شراء: تضغط على زر الإرسال -> تنقل الواجهة الأمامية طلبك إلى الواجهة الخلفية ليُحفظ رسمياً في قاعدة البيانات.
لماذا لا تدخل الواجهة الأمامية في المتصفح إلى قاعدة البيانات مباشرةً؟ لأن السماح لمتصفح أي زائر بالوصول المباشر لقاعدة البيانات يعني كشف جميع الحسابات والبيانات السرية! لذلك تتحدث الواجهة الأمامية مع الواجهة الخلفية حصرياً عبر وسيط منظم ومراقَب يُسمى واجهة برمجة التطبيقات ().
وأفضل طريقة لفهم الـ هي تشبيه نادل المطعم ():
| عنصر المطعم | ما يقابله في هندسة الويب | دوره في رحلة الطلب |
|---|---|---|
| صالة الطعام وقائمة الوجبات | الواجهة الأمامية () | المكان المرئي الذي يجلس فيه الزبون ويتصفح الخيارات ويحدد طلبه. |
| المطبخ المغلق ومخزن الأغذية | الواجهة الخلفية وقاعدة البيانات () | المكان المحمي الذي تُحفظ فيه المكونات وتُجهّز فيه الطلبات بعيداً عن الزوار. |
| نادل المطعم (الجرسون) | واجهة برمجة التطبيقات () | يأخذ طلبك المحدد من الطاولة إلى شباك المطبخ، ثم يعود إليك بالوجبة الجاهزة فقط دون دخولك للمطبخ. |
تأمل المخطط التوضيحي الآتي الذي يجسد رحلة البيانات عبر النادل () وحالات الشاشة الأربع:
إذا كانت الواجهة الخلفية مبرمجة بلغة مثل أو أو ، بينما تعمل الواجهة الأمامية في المتصفح بلغة ، فما هي اللغـة المشتركة المكتوبة في «تذكرة الطلب» التي يحملها النادل بينهما؟ إنها صيغة JSON ()، الصيغة النصية القياسية لتبادل بيانات الويب:
- أزواج واضحة من (المفتاح: القيمة): تُكتب كل معلومة على شكل اسم واضح بين علامتي تنصيص متبوعاً بنقطتين وقيمته؛ مثل .
- فصل البيانات الخام عن شكل العرض: لاحظ أن رسالة تحتوي على البيانات الصافية فقط (نصوص وأرقام وقوائم) دون أي ألوان أو خطوط؛ وفور استلام الواجهة الأمامية لهذه الورقة تقوم بتوزيع القيم داخل بطاقات و المصممة لديها.
شاهد في المثال الآتي كيف تبدو تذكرة بيانات واضحة وسهلة القراءة للإنسان والآلة معاً:
{
"courseId": 147,
"title": "Front-End Development",
"lessonsCount": 10,
"isPublished": true
}في بدايات الويب، كان النقر على زر «إعجاب» أو تصفية قائمة المنتجات حسب السعر يجبر المتصفح على مسح الشاشة بالكامل وإظهار صفحة بيضاء لحظية ثم إعادة تحميل الموقع كله من جديد. أما الواجهة الأمامية الحديثة فقد قضت على هذا الانقطاع بفضل تقنية الطلبات الخلفية غير المتزامنة ():
- طلب البيانات بصمت في الخلفية: عندما تضغط على زر «حفظ الدرس في المفضلة»، ترسل الواجهة الأمامية طلباً خفيفاً إلى الـ في الخلفية بينما تواصل أنت قراءة الصفحة دون أي توقف.
- تحديث الجزء المعني فقط من الشاشة: فور وصول رد الصغير من الخادم، تحدّث الواجهة الأمامية لون الزر أو قائمة البطاقات في مكانها فقط، مع بقاء موضع التمرير والقوائم المفتوحة ثابتة تماماً.
- مفهوم تطبيقات الصفحة الواحدة (): تعتمد التطبيقات التفاعلية الكبرى (مثل الخرائط ولوحات البريد والتحكم) على هذا المبدأ لتمنح المستخدم تنقلاً فورياً سلساً يشبه تطبيقات سطح المكتب.
لأن طلبات البيانات تسافر عبر الإنترنت إلى الخادم الخلفي، فإنها تستغرق جزءاً من الثانية أو بضع ثوانٍ، وقد ينقطع اتصال المستخدم فجأة أو يبحث عن كلمة لا توجد لها نتائج. لذلك لا يصمم مطور الواجهة الأمامية المحترف الشاشة لحالة النجاح فقط، بل يصمم أربع حالات بصرية واضحة () لكل قسم يطلب بيانات:
- 1. حالة التحميل (): تظهر فور إرسال الطلب (على شكل مؤشر دوران أو بطاقات رمادية تمهيدية ) لتطمئن المستخدم بأن الموقع يجلب البيانات فلا يكرر النقر العشوائي على الزر.
- 2. حالة النجاح (): تظهر فور وصول بيانات السليمة، فتعرض البطاقات والعناوين الحقيقية بوضوح.
- 3. حالة القائمة الفارغة (): تظهر عندما ينجح الاتصال بالخادم ولكن لا توجد عناصر مطابقة للبحث (فتعرض رسالة لطيفة مثل: «لا توجد نتائج مطابقة لبحثك حالياً» بدلاً من ترك شاشة بيضاء مربكة).
- 4. حالة الخطأ (): تظهر عند انقطاع الإنترنت أو تعذر استجابة الخادم، فتعرض تنبيهاً واضحاً مع زر «إعادة المحاولة».
جرّب بنفسك التبديل بين الحالات الأربع للشاشة في المحاكي التفاعلي الآتي:
عند ربط الواجهة الأمامية بالواجهة الخلفية عبر الـ ، يحتاج كل من طالب تطوير الويب وطالب الأمن السيبراني إلى إدراك حدود المسؤولية الفاصلة بين الطرفين بدقة:
| مجال المسؤولية | دور الواجهة الأمامية (في المتصفح) | دور الواجهة الخلفية (في الخادم) |
|---|---|---|
| التحقق من المدخلات | تنبيه بصري فوري لمساعدة المستخدم (مثل التذكير بكتابة علامة في البريد الإلكتروني). | التحقق الأمني الإلزامي: فحص جميع البيانات مجدداً في الخادم قبل حفظها في قاعدة البيانات. |
| الأسعار والصلاحيات | عرض الأسعار وإخفاء أزرار الإدارة عن الزائر العادي لتنظيم شكل الشاشة. | الحسم الفعلي: حساب السعر النهائي والتحقق من صلاحية المستخدم الحقيقية عند كل طلب . |
| البيانات المرسلة في الرد | تنسيق وعرض الحقول العامة المستلمة داخل بطاقات الصفحة. | عدم إرسال أي حقول سرية (مثل كلمات المرور المشفرة أو بيانات المستخدمين الآخرين) داخل تذكرة أصلاً. |
لاحظ في المثال الآتي كيف يقتصر رد الآمن على الحقول العامة المخصصة للعرض فقط دون أي بيانات سرية:
{
"username": "salma_dev",
"displayName": "Salma Ahmed",
"roleBadge": "Student",
"completedLessons": 6
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرّفنا في هذا الدرس على آلية تواصل الواجهة الأمامية مع الواجهة الخلفية في التطبيقات اليومية، وفهمنا دور واجهة برمجة التطبيقات () من خلال تشبيه نادل المطعم، وتعرفنا على صيغة JSON لتبادل البيانات، وكيف تتحدث الشاشة في الخلفية دون إعادة تحميل كامل الصفحة عبر فكرة وتطبيقات ، وكيف نصمم الحالات البصرية الأربع للشاشة ( و و و)، وحدود المسؤولية والأمان بين الواجهتين. الخطوة التالية: انتقل الآن إلى الدرس السابع (أساسيات أداء وأمان الواجهة الأمامية) لنكتشف معاً قواعد أمان الواجهة الأمامية وسرعة الأداء وتحسين محركات البحث!
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات10
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Application Programming Interface (API) واجهة برمجة التطبيقات (API)
- الوسيط المنظم الذي يسمح للواجهة الأمامية في المتصفح بطلب البيانات أو العمليات من الواجهة الخلفية بأمان.
- للمراجعة
- 02 JSON (JavaScript Object Notation) صيغة تبادل البيانات JSON
- الصيغة النصية القياسية الخفيفة القائمة على أزواج (المفتاح: القيمة) لتبادل البيانات بين الخادم والمتصفح.
- للمراجعة
- 03 AJAX / Fetch Background Request طلب البيانات بالخلفية (AJAX / Fetch)
- إرسال طلب بيانات من المتصفح في الخلفية لتحديث جزء محدد من الشاشة بسلاسة دون إعادة تحميل الصفحة كاملة.
- للمراجعة
- 04 Single-Page Application (SPA) تطبيق الصفحة الواحدة (SPA)
- تطبيق ويب يحمّل الهيكل الأساسي مرة واحدة ثم يبدل الشاشات والبيانات لحظياً عبر طلبات API.
- للمراجعة
- 05 Loading State (Skeleton UI) حالة التحميل (Loading State)
- المؤشر البصري المؤقت أو البطاقات التمهيدية التي تظهر للمستخدم أثناء انتظار وصول رد الخادم.
- للمراجعة
- 06 Empty State حالة القائمة الفارغة (Empty State)
- التصميم التوضيحي الذي يظهر عندما ينجح الاتصال بالخادم ولكن لا توجد عناصر أو نتائج مطابقة لعرضها.
- للمراجعة
- 07 Error State حالة الخطأ (Error State)
- رسالة التنبيه المساعدة المزودة بزر إعادة المحاولة عند انقطاع الاتصال أو تعذر استجابة الخادم.
- للمراجعة
- 08 API Endpoint نقطة اتصال الـ API (Endpoint)
- عنوان المسار المحدد على الخادم المخصص لاستقبال طلب بيانات معين والرد عليه.
- للمراجعة
- 09 Third-Party API واجهة خدمة خارجية (Third-Party API)
- واجهة برمجية تقدمها خدمة خارجية (كالخرائط أو الطقس أو الدفع الإلكتروني) يتم ربطها بالموقع.
- للمراجعة
- 10 Front-End vs Back-End Boundary حدود المسؤولية بين الواجهتين
- الفصل الهندسي الذي تتولى فيه الواجهة الأمامية العرض وتجربة المستخدم بينما تحسم الواجهة الخلفية الصلاحيات والحسابات وأمان البيانات.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 API API
- Application Programming Interface
- واجهة برمجة التطبيقات التي تنظم التواصل وتبادل الطلبات بين الواجهة الأمامية والواجهة الخلفية.
- للمراجعة
- 02 JSON JSON
- JavaScript Object Notation
- صيغة نصية خفيفة ومستقلة عن لغة البرمجة لتبادل البيانات عبر الويب.
- للمراجعة
- 03 AJAX AJAX
- Asynchronous JavaScript and XML
- التقنية التأسيسية لجلب البيانات في الخلفية وتحديث أجزاء الصفحة دون إعادة تحميلها بالكامل.
- للمراجعة
- 04 SPA SPA
- Single-Page Application
- تطبيق الصفحة الواحدة الذي يحدث الشاشة ديناميكياً بالبيانات الجديدة دون تحميل صفحات كاملة من الصفر.
- للمراجعة
- 05 XML XML
- Extensible Markup Language
- صيغة توصيفية قديمة لتبادل البيانات حلت محلها صيغة JSON الأخف والأسرع في معظم واجهات الويب الحديثة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
راجع جدول الموضوع الثاني واربط بين طاولة الزبون والمطبخ والنادل وتذكرة الطلب وبين الواجهة الأمامية والخلفية والـ API وصيغة JSON.
-
تنقل بين حالات التحميل والنجاح والفراغ والخطأ في محاكي الموضوع الخامس وسجل أهمية كل حالة لتجربة المستخدم.
-
افحص مثال JSON في الموضوع السادس واشرح لماذا لا يجوز للواجهة الخلفية إرسال بيانات سرية في الرد بالاعتماد على إخفائها بصرياً في الواجهة الأمامية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.