التمرين 6: الحل

الدرس 35 من 38 · التنفيذ · 4 دقيقة و15 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

الموارد

• مستودع المشروع..... تحقق من ال restaurant-entities-reviews فرع.

التفريغ النصي

[00:02] حسنا. اسمحوا لي أن تظهر لك الحل لهذا التمرين. لقد بدأت بنوع التقييمات، وهو النوع الذي شاركته في الفيديو السابق. أول شيء فعلته هو إنشاء وظيفة جديدة في وحدة واجهة برمجة التطبيقات الخاصة بي حيث أستخدم فقط وظيفة جلب عادية، مع استدعاء نقطة النهاية هذه. هذا يشبه تمامًا الوظائف الأخرى، باستثناء أنني أتصل بنقطة نهاية المراجعات. لذلك نأمل أن هذه لم تكن مشكلة كبيرة.

[00:30] ثم أنشأت في وحدة restaurant.ts دالة جديدة تعطينا تقييمات المطعم. تأخذ معرّف المطعم، وتعيد Promise تُحَلّ إلى كائن تقييمات مطابق للنوع الذي عرّفته. هذا مثال آخر على وحدة تجمع البيانات، إذ أستدعي نقطتي نهاية مختلفتين: نقطة معلومات المطعم ونقطة مراجعات المطعم.

[00:59] أقوم بإرجاع هذا الكائن حيث أقوم بإرجاع التقييمات وعدد التقييمات التي تأتي من نقطة النهاية الأولى، ونقطة نهاية المطعم، والمراجعات التي تأتي من نقطة نهاية المراجعات. لكنني أقوم أيضًا بتخطيطها بحيث أعيدها في هذا التنسيق المبسط.

[01:16] الآن، قد تتساءل عن شيء لم أذكره في الفيديو الأخير: ماذا يحدث إذا قمت باستدعاء هذه الوظيفة عدة مرات؟ ماذا يحدث إذا قمت باستدعاء هذا عشر مرات في عشرة مكونات مختلفة؟ هذا لن يؤدي إلى 20 جلب المكالمات لهذه الوظيفة. لذا فإن الاتصال به عشر مرات لن يؤدي إلى 20 طلبًا للشبكة.

[01:42] لكن هذا لن يكون هو الحال، على الأقل في Next.js، وهو ما نستخدمه الآن، لأن هذه الطلبات يتم تخزينها مؤقتًا. لذلك في المرة الأولى التي أتصل بها، يتم تخزينها مؤقتًا، ولا تكلف الطلبات اللاحقة طلبًا فعليًا للشبكة. هذا، بالطبع، محدد جدًا لـ Next.js، ولكن العديد من الأطر الأخرى لديها أنواع مختلفة من آليات التخزين المؤقت والحفظ.

[02:11] الآن يمكنك استخدام شيء مثل React Query، على سبيل المثال. في حالة React، هناك أيضًا نوع مماثل من المكتبة لأنواع أخرى من الأطر حيث توجد مكتبة تخزين مؤقت للبيانات حيث يمكنك تقديم طلب الشبكة ويمكنك التأكد من أن هذه الطلبات يتم تخزينها مؤقتًا بشكل صحيح حتى لا تتسبب في طلبات لاحقة بمرور الوقت.

[02:38] لذلك هذا نوع من المماس الذي ذهبت إليه، لكنني أردت أن أذكر ذلك في حال كنت تتساءل عما سيحدث إذا سميت هذه الدوال النموذجية مثل حفنة من المرات.

[02:50] حسناً، لنعد إلى التمرين. آخر شيء فعلته هو في الواقع استخدام هذه الوظيفة استدعاء لدعوتها من عنصر التقييم الخاص بي. هذه هي ميزة التقييمات الخاصة بي. كقاعدة عامة، أحب أن أجعل طلبات الشبكة أو الوصول إلى البيانات من الميزة، بدلاً من المكون فقط للحفاظ على الأشياء أكثر انفصالًا عن البيانات الفعلية.

[03:09] لذلك في هذه الحالة، التقييمات هي واحدة من الميزات التي قمت بتعريفها عندما فعلت تقسيم المكون الخاص بي، وأنا تمرير البيانات. أنا في الواقع مجرد تقديم بعض البيانات هنا التي أحصل عليها من هذه الوظيفة في المكون نفسه أو في الميزة نفسها. ثم أقوم بتمرير البيانات الأخرى إلى مكون مراجعة العملاء الخاص بي، وهو مجرد مكون عادي يأخذ بعض الخصائص ويجعلها فقط.

[03:38] هكذا يبدو الأمر في واجهة المستخدم. إذا قمت بالتمرير لأسفل قليلاً، سترى أن ميزة التقييمات الخاصة بي هي مع التقييمات وعدد التقييمات. ثم كل واحد من مكونات بلدي لديه معلومات حول هذا الاستعراض معين.

[03:54] هذا كل شيء. هذا من أجل التمرين. آمل أن تكون قد جربت هذه المحاولة. كان هذا هو الأخير في المسار بأكمله. آمل أن تكون مفيدة بطريقة أو بأخرى. وبطبيعة الحال، سوف تجد الفرع مع الحل في الوصف أدناه. نعم. شكرا لك على القيام بذلك، إذا كنت فعلت. وإذا لم يكن الأمر كذلك، آمل أن تستمتع بمشاهدتي أكافح مع الحلول.