https://github.com/zyxxie-creator/routes_app
Test task "Application for displaying routes on the map"
https://github.com/zyxxie-creator/routes_app
Last synced: 8 months ago
JSON representation
Test task "Application for displaying routes on the map"
- Host: GitHub
- URL: https://github.com/zyxxie-creator/routes_app
- Owner: Zyxxie-creator
- Created: 2023-08-02T17:06:36.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-03T12:03:11.000Z (over 1 year ago)
- Last Synced: 2025-04-10T00:57:32.062Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 5.74 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Тестовое задание "Приложение по отображению маршрутов на карте"
* Задача:
Используя заданный набор маршрутов (таблица 1), реализовать экран, в котором слева будет таблица со списком маршрутов, а справа карта. При выборе в таблице строки с маршрутом, выбранная строка должна подсветиться, а на карте должны отобразиться точки маршрута в виде маркеров и полилиния (polyline) трека движения по точкам маршрута, полученная из сервиса построения треков по дорогам OSRM (или другой). При выборе маршрута в таблице, на карте происходит центрирование и масштабирование таким образом, что весь маршрут должен попасть в область видимости карты. Одновременно на карте может отображаться только один маршрут – выбранный.
Для получения полилиний (polylines) маршрута можно использовать API OSRM:
http://project-osrm.org/docs/v5.5.1/api/?language=cURL#route-service
Таблица 1 – Список маршрутов
## Разработка решения
## Выбор и настройка основы приложения:
* Рассмотреть React Create App или Vite в качестве основы приложения.
* Создать проект и настроить окружение.
## Установка необходимых пакетов:
* Установить и настроить Leaflet для отображения карты.
* Установить AntDesign для использования компонентов.
* Установить Redux (redux-toolkit) для хранения стейта компонентов и данных.
* Установить Sagas для реакции на события.
## Разработка функциональных компонентов:
* Создать функциональные компоненты для различных частей приложения.
* Разбить код по каталогам: components, selectors, reducers, sagas, HTTP-services, helpers, и т.д.
## Использование Sagas для получения трека по точкам:
* Реализовать Sagas для обработки событий и запросов данных.
* Использовать Sagas для получения трека по точкам с API.
## Обработка ошибок от HTTP-сервисов:
* Учесть возможность ошибок при обращении к HTTP-сервисам.
* Настроить обработку ошибок и сообщений об ошибках для пользователей.
## Написание стилей:
* Использовать препроцессор SASS/LESS для написания CSS-стилей.
* Реализовать стилизацию компонентов и элементов интерфейса.
## Проверка и тестирование:
* Провести тестирование приложения, включая компонентные и интеграционные тесты.
* Убедиться, что все функции работают должным образом.
## Оптимизация и завершение:
* Произвести оптимизацию кода и устранение возможных узких мест.
* Завершить разработку приложения и убедиться в его работоспособности.
## Документация:
* Добавить комментарии к коду для улучшения его читаемости.
* Тестирование производительности:
* Протестировать производительность приложения и внести необходимые изменения для оптимизации.