Win8 (Metro style) app development – getting started

Last updated: 2013-08-09

This post will contain a kind of summary for what is worth to notice about Metro style apps.

Metro style apps has several names: Metro Style apps, WinRT apps, Windows Store apps, Modern UI apps, Windows 8 apps.
Those apps are opposed to old style Windows apps called Desktop apps.

Links to some other of my posts on WinRT

Articles

Installation

Navigation Shortcuts

  • Edge Swipes
    • Left: WinLogo + Tab: Running apps
    • Right: WinLogo + C: Show Charms bar
    • Top/Bottom: WinLogo + Z: Show AppBar
    • Left/Right: WinLogo + Period: Snap running WinRT app.
      • If snapping does not work it can be due to the screen is less than the minimum of 1366px wide (320px + divider + the rest [1024 px]).
    • To bottom (terminate app): Alt + F4
  • Open Charms (right side)
    • WinLogo + H: Share
    • WinLogo + Q: Search
    • WinLogo + I: Settings
  • Gestures (using mouse / keyboard)
    • Tap: LeftClick / Enter
    • Press and Hold: RightClick / RightClick button
    • Swipe to select: RightClick / RightClick button or Space
    • Slide: Drag on scrollbar / Arrow keys
    • Slide + inertia: Drag on scrollbar, MouseWheel / Page Up, down
    • Zoom: Ctrl + MouseWheel / Ctrl+,-
    • Rotate: Ctrl + Shft + MouseWheel / Ctrl+,-
  • Misc
    • Ctrl + “” or Ctrl + “+“: Semantic Zoom (zoom out and in).
    • WinLogo: Switch to start page (WinRT desktop)

Programming WinRT

Programming Languages

The apps will in most cases be build as either

  • C#/Xaml above WinRT/.NET4.5 or
  • JavaScript/Html above WinJS/WinRT/.NET4.5 running inside a IE10 clone without chrome  (wwahost.exe).

But still there are also

  • VB, C++ (and other managed CLR languaged)/Xaml above WinRT/.NET4.5 or
  • C++ (unmanaged)/DirectX above WinRT/.NET4.5 for getting the most control

Js/Html C#/Xaml
Pros
  • Can use all Js 3rd party libs like jQuery, Modernizer, Dojo, prototype.js, Box2D etc directly in the Html.
  • Easy to port to other Js/Html platforms (Andriod, Ios) using PhoneGAP
  • Can create WinRT components
  • Fast Compiled code
  • Easy to port to/from WPF/Silverlight/WinPhone
  • Easy to port to other platforms (Andriod, Ios) using Xamarin
Cons
  • Interpreted code
API’s
Courses and Exams
Books
Articles

*1: Also in C#

Tools
UI Controls
  • Windows.UI (WinRT)
IDE
  • VisualStudio
Layers
View
  • HTML
  • XAML
Binding/ViewModel
Query /Persistence
  • Linq
  • Obelisk – MVVM persistence. Works with MVVM light
Data Service
Database

JsData

Reusability

Visual Studio has a project template called “C# – WinStore – WinRT Component”. Such a component can both be reused by “Js -WinStore” projects and also by all CLI language projects. A WinRT Component is a DLL with CLI metadata included. They are stored in .winmd files.

You would want to create WinRT components if you

  • Want to create quick WinRT code for a C++ project
  • Share WinRT code with a Js project

Otherwise you could just create a normal class library and save some overhead.

Note: If the WinRT Component is native (C++/processor specific), then the DLL cannot contain the metadata as well, so the .winmd file will in that case only contain the metadata.

https://i0.wp.com/i.msdn.microsoft.com/jj651567.1012msdnWin_Olson_Figure5_hires(en-us,MSDN.10).jpg
Hybrid Apps

Vids:

    • In C#/Xaml you can write WinRT components that can be reused in both C# and Js.
    • You could make a .NET class library containing a MVVM ViewModel. This ViewModel can then be used in Silverligt and Metro-apps with only slight change of the Xaml.
    • Thinking in Xaml I guess you could look at it in this way: WPF (desktop context) contains full functionality. Metro (local context) is a subset of WPF. Silverlight (web context) is a subset of Metro. WinPhone 8 (phone context) – is a subset of WPF – will this melt together with Metro?
    • Types in Resource files are no longer strongly typed, but it will probably be so in future.

Articles:

Tools:

Libraries:

WinRT Api

WinRT API
WinRT API

Audio

Articles:

Devices – Location

Services

SDK’s (Live, Ads)

Facebook: http://channel9.msdn.com/Events/Facebook-and-Windows-8-Hackathon/Facebook-and-Windows-8-Hackathon

Vid Building Connected Windows 8 Apps with Windows Azure …

  • Create a WebAPI server and client sending data as JSON over HTTP
  • Capture a photo. Upload it to Azure into Blob storage and download it. (0:16)
    • Shared Access Signature (SAS) allows storing image directly into storage (0:18)
  • Capturing GPS data handling it with Windows.Devices.Geolocation.Geolocator(0:34)
    • Cheating by using GeoIpLookup()
  • Storing Spatial data types in Azure SQL DB – Supported: geography, geometry – http://bit.ly/rFiLhN. Using
    • OGC method pointA.STDistance(pointB)
    • OGC static method Geography::STPointFromText()
    • Radial Search – find Point of Interest closeby.
  • Using EF4.3.1, since Azure does not yet support .NET4.5. It does not support DB geography datatype. So he removes EF5 and installs EF4.3.1 (0:40)
    • New – Data – ADO.NET datamodel – Generate Model from DB – Only using Stored Procedures
    • Finish the WebAPI
  • In client add a Bing Map Control (0:46)
    • When click on pin photo should be shown
    • When tap on img then hide it
  • Add geolocator (0:49)
    • Create PoI (0:51)
  • Demo – Show point on map, Upload vid (0:56)
  • Push notifications – to create changing tiles (1:00)
    • Uses NuGet installs to fill code in client and server
    • 15 different notification templates
    • Authenticate towards WNS (1:08)
    • Demo – Take photo – return back as tile (1:12)
  • Links (1:14)

