How To Build Hybrid Mobile Application Using Cordova On Cloud

In this tutorial, I am going to setup Cordova on Cloudways. Next, I will build an hybrid mobile application on Cloudways using Cordova and deploy it on an Android phone. Let’s get started.

What is Cordova

Apache Cordova provides a set of APIs that enables you to develop an application using HTML, CSS and JS. Cordova has a command line interface where you can develop applications for Android,IOS, Windows Phone and other mobile OS.

Before setting up Cordova, make sure you have launched a PHP Stack Application on Cloudways. If you don’t have account on Cloudways Sign Up Now.

Once done, you will be redirected to Launch a new server instance. From the drop-down menu, select PHP Stack.

Fill in the Application name and Server name.

Next, select the hosting provider and the server location nearest to the users and click Launch Server.

Wait for Cloudways to setup a server for you.

Setting Up Cordova On Cloudways

Setting up Cordova on Cloudways is quite easy. Following are the prerequisites for the process:

1. JDK
2. Android Environment
3. Cordova

Make sure that you are signed in to your Cloudways account. On the platform, launch ssh terminal and then head to public_html folder of the PHP Stack Application.This is the folder where Cordova would be set up. Now use the following command to reach the folder:

1	cd applications/<foldername>/public_html

Now in this folder type the following command to install Cordova.

1	npm install cordova

Wait for npm to finish installation for cordova. Once the installation finish, go to private_htmlfolder using the following command.

1	cd ../private_html

In this folder, I will setup JDK, Android Environment and set up their HOME_PATHS. Now, type the following command to download JDK in this folder.

1	curl -L -C - -b "oraclelicense=accept-securebackup-cookie" -O http://download.oracle.com/otn-pub/java/jdk/8u101-b13/jdk-8u101-linux-x64.tar.gz

Once the download finishes, type the following command to un-tar the file.

1	tar xvzf jdk-8u101-linux-x64.tar.gz

Next, setup the JAVA_HOME path for Cordova. Type the following command to access the JDK folder

1	cd jdk1.8.0_101/

Type following command to get the full path for JDK.

1

pwd

Copy the full path, paste it after JAVA_HOME and press Enter

1 2	export JAVA_HOME=<your JAVA path> export PATH=$PATH:$JAVA_HOME/bin

Now let’s install Android Environment. For this, type the following command to go back to private_html folder.

1

cd ../

Go to the Android Studio download page, scroll down to the end of the page where it says Get just the command line tools and copy the URL for Linux Android.

Now in ssh, type the following command to download it to private_html folder.

1	wget https://dl.google.com/android/android-sdk_r24.4.1-linux.tgz

Now type the following command to un-tar the file.

1	tar xvzf android-sdk_r24.4.1-linux.tgz

Type the following command to go into the Android folder

1	cd android-sdk-linux

Type the following to command to get the full path for the folder

1

pwd

Now type the following command to set ANDROID_HOME path.

1 2	export ANDROID_HOME=Your Android Path export PATH=$PATH:$ANDROID_HOME/tools/

Next, update android tools so that it can install android SDKs and its tools. Type the following command to update it.

1	android update sdk -u

Wait for Android to update its SDK and platform tools.

At this point, all the requirements for Cordova are in place. It is time to create a startup app using Cordova and build an Android app.

Creating A Demo Cordova App

Type the following command to access public_html folder where Cordova is installed

1	cd ../../public_html

Let’s add a path for Cordova bin folder to the pre-defined PATH so I can use Cordova CLI directly. Type the following command to go into Cordova bin folder.

1	cd node_modules/cordova/bin/

Now in the folder, type the following command to set up Cordova’s path

1	export PATH=$PATH:$(pwd)

Next, type the following command to go back to root of public_html and create a project with the name firstapp

1 2	cd ../../../ cordova create firstapp

Type to following command to go to the app folder.

1	cd firstapp

Let’s check this app in the browser. Open the staging URL of PHP stack application where you are creating the app. Add the following line to the URL

1	firstapp/www/

Once you hit Enter, you will see the Cordova Hello World page.

Now that the Hello World Cordova app is up and running, it is time to connect it to Android platform and create the apk file for it.

In the firstapp folder, type the following command to add Android platform to the Cordova app.

1	cordova platform add android

Once the command finishes its process, type the following command to build the Android app

1	cordova build android

Wait till Cordova finishes building the Android application. Once done, head to the folder which appears after the process finishes.

Now .apk has been created. Download it on your phone using FilleZilla and run it.

This is the first screen that appears when the app launches. This means that the app has been created without any issues.

Conclusion:

In this tutorial, I started with setting up Cordova on cloud, built a hybrid mobile app and deployed it to an Android phone. In case of any questions or suggestion, feel free to comment below.