@ChrisGriffith
Disclaimer

These opinions and thoughts are my own, and
may or may not reflect the opinions of the
company that I work for...
Who has built for mobile?
Who is developing for iOS?
Who is developing for Android?
I need to make a mobile app…
Objective C

Android
Flavored Java

C# XAML
Objective C

Android
Flavored Java

C# XAML
PhoneGap
Genesis
Getting Started

cordova.apache.org
But who really uses HTML in their app?
What is PhoneGap?
Application container that allows you to build
natively installed apps using HTML, CSS & JavaScript
What is PhoneGap?

Your Code
What is PhoneGap?

Your Code

Native Web View
What is PhoneGap?

Your Code

Native Web View
Native APIs
What is PhoneGap?

Your Code

Native Web View
Native APIs

Native App - .apk, .ipa, etc
What platforms support PhoneGap?
Since it is HTML, CSS & JSS, can I use existing
tools/frameworks?
Caution…

PhoneGap uses the NATIVE browser on the
device to render the HTML/CSS/JS
Keep that in mind, as that can affect t...
Device Access
Features
Accelerometer - when the device moves
Camera - pictures of your cat
Capture - audio, video, stills of your cat
Co...
Features
Device - device and OS version metadata
Events - various app/hardware related events
File - native file system ac...
Features
Media - related to audio playback (supports
record as well)
Notification - visual, audible, and tactile
notificat...
PhoneGap 3.0
Beyond the mobile web
PhoneGap is extensible with a “native plugin”
model that enables you to write your own
native logic ...
PhoneGap Community (some…)
Building it

phonegap.com/start
Command Line Interface

docs.phonegap.com/en/3.0.0/guide_cli_index.md.html
Building it

build.phonegap.com
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/...
<gap:platform name="ios" />
<gap:platform name="android" />
<gap:platform name="winphone" />
<feature name="http://api.pho...
<icon src="icons/icon_144.png" gap:platform="ios" width="144" height="144" />
<icon src="icons/icon_36.png" gap:platform="...
ConfiGAP

configap.com
Building it

<Demo />
REAL WORLD BUILDING
•
•
•
•

Desktop Browser
Mobile via Web
Ripple Emulator
Local SDK to Simulator/Device
DESKTOP BROWSER
• Pro: Super Fast
• Pro: No setup
• Pro: Debugging Rocks
•
•
•
•

Con: UI isn't right
Con: UX isn't right
...
MOBILE VIA WEB
• Pro: Kinda Fast
• Pro: Minimal setup
• Pro: UI and UX testing
• Con: Features missing
• Con: Security res...
RIPPLE EMULATOR
•
•
•
•

Pro: Fast
Pro: Similar UI
Pro: Free
Pro: Security restrictions gone

• Con: Doesn't support 100% ...
TO INSTALL
• Go to the Chrome Web Store:
https://chrome.google.com/webstore/category/home

• Search for "ripple"
• Click E...
LOCAL SDK TO SIMULATOR/DEVICE
• Pro: The Real Deal
• Con: Slow(ish)
• Con: Not Free
• Con: Debugging can suck
TO BE CLEAR:...
Hydration
Now go build something!
Thanks!
chris.griffith@gmail.com
@chrisgriffith
http://chrisgriffith.wordpress.com/
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Upcoming SlideShare
Loading in...5
×

Intro to PhoneGap and PhoneGap Build

1,717

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 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,717
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
90
Comments
0
Likes
1
Embeds 0
No embeds

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&apos;s implementationPhoneGap == Cordova
  • Windows Phone 7/8 (+ Windows 8)
  • Some variability here, based on exact platform.
  • Transcript of "Intro to PhoneGap and PhoneGap Build"

    1. 1. @ChrisGriffith
    2. 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. 3. Who has built for mobile?
    4. 4. Who is developing for iOS?
    5. 5. Who is developing for Android?
    6. 6. I need to make a mobile app…
    7. 7. Objective C Android Flavored Java C# XAML
    8. 8. Objective C Android Flavored Java C# XAML
    9. 9. PhoneGap
    10. 10. Genesis
    11. 11. Getting Started cordova.apache.org
    12. 12. But who really uses HTML in their app?
    13. 13. What is PhoneGap? Application container that allows you to build natively installed apps using HTML, CSS & JavaScript
    14. 14. What is PhoneGap? Your Code
    15. 15. What is PhoneGap? Your Code Native Web View
    16. 16. What is PhoneGap? Your Code Native Web View Native APIs
    17. 17. What is PhoneGap? Your Code Native Web View Native APIs Native App - .apk, .ipa, etc
    18. 18. What platforms support PhoneGap?
    19. 19. Since it is HTML, CSS & JSS, can I use existing tools/frameworks?
    20. 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. 21. Device Access
    22. 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. 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. 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. 25. PhoneGap 3.0
    26. 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. 27. PhoneGap Community (some…)
    28. 28. Building it phonegap.com/start
    29. 29. Command Line Interface docs.phonegap.com/en/3.0.0/guide_cli_index.md.html
    30. 30. Building it build.phonegap.com
    31. 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. 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. 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. 34. ConfiGAP configap.com
    35. 35. Building it <Demo />
    36. 36. REAL WORLD BUILDING • • • • Desktop Browser Mobile via Web Ripple Emulator Local SDK to Simulator/Device
    37. 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. 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. 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. 40. TO INSTALL • Go to the Chrome Web Store: https://chrome.google.com/webstore/category/home • Search for "ripple" • Click Extensions
    41. 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. 42. Hydration
    43. 43. Now go build something!
    44. 44. Thanks! chris.griffith@gmail.com @chrisgriffith http://chrisgriffith.wordpress.com/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×