Phonegap Diaries: Process

Introduction

This article discusses the process used to develop Twentyfour Challenge.  First you have to understand the project structure.

Project Structure

Below is the file structure for Twentyfour Challenge as a PhoneGap project:

phonegap-projects

|____.DS_Store

|____Twentyfour                 <= PhoneGap project root

| |____.cordova

| |____.svn

| |____merges

| |____platforms

| | |____android                <= imported into Eclipse/Android

| | | |____AndroidManifest.xml

| | | |____ant.properties

| | | |____assets

| | | | |____www

| | |____ios

| | | |____build

| | | | |____Twentyfour.app

| | | | | |____www

| | | |____ Twentyfour.xcodeproj    <= imported into XCode

| |____plugins

| |____www              <= source code here! Dreamweaver site root

| | |____config.xml

| | |____css

| | | |____index.css

| | |____img

| | | |____logo.png

| | |____index.html                 <= main page

| | |____js

| | | |____index.js    

| | |____res

| | |____spec

| | |____spec.html

Most of my work is under that www folder and this is what really needs to be under source control.  There are platform specific changes that need to be made under android and ios folders also.

Development Process

After some fits and starts I got into this basic cycle:

1. Write new html and/or javascript within DW
2. From DW launch Chrome on index.html page
3. Set breakpoints on pageinit events within application
4. Execute application looking for errors/exceptions/bugs
5. Fix errors/exceptions/bugs in DW
6. Repeat

Simulator Testing

Periodically I would test the application in either an AVD (Android Virtual Device) or the iOS simulator.  Cordova CLI made this incredibly easy to do:

cordova build ios

cordova emulate ios

The last command will launch the ios simulator and give you a feedback on the look and feel and basic functionality.  But it gives you no information about what's going on within the application.  So you must use XCODE (Eclipse for Android) and launch the simulator (AVD for Android) from there.  This will show any errors that ios detects so you can correct them.

Device Testing

At some stage you have to start testing on a physical device.  You will need to use Eclipse with the ADT to run your app on an Android device, or XCODE to run it on an ios device.

On Android I only tested on my current smartphone – a Samsung Galaxy Stellar model.  On ios I tested on an iPad2 and several iPhone4s.

Icons

Don’t forget those icons!  Whereas there are a reasonably small number of icons to develop for Android there are an unreasonably large number of icons to develop for ios.

Don’t forget the all of those screenshots and splash screens that you have to provide.

Summary

The process I describe should include all of the rabbit holes that I went down trying to find solutions to my problems; however, I choose not to mention them.  Google (and stackoverflow) should be mentioned as primary development tools as these were the only means for getting unstuck when I was stuck.

Other postings:

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