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
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
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