Lecture about Windows Phone 8 app development using PhoneGap, Open at Microsoft conference, Sarajevo, Bosnia and Herzegovina

1. Developing Windows Phone 8 Apps using
PhoneGap
Amar Mešić
Senior Software Developer
Source Code d.o.o. Tuzla
Open at
Microsoft

2. 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

3. About PhoneGap
It'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

4. 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

5. 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

6. 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

7. What does it do?
Open at
Microsoft

8. 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

9. 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

10. 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

11. 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

12. Setting up our environment
Open at
Microsoft
DEM
O

13. 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>

14. UI design
Open at
Microsoft
• jQuery Mobile
• MooTools
• XUI
• jQTouch
• Kendo UI
• PhoneJS

15. Common app scenarios
Open at
Microsoft
• Fetching data from web (JSON)
• Persistency accross pages
• Bing maps
• Geolocation
• File storage

16. Fetching data from web service (JSON)
Open at
Microsoft
• HTTPWebRequest & JSON.NET vs jQuery

17. 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

18. 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

19. 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/

20. 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

21. 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

22. 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.

23. 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

24. Open at
Microsoft
QUESTIONS ?