Intro to PhoneGap and PhoneGap Build
63
@ChrisGriffith
-
Upload
chris-griffith -
Category
Technology
-
view
1.647 -
download
6
description
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
Transcript of 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="[email protected]">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!
@chrisgriffith
http://chrisgriffith.wordpress.com/
