nkaty / shri-2018-2-task-1

Яндекс ШРИ - первое задание

Яндекс - Школа разработки интерфейсов (2018)

Решение к Заданию 1 — найди ошибки

https://github.com/yandex-shri-2018/entrance-task-1-2

Задание:

Представьте, что вы инженер в большом интернет-магазине и отвечаете за доставку заказов дронами.

В каждый момент времени в воздухе находится несколько сотен дронов. Для управления ими развёрнута сеть базовых станций. В ваших обязанностях — контроль работоспособности станций и устранение неисправностей. Для этого есть специальное приложение, в котором на карте города показаны места размещения базовых станций и информация о них.

К сожалению, после очередного релиза вашего приложения данные на карте перестали отображаться. Кажется, программисты опять понаделали ошибок в коде. Нужно скорее найти ошибки и починить их.

Описание:

• Всю область экрана занимает интерактивная карта Москвы.
• На карте отображаются места размещения базовых станций.
• Если на небольшом пространстве много объектов, они объединяются в кластер.
• При клике на кластер карта масштабируется для просмотра объектов, входящих в него.
• Неисправные станции обозначаются на карте красным цветом, исправные — синим.
• Используя фильтр, можно отобразить на карте объекты с нужным состоянием — например, отобразить только неисправные.
• Если неисправный объект входит в кластер, то иконка кластера должна показывать, что в нем есть неисправная станция.
• При клике на метку базовой станции появляется попап с информацией о ней: серийный номер, состояние, количество активных дронов, график нагрузки.

Техническое описание:

• Приложение работает в браузере и написано на JavaScript, модули собираются с помощью Webpack (https://webpack.js.org)
• Для отображения карты используется API Яндекс.Карт.(https://tech.yandex.ru/maps/jsapi/)
• Для для отображения графиков используется Chart.js (https://www.chartjs.org)

Решение:

Логика поиска ошибок:

1. При запуске npm start в терминал выбрасывается предупреждение: "export 'default' (imported as 'initMap') was not found in './map'. Причина: Синтаксис импорта в index.js предполагает испозование в map.js export default, а не export. Исправление: 1) в map.js заменить export на export default или 2) в index.js заменить import initMap from "./map"; на import {initMap} from "./map";
2. Предупреждение пропало, но карта все равно не видна. Поиск решения: Обратиться к инструментам разработчика в Chrome, вкладке Elements. Там можно увидеть, что карта есть, но с нулевой высотой, если поменять высоту, карта появляется. Значит здесь есть какая-то ошибка, скорее всего в стилях (конкретно в задании высоты). Обратиться к документации Yandex Maps API. Там указано, что контейнеру, содержащему карту нужно установить высоту и ширину. Так как в задании указано, что карта занимает всю область экрана, добавляем body и контейнеру высоту и ширину 100%.
3. Карта теперь показывается, но меток нет. Скорее всего где-то в коде, отвечающем за создание карты, ошибка. Нужно просмотреть все модули и понять, какая часть за что отвечает. После просмотра кода понятно, что за инициализацию карты отвечает map.js (в частности функция initMap). Теперь нужно обратиться к документации Yandex Maps API. В результате прочтения документации выясняется, что метки нужно добавить на карту строчкой myMap.geoObjects.add(objectManager);
4. Теперь метки есть на карте. Но расположены они не там, где предполагалось (Москва). Обращаемся к коду и видим, что данные генерируются случайным образом на сервере, потом обрабатываются в mappers.js и через вызов этого процесса в map.js попадают на карту. Можно предположить, что ошибка происходит или при генерации данных или при их обработке. Смотрим на генерацию - ошибок не обнаружено (берутся широта и долгота Москвы и генерируются случайные данные близкие к этим значениям). Тогда смотрим на обработку данных в mappers.js. Обнаруживаем ошибку - в координатах местами перепутаны значения широты и долготы - меняем их местами.
5. Теперь метки расположены правильно, они объединяются в кластеры, при клике на кластер показываются входящие в него метки, исправные метки синего цвета, неисправные красного цвета, фильтр работает. Но при клике на отдельную метку попап с информацией не появляется, а в консоль выбрасывается ошибка. В проекте есть две реализации попапа: details.js и popup.js. В коде используется реализация details.js. Popup.js не используется, и в его коде нет реализации графика нагрузки. Следовательно, можно предположить, что если исправить ошибку в details.js и попап заработает, popup.js можно удалить. Для поиска ошибки анализируем код details.js и снова смотрим в документацию. Находим, что при переопределении методов build и clear класса BalloonContentLayout использованы стрелочные функции, в результате чего this внутри методов ссылается не на экземпляр класса, а становится undefined. Исправляем это заменой на определение методов через function () {}. Теперь попап работает, но график нагрузки все равно отображается не корректно. Зато можно удалить popup.js.
6. Для решения проблемы с графиком нагрузки изучаем документацию Chart.js и код в chart.js. Находим, что у оси Y графика стоит ограничение максимального значения 0, тогда как на самом деле значения будут больше или равны 0. Убираем это ограничение. Теперь графики нагрузки отображаются, но есть небольшое обрезание графика справа, что смотрится некрасиво. Решение проблемы: добавить правый padding для layout. Также для уменьшения размера всплывающей подсказки с датой можно заменить метод приведение даты к строке с toString на toLocaleString('ru'). И для улучшения читабельности кода можно заменить название переменной с x на date.
7. Осталась нерешенной проблема иконки кластера - она должна меняться, если в кластер входит неисправная станция. Опять обращаемся к документации и находим, что у нас в коде для отображения кластера выбран макет в виде круговой диаграммы. И в Yandex Maps уже реализована возможность отображения на круговой диаграмме состава данного кластера по категориям. Мы перезаписали эту возможность дав кластерам внешний вид 'islands#greenClusterIcons'. Удаляем эту строчку кода.
8. Для получения данных с сервера в коде использован fetch, который имеет особенность. Promise возвращенный fetch() не отклонит состояние ошибки HTTP, даже если ответ HTTP 404 или 500.  Вместо этого, он будет выполнен нормально (с установкой статуса ok  в false) и будет отклонять только при сбое сети или если что-либо помешало запросу выполниться (developer.mozilla.org). Поэтому в api.js добавлена функция для проверки состояния ответа. Также добавлен catch для перехвата ошибок при выполнении и обработки запросов.
9. В backend-stub.js функция обработки адреса запроса '/api/stations/:id' возвращает пустой объект. Обращение к документации Express на вопрос зачем ответа не дало. На работу это тоже не влияет. И так как было задание убрать не нужный код - строчка удалена.
10. Для поддержания единого codestyle в проект добавлен eslint и выбран JavaScript Standart style. Определение переменных через var заменено на const. Добавлен закрывающий тег в template в details.js.