Getting Started with LAN Networks Getting Started with LAN Networks.
Getting started with PhoneGap
-
Upload
patrick-van-kouteren -
Category
Technology
-
view
474 -
download
0
description
Transcript of Getting started with PhoneGap
Getting started with
010PHP, October 10th 2013
And you are?
Patrick van Kouteren
Lead developer – Infopact Netwerk & Communicatie
Developer (& owner) – WeDesignIt
F1, Running, Aquaria, CODING
pvankouteren
@pvankouteren
IRC pvankouteren
Mobile facts and estimates(http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/)
Increments in mobile share of web traffic in just two years:
North America: +69%Asia: + 192%
Africa is getting started..
Joining the OS party..
Application considerations
Target audience? App? WebApp? Responsive website? Focus on one or a couple of platforms?
Introducing Phonegap
Adobe / Nitobi Apache Cordova Goal: to cease to exist Abstraction for many platforms, different
programming languages
What does it do?
• HTML5 container
• Javascript APIs to device functionalities
• Plugins
How to install
• Prerequisite: Node.js
• Dependent on build type: target platform(s) SDK(s)
Installing:
Getting started: Phonegap CLI
Getting started: Phonegap CLI
Getting started: Phonegap CLI
Getting started: Phonegap CLI
File structure
• merges
• platforms
• plugins
• www
Platform specific code to merge
Build output per platform
Project plugins
Project code
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)
config.xml: preferences
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
Creating an app..
• Still kind of a wild west..
• Use what works for you
• For the sake of speed: layers and code size
Creating an app: HTML
Creating an app: Javascript
App testing: Javascript
• Unit testing: Jasmine provided on creation
• Selenium, appium
App testing: User testing
• Regular browser testing
• Browser plugin: Ripple
• Devices > browser!
App testing: User testing
App testing: User testing
App testing: User testing
App testing:
• Once built: Simulators for Android, Xcode etc.
Building
• Local: SDKs needed!
• Remote: build.phonegap.com
• 1st private app / Open source: free
• 2-25 private apps: >= $ 10/month
Building local on CLI
Building local on CLI
Looks familiar?
Applied config.xml
Testing on devices
• Browser never as accurate as device
• Various screen sizes and resolutions
• Input lag
• Touch instead of mouse: drag / swipe events
Testing on devices
Testing on devices
OpenDeviceLab
http://opendevicelab.com
Phonegap is an awesome tool..
but...
.. 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
Platforms and tools support
Platforms and tools support
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”
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
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
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
Useful resources
• http://docs.phonegap.com
• http://diveintohtml5.info
• http://coenraets.org/blog/
• http://devgirl.org
• http://phonegap-tips.com
Questions?
Thanks!
Questions, comments:
pvankouteren | @pvankouteren | IRC pvankouteren