“Head to Toe” - Windows 8 Shopping Reference App
- Posted: Jul 15, 2013 at 6:00AM
- 5,350 views
Today's Modern Monday project is a nicely complete Windows 8 Shopping App and WebApi back-end example.
A Windows 8 Shopping App gives your customers more choices as part of a well-integrated multichannel retail strategy. A touch-first app that scales to a variety of devices and provides easy 24/7 access brings an engaging experience with unprecedented reach. More ways of engaging the market increases revenue and growth opportunities, and the flexible development platform of Windows 8 enables you to respond to customer demand immediately so you can add new products and rapidly scale your business for competitive advantage.
The “Head to Toe” app is a sample Windows Store implementation of the app described in the Windows design inspiration Shopping idea book. You can use the “Head to Toe” sample app to see how the design concepts of a shopping app are implemented. The sample app includes UI based on the idea book including examples of Live tiles, Semantic zoom, Search, Snapped view, and Share. The app also includes ASP.NET MVC Web API services to provide the product data and handle the shopping cart order processing. This app is provided as a free sample by Tallan.
First, what's the Shopping idea book?
The shopping app idea book describes a fictional shopping app for Windows 8. You can gain inspiration for the design of your own shopping app by reviewing the scenarios in this topic and seeing how the Windows 8 Microsoft design language is utilized in the app.
Shopping app scenarios
The shopping app described in this topic uses Microsoft design features to create an engaging shopping experience for users.
Summary of live tiles and browsing
In the first scenario, we see that...
- Live tiles draw users back into your app by displaying information that is relevant to the user.
- Your content shines in your app without any chrome and enables users to be immersed in the experience that they care about.
Summary of driving user engagement
In the second scenario, we see that...
- The Search contract puts your app in the potential target list when your customer intends on shopping.
- A fully-featured snapped view lets customers browse and compare your content to other apps and web sites.
Summary connect users with Share
In the third scenario, we see that...
- You can make your content into a share source and Windows 8 connects you to other apps, email, and social networks.
- You can make your app into a Share target and receive content, links, or any other type of structured data.
Back to the reference app;
Building the Sample
As with all Windows Store app development, you will need to be running Visual Studio 2012 on Windows 8 with IIS 7.5 Express to properly load, build, and deploy the solution.
For this particular app, you will also need to install the Live SDK and set both projects within the solution as startup projects (if they are not already set that way).
The Live SDK can be found at:
This sample also uses the NuGet package restore feature to install the required set of NuGet packages when the sample is first built. Make sure you have network access to the public NuGet feed on www.nuget.org before building this sample the first time.
Installing the Sample without the Source Code
If you prefer to install the sample app (without the source code) on a Windows 8 device without Visual Studio 2012, the latest install package can be downloaded from Tallan.com.
When you run the application, a list of products is displayed, allowing you to browse through the various categories and products then proceed through the checkout flow. As items are added to the cart, live tile updates are made. In addition, the application demonstrates proper use of the search, share, and settings charms. All features within the application are fully functional in landscape, portrait, full, and snapped views.
The application consists of two projects, Shopping.Client and Shopping.WebApi. The Shopping.Client project is responsible for all user interaction, screen flows, and functionality that a client app would need to interact with the web service interface of a typical Ecommerce engine. The Shopping.WebApi project represents that Ecommerce engine. The following diagram shows the high level architecture of project:
The search charm can be used from within the application or while the application is closed. If the search charm is used while the application is closed, the application will launch and display the appropriate search results.
The Shopping.Client app is also capable of running offline without the Shopping.WebApi project. To toggle the application to Offline mode, use the settings charm to toggle to the Services setting between “Live Services” and “Demo/Offline Services”. The client uses this setting to choose between using the services.js file (associated with “Live Services”) and the offline_services.js file (associated with “Demo/Offline Services”) at runtime.
The share charm provides a context sensitive mechanism for sharing content with your social network via numerous apps installed on your device. In Windows 8, the application is notified of share requests via an event handler. Rather than hook up sharing event handlers throughout the code this event is separated out into the sharingProvider.js object. The sharing provider leverages the EventAggregator, which publishes app specific events for things like navigation and cart modifications, to adapt the shared contents so it represents the app regardless of the users currently loaded page.
The community version of this application is also available on GitHub. Feel free to customize, fork, report bugs, etc. If you need assistance or support please feel free to contact Tallan at email@example.com.
1) Install Live SDK (http://www.microsoft.com/en-us/download/details.aspx?id=35754)
2) Set both projects as Startup projects
Here's a snap of the 2 Projects;
You know how to have two projects as Startup projects? Right-click on the Solution, select Properties (or Alt-Enter)
Then select "Multiple startup Projects" and set the Action to Start..
Once startup has been set, the Solution ran for me the first time, with no problems.
Here's a snap of the app running on my system;
And the default WebApi page;
In short a pretty complete example. Sure you're not going to take this and turn around your own app in a minute, this isn't a starter kit, but it's one of the more complete examples of this type I've seen and is simple enough to help you grok a number of topics and areas for building great Windows 8 Apps...