پویا که تابستان خود را به بطالت گذرانده بود، تصمیم گرفت تابستان بعدی خود را به ایران‌گردی مشغول شود. او از شما و دوست مشترکتان احمد تقاضای کمک کرده است. شما و احمد تصمیم می‌گیرید نقشه‌ای از ایران برای پویا تهیه کنید که او علاوه بر مشاهده‌ی اسم و موقعیت شهرها، بتواند برخی از اطلاعات مربوط به هر شهر را مشاهده کند. برای این کار احمد یک سرور ساده آماده کرده است که شما می‌توانید اطلاعات مورد نیاز را از آن بگیرید. او هم‌چنین طراحی و معماری کلی برنامه را با استفاده از کتابخانه‌ی `ReactJS` ساخته و آن را در اختیار شما قرار داده است. حال شما باید با تکمیل این برنامه، اطلاعات مورد نیاز پویا را از سرور بگیرید، و در صفحه نمایش دهید. خروجی پروژه بدین صورت خواهد بود:  با کلیک روی اسم هر شهر، اطلاعات آن بدین صورت نمایش داده خواهد شد:  # پروژه اولیه پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/7F0w0sP1Xk/iran-map.zip) دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است. مواردی که نیاز به تغییر دارند با `*` مشخص شده‌اند. ``` 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` در فایل ارسالی نباشد. - نیازی به ارسال کد‌های سرور نیست.