Еще один FinTech Project

Заказчиком данного проекта выступал крупный банк, который имеет безупречную деловую репутацию как в России, так и в странах СНГ. Для обслуживания клиентов и взаимодействия с партнерами банк использует только передовые технологии сферы банкинга. Проект, в котором участвовала наша компания, - это разработка кросс-платформенной части мобильного приложения посредством WebView, которое было встроено в приложения для iOS и Android. WebView разрабатывалось при помощи библиотеки React.js, а в качестве Backend-as-a-service применялось Firebase.

Немного поговорим о WebView. Есть инструменты, ориентированные на разработку нативных приложений. Другие предназначены для веба. Преимущество нативных приложений заключается в том, что они могут использовать весь функциональный потенциал телефона. Но разрабатывать их, по сравнению с веб-приложениями, довольно сложно. Веб дает возможность простого старта, но сильно ограничивает возможности приложения. Объединить все достоинства нативных приложений и веба позволяют гибридные приложения, которые создают с помощью компонента WebView.

Одной из задач на проекте являлась реализация карты, которая включала в себя представление по городам наличия сервисов банка, то есть приложение позволяет получить всю необходимую информацию о всех терминалах, банкоматах и отделениях в удобной интерактивной форме, а также найти по критериям и фильтрам необходимую точку и проложить к ней маршрут. За основу для построения логики работы с гео-объектами была выбрана библиотека React Yandex Map. Технологии, которые применялись на данном проекте это: React - Redux, React - Router - DOM, React Yandex Map и самописная библиотека shared-components, основанная на Material UI. Для создания нескольких языковых версий была использована библиотека React-i18next. В качестве библиотеки, работающей со структурными данными, использовалась React-Lodash. Для того, чтобы работать с датами и корректным отображением часов работы офисов и банкоматов банка была использована библиотека Date-fns.

Интерактивная карта на веб-странице легко описывается в реактовских терминах, что избавляет разработчика от рутинного JS. В простейшем случае достаточно добавить всего один тег с начальными настройками, в чуть более сложном — отдельными тегами описать слои и различные панели. Всеми этими качествами обладает React Yandex Map. Именно по этой простой причине и было принято решение использовать данную библиотеку для работы с картами. Немного поговорим о том, что было реализовано в рамках задачи. На картинке ниже вы можете видеть результат работы. 

Это отдельная страница, которая в дальнейшем встраивается в мобильное приложение. На этой странице обычный пользователь должен иметь возможность выбрать город. Для выбранного города должны отображаться все банкоматы, терминалы и отделения как на карте, так и в листе. Также пользователь должен иметь возможность применить фильтры для выбранного объекта. И после этого список должен быть отфильтрован согласно предпочтениям пользователя как на карте, так и в листе с объектами. Также у пользователя должна быть возможность просмотра выбранного объекта с дальнейшим переносом к нему на карту, где отображается адрес месторасположения, часы работы и расстояние до данного объекта от текущего месторасположения.

Как все устроено? Прежде всего необходимо начать с добавления карты на страницу. Для этого можно использовать данный код:

Как видно из представленного кода, мы инициализируем карту и задаем ей начальные параметры, такие как ширину, высоту, позиционирование и зум карты, тем самым задав ей Default State и State. Далее необходимо было отобразить все объекты на карте, для этого мы использовали Clusters и PlaceMarks.

В представленном коде вы можете увидеть, как происходит инициализация Clusters и PlaceMarks на карте. Здесь мы определяем, как будет выглядеть сама точка на карте, ее размеры и то, что будет отображаться при ее нажатии. Далее была решена задача с нанесением на карту вспомогательных элементов управления картой. В рамках задачи пользователю необходимо было иметь возможность уменьшить, либо увеличить карту, определить текущую геопозицию (месторасположение) пользователя и осуществить моментальное перемещение пользователя к месту нахождения.

В представленном коде вы можете увидеть, как происходит инициализация компоненты для увеличения и уменьшения карты, в этой части задаются размеры и позиционирование на самой карте.

В качестве Agile метрик в проекте было решено использовать Kanban-подход, поскольку команда разработки большая, а kanban предполагает обсуждение производительности в режиме реального времени и полную прозрачность рабочих процессов. Этапы работы визуально представлены на Kanban-доске, что позволяет членам команды видеть состояние каждой задачи в любой момент времени. Каждый день на проекте начинался с ежедневных StandUp описаний о проделанной работе за вчерашний день и обсуждения того, к чему приступить сегодня. Этот подход был выбран для того, чтобы не тратить огромное количество рабочего времени на обсуждения в real-time режиме. Для меня такой подход организации рабочего времени был чем-то новым, но это никак не повлияло на работу команды, а даже уверенно можно сказать, что все задачи выполнялись с большой скоростью. Кстати, с командой на данном проекте мне очень повезло, наша команда насчитывала около 50 человек, все ребята были профессионалами в своей области работы. 

Всегда хочется, чтобы твое приложение выглядело одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». Одной из таких проблем оказалось масштабирование текста на странице и скролл страниц. Все эти проблемы оказались решаемы с применением -webkit.

В заключении данной статьи хотелось бы отметить, что работа в крупном банке - это большая ответственность. Необходимо быстро и качественно выполнять задачи, реализовывая необходимый функционал. Необходимо работать слаженно, чтобы быть эффективной единицей целой большой команды. Я доволен результатом проекта, потому что этим результатом доволен клиент. Надеюсь, что моя статья была для вас интересна.