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