1. Windows Store app
development
FOYZUL KARIM

2. What is Windows 8 anyway?

3. Your own Start screen, Live

4. Share yourself

5. New ways of interaction
Touch and mouse

6. Searching made easy

7. App Store

8. And many more…

9. “ Okey… But I don’t know
.NET…
YOU MIGHT ASK!!!
”
Which programming languages does this Operating System support?

10. “ You can develop if you
are…
”

11. Web developer
HTML, CSS, Javascript, jQuery
The web is native Build on what you
Distribute easily in Windows 8 already have
Windows Store apps sell in more Windows Store apps support most Your best stuff is on the web
than 200 markets, with support web standards like HTML5, CSS3,
and JavaScript. Use common and you don’t have time to
for local currencies in over 120 elements like canvas, SVG, video, rebuild it. Windows Store apps
markets, and developers can audio, 2D transforms, transitions support the >iframe< element
localize their apps in more than and animations just like you would
100 languages. Windows Store when supporting many modern and WebView controls so you
also offers full platform support browsers. You can also use can present your best content
common frameworks and libraries in a new way. You can even
for free apps, trials (time-based like jQuery.
and feature-based) and paid combine it with other coding
apps, 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 powerful
base is 70%, but when an app performance benefits of Windows app.
achieves $25,000 USD in 8, including the high-performance
revenue—aggregated across Chakra JavaScript engine, GPU-
all sales in every market—that powered hardware acceleration
and hardware sensors such as
app moves to 80% revenue accelerometers, GPS and
share for the lifetime of that gyroscopes.
app.

14. Windows Developer
C#, C++, VB
.NET
Build apps that Easier distribution Connect to the
reach more and app OS and cloud
people maintenance
Apps are core to the Windows Access the Windows Store and With the new Windows
8 experience, and with the package your Windows Store contracts, your app integrates
reach of the Windows install app for distribution directly seamlessly with other apps to
base and the Windows Store within Visual Studio – all without create powerful user
distribution 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 with
hundreds of markets available through the Windows very little code. And through
worldwide. And unlike other Store, you have access to cloud roaming, you can create
platforms, Windows 8 apps valuable telemetry data to a continuous experience across
scale automatically across monitor your app quality devices by roaming data that
devices – all while using the including JavaScript exception lets people pick up a task right
same code. rate, crash rate and app where they left off.
responsiveness rate.

15. Ratio Interactive

16. Designers
Adobe photoshop, Illustrator
Unleash your Elegant hardware
creativity on a provides the
Speak a modern new digital perfect stage for
design language canvas your experience
Microsoft's design language With Windows 8, your app is the Windows 8 runs on amazing
was created with digital in star of the show, as the hardware, from tablets to
mind. It allows content to come operating system fades to the laptops to all-in-ones with large
to life and at the same time background. Your app can high-definition screens. It’s the
help maintain a consistent take advantage of unique perfect place to showcase
personality and experience for features like live tiles, contracts your creativity and vision
the user. The language and cloud services to design through the experiences you
provides a universal tool to experiences that engage with create.
craft great apps that scale users in new ways.
gracefully across multiple
screen sizes.

20. So? Which platform do you prefer as
your development environment ?
Web platform .NET platform Others
Html C# C++
CSS Visual Basic
JS

21. I prefer money. What about money?
Image courtesy: http://www.insidehousing.co.uk/pictures/643xAny/2/5/0/37250_MONEY_MAGNET.jpg

22. Earn from your apps
Choose business model wisely
Selling differently Advertising Third party transactions
Collect full price before Attention-grabbing ads that are Develop your own payment
download not perceived as intrusive system into your CRM or other
existing system
Time limited trial Code that is easy to
integrate with both Windows 8
Feature limited trial and your app to help prevent
In app purchase crashes and protect battery life
Attractive revenue shares for
developers
The reach of Microsoft’s global
sales force and its strong
relationships

23. Getting started
 Get the tools
 Get the developer license
 Start development and create 'Hello World'

24. 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

26. Windows 8 Platforms and Tools
High level overview

27. What tools do we need
Windows 8 Visual Studio 2012 Blend
Operating system Integrated Development Designing IDE
Environment

28. Developer license
Visual studio Command prompt
• Getting a developer license • Getting a developer license
• Renewing the license

29. Application
development

30. Templates

31. JavaScript templates

32. C# Templates

33. Visual Basic Templates

34. C++ Templates

35. Blank application templates
JavaScript Application C# Application C++ Application

36. Deep Dive into JavaScript
Shall we?

37. Hello Rock Stars
http://starshapedrock.com/wp-content/uploads/2008/08/star1.jpg

38. HTML Code
Code Simulated output
Image Courtesy http://starshapedrock.com/wp-content/uploads/2008/08/star1.jpg

39. I don’t see
any main
program
or starting
code?
My Gosh..
its Magic!!!

40. Application Manifest

41. Where the hell is JavaScript?

42. default.js

43. A tale of
Promise
http://img9.joyreactor.com/pics/post/full/funny-pictures-auto-rage-comics-heck-no-383799.jpeg

44. What do we mean by promise?
In programming world?

45. http://wiki.commonjs.org/wiki/Promises
Promises provide a well-defined interface for interacting with an
object that represents the result of an action that is performed
asynchronously, and may or may not be finished at any given point in
time. By utilizing a standard interface, different components can
return promises for asynchronous actions and consumers can utilize
the promises in a predictable manner.
http://msdn.microsoft.com/en-us/library/windows/apps/br211867.aspx
A promise provides a mechanism to schedule work to be done on a value
that has not yet been computed. It is a convenient abstraction for managing
interactions with asynchronous APIs.

46. Promise.then
promise.then(onComplete, onError, onProgress).done( /* Your success
and error handlers */ );

47. WinJS.UI.processAll()
Returns Promise object

48. WinJS.UI.processAll().then()
Promise object has a method ‘then()’

49. WinJS.UI.processAll().then(
function completed() {
document.getElementById("definitionButton").addEventListener("click",
buttonClicked);
}
)
Inside of the then method we add necessary code

50. args.setPromise(
WinJS.UI.processAll().then(
function completed() {
document.getElementById("definitionButton").addEventListener("click",
buttonClicked);
}
)
);
setPromise makes sure that splash screen isn't taken down until the
app's page is ready.

51. What else can promise do?

52. 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

53. 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.

54. HTML

55. JavaScript code to change the div’s text

56. Output in
simulator

57. What about registering button
clicks?

59. Data Dash (data-*)
Custom data attributes are intended to store custom data private to the
page or application, for which there are no more appropriate attributes
or elements. [w3c]
<div id="contenthost"
data-win-control="Application.PageControlNavigator"
data-win-options="{home: '/pages/home/home.html'}">
</div>

60. Windows Controls
DATA-WIN-CONTROL

61. WinJS.UI.*
Windows controls in Javascript library

62. Rate this App!
Code Output

63. Rate this App!
function to return the element
Add the event listener
Event description

64. Working with Data

65. Data binding

66. Style and Data
binding

67. Where do we
put the data?
http://i.imgur.com/FrCKi.jpg

68. Data storage locations
User data App data Server
Libraries accessed by the Application Data APIs for the HTML5 Application Cache
Windows Runtime StorageFile Windows Runtime
and file pickers Cookies
IndexedDB
SkyDrive Cloud Services, OpenData
Extensible Storage Engine (ESE) Services, and Cloud Databases
HTML5 File API
HTML5 Web Storage
WinJS.Application.sessionState
WinJS.Application.local state
storage
WinJS.Application.roaming
state storage

69. Lets go to IDE…Thank you.