Setting up the development environment was relatively simple. I put the source code for HAML, SCSS and CoffeeScript in a similar file tree next to the www directory. I then automated the process of converting the HAML, SCSS and CoffeeScript using a file change monitor to execute conversion scripts whenever a modification occurred.
Below is the layout and tooling I used for the project.
h2. PhoneGap File Layout
h3. Ruby and Bundler
“Ruby”:http://www.ruby-lang.org/en/ and the ruby gem management tool, “Bundler”:http://gembundler.com/, simplified the dependency setup and scripting necessary for the development environment. Here is a copy of Bundler’s Gemfile I used on the project.
The ruby gem “Watchr”:https://github.com/mynyml/watchr monitors system files and executes a block of code when changes are detected. Watchr uses a simple DSL to configure its usage.
We scripted repetitive tasks using the ruby gem “Thor”:https://github.com/wycats/thor.
A PhoneGap application at its heart is mostly a web application therefore you can view and rapidly iterate the application using “Sinatra”:http://www.sinatrarb.com/, a simple web server, and your favorite web browser.
h2. Additional Resources
Here are several links I found useful during my PhoneGap project.
* “Official PhoneGap Docs”:http://www.phonegap.com/docs
* “Introduction to PhoneGap tutorial”:http://mobile.tutsplus.com/tutorials/phonegap/phonegap-development/
* “Introduction to iPhone SDK Development”:http://mobile.tutsplus.com/tutorials/iphone/introduction-to-iphone-sdk-development/
* “Deploying iPhone applications (the official way)”:https://mobiforge.com/design-development/deploying-iphone-apps-real-devices
* “Safari Visual Effects How To”:http://developer.apple.com/library/safari/#codinghowtos/Mobile/GraphicsMediaAndVisualEffects/_index.html
* “Handling Retina Display in CSS”:http://webapp-net.com/Forums/viewtopic.php?id=487
* “Using Custom Fonts for iOS”:http://wiki.phonegap.com/w/page/28514708/iPad-or-iOS-4:-Use-Custom-Fonts