Developing Windows Phone 8 apps using PhoneGap
Download as PPTX, PDF2 likes3,020 views
This document provides a comprehensive overview of developing Windows Phone 8 applications using PhoneGap, an open-source framework that leverages web technologies such as HTML5, CSS, and JavaScript. It discusses the setup process, common app scenarios, the advantages and disadvantages of hybrid applications, and best practices for implementation. Additionally, it covers the tools required for development, including IDEs and APIs for accessing device functionalities.
Developing Windows Phone 8 apps using PhoneGap
- 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