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:
- Write new html and/or javascript within DW
- From DW launch Chrome on index.html page
- Set breakpoints on pageinit events within application
- Execute application looking for errors/exceptions/bugs
- Fix errors/exceptions/bugs in DW
- 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:
Other postings:
- Phonegap Diaries: Intro to 24 Challenge
- Phonegap Diaries: Tools
- Phonegap Diaries: Technologies
- Phonegap Diaries: Process
- Phonegap Diaries: Summary
No comments:
Post a Comment