Ultimate Coder Challenge: Vocabulary Training

As I’ve announced in my blog post of last week, I will go on with the most important part of a vocabulary trainer this time: the vocabulary training itself.

Last week there was a funny event by Microsoft here in Munich (Germany): a Windows 8 Hackathon for App Development.

This was a very good opportunity to ask some questions to competent Microsoft developers and get forward with this app project.

Past week I implemented the vocabulary training:

Screenshot of Vocabulary Trainer: Training

After the user clicked on a lesson a word for translation together with the mentioned info text is shown.

If the user has a tablet PC without a keyboard a virtual keyboard is displayed automatically after the text field got focus:

Screenshot of Vocabulary Trainer: Training Typing

By clicking on the check button the app shows a message whether the entered translation is correct

Screenshot of Vocabulary Trainer: Training Correct

or wrong:

Screenshot of Vocabulary Trainer: Training Wrong

Finally, after the lesson has been finished, the user sees how many words were correct and how many were wrong (looks like my German would be quite good already ;-) ):

Screenshot of Vocabulary Trainer: Training Statistics

Now the added words can be trained, but while working on that I got already several ideas for enhancements: e. g. it would be possible to let the user choose in which direction the translation should be trained. Also adding a words card game, similar to the one in the old vocabulary trainer version, would probably be a nice feature.

So there is enough left to do, but first there are still other interface things that needs to be added or improved. I got some good ideas also from the Microsoft guys last weeks.

Next week I’ll be at the IDF in San Francisco.

So stay tuned for my next post in two weeks again on Monday!

Windows 8 Hackathon for App Development

Last night Microsoft organized a Windows 8 hackathon here in Munich (Germany).

Windows 8 Hackathon for App Development

That was the kind of events that really is for developers only - at the latest when you see the time of this event: it started at 6 pm and ended at 4 am. ;-)

But it was fun to be there and doing some development for my first metro-style app for Windows 8 in HTML5, especially as there were some competent Microsoft developers available for questions.

Windows 8 Hackathon for App Development: Eating

… and there was also enough to eat. ;-)

Have you been to a development hackathon before, too?

Ultimate Coder Challenge: Adding Functionality

In my post of last week I wrote about the preparation work needed to be done to convert my vocabulary trainer to a metro-style – oh, I mean modern UI style or Windows 8 style or whatever this should be called now ;-) – app for Windows 8.

This time we’ll add some real functionality to the app.

But before starting with that I’ll talk about a new issue I came across while developing. Suddenly Visual Studio didn’t start anymore and printed this error message:

Screenshot of Error Message While Trying to Visual Studio

It told me:

The procedure entry point _Atomic_fetch_sub_4 could not be located in the dynamic link library C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe.

What?
A stil running instance of Visual Studio worked perfectly, but I couldn’t start a new one!

The only thing (beside developing) I’ve done till the last reboot was to install some Windows Live apps (to get the Windows Live Writer). I’ve searched in the internet and, indeed, this was the problem. Obviously there were some incompatibilities between that and the installed Visual Studio version. But, luckily, there is already a bug-fix from Microsoft.

These things always cost time, but anyway, everything is still beta. ;-)

Good, now let’s go on with the app.

At the end of my last post I made the lessons selectable and added the app bar:

Screenshot of the Vocabulary Trainer: App Bar

As a next step some functionality for the “Edit dictionary” button needs to be added. Therefore I created a new page where each word contained in a dictionary of a lesson is displayed again in a grid to stay with the UI design:

Screenshot of the Vocabulary Trainer: Edit Dictionary

You can see that not only the words in both languages are displayed, but also a short info text for each word. When adding new words to the dictionary the user may enter such an info text as well to give a hint for the translation. In the example I used it to put the word in the context of a sentence. That’s a hint for beginners and should also increase the learning success.

To be able to change or delete a word the words can be selected just as the lessons on the previous view which opens an app bar again:

Screenshot of the Vocabulary Trainer: Edit Dictionary App Bar

Now the user can edit an existing word or add a new one:

Screenshot of the Vocabulary Trainer: Edit Word

At this point words can already be added to the dictionary and this way lessons can be build. But the most important part is still missing: the real vocabulary training.

