Using PhoneGap Developer App to develop and test apps

As we all know PhoneGap allows us to develop apps for different platforms(iOS, Android, Windows Phone, etc.) using languages like JavaScript, HTML5 and CSS3. Developers can use the same code base to build app for new platform, leading to less time to market.

The painful part of app development with PhoneGap is to test an app you have to build the app and deploy it on the device attached to your machine. After every single change you got to repeat this process. PhoneGap Developer App(http://app.phonegap.com/) alleviates this pain and provides a way to develop and test apps on your device at the same time without needing a build.
PhoneGap Developer App is available for all major mobile platforms

Now lets see how does it work and make testing apps really a breeze.
(Prerequisites- Node.js. See how to install Node.js on Windows for more information.)

Install PhoneGap Developer desktop app.

Open node.js command prompt and enter following command to install PhoneGap package.

npm install phonegap -g

Screenshot 2014-05-11 19.59.09

Download PhoneGap Developer mobile app on your device.

I am using my iPad air to test the app.
IMG_0966
When you open the app, it will greet you and show default settings.

Create an app

Following command on node.js prompt will create an app named “helloPhoneGap”

phonegap create helloPhoneGap

Screenshot 2014-05-11 20.38.58

Start PhoneGap local server.

cd helloPhoneGap
phonegap serve

Screenshot 2014-05-11 20.43.15
Now you need to point your device to 192.168.1.4:3000

Link your device.

Make sure your device and development machine are connected to same network and your firewall is not blocking any external connection. In my case both are connected to same wifi network.
Enter the above IP address and port in your Phonegap Developer app on device, connect and bam!

Your app is running on your device 🙂

Okay, lets change something in our app. Go to helloPhoneGap\www folder and change the text “PhoneGap” to “My First PhoneGap app” in index.html file.

Yes! the changes got reflected in the device immediately without any recompilation.
IMG_0974

So, you can see the power of this magical app. Go ahead and use it for your projects and share the experience. Thanks for reading my post, Happy Programming!