Ultimate Coder Challenge: Preparation Work

After explaining what I’m going to do in my post of last week, let’s go on with some “real” work on the product this time.

The porting of this vocabulary trainer will be my first Metro style app. Therefore I need to get used to developing for Metro first.

As a starting point I’ve used an app sample code I got at the Microsoft App Excellence Lab. But while trying to run this example project with the most recent version of Visual Studio on the new Intel Ultrabook equipped with Windows 8, a lot of exceptions exploded in my face:

Screenshot of Exceptions While Trying to Run the Sample App

After a short search in the internet I found a new version of the Metro demo apps. I extracted the files and executed the app with the Visual Studio debugger – but: again an exception, at least a different one!

Screenshot of Exception While Trying to Run the Sample App Without Internet Connection

It told me:

0x800a138f - JavaScript runtime error: Unable to get property 'getNetworkConnectivityLevel' of undefined or null reference

After a quick look on what they wanted to do at this code location, I realized what the problem was: they wanted to register the app for push notifications and this was currently not possible, because I was sitting in a nice, sunny garden that was obviously a little bit too far away from my Wi-Fi connection in the office.

I’m not sure if that’s the user experience Microsoft wants to achieve: crash if there is currently no internet connection. :-)

Anyway, I’ll take care of that later on. Now I wanted to continue with analyzing this demo app and therefore I just commented this piece of code. After doing that the demo app started without problems:

Screenshot of the Sample App

Now I started to adapt the example code to my needs. I did some research on how I need to change the data source provider of the example app that it loads my JSON storage file with all the folder and lesson data correctly. Especially this JavaScript promise construct used for asynchronous programming is still driving me crazy. I really need to get used to that. But finally I got it to work.

Afterwards I just needed to make some adjustments to the UI that the flag icons are displayed correctly together with some info text on what the displayed lesson is about. And here’s the result:

Screenshot of the Vocabulary Trainer: First Impression

As a next step I need to add some functionality to that: add lessons, edit the dictionary of a lesson and delete a lesson again. In preparation for that I made the List View items selectable and added some buttons to the App Bar (I found a good tutorial for that):

Screenshot of the Vocabulary Trainer: App Bar

There is much work left, but I think I’m on a good way.

So stay tuned for more in my next post on the following Monday and thanks for reading!

This post is also available in Deutsch.

4 thoughts on “Ultimate Coder Challenge: Preparation Work

  1. Pingback: Ultimate Coder Ultrabook Challenge Week 2 – Moving through UI design « Ultrabook News and the Ultrabook Database

  2. Pingback: Intel’s Ultimate Coder Challenge: Week 2

  3. Pingback: Ultrabook Ultimate Coder Week 2: Gaps in tech initiate restarts and innovation | ServerGround.net

  4. Pingback: Ultimate Coder Challenge: Adding Functionality | AB-WebLog.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>