Phonegap Diaries: Tools

Introduction

Twentyfour Challenge evolved from a native Android application written in Java using the Android SDK within Eclipse to a PhoneGap application where DreamWeaver (DW) is the main development tool.

This article explains the tools used to create the new, portable version of Twentyfour Challenge.

Tools

PhoneGap (2.9.6)

PhoneGap has two main functions:

•          Provide javascript access to device specific APIs
•          Provide packaging for targeted platforms

STS (2.9.2-RELEASE)

Springsource Tool Suite (STS) is a distribution of Eclipse from Springsource.  After the Android Development Kit (ADK ) is installed it is used to tweak the Android configuration files and generate the final package.  It also allows you to configure Android Virtual Devices (Android phone emulators) for testing.

Theoretically Eclipse is not needed as PhoneGap's Command Line Interface (CLI) does all of the work needed to produce a package, but that’s just in theory.

XCODE (4.6.3)

XCODE is the primary OS X and iOS development tool.  Its role is similar to that of STS but for targeting iOS platforms.  The iOS platforms include iPhone and iPad (all hardware variants).

DreamWeaver (CS6)

Although not strictly required, DreamWeaver is the best WYSIWYG tool for html/css web site creation.  A PhoneGap application is basically a web site running off the file system on the target platform

Additional Tools

These additional tools were used for special purpose tasks during the development project:

•          Eclipse Javascript Project plugin
•          Google jsTestDriver plugin for Eclipse
•          Eclipse Groovy plugin
•          iPhone and Android emulators
•          Google Chrome developer tools
•          Ripple emulator (a Chrome extension)
•          Gimp
•          Subversion 

Eclipse comes bundled with the Javascript plugin which gives IDE support for Javascript programming.  And the support is surprising good in terms of syntax error checking and autocompletion.   The one thing that’s missing is the ability to “Run as javascript project…”  (a search shows that there is a plugin to do this.  It involves running Rhino on the JVM).

Google has a code project called jsTestDriver that allows the development of unit tests for javascript code.  jsTestDriver  can be run from the command line, but there is also an Eclipse plugin that you can download and configure.  I regard unit testing as essential for the complex Javascript library that I developed for Twentyfour Challenge.

I used the Eclipse Groovy plugin to develop a groovy script that translates the 24 problem files from xml to json.  I did not want to do this by hand, and I knew that Groovy was ideal for such a translation.

The primary development tools (Android SDK and XCODE) deliver the phone emulators.  When these are launched from the IDE you can see output (console.log output) during testing.

The best productivity tools that I used were the developer tools within Google Chrome.  The only trick is that you must launch Chrome such that you can link to files residing on the file system.  This requires launching Chrome as follows:

open -a 'Google Chrome' --args --allow-file-access-from-files

The Ripple emulator was a late addition to the list.  It emulates the PhoneGap device specific API calls that your application makes.

Gimp is an open source tool that competes against Adobe Photoshop.  Since I had paid (educational discount here) for Adobe DreamWeaver, I didn’t want to pay for Photoshop.  Besides I’m not a graphics artist and can get by with Gimp.

Subversion is your good old version control software.  Use git if that’s your favorite.

Tools Not Used

I had the opportunity to use some cloud-based tools, but I choose not to use them.  They include the Adobe PhoneGap Build service and a testing service like SauceLabs.

I figured I had to use the emulators anyway so why hassle with cloud-based services that can potentially lead to monthly service fees.

Summary

That is a long list of tools.  I can't say that I've mastered them all.  You no longer use Eclipse and XCODE as editors and the parts that you do use like configuring Android Virtual Devices or code signing in XCODE are full of extremely frustrating dialogs.

All of the tools are all free with the exception of DreamWeaver.

"Wait!" I hear you say, "what about JQuery Mobile?"  I consider JQM a library and will discuss that in the Technologies posting.

Other postings:

• Phonegap Diaries: Intro to 24 Challenge
• Phonegap Diaries: Process
• Phonegap Diaries: Technologies
• Phonegap Diaries: Tools
• Phonegap Diaries: Summary