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