Демонстрационное приложение реализует результат поиска авиабилетов и их фильтры. Все данные для отображения информации берутся из файла results.json.
Дизайн —
figma
Результат —
aviata.nelkor.kz
Полезные команды для локального запуска (требуется NodeJS):
| Действие | Команда |
|---|---|
| Установить зависимости | npm i |
| Запустить тесты | npm run test |
| Запустить dev-сервер | npm run serve |
| Собрать в production | npm run build |
Нет NodeJS? Не проблема! Вам потребуется всего лишь Docker. Выполните команду:
docker-compose up -dПриложение станет доступно по адресу localhost:8338.
Я добавил от себя интернационализацию — в верхнем правом углу экрана доступен переключатель между русским и казахским языками. Приложение загружается сразу на одном языке, второй язык не загружается до момента переключения на него.
На макете есть примеры билетов без багажа и пример билета с багажом "20 кг".
В файле results.json встречается ещё один вариант — багаж "1PC".
Я нашёл, что так обозначают единицу багажа весом до 23 килограммов. Так что
в приложении этот вариант выглядит именно так — "23 кг".
На макете рядом с информацией о доступности багажа есть кнопка "Добавить багаж". Она неизменна для случаев доступного багажа и недоступного. Мне показалось, что это неверно. В приложении для случаев недоступного багажа эта кнопка неактивна.
На макете представлены примеры только невозвратных билетов. Для возвратных в приложении я сделал обозначение на свой вкус.
На макете фильтр по авиакомпаниям представлен в виде флажков, причём первый из них именуется "Все". Было бы странно, если было бы можно выделить "Все" и что-то ещё. Я добавил некоторую логику, которая контролирует, что именно может быть нажатым в этом фильтре.
На макете есть кнопки. Это значит, что они могут быть нажаты. Логику того, что будет происходить по нажатию кнопок, я добавил на свой вкус.
В файле results.json авиабилеты содержат информацию о времени вылета,
времени прилёта, а также о длительности путешествия в целом. К сожалению,
эти значения не совпадают: длительность путешествия не соответствует
длительности временного отрезка между временами вылета и прилёта. Поскольку
это несоответствие не может доставить реальных проблем пользователям,
я решил оставить всё как есть. Данное приложение призвано показать
техническую сторону решения задачи на основе данных из существующего файла,
так что любые несоответствия данных я оставляю на совесть этого файла.
Сокращения названий месяцев, дней недели, а также сокращения слов "часов" и "минут" до букв "ч" и "м" не переводятся. Я посчитал перевод данных сущностей избыточным для данного демонстрационного приложения, он довольно сложен. Кроме того, он бы усложнил автоматическое тестирование.
В русском языке во фразах типа "через Астану" второе слово должно быть в винительном падеже. Поскольку названия пересадок — это просто строки, возвращаемые с сервера, склонять их по падежам без добавления какой-то сложной логики не представляется возможным. Так что в демонстрационном приложении названия остановок используются как есть — "через Астана". В казахском варианте "Астана арқылы" проблем нет.
На макете мобильной версии нет информации о том, возвратный ли билет. В реальном приложении такая информация была бы важна, но в демонстрационном я решил оставить макет как есть.