Developing Windows Phone 8 apps using PhoneGap
-
Upload
amar-mesic -
Category
Software
-
view
1.931 -
download
6
description
Transcript of Developing Windows Phone 8 apps using PhoneGap
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 ?