See how PhoneGap (Apache Cordova), an open-source framework, and the Adobe PhoneGap Build service, part of the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. Learn how PhoneGap works and how it will enable you to start building mobile apps with web standards. This talk will introduce you to the PhoneGap API and walk you through how to interact with the JavaScript methods to create interactive, feature-rich mobile applications. You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud. This session will cover: Getting started with the PhoneGap API Interacting with the native device features (camera, video) Accessing and using the geolocation sensors Compiling the application using PhoneGap Build

1. @ChrisGriffith

2. Disclaimer
These opinions and thoughts are my own, and
may or may not reflect the opinions of the
company that I work for.

7. Who has built for mobile?

8. Who is developing for iOS?

9. Who is developing for Android?

10. I need to make a mobile app…

13. Objective C
Android
Flavored Java
C# XAML

14. Objective C
Android
Flavored Java
C# XAML

16. PhoneGap

17. Genesis

18. Getting Started
cordova.apache.org

19. But who really uses HTML in their app?

27. What is PhoneGap?
Application container that allows you to build
natively installed apps using HTML, CSS & JavaScript

28. What is PhoneGap?
Your Code

29. What is PhoneGap?
Your Code
Native Web View

30. What is PhoneGap?
Your Code
Native Web View
Native APIs

31. What is PhoneGap?
Your Code
Native Web View
Native APIs
Native App - .apk, .ipa, etc

32. What platforms support PhoneGap?

33. Since it is HTML, CSS & JSS, can I use existing
tools/frameworks?

34. Caution…
PhoneGap uses the NATIVE browser on the
device to render the HTML/CSS/JS
Keep that in mind, as that can affect the experience

35. Device Access

36. Features
Accelerometer - when the device moves
Camera - pictures of your cat
Capture - audio, video, stills of your cat
Compass - for when you're lost
Connection - type of connection
Contacts - find and create new friends

37. Features
Device - device and OS version metadata
Events - various app/hardware related events
File - native file system access (+ upload)
Geolocation - for when you're lost
Globalization - date/number/currency
formatting

38. Features
Media - related to audio playback (supports
record as well)
Notification - visual, audible, and tactile
notifications
Splashscreen - for your splash screen needs
Storage - Mini database

39. PhoneGap 3.0

40. Beyond the mobile web
PhoneGap is extensible with a “native plugin”
model that enables you to write your own
native logic to access via JavaScript.
There are lots of open source plugins at
https://github.com/phonegap/phonegapplugins
Learn more at
http://wiki.phonegap.com/w/page/36752779
/ PhoneGap%20Plugins

41. PhoneGap Community (some…)

42. Building it
phonegap.com/start

43. Command Line Interface
docs.phonegap.com/en/3.0.0/guide_cli_index.md.html

44. Building it
build.phonegap.com

48. <?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id
= "com.ajsoftware.demo.parkfinderhd"
versionCode=""
version = "1.0.1">
<name>Park Finder HD</name>
<description>A demonstration of jQuery Mobile and PhoneGap Build</description>
<author href="http://www.aj-software.com" email="chris.griffith@gmail.com">Chris
Griffith</author>
<preference name="phonegap-version" value="3.0.0" />
<preference name="orientation" value="portrait" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="true" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="true" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="true" />
<preference name="android-minSdkVersion" value="11" />
<preference name="android-installLocation" value="auto" />
<preference name="splash-screen-duration" value="5000" />
<preference name="load-url-timeout" value="20000" />

49. <gap:platform name="ios" />
<gap:platform name="android" />
<gap:platform name="winphone" />
<feature name="http://api.phonegap.com/1.0/camera"/>
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/network"/>
<feature name="http://api.phonegap.com/1.0/notification"/>
<gap:plugin name="org.apache.cordova.core.media-capture" />
<gap:plugin name="org.apache.cordova.core.camera" />
<gap:plugin name="org.apache.cordova.core.geolocation" />
<gap:plugin name="org.apache.cordova.core.device" />
<gap:plugin name="org.apache.cordova.core.device-motion" />
<gap:plugin name="org.apache.cordova.core.network-information" />
<gap:plugin name="org.apache.cordova.core.dialogs" />
<gap:plugin name="org.apache.cordova.core.globalization" />
<gap:plugin name="org.apache.cordova.core.console" />
<gap:plugin name="org.apache.cordova.core.audiohandler" />
<gap:plugin name="org.apache.cordova.core.battery-status" />
<gap:plugin name="org.apache.cordova.core.file" />
<gap:plugin name="org.apache.cordova.core.device-orientation" />
<gap:plugin name="org.apache.cordova.core.file-transfer" />
<gap:plugin name="org.apache.cordova.core.splashscreen" />
<gap:plugin name="org.apache.cordova.core.vibration" />
<gap:plugin name="org.apache.cordova.core.inappbrowser" />
<icon src="icons/icon_57.png" gap:platform="ios" width="57" height="57" />
<icon src="icons/icon_72.png" gap:platform="ios" width="72" height="72" />
<icon src="icons/icon_114.png" gap:platform="ios" width="114" height="114" />

50. <icon src="icons/icon_144.png" gap:platform="ios" width="144" height="144" />
<icon src="icons/icon_36.png" gap:platform="android" gap:density="ldpi" />
<icon src="icons/icon_48.png" gap:platform="android" gap:density="mdpi" />
<icon src="icons/icon_72.png" gap:platform="android" gap:density="hdpi" />
<icon src="icons/icon_96.png" gap:platform="android" gap:density="xhdpi" />
<icon src="icons/icon_48.png" gap:platform="winphone" />
<icon src="icons/icon_62.png" gap:platform="winphone" gap:role="background" />
<icon src="icons/icon_64.png" gap:platform="blackberry" />
<icon src="icons/icon_64.png" gap:platform="webos" />
<gap:splash src="splash/splash_320_480.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="splash/splash_640_960.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="splash/splash_320_480.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="splash/splash_480_800.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="splash/splash_800_1280.png" gap:platform="android" gap:density="xhdpi" />
<access origin="*.google.com" subdomains="true" />
</widget>

51. ConfiGAP
configap.com

52. Building it
<Demo />

53. REAL WORLD BUILDING
•
•
•
•
Desktop Browser
Mobile via Web
Ripple Emulator
Local SDK to Simulator/Device

54. DESKTOP BROWSER
• Pro: Super Fast
• Pro: No setup
• Pro: Debugging Rocks
•
•
•
•
Con: UI isn't right
Con: UX isn't right
Con: Features missing
Con: Security restrictions

55. MOBILE VIA WEB
• Pro: Kinda Fast
• Pro: Minimal setup
• Pro: UI and UX testing
• Con: Features missing
• Con: Security restrictions
• Con: Debugging (kinda) sucks

56. RIPPLE EMULATOR
•
•
•
•
Pro: Fast
Pro: Similar UI
Pro: Free
Pro: Security restrictions gone
• Con: Doesn't support 100% of the PhoneGap
APIs
• Con: Still not on the device

57. TO INSTALL
• Go to the Chrome Web Store:
https://chrome.google.com/webstore/category/home
• Search for "ripple"
• Click Extensions

59. LOCAL SDK TO SIMULATOR/DEVICE
• Pro: The Real Deal
• Con: Slow(ish)
• Con: Not Free
• Con: Debugging can suck
TO BE CLEAR:
YOU MUST ALWAYS TEST ON A REAL DEVICE

60. Hydration

62. Now go build something!

63. Thanks!
chris.griffith@gmail.com
@chrisgriffith
http://chrisgriffith.wordpress.com/