Web hosting in app Creating a Windows Store app with web assets

Key technologies for shopping apps

Santhosh Panchap & Can ComertogluMicrosoft Corporation3-119

• Discuss and demonstrate specific features of shopping apps including• General architectural decisions• Optimizing virtualized result sets• The communication model

between web and app (auth, services)

• Payment methods• Other Windows features to

consider that enhance the shopping experience

• You’ll leave with • Knowledge and code to address unique

shopping app challenges

Agenda

www.buildwindows.com

• Displaying and navigating large result sets• User authentication / secure credential storage• Payment• Sharing a wish list• User notification of “specials”• Printing receipts• App discoverability from website

Shopping app: key features


Web Services and component reuse reduces time to develop and

improves Site/App consistency.

Web hosting in app Creating a Windows Store app with web assets

Model comparison


Website hosting : not a good design for feature rich apps• Webpages already have

commanding navigation and other Windows 8 built-in features

• Messages can be sent and received, but communication often requires changes to the website

• app ->web ->app• User interaction within the

webpage cannot be determined and must be constantly communicated through a callback, so the app can synchronize accordingly with the hosted content.

Commands Search Navigation Layout (vertical)

Demo: using WebView (iFrame)

Relevant code

Declaring the iFrame in XAML<WebView x:Name="webViewHost" Margin="189,113,0,0" Width="1030" HorizontalAlignment="Left" VerticalAlignment="Top" Height="503" Source="http://www.bing.com/shopping/search?q=windows&FORM=L8SP10" />

Updating the source dynamicallywebViewHost.Source = new Uri("http://www.bing.com/rewards/tou");

Invoking script on the web pagewebViewHost.InvokeScript("CountAndListen", null);


• Why native?• Great UI controls with built-in support for key Windows

UX experiences• Content first design • Unnecessary and confusing web navigation and commanding

chrome removed

• User model consistency• Brand integration into Windows

Store app model


Store app: utilizing web assets

• App UX guidelines are easily adhered to as the app is written specifically for the Windows experience

• Intrinsic controls provide touch first experiences

• App is focused on content, which is virtualized, fast, and fluid.

• The app communicates with Windows instead of app->web -> app->Windows -> app->web

• Web resources are retrieved via XHR against existing web services

Commands Search Navigation Layout (horizontal)


Recommendation

• Don’t use Webview or iFrame for primary experience

“The intent of WebView (iFrame) is to incorporate web content into an app context, and not to provide a browsing experience within the app. The Windows Store policy specifically disallows the latter, because such content won't generally go into snap view well, or necessarily respond to touch input consistently, thereby giving a sub-standard user experience.”

• Do use the standard app templates, Windows Controls and Commands, and Windows contracts such as Search, Share and Settings to create your experience.


A great application experience provides for a content first, fast and responsive, fluid user experience.


Load, Store and display large sets of Data• Users generated search results often yield long lists• Keep the UI thread responsive : Use async• Use UI virtualization to create only visible items• Keep item templates simple• Load subsets• Model filtering appropriately

Demo : List virtualization using web content

Declarative template

<div data-win-control="SdkSample.ScenarioOutput"> <div id="itemTemplate" data-win-control="WinJS.Binding.Template"> <div class="itemTempl"> <img data-win-bind="src: thumbnail" alt="Databound image" /> <div class="content" data-win-bind="innerText: title"></div> </div> </div> <div id="listview1" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none', layout: { type: WinJS.UI.GridLayout } }"> </div></div>

Simple renderer

// wait for the itemPromise to complete to access the datareturn itemPromise.then(function (item) {

// root element for the itemvar element = document.createElement("div");element.className = "itemTempl";

// using innerHTML is usually faster than creating the DOM with createElement & appendChildelement.innerHTML = "<img src='" + item.data.thumbnail + "' alt='Databound image' /><div class='content'>" + item.data.title + "</div>";

return element;

Function template with recycling

…// specifies a promise that will be completed when rendering is complete// itemPromise will complete when the data is availablerenderComplete: itemPromise.then(function (item) {

// mutate the element to include the dataif (!label) {

label = element.querySelector(".content");img = element.querySelector("img");

}

label.innerText = item.data.title;img.src = item.data.thumbnail;img.style.visibility = "visible";

…


During authorization, user credentials must be secured.


Introducing the Web Authentication Broker


Web Authentication Broker

