The best theory is practice.
Mykyta Krapivnoy — is a React Native and Flutter developer at Webnauts, as well as a teacher of the Cross-Platform Mobile Application Development with React Native course.
He started to be interested in programming in his school years, making simple websites in HTML, CSS and JS. Having definitely decided to devote himself to the IT field, he continued his studies at the institute with a degree in Software Engineering. Having studied all the details, as well as getting acquainted with various programming technologies and languages during training, he got the bachelor’s degree with honors.
A full-fledged commercial experience began with freelancing and CMS WordPress in his 2nd year at the university. Further work with this popular system brought Mykyta to our company, where he has been successfully working for 3 years.
Having implemented quite a few projects on WordPress, Mykyta became interested in developing mobile applications. For the last two years he has devoted himself entirely to this.
Since Mykyta had deep knowledge in the field of JavaScript, he began his development with the React Native framework. For a year and a half of work on commercial projects, quite a few projects such as Leev, DssCommunity, GoldenKey, JetLogistic and others have been successfully implemented and finalized on it. Below we will tell you about some details.
For the last six months, Mykyta has been studying and developing on the Flutter framework. This is a newer and faster, in terms of performance, technology for developing cross-platform applications from Google. To work with it, he also had to learn the Dart programming language.
At the moment, Mykyta’s technology stack is as follows:
- Ract Native (Functional – hook based, Class Components);
- Flutter
- Redux;
- Redux Thunk;
- JavaScript (ES6);
- Firebase;
- Google Maps SDK;
- PHP 7;
- Dart.
In total, Nikita has been engaged in commercial development for the last 4 years. He is one of the few people in our company who works in his profession.
Stack
-
PHP
-
CSS
-
HTML 5
-
React
- 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.
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:
- 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.
- 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.
- 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).
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):
- Choosing a bank for payment;
- Entering an e-mail to send a check (optional);
- 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 ) [1] => WP_Post Object ( [ID] => 14902 [post_author] => 10 [post_date] => 2022-06-13 14:26:44 [post_date_gmt] => 2022-06-13 11:26:44 [post_content] =>The objective
The customer turned to Webnauts specialists for a new functionality of a mobile application for athletes who want to be always in touch with their coach. The client is a fitness club that provides professional trainers, fitness programs and sports equipment for training.
At the time of contacting our company, the customer already had the initial version of the mobile application. Its main task was the registration or authorization of users, a description of the exercise machines and a list of exercises for each. A calendar was also available with the possibility of independently compiling a training plan for the week from the proposed list of exercises, displaying the location of the fitness club and contact information.
However, the customer wanted some more functionality:
- firstly, the client wanted a product that allows you to view various exercises and, with the help of a trainer, form workouts for every day;
- secondly, to add an online chat between the coach and the client of the gym;
- thirdly, make it possible to pay for training in the application using Yookassa.
Below we will talk about how the product turned out at the end, after the careful work of our programmers.
Improvement of the mobile application
After starting work with the initial version of the application, it turned out that the amount of work to be done was somewhat larger than originally thought.
The first version was made in React Native, but using the Expo framework. To create an online chat between the trainer and the client of the gym, previous developers had to completely rewrite the application from React Native Expo to pure React Native.
React Native is an open source, cross-platform framework for developing native mobile and desktop applications in JavaScript and TypeScript. React Native supports platforms like Android, Android TV, iOS, macOS, Apple tvOS, Web, Windows, and UWP, allowing developers to use the power of the React library outside of the browser to build native apps that have full access to the platform's system APIs.
Expo is a set of tools with which you can write a React Native application in minutes. It includes out-of-the-box tools such as Android Studio/XCode configurations, Apple & Google certificate management and push notifications and more.
In the end, our programmers carried out the following series of works:
- The original version of the application was carefully redesigned, as it had a huge number of bugs.
- Online chat was rewritten and implemented using Socket.io libraries.
- Payment was implemented using Yookassa, the mobile application was linked to this integration using http requests to api.
Yookassa is a payment provider, an online payment service for individual entrepreneurs, legal entities and the self-employed. It is needed to accept payments, send money to customers and solve other tasks related to electronic payments. Connects to a website, blog or online service.
The result of working with the application on React Native
So, this is what the result of the work of our specialists on finalizing the initial mobile version looks like:
- All the functionality of the mobile application - a selection of exercises, workouts, calendar, products, online chat and payment — works quickly and efficiently.
- Athletes can always be in touch with their coach. In the online chat, after each workout, you can receive feedback based on subjective well-being and objective data taken by fitness trackers, if any. The messenger built into the application allows you to conveniently and quickly communicate with the coach in real time.
- Easy and fast payment for trainers' services is available through the Yookassa payment system.
01
/ 06
In general, the task was implemented not only according to the wishes of the client, but also technically improved. Webnauts specialists always perform their work with high quality and are ready to take on the most complex and interesting projects.
[post_title] => React Native Mobile App for Training [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => react-native-mobile-app-for-training [to_ping] => [pinged] => [post_modified] => 2023-09-17 15:43:45 [post_modified_gmt] => 2023-09-17 12:43:45 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=14902 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )Worked on
-
Mobile Application for Scanning and Purchasing Certificates
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
-
React Native Mobile App for Training
-
Team:
3
-
Cases:
0
-
Reviews:
0
-