WitVPN
Powered by WitDoc

Getting Started

We would like to thank you for your trust and use WitVPN apps. Application WitVPN works on a separate server, which we use here is google vm instance and attached is openvpn. As you know openvpn is a widely used application all over the world but it is difficult to install, here we will guide you to install openvpn quickly. Accompanying it is firebase, Firebase is a cross-platform application developed by google. Here, we use firebase as a server API, to manage the list of servers, users. And to start, we will install the openvpn server.

Setup OpenVPN Server

1. Create Google VM Instance

The Openvpn server runs on many different platforms, but here we are using the Debian / Linux platform. To install Debian, please refer to the video below:
https://youtu.be/kqpCIuIGtYI
After installation is complete, please go to the next step which is to install the openvpn application

2. Setup OpenVPN Server

As you all know, to install the application openvpn server, it takes quite a lot of time to type commands and configure the server. Here, WitVPN provides you with a script file, just need to execute the file, we can install openvpn server quickly. Please refer to the video below:

https://youtu.be/RHOlpE9dDhA
In it there are scripts such as:
$ sudo chmod +x openvpn.sh 
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext
This command allows the operating system to view this file as an executable.
$ sudo ./openvpn.sh
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext
This command is used to execute openvpn file. In case you do not have openvpn installed, the build will guide you through the configuration settings
1. Public Ipv4 address / hostname:

2. Which protocol should openvpn user?:

3. What port should OpenVPN listen to?:

4. Select a DNS server for the clients:

5. Enter a name for the fitst client:
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext
1. This is your public server IP.
2. Choose the protocol by which openvpn works, here we will give the suggestion as UDP protocol.
3. The port that you use for the client to connect to the openvpn server, we will default to 1194, but you can enter another port.
4. The place where you choose domain name resolution service, here, we recommend you to leave number 2 as Google.
5. The last step when executing the file openvpn.sh, the application will generate a cert for the client to connect to and here is the WitVPN application.
After installation, you should check and start the openvpn service with the command:
$ sudo service openvpn start
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext

Open Google Firewall Port 1194

Next is that you have to open port 1194, because by default, google only allows external connections via port 22 which is port ssh. Below is a video that instructs you to open port 1194 (1194 is the port you entered when configuring openvpn server above).
https://youtu.be/gyZv4puxgvc

3. Setup Client OpenVPN

Finally, you create the file for the client to connect to (with the extension ovpn). Here is the video tutorial

https://youtu.be/bwh333d3Kso

4. Multi OpenVPN Server

Repeat the above steps to create more vpn servers globally. Note that when you create Google VM Instange, please choose another area to diversify server for your application.

Setup CMS Admin

In WitVPN, we provide you with CMS Admin, it is a website used to administer, along with that, we also statistic chart for you daily, monthly or the amount of data that people User used through the app. And to save time, we have used Firebase services, including: Firebase Cloud Firestore, Firebase Hosting, Firebse Cloud Function. Firebase Authenticate
I. Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. ... Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions
II. Firebase Hosting is production-grade web content hosting for developers. With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network)
III. Cloud Functions for Firebase is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests. ... Learn more about how Firebase fits into the picture.
IV. Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more

1. Config Firebase Hosting

Firebase hosting supports multiple sites on a single Firebase project. There are many use cases for this awesome feature. For example, you can deploy a staging build of your website to test it first before deploying it to production. You can also host both your customer and admin websites on a single Firebase project.

Install Firebase CLI

Install Firebase CLI to your machine if you have not done so.
$ npm install -g firebase-tools
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext
Login to your Firebase account. A new tab should appear on your browser which will log in to firebase.
$ firebase login
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext

Setting up Firebase

Run this following command on your CLI on the root directory (root > firebase > hosting) of the WitVPN to add Firebase hosting configurations to the project.
$ firebase init hosting
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext
These are the inputs that I have given to firebase. You can select different options if you are not using the WitVPN
There should be 2 new files created on the root directory of your project (.firebaserc and firebase.json).
Select an Image

Add Firebase to your web app

