Windows Store application development

15,790 views
15,709 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,790
On SlideShare
0
From Embeds
0
Number of Embeds
14,296
Actions
Shares
0
Downloads
58
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Windows Store application development

  1. 1. Windows Store appdevelopmentFOYZUL KARIM
  2. 2. What is Windows 8 anyway?
  3. 3. Your own Start screen, Live
  4. 4. Share yourself
  5. 5. New ways of interactionTouch and mouse
  6. 6. Searching made easy
  7. 7. App Store
  8. 8. And many more…
  9. 9. “ Okey… But I don’t know .NET… YOU MIGHT ASK!!! ”Which programming languages does this Operating System support?
  10. 10. “ You can develop if you are… ”
  11. 11. Web developerHTML, CSS, Javascript, jQuery The web is native Build on what youDistribute easily in Windows 8 already haveWindows Store apps sell in more Windows Store apps support most Your best stuff is on the webthan 200 markets, with support web standards like HTML5, CSS3, and JavaScript. Use common and you don’t have time tofor local currencies in over 120 elements like canvas, SVG, video, rebuild it. Windows Store appsmarkets, and developers can audio, 2D transforms, transitions support the >iframe< elementlocalize their apps in more than and animations just like you would100 languages. Windows Store when supporting many modern and WebView controls so youalso offers full platform support browsers. You can also use can present your best content common frameworks and libraries in a new way. You can evenfor free apps, trials (time-based like jQuery.and feature-based) and paid combine it with other codingapps, including in-app When you write your Windows languages like C#, C++, VB,purchase. The revenue share Store app using web standards, it has access to all the underlying and XAML into one powerfulbase is 70%, but when an app performance benefits of Windows app.achieves $25,000 USD in 8, including the high-performancerevenue—aggregated across Chakra JavaScript engine, GPU-all sales in every market—that powered hardware acceleration and hardware sensors such asapp moves to 80% revenue accelerometers, GPS andshare for the lifetime of that gyroscopes.app.
  12. 12. Windows DeveloperC#, C++, VB.NETBuild apps that Easier distribution Connect to thereach more and app OS and cloudpeople maintenanceApps are core to the Windows Access the Windows Store and With the new Windows8 experience, and with the package your Windows Store contracts, your app integratesreach of the Windows install app for distribution directly seamlessly with other apps tobase and the Windows Store within Visual Studio – all without create powerful userdistribution channel, you have having to build your own install experiences like sharing,the opportunity to reach package. Once your app is searching and file pickers withhundreds of markets available through the Windows very little code. And throughworldwide. And unlike other Store, you have access to cloud roaming, you can createplatforms, Windows 8 apps valuable telemetry data to a continuous experience acrossscale automatically across monitor your app quality devices by roaming data thatdevices – all while using the including JavaScript exception lets people pick up a task rightsame code. rate, crash rate and app where they left off. responsiveness rate.
  13. 13. Ratio Interactive
  14. 14. DesignersAdobe photoshop, Illustrator Unleash your Elegant hardware creativity on a provides theSpeak a modern new digital perfect stage fordesign language canvas your experienceMicrosofts design language With Windows 8, your app is the Windows 8 runs on amazingwas created with digital in star of the show, as the hardware, from tablets tomind. It allows content to come operating system fades to the laptops to all-in-ones with largeto life and at the same time background. Your app can high-definition screens. It’s thehelp maintain a consistent take advantage of unique perfect place to showcasepersonality and experience for features like live tiles, contracts your creativity and visionthe user. The language and cloud services to design through the experiences youprovides a universal tool to experiences that engage with create.craft great apps that scale users in new ways.gracefully across multiplescreen sizes.
  15. 15. So? Which platform do you prefer asyour development environment ?Web platform .NET platform OthersHtml C# C++CSS Visual BasicJS
  16. 16. I prefer money. What about money?Image courtesy: http://www.insidehousing.co.uk/pictures/643xAny/2/5/0/37250_MONEY_MAGNET.jpg
  17. 17. Earn from your appsChoose business model wiselySelling differently Advertising Third party transactionsCollect full price before Attention-grabbing ads that are Develop your own paymentdownload not perceived as intrusive system into your CRM or other existing systemTime limited trial Code that is easy to integrate with both Windows 8Feature limited trial and your app to help preventIn app purchase crashes and protect battery life Attractive revenue shares for developers The reach of Microsoft’s global sales force and its strong relationships
  18. 18. Getting started  Get the tools  Get the developer license  Start development and create Hello World
  19. 19. Windows Store app  It runs on Windows 8 operating system  It runs on both tablet and desktop environment at a time  Compiled binaries of all supported languages are using same runtime engine  Runtime engine is called WinRT
  20. 20. Windows 8 Platforms and ToolsHigh level overview
  21. 21. What tools do we needWindows 8 Visual Studio 2012 BlendOperating system Integrated Development Designing IDE Environment
  22. 22. Developer license Visual studio Command prompt • Getting a developer license • Getting a developer license • Renewing the license
  23. 23. Applicationdevelopment
  24. 24. Templates
  25. 25. JavaScript templates
  26. 26. C# Templates
  27. 27. Visual Basic Templates
  28. 28. C++ Templates
  29. 29. Blank application templatesJavaScript Application C# Application C++ Application
  30. 30. Deep Dive into JavaScriptShall we?
  31. 31. Hello Rock Starshttp://starshapedrock.com/wp-content/uploads/2008/08/star1.jpg
  32. 32. HTML Code Code Simulated output Image Courtesy http://starshapedrock.com/wp-content/uploads/2008/08/star1.jpg
  33. 33. I don’t seeany mainprogramor startingcode?My Gosh..its Magic!!!
  34. 34. Application Manifest
  35. 35. Where the hell is JavaScript?
  36. 36. default.js
  37. 37. A tale ofPromise http://img9.joyreactor.com/pics/post/full/funny-pictures-auto-rage-comics-heck-no-383799.jpeg
  38. 38. What do we mean by promise?In programming world?
  39. 39. http://wiki.commonjs.org/wiki/PromisesPromises provide a well-defined interface for interacting with anobject that represents the result of an action that is performedasynchronously, and may or may not be finished at any given point intime. By utilizing a standard interface, different components canreturn promises for asynchronous actions and consumers can utilizethe promises in a predictable manner.http://msdn.microsoft.com/en-us/library/windows/apps/br211867.aspxA promise provides a mechanism to schedule work to be done on a valuethat has not yet been computed. It is a convenient abstraction for managinginteractions with asynchronous APIs.
  40. 40. Promise.thenpromise.then(onComplete, onError, onProgress).done( /* Your successand error handlers */ );
  41. 41. WinJS.UI.processAll()Returns Promise object
  42. 42. WinJS.UI.processAll().then()Promise object has a method ‘then()’
  43. 43. WinJS.UI.processAll().then( function completed() {document.getElementById("definitionButton").addEventListener("click",buttonClicked); } )Inside of the then method we add necessary code
  44. 44. args.setPromise( WinJS.UI.processAll().then( function completed() {document.getElementById("definitionButton").addEventListener("click",buttonClicked); } ) );setPromise makes sure that splash screen isnt taken down until theapps page is ready.
  45. 45. What else can promise do?
  46. 46. Strict Mode (JavaScript)  Strict mode is a way to introduce better error-checking into your code.  When we use strict mode, we cannot,  use implicitly declared variables, or  assign a value to a read-only property, or  add a property to an object that is not extensible
  47. 47. Two examples  "use strict"; function testFunction(){  function testFunction(){ "use strict"; var testvar = 4; return testvar; } testvar = 4; return testvar; } testvar testvar = 5; = 5;  variable declaration outside the  The variable declaration outside function causes the syntax error the function does not cause a "Variable undefined in strict syntax error, but the declaration mode." inside the function does.
  48. 48. HTML
  49. 49. JavaScript code to change the div’s text
  50. 50. Output insimulator
  51. 51. What about registering buttonclicks?
  52. 52. Data Dash (data-*)Custom data attributes are intended to store custom data private to thepage or application, for which there are no more appropriate attributesor elements. [w3c] <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: /pages/home/home.html}"></div>
  53. 53. Windows ControlsDATA-WIN-CONTROL
  54. 54. WinJS.UI.*Windows controls in Javascript library
  55. 55. Rate this App!Code Output
  56. 56. Rate this App!function to return the element Add the event listener Event description
  57. 57. Working with Data
  58. 58. Data binding
  59. 59. Style and Databinding
  60. 60. Where do we put the data?http://i.imgur.com/FrCKi.jpg
  61. 61. Data storage locationsUser data App data ServerLibraries accessed by the Application Data APIs for the HTML5 Application CacheWindows Runtime StorageFile Windows Runtimeand file pickers Cookies IndexedDBSkyDrive Cloud Services, OpenData Extensible Storage Engine (ESE) Services, and Cloud DatabasesHTML5 File API HTML5 Web Storage WinJS.Application.sessionState WinJS.Application.local state storage WinJS.Application.roaming state storage
  62. 62. Lets go to IDE…Thank you.

×