PhoneGap Desktop App Beta

The coolest thing about the PhoneGap Desktop app is that it uses the PhoneGap Developer app to update the app across all of your devices at once as you make changes on the desktop. Just download the PhoneGap Developer app to each of your test devices and with a few simple steps it will mirror your changes on the desktop.

This app is still in its infancy. You still need to use the CLI (Terminal commands) to do the heavy lifting. However, the developer feedback section on GitHub is in full swing as new features are being added every week.

Note that this app uses Adobe PhoneGap commands, not Cordova.

My development environment for this article:

Mac OS X Yosemite 10.10.1 on latest Mac Mini
PhoneGap CLI 4.1.2
Testing in device: Nexus 7, Android v4.4.3
Testing in devices: iPod touch, iOS v5.1.1, v8.1.2
Not for PG Build; no Jquery or other JS or CSS packages used

Installing the Developer App

The PhoneGap Developer app works in conjunction with the PhoneGap Desktop app. First download and install the PhoneGap Developer App onto your test devices (links to app stores at http://app.phonegap.com/). For this article, I downloaded it onto a Nexus 7 with Android 4.4.3, iPod touch with iOS 5.1.1, and iPod touch with iOS 8.1.2.

Installing the Desktop App

1. Download and unzip PhoneGap-Desktop-Beta-xxx-mac.zip to your Mac desktop. from http://phonegap.com/blog/2015/03/02/phonegap-app-desktop-0-1-2/.

2. This results in PhoneGap.app in /Downloads. Open another instance of Finder and drag the app to the /Applications folder.

Using the PhoneGap Desktop App

1. On the desktop, double-click on the app to open it. (If you get a security notice that it “can’t be opened because it is from an unidentified developer,” then open System Preferences > Security & Privacy > General to change your settings to allow apps to be downloaded from “Anywhere,” then double-click the app again.)

2. A small app window opens with four icons at left. Click on the plus icon to create a new app.

3. Choose Create new PhoneGap project…, then choose a place to save the project, the project’s display name (“myApp” in my case), and ID in com.companyname.myapp reverse-domain format. Then click Create project. A default bare-bones PhoneGap project is created on the desktop.

4. A green band at bottom appears, displaying a server IP address. A popup asks permission to proceed, which I allowed. You see a PhoneGap icon of myApp v1.0.0. An arrow to the right of the app name is for clicking if the server does not start.

5. Start up the Developer App on your device. (The following steps will work only if your computer and device were on the same network. In my case at work, IT kept them separate for security reasons. So after the screen appeared in the device, I get ERROR! and TIMED OUT! messages. You’ll also get these messages if you mistype the server address in step 6.)

6. With the Developer App started up on your device, replace the Server Address with the one shown in the Desktop app green band and tap Connect.

7. The default 1-page PhoneGap project should then appear on your device.

8. In a text editor, open up the project where you stored it in step 3, make changes to the index.html file, save, and watch the app update on your device after a moment.

As an experiment, I completely replaced the /www folder with a completed app’s /www folder. The Nexus 7 screen went white with “Cannot GET /” at top left. I tapped the back button to return to the Connect screen, tapped the Connect button, and the “new” app came on in all its glory.

I also downloaded the PhoneGap Developer app to my iPod touches and my app appeared in both. However, three messages with an input box in the middle kept popping up. You need to keep tapping on Cancel until they stop and the desired page appeared. (When I tapped on OK instead of Cancel, the app came on right away, but was unresponsive.) Unfortunately, I was tapping on three Cancel buttons in a row for each app button I clicked on as I navigated from page to page. What a pain! (Growing pains, I’m sure.)

Using the Terminal I added an iOS platform. The app still showed up on my Android device. Nice.

PhoneGap Desktop App menu items

+

The plus icon lists Create new PhoneGap project and Add existing PhoneGap project options.

For the second option, you can click to open a current project from the Finder or simply drag the project folder of a current project over the screen to add it to the list of apps.

However, it wasn’t smooth sailing. A second app I dragged on would not show its app icon, just the familiar broken image icon. A third app I dragged on refused to be listed and froze the Desktop app. I assumed it’s because it was composed of more than 500 pages (being a hymnbook), and was just loading slowly. But it never arrived after several minutes. Eventually, I had to choose PhoneGap > Quit PhoneGap, and that did not respond either. I clicked on the Apple icon then Force Quit PhoneGap to shut it down. Restarting the app showed all three apps I had selected or dragged over; however, they were all unresponsive for a half hour. (I suppose that’s because of my underpowered Mac Mini.) If your experience is the same as mine, I recommend listing only one app at a time. I waited about a half hour, then I was able to click on the minus sign and remove the apps from the list.

–

The minus sign will bring up a red box with an X to remove the project from the list, but not delete it from your computer.

Gear

The gear icon gives the server port information, and a checkbox to turn on or off the option to send anonymous diagnostic and usage data to help them improve the app.

Terminal

The terminal icon opens a server log to see messages, especially on which port it is listening.

?

The question mark icon lists Tutorials, Report Issue, Terms of Use, and Privacy Policy options.

The tutorials link takes us to the wiki at https://github.com/phonegap/phonegap-app-desktop/wiki/PhoneGap-Desktop-Overview

Report issue takes us to https://github.com/phonegap/phonegap-app-desktop/issues?q=is%3Aopen

Terms of Use goes to http://www.adobe.com/legal/general-terms.html

Privacy Policy links to http://www.adobe.com/privacy.html

Final Note

This is beta software. It is being updated on a near-daily basis from feedback by developers using it. Submit your own feedback for features to be modified or added (and bug removal). This requires that you create a GitHub.com account, and click on the green New Issue button to contribute. See https://github.com/phonegap/phonegap-app-desktop/issues.

You still need to use the Terminal to add platforms and plugins at this stage. From what I read about in the Issues, though, it appears that a lot of work is going into this app to make app creation visually appealing to drag-and-drop developers and designers who find the CLI method just too unfamiliar and awkward. To get all you can out of this, don’t forget to update to phonegap 3.6.x to use the new commands. (See https://iphonedevlog.wordpress.com/2014/12/01/using-phonegap-cli-3-6-3-commands/.)