Your SlideShare is downloading. ×
Developing Windows Phone 8 apps using PhoneGap
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Developing Windows Phone 8 apps using PhoneGap


Published on

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

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

Published in: Software, Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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: • Source code available on github 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
  • 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 = "" xmlns:gap = "" 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 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
  • 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 ?