getting started with phonegap
DESCRIPTION
Introduction talk on Phonegap. Tells you why you should care about mobile, and how to start off using Phonegap. After seeing this presentation you should be able to start a Phonegap project pretty rapidly and feel comfortable with the file structure you're working in and structures of the platforms you're building your app for.TRANSCRIPT
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