I’ll take care of that in the next week.

So read on next Monday!

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!

Ultimate Coder Challenge: Getting Started

It’s great to be a participant of the Ultimate Coder Challenge!

We’re six developers competing to code an app for the next generation Ultrabooks running Windows 8. The winner gets $10,000!

About me

I’m a software consultant and developer from Munich (Germany) and author of the end-user products at AB-Tools.com.

Many of my end-user apps were also published in the Intel AppUp store and I gave speeches about AppUp on several developer events like the European Software Conference, MunichJS and MobileMonday.

The Ultrabook

Intel kindly provided us developers with a pre-production Ivy Bridge Ultrabook – thanks for that! – to test our newly created app with all the features of the next generation Ultrabooks. As Intel wrote the specs of this device on their blog post already, I won’t repeat them here.

Pre-Production Ivy Bridge Ultrabook

Of course, I already tested the Ultrabook extensively: it’s a great device, just my USB 3.0 hard drive currently does not work correctly with it, but that’s a known issue and hopefully this will be fixed with a driver update in the future – anyway, it’s a pre-production device and therefore such small issues are OK.

The only real drawback of this device is the glossy display that makes it very hard to work outside on a sunny day in Munich just as today: I don’t understand why Intel provides devices with glossy displays to developers. When a developer looks on a monitor he wants to see some code and not himself in a mirror. ;-)

So, what I’m going to build now?

I’ve developed a HTML5 vocabulary trainer app some time ago. Although it is fully implemented, including a web synchronization service, it doesn’t look really good and especially it is absolutely not touch-enabled:

Screenshot of Old Version of Vocabulary Trainer: Lesson Management

Above you can see the lesson management: here you can add new lessons, organize them in folders and add words to the dictionary.

Below there is a screenshot of the vocabulary training itself:

Screenshot of Old Version of Vocabulary Trainer: Vocabulary Training

And as add-on a words card game is included to make learning more fun:

Screenshot of Old Version of Vocabulary Trainer: Words Card Game

Needless to say that you don’t want to use this vocabulary trainer without a mouse.

Therefore I will convert this HTML5 app in a touch-enabled metro-style Windows 8 app during this Ultimate Coder Challenge.

I’m very excited about the progress of this contest and I’ll keep you updated on each Monday on my blog.

Intel Ultrabook MeetUp in Munich

Today there was an Intel Ultrabook MeetUp in Munich (Germany) at a nice location, Café Keksdose. This time, it was not a long way to go for me. ;-)

Intel Ultrabook MeetUp Munich

Beside eating tasty snacks it was great to meet developers from all over the country.

Intel Ultrabook MeetUp Munich (Ultrabooks)

But we were also able to marvel at the latest Intel Ultrabooks and play around with them.

Did you also attend to this event?

WordPress Multisite: Redirect Users Based on Their Browser Language

Since I wrote the post about using the Multisite Language Switcher I got many questions asking how I “disabled” the main site “/” in my WordPress Multisite configuration.

The answer is simple: I did not disable it, but just created an own, small redirect theme to make sure every user accessing the main site “/” is redirected to the correct language URL – in my case either “/en/” or “/de/”.

The following source code isn’t completely from me. I remember that I just searched the web for a good solution and changed it as I needed it, but that’s a longer time ago. Therefore no idea where parts or this code are from originally.

Anyway, here is the source code of the file index.php of my redirect theme just as I use it on this WordPress site right now:

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Redirect
 */

/**
 * Detect browser language.
 *
 * @param array $allowed_languages An array of languages that are available on the site.
 * @param string $default_language Default language to use if none could be detected.
 * @param string $lang_variable Custom user language support. If not specified $_SERVER['HTTP_ACCEPT_LANGUAGE'] is used.
 * @param string $strict_mode If true (default) the whole language code ("en-us") is used and not only the left part ("en").
 * @return string The detected browser language.
 */
