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

Intro to PhoneGap and PhoneGap Build

on

  • 1,380 views

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

Statistics

Views

Total Views
1,380
Views on SlideShare
729
Embed Views
651

Actions

Likes
1
Downloads
47
Comments
0

7 Embeds 651

http://chrisgriffith.wordpress.com 611
http://html5devconf.com 25
https://chrisgriffith.wordpress.com 10
https://twitter.com 2
http://www.newsblur.com 1
http://cloud.feedly.com 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.

Intro to PhoneGap and PhoneGap Build Intro to PhoneGap and PhoneGap Build Presentation Transcript

  • @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 the experience
  • Device Access
  • 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
  • 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
  • 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
  • PhoneGap 3.0
  • 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
  • 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/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" />
  • <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" />
  • <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>
  • 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 Con: Features missing Con: Security restrictions
  • MOBILE VIA WEB • Pro: Kinda Fast • Pro: Minimal setup • Pro: UI and UX testing • Con: Features missing • Con: Security restrictions • Con: Debugging (kinda) sucks
  • 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
  • TO INSTALL • Go to the Chrome Web Store: https://chrome.google.com/webstore/category/home • Search for "ripple" • Click Extensions
  • 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
  • Hydration
  • Now go build something!
  • Thanks! chris.griffith@gmail.com @chrisgriffith http://chrisgriffith.wordpress.com/