Hybrid App Development - Android Application Development using PhoneGap

If you are very new to PhoneGap application development, this post can help you to kick off android application development using PhoneGap framework. In this post, I will walk you through the steps that I performed to setup the environment to develop PhoneGap based android application on Windows machine. I am using Android Studio as IDE to develop, test and run the android applications.

If you would like to see the steps in video, you can refer my video attached below:

Below are my other posts related to Android Application Development:

• Creating First Android Application
• Creating First Android App using Android Studio
• Tab Based Application 

About PhoneGap:

PhoneGap is mobile development framework. It facilitates developers to build mobile application using JavaScript, HTML5 and CSS3. This framework is owned by Adobe and open sourced as Apache Foundation Project named ‘Apache Cordova’. Mobile applications which are developed using PhoneGap called Hybrid Apps. These applications are not fully native in nature. These apps use native web view type elements to display application resources. Hybrid Apps can be run inside a device native container where devices browser engine is used to render HTML and process Java Scripts. The major benefit of this framework is, same HTML5 code base can be used by projects developed for different OS like iOS, Android etc. You just need to do minor platform specific changes in these files to run on different OS based devices.

That's enough about PhoneGap, there is plethora of options on net that you can refer to get more detail on PhoneGap framework, it's history, it's pros/cons etc. Let's start with steps to develop first hybrid application.

Prerequisites

I assume you already have android application development environment setup (JDK, Android SDK, Android Studio). don't you? If you don't, please refer this link (at least step-1, 2 and 3.B) to setup Android SDK and then install Android Studio using this link. Also, install Apache Ant by following this link.

Before going ahead, ensure that you have setup below environment variables:

• Defined JAVA_HOME and added '%JAVA_HOME%\bin' to PATH
• Added path to your Android SDK platform-tools and tools directory in PATH variable, i.e. <SDK_DIR>\platform-tools;<SDK_DIR>\tools
• Defined ANT_HOME and added '%ANT_HOME%\bin' to PATH

Installing and Setting up PhoneGap Framework

1. Download PhoneGap from here and extract. At this point of time, I downloaded PhoneGap-2.9.1.

2. Now you need to generate cordova.jar. In a terminal window, navigate to '<PhoneGap-

    2.9.1>\lib\android\framework' directory and run below comman:

   <PhoneGap-2.9.1>\lib\android\framework>android update project -p . -t android-21

   And then run below command:

   <PhoneGap-2.9.1>\lib\android\framework> ant jar

   This command will generate the cordova-2.9.1.jar file under directory <PhoneGap-

   2.9.1>\lib\android\framework\cordova-2.9.1.jar

   

Creating PhoneGap Project

1. To create the PhoneGap project, In a terminal window, navigate to '<PhoneGap-

    2.9.1>\lib\android\bin' directory and run below command to create the project:

   create <project_folder_path> <package_name> <project_name>

2. Now you need to import project into Android Studio. Open Android Studio and select the option 'Import non-Android Studio Project' to import your created project. 

3. Once your project is imported successfully, open the index.html file and add any html element inside body tag say any header tag to display your text. 

4. Its time to run the project. Ensure that you have setup AVD (Android Virtual Device) to run the project. If you didn't, you can refer my other post to setup AVD. 

Now click the run button shown in below image and wait till your AVD is launched. Once AVD is launched, unlock the screen and see your running application with the text that you have added in index.html.

I hope this post helped you out creating your first PhoneGap based android application. Please provide your feedback to improve this post further.

!! Happy Android Application Development !!