Intro to PhoneGap and PhoneGap Build

  • 1,421 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,421
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
62
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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 cordova.apache.org
  • 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 https://github.com/phonegap/phonegapplugins Learn more at http://wiki.phonegap.com/w/page/36752779 / PhoneGap%20Plugins
  • 27. PhoneGap Community (some…)
  • 28. Building it phonegap.com/start
  • 29. Command Line Interface docs.phonegap.com/en/3.0.0/guide_cli_index.md.html
  • 30. Building it build.phonegap.com
  • 31. <?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" />
  • 32. <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" />
  • 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="*.google.com" subdomains="true" /> </widget>
  • 34. ConfiGAP configap.com
  • 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: https://chrome.google.com/webstore/category/home • 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! chris.griffith@gmail.com @chrisgriffith http://chrisgriffith.wordpress.com/