To add Firebase to your app, you’ll need a Firebase project and a short snippet of initialization code that has a few details about your project.
1. Create a Firebase project in the Firebase console.a. If you don’t have an existing Firebase project, click Add project and enter either an existing Google Cloud Platform project name or a new project name.b. If you already have apps in your project, click Add Another App from the project overview page.
2. From the project overview page in the Firebase console, click Add Firebase to your web app.
3. Copy and paste your project’s customized code snippet in the tag of your page, before other script tags.From your project page in the Firebase Console, select “Add Firebase to your Web App”. This opens a dialog window that asks for your app’s App nickname. 'It also asks for an optional Also setup Firebase Hosting for this app', which you can keep blank.
Click Register app and see the result:
Select an Image
Click Copy, then paste the code snippet into your .env in root directory (root > .env). The code snippet should look like this:
Select an Image
API_KEY: "apiKey"

AUTH_DOMAIN: "authDomain"

DATABASE_URL: "databaseURL"

PROJECT_ID: "projectId"

STORAGE_BUCKET: "storageBucket"

MESSAGING_SENDER_ID: "messagingSenderId"

APP_ID: "appId"

MEASUREMENT_ID: "measurementId"
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext

2. Config Firebase Cloud Function

Recently Google's Firebase introduces a new functionality which is called Cloud Functions. With this new service Firebase offers a scaleable solution for running back-end code in the cloud. Running code in the cloud has various advantages: You do not need to run and maintain your own server. Before deplop firebase functions, please take a look below

Change Database URL

1. Goto Service Account in Firebase setting and copy data
Select an Image
2. Replace it in cloud function (root > firebase > cloud functions > index.js)
Select an Image
Next step please see a video tutorial on how to create a firebase cloud function:
https://youtu.be/s6iUqv_jqmI
After you deploy, depending upon the trigger, for me it was function.https.onRequest so I get a URL, you can get the URL through the console as well.
Select an Image

3. Deploy to Firebase hosting

1. Click Copy URL, then paste the code snippet into your .env in root directory (root > .env). The code snippet should look like this:
API: https://"youdomain".cloudfunctions.net/
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext
2. Edit fibrease.json in root directory (root > firebase.json)
{
    "hosting": {

        "public": "build",

        "ignore": [

            "firebase.json",

            "**/.*",

            "**/node_modules/**"
        ],

        "rewrites": [ {

            "source": "**",
            
            "destination": "/index.html"
        
        }]
    }
}
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext
Select an Image
NOTE: IF YOU ARE USING WINDOWS, PLEASE FOLLOW SOME STEP BELOW:
I. Install rimraf
$ npm i -g rimraf
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext
II. Change clean-dist command in package.json
"clean-dist": "rimraf build"
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext
See image below:
Select an Image
3. We run the following command on our CLI to add a target name to a hosting resource on Firebase.
$  yarn && yarn build && firebase deploy
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext
The final result after you deployed successfully:
Select an Image

3.1 Deploy to Custom Hosting

https://youtu.be/FitJlRV5FAs
How to upload CMS Admin to Custom Hosting

4. Enable Firebase Authentication

