Intro to PhoneGap and PhoneGap Build

@ChrisGriffith

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

Disclaimer

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?

Application container that allows you to build natively installed apps using HTML, CSS & JavaScript

What is PhoneGap?

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

Accelerometer - when the device movesCamera - pictures of your catCapture - audio, video, stills of your catCompass - for when you're lostConnection - type of connectionContacts - find and create new friends

Features

Device - device and OS version metadataEvents - various app/hardware related eventsFile - native file system access (+ upload)Geolocation - for when you're lostGlobalization - date/number/currency formatting

Features

Media - related to audio playback (supports record as well)Notification - visual, audible, and tactile notificationsSplashscreen - for your splash screen needsStorage - Mini database

Features

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/phonegap-plugins

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 />

• Desktop Browser• Mobile via Web• Ripple Emulator• Local SDK to Simulator/Device

REAL WORLD BUILDING

• 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

DESKTOP BROWSER

• Pro: Kinda Fast• Pro: Minimal setup• Pro: UI and UX testing

• Con: Features missing• Con: Security restrictions• Con: Debugging (kinda) sucks

MOBILE VIA WEB

• 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

RIPPLE EMULATOR

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

TO INSTALL

• 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

LOCAL SDK TO SIMULATOR/DEVICE

Hydration

Now go build something!

Thanks!

chris.griffith@gmail.com

@chrisgriffith

http://chrisgriffith.wordpress.com/