function get_lang_from_browser($allowed_languages, $default_language, $lang_variable = NULL, $strict_mode = TRUE) {
    // Use $_SERVER['HTTP_ACCEPT_LANGUAGE'] if no language variable is available
    if (NULL === $lang_variable)
        $lang_variable = $_SERVER['HTTP_ACCEPT_LANGUAGE'];

    // Any info sent?
    if (empty($lang_variable))
        return $default_language;

    // Split the header
    $accepted_languages = preg_split('/,\s*/', $lang_variable);

    // Set default values
    $current_lang = $default_language;
    $current_q    = 0;
    // Now work through all included languages
    foreach ($accepted_languages as $accepted_language) {
        // Get all info about this language
        $res = preg_match(
            '/^([a-z]{1,8}(?:-[a-z]{1,8})*)'.
            '(?:;\s*q=(0(?:\.[0-9]{1,3})?|1(?:\.0{1,3})?))?$/i',
            $accepted_language,
            $matches
        );

        if (!$res)
            continue;

        // Get language code and split into parts immediately
        $lang_code = explode('-', $matches[1]);

        // Is there a quality set?
        if (isset($matches[2]))
            $lang_quality = (float)$matches[2];
        else
            $lang_quality = 1.0;

        // Until the language code is empty...
        while (count($lang_code)) {
            // Check if the language code is available
            if (in_array(strtolower(join('-', $lang_code)), $allowed_languages)) {
                // Check quality
                if ($lang_quality > $current_q) {
                    $current_lang = strtolower(join('-', $lang_code));
                    $current_q = $lang_quality;
                    break;
                }
            }
            // If we're in strict mode we won't try to minimalize the language
            if ($strict_mode)
                break;

            // Cut the most right part of the language code
            array_pop($lang_code);
        }
    }

    return $current_lang;
}

$allowed_langs = array('en', 'de');
$lang = get_lang_from_browser($allowed_langs, 'en', NULL, FALSE);
header('Location: http://' . $_SERVER['HTTP_HOST'] . "/$lang/");

exit();
?>

So just create a new theme folder and copy the PHP code above (change the allowed languages if needed, of course) into a file named index.php.

Then you just need to create an additional dummy file style.css with some info about the theme. Otherwise WordPress won’t recognize your theme:

/*
Theme Name: Redirect
Theme URI: http://wordpress.org/extend/themes/redirect
Author: AB-WebLog.com
Author URI: http://www.ab-weblog.com
Description: Redirects
Version: 1.0
Tags: redirect
*/

That’s it: after you have seleted this new theme for your main site “/”, every user will automatically be redirected to the correct language version based on the browser language settings.

Do you use the Multisite Language Switcher or your blog, too?

Spartakiade Conference in Berlin

I was invited to be a trainer on the Spartakiade Conference (German) in Berlin (Germany) on June 16, 2012.

There I will provide a session about “Intel AppUp – Your HTML5/.NET App in the App Store”:

 If you want to sell a product as an developer every new distribution channel is welcome. One of them is the app store AppUp operated by Intel that is already pre-installed on many newly sold notebooks (e. g. Dixon’s Retail). In this session Andreas Breitschopp will show how an existing HTML5 or .NET app is prepared for AppUp. The participants are welcome to bring their own products. These will then be prepared for AppUp together.

Of course, there will be also other interesting topics at the conference and the attendance is free.

Therefore I’m looking forward to see you there!

Windows 8 App Excellence Lab

Today I attended a Windows 8 App Excellence Lab in the Microsoft office in Unterschleißheim near Munich (Germany).

It was very interesting to talk with a Microsoft developer about the requirements that needs to be met for a Metro style app in the Windows 8 app store. There are very high standards especially regarding the look & feel of the application.

At the moment I especially want to get a HTML5-based vocabulary trainer ready for Windows 8. As a result of this App Excellence Lab I got a token that I can use to register at the Windows 8 app store before the official start. Additionally registration is free with this token for two years.

Did you attend to a Windows 8 App Excellence Lab, too?

Attending Windows 8 Camp

Today I attended to the Windows 8 Camp in the German Microsoft main office in Unterschleißheim near Munich.

The speaker explained some details about the new operating system and especially the new Metro apps from a developer perspective. Although it still was interesting, I expected some more new information in such a seminar.

Anyway, it was great to meet some friends again and catering was good, too. ;-)

Did you attend to this event, too?