HotBotVPN

photo_2022-04-18_11-55-33
OrbitSoft
  • Score Awaiting client review
    n/a
  • Date Published
  • Reading Time 9-Minute Read
new-img3-1

VPN App: How We Fixed Another Agency’s Mistakes and Launched a Project

The Client

Our client was an advertising company in Canada. One of their services involved producing entertainment videos, which were very popular: some videos were viewed by 350,000 users every day.

The Problem: Increase the Number of Users and Overcome Restrictions to Access

Our client was earning their income from ads that were shown to viewers of their entertainment videos – banners, pop-ups, and other formats. At the beginning of 2021, their video entertainment service has had more than 9 billion ad impressions per month.

Their logic of making money was simple: the more users visited the site, the more ad views they had and the higher their earnings were. In spite of their impressive record of ad impressions, they wanted to increase their revenue. Their problem, then, was obvious: to increase their number of users.

There are countries where users are limited in their choice of online entertainment content for various reasons. Although in most cases such online content is legal, due to the peculiarities of certain media policies in certain countries, users may not be able to enter a site.

Another problem is the fear of users that their data could be stolen and used for illegally. Hackers might access their accounts on social networks, their bank accounts, and other services.

Solution: Launch a VPN App

When users want to securely access a site, they can use virtual private network (VPN) technology. VPN technology encrypts the data that a user transmits to an Internet Service Provider (ISP), so that it’s impossible — or very difficult — to access the user’s traffic.

There are already a lot of VPN apps on the market. Our client analyzed ready-made solutions and came to the conclusion that it would be more profitable to create their own application. According to them, such an application would be used by their customers, as well as those of other entertainment services.

To develop their application, the customer first contacted one agency, which was chosen on price. The agency offered the cheapest solution, and it seemed like a good way to save money. But the idea failed.

According to the client’s plans, the application was to be launched within six months. But almost a year passed and there were basically no results. It was then that the customer turned to Orbitsoft. After discussing the problem, we took up the project.

Stages of Work on the App

Audit

  • What has already been developed?
  • How does the application work?
  • How quickly will it be possible to finalize and launch it?

Audit Results

  • Development problems
  • Problem solving
  • Work plan and deadlines

 Research

  • Best practices and efficient technologies for similar tasks
  • Application architecture
  • Programming language

Design and Development

  • Minimum viable product
  • Testing
  • Refinement of other functions

Launch

  • The application is downloaded by real users

Refinement

  • Feedback from users
  • Additional testing
  • Refinement of features that can work better

We worked on each project in stages, and divided the stages into iterations. After each stage, we told the client what had been done and at what stage the project was. In this way the customer was always kept up to date, and if something went wrong, we could quickly discuss it and adjust the work.

Stage 1: Analyze the Situation

The work on the application was divided into six stages. Since we didn’t start from scratch but were given the results from the first agency, the first thing we did was analyze what had already been done and how it worked. The fact is, however, nothing has been completed.

Here are a few examples of what they found.

The application had a monolithic architecture, so it was difficult to test and maintain it. For the client, this would have meant spending additional hours to add new features. It would have been better if the architecture consisted of layers: you could make changes to one layer and test only one layer, not all of them at once.

There were a lot of bugs in the code, so the program often crashed. For example, due to an authentication token, not all of the features were updated.

There were also examples of development problems from the first agency.

Backend

  • Frequent duplication of code sections
  • Lack of a unified code style
  • Incorrect integration with the payment system
  • Lack of automated deployment to servers

Frontend

  • Incorrect implementation of routing
  • No animations for pop-up windows and view transitions
  • Impossibility of selecting the number of displayed lines on pages with different types of statistics

Web Version

  • Unoptimized code: a lot of repetitive code fragments, constants hardcoded into the code, no OOP, interface and code responsible for the application logic are mixed
  • Poor performance: no caching, requests to the server return the same data and are executed several times in a row in different places of the application, multithreaded programming is not used, requests to the API are executed in the interface thread, delay when working with the interface reached 15 seconds
  • Security hole: app saves usernames and passwords and other confidential data in an open text file, some requests to server return confidential data even with unauthorized requests

