PhoneGap Developer App

This post is more than 2 years old.

At the end of last week a really interesting new PhoneGap tool was launched - the PhoneGap Developer App. The PG Developer App is a "shell" application that you can install on a real device (both Android and iOS with Windows Phone coming soon) and test with a local copy of your code. You can skip the SDK. You can test iOS on Windows. All you need is the core PhoneGap CLI and you are good to go. Let's take a quick look.

First - ensure you have installed the phonegap CLI via npm. Ensure you have the latest version (see my guide if you are new to npm) and then create a new project.

At this point you do not have to add a platform. Next - fire up the server:

Make note of the IP address. It should be obvious, but this tool requires that your mobile device be able to "see" your development machine. If you aren't on the same network (or on one of those cluttered free WiFi networks) you may have an issue. Ok, now, run the PhoneGap you downloaded to your device. Here's mine running on my iPhone.

Simply enter your IP address and hit connect. What you're seeing now in the app is the code from your project. If you switch back to your command prompt, you can see a butt load of messages - essentially an access log of requests. Fire up your favorite editor, make a change, and just click save.

It should update automatically, but if it doesn't, try a four finger tap. But to be clear, you do not have to go to the command line and run anything. It just - plain - happens.

Another interesting feature of the Dev App is that will automatically load all the core plugins. So if you want to test the Camera API, you just do it. No need to install the plugin manually. This is cool... but I kinda worry it may trip people up when they stop using the Dev App. I tend to be a worry wart though.

Another issue is that you cannot use remote debugging with it. By that I mean Safari Remote Debugging or Chrome Remote Debugging. Weinre works fine with it though.

So - thoughts? I've said before that I tend to focus on the Cordova CLI, especially when I teach, but I definitely see me demonstrating this next time I present on PhoneGap/Cordova.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Adam Harris posted on 4/22/2014 at 1:45 AM

Thanks for explaining how the plugins work with it. I was wondering about that. Unfortunately, since I used a lot of third party plugins, I won't be able to use this...

Comment 2 by Shazron posted on 4/22/2014 at 3:17 AM

Adam - not to worry, we'll open source the app soon enough (later today?), so the live reload functionality could be integrated into your own app...

Comment 3 by Sebastien posted on 4/22/2014 at 9:50 AM

Hi, thanks for the blog post! You guys can also use the GapReload plugin I wrote if you enjoy a Live Reload kind of workflow. There also is a Grunt task for it.

https://github.com/fingerpr...
https://github.com/fingerpr...

Comment 4 by Adam Harris posted on 4/22/2014 at 6:46 PM

That's great news, Shazron! And Sebastien, your plugin looks really awesome!

Comment 5 by Tom Wilson posted on 4/22/2014 at 7:38 PM

What happens on reload? Does the entire app get refreshed and then you start over in the deviceready event from the first page?

Comment 6 by Raymond Camden posted on 4/22/2014 at 7:40 PM

Yes, so if you were doing something like Angular and were deep in a view, then it is going to reset. But - there is a flag to disable autoreload if you want.

Comment 7 by Sebastien posted on 4/22/2014 at 8:57 PM

@Tom: Not using GapReload, you stay right where you were :)

Comment 8 by Raymond Camden posted on 4/22/2014 at 10:11 PM

Oh? It will reload assets but keep you at the current URL?

Comment 9 by Sebastien posted on 4/22/2014 at 11:31 PM

