PhoneGap Cross the Gap from HTML5 to Mobile OSCON Paul Beusterien July 19, 2012

Transcription

1 PhoneGap Cross the Gap from HTML5 to Mobile OSCON 2012 Paul Beusterien July 19, 2012

2 Today's Talk Why Web Development for Mobile? Why PhoneGap? What is PhoneGap? Technology Map Slides at

3 Follow Along Eclipse Plugin for PhoneGap Android Requires: Eclipse ADT See Get Started with AppLaud OR AppLaud Cloud Web-based development Google Chrome AppLaud App (install from QRcode)

4 About Me - Paul Beusterien Creating top-notch mobile development solutions

5 Who Need Apps? 1 Billion television sets worldwide

6 Fragmentation

7 HTML5 to the Rescue

8 Who Can Write HTML5? (Hint: There are Lots of Web Developers)

9 Making Sense of it All

10 Running as a Web Page Browser Device Browser

11 Running as a Native App

12 Native Vs Web Why not use both?

13 Mobile Capabilities

14 PhoneGap APIs

15 PhoneGap Demo

16 Accelerometer Captures device motion in the x, y and z direction Methods: getcurrentacceleration watchacceleration clearwatch

17 Camera Provide access to default camera application Methods: getpicture

18 Capture Provides access to the audio, image, and video capabilities of the device Methods: captureaudio captureimage capturevideo MediaFile.getFormatData

19 Compass Obtain the direction the device is pointing Methods: getcurrentheading watchheading clearwatch

20 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

21 Contacts Provide access to the device contacts database Methods: create find

22 Device The device object describes the device's hardware and software Properties: device.name device.phonegap device.platform device.uuid device.version

23 Events PhoneGap Lifecycle events Event Types: deviceready pause resume online offline backbutton batterycritical batterylow batterystatus menubutton searchbutton startcallbutton endcallbutton volumedownbutton volumeupbutton

24 File An API to read, write and navigate file system hierarchies. Objects and Methods for: Directory Navigation File Read File Write File Transfer

25 Geolocation Provide location information for the device Methods: getcurrentposition watchposition clearwatch

26 Media Provide the ability to record and play back audio files on a device Methods: getcurrentposition getduration play pause release seekto startrecord stoprecord stop

27 Notification Visual, audible and tactile device notifications Methods: alert confirm beep vibrate

28 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

29 PhoneGap Implementation Embeds a chromeless browser in a native app Creates a bridge from the browser to native via a set of JavaScript APIs

30 Android Implementation PhoneGap Bridge Was (pre Android 2.3) WebView addjavascriptinterface Now onjsprompt override

31 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

32 PhoneGap and Titanium

33 PhoneGap vs Titanium Thanks -> Tony Lukasavage

34 PhoneGap Platforms (all major smart phone OS's!)

35 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 com/phonegap/phonegap-plugins

36 Plugin Basics 1. Native Part - Java on Android Add Java Class, Include Java Code 2. JavaScript Part Add JS file to project, Edit index.html 3. Connect Plugin to App Edit res/xml/plugins.xml 4. README file Permissions - AndroidManifest.xml Plugin-specific instructions: init calls, resources API description and usage examples

37 Apache Cordova? October 3, 2011 (Apache Callback) Apache Cordova

38 UI Libraries

39 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

40 UI Frameworks Sencha Jo EmbedJS zepto.js jq.mobi

41 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."

42 Simulation/Emulation App Stores

43 Ripple Demo

44 Debug App Stores

45 Weinre Demo weinre is WEb INspector REmote

46 debug.phonegap.com

47 Pulling it all Together Emulate Debug Sencha Jo EmbedJS zepto.js

48 AppLaud Eclipse Plugin

49 AppLaud Cloud Demo

50 Today's Talk Why Web Development for Mobile? Why PhoneGap? What is PhoneGap? Technology Map Live Demos Slides at

51 More Slides at * Some images from Creative Commons * Thanks to Brian LeRoux of Adobe for input