مهارت‌های لازم:

آشنایی با توابع جاوااسکریپت
آشنایی با ReactJS
آشنایی با ‍‍Bootstrap
کدخوانی

پروژه اولیه

پروژه اولیه را از اینجا دانلود کنید.

ساختار فایل‌های این پروژه به صورت زیر است.

fifabaz
├── public
│   ├── static
│   │   ├── css
│   │   │   └── bootstrap.css
│   │   └── js
│   │       ├── bootstrap.js
│   │       ├── jquery.js
│   │       └── popper.js
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── __tests__
│   │   └── sample.test.js
│   ├── components
│   │   ├── FilterBox.js
│   │   ├── SortBox.js
│   │   └── Table.js
│   ├── containers
│   │   └── App.js
│   ├── data
│   │   ├── Clubs.js
│   │   ├── Nationality.js
│   │   ├── Players.js
│   │   ├── SortType.js
│   │   └── TeamPositions.js
│   ├── index.css
│   └── index.js
├── README.md
└── package.json

راه‌اندازی پروژه

برای اجرای پروژه، باید NodeJS و npm را از قبل نصب کرده باشید.

ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
در پوشه‌ی fifabaz ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
در همین پوشه، دستور npm start را برای راه‌اندازی پروژه اجرا کنید.
پس از انجام موفق این مراحل، با مراجعه به آدرس http://localhost:3000/ می‌توانید نتیجه را ببینید.

جزئیات

در این پروژه ما می‌خواهیم ۲۰۰ بازیکن برتر بازی FIFA 20 را در قالب یک جدول نمایش دهیم و کاربر باید بتواند بازیکنان را براساس ویژگی‌های آن‌ها فیلتر یا مرتب کند.

دیتاسِت مربوط به بازیکنان از سایت kaggle.com، گرفته شده و در مسیر data/Players.js قرار داده شده است.

شما باید این اطلاعات را بخوانید و سپس براساس فیلترها و گزینه مرتب‌سازی که کاربر انتخاب کرده است آن‌ها را در یک جدول نمایش دهید.

شکل کلی پروژه به صورت زیر می‌باشد:

شکل کلی

اطلاعات بازیکنان در این فایل به صورت زیر می‌باشد:

{
  short_name: "L. Messi",
  age: 32,
  nationality: "Argentina",
  club: "FC Barcelona",
  overall: 94,
  value: 95500000,
  preferred_foot: "Left",
  team_position: "RW"
}

در این پروژه چهار کامپوننت تعریف شده که شما باید هر یک از آن‌ها را با توجه به قابلیتی که باید داشته باشد تغییر دهید.

۱) کامپوننت ‍App.js

در این کامپوننت شما باید state مورد نیاز پروژه را تعریف کنید. خواندن از فایل Players.js در این بخش انجام می‌شود.

سه تابع در این فایل وجود دارد که شما باید آن‌ها را براساس نیاز گفته شده تغییر دهید.

تابع ‍changeSort(_selectedSort): این تابع وظیفه تغییر نحوه مرتب شدن جدول را دارد. پس از انتخاب یکی از موارد مرتب سازی این تابع باید فراخوانی شود.
تابع changeFilters: این تابع وظیفه تغییر وضعیت نحوه فیلتر شدن دیتای جدول را دارد. پس از انتخاب فیلترها این تابع باید فراخوانی شود.
تابع renderTable: این تابع وظیفه نمایش جدول را دارد. پس از هر تغییر در نحوه مرتب سازی یا فیلتر کردن این تابع جدول بروزرسانی شده را نمایش می‌دهد.

۲) کامپوننتTable.js

در این کامپوننت شما باید ابتدا thead جدول را براساس متغیر fields که در کامپوننت وجود دارد بسازید؛ سپس اطلاعات بازیکنان را در قسمت tbody جدول نشان دهید.

۳) کامپوننت ‍SortBox.js

در این کامپوننت شما باید دکمه‌های مربوط به نحوه مرتب کردن جدول را بسازید. هر دکمه سه وضعیت دارد.

۱- غیرفعال: (در این حالت بازیکنان بدون تغییر و به صورت مرتب شده اولیه (براساس overall) نمایش داده می‌شود.)

۲- مرتب نزولی

۳- مرتب صعودی