Yes it will as it actually is based on Live Reload (http://livereload.com/). I did not test it with `$ phonegap serve` yet as the command is pretty new and I originally designed the plugin to work with `$ cordova serve` (but my guess is it should work the same, maybe even out of the box if I'm lucky).

Comment 10 by Raymond Camden posted on 4/23/2014 at 12:12 AM

So wait - I can be in some particular view in Angular, edit the HTML of that partial, and your app reloads it in such a way that Angular isn't doing a complete reload, just changing the HTML?

Comment 11 by Sebastien posted on 4/23/2014 at 1:10 AM

Live Reload won't just reload the HTML template, it will do a full page refresh, but as long as you use {insert your favorite JS MVC framework name here} routing features you will be able to stay where you were (kind of).

That said, Live Reload won't do a full page refresh if you modify a CSS file, it will inject the new rules on the fly and this is really handy.

Comment 12 by Raymond Camden posted on 4/23/2014 at 1:30 AM

... oh... so it *is* just reloading? So I should point out - I didn't test the PG thing with a URL fragment being used so it may actually work the same then. I should whip up a quick jQM app to see.

Comment 13 by Qi posted on 4/23/2014 at 5:23 AM

Hi, how's going if plugins get updated then or I want to test some specific version for a plugin?

Comment 14 by Raymond Camden posted on 4/23/2014 at 5:29 AM

Then you probably want to do it the "hard" way - which honestly isn't that hard either.

My opinion - and this may change(!) - is that this is a *kick ass* way to quickly test things out, become introduced to the platform in general - but that you probably want to start building things locally later on. Know what I mean?

Comment 15 by sime posted on 4/24/2014 at 5:24 AM

I'm using the Camera API and a standard `cordova run android` works with the Camera API, but the Developer App doesn't seem to be able to launch the Camera chrome.

I tried looking at `adb logcat`, but I'm at a loss at how to debug this.

Comment 16 by Raymond Camden posted on 4/24/2014 at 5:57 PM

I just did a test and it worked ok for me. I added a button to the home page and then a click handler. See this Gist:

https://gist.github.com/cfj...

Tested with iOS though, not Android.

Comment 17 by Shazron posted on 4/24/2014 at 7:47 PM

Adam - check out the PhoneGap Developer App post by Michael Brooks. He points to the links for the open source repos for the app itself:
http://phonegap.com/blog/20...

Comment 18 by Matt posted on 4/29/2014 at 5:48 PM

Very nice, Raymond. As a PG Build user, I'm equally excited about this. If you are a Build-only user, please check out my post on what that means for you! http://netkow.com/post/8417...

Comment 19 by Art posted on 5/6/2014 at 11:05 PM

The core-plugins loading is cool.........
Is it just my environment or does the file-transfer plugin not load?

Comment 20 by Raymond Camden posted on 5/7/2014 at 12:50 AM

Best I can recommend is filing a bug report on it. You can file reports here: https://github.com/phonegap...

Comment 21 by Shashwat Tripathi posted on 5/9/2014 at 1:17 AM

This is very nice. I am using this, it makes development so fast and easy.
Well but for third party plugins like social sharing or status bar it is not working. Am I doing it wrong way or is it's limitation that it only works with core plugin.
I am able to use these third party plugins when I run app using Xcode or build app on build.phonegap.

Comment 22 by Raymond Camden posted on 5/9/2014 at 1:34 AM

You can't use it with custom plugins. Not as far as I know. You would only be able to use it with the core plugins.

Comment 23 by Tony OHagan posted on 5/13/2014 at 5:35 PM

So I can see a future where baking a build of this new app is rolled into Cordova/PG CLI so it pickups up all your 3rd party/custom plugins and you then only rarely need to perform prepare or compiles. You could even be serving multiple devices so a JS/HTML/CSS code change can immediately be previewed on different OS's with no recompile.

Comment 24 by Tony OHagan posted on 5/13/2014 at 7:33 PM

Just to clarify a bit ... I think you can avoid the recompiled by performing a 'debug' build that does not compress CCS or JS files. Symlinking some folders might also avoid file copying.

Comment 25 by Tony OHagan posted on 5/14/2014 at 8:39 AM
Comment 26 by Isaac posted on 5/14/2014 at 7:20 PM

How did you manage Weinre to work?

I set up Weinre with:
weinre --boundHost 192.168.100.113 -httpPort 3000

In my app's index.html:
<script src="http://192.168.100.113:3000/target/target-script-min.js#anonymous"></script>

But I can't see the device listed on Targets:
https://www.dropbox.com/s/l...

Comment 27 by Isaac posted on 5/15/2014 at 1:40 AM

I (kind of) managed to debug with https://trigger.io/catalyst
It is very slow, and the console shows nothing, can only debug html and css so far.

Comment 28 by Alexandre posted on 5/21/2014 at 4:28 PM

HI, nice tool, but there is a problem with filetransfert.
If you make :
alert("1");
var ft = new FileTransfer(); alert("2");
And test it it the tool, "2" is never show.
But if you use build.phonegap all are ok.

Comment 29 by Raymond Camden posted on 5/21/2014 at 11:21 PM

Alexendre, you should file a bug report: https://github.com/phonegap...

Comment 30 by Raymond Camden posted on 6/10/2014 at 11:56 PM

@Isaac: Not sure what to say. I tested, and it just plain worked. I just confirmed w/ latest PG.

Comment 31 by Shashwat tripathi posted on 7/26/2014 at 11:42 PM

I have hosted WCF service on amazon ec2 windows iis7 server. Everthing works well if i open my app using chrome directly on my laptop, but if i use phonegap developer app to run my app on ipad then no http POST request work

On console of phonegap serve i sometime get error
ECONNRESET. I have no idea what is the problem.

Though it works well with phonegap developer app as well if i host WCF service locally using visual studio publish instead pf hosting it on amazon AWS

Maybe something needs to be done AWS side...

Comment 32 by Raymond Camden posted on 7/27/2014 at 8:03 PM

Hmm. Afaik, the PG Dev App uses a wildcard for the access config so everything should be available. Best I can suggest is filing a bug report.

Comment 33 by sunny posted on 7/30/2014 at 8:47 AM

I use 'phonegap serve', get error

connect ETIMEDOUT
listening on unkown:3000

Comment 34 by Math Guffens posted on 7/30/2014 at 10:49 AM

I am developing an app on Android (Phonegap) in order to capture pictures from a video.

My code below is working with a web browser on my laptop but not with Phonegap on my smartphone. I just see a black rectangle on my app, not the picture.

According to you, is it possible to take a snapshot of a video with Phonegap?

var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function snap() {
context.fillRect(0,0,150,100);
context.drawImage(video,0,0);
}

Comment 35 by Raymond Camden posted on 7/30/2014 at 4:06 PM

@sunny: You may have something else listening on that port.

@Math: "According to you, is it possible to take a snapshot of a video with Phonegap?"
It depends. You can record video and this will be saved to the file system. But I do not think what you are doing will work properly.

Comment 36 by Math Guffens posted on 7/30/2014 at 11:39 PM

Thanks Raymond for your quick answer.

According to you, it's not possible to "cut" this video in order to get all the frames off the video element, show each of them on a canvas?

Comment 37 by Raymond Camden posted on 7/30/2014 at 11:58 PM

The issue is working with the binary data. That's pretty hefty lifting for JS. It is possible, but I don't believe it would perform well at all.

There are services that let you send them video files and they do all kinds of stuff - thumbnail extraction, resize, etc. I'd use one of those. (ZenCoder I believe.)

Comment 38 by Tony OHagan posted on 8/5/2014 at 3:15 AM

If you're developing Sencha Touch apps with PhoneGap then you might be interested in this new open source app that builds on the work of the PhoneGap team. It employs the the same client and server components but is no longer restricted to a fixed set of plugins and ensures that both client and server plugin versions match:

https://github.com/tohagan/...

Install Guide ..
https://github.com/tohagan/...

Comment 39 by John posted on 9/3/2014 at 9:54 AM

I am developing an app using phonegap. I have installed phone by running the command
npm install -g phonegap@3.4 as npm install -g phonegap was showing some error.
Now when i try to connect using developer at to my listening address 127.0.0.1:3000, it does not connect and shows "connection timeout".

Please can anyone tell me what is wrong?

Comment 40 by Raymond Camden posted on 9/3/2014 at 3:11 PM

127.0.0.1 points to your phone, not your machine. You need your real IP address.

Comment 41 by john posted on 9/3/2014 at 4:12 PM

Thankyou Sir for replying to my question so fast !!!
I solved the problem by reinstalling the phonegap through $ npm install -g phonegap and now my developer app is connecting and i can see the project on my phone which is working perfectly. But, when i deploy the app to a device, its page scrolling sucks and the sliding menu also freezes sometimess.
Any solutions?

Comment 42 by Raymond Camden posted on 9/3/2014 at 6:07 PM

That would depend on what your doing. I don't know what CSS, JS, etc framework you have in place. For that, I'd recommend you post a detailed question to StackOverflow.

Comment 43 by Peter Watts posted on 9/10/2014 at 6:41 PM

Weinre doesn't work for me either. I can successfully load the target script in chrome, so my phone is finding my computer, but the Developer App simply isn't coming up as a target. Can you share more info about your Weinre setup? Thanks!

Comment 44 by Raymond Camden posted on 9/10/2014 at 10:17 PM

Not sure what to suggest then. Maybe file a bug report with the PhoneGap team on it? Sorry to punt you off but I don't work on that tool itself. :)

Comment 45 by Emmanuel posted on 10/2/2014 at 5:28 AM

Hello peepz, this is awesome and thanks for sharing the nicest idea behind deployment of phonegap app, but i have a problem, I have problem in capturing image using my phone camera, but work perfectly okay without using phonegap developer, any help please?

Comment 46 by Charles Blais posted on 12/29/2014 at 4:15 AM

Hi, I'm trying to run a basic project on an android device, but it is stock at "connecting to device"

When I lunch "phonegap serve", I have a message "deviceready has not fired after 5 seconds" ??

But if I install the application with the .apk on my android device, it's working...

Any ideas ?

I'm using phonegap 3.6.3-0.22.4

Thanks

Charles

Comment 47 (In reply to #46) by Raymond Camden posted on 12/29/2014 at 4:54 PM

Are both devices on the same network? Run a web server on your machine - and make note of your IP address (not 127.0.0.1). Then on your Android device, open Chrome and try to hit that IP. If you can't, it means your device and desktop can't see each other.

Comment 48 (In reply to #47) by Charles Blais posted on 12/29/2014 at 6:16 PM

They see each other, that's not the problem.

The problem is when I run my hello-world application on the android device by the PG-developer app, there's a problem and device ready is not fired.

The message "connecting to device" is in the app on the android device. Have a look at the attached pic.

The message "deviceready has not fired after 5 seconds" is on desktop.

If I install the app with the apk on the device, I have the message "device ready".

Thanks

Charles

Comment 49 (In reply to #48) by Raymond Camden posted on 12/29/2014 at 6:35 PM

I searched for this at the GitHub repo issue tracker (https://github.com/phonegap... but didn't see it. I'd suggest filing a bug report.

Comment 50 (In reply to #49) by Charles Blais posted on 12/29/2014 at 8:17 PM

I think I have to upgrade my PG CLI

https://github.com/phonegap...

Comment 51 by Gaurang posted on 3/12/2015 at 2:42 PM

Have you tried this app with MobileFirst environment? can i use this with Mobilefirst and AngularJS environment.

Comment 52 by Raymond Camden posted on 3/12/2015 at 2:53 PM

Not yet. To the second question, AngularJS wouldn't be an issue for sure. To your MF specific issue, I *think* it would work ok - but again - I haven't tested it yet.

Comment 53 by Radhika Sharma posted on 2/10/2016 at 9:30 AM

Great it was, i am also Phonegap Developer and i need a project so i can you have any project then send me details of project and contact details :- radhikaverma1225@gmail.com