Your SlideShare is downloading. ×
Intro to PhoneGap and PhoneGap Build
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to PhoneGap and PhoneGap Build


Published on

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 …

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

Published in: Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • UI prototyper 15 yrsDeveloping mobile for the past 5 yearsMgr SDFUGACP
  • Who has used Flash Catalyst before?
  • Built at an iPhoneDevCamp in 2009Started by NitobiAdobe bought Nitobi (2011)
  • PhoneGap is Adobe's implementationPhoneGap == Cordova
  • Windows Phone 7/8 (+ Windows 8)
  • Some variability here, based on exact platform.
  • Transcript

    • 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.
    • 3. Who has built for mobile?
    • 4. Who is developing for iOS?
    • 5. Who is developing for Android?
    • 6. I need to make a mobile app…
    • 7. Objective C Android Flavored Java C# XAML
    • 8. Objective C Android Flavored Java C# XAML
    • 9. PhoneGap
    • 10. Genesis
    • 11. Getting Started
    • 12. But who really uses HTML in their app?
    • 13. What is PhoneGap? Application container that allows you to build natively installed apps using HTML, CSS & JavaScript
    • 14. What is PhoneGap? Your Code
    • 15. What is PhoneGap? Your Code Native Web View
    • 16. What is PhoneGap? Your Code Native Web View Native APIs
    • 17. What is PhoneGap? Your Code Native Web View Native APIs Native App - .apk, .ipa, etc
    • 18. What platforms support PhoneGap?
    • 19. Since it is HTML, CSS & JSS, can I use existing tools/frameworks?
    • 20. 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
    • 21. Device Access
    • 22. 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
    • 23. 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
    • 24. 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
    • 25. PhoneGap 3.0
    • 26. 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 Learn more at / PhoneGap%20Plugins
    • 27. PhoneGap Community (some…)
    • 28. Building it
    • 29. Command Line Interface
    • 30. Building it
    • 31. <?xml version="1.0" encoding="UTF-8"?> <widget xmlns = "" xmlns:gap = "" 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="" email="">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" />
    • 32. <gap:platform name="ios" /> <gap:platform name="android" /> <gap:platform name="winphone" /> <feature name=""/> <feature name=""/> <feature name=""/> <feature name=""/> <gap:plugin name="" /> <gap:plugin name="" /> <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="" /> <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" />
    • 33. <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="*" subdomains="true" /> </widget>
    • 34. ConfiGAP
    • 35. Building it <Demo />
    • 36. REAL WORLD BUILDING • • • • Desktop Browser Mobile via Web Ripple Emulator Local SDK to Simulator/Device
    • 37. 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
    • 38. MOBILE VIA WEB • Pro: Kinda Fast • Pro: Minimal setup • Pro: UI and UX testing • Con: Features missing • Con: Security restrictions • Con: Debugging (kinda) sucks
    • 39. 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
    • 40. TO INSTALL • Go to the Chrome Web Store: • Search for "ripple" • Click Extensions
    • 41. 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
    • 42. Hydration
    • 43. Now go build something!
    • 44. Thanks! @chrisgriffith