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

Developing Windows Phone 8 apps using PhoneGap

on

  • 1,126 views

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

Statistics

Views

Total Views
1,126
Views on SlideShare
1,126
Embed Views
0

Actions

Likes
1
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Developing Windows Phone 8 apps using PhoneGap Developing Windows Phone 8 apps using PhoneGap Presentation Transcript

  • 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 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
  • 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 DEM O
  • 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 ?