Introduction to Phonegap

Andrei Firoiu @andreifiroiu

http://andreifiroiu.me

Mobile app types

• Native

• Web based

• Hybrid

Native• dev in device-specific languages (Objective C,

Java)

• full access to device APIs (storage, location services, sensors, etc)

• native UI

• fast

Web based• dev in web based languages/frameworks (HTML5,

JavaScript)

• running in browser, everything is loaded from a server

• no access to native APIs

• easy to made/deploy

• slow

Hybrid

• layout rendering is done via web views

• packaged as apps for distribution

• have access to native device APIs (plugins, intermediate APIs)

• intermediate speed

Hybrid Platforms

• PhoneGap

• Intel App Framework

• Titanium Appcelerator

• and more

Phonegap History• 2008 - Born at iPhoneDevCamp event in San

Francisco

• 2009 - Apple Inc. has confirmed that the framework has its approval

• 2011 - Adobe officially announced the acquisition of Nitobi Software

• 2011 - Contributed to the Apache Software Foundation (Apache Cordova)

!

Phonegap =

Apache Cordova

http://phonegap.com/ https://cordova.apache.org/

Phonegap = Apache Cordova

• Cordova is the open source Apache project

• Phonegap is the downstream distribution of Cordova from Adobe

• PhoneGapBuild (cloud compiler)

Supported platforms!

• iOS

• Android

• Windows 8

• Windows Phone 7 and 8

• BlackBerry 5.x+

• WebOS

• Symbian

• Tizen

Platform Components

• web UI frameworks (jQuery Mobile)

• a set of device APIs that allow to access native device functions from JavaScript

• a bridging mechanism that allows JavaScript running in the Web view to invoke native code contained in the application

Mobile Frameworks• jQuery Mobile

• Ionic / Angular

• Sencha Touch

• Kendo UI Complete

• AppGyver / Steroids

• Enyo

• …and another quadrillion of them

Plugins!

• battery status

• accelerometer / compass

• camera

• contacts

• file system

• media playback and recording

• network availability

• geolocation

Plugins!

• barcode scanning

• Bluetooth

• push notifications

• text to speech

• calendars

• Facebook Connect

DOM objects / API calls

Demo Time!

Examples

Debugging• Browser dev/debugging tools

• Apache Ripple

• Safari Web Inspector

• Google Chrome Dev Tools

• weinre (WEb INspector REmote)

PhoneGapBuild

• Build apps in the cloud

• Don’t need platform specific tools (Xcode, Android SDK)

Conclusions

• Unitary design across mobile platforms

• Attempting to mimic the native platform controls in HTML and CSS is generally a bad idea.

• Best for rapid prototyping

• Code once, deploy everywhere

Thanks! Q&A

Andrei Firoiu @andreifiroiu

http://andreifiroiu.me