Vids – WebSockets, SignalR

UI

Games

Samples

  1. WindowsAppFramework //Create WinRT and WP apps with some mouse clicks – save as sln – do add-on in VisualStudio.
  2. http://totalapp.azurewebsites.net/
  3. Design Inspiration
    1. Financial apps: SunGard (code sample available)Learn how you can build great retirement planning apps for Windows 8.
    2. Medical apps: In-patient (code sample available)Learn how you can build great hospital in-patient apps for Windows 8.
    3. Medical apps: Manipal Hospital (code sample available)Learn how you can build great hospital management apps for Windows 8.
    4. Retail apps: Social CRM (code sample available)Learn how you can build great retail management apps for Windows 8.
  4. Hands-on-labs – Contoso Cookbook – Online  – Grid App template – Tutorial
    1. Windows 8 Camp in a Box (Samples, Hands-on-labs, Presentations)
  5. Create your first Windows Store app using JavaScript – Tutorial
  6. Camera Application – Tutorial
    1. Camera Application for Windows 8 (1/4)
    2. Camera Application for Windows 8 (2/4)
    3. Camera Application for Windows 8 (3/4)
    4. Camera Application for Windows 8 (4/4)
  7. CodeShow – JumpStart Videos

  8. http://code.msdn.microsoft.com/
    1. http://code.msdn.microsoft.com/Windows-8-Modern-Style-App-Samples (Windows SDK samples)
    2. MY EVENTS Sample Modern App
    3. Windows Azure Mobile Services – doto sample
    4. Stocks end-to-end sample
    5. Cookbook Sample App for Blend
    6. Windows 8 Store Apps Starter Kit (VB)
  9. https://bitbucket.org/martinesmann/storefront-starter-kit-preview
  10. MVVM light Win8 sample. Other MVVM light samples.
  11. VSIX – Sample Browser: http://visualstudiogallery.msdn.microsoft.com/4934b087-e6cc-44dd-b992-a71f00a2a6df

The Store

Checkout Certification requirements and

Wack your project before the store

Use Windows App Certification Kit (Wack) to prepare your app for the store.

My app kept failing when I either just built and ran the project, but also when I deployed the project.
I tried to uninstall the app and redeploy, but with no luck. Solution is to create an app package via project – store.

Get in the Store

Sign up here: https://appdev.microsoft.com/StorePortals/

A whole lot of stuff needs to be entered, when you submit an app.

Worth noting is:

Publisher display name: This must match what you wrote in your app.

You sign up as an individual or as a company. Only company’s can submit other app types than metro apps (e.g. desktop apps). You cannot change this after you have signed up. Company accounts cost a little more and you need to have someone – often yourself – to approve that you are authorized to create an account for that company.

Support email or web page for the app: A webform is nice to have to avoid spam mails. Where do you want to have that?

You have to give credit card info to be billed from.
In my bank I received a bill with following text attached:

Evt. supplerende tekst : MICROSOFT
BILL.MS.NET
VISA-NOTA DKK    22,07 16.09

Back in the Appstore Dashboard I had to verify my account info by entering the amount. Even though the amount was in my local currency I could just enter that, but with a dot as decimal separator so for the above example I should enter “22.07” as amount for account verification.

Expect almost a week for the certification process, if the app has no problems during that process.

Details: http://sdrv.ms/Uo9rX3

Certification Report

On my first app R1 I failed on the following:

Content compliance: failed

This test evaluates your software for content compliance with Windows Store Certification Requirements. Learn more.

Your app doesn’t meet requirement 4.1. Learn more

Your app doesn’t meet requirement 6.2. Learn more

Commons reasons why apps fail this requirement:

  • The content of the app (including ads) is not suitable for the chosen age rating.
  • You claimed a rating from a Ratings Board in a game definition file but you did not provide a proof of that rating.
  • You listed the app as either 3+ or 7+ and it provides the user with uncontrolled access to online social networks or uncontrolled sharing of personal info with third parties, including other gamers or online acquaintances. For such activity to be considered “controlled”, your app must include parental control features that require parental permission to use such sharing features, and you must identify those and explain their functionality in the Notes to testers.
  • One of the distribution markets you chose requires a rating from a Rating board but you did not provide one.

 So what went wrong?

  • I have to add a privacy policy.
  • I should add an about page to explain what an Internet connection is used for. In this case it is showing a GPS position on a Bing Map inside the app. Nothing else.
  • I had set my app as 3+. I think the above suggest I should set it to 12+ to avoid some parental permission.

Got it

On you store account there are links to get support – one of the options are chat-support, when you have certification issues. You can use it during US working hours – otherwise it will be greyed out – Do use it!

After setting up several pages in a web – it seems like it was good to get a privacy policy on the web – I got an app in the store October 5th – maybe 3 weeks after submitting and on 3rd attempt.

Privacy Policy samples

Miscellaneous

Admin

WP7 / Cross platform

Ongoing…

The End.

Js/Html

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: