واجهة المستخدم الأمامية والخلفية
مُقدَّم| English | المعنى |
|---|---|
| request/rɪˈkwest/ | طلب |
| front end/frʌnt end/ | واجهة أمامية |
| back end/bæk end/ | واجهة خلفية |
| server/ˈsɜːvə/ | خادم |
| response/rɪˈspɒns/ | استجابة |
| API/ˌeɪ piː ˈaɪ/ | واجهة برمجة تطبيقات |
| JSON/ˈdʒeɪsn/ | صيغة تبادل البيانات |
متعلم يغير الرقم في رابط URL
- صفحة الكورس تطلب
/students/42/courses. زائر يغير 42 إلى 43. إخفاء ذلك الرابط على الشاشة لا يمنع الطلب. - واجهة المستخدم تعرض الواجهة. الخادم يعمل على سيرفر ويعالج طلباً قبل إرسال استجابة.
الاتفاق على معنى كل طلب
- API تحدد كيف تتواصل البرمجيات. العقد يحدد الطريقة، المسار، المدخلات، الطرف المسموح بالاتصال، حقول الاستجابة وسلوك الفشل.
- لقائمة كورسات للطلاب فقط، يجب على الخادم تحديد هوية المتصل والتحقق من الصلاحيات. رقم مزود من المتصفح ليس دليلاً على الهوية.
يطلب المتصفح قائمة طلاب 43. ما الدليل الذي يثبت أن الطالب قد يقرأ تلك القائمة؟
Difficulty 1/5 · 100 coins + a small bonus on first completion today
يعمل المعرف كعامل لاختيار مورد؛ ولا يُعد دليلاً على الهوية أو الإذن.
قراءة الاستجابة كبيانات
- JSON يمكن أن يمثل كائنات، مصفوفات، سلاسل نصية، أرقاماً، قيم منطقية ونقطة. شائع في واجهات برمجة تطبيقات الويب، لكن ليست كل استجابة تستخدمه.
- قائمة ناجحة قد تكون
[{"course_id":7,"title":"Robotics"}]. قائمة مسموحة فارغة يمكن أن تكون[]؛ لا أحد الناتجين يأمر المتصفح بتنفيذ كود.
أي صيغة بيانات شائعة تمثلها [{"course_id":7,"title":"Robotics"}]؟
Difficulty 1/5 · 100 coins + a small bonus on first completion today
هذا هو JSON: مصفوفة تحتوي على كائن.
وضع كل قاعدة حيث يمكن فرضها
- تحقق المتصفح يعطي تغذية راجعة سريعة، لكن الخادم يجب أن يتحقق من المدخلات والصلاحيات بشكل مستقل. يمكن للمتصل إرسال طلبات دون استخدام نموذجك.
- احتفظ بكلمات مرور قاعدة البيانات ومفاتيح API الخاصة بالخادم. قد يكتب المستخدم كلمة مرور تسجيل الدخول في المتصفح؛ نقلها بشكل آمن ولا تدمج أبداً معرّف خدمة خاص في كود قابل للتحميل.
أين يجب حفظ كلمة مرور قاعدة بيانات خاصة يستخدمها التطبيق؟
Difficulty 1/5 · 100 coins + a small bonus on first completion today
يمكن فحص الكود القابل للتحميل. احتفظ ببيانات اعتماد الخدمة الخاصة على الخادم.
يحتاج الخادم إلى فحوصات مدخلات مستقلة حتى عندما تحقق النموذج صحة المدخلات.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
يمكن للطالب تجاوز النموذج وإرسال طلب مباشرة.
اشرح لماذا لا يمكن أن تحل التحقق في المتصفح محل الفحوصات في الخادم.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
يمكن للطالب إرسال طلب بدون النموذج، لذا يقوم الخادم بفحصه بشكل مستقل.
إظهار التحميل والنجاح والفشل بصدق
- أثناء انتظار الطلب، اعرض حالة التحميل. بعد النجاح، اعرض الكورسات المسترجعة أو رسالة القائمة الفارغة.
- يتطلب الطلب الفاشل حالة فشل مفيدة. لا تصف فشل الشبكة بـ "لا توجد دورات": فالخادم لم يؤكد وجود نتيجة فارغة.
طابق كل نتيجة بعرض صادق.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
يجب عدم عرض النتيجة غير المؤكدة على شكل قائمة ناجحة فارغة.
تتبع التفاعل الكامل
- المتتبع: طلب المتصفح ← تحقق الخادم من الإدخال والأذونات ← البحث عن البيانات المسموحة ← الاستجابة ← عرض المتصفح. أوقف البحث عند فشل أي تحقق مطلوب.
- اختبر مكالماً مسموحاً، ومكالماً ممنوعاً، ونتيجة فارغة، وطلباً فاشلاً باستخدام ملفات اختبار محلية. لا مكشوف بيانات طالب آخر لاختبار الوصول.
يساعد المتصفح المستخدم؛ يفرض الخادم القاعدة. التحقق من الهوية، والأذون، والإدخال الصحيح، والبحث الناجح هي تحققات منفصلة.
رتب هذا البحث المسموح الناجح.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
يفرض الخادم القاعدة قبل إرجاع البيانات الخاصة.
يجب أن تستخدم جميع استجابات واجهة برمجة تطبيقات الويب تنسيق JSON.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
يعد JSON شائعًا، ولكن يمكن لواجهات برمجة التطبيقات استخدام تنسيقات أخرى موثقة.