Building your first Android Phonegap application from scratch

For the past 2 days I struggled a lot to build my own android phonegap application and finally I got success. I thought of writing my experience in this page so that it can helpful for others.

Ok. Let’s start. I have a windows 7 fresh laptop with 64 bit configuration with no other specific software.

I am writing this blog on 31st August 2014 and below is the software list I would require. I believe I have all latest versions as of today.

  1. JAVA JDK 8
  2. ANT 1.9.4
  3. Eclipse Luna
  4. Eclipse ADT Plugin 23.0
  5. Android SDK 23.0
  6. Setup Android AVD
  7. Node JS 0.10.31
  8. Phonegap 3.5.0

Install JAVA JDK

Navigate to http://www.oracle.com/technetwork/java/javase/downloads/index.html and download the JDK. Since my laptop is on windows and on 64 bit, I downloaded the 64 bit executable version and I installed as a regular software installation.

Once the installation is complete do the below and ensure JAVA installed correctly.

Open a dos command prompt and execute ‘javac’ and ‘java’. Both the command should not throw any error. If you get any error like command not found then you need to check the environment variables and update accordingly.

Add a new system environment variable JAVA_HOME and point to

C:\Program Files\Java\jdk1.8.0_20

Add 2 new paths
%JAVA_HOME%\bin
%JAVA_HOME%\lib

to the system variable PATH

Once the above variables are set, open a new dos command prompt and try ‘javac’ and ‘java’ and ensure no errors are displayed.

Installing ANT

Navigate to http://ant.apache.org/bindownload.cgi and download the ANT ZIP file. Since ANT doesn’t have an installed we need to extract in a local folder and add the bin directory of ANT to PATH variable.

In my case I installed ANT in the path

‘D:\ant\apache-ant-1.9.4’

and added the same in PATH system variable

Open a new dos command line prompt and execute ‘ant’ and ensure you don’t see command not found error. If you found then you need to trouble shoot before you proceed next.

Install Eclipse IDE

Navigate to http://www.eclipse.org/downloads/ and download Eclipse. I installed Eclipse standard IDE version 4.4 for 64 bit.

Once installed launch the Eclipse and ensure you see the IDE without any problem

Installing Eclipse ADT Plugin

Since we want to develop android application we required to download the eclipse ADT plugin. Open eclipse and navigate to Help and Install software and download the latest ADT by providing the URL https://dl-ssl.google.com/android/eclipse/

Note: If you get any error while downloading try running the eclipse as ‘Run as Administrator’

Once the ADT downloaded, close eclipse and reopen. Ensure no error popup.

Installing Android SDK

Navigate to http://developer.android.com/sdk/index.html and download the standalone SDK for existing IDE. Install the SDK and make sure you don’t see any errors during installation.

Setup the platform tools and android tools in PATH variable. In my case I installed SDK inside program files and I added

C:\Program Files (x86)\Android\android-sdk\platform-tools

and

C:\Program Files (x86)\Android\android-sdk\tools

in PATH variable.

Open eclipse and navigate to windows -> preferences -> Android and ensure the SDK path is correct and also ensure Android 4.4.2 (API level 19) is listed.

Setup Android AVD

Launch Eclipse and navigate to Windows and launch AVD manager. Create a new AVD and start. I created ‘Nexus5’, API Target level 19, Intel Atom, No Skin, Front Camera none, Back Camera none, Ram 2048, VM Heap 64, Internal Storage 200, SD Card Size 8000, Use Host GPU.

Start the AVD and ensure the AVD started and able to see the android screen. It took 5 minutes for AVD to load the android home screen.
If you don’t see the android home screen, then you need to investigate further and ensure it is fixed.

Building your first Android App

Launch eclipse and create a new Android application project. In my case I created a ‘TestAndroid’ project for API 20. Click next, next, next and finish. Patience is required because it will take some time.

Since I installed android SDK under program files, I always launch Eclipse as ‘Run as administrator’. The project is now visible in eclipse on the left side. In addition to my project there is one another project also automatically created in the name of appcompat_v7.