کاربر می‌تواند روی هرکدام کلیک کند و وضعیت دکمه را تغییر دهد. حالت اولیه دکمه، غیرفعال است و پس کلیک بر روی آن دکمه به حالت مرتب نزولی می‌رود و دیتای جدول براساس آن فیلد به صورت نزولی مرتب می‌شود. پس از کلیک دوباره دیتای جدول براساس آن فیلد و این بار صعودی مرتب می‌شود و درنهایت پس از کلیک سوم، دکمه به حالت اولیه رفته و دیتا به همان شکل اولیه مرتب می‌شود.

هرکدام از حالات دارای یک کلاس html منحصر به فرد است که باید پیاده سازی شود.

براساس هر وضعیت که دکمه دارد یک کلاس منحصر به فرد به آن دکمه داده می‌شود. توضیح این کلاس‌ها در خود کامپوننت داده شده است.

این کامپوننت دو تابع ناقص دارد که شما باید آن‌ها را تکمیل کنید.

تابع ‍changeSelectedSort : این تابع وظیفه تغییر نحوه مرتب شدن را دارد. وقتی دکمه‌ای کلیک شد، این تابع فراخوانی می‌شود و بر اساس فیلد مرتب‌سازی و وضعیت آن دکمه، اطلاعات جدول تغییر می‌کند.
تابع setClassName : این تابع وظیفه نام‌گذاری کلاس دکمه‌ها براساس وضعیت آن دکمه را دارد.

نکات

دکمه‌های این کامپوننت باید دارای id به شکل sort-btn-FIELD_NAME باشند، که FIELD_NAME از متغیر fields در این کامپوننت خوانده می‌شود.
شما باید کلاس‌های گفته شده را به کلاس‌های اولیه این دکمه‌ها اضافه کنید.
مرتب‌سازی براساس نام نباید به حروف کوچک و بزرگ حساس باشد.

۴) کامپوننت ‍FilterBox.js

در این کامپوننت ابتدا دیتا را از پوشه data بخوانید و سپس براساس متغیر filters آن‌ها را نمایش دهید.

برای نمایش این قسمت، لازم است با نحوه عملکرد Accordion از کتابخانه bootstrap آشنایی داشته باشد.

برای آشنایی با این قسمت می‌توانید به این لینک مراجعه کنید.

این کامپوننت یک تابع ناقص دارد که باید آن را تکمیل کنید.

تابع changeFilter : این تابع وظیفه تغییر نحوه فیلتر شدن را دارد.

توجه کنید که کاربر میتواند چند فیلتر را هم‌زمان انتخاب کند. برای مثل هم گزینه Spain از بخش nationallity و هم گزینه FC Barcelona از بخش club را انتخاب کند.

نکات

دکمه باز بسته کننده Accordion باید دارای id به شکل btn-FILTER_NAME-collapse باشد که FILTER_NAME از متغیر filters که در این کاپوننت وجود دارد خوانده می‌شود.
شما باید divهایی که idای به یکی از سه شکل collapseOne, collapseTwo, collapseThree دارند را به شکل collapse-FILTER_NAME در بیاورید و تغییرات لازم را در کامپوننت ایجاد کنید.
برای بخش checkboxها باید از bootstrap کمک بگیرید و به همان شکلی که در داکیومنت این کتابخانه وجود دارد عمل کنید. برای اطلاعات بیشتر میتواند به لینک مراجعه کنید.
checkboxهای این قسمت باید دارای id به شکل FILTER_TYPE-ITEM_NAME باشند. مانند nationality-Egypt
برای تغییر checkbox از event onChange استفاده شود.
قسمت nationality در ابتدای اجرای پروژه باید باز باشد و در هر لحظه فقط یک قسمت از Accordion باید باز است.

نکات تکمیلی

به نحوه نمایش تگ‌ها و attributes و اطلاعات توضیح داده شده در هر کامپوننت توجه شود.
مدت زمان render شدن کامپوننت‌ها و جدول دارای اهمیت می‌باشد.
تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید.
شما تنها مجاز به اعمال تغییر در فایل‌های containers، components هستید.
پس از اعمال تغییرات، پروژه را zip کرده و ارسال کنید.دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.

ارسال پاسخ برای این سؤال