Creating an Android Application with PhoneGap

phonegap-logoPhoneGap is an open source mobile framework that enables you to create cross-platform apps that run on various mobile devices including iOS and Android. You write your web app in HTML, JavaScript and CSS, and PhoneGap helps you to turn it into native apps, most likely Android or iOS.

There are two ways to make your web app into an Android app using PhoneGap. One is a no-pain ultra easy way, and another way is a manual way using Cordova CLI with an Android SDK.

Option 1: Android Apps with PhoneGap Build

Using PhoneGap Build is absolutely painless. All you need to do is zip up your web app, upload it to Adobe PhoneGap Build cloud, and the service takes care everything for you. You don’t even need to download and set up SDK or emulators.

  • Write a web app
  • Zip it up
  • Upload the zip file to PhoneGap Build cloud. Click Ready to Build. Edit the name of the app and upload an app icon too.
  • Download the apk and install it on your phone

Option 2: Full Development with PhoneGap Cordova CLI

You can install Cordova command-line interface (CLI) tools and Android SDKs for full development with taking advantage of the plugins that enable for you to use hardware APIs, push notifications and more, and debugging.

PhoneGap Requirements for Android Development:

  • Install the Java Development Kit: Download the Java Development Kit and install it.
  • If on windows, Set up the JAVA_HOME system variable:
    a) Select Start menu > Computer > System Properties > Advanced System Properties.
    b) Open Advanced tab > Environment Variables.
    c) Add a new system variable JAVA_HOME that points to your JDK folder, for example C:\Program Files\Java\jdk1.7.0_21.
  • Add the JAVA_HOME bin path system variable to the PATH variable:
    a) Select Start menu > Computer > System Properties > Advanced System Properties.
    b) Open Advanced tab > Environment Variables.
    c) Select the PATH system variable
    d) Click edit
    e) Add the following to the end of the variable: “;%JAVA_HOME%\bin”
  • Install Android Studio/Android SDK
  • Ensure you have the android sdk tools and platform-tools folder in your PATH variable
    a) Select Start menu > Computer > System Properties > Advanced System Properties.
    b) Open Advanced tab > Environment Variables.
    c) Select the PATH system variable
    d) Click edit
    e) Add the following to the end of the variable: “;%Android SDK%\platform-tools;%Android SDK%\tools” where %Android SDK% is the path to your android sdk location, normally “C:\Program Files (x86)\Android\android-studio\sdk”
  • Download and extract Apache Ant
    Make sure that you have the following set in your advanced system properties, environment variables.

    System variables:
    a) ANT_HOME: download-path/apache-ant
    b) Path: %ANT_HOME%\bin

  • Download and install NodeJS from the NodeJS Website
  • Install PhoneGap and Cordova: Install PhoneGap and Cordova by executing the following command from the command line: “npm install -g phonegap” and “npm install -g cordova”
  • Set Up Android Virtual Device:
    Use Android Studio to launch the Android Virtual Device manager or from the command line (Windows or Linux), run the command “android avd” to launch the Android Virtual Device manager. We will use this to set up a virtual Android device on which our app will be emulated.

Create a PhoneGap Android Project

You can create a new Cordova project by running:

cordova create hello com.example.hello HelloWorld

You can then add a platform (specifically Android in this case) by running:

cd hello
cordova platform add android

And finally, you can run an Android emulator (using the virtual device you set up previously) by running the command:

cordova run android

Cordova will then start up the Android emulator using the device you’ve just created, and once it boots, it will install and launch the app. When it finishes launching, you can exit everything and begin editing the code inside the main “www” folder, and then rerun the “cordova run android” command to test it out.

Below is the final output.

phonegap_output

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s