Developing Windows Phone 8 Apps using PhoneGap

Amar Mešić

Senior Software Developer

Source Code d.o.o. Tuzla

Open at Microsoft

Agenda• What is PhoneGap, how does it work?• Setting up IDE for developing WP8 apps• Common app scenarios

• Fetching data from web (JSON)• Persistency accross pages• Bing maps• Geolocation• File and local storage

• PhoneGap build• Porting our apps to another platform 

Open at Microsoft

About PhoneGapIt's an open source framework for building mobile apps using web-technologies.

• HTML for layout ( Better yet HTML5 )• JavaScript for accessing device functionality• CSS for look and feel.

It's a collection of tools + a consistent cross-device API.

• Use the same JavaScript calls to access device functions. 

navigator.notification.vibrate();

Open at Microsoft

About PhoneGap• Supports development for the following operating

systems:

Android, iOS, Windows Phone, webOS, Windows Mobile, Symbian OS and BlackBerry

• PhoneGap Website: http://phonegap.com/

• Source code available on github https://github.com/phonegap/

Open at Microsoft

About Phone Gap?• The PhoneGap applications are hybrid• They are neither truly native nor purely web based• All layout rendering is done via the web view instead

of XAML• Much of the functions of HTML5 are supported• A disadvantage is that hybrid applications do not

have FULL access to the device API (Camera, compass, accelerometer, etc.)

• PhoneGap is just a library that you must include in your app (few JavaScript and XML files)

Open at Microsoft

What does it do?• PhoneGap generates a out-of-the-browser window

that executes the HTML and JavaScript• Due to a couple of xml and dll files it enables the

usage of native APIs• Device API supported by most platforms:

Open at Microsoft

• GeoLocation• Compass ( for 3GS )• Accelerometer• Telephony• Camera

• Media Playback + Recording• Contacts ( read-only )• Video with HTML5 Video tag• FileIO ( local application

documents folder )• Cache images or data from the web

What does it do?

Open at Microsoft

So PhoneGap apps are just web pages? Yup, web pages that access device functionality.

• Apps can still provide a rich experience, especially with CSS transitions and tweening animations.

• CSS Transitions are hardware accelerated !• There are games built with PhoneGap!

Open at Microsoft

How is PhoneGap different from a mobile site?

• Mobile websites are domain restricted to their origin url and cannot access device API

• Apps are loaded from the file://protocol so server requests are NOT restricted

Pros and cons

Open at Microsoft

• HTML5, CSS and JavaScript skills vs. C#, Java and Objective-C

• Single code base for all platforms

• Poor performance• Lack of pre-built UI widgets, standard controls,

transitions• Your development time can take longer

Pros

Cons

Typical PhoneGap app scenario

Open at Microsoft

• JavaScript calls the server to fetch JSON data.• HTML/JS/CSS + graphic assets are on the device,

packaged as part of the build process.• JavaScript can store retrieved data in a SQLite

database for offline access.• Maps• Accessing local storage• Persistent data accross pages

Getting started

Open at Microsoft

• IDE• Visual Studio• Eclipse• xCode• Adobe Edge • Any other editor

• OS SDK• PhoneGap library• More tools available at http://phonegap.com/tool

Setting up our environment

Open at Microsoft

DEMO

PhoneGap Config file

Open at Microsoft

• Used for cross-platform configuration and customization (app capabilities, description, specific platform settings<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.phonegap.openms" versionCode="10" version = "1.0.0">

</widget>

<name>Open at Microsoft</name>

<description> App description </description>

UI design

Open at Microsoft

• jQuery Mobile• MooTools• XUI• jQTouch• Kendo UI • PhoneJS

Common app scenarios

Open at Microsoft

• Fetching data from web (JSON)

• Persistency accross pages

• Bing maps

• Geolocation

• File storage

Fetching data from web service (JSON)

Open at Microsoft

• HTTPWebRequest & JSON.NET vs jQuery

Bing Maps & Geolocation

Open at Microsoft

• Map control vs Bing Maps API

• Register on http://bingmapsportal.com to obtain API

key for your app

• Alternative maps:

• Google Maps

• OSM

• CloudMade

Local Database

Open at Microsoft

• PhoneGap uses SQLite database

• Requires permissions

var db = window.openDatabase(database_name, database_version,

database_displayname, database_size);

db.transaction(populateDB, errorCB, successCB);

• Alternative: use JS with local storage

• CouchDB, TaffyDB, NeDB, PouchDB

• Backbone.js

API Reference

Open at Microsoft

• File API provides accecss to Isolated Storage

• Connection object gives access to device cellular and

wifi info

• Contacts object provides access to

• Events : deviceready, online, offline, backbutton,

menubutton

• Device object provides name, platform, version

• Full list of API device funcions available at

http://docs.phonegap.com/

Best practises

Open at Microsoft

• Main advantage of PhoneGap is you can reuse your web

application source code across platforms.

• A good, quick approach is to write one set of assets and

‘tweak’ across platforms.

• MVC (model-view-controller) paradigm is great for prototyping, as you

can revisit and, if need be, recode particular modules of your app as

you iterate.

• Model = PhoneGap JS API + offline storage

• Controller = JavaScript

• View = HTML + CSS

Best practises

Open at Microsoft

• As you work on an app, you notice repeatable HTML/CSS

patterns that come up. Don’t copy+paste it!

• Encapsulate the view pattern HTML in a JavaScript

string

• Mobile devices will not be networked all the time. Bad

coverage, on the plane, no data plan

• PhoneGap offers reachability API

Best practises

Open at Microsoft

• For small apps, use a single HTML page.

• Use JavaScript to show/hide page elements based on user

interaction instead of linking to a separate page.

• Obfuscate your JavaScript before release.

When NOT to use PhoneGap:

• Complex games, intensive graphics. Use OpenGL for that, not

PhoneGap.

• For slower phones. PhoneGap apps using the latest interactive

Google Maps APIs tend to be slow.

PhoneGap Build

Open at Microsoft

• It allows you to easily build those same mobile apps in

the cloud

• Simply upload your www folder or point to GIT/SVN repo

• You can skip build for cetrain platforms using the

config.xml file

• No need to install aditional software

• App ready for submission if provided with certificates /

signing keys

Open at Microsoft

QUESTIONS ?