شرح صفوف ومحتوى الفقرة
تعرّفنا في الدروس السابقة على كيفية بناء شاشات الواجهة الأمامية داخل المتصفح. ولكن من أين تأتي أسعار المنتجات الحية، ودرجات الحرارة اليومية، ونتائج البحث، وبيانات حسابك الشخصي؟ إنها مخزنة في الخوادم وقواعد البيانات داخل الواجهة الخلفية ()! في هذا الدرس سنفهم بأسلوب قصصي وبصري مبسط—ودون أي تعقيد برمجي—كيف تتحدث الواجهة الأمامية مع الواجهة الخلفية عبر واجهة برمجة التطبيقات () من خلال تشبيه نادل المطعم، وكيف تنتقل البيانات بصيغة JSON، وكيف تتحدث الشاشة بسلاسة دون إعادة تحميل الصفحة كاملة.
قبل الغوص في تفاصيل هذا الدرس، استعرض جدول المصطلحات الأساسية التالية:
| المصطلح بالعربية | المصطلح بالإنجليزية | النطق التقني | المعنى المبسط |
|---|---|---|---|
| واجهة برمجة التطبيقات | إيه بي آي | الوسيط المنظم (مثل نادل المطعم) الذي يستلم طلب الواجهة الأمامية وينقله للواجهة الخلفية ويعود بالرد. | |
| صيغة تبادل البيانات JSON | جيسون | صيغة نصية خفيفة ومنظمة على شكل (مفتاح: قيمة) تُستخدم لتبادل البيانات بين المتصفح والخادم. | |
| التحديث غير المتزامن بالخلفية | أجاكس / فيتش | آلية تسمح للمتصفح بطلب بيانات جديدة من الخادم وتحديث جزء من الشاشة فقط دون إعادة تحميل الصفحة كاملة. | |
| تطبيق الصفحة الواحدة | سينجل بيج أبليكيشن | موقع ويب يحمّل إطار الصفحة مرة واحدة ثم يبدل المحتوى والبيانات لحظياً عبر طلبات API. | |
| حالات شاشة الواجهة | يو آي داتا ستيتس | الأوضاع البصرية الأربعة التي يصممها المطور أثناء طلب البيانات: التحميل، والنجاح، والفراغ، والخطأ. | |
| نقطة اتصال الخدمة | إند بوينت | الرابط المحدد على الخادم المخصص لاستقبال طلب معين مثل جلب قائمة الدروس أو تسجيل الدخول. |
في كل مرة تتفاعل فيها مع موقع أو تطبيق ويب حديث، يدور حوار منظم خلف الكواليس بين الواجهة الأمامية (على شاشتك) والواجهة الخلفية (على الخادم البعيد):
- البحث عن منتج أو دورة تدريبية: تكتب كلمة البحث في حقل الواجهة الأمامية -> ترسل الواجهة الأمامية الكلمة إلى الواجهة الخلفية -> تبحث الواجهة الخلفية في قاعدة البيانات وتعيد النتائج المطابقة -> ترسمها الواجهة الأمامية كبطاقات أنيقة أمامك.
- تسجيل الدخول إلى حسابك: تكتب بريدك وكلمة مرورك في نموذج الواجهة الأمامية -> تُرسل البيانات عبر اتصال مشفر إلى الواجهة الخلفية -> تتأكد الواجهة الخلفية من صحتها وترد بالسماح بالدخول.
- إرسال تعليق أو إتمام طلب شراء: تضغط على زر الإرسال -> تنقل الواجهة الأمامية طلبك إلى الواجهة الخلفية ليُحفظ رسمياً في قاعدة البيانات.