پویا که تابستان خود را به بطالت گذرانده بود، تصمیم گرفت تابستان بعدی خود را به ایران‌گردی مشغول شود. او از شما و دوست مشترکتان احمد تقاضای کمک کرده است. شما و احمد تصمیم می‌گیرید نقشه‌ای از ایران برای پویا تهیه کنید که او علاوه بر مشاهده‌ی اسم و موقعیت شهرها، بتواند برخی از اطلاعات مربوط به هر شهر را مشاهده کند.

برای این کار احمد یک سرور ساده آماده کرده است که شما می‌توانید اطلاعات مورد نیاز را از آن بگیرید. او هم‌چنین طراحی و معماری کلی برنامه را با استفاده از کتابخانه‌ی ReactJS ساخته و آن را در اختیار شما قرار داده است. حال شما باید با تکمیل این برنامه، اطلاعات مورد نیاز پویا را از سرور بگیرید، و در صفحه نمایش دهید.

خروجی پروژه بدین صورت خواهد بود:

با کلیک روی اسم هر شهر، اطلاعات آن بدین صورت نمایش داده خواهد شد:

پروژه اولیه

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است. مواردی که نیاز به تغییر دارند با * مشخص شده‌اند.

iran-map
├── public
│   └── index.html
├── server
│   ├── cities.json
│   ├── detail.json
│   └── server.js
├── src
│   ├── assets
│   │   └── images
│   │       └── raw_map.svg
│   ├── components
│   │   ├── App.css
│   │   ├── App.js
│   │   ├── CityModal.css
│   │   ├── CityModal.js
│   │   ├── IranMap.css
│   │   └── IranMap.js  *
│   ├── index.css
│   └── index.js
├── package.json
└── pnpm-lock.yaml

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

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

• در پوشه‌ی iran-map ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
  • نکته: برای نصب سریع‌تر از pnpm install استفاده کنید.
• در همین پوشه، دستور npm run server را برای راه‌اندازی سرور اجرا کنید.
• در یک ترمینال دیگر، دستور npm start را برای راه‌اندازی کلاینت اجرا کنید.
• با مراجعه به http://localhost:3000/ می‌توانید نتیجه را ببینید.

جزئیات

همان‌طور که مشاهده می‌کنید، در این پروژه سه مؤلفه موجود است:

• App: این فایل کلی برنامه است که مؤلفه‌ی IranMap را درون خود جای داده است.
• IranMap: این فایل دربردارنده نقشه کلی کشور است، و وظیفه‌ی ارسال درخواست به سرور و دریافت اطلاعات را عهده‌دار است. شما تنها این فایل را تغییر خواهید داد.
• CityModal: این فایل دربردارنده‌ی مؤلفه‌ای است که اطلاعات هر شهر را پس از کلیک روی نام آن شهر نمایش می‌دهد.

داخل کلاس IranMap دو بخش وجود دارد که شما باید آن‌ها را تکمیل کنید:

• باید در این مؤلفه یکی از متدهای lifecycle مناسب را override کنید به طوری که بلافاصله پس از load شدن مؤلفه اطلاعات مربوط به تمام شهرها (شامل موقعیت و ...) را از سرور دریافت کرده و داخل citiesData در state قرار دهید.

• متد cityClicked: این متد زمانی اجرا می‌شود که کاربر یکی از شهرها را انتخاب کرده باشد. شما باید در این متد، اطلاعات شهر انتخاب شده را که id آن به متد داده شده است، از سرور دریافت کنید و داخل selectedCity در state قرار دهید. هم‌چنین باید isModalOpen را نیز true کنید تا اطلاعات شهر مورد نظر نمایش داده شود.

نحوه‌ی کار با سرور و گرفتن اطلاعات نیز به شرح زیر است:

• گرفتن اطلاعات کلی شهرها:
• URL: localhost:9000/cities/
• Method: GET
• نکته: id هر شهر در دیتای دریافت‌شده موجود است.
• گرفتن اطلاعات جزئی هر شهر:
• URL: localhost:9000/cities/{id}
• Method: GET
• نکته: در آدرس به‌ جای {id}، id شهر مورد نظر را ارسال کنید.

نکات

• شما تنها مجاز به اعمال تغییر در فایل IranMap.js هستید.
• پس از اعمال تغییرات، کل پروژه کلاینت را Zip کرده و ارسال کنید. دقت کنید که پوشه node_modules در فایل ارسالی نباشد.
• نیازی به ارسال کد‌های سرور نیست.