Oleksandr Strelets

Oleksandr Strelets

Back end developer

Download CV

Once you start thinking in concepts of programming, it makes you a better person… as does learning a foreign language, as does learning math, as does learning how to read.

© Jack Dorsey

Programming is a real childhood dream of our back-end developer. So strong that already at the age of 14 he began to study it on his own.

He got his first practical experience being a freelance student.

Alexander has been engaged in commercial web development for the last 4 years.

Some of Alexander’s works:

community.dss-g.ru — back-end development. REST api for mobile application, custom admin panel on vue.js v.2. Implementation of a system of roles and access rights, adding a history of administrator actions, implementing authorization and registration via oAuth2, integrating SMS messages via SMSAero. Used PHP 7.4 – 8.0, Laravel 8, PostgreSQL 10 – 13, Laravel Passport in his work

api.goldenkey.world — back-end development. Implementing unification of requests from a separate application, adding a system of user roles, introducing the post-payment option, setting up registries, integrating authorization and registration via oAuth2, implementing SMS messages using SMSAero and acquiring with Tinkoff.Bank and ЮKassa.

api.leani.ru — setting up the location of blocks and content, editing and creating categories, products and sets of them. Adding the possibility of authorization and registration through oAuth2, integration with PayPal and ЮKassa.

api.leforce.ru — setting up the location of blocks and content, editing and creating categories and products. Adding the possibility of authorization and registration through oAuth2, integration with PayPal and ЮKassa.

Stack

  • HTML 5

    HTML 5

  • CSS

    CSS

  • JavaScript

    JavaScript

  • Vue.js

    Vue.js

  • PHP

    PHP

  • Laravel

    Laravel

  • SQL

    SQL

  • Docker

    Docker

  • GitLab

    GitLab

		Array
(
    [0] => WP_Post Object
        (
            [ID] => 10443
            [post_author] => 10
            [post_date] => 2022-03-25 14:31:14
            [post_date_gmt] => 2022-03-25 11:31:14
            [post_content] => 

Аbout the project

Golden Key is a service for access to business lounges of a new format from an official partner of the railway network. It is enough for the client to purchase an electronic certificate, after which they get full access for 3 hours and everything necessary for comfortable work or a relaxing holiday.

As part of cooperation with the company, we have developed a whole ecosystem of products:

  • Landing page of the company with a map of business lounges;
  • Mobile application Scan&Pay for verification of or payment for certificates by users;
  • Buyer's personal account for online purchase of a certificate;
  • Application for the administrator of the business lounge;
  • Design of plates and signboards of the administrator.

This time we will talk about the Scan&Pay mobile application, which was created for the Android platform using the React Native framework.

The objective

At the entrance to the business hall, visitors are met by the administrator at the counter. Before guests can go inside, the administrator needs to verify the authenticity of the certificate and activate it. To implement this procedure as quickly and simply as possible was our number 1 task.

However, not all guests plan their vacation in advance. Some of them make a decision spontaneously, being tired and looking for a comfortable place to wait. But in this case, an unexpected obstacle arises: the administrator of the business lounge does not have the right to accept money from the client, so it will not be possible to pay for access on the spot. A certificate, loyalty card or high class ticket is required. Therefore, our task number 2 was to resolve the issue of payment.

Banner

Implementation

The idea of developing a mobile application did not arise immediately. We came up with it after several brainstorming sessions and a couple of dozen correctly asked questions. Here is the main background from which we proceeded:

  1. What is the fastest way to check and activate a certificate? With the help of a QR code, the scanning of which will help to avoid manual entry and long checks.
  2. How to separate the payment process from the lounge manager who can't accept cash or cards? With the help of an online purchase of a certificate, which can be made without leaving the counter.
  3. What device allows you to scan a QR code and make an online purchase at the same time? Any smartphone or tablet.

Thus, it was decided to install tablets that would act as self-service terminals. And for them we started to develop the corresponding software.

Development of an application for purchasing and scanning certificates

The mobile app was written from scratch using the cross-platform React Native framework, which has JavaScript roots. Thousands of well-known applications have been written using this technology, including Facebook, Instagram, Oculus, Tesla, Pinterest, Skype and SoundCloud Pulse.

The peculiarity of React Native is that it allows you to create applications for both Android and iOS. In our case, the Scan&Pay application is adapted for users of Android smartphones and tablets.

Also in the development process the following mobile technologies were involved:

  • QR-scanner — allows you to instantly read QR codes.
  • Redux — responsible for the stable state of the application.
  • React Native Camera is an integrated camera component in React Native that allows you to recognize not only QR codes, but also photos, videos, text, and people's faces.

     

Application design and structure

The application is implemented as minimalistically as possible: all functionality is hidden behind two buttons. One of them is responsible for scanning an existing certificate, the second is for buying a new one. Hence the name of the application — «Scan&Pay».

The design of the application was developed in the likeness of a landing site, previously created in the creative laboratory of our company. The letter logo, a restrained range of colors with an emphasis on gold, a modern Manrope font, a minimum of distracting elements - all these make the interface design stylish, minimalistic and easy to use. Large clickable buttons make it easy to navigate through the sections of the application (and therefore serve customers without a hitch).

Banner

Scanning the certificate in the app

This process is implemented very simply and consists of literally one step (you won't believe it) — scanning. The guest just needs to select the appropriate item on the main screen and place the QR code of the certificate in front of the tablet's camera. If for some reason it is impossible to read the QR code, the certificate code can be entered manually.

01

/ 02

If the certificate was successfully activated, the system will notify the guest on the tablet screen and the administrator on the computer screen. The timer will also start automatically for 3 hours.

In case, for some reason, the payment was not successful, we provided error screens explaining the reason for the failure, providing for all possible options. We not only explain to the user why an error occurred, but also suggest how it can be corrected.

01

/ 03

Purchasing a certificate in the app

The purchase function works on the principle of payment on the Golden Key website using integration with YooKassa, which allows you to pay for the certificate in any convenient way: from Google and Sber Pay to YooMoney wallet or bank card.

At the same time, the payment scenario is simplified as much as possible and consists of only 3 steps (and one of them is not required):

  1. Choosing a bank for payment;
  2. Entering an e-mail to send a check (optional);
  3. Scanning a QR code through the bank application.

01

/ 03

Ready! Payment instantly passes through the SBP (fast payment system), and the administrator receives an automatic confirmation of the purchase on his computer. The certificate is activated automatically, which starts a timer for 3 hours. Now the administrator can invite the guest to go to the business lounge.

In case the payment failed for some reason, we have provided error screens explaining the reason for the failure.

01

/ 03

The result

All work on the creation of the application took 2 weeks. The application was developed from scratch, and by that time branded design elements had previously been implemented in the design of the company's landing page. In addition, this is far from the first project of our company implemented on React Native, so there were no particular difficulties in the process of work. The application was not published in the public access for download, as it is aimed at Golden Key administrators — this is the company's policy. However, in theory, a mobile application is also suitable for passengers’ self-service.

As a result, we managed to successfully solve both tasks by developing a high-quality mobile application for Android. It looks simple and clear, which will allow even inexperienced users to easily cope with the purchase or activation process. Some time after the launch, all errors were found and fixed, now the application works almost flawlessly.

[post_title] => Mobile Application for Scanning and Purchasing Certificates [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => mobile-application-for-scanning-and-purchasing-certificates [to_ping] => [pinged] => [post_modified] => 2023-09-18 10:23:29 [post_modified_gmt] => 2023-09-18 07:23:29 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=10443 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )