[jsdc.tw] introduction to phonegap
Post on 26-May-2015
3.243 Views
Preview:
TRANSCRIPT
Introduction to PhoneGap
Kuro Hsu @ JSDC
2012/05/19
& Building mobile apps with HTML5, CSS3 and Javascript.
Mobile is Growing
• In January 2012, 8.49 percent of website hits/page-views come from a handheld mobile device
-- StatCounter
• Mobile will be bigger than desktop internet in 5 years -- Morgan Stanley
• 2.1 billion mobile devices will have HTML5 browsers by 2016 up from 109 million in 2010 -- ABI Research
Mobile development is mess.
Android Java
BlackBerry Java
iOS Objective-C
Palm OS C, C++, Pascal
Symbian C++
Windows Phone C#
Mobile Users prefer browsers over apps
The Web is awesome!
http://mobilehtml5.org/
Build Mobile Web with HTML5
• Setup the Viewport
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> @viewport { width: device-width; zoom: 1.0; maximum-scale: 1.0; user-zoom: fixed; /* zoom = 1, fixed = 0 */ }
Build Mobile Web with HTML5
• Handheld Friendly
<meta name="handheldfriendly" content="true" />
• Mobile Optimized
<meta name= "mobileoptimized" content="320" />
Build Mobile Web with HTML5
• Mobile CSS Reset
http://www.vcarrer.com/2010/11/css-mobile-reset.html
• CSS Features -webkit-text-size-adjust: none;
-webkit-tap-highlight-color: transparent; position: fixed; /* iOS5 & Android 2.2+ */ overflow: scroll; /* iOS5 */ ……, and more.
Build Mobile Web with HTML5
• Media Queries
@media only screen and (max-width: 480px) { /* small screen styles */ } @media only screen and (min-width: 481px) { /* large screen styles */ }
http://mediaqueri.es
Build Mobile Web with HTML5
<input type="number" pattern="[0-9]*" /> <input type="email" required /> <input type="text" autocapitalize="off" autocorrect="off" />
<input type="url" /> <input type="tel" /> <input type="date"> <input type="datetime"> <input type="month"> <input type="time"> <input type="range">
• Advanced Forms in Mobile
Build Mobile Web with HTML5
• Advanced Forms in Mobile
Build Mobile Web with HTML5
• Advanced links
<a href="tel:+886987654321"> Call Me</a> <a href="sms:+886987654321"> Send SMS</a>
Build Mobile Web with HTML5
• Media Support
<video controls width="640" height="368" x-webkit-airplay="allow" src="content/side_with_the_seeds.mov"> </video> <audio controls preload="auto" autobuffer> <source src="elvis.mp3" /> <source src="elvis.ogg" /> </audio>
Build Mobile Web with HTML5
• Events - Orientation:
window.addEventListener('orientationchange', chkOrientation, false); function chkOrientation(ev){
var orient; if (window.orientation) { orient = (Math.abs(window.orientation) === 90) ? 'landscape' : 'portrait'; }
}
Build Mobile Web with HTML5
• Events - Touch events:
window.addEventListener("touchstart", touchEvents, false); window.addEventListener("touchmove", touchEvents, false); window.addEventListener("touchend", touchEvents, false); window.addEventListener("touchcancel", touchEvents, false); function touchEvents(ev){ // do something... }
Build Mobile Web with HTML5
• Events – Gesture events : window.addEventListener("gesturestart", gstEvents, false); window.addEventListener("gestureend", gstEvents, false); window.addEventListener("gesturechange", gstEvents, false); function gstEvents(ev){ // do something... }
Build Mobile Web with HTML5
• Events - DeviceMotion:
window.addEventListener("devicemotion", accel, false); function accel(ev){ // ev.acceleration.x/y/z; // do something… }
Build Mobile Web with HTML5
• Geolocation API
if(window.navigator.geolocation){ var geo = navigatoe.geolocation(); geo.getCurrentPosition(getPosSuccess); } function getPosSuccess(pos){ var lat = pos.coords.latitude; var lon = pos.coords.longitude; }
window.navigator.geolocation.getCurrentPosition( success, [failure, [options]] );
Build Mobile Web with HTML5
• Canvas API
Build Mobile Web with HTML5
• Offline Web Application Cache
<html manifest="/cache.manifest">
# COMMENT THERE CACHE MANIFEST js/* index.html style.css ……
NETWORK: search.php …… FALLBACK: dynamic.php …… CACHE: ……
Build Mobile Web with HTML5
• LocalStorage / SessionStorage
localStorage["bar"] = "hello world!"; var foo = localStorage.getItem("bar"); localStorage.setItem("bar", "hello JSDC!"); localStorage.removeItem("bar"); localStorage.clear();
Mobile Web Strategy
Mobile Web Strategy
• Evaluate your requirement
Mobile Web Strategy
• Mobile-First, Responsive Design
Mobile Web Strategy
• Progressive Enhancement
Source: Adam Wang
Mobile Web Strategy
• Lighter is better
Mobile Web Strategy
• Evaluate your requirement
• Mobile-First, Responsive Design
• Progressive Enhancement
• Lighter is better
To App or Not to App?
Web vs. Native
Web Native
Dev Cost Reasonable Expensive
Dev Time Short Long
Portability High None
Performance Fast Very Fast
Native Functionality No All
App Store Distribution No Yes
Extensible No Yes
Web vs. Hybrid vs. Native
Web Hybrid Native
Dev Cost Reasonable Reasonable Expensive
Dev Time Short Short Long
Portability High High None
Performance Fast Fast Very Fast
Native Functionality No Yes All
App Store Distribution No Yes Yes
Extensible No Yes Yes
PhoneGap
PhoneGap
Started in 2008
iPhoneDevCamp
Working prototype with geolocation
PhoneGap
2008: support iPhone, Android and Blackberry 4
2009: Added Symbian and webOS support. "Rejected" by Apple.
2011: Added Windows Phone 7 support. Adobe officially announced the acquisition of Nitobi Software on October 4. In process to becoming a project under the Apache
Software Foundation. And New Name…
Callback (PhoneGap 1.1.0)
Callback
Apache Cordova ( From PhoneGap 1.5.0 )
Apache Cordova
Cordova is the open source project
PhoneGap is the implementation
Like Webkit for Chrome/Safari
http://incubator.apache.org/cordova/
What is PhoneGap ?
Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
What is PhoneGap / Cordova ?
Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
What is PhoneGap / Cordova ?
PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best... HTML and JavaScript.
What is PhoneGap / Cordova ?
Write Once, Run Anywhere?
So, it means...?
NO
Write Once, Debug Everywhere.
The Truth Is...
Uses Platforms Native Control
iOS Android Blackberry webOS Symbian Windows Phone 7.0
WebKit 532.9
WebCore Javascript
Core
WebKit with V8
WebKit WebKit
with Piranah
WebKit S60 or Qt?
…
Uses Platforms Native Control
iOS Android Blackberry webOS Symbian Windows Phone 7.0
WebKit 532.9
WebCore Javascript
Core
WebKit with V8
WebKit WebKit
with Piranah
WebKit S60 or Qt? IE7
Uses Platforms Native Control
iOS Android Blackberry webOS Symbian Windows Phone 7.5
WebKit 532.9
WebCore Javascript
Core
WebKit with V8
WebKit WebKit
with Piranah
WebKit S60 or Qt? IE9
Uses Platforms Native Control
iOS Android Blackberry webOS Symbian Windows Phone 7.5
WebKit 532.9
WebCore Javascript
Core
WebKit with V8
WebKit WebKit
with Piranah
WebKit S60 or Qt? IE9
1. Write a web app using HTML5 technologies: HTML5 / CSS / JS
How does PhoneGap work?
2. Package your web app into PhoneGap
How does PhoneGap work?
2. Package your web app into PhoneGap
How does PhoneGap work?
3. Deploy your Native App to multiple devices ( iOS, Android, Blackberry, WP 7..., and so on. )
How does PhoneGap work?
Native Web Control
How does PhoneGap work?
FFI
Common Plugins
Custom Plugins
* FFI = Foreign Function Interface
Common Plugins: Good support across platforms.
PhoneGap API / Plugins:
Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device
Events
File
Geolocation
Media
Notification
Storage
PhoneGap 1.7.0 - http://phonegap.com/about/features
Custom Plugins: Terrible support across platforms, and you can make it on you own!
PhoneGap API / Plugins:
https://github.com/phonegap/phonegap-plugins
An interface to the most common set of device functionality.
All APIs features are plugins.
All accessible through JavaScript (PhoneGap Bridge).
PhoneGap API / Plugins:
JDK 1.6+
Android SDK with an Android 2.2+
Eclipse & Android ADT plugin for Eclipse OR Any Text Editor
PhoneGap
Requirements ( for Android )
Get Started !
http://phonegap.com/start
Mobile Debugging
Webkit on PC
Mobile Debugging
Mobile Safari debugging
Mobile Debugging
Ripple Mobile Environment Emulator (Chrome)
Mobile Debugging
Weinre / debug.phonegap.com
Mobile Debugging
Adobe Shadow
Mobile Debugging
Webkit on PC
Mobile Safari debugging
Ripple Mobile Environment Emulator
weinre ( WEb INspector REmote )
Adobe Shadow
Mobile Debugging
PhoneGap doesn't bundle a UI framework, but they support any JS framework that works in the browser.
PhoneGap is just a fancy browser.
Native still gives the best performance.
“The ultimate purpose of PhoneGap is to cease to exist…”
－ Brian LeRoux, Nitobi (now Adobe)
http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/
Web is Native.
JavaScript Rocks !
Thanks!
Kuro Hsu
kurotanshi @ gmail.com
http://kuro.tw
https://twitter.com/kurotanshi
http://www.plurk.com/kurotanshi
top related