Skip to content

phonegap developer app

Michael Brooks edited this page Aug 11, 2015 · 15 revisions

PhoneGap Developer App

http://app.phonegap.com/

Table of Contents

  1. Overview
  2. Limitations
  3. Install
  4. Usage
  5. Workflow
  6. Try it out
  7. Try Another App
  8. Hosted App

Overview

The PhoneGap Developer App allows to develop locally and instantly preview your app on your device. This is often called on-device prototyping.

Before the PhoneGap Developer App existed, you had to compile and install your app in order to see your latest changes. This meant you had to install the platforms' SDKs and either use the simulator or setup your signing keys. Thankfully, the PhoneGap Developer App removes this distraction and allows you to start development immediately!

Oh! It's also an entirely open source project available at phonegap/phonegap-app-developer.

Limitations

There are a few limitations to the PhoneGap Developer App.

First, it's purely for development. A production app will need to be properly compiled and signed in order to submit to the app stores.

Second, it does not support Remote Web Inspector debugging, although this is a planned feature.

Third, it does not support third-party plugins, although this is also on our roadmap.

Install

  1. Grab your device (phone or tablet).
  2. Open your AppStore, Play Store, or Windows Store.
  3. Install the PhoneGap Developer App.

It works on Android, iOS, and Windows Phone 8 phones and tablets.

Usage

The idea is simple: pair the PhoneGap CLI with the PhoneGap Developer App.

On your computer

  1. Open your terminal.

  2. Navigate to the my-app project that you created.

     $ cd path/to/my-app/
    
  3. Run the server command to start a local web server:

     $ phonegap serve
    

Putting all of those commands together, it would look like:

$ cd path/to/my-app
$ phonegap serve
[phonegap] starting app server...
[phonegap] listening on 10.0.1.3:3000
[phonegap]
[phonegap] ctrl-c to stop the server

On your device

  1. Open the PhoneGap app.
  2. Enter the IP address displayed on your terminal (e.g. 10.0.1.3:3000).

Workflow

The workflow is quite natural. As you change files in my-app/www, your device will instantly update with the latest changes.

You can navigate with two hidden gestures:

  • Three-finger tap the screen to navigate back to the home screen.
  • Four-finger tap the screen to force an update.

Try it out

  1. Open my-app/www/index.html in your favourite text editor

  2. Change:

<h1>PhoneGap</h1>

To:

<h1>PhoneGap Workshop</h1>
  1. Save the file

  2. Watch your device immediately update.

  3. When you're done, remember to stop the server with CTRL+C.

Try Another App

Now that you've got the Hello World up and running, let's imagine that you want to collaborate on an application! In this case, we are going to use the application that will be built in the Advanced and God Mode workshops!

  1. Download the phonegap-app-pgday project.
  2. Extract the project.
  3. Open your Terminal.
  4. Navigate to the phonegap-app-pgday directory.
  5. Type $ phonegap serve.
  6. Pair your PhoneGap Developer App with the CLI.
  7. And preview the app! You can type b in the search to filter the people.

Note: If you receive the error [error] listen EADDRINUSE then you already have a server running. Open your terminal and press the key combination CTRL+C to stop the server.

Hosted App

If you're having trouble running the CLI, then try connecting your app to:

http://phonegap-workshop.herokuapp.com