The Web Authentication Broker enables• Website hosting in an isolated

container within an app.• Secure user credential gathering

and authorization that is isolated from the app.

• Single sign-on with online providers (OAuth and OpenID).


Web Authentication Broker components

App container 1

Application

Medium

Runtime broker

App container 2

Web Auth Host


Web Authentication Broker flow

The broker takes down the dialog box, clears any persisted cookies created by the host from the app container, and returns the protocol data back to the application.

If a match is found, the host ends the navigation and signals the broker.

As the user interacts with the online provider website by clicking links or submitting information, the host checks each URI for a match with a callback URI provided by the

app before navigating to it.

The Web Auth host navigates to the request URI. (login page).

The broker starts the Web Auth Host and attaches it to the system modal dialog

The broker creates a system modal dialog and selects a separate, dedicated app container

An app invokes the Web AuthBroker async providing website and redirect URI



Demo : PayPal


Windows provides features that significantly enhance the shopping

experience.


Live tiles are ambient notifications that draw users back to your app

Demo : live tile update with web image

Push Notification1. Request Channel URI.

2. Notification Client Platform asks WNS for a notification channel. WNS returns a Channel URI.

3. Channel URI provided to your App

4. Your App registers with your Cloud Service

5. Your Service notifies WNS by executing POST on Channel URI

6. WNS receives and routes notification to the appropriate device

Windows 8

NotificationClient Platform

AppCloud Service

Windows Push Notification Service

(4)

(5)

(6)

(1)(3)

(2)

Sharing is a powerful way to increase engagement and

drive user acquisition.

Demo : sharing


Sharing across Applications

Registers DataRequested

event handler with the Data Transfer

Manager

Receives event and fills DataPackage in

event handler

User selects “Share”, active app is sent

DataRequested event

Filters list of Target Apps and Quick Links

User selects Target App or Quick Link

Activate Target App as kind ShareTarget

Activated for Sharing

Process DataPackage

contents

Reports CompleteDataPackage lives in Source application

On installation, registers as Share Target through manifest declaration

Records QuickLink if Target App returned

one

Source App

Share Broker

Target App


Sharing details - source

// initializing codeDataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>(this.DataRequested);

// registered functionprivate void DataRequested(DataTransferManager sender, DataRequestedEventArgs e){ DataRequest request = e.Request; { DataPackage requestData = String; request.Properties.Title = String; request.Properties.Description = String; // The description is optional. request.SetUri(Uri); } }


Sharing details - target

…if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) { // Code to handle activation goes here. } …

ShareOperation shareOperation = (ShareOperation)e.Parameter;await Task.Factory.StartNew(async () =>{

// Retrieve the data package properties.String sharedDataTitle = shareOperation.Data.Properties.Title;String sharedDataDescription = shareOperation.Data.Properties.Description;String sharedThumbnailStreamRef =

shareOperation.Data.Properties.Thumbnail;…}

Printing

Demo: printing


Printing

…// Add an event handler, which creates preview pages.

printDocument.Paginate += CreatePrintPreviewPages;

// Add an event handler, which provides a specified preview page. printDocument.GetPreviewPage += GetPrintPreviewPage;

// Add an event handler, which provides all final print pages. printDocument.AddPages += AddPrintPages;

// Create a PrintManager and add a handler for printing initialization. PrintManager printMan = PrintManager.GetForCurrentView();

printMan.PrintTaskRequested += PrintTaskRequested;

• Consider your architecture carefully• Speed and responsiveness counts• Security is critical for your users and

your brand• Windows features bring your app to life!

Wrap up


Related sessions

• “Guidance for shopping apps”. Speaker: Mark Hopkins

• “Shopping app case studies”. Speaker: Mark Hopkins

• “Deep Dive on WinJS ListView”. Speaker: Mike Mastrangelo

Q&A

• Develop: http://msdn.microsoft.com/en-US/windows/apps/br229512

• Design: http://design.windows.com/

• Samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples

• Videos: http://channel9.msdn.com/Windows

Resources

Please submit session evals by using the Build Windows 8 appor at http://aka.ms/BuildSessions

http://msdn.microsoft.com/en-US/windows/apps/br229512



http://design.windows.com/

http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples




http://channel9.msdn.com/Windows

http://channel9.msdn.com/Windows

http://aka.ms/BuildSessions

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Documents

Web hosting in app Creating a Windows Store app with web assets