Prototyping Mobile Applications

Create quick prototypes of your mobile app with Phonegap and Mobox

Transcript

1. Prototyping Mobile Applications (Quickly)
2. What's a Prototype? prototype (ˈprəʊtəˌtaɪp) — n 1. one of the first units manufactured of a product, which is tested so that the design can be changed if necessary before the product is manufactured commercially
3. Why Prototype? • Avoid the work of a finished product • Validate your idea • Get customer feedback • Fail ASAP
4. Prototypes are: • Functional • Aesthetically pleasing • A viable solution to the problem you're solving
5. • Sketches • Mockups • The final product Prototypes are NOT:
6. • Web • iOS • Android Platform options
7. Platform issues • Web ◦ No device-specific features, i.e., Camera, Accelerometer, etc. • iOS & Android ◦ Learning curve ◦ Locked to platform
8. http://www.phonegap.com Phonegap (aka Cordova)
9. Phonegap • Build apps w/ Web technologies ◦ HTML ◦ CSS ◦ JavaScript • Access to native device features ◦ Accelerometer ◦ Camera ◦ Device info ◦ Geolocation ◦ Filesystem ◦ Network ◦ and so much more...
10. • Uses platform-specific SDK's ◦ XCode ◦ Android SDK/Eclipse ◦ others... • Web assets are all static ◦ no Haml ◦ no Sass ◦ no CoffeeScript • Version 2.0 adds command-line utilities Phonegap
11. Native iOS/Android apps • Fast ◦ Code is compiled, not interpreted ◦ Access to all device features ▪ OpenGL w/ Hardware Acceleration • Native Look & Feel
12. Phonegap drawbacks • Native look & feel can be emulated, not perfected • JavaScript is fast w/ a JIT, but not as fast as natively compiled code • No OpenGL ◦ Hardware Accelerated CSS3 animations • Excellent support for device features, but w/ limits • Needs plugins for things like Barcode Scanner, SMS, Push, Printing, In-app purchases, etc. ◦ But they're available :)
13. Native • Games & Resource-intensive apps • When native look & feel is mandatory • When native support for a feature is necessary Phonegap • When time is a factor • Beta/test stage • Simple interfaces ◦ Still Beautiful, though • When PhoneGap's features are enough Where should Phonegap vs. Native be used?
14. "The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful, and document what you wrote so you don't have to answer so many questions about it. Hence, the first great virtue of a programmer. Also hence, this book. See also impatience and hubris. (p.609)" —Larry Wall, Programming Perl 2nd Ed. Laziness
15. • I don't want to learn to use XCode • Eclipse is odious. • I want Haml, Sass, and CoffeeScript • I want to build w/ the push of a button • Most of the apps I want to build can be created with Phonegap • I don't want to do the Phonegap build process twice in my life. I am a lazy programmer
16. Mobox or, how to be a really lazy app developer
17. • Phonegap + Sprockets ◦ Haml, Sass, CoffeeScript ◦ Phonegap API (2.0) for native features • Tools ◦ jQuery ◦ Spine.js (JavaScript MVC) ◦ Hammer.js (touch events) ◦ 1140 Grid System ◦ GFX & jQuery Transit (animations) ◦ or, add your own • Quick build process Mobox
18. • MacOS • Ruby • XCode • ios-sim (brew install ios-sim) • Android SDK ◦ w/ tools in $PATH Prerequisites
19. gem install mobox mobox new[my_project] mobox build:ios:create mobox build:ios That's a working iPhone application. Getting Started
20. General Development Considerations • Build as much as possible w/ web technologies • Fill gaps with Plugins • HTML/CSS for all styling, animation ◦ Hardware accelerated CSS3 animations • JavaScript for application logic • Do as little work as possible
21. • New Project ◦ mobox new[project_name] • Web server ◦ mobox server • Build web app ◦ mobox build:www • Create iOS app ◦ mobox build:ios:create • Build iOS app ◦ mobox build:ios Mobox Usage
22. Mobox Usage • Create Android app ◦ mobox build:android:create • Build Android app ◦ Start your emulator somehow ▪ build/android/cordova/emulate ◦ mobox build:android
23. Important Files • src/index.haml • src/config.yml ◦ Arbitrary configuration options, available in your sprockets context ▪ In Spine, available as App.Config, or via the config helper method • src/assets/javascripts • src/assets/stylesheets • src/assets/images
24. (This is the part where David should demo building an application.)
25. Phonegap www.phonegap.com Phonegap Plugins github.com/phonegap/phonegap-plugins TipCalc source github.com/davidjbeveridge/TipCalc Mobox github.com/davidjbeveridge/mobox Resources
26. fin.