Right click on appcompat_v7 project and select ‘Build Project’. I got few errors and when I tried building the project multiple times all those errors disappeared.

Right click on TestAndroid project and select ‘Build Project’. Ensure there are no errors on the project. If you have any errors then troubleshoot and fix that.

Right click on TestAndroid project and select ‘Run As’ android project. Wait for some for AVD to load (It is better not to close the AVD). Now I can see ‘Hello World!’ in the AVD.

The APK file is also generated under bin directory of TestAndroid project.

It works. If doesn’t then you have to fix it.

Ok. Now my laptop is capable of developing and building android applications.

Installing Node JS

Node JS is mandatory to install Phonegap. Navigate to http://nodejs.org/ and install.

Once installed open a dos command prompt and type ‘npm’ and ensure you don’t get any command not found error.

Installing Phonegap

Open a dos command prompt and install phonegap by giving the below command

npm install -g phonegap

The above command can be run from any path. In my case it is installed under

C:\Users\malai\AppData\Roaming\npm\node_modules\phonegap

Once installed, open the dos command prompt and type ‘phonegap’ and ensure you don’t see any command not found error.

Creating your first android application using phonegap

Create a folder where you want to create android application. I created a folder ‘D:\pg’ to store my android applications.

Navigate to ‘D:\pg’ and execute the below statement to create the first phonegap android application

phonegap create testpgandroid net.jeema.pg.test TestPgAndroid

The above command will create a folder called ‘testpgandroid’ and create an empty project folder structure. Ensure you have internet access because this will connect to Github to download the template.

Note: I found a bug in config.xml and I fixed it manually before processing to the next step. Open the project www folder and you can see config.xml. Open the config.xml in a text editor and locate ‘icon.png’ and replace with ‘www/icon.png’. Also search for ‘res/’ and replace with ‘www/res/’. Save the config.xml and leave it there.

Go inside the testpgandroid folder by ‘cd testpgandroid’ and execute the below command to build the android platform

phonegap run android

This will print a lot of stuff in the console. Look into that carefully and ensure no errors displayed. Ensure you see ‘BUILD SUCCESSFUL’. This will automatically open the AVD and run the project. This will take a while to load. I could see the phonegap icon in the emulator screen.

The basic project works fine.

Managing phonegap android application in Eclipse

Open eclipse and create new Android project from existing source. Navigate to testpgandroid folder and create the project.

This will load 2 projects ‘TestPgAndroid’ and ‘TestPgAndroid-CordovaLib’

Right click on ‘TestPgAndroid-CordovaLib’ project and build the project. Ensure there are no errors displayed. Navigate to bin folder and copy the testpgandroid-cordovalib.jar and paste to libs folder of ‘TestPgAndroid’ project.

Right click on ‘TestPgAndroid’ project and go to properties -> Resources and remove the resource filters. Ensure there are no filters displayed. Click on Java Build Path -> Order and Export and uncheck the Android Private Libraries.

Right click on ‘TestPgAndroid’ project and run as android application. This will open the AVD and run the phonegap android application.
Happy to see that I ran my first phonegap android application

Updating software’s

We have installed different software’s to create the first phonegap android application. Over a period of time every software will release its newer release and it is very important to upgrade our application to compatible with latest releases.

Java – This can be installed by downloading the latest from oracle website. Remember to install JDK and ensure those path variables are configured correctly

Android ADT Plugin – This can be upgraded inside Eclipse under install new software section.

Android SDK – This can be upgraded inside Eclipse under Android SDK Manager

Phonegap – This can be upgraded via npm. Just install in the same way of fresh install

Phonegap android build – This can be upgraded by the below command after navigating to the corresponding app folder

phonegap platform update android

 

4 comments

  1. Thanks for posting this, very detailed and gave me a good idea on how to get started. I just need to figure out how to include all my assets.

  2. Thanks a lot for this wonderful blog sir. Really it would be very helpful for those who wanted to learn phonegap app development from the scratch.

Leave a Reply

Your email address will not be published. Required fields are marked *