Getting started with PhoneGap
-
Upload
patrick-van-kouteren -
Category
Technology
-
view
475 -
download
0
description
Transcript of Getting started with PhoneGap
![Page 1: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/1.jpg)
Getting started with
010PHP, October 10th 2013
![Page 2: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/2.jpg)
And you are?
Patrick van Kouteren
Lead developer – Infopact Netwerk & Communicatie
Developer (& owner) – WeDesignIt
F1, Running, Aquaria, CODING
pvankouteren
@pvankouteren
IRC pvankouteren
![Page 3: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/3.jpg)
Mobile facts and estimates(http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/)
![Page 4: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/4.jpg)
Increments in mobile share of web traffic in just two years:
North America: +69%Asia: + 192%
Africa is getting started..
![Page 5: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/5.jpg)
![Page 6: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/6.jpg)
![Page 7: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/7.jpg)
Joining the OS party..
![Page 8: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/8.jpg)
Application considerations
Target audience? App? WebApp? Responsive website? Focus on one or a couple of platforms?
![Page 9: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/9.jpg)
Introducing Phonegap
Adobe / Nitobi Apache Cordova Goal: to cease to exist Abstraction for many platforms, different
programming languages
![Page 10: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/10.jpg)
What does it do?
• HTML5 container
• Javascript APIs to device functionalities
• Plugins
![Page 11: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/11.jpg)
How to install
• Prerequisite: Node.js
• Dependent on build type: target platform(s) SDK(s)
Installing:
![Page 12: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/12.jpg)
Getting started: Phonegap CLI
![Page 13: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/13.jpg)
Getting started: Phonegap CLI
![Page 14: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/14.jpg)
Getting started: Phonegap CLI
![Page 15: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/15.jpg)
Getting started: Phonegap CLI
![Page 16: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/16.jpg)
File structure
• merges
• platforms
• plugins
• www
Platform specific code to merge
Build output per platform
Project plugins
Project code
![Page 17: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/17.jpg)
![Page 18: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/18.jpg)
config.xml
• App name, description, author
• App behavior (“preferences”)
• App permissions (“preferences”)
• Icon and splash screen locations
• Whitelisting of domains (like urls for in-app browser)
![Page 19: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/19.jpg)
config.xml: preferences
![Page 20: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/20.jpg)
Creating an app..
• HTML5
• CSS: plain, Twitter Bootstrap, TopCoat
• Javascript: plain, AngularJS, Ember, Backbone.js, Knockout.js, Knockback.js, Spine…
And/or
• Frameworks/libaries: jQuery mobile (tip: save time, use the themeroller..), Sencha, Phone.js
![Page 21: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/21.jpg)
Creating an app..
• Still kind of a wild west..
• Use what works for you
• For the sake of speed: layers and code size
![Page 22: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/22.jpg)
Creating an app: HTML
![Page 23: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/23.jpg)
Creating an app: Javascript
![Page 24: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/24.jpg)
App testing: Javascript
• Unit testing: Jasmine provided on creation
• Selenium, appium
![Page 25: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/25.jpg)
App testing: User testing
• Regular browser testing
• Browser plugin: Ripple
• Devices > browser!
![Page 26: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/26.jpg)
App testing: User testing
![Page 27: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/27.jpg)
App testing: User testing
![Page 28: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/28.jpg)
App testing: User testing
![Page 29: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/29.jpg)
App testing:
• Once built: Simulators for Android, Xcode etc.
![Page 30: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/30.jpg)
Building
• Local: SDKs needed!
• Remote: build.phonegap.com
• 1st private app / Open source: free
• 2-25 private apps: >= $ 10/month
![Page 31: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/31.jpg)
Building local on CLI
![Page 32: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/32.jpg)
Building local on CLI
![Page 33: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/33.jpg)
![Page 34: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/34.jpg)
Looks familiar?
![Page 35: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/35.jpg)
Applied config.xml
![Page 36: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/36.jpg)
Testing on devices
• Browser never as accurate as device
• Various screen sizes and resolutions
• Input lag
• Touch instead of mouse: drag / swipe events
![Page 37: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/37.jpg)
Testing on devices
![Page 38: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/38.jpg)
Testing on devices
OpenDeviceLab
http://opendevicelab.com
![Page 39: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/39.jpg)
Phonegap is an awesome tool..
but...
![Page 40: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/40.jpg)
.. not unlimited awesome
• Abstraction layer: less responsive than native
• It uses browser components of OS
• Yes, browser related stuff still holds
(who wants to work with Windows Mobile now?)
• Games: canvas, javascript, hardware rendering
![Page 41: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/41.jpg)
Platforms and tools support
![Page 42: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/42.jpg)
Platforms and tools support
![Page 43: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/43.jpg)
Some issues I encountered..
• (iOS) fixed header: initial scollpane offset
• Fix: trigger window resize on start
• (Android < 3, jQuery Mobile) <select> items not showing
• Fix: data-native-menu=“false”
![Page 44: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/44.jpg)
Some issues I encountered..
• (iOS) Splash screen config: statusbar on splash screen display
• Fix: Enable this in CODE, not in Xcode
• (Android) Splash screen duration: config setting not used
• Fix: Enable this in code
![Page 45: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/45.jpg)
Summarized
• Many platforms out there (still increasing)
• HTML, CSS, JS -> native project with container
• Powerful CLI tool
• No standards: Pick the tools that work for you
• Testing options, UX: device > browser
• Support for many platforms, APIs, but not all
![Page 46: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/46.jpg)
Future
• Native vs. HTML5
• HTML5 app structure seems to converge:
• Chrome apps
• Firefox OS (mobile + TV!)
• Phonegap
• Tizen (mobile + TV!)
• By 2014, mobile internet expected to take over desktop usage
![Page 47: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/47.jpg)
Useful resources
• http://docs.phonegap.com
• http://diveintohtml5.info
• http://coenraets.org/blog/
• http://devgirl.org
• http://phonegap-tips.com
![Page 48: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/48.jpg)
Questions?
![Page 49: Getting started with PhoneGap](https://reader030.fdocuments.in/reader030/viewer/2022012916/54564237b1af9f37608b4c02/html5/thumbnails/49.jpg)
Thanks!
Questions, comments:
pvankouteren | @pvankouteren | IRC pvankouteren