This document discusses cross-development for mobile platforms using PhoneGap. PhoneGap allows developers to write apps using HTML, CSS, and JavaScript, then cross-compile them to run as native apps on iOS, Android, BlackBerry and other platforms. It reviews best practices for mobile design, and demonstrates how to install PhoneGap, compile an app, and deploy it to an Android device or emulator. Common PhoneGap APIs allow access to device capabilities like the accelerometer, camera, contacts and more from a cross-platform codebase.

1. Cross-Development for
Android & Other
Mobile Platforms
Prof. Jeff Sonstein
Dept. of Information Sciences & Technologies
Rochester Institute of Technology
jxsast@rit.edu

2. Why This Talk
• Coding is easy, design is hard
• Maintaining multiple development teams &
codebases is costly & error-prone
• Users appreciate a reasonably consistent
experience across platforms

3. Designing for Mobile
1. design for One Web
2. rely on standards
3. avoid known hazards
4. be cautious of device limitations
5. optimize navigation
6. check graphics and colors
7. keep it small
8. use network sparingly
9. help & guide user input
10. think of users on-the-go
http://www.w3.org/2007/02/mwbp_flip_cards.html

4. WebApps, Native Apps,
& Cross-Compilation
• WebApps: browser context, served over
Web, written in HTML/CSS/JavaScript
• Native Apps: written in higher-level
language specific to that platform
• Cross-compilers: advantages of WebApps
but install as native apps

5. Phonegap & Mobile
Devices
• PhoneGap is a tool which allows you to compose
once (using HTML/CSS/JavaScript) then cross-
compile and deploy to many different target
platforms:
• iOs
• Android
• Blackberry
• webOS
• Windows Mobile
• Symbian

6. Installing Phonegap
• see http://www.ist.rit.edu/~jxs/classes/2010_Winter/MobileFoundations/01_week/
phonegapStart.html for more details
• download and install Android SDKs
• download PhoneGap
• unarchive it into an arbitrary directory
• make sure Android tools directory is in your $PATH (on my system: /Users/
jeffs/development/android/tools)

7. Compiling & Deploying
Phonegap Apps
• open a terminal window and navigate to appropriate PhoneGap directory
(on my system: /Users/jeffs/development/phonegap/phonegap-android/)
• compile with droidgap tool (see details page on previous slide)
• open second terminal window and start Android emulator or plug in
Android device
• change directory to wherever you told droidgap to put the generated code
• issue command ant debug install

8. Demo
• exit to live demo

9. Phonegap Docs &
Materials Online
• common functionality: http://docs.phonegap.com/
• tutorials: http://wiki.phonegap.com/w/page/
16494772/FrontPage
• google group: http://groups.google.com/group/
phonegap
• source repository: https://github.com/phonegap
• development tools: http://www.phonegap.com/tools/

10. Phonegap API
Capabilities
• High-level common mobile functionality API
• Support for HTML5 & CSS3

11. Common Functionality:
Accelerometer
• Captures device motion in X/Y/Z
directions
• Methods:
• getCurrentAcceleration
• watchAcceleration
• clearWatch

12. Common Functionality:
Camera
• Provides access to default camera
• Method:
• getPicture

13. Common Functionality:
Compass
• Obtains direction device is pointing
• Methods:
• getCurrentHeading
• watchHeading
• clearWatch

14. Common Functionality:
Contacts
• Provides access to device contacts database
• Methods:
• create
• find

15. Common Functionality:
Device
• Gather device hardware/software info
• Properties:
• name
• phonegap (gets version)
• platform
• uuid
• version

16. Common Functionality:
Events
• Fires when Phonegap has loaded
• Event:
• deviceready

17. Common Functionality:
File System
• Provides access to the device file system
• Objects:
• FileReader
• FileWriter
• FileError

18. Common Functionality:
Geolocation
• Provides access to the GPS sensor
• Methods:
• getCurrentPosition
• watchPosition
• clearWatch

19. Common Functionality:
Media
• Provides ability to record and play back
audio
• Methods:
• getCurrentPosition
• getDuration
• play/pause
• release
• start/stop record
• stop

20. Common Functionality:
Network
• Access both cellular & wifi connection info
• Method:
• isReachable

21. Common Functionality:
Notifications
• Visual, audible, & tactile device notifications
• Methods:
• alert
• confirm
• beep
• vibrate

22. Common Functionality:
Storage
• Access device database implementation
• Method:
• openDatabase
• Database object manipulation sub-
methods

23. HTML5 localStorage
• name/value pairs (think associative array)
• persists between sessions
• example:
• http://www.ist.rit.edu/~jxs/classes/2010_Winter/
MobileFoundations/05_week/storage.html

24. CSS3 & Webkit
• Support table:
• http://westciv.com/wiki/
Experimental_CSS_compatibility_table
• Tutorial:
• http://www.cardeo.ca/css3-handbook/

25. Major CSS

26. Summary
• Design design design, then code once
• Maintaining a single design team and one
codebase and having a unified UX across
platforms is generally more efficient
• Leveraging your Web developer’s skills is
generally A Good Idea

27. Exercise
• Download and install Android development
tools
• Download and install PhoneGap
• Compile & test/deploy example app from
PhoneGap directory
• Write, compile, & test/deploy your own
HelloWorld app

28. Cross-Development for
Android & Other
Mobile Platforms
Prof. Jeff Sonstein
Dept. of Information Sciences & Technologies
Rochester Institute of Technology
jxsast@rit.edu