Mobile Version

  • Errors in logic of payment transactions
  • Duplicated animation when loading some screens of the application
  • Different layouts for iPad and different iPhone models
  • Difficult redesign of the application
  • No localization of the application
  • Incorrect work of tokens for authorization
  • Processing of errors of returned requests from the API not implemented everywhere
  • Configuration files used to store data, which make it difficult to work with data selection, filtering, and sorting
  • Layout is not adapted for screens of different sizes

Stage 2. Discuss with the Client and Clarify the Goal of the Project

Following our research, we contacted the client and discussed our results and work plan. During the discussion, the client clarified the technical task. Now we not only had to fix the errors of the first team, but also to develop a more advanced version of the application. Our project is a cross-platform application that can work with different operating systems.

Stage 3. Study Best Practices in the Market and Choose a Solution

Before starting development, we always study ready-made solutions. Consequently, our next step was research. Such an approach helps save the customer’s time. We don’t waste resources on knowingly inefficient solutions. Instead, we cut off the excess and invest in what will help the client earn more.

For example, to transfer the application from Android to iOS, the customer suggested using a converter. We studied it, found limitations in it, and began to think about other options. As a result, we chose Kotlin for Android and Android TV, Swift for iOS and macOS, and C# for Windows applications.

We studied different architectures and the code of ready-made applications. This helped to quickly select the best methods for solving the client’s problem.

Stage 4. Design and Develop Application Internals

First, we made a minimum viable product — an application that you can download and at least log into. To test the work under real conditions, we agreed with the customer to offer free access to users, and they were warned that we were testing the application.

A week later, we realized that there were no errors, and finalized the application. Additional functions, such as auto-connect at startup, were added, and the design was updated.

There were also some difficulties with the project. One of them was related to integration with iOS. At first, some of the data was not always displayed correctly – for example, whether the user had really subscribed or whether the trial period was still valid. This happened due to the App Store’s buyer’s authentication methods.

To fix the incorrect work, we performed several actions. One of them was to implement the ‘grace period’ function: if the user cannot pay due to technical problems of the application, we don’t block access. The application is available, but we and the user receive a notification informing us that the payment has not been received. This action helped us to not lose customer loyalty — as they were not to blame for the bug — and gave us time to find the error and fix it.

The Results: We Launched the App on Schedule, and It’s now in Demand

The app was launched in January 2021. It took us six months from first negotiations to launch in the App Store and on Google Play. During this time we released two versions: the minimum viable product (MVP) and the full-fledged one.

50k: the number of times the app was downloaded from Google Play during first 3 months.

The app already has its own audience. By the beginning of April it had been downloaded 50,000 times from Google Play alone, and this is taking into account that there are dozens, if not hundreds, of VPN solutions. For us this means that users are satisfied with the set of functions and that they are ready to work with the application.

The customer is pleased with the result and the OrbitSoft team will maintain the application until the end of the year.

Technical Features of the Project

Windows: all versions beginning from Windows 7

  • Integrated development environment of Microsoft Visual Studio 2019
  • Design development for Microsoft Expression Blend
  • C# programming language
  • Windows Presentation Foundation (WPF)
  • NET Framework 4.7.2
  • WiX toolset to create installer

iOS

  • Swift language
  • iPhone, iPad
  • Minimum version of iOS 12.0
  • Libraries: Firebase (Analytics, Messaging, DynamicLinks), Google IDFA Support, Facebook SDK, lottie, Toast-Swift, PlainPing
  • CocoaPods build system

macOS

  • Swift language
  • macOS
  • Minimum version of macOS 10.14
  • Libraries: lottie, Toasts, PlainPing, SRTabBarController (with fixes), CustomSegue, CustomButton, FLOPageViewController
  • Build systems CocoaPods, Swift Package

Android

  • API level 21+
  • Android, Android TV, Fire OS
  • Phones, tablets, TV
  • Kotlin programming language
  • Patterns used — MVVM
  • Libraries: Firebase (Cloud Messaging, Analytic, Crashlytics), Google Play Billing Library, Leanback, AndroidX, Lottie

Frontend

  • React.js
  • Vue.js
  • WordPress
  • reactstrap.js
  • rc-pagination.js
  • moment.js

Backend

  • Node.js
  • TypeScript
  • NoSQL (MongoDB)

Libraries

  • Express.js
  • Moment.js
  • Mongoose.js
  • jsonwebtoken.js