Windows Store app

development FOYZUL KARIM

What is Windows 8 anyway?

Your own Start screen, Live

Share yourself

New ways of interaction Touch and mouse

Searching made easy

App Store

And many more…

“ ”

Okey… But I don’t know

.NET…

YOU MIGHT ASK!!!

Which programming languages does this Operating System support?

“ ”

You can develop if you

are…

Web developer HTML, CSS, Javascript, jQuery

Distribute easily

Windows Store apps sell in more than 200 markets, with support for local currencies in over 120 markets, and developers can localize their apps in more than 100 languages. Windows Store also offers full platform support for free apps, trials (time-based and feature-based) and paid apps, including in-app purchase. The revenue share base is 70%, but when an app achieves $25,000 USD in revenue—aggregated across all sales in every market—that app moves to 80% revenue share for the lifetime of that app.

The web is native

in Windows 8

Windows Store apps support most web standards like HTML5, CSS3, and JavaScript. Use common elements like canvas, SVG, video, audio, 2D transforms, transitions and animations just like you would when supporting many modern browsers. You can also use common frameworks and libraries like jQuery.

When you write your Windows Store app using web standards, it has access to all the underlying performance benefits of Windows 8, including the high-performance Chakra JavaScript engine, GPU-powered hardware acceleration and hardware sensors such as accelerometers, GPS and gyroscopes.

Build on what you

already have

Your best stuff is on the web and you don’t have time to rebuild it. Windows Store apps support the >iframe< element and WebView controls so you

can present your best content in a new way. You can even combine it with other coding languages like C#, C++, VB, and XAML into one powerful app.

Windows Developer C#, C++, VB .NET

Build apps that

reach more

people Apps are core to the Windows 8 experience, and with the reach of the Windows install base and the Windows Store distribution channel, you have the opportunity to reach

hundreds of markets worldwide. And unlike other platforms, Windows 8 apps scale automatically across devices – all while using the same code.

Easier distribution

and app

maintenance Access the Windows Store and package your Windows Store app for distribution directly within Visual Studio – all without having to build your own install package. Once your app is

available through the Windows Store, you have access to valuable telemetry data to monitor your app quality including JavaScript exception rate, crash rate and app responsiveness rate.

Connect to the

OS and cloud

With the new Windows contracts, your app integrates seamlessly with other apps to create powerful user experiences like sharing, searching and file pickers with

very little code. And through cloud roaming, you can create a continuous experience across devices by roaming data that lets people pick up a task right where they left off.

Ratio Interactive

Designers Adobe photoshop, Illustrator

Speak a modern

design language

Microsoft's design language was created with digital in mind. It allows content to come to life and at the same time help maintain a consistent personality and experience for

the user. The language provides a universal tool to craft great apps that scale gracefully across multiple screen sizes.

Unleash your

creativity on a

new digital

canvas With Windows 8, your app is the star of the show, as the operating system fades to the background. Your app can take advantage of unique features like live tiles, contracts

and cloud services to design experiences that engage with users in new ways.

Elegant hardware

provides the

perfect stage for

your experience Windows 8 runs on amazing hardware, from tablets to laptops to all-in-ones with large high-definition screens. It’s the perfect place to showcase your creativity and vision

through the experiences you create.

So? Which platform do you prefer as

your development environment ?

Web platform

Html

CSS

JS

.NET platform

C#

Visual Basic

Others

C++

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

Earn from your apps Choose business model wisely

Selling differently

Collect full price before download

Time limited trial

Feature limited trial

In app purchase

Advertising

Attention-grabbing ads that are not perceived as intrusive

Code that is easy to integrate with both Windows 8 and your app to help prevent

crashes and protect battery life

Attractive revenue shares for developers

The reach of Microsoft’s global sales force and its strong relationships

Third party transactions

Develop your own payment system into your CRM or other existing system

Getting started

Get the tools

Get the developer license

Start development and create 'Hello World'

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

Windows 8 Platforms and Tools High level overview

What tools do we need

Windows 8 Operating system

Visual Studio 2012 Integrated Development Environment

Blend Designing IDE

Developer license

Visual studio

• Getting a developer license

• Renewing the license

Command prompt

• Getting a developer license

Application

development

Templates

JavaScript templates

C# Templates

Visual Basic Templates

C++ Templates

Blank application templates

JavaScript Application C# Application C++ Application

Deep Dive into JavaScript Shall we?

Hello Rock Stars

http://starshapedrock.com/wp-content/uploads/2008/08/star1.jpg

HTML Code

Code Simulated output

Image Courtesy http://starshapedrock.com/wp-content/uploads/2008/08/star1.jpg

I don’t see

any main

program

or starting

code?

My Gosh..

its Magic!!!

Application Manifest

Where the hell is JavaScript?

default.js

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

A tale of

Promise

What do we mean by promise? In programming world?

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.

Promise.then promise.then(onComplete, onError, onProgress).done( /* Your success

and error handlers */ );

WinJS.UI.processAll()

Returns Promise object

WinJS.UI.processAll().then()

Promise object has a method ‘then()’

WinJS.UI.processAll().then(

function completed() { document.getElementById("definitionButton").addEventListener("click",

buttonClicked);

}

)

Inside of the then method we add necessary code

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.

What else can promise do?

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

Two examples

"use strict"; function testFunction(){

var testvar = 4; return testvar; }

testvar = 5;

variable declaration outside the

function causes the syntax error

"Variable undefined in strict

mode."

function testFunction(){ "use strict";

testvar = 4; return testvar; } testvar

= 5;

The variable declaration outside

the function does not cause a

syntax error, but the declaration

inside the function does.

HTML

JavaScript code to change the div’s text

Output in

simulator

What about registering button

clicks?

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>

Windows Controls DATA-WIN-CONTROL

WinJS.UI.* Windows controls in Javascript library

Rate this App!

Code Output

Rate this App!

function to return the element

Add the event listener

Event description

Working with Data

Data binding

Style and Data

binding

Where do we

put the data?

http://i.imgur.com/FrCKi.jpg

Data storage locations

User data

Libraries accessed by the Windows Runtime StorageFile and file pickers

SkyDrive

HTML5 File API

App data

Application Data APIs for the Windows Runtime

IndexedDB

Extensible Storage Engine (ESE)

HTML5 Web Storage

WinJS.Application.sessionState

WinJS.Application.local state storage

WinJS.Application.roaming

state storage

Server

HTML5 Application Cache

Cookies

Cloud Services, OpenData Services, and Cloud Databases

Lets go to IDE…Thank you.