Introducing the PhoneGap Developer App

April 22, 2014By 2 Comments

If you haven’t heard yet, there’s a new PhoneGap Developer App available for testing your PhoneGap apps quickly. Using this new app, you can quickly test and code changes to your app from your desktop/laptop and see those changes reflected on your device immediately without having to rebuild, reinstall or code sign it through the CLI, XCode or PhoneGap Build.

The official website is pretty explanatory in showing the steps to using it, but I wanted to provide some additional information here in case it could provide extra help. It may make sense to think of the PhoneGap Developer App as a sort of ‘shell’ for your own applications to be housed in that will run (wirelessly over a shared network between your computer and devices) any PhoneGap application you are serving over a web server from your computer with the PhoneGap CLI phonegap serve command. It will look and act as though you installed your own app to your device itself once connected, and any edits you make to your code are reflected immediately upon save.

Steps

  1. Create an app using the PhoneGap CLI (or locate one you’ve already created and cd into that project from the command line) such as:
    $ phonegap create TestApp
  2. At the command prompt type phonegap serve
  3. You will receive trace messages from the server about the progress and the IP address where the app is being hosted. Make note of this. Mine is shown below (running across my local wifi environment):
  4. $ phonegap serve
    [phonegap] starting app server...
    [phonegap] listening on 192.168.1.28:3000
    [phonegap]
    [phonegap] ctrl-c to stop the server
    [phonegap]

  5. Open the PhoneGap Developer App (assuming you grabbed it from the app store already), and when it prompts you with this screen, tap into the Server Address and change it to the one given above (mine is already set), then tap Connect:
    IMG_6976

That’s it! You should see a Success message, followed by your application running on your device. You can then use your favorite editor to code any changes to your application, hit save, and see those updates immediately on your device. At any time while your app is running, you can do a 3-finger tap to return to the home (shell) app screen, or a 4-finger tap to force a content refresh.

If you have any trouble with the above, first ensure that your devices and computers are connected to the same network.

Running a Different App

Note, at this point you can also run a different app on your device within the PhoneGap Developer App while it’s still running, without exiting out. From your command line on your computer where the current one is being served do a ctrl-c, then cd into the project you want to run next. Simply type phonegap serve from within that project, and then on your device (showing the previous app still running), do a 4-finger tap and it will refresh your screen with the new app content.

Demo

I created a short video showing how this actually looks running on an Android Nexus 7 (it will run the same way on iOS). Towards the end of the video I actually edit and save my code from my laptop (hence the short delay :)), then you see the updated text reflected on the device. I didn’t have to do anything else other than press save in my editor, no build/recompile from CLI or anything like that…

The video may take a few seconds to load, please be patient until I find a better way to record it.

Console Messages

I also wanted to point out something you may notice in your console after running the phonegap serve are trace messages showing the content automatically reloading, such as:

[phonegap] 200 /autoreload
[phonegap] 200 /autoreload
[phonegap] 200 /autoreload
[phonegap] 200 /autoreload
[phonegap] 200 /
[phonegap] 200 /css/index.css
[phonegap] 200 /phonegap.js
[phonegap] 200 /js/index.js
[phonegap] 200 /img/logo.png
[phonegap] 200 /cordova_plugins.js
...

If you don’t see it reloading the files you’re editing for some reason, try a 4-finger tap on your device screen to refresh it.

Plugins

Lastly, it’s also important to note that the core plugins are all available to you (injected from the shell app unless already included in your own app), so you don’t have to specifically add plugins to your project to quickly test with them in your apps using this environment. This alone is so useful and can eliminate issues you may have when running from the CLI and forgetting to add a certain plugin. Obviously you will need to add them to your final project outside of this environment in the end, but it should prove to be very useful to many.

I highly recommend grabbing the PhoneGap Developer App and trying it out, it’s fast and easy to use. The app is currently available for iOS and Android and coming soon for Windows Phone.

Source Code and Issues

Note that the code is open source (yay!!). Also, you can report issues and feature requests for the PhoneGap Developer App here. Be sure to check out the official announcement post for more details.

Additional Links

Filed in: AndroidCordovaMobile DevelopmentPhoneGapPhoneGap 3.0 Tags:

About the Author ()

Comments (2)

Trackback URL | Comments RSS Feed

  1. Shashwat Tripathi says:

    What about the third party plugins like social sharing or status bar. How to get those working with phonegap developer apps!

  2. Naresh Ramoliya says:

    Hello Holly,

    I am developing phonegap application with cordova.

    I have install using sudo npm install -g cordova

    Can I debug my cordova application using Phonegap Developer App ?

    Please help me.

    Regards,
    Naresh

Leave a Reply