Twitter: raymondcamden


Address: Lafayette, LA, USA

PhoneGap Developer App

04-21-2014 11,936 views Mobile, Development 45 Comments

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.

45 Comments

  • Commented on 04-21-2014 at 4:45 PM
    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...
  • Shazron #
    Commented on 04-21-2014 at 6:17 PM
    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...
  • Commented on 04-22-2014 at 12: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/fingerproof/cordova-plugin-gapr...
    https://github.com/fingerproof/grunt-gapreload
  • Commented on 04-22-2014 at 9:46 AM
    That's great news, Shazron! And Sebastien, your plugin looks really awesome!
  • Tom Wilson #
    Commented on 04-22-2014 at 10:38 AM
    What happens on reload? Does the entire app get refreshed and then you start over in the deviceready event from the first page?
  • Commented on 04-22-2014 at 10:40 AM
    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.
  • Commented on 04-22-2014 at 11:57 AM
    @Tom: Not using GapReload, you stay right where you were :)
  • Commented on 04-22-2014 at 1:11 PM
    Oh? It will reload assets but keep you at the current URL?
  • Commented on 04-22-2014 at 2: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).
  • Commented on 04-22-2014 at 3:12 PM
    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?
  • Commented on 04-22-2014 at 4:10 PM
    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.
  • Commented on 04-22-2014 at 4:30 PM
    ... 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.
  • Qi #
    Commented on 04-22-2014 at 8:23 PM
    Hi, how's going if plugins get updated then or I want to test some specific version for a plugin?
  • Commented on 04-22-2014 at 8:29 PM
    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?
  • Commented on 04-23-2014 at 8:24 PM
    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.
  • Commented on 04-24-2014 at 8:57 AM
    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/cfjedimaster/11255545

    Tested with iOS though, not Android.
  • Commented on 04-24-2014 at 10:47 AM
    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/2014/04/23/phonegap-devel...
  • Commented on 04-29-2014 at 8:48 AM
    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/84176058540/leveraging-phon...
  • Art #
    Commented on 05-06-2014 at 2:05 PM
    The core-plugins loading is cool.........
    Is it just my environment or does the file-transfer plugin not load?
  • Commented on 05-06-2014 at 3:50 PM
    Best I can recommend is filing a bug report on it. You can file reports here: https://github.com/phonegap/phonegap-app-developer...
  • Shashwat Tripathi #
    Commented on 05-08-2014 at 4:17 PM
    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.
  • Commented on 05-08-2014 at 4:34 PM
    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.
  • Commented on 05-13-2014 at 8:35 AM
    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.
  • Commented on 05-13-2014 at 10:33 AM
    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.
  • Commented on 05-13-2014 at 11:39 PM
    Posted this issue:
    https://github.com/phonegap/phonegap-app-developer...
  • Isaac #
    Commented on 05-14-2014 at 10:20 AM
    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-m...;

    But I can't see the device listed on Targets:
    https://www.dropbox.com/s/lczy8pi52clrujj/Captura%...
  • Isaac #
    Commented on 05-14-2014 at 4:40 PM
    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.
  • Commented on 05-21-2014 at 7:28 AM
    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.
  • Commented on 05-21-2014 at 2:21 PM
    Alexendre, you should file a bug report: https://github.com/phonegap/phonegap-app-developer...
  • Commented on 06-10-2014 at 2:56 PM
    @Isaac: Not sure what to say. I tested, and it just plain worked. I just confirmed w/ latest PG.
  • Shashwat tripathi #
    Commented on 07-26-2014 at 2: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...
  • Commented on 07-27-2014 at 11:03 AM
    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.
  • sunny #
    Commented on 07-29-2014 at 11:47 PM
    I use 'phonegap serve', get error

    connect ETIMEDOUT
    listening on unkown:3000
  • Math Guffens #
    Commented on 07-30-2014 at 1: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);
    }
  • Commented on 07-30-2014 at 7:06 AM
    @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.
  • Math Guffens #
    Commented on 07-30-2014 at 2: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?
  • Commented on 07-30-2014 at 2: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.)
  • Commented on 08-04-2014 at 6:15 PM
    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/stlive

    Install Guide ..
    https://github.com/tohagan/stlive/blob/master/INSTALL.md" target="_blank">https://github.com/tohagan/stlive/blob/master/INST...
  • Commented on 09-03-2014 at 12: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?
  • Commented on 09-03-2014 at 6:11 AM
    127.0.0.1 points to your phone, not your machine. You need your real IP address.
  • Commented on 09-03-2014 at 7:12 AM
    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?
  • Commented on 09-03-2014 at 9:07 AM
    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.
  • Peter Watts #
    Commented on 09-10-2014 at 9:41 AM
    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!
  • Commented on 09-10-2014 at 1: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. :)
  • Emmanuel #
    Commented on 10-01-2014 at 8:28 PM
    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?

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty