پروژه اولیه

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

snapp-shekarstoon
├── package.json
├── package-lock.json
├── public
│   └── index.html
├── server
│   ├── data
│   │   └── data.json
│   ├── index.js
│   ├── utils
│   │   └── router.js
│   └── views
│       └── index.html
└── src
    ├── API
    │   └── index.js
    ├── App.js
    ├── Components
    │   ├── Map
    │   │   ├── Map.jsx
    │   │   ├── Relative.jsx
    │   │   └── Way.jsx
    │   ├── MapWidget
    │   │   ├── ClearButton.jsx
    │   │   ├── Distance.jsx
    │   │   ├── MapWidget.jsx
    │   │   └── Row.jsx
    │   ├── Marker.jsx
    │   ├── Node
    │   │   ├── Absolute.jsx
    │   │   └── Node.jsx
    │   └── UI
    │       └── Title.jsx
    ├── hooks
    │   ├── useAPI.jsx
    │   ├── useMap.jsx
    │   ├── useMarker.jsx
    │   └── useNavigator.jsx
    ├── index.js
    ├── styles
    │   ├── absolute.scss
    │   ├── btn.scss
    │   ├── marker.scss
    │   ├── relative.scss
    │   ├── row.scss
    │   └── title.scss
    └── utils
        ├── calcDistance.js
        └── calcPositionCSS.js

جزئیات

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

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

• نقاط ضروری برای رسم راه ها برحسب طول و عرض جغرافیایی (بر حسب درجه) که از طریق api/node قابل دسترس است.

• مربع در برگیرنده شکرستون که شامل بیشترین و کمترین، طول و عرض جغرافیایی این شهر می باشد و از طریق api/bounds قابل دسترسی است.

• همچنین شیوه اتصال نقاط در api/way قابل دریافت است که در قالب آرایه ای از شی های برگردانده می شود.

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

مهیار در ابتدا به اشتباه گمان میکرد پیاده سازی و اجرای الگوریتم های مسیریابی در سمت مرورگر کار درست و عقلانی است اما پس از صحبتهایی مفصل با علی آقا که از دانشجویان ممتاز دانشگاه صنعتی شکرستون می باشند، متوجه شد که کار اشتباهی است و تصمیم گرفت پیشنهاد علی آقا را مبنی بر اینکه مسیریابی در سمت سرور انجام بگیرد را پذیرفت. لکن برای پیدا کردن یک الگوریتم مسیریابی خوب تصمیم گرفت پیش یکی از اساتید پیشگام در حوزه گراف دانشگاه شکرستون یعنی جناب دکتر دیکسترا برود که متاسفانه ایشان به مسافرت رفته بود، به همین جهت او به الگوریتم BFS بسنده کرد و جهت استفاده از آن آدرس api/route را به آن اختصاص داد که با فرستادن شناسه مبدا و مقصد در قالب متد POST، کوتاه ترین مسیر (یا حداقل از مسیر خرها بسیار کوتاه تر) را در قالب آرایه ای شامل شناسه Node ها را بر میگرداند.

همچنین او از شما خواسته سیستم برای گذاشتن نشان (Marker) روی نقشه نیز برنامه را به نحوی طراحی کنید تا بتواند مبدا و مقاصد مورد نظر را به راحتی تعیین نماید که در جلوتر به صورت مفصل آن را توضیح خواهد داد.

از آنجایی که ژنرال کنوبی راس ساعت 6:05PM به شکرستون میرسد مهیار از شما می خواهد تا این زمان برنامه را تکیمل کنید. هرچند طبق گفته های مهیار اسنپ قول داده است که اگر این برنامه در راس زمان مقرر تکیمل بشود، استارتاپ خرنپ را با قیمت خوبی بخرد و شما را نیز به عنوان یک توسعه دهند قابل و توانا استخدام نماید.

ازآنجایی که مهیار درگیر تدارک دیدن خوش آمد گویی ژنرال کنوبی است در گام اول از شما خواسته است که اطلاعات دریافتی از API را در قالب یک نقشه گرافیکی با استفاده از کتابخانه react طراحی نمایید. (قابل به ذکر است که مهیار چند کامپوننت از قبل آماده شده برای راحت تر شدن استایل دهی پروژه و همچنین تسریع در روند توسعه آن تدارک دیده است که جزییات هریک را در قالب یک داکیومنت در اختیار شما می گذارد).

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

نکات سیستم داوری

برای ارزیابی درست تمارین شما رعایت موارد زیر الزامی است:

• برای دریافت مکان نشانگر mouse حتما از clientX و clientY استفاده کنید.
• هوک useMap به طور مستقیم ارزیابی نمی شود و فقط جهت سهولت در تکمیل تمرین می باشد
• کامپوننت MapWidget به طور مستقیم ارزیابی نمی شود و فقط جهت سهولت در تکمیل تمرین می باشد.

موارد خواسته شده

{
    "minlat": "123.987",
    "minlon": "5642.12354",
    "maxlat": "123.12321",
    "maxlon": "1245.456"
}

[
    {
        "id": "942401067",
        "lat": "33.5031685",
        "lon": "51.9268632"
    },
    {
        "id": "942401068",
        "lat": "33.5101294",
        "lon": "51.9202060"
    }
]

[
    {
        "id": "80818771",
        "nd": [
            "942401300",
            "942401130",
            "5202757684",
            "3539769753",
            "3539769746",
            "5202757588",
            "5202757591",
            "5202757579",
            "5202704676",
            "942401196",
            "942401359",
            "2989992895"
        ]
    }
]

// REQUEST POST
{
    "src": "5202757608", // SOURCE NODE ID
    "dst": "5202757524"  // DESTINATION NODE ID
}

// RESPONSE

{
    "path": [
        "5202757608",
        "5202757609",
        "5202757610",
        "5202757611",
        "5202757630",
        "5202757629",
        "5202757541",
        "5202757540",
        "5202757539",
        "5202757538",
        "5202757550",
        "5202757537",
        "5202757536",
        "5202757542",
        "5202757535",
        "5202757547",
        "5202757534",
        "942401095",
        "5202757522",
        "942401261",
        "942401291",
        "5202757524"
    ]
}

distance = 1.25 km 

distance = 924.56 m

<Distance distance={123.56} />

موارد پیاده شده