Developing Windows Phone 8 Apps using
PhoneGap
Amar Mešić
Senior Software Developer
Source Code d.o.o. Tuzla
Open at
Micro...
Agenda
• What is PhoneGap, how does it work?
• Setting up IDE for developing WP8 apps
• Common app scenarios
• Fetching da...
About PhoneGap
It's an open source framework for building mobile apps using web-
technologies.
• HTML for layout ( Better ...
About PhoneGap
• Supports development for the following operating systems:
Android, iOS, Windows Phone, webOS, Windows Mob...
About Phone Gap?
• The PhoneGap applications are hybrid
• They are neither truly native nor purely web based
• All layout ...
What does it do?
• PhoneGap generates a out-of-the-browser window that executes
the HTML and JavaScript
• Due to a couple ...
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 expe...
Pros and cons
Open at
Microsoft
• HTML5, CSS and JavaScript skills vs. C#, Java and Objective-C
• Single code base for all...
Typical PhoneGap app scenario
Open at
Microsoft
• JavaScript calls the server to fetch JSON data.
• HTML/JS/CSS + graphic ...
Getting started
Open at
Microsoft
• IDE
• Visual Studio
• Eclipse
• xCode
• Adobe Edge
• Any other editor
• OS SDK
• Phone...
Setting up our environment
Open at
Microsoft
DEM
O
PhoneGap Config file
Open at
Microsoft
• Used for cross-platform configuration and customization (app
capabilities, descri...
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
• Geolocati...
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...
Local Database
Open at
Microsoft
• PhoneGap uses SQLite database
• Requires permissions
var db = window.openDatabase(datab...
API Reference
Open at
Microsoft
• File API provides accecss to Isolated Storage
• Connection object gives access to device...
Best practises
Open at
Microsoft
• Main advantage of PhoneGap is you can reuse your web
application source code across pla...
Best practises
Open at
Microsoft
• As you work on an app, you notice repeatable HTML/CSS patterns
that come up. Don’t copy...
Best practises
Open at
Microsoft
• For small apps, use a single HTML page.
• Use JavaScript to show/hide page elements bas...
PhoneGap Build
Open at
Microsoft
• It allows you to easily build those same mobile apps in the cloud
• Simply upload your ...
Open at
Microsoft
QUESTIONS ?
Upcoming SlideShare
Loading in...5
×

Developing Windows Phone 8 apps using PhoneGap

2,349
-1

Published on

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

Published in: Software, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,349
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Developing Windows Phone 8 apps using PhoneGap

  1. 1. Developing Windows Phone 8 Apps using PhoneGap Amar Mešić Senior Software Developer Source Code d.o.o. Tuzla Open at Microsoft
  2. 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. 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. 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. 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. 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. 7. What does it do? Open at Microsoft
  8. 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. 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. 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. 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. 12. Setting up our environment Open at Microsoft DEM O
  13. 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. 14. UI design Open at Microsoft • jQuery Mobile • MooTools • XUI • jQTouch • Kendo UI • PhoneJS
  15. 15. Common app scenarios Open at Microsoft • Fetching data from web (JSON) • Persistency accross pages • Bing maps • Geolocation • File storage
  16. 16. Fetching data from web service (JSON) Open at Microsoft • HTTPWebRequest & JSON.NET vs jQuery
  17. 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. 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. 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. 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. 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. 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. 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. 24. Open at Microsoft QUESTIONS ?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×