One more FinTech Project

The customer of this project was a large bank that has an impeccable business reputation both in Russia and in the CIS countries. To interact with the sphere, the bank uses only advanced banking technologies. The project, in which our company participated, is the development of a cross-platform part of a mobile application using WebView, which was built into applications for iOS and Android. The WebView was developed using the React.js library, and Firebase was used as the Backend-as-a-service. Let's talk a little about WebView. There are tools focused on native app models. Others are for the web. The advantage of native apps is that they can use the full functionality of the phone. But developing them is rather difficult compared to web applications. The web allows for an easy start, but severely limits the application's capabilities. Combining all the advantages of native apps and the web allows hybrid apps that use the WebView component. One of the tasks on the project was the implementation of the map, which includes the presentation of the bank by the cities of the availability of services, this application allows you to get all the necessary information about all terminals, ATMs and branches in a convenient interactive form, as well as find the specified point by criteria and filters and lay it to her route. The React Yandex Map library was chosen as the basis for building the logic for working with geo-objects. Technologies that were used on this project: React - Redux, React - Router - DOM, React Yandex Map and a self-written shared-components library based on Material UI. The React-i18next library was used to create several language versions. React-Lodash was used as a library for working with structural data. In order to work with dates and the correct display of the opening hours of offices and ATMs of the bank, the Date-fns. An interactive map on a web page is easily described in React terms, which saves the developer from routine JS. In a simple case, it is enough to add just one tag with the initial settings, a little more complex - to describe layers and various panels with separate tags. All these qualities are possessed by React Yandex Map. It was for this simple reason that the decision was made to use the library for working with maps. Let's talk a little about what was implemented within the task. In the picture below you can see the result of the work.

This is a separate page that is later embedded in the mobile application. On this page, a regular user should be able to select a city. For the selected city, all ATMs, terminals and branches should be displayed both on the map and in the sheet. Also, the user should be able to apply filters to the selected object. And after that, the list should be filtered according to the user's preferences both on the map and in the sheet with objects. Also, the user should be able to view the selected object with further transfer to it on the map, which displays the address of the location, hours of operation and the distance to this object from the current location. How does it work? First of all, you need to start by adding a map to your page. To do this, you can use this code:

As you can see from the presented code, we initialize the map and set its initial parameters, such as width, height, positioning and zoom of the map, thereby setting it to Default State and State. Next, it was necessary to display all objects on the map, for this we used Clusters and PlaceMarks.

In the presented code, you can see how Clusters and PlaceMarks are initialized on the map. Here we define how the point itself will look on the map, its dimensions and what will be displayed when it is clicked. Next, the problem was solved with drawing auxiliary map controls on the map. As part of the task, the user needed to be able to reduce or enlarge the map, determine the current geolocation (location) of the user and instantly move the user to the location. In the presented code, you can see how the component is initialized for increasing and decreasing the map, in this part, the dimensions and positioning on the map itself are set.

It was decided to use the Kanban approach as Agile metrics in the project, since the development team is large, and kanban involves discussion of performance in real time and full transparency of workflows. Work stages are visually presented on a Kanban board, which allows team members to see the status of each task at any given time. Every day on the project began with daily StandUp descriptions of the work done for the day before and a discussion of what to start today. This approach was chosen in order not to spend a huge amount of work time on discussions in real-time mode. For me, this approach to organizing working time was something new, but it did not affect the work of the team in any way, and we can even confidently say that all tasks were performed at a high speed. By the way, I was very lucky with the team on this project, our team consisted of about 50 people, all the guys were professionals in their field of work. You always want your app to look the same on different devices, including mobile. But, if the behavior in Android browsers is largely predictable, then with iOS there are a number of "surprises". One of these problems turned out to be scaling text on the page and scrolling pages. All of these problems were solved using -webkit. In conclusion of this article, I would like to note that working in a large bank is a big responsibility. It is necessary to quickly and efficiently complete tasks, implementing the necessary functionality. You need to work well together to be an effective unit of a large team. I am satisfied with the result of the project, because the client is happy with this result. I hope that my article was interesting for you.