1. It time to explore the Firebase Authentication now,enable whatever Sign-In-Method you’ll like to use
Select an Image
2. Access the url you just deployed to firebase (After deploying the URL is usually printed on the last line. As shown in the picture is: https://wit-vpn.web.app) to create User Admin.

5. Generate List Item Server VPN For Mobile

Below is a video tutorial on how to create a item server on cms admin
https://youtu.be/Aqdvv8FCMNk

Setup Android Mobile 

1. Setup Firebase Project for Android

From your project page in the Firebase Console, select Add Firebase to your Android App This opens a dialog window that asks for your app’s Package name,and the Debug signing certificate SHA-1. It also asks for an optional App Nickname, which you can keep blank.
Select an Image
For the package name, paste in your package name, mine is app.witwork.vpn so it matches the package name from the your android project. You can find this in your app's AndroidManifest.xml file.

2. Getting the Debug Certificate

You’ll need to add the debug signing certificate too ,which is optional.The SHA-1 is a type of hash representation for the debug keystore. You can do this by going to the gradle at the right side of your project screen.Select app > android > signInReport.Select the string of numbers and colons after the line that’s labeled SHA-1 and copy it. Then paste it in the dialog back in the Firebase Console.
Select an Image

3. Add google-services.json

Once you click Register App, a google-services.json file should download automatically. The google-services.json file connects your client-side app with your specific Firebase project that will handle the server-side components of your app. Once the download is complete, move the google-services.json file to the app directory of the your project. In Android Studio, you can select the Project view in the top-left corner of the Project navigation view, and then open the app directory. You can then drag the google-services.json file into the Android Studio project. You should end up with a project file tree like the following screenshot.
Select an Image

4. Onesignal Push Notification

Add the following in your android > defaultConfig section. Update PUT_YOUR_ONESIGNAL_APP_ID_HERE with your OneSignal App id
How to get OneSignal App Id: Read more
android {

    defaultConfig {

        manifestPlaceholders = [

            onesignal_app_id: 'PUT_YOUR_ONESIGNAL_APP_ID_HERE',

            // Project number pulled from dashboard, local value is ignored.

            onesignal_google_project_number: 'REMOTE'

        ]

    }

}
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext

5. Google AdMob

Add the following in your android > productFlavors section. Update PUT_YOUR_GOOGLE_AD_MOB_APP_ID_HERE with your OneSignal App id
How to get Google AdMob ID: Read more
android {

    product {

        dimension "version"

        resValue("string", "ADMOB_ID", "PUT_YOUR_GOOGLE_AD_MOB_APP_ID_HERE")

    }
}
↓
Auto-detect
Apache
Bash
C#
C++
CSS
CoffeeScript
Diff
Go
HTML, XML
HTTP
JSON
Java
JavaScript
Kotlin
Less
Lua
Makefile
Markdown
Nginx
Objective-C
PHP
Perl
Properties
Python
Ruby
Rust
SCSS
SQL
Shell Session
Swift
TOML, also INI
TypeScript
YAML
Plaintext

6. Google Play Create a Subscription

Review our updated Subscriptions Policy in the Developer Policy Center to ensure your app is compliant with the latest changes.
Using Google Play Billing, you can offer in-app products that charge users for content or services on a recurring basis, known as subscriptions. Subscriptions can include items like a collection of apps, games, or other content for a recurring fee within your app on Google Play. You can offer multiple subscriptions within the same app. Subscriptions must be priced within accepted prices ranges. Subscriptions can't be unpublished.
You can also create a managed product, which charges users on a one-time basis. Important: Google Play Developer Program Policies and transaction fees apply to in-app products, including both managed products and subscriptions.

Availability

If you're in a supported location for merchant registration, you can use Google Play Billing.
If you’re in a supported location and want to start using Google Play Billing features in your apps, set up a payments profile and review the Google Play Billing API documentation.
After you create a subscription, it’s available for users running the latest version of the Google Play Store.

Subscription & free trial time periods 

- 1 month
- 3 months
- 6 months
- Annual

Add a subscription to your app

Adding a subscription is similar to adding a managed product, except the price is set for a period of time.
Before creating a subscription, make sure to plan your product IDs carefully. Product IDs need to be unique for your app, and they can’t be changed or reused after they’ve been created.
- Product IDs need to start with a lowercase letter or a number and must be composed of only lowercase letters (a-z), numbers (0-9), underscores (_), and periods (.)
- Note: The product ID android.test is unavailable for use, along with all product IDs that start with android.test
Before adding a subscription, review Google Subscriptions Policy at: https://support.google.com/googleplay/android-developer/answer/9900533
To add a subscription:
1. Sign in to your Play Console.
2. Click All applications All applications.
3. Select an app.
4. On the left menu, click Store presence > In-app products > Subscriptions.
5. Click Create subscription.
6. Enter your product details.
Title: A short name of the item (up to 55 characters, but we recommend limiting titles to 25 characters to display properly in all contexts), such as 'Sleeping potion.'
Description: A long description of the item (up to 80 characters), such as 'Instantly puts creatures to sleep'.
Benefits: Provide up to 4 benefits, which each describe a feature of the subscription (up to 40 characters each)
Benefits should highlight the features to give users a better idea of what your subscription offers, like “Full catalog of TV shows and movies.”
Since not all users will be eligible for a promotional price or free trial, the benefit should not mention free trial or price, for example “Try 7 days free” is not allowed.
Price: Enter a price in your local currency.
7. Next to “Status,” choose Active or Inactive.
To be available for purchase, a product needs to be active, and its app needs to be published.
If you’re using a test account, active items are available in unpublished apps. To learn more, go to our Android developers site at: https://developer.android.com/google/play/billing/test#billing-testing-real.
8 Click Save.
To learn more, go to Google Console at: Read more

7. Add Config To Cloud Firestore

Config Google AdMob.

Firebase > create "configs" collection
Select an Image
Firebase > configs > create "ads" array
Please replace ADMOB_ID with your ID in your Google AdMob
Select an Image

Config Google Subscription Product ID

Goto exits configs ID and Add Field
Please replace PRODUCT_ID with your ID in your Google Console
Select an Image
Result after create configs collection:
Select an Image
Final Step:
Create a composite index: Firebase > Cloud Firestore > Indexes tab > Add Index button
1. Type Collection ID: Servers
2. Fields to index:
- status
- premium
3. Query scopes: Collection
Select an Image

SETUP iOS MOBILE

1. Setup Firebase Project for iOS

From your project page in the Firebase Console, select Add Firebase to your iOS  App This opens a dialog window that asks for your app’s  Bundle Id.
Select an Image

2. Add google-services.json

Once you click Register App, a google-services.json file should download automatically. The google-services.json file connects your client-side app with your specific Firebase project that will handle the server-side components of your app. Once the download is complete, move the google-services.json file to the app directory of the your project. In Android Studio, you can select the Project view in the top-left corner of the Project navigation view, and then open the app directory. You can then drag the google-services.json file into the iOS    project. You should end up with a project file tree like the following screenshot.
Select an Image

3. Add  In app purchase to Cloud Firestore

Please create as model iap-ios
Select an Image
Final Step:
Create a composite index: Firebase > Cloud Firestore > Indexes tab > Add Index button
1. Type Collection ID: Servers
2. Fields to index:
- status
- premium
3. Query scopes: Collection
Select an Image

SERVICE POLICY

 ⁃ The Support Policy describes what support you can expect from us in regards to WitWorkApp Service. If you have questions about this Support Policy or do not agree with it, please contact us via emai hello@witwork.app . We may amend this Support Policy from time to time, so check this page to ensure that you are aware of any changes. This Support Policy is effective from 1 January 2021. 
 ⁃ With regular license, you will receive 3-month support service
 ⁃ With extended license or installation packs (basic, advance, pro), you will receive 6-month support service
 ⁃ If you want to extend support service, you can buy a 6-month pack valued 100USD  
 ⁃ We only support our Products, sold on CodeCanyon or by us directly. Our Support Service includes assistance and guide with Product installations, configuration, and use. 
 ⁃ We will fix any defects in our Products as quickly as possible after they are brought to our attention. We will also try to provide a solution via our Skype for smaller defects or errors as a precursor to a more substantial update to the particular Product as part of our scheduled Product updates. If you think you have found a bug, please let us know. Please notice that we will not take responsibility with any bugs caused by your or Third Parties’ modification in our products
 ⁃ We don’t take responsibility of any issue relating to admob or ads banners excepted to Pro pack clients. Because they are caused by your wrong configuration or Ads providers
 ⁃ When you buy our products relating Tiktok. You accept a risk from App Store, Play Store and Tiktok which is a common issue of community.
 ⁃ Refunds are only authorized if our system doesn't work and we can not fix it. Besides, refund is not authorized when App Store, Play Store and Tiktok BARRIER community by banning, changing API - algorithm - output data …
-  We don't take responsibility of any issue if our source code is changed by clients