Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
PhoneGap Cross the Gap from HTML5 to Mobile
OSCON 2012
Paul BeusterienJuly 19, 2012
Today's Talk● Why Web Development for Mobile? ● Why PhoneGap?● What is PhoneGap?● Technology Map
Slides at http://goo.gl/Uf625
Follow Along
http://www.mobiledevelopersolutions.com● Requires: Eclipse ADT● See Get Started with AppLaud
http://www.applaudcloud.com● Web-based development● Google Chrome● AppLaud App (install from QRcode)
OR
Eclipse Plugin for PhoneGap Android
AppLaud Cloud
About Me - Paul Beusterien
● Creating top-notch mobile development solutions
● @paulbeusterien
● http://www.mobiledevelopersolutions.com● http://www.applaudcloud.com
Who Need Apps?
1 Billion television sets worldwide
Fragmentation
HTML5 to the Rescue
(Hint: There are Lots of Web Developers)
Who Can Write HTML5?
Making Sense of it All
Running as a Web PageBrowser Device Browser
Running as a Native App
Native Vs Web
Why not use both?
Mobile Capabilities
PhoneGap APIs
http://docs.phonegap.com/
PhoneGap Demo
Accelerometer
Captures device motion in the x, y and z direction
Methods:○ getCurrentAcceleration○ watchAcceleration○ clearWatch
Camera
Provide access to default camera application
Methods:○ getPicture
Capture
Provides access to the audio, image, and video capabilities of the device
Methods:○ captureAudio○ captureImage○ captureVideo○ MediaFile.getFormatData
Compass
Obtain the direction the device is pointing
Methods:○ getCurrentHeading○ watchHeading○ clearWatch
Connection
The connection object gives access to the device's cellular and wifi connection information.Properties:
○ connection.type
Constants:○ Connection.UNKNOWN○ Connection.ETHERNET○ Connection.WIFI○ Connection.CELL_2G○ Connection.CELL_3G○ Connection.CELL_4G○ Connection.CELL_NONE
Contacts
Provide access to the device contacts database
Methods:○ create○ find
Device
The device object describes the device's hardware and software
Properties:○ device.name○ device.phonegap○ device.platform○ device.uuid○ device.version
Events
PhoneGap Lifecycle events
Event Types:● deviceready● pause● resume● online● offline● backbutton● batterycritical● batterylow● batterystatus
● menubutton● searchbutton● startcallbutton● endcallbutton● volumedownbutton● volumeupbutton
File
An API to read, write and navigate file system hierarchies.
Objects and Methods for:○ Directory Navigation○ File Read○ File Write○ File Transfer
Geolocation
Provide location information for the device
Methods:○ getCurrentPosition○ watchPosition○ clearWatch
Media
Provide the ability to record and play back audio files on a device
Methods:○ getCurrentPosition○ getDuration○ play○ pause○ release○ seekTo○ startRecord○ stopRecord○ stop
Notification
Visual, audible and tactile device notifications
Methods:○ alert○ confirm○ beep○ vibrate
Storage
Provide access to the device's storage options.
Web Storage Methods:○ openDatabase○ transaction○ changeVersion○ executeSql○ item
Local Storage Methods:○ key○ getItem○ setItem○ removeItem○ clear
PhoneGap Implementation● Embeds a chromeless browser in a native app● Creates a bridge from the browser to native via a set
of JavaScript APIs
Android Implementation
● Was (pre Android 2.3)○ WebView ○ addJavaScriptInterface
● Now○ onJsPrompt override
PhoneGap Bridge
PhoneGap Goals and Principles
● "The purpose of PhoneGap is for PhoneGap to cease to exist."
- Brian LeRoux, Adobe PhoneGap Lead
● Embrace web technology - HTML5● Build a first-class development environment around web technology
PhoneGap and Titanium
PhoneGap vs Titanium
Thanks -> Tony Lukasavage http://savagelook.com/blog/portfolio/phonegap-is-web-based-appcelerator-is-pure-javascript
PhoneGap Platforms
http://phonegap.com/about/features
(all major smart phone OS's!)
PhoneGap Plugins
Extending PhoneGap
● Provide JavaScript APIs for native capabilities
● Examples include Bluetooth, Speech Recognizer, ChildBrowser, TTS, Status Bar Notification and ftp
● Many are open sourced at https://github.com/phonegap/phonegap-plugins
Plugin Basics1. Native Part - Java on Android
○ Add Java Class, Include Java Code2. JavaScript Part
○ Add JS file to project, Edit index.html3. Connect Plugin to App
○ Edit res/xml/plugins.xml4. README file
○ Permissions - AndroidManifest.xml○ Plugin-specific instructions: init calls, resources○ API description and usage examples
Apache Cordova?
(Apache Callback)
Apache Cordova
October 3, 2011
UI Libraries
Mobile UI Paradigm
● Optimized for Touch○ Finger-sized controls○ Minimize typing
■ Smart forms - buttons, sliders, etc.○ Swipe and tap events
■ No mouse-overs and clicks● Orientation/Layout Change● Themes and Transitions
UI Frameworks
Sencha
Jo EmbedJS zepto.js jQ.Mobi
jQuery Mobile
Touch-Optimized Web Framework for Smartphones & Tablets
"A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design."
Simulation/Emulation
App Stores
Ripple Demo
Debug
App Stores
Weinre Demoweinre is WEb INspector REmote
debug.phonegap.com
Jo EmbedJS zepto.js
Pulling it all Together
Sencha
Debug
Emulate
AppLaud Eclipse Plugin
AppLaud Cloud
● Demo
Today's Talk● Why Web Development for Mobile? ● Why PhoneGap?● What is PhoneGap?● Technology Map● Live Demos
Slides at http://goo.gl/qoyk4
More ...
● http://www.phonegap.com ● https://groups.google.com/forum/#!forum/phonegap● http://stackoverflow.com/questions/tagged/phonegap● http://incubator.apache.org/projects/callback.html● http://www.mobiledevelopersolutions.com● http://www.applaudcloud.com● twitter @paulbeusterien
Slides at http://goo.gl/Uf625
* Some images from Creative Commons* Thanks to Brian LeRoux of Adobe for input