التمرين 5: تقسيم المكونات

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

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

الموارد

• مستودع المشروع
• مواصفات Figma

تعليمات التمرين

• قم بتقسيم وحدة Restaurant من مواصفات Figma إلى مكونات باستخدام التسلسل الهرمي للمكونات الذي رأيناه في الفيديو السابق.
• لا تقلق بشأن المكونات والشاشات المشتركة. التركيز على الميزات والمكونات، وإعطاء كل مكون اسم جيد.
• تنفيذ ال restaurant الوحدة في codebase بعد تقسيم المكون الخاص بك. لا تقلق بشأن التنفيذ الفعلي، يمكنك استخدام محتوى العنصر النائب للمكونات الخاصة بك. نلقي نظرة على delivery الوحدة في قاعدة الشيفرة على سبيل المثال.

مثال على التقسيم

الاسم في الشيفرة والمخطط	المعنى بالعربية
Shared	مشترك بين الوحدات
Screens	الشاشات
Features	الميزات
Components	المكونات
Header	الترويسة
RestaurantFilters	مرشّحات المطاعم
RestaurantCategoryCarousel	عارض فئات المطاعم
RestaurantAttributeFilter	مرشّح خصائص المطعم
FeaturedOffersCarousel	عارض العروض المميّزة
FeaturedOfferCard	بطاقة عرض مميّز
RestaurantCarousel	عارض المطاعم
RestaurantCard	بطاقة مطعم
Carousel	العارض الدوّار

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

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

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

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

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

[02:25] لا تقلق بشأن ملف data.ts؛ فهو يحتوي فقط على بيانات ثابتة مكتوبة في الشيفرة، لأننا لم نتناول تنفيذ الكيانات بعد. نستخدم هذه البيانات لتشغيل الواجهة مؤقتًا. ثم لدينا مجلد features، الذي يضم الميزات الثلاث التي حدّدتها عند تقسيم الواجهة. وعند فتح هذه الميزات، سترى أن لكل ميزة نقطة دخول رئيسية، ومعها مجلد للمكونات عند الحاجة.

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

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

[03:50] للتقسيم. هذا واحد ليس لديه أي شاشات كذلك. هذه شاشة واحدة فقط. ولا تقلق بشأن الأشياء المشتركة لهذا التمرين. لا تقلق بشأن مكون التخطيط أو المكونات الشائعة وما إلى ذلك. التركيز في الغالب على الميزات والمكونات التي تنتمي إلى هذه الوحدة.

[04:09] إذن هذا هو التمرين. آمل أن تعطي هذا واحد محاولة. إذا كنت تبحث عن الكتابة على الشيفرة، آمل أن تقوم بتنفيذ بسيط للغاية وسأراك في الفيديو التالي. حيث سأشارك حلي.