پویا که تابستان خود را به بطالت گذرانده بود، تصمیم گرفت تابستان بعدی خود را به ایران‌گردی مشغول شود. او از شما و دوست مشترکتان احمد تقاضای کمک کرده است.
شما و احمد تصمیم می‌گیرید نقشه‌ای از ایران برای پویا تهیه کنید که او علاوه بر مشاهده‌ی اسم و موقعیت شهرها، بتواند برخی از اطلاعات مربوط به هر شهری را مشاهده کند.
برای این کار احمد یک سرور ساده آماده کرده است که شما می‌توانید اطلاعات مورد نیاز را از آن بگیرید. او هم‌چنین طراحی و معماری کلی برنامه را با استفاده از کتابخانه‌ی `ReactJS` ساخته و آن را در اختیار شما قرار داده است.
حال شما باید با تکمیل این برنامه، اطلاعات مورد نیاز پویا را از سرور بگیرید، و در صفحه نمایش دهید.
خروجی پروژه بدین صورت خواهد بود:
با کلیک روی اسم هر شهر، اطلاعات آن بدین صورت نمایش داده خواهد شد:
# فایل‌های اولیه
این پروژه از دو قسمت سرور و کلاینت ساخته شده است که شما تنها کد کلاینت را تغییر خواهید داد.
فایل‌های اولیه‌ی را از [اینجا](http://bayanbox.ir/download/249449004549499063/iran-map.zip) دانلود کنید. ساختار این فایل‌ها به شرح زیر است (مواردی که نیاز به تغییر دارند با `*` مشخص شده‌اند):
```
iran-map.zip
├── public
│ └── index.html
├── server
│ ├── cities.json
│ ├── detail.json
│ └── server.js
├── src
│ ├── assets
│ │ └── images
│ │ └── raw_map.svg
│ ├── components
│ │ ├── App.js
│ │ ├── App.css
│ │ ├── CityModal.js
│ │ ├── CityModal.css
│ │ ├── IranMap.js *
│ │ └── IranMap.css
│ ├── index.js
│ └── index.css
├── package.json
└── package-lock.json
```
# راه اندازی پروژه
**برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.**
- ابتدا فایل‌های اولیه را دانلود و از حالت فشرده خارج کنید.
- سپس در پوشه‌ی `iran-map` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- سپس در همین پوشه، دستور `npm run server` را برای راه‌اندازی سرور اجرا کنید.
- سپس در همین پوشه، دستور `npm start` را برای راه‌اندازی کلاینت اجرا کنید.
- پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/` می‌توانید نتیجه‌ی کد را ببینید.
# جزئیات
همان‌طور که مشاهده می‌کنید، در این پروژه سه `component`(مؤلفه) موجود است:
- `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` در فایل ارسالی نباشد.
- نیازی به ارسال کد‌های سرور نیست.
```
[your-zip-file-name].zip
├── public
│ └── index.html
├── src
│ ├── assets
│ │ └── images
│ │ └── raw_map.svg
│ ├── components
│ │ ├── App.js
│ │ ├── App.css
│ │ ├── CityModal.js
│ │ ├── CityModal.css
│ │ ├── IranMap.js
│ │ └── IranMap.css
│ ├── index.js
│ └── index.css
├── package.json
└── package-lock.json
```