Setting up Phonegap 3.0 Project with Netbeans – Android

Since the launch of phonegap 3.0+ , phonegap has changed its entire build process. It has been more modular,easy to update and platform independent. Netbeans has been quick to make changes to it’s IDE to adapt to these changes. In this blog post, we will see how to setup a cordova application in netbreans, deploy it, debug it, configure plugins etc. Right now NetBeans is the best IDE for phonegap and HTML5 app development as per my opinion. It has support for less, HTML5, javascript code completion, etc

Before starting, i am assuming that

1. You have installed cordova 3.0+ using npm as given here http://phonegap.com/install/

2. You have installed Android SDK and Tools

3. You installed netbeans 7.4+ with HTML5,PHP Support.

Create a New Phonegap Project

Click on File -> New Project and then select Cordova Application.

Just go through all the steps and click on Finish. This will setup your basic phonegap application. In the site root folder, can start working on your HTML5 App.

Build and Run a Cordova Application

To Build and Run the project, select the Run Button on top, select your Run Type and that’s it.

1. If you want to run a project on simulator. You need to run the AVD Manager yourself. Open the andriod installation folder (C:\Program Files (x86)\Android\android-sdk) and run AVKManager.exe from there. Create & Start of your choice from there. Netbeans will automatically connect to the AVD device when your run your project. Unlike eclipse you need to manually run the AVD before you run the project.

2. If you want to run your project on a mobile device, simple connect with a USB device and enable developer options on your phone. Netbeans will automatically connect with your phone.

Debug Phonegap Application in Netbeans

Once you have successfully deployed your project, you need to be able to debug it. For this you need to use the DDMB tool which comes with android SDK. Open the tools folder inside your android sdk installation (C:\Program Files (x86)\Android\android-sdk\tools) and run the moniter.bat file from there. It will run the DDMS tool, same as eclipse.

netbean-run-type

This tool will automatically connect to your phone or simulator and logcat will start showing the phone log. To efficiently the log’s of your application you need create filters in logcat, to separate the general phone logs and your application logs.

DDMS Filter for effective phonegap logs

To create filter first you need to find your application id. You entered it when you first created your project. If you don’t remember it open the config.xml file in your www folder. You see id=”com.coolappz.HTML5Application” or your project name there, this is your application id.

1. Application Filter

Once you have your app id create a filter in logcat, and in the “by Application Name” field put your application id and give a name to the filter. Here you will see all logs relating to your application.

2. CordovaLog Filter

If in your javascript code, you use console.log and what to see the output in logcat. Create a filter with “by Log Tag” as CordovaLog. This will show you only console.log messages.

3. Cordova Plugin Filter

If you have installed/created any cordova plugin and what see only its log then create a filter with “by Log Tag” and write plugin classname/tagname there. Now how to get the class/tag of a plugin? Open the source code of the plugin and locate the main plugin file where the execute fuction is written. There you will see statments like


Log.d(TAG,"test application");

You need put the value of TAG in the logcat filter.

This are the 3 tags which you need to effectively do debugging of your application.
log_cat_createfilter
TIP: In DDMS log, you cannot view output of your json object. If you console.log an json object it will simple show “Object” in your logcat. To overcome this, simple use JSON.stringify() before doing a console.log()

Adding cordova plugins through netbeans

To adding any phonegap plugin in netbeans, open your project root folder in windows explorer. Then open the folder “nbproject” in it. Open the file plugin.properties in any texteditor. There you will see


# This is a list of plugins installed in your project
# You can delete or add new plugins
#
# Format is following:
# name.of.plugin=url_of_repository
#
# This list contains all core cordova plugins.
#
# For more information about plugins see http://cordova.apache.org/blog/releases/2013/07/23/cordova-3.html
#
org.apache.cordova.device=https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

So you can add any plugin you want in this file, and netbeans will automatically download and install it to your application.

You need the plugin id and plugin git path. To get the plugin id, open the plugin.xml file and copy the plugin id from there.

I think, these basic insights will help you to quickly setup and run a phonegap application on netbeans effectively.