پویا که تابستان خود را به بطالت گذرانده بود، تصمیم گرفت تابستان بعدی خود را به ایرانگردی مشغول شود. او از شما و دوست مشترکتان احمد تقاضای کمک کرده است. شما و احمد تصمیم میگیرید نقشهای از ایران برای پویا تهیه کنید که او علاوه بر مشاهدهی اسم و موقعیت شهرها، بتواند برخی از اطلاعات مربوط به هر شهر را مشاهده کند.
برای این کار احمد یک سرور ساده آماده کرده است که شما میتوانید اطلاعات مورد نیاز را از آن بگیرید.
او همچنین طراحی و معماری کلی برنامه را با استفاده از کتابخانهی ReactJS
ساخته
و آن را در اختیار شما قرار داده است.
حال شما باید با تکمیل این برنامه، اطلاعات مورد نیاز پویا را از سرور بگیرید، و در صفحه نمایش دهید.
خروجی پروژه بدین صورت خواهد بود:
با کلیک روی اسم هر شهر، اطلاعات آن بدین صورت نمایش داده خواهد شد:
پروژه اولیه را از
اینجا
دانلود کنید.
ساختار فایلهای این پروژه به صورت زیر است.
مواردی که نیاز به تغییر دارند با *
مشخص شدهاند.
برای اجرای پروژه، باید 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
کنید تا اطلاعات شهر مورد نظر نمایش داده شود.
نحوهی کار با سرور و گرفتن اطلاعات نیز به شرح زیر است:
localhost:9000/cities/
GET
id
هر شهر در دیتای دریافتشده موجود است.localhost:9000/cities/{id}
GET
{id}
، id
شهر مورد نظر را ارسال کنید.IranMap.js
هستید.node_modules
در فایل ارسالی نباشد.