Deploying a web application into Android devices using Cordova

Step 1:
Install node.js.

Visit url: https://nodejs.org/en and download the latest version of node.js.

Proceed with the installer and install it.

After completion, you can check if node.js is installed properly by executing “npm”
command in command prompt.
Step 2:
Install Cordova.

Execute command “npm install –g cordova”.

Step 3:
Install android studio.

Visit url: https://developer.android.com/studio/install.html/ and download the latest version

of android studio.

Proceed with the installer and install it.

Note: Make sure the environment variables are properly set.
Refer below screenshot.

Step 4:
Create a folder using cordova.

Execute the following command:

Syntax: Cordova create folder_name package_name Text_for_your_application

Example: cordova create TicTacToe com.demo.TicTacToe TicTacToe

Step 5:
Add android platform

This command needs to be executed within the project's directory.

Use command “cd directory_name” to do the same.

Now execute the following command:

 Cordova platform add android

Step 6a: (optional)

Adding third party plugin

In case your app is using a third party plugin, you can add it using the below command

Execute the following command:

Cordova plugin add plugin_name

Further, there are two javascript files provided by Cordova utility to use the plugins
• Cordova.js
• Cordova_plugins.js

These two files need to be referenced in the index.html file

Use the following script to do so:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="cordova_plugins.js"></script>
Step 6b: (optional)
Adding the SAPUI5 Library to your cordova project
Skip this step if you are not planning to run the app offline.
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex">

</script>
But if you plan to run your app offline then change the sapui5 library path as shown
below.
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex">

</script>
Also down load the sapui5 library from the below url.
http://openui5.org/download.html
Extract the zip file and locate the resources folder paste the resources folder inside
below path.
Your_application_Directory \www
Step 7:
Adding files and building the .apk file.

• Add all your application files into your directory’s “www” folder.
• Add all contents of
Your_application_Directory\platforms\android\assets\www
To:
Your_application_Directory \www

Execute the following command:

Cordova build
After the build is successful, the .apk file location will be available in the command
prompt. Navigate to the .apk file.

Generally the .apk file will be available as:

Your_application_Directory /platforms/android/build/outputs/apk/android-
debug.apk

The file will have a default name “android-debug.apk”. You can even change the name of
the file.

Step 8:
Running the .apk in an emulator

Execute the following command:

Cordova emulate android

This will deploy the application to the emulator from the command line.

Alternatively, you can connect your android device directly to your system and push the
app to the device from the command line using the following command:
Cordova run

The run command will do three things :

• Generate .apk
• Transfer and install it on your phone
• Run the .apk file on the Android device
Adding your custom logo to your application
Custom icon/logo or display image can be added to you app. For doing so follow these
steps

• Download your desired image and save it as “icon.png” and “screen.png”.

• Navigate to your_application_directory /platforms/android/res and open all the
folders and replace existing icon.png/screen.png with your image/logo.
Note:Do not rename the files.

Android windowSoftInputMode
On appearance of an input box in your application, you can ensure that the keyboard
doesn’t overlaps with your content by using this mode. When using this mode, it scrolls
the application window so that the selected view is visible and shows the soft-keyboard.

To do so:

• Navigate to your_application_directory /platforms/android

• Open “AndroidManifest.xml”
• Replace
android:windowSoftInputMode="adjustResize"
with
android:windowSoftInputMode="adjustPan"