Update: The source code is available now at https://github.com/rlbisbe/karmacracy

Leer la versión en castellano de este artículo

Last April, after several months of development, and continuing the work with HTML, CSS and Javascript I was doing with RealPoll, I published Karmacracy, a Windows 8 app for the popular social network that looks like this:

The technology that lies behind is HTML + CSS + Javascript. The framework used was AngularJS with some WinJS features like the AppBar or flyouts. Except these two components, the goal was to get an app as portable as possible that could be then exported to platforms like Firefox OS.

Architecture

The architecture used includes partial views, controllers and services who serve as a link to share information between components:

Each controller is associated with a view, and in this case we have three of them:

• user: Displays information of current logged-in user
• details: Display the details of a kcy
• world: Displays the main screen, where we can share our link

There are also a couple of additional services that share information between controllers:

• currentKcy: Allows to share the current kcy from the world view to the details view
• karmacracyLogin: Allows to share the login status on the different controllers

Finally, a key component was the karmacracy.js library developed by Jorge del Casar, who has saved me a lot of development time by encapsulating the API calls easily.

Challenges

Developing this app has been very challenging, there were adaptations needed from AngularJS to run on a sandbox environment, a custom horizontal scroll was made, and also, the interaction with WinJS has been tough, let’s see a couple examples:

Horizontal scroll

One of the coolest things was to do a custom horizontal scroll that could be multiplatform, so after some research and try-and-error, the result looks nice:

The solution is extended more deeply on this article.

AngularJS with Windows Store

It turns out that making AngularJS to work on a sandbox environment we need to do some small changes to the library source code, in the methods where we inject HTML. Windows considers it a security leak, so we must tell it to ignore it. The solution is extended on this article

WinJS integration

For having details such as the back buttons, the flyouts or the app bar, we needed some integration with WinJS, which provides styles and interactions. The first thing we need is to add the references to WinJS on the main page:

    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

We also needed to call the «processAll» event from the controller for the styles and commands to start working. To do it, we wait until the page is active, and we make the call:

$scope.$on("$routeChangeSuccess", function (scope, next, current) {
          $scope.transitionState = "active";
          WinJS.UI.processAll();
});

Once the code is up and running we can add the AppBar, and assign the buttons an action ng-click and (if required) a style with ng-style

    <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
        <button ng-click="refresh(true)" data-win-control="WinJS.UI.AppBarCommand"
                data-win-options="{label:'Actualizar',icon:'refresh',
                section:'global',tooltip:'Actualizar'}"></button>

        <button ng-style="{'visibility': logged_in}" ng-click="share()" data-win-control="WinJS.UI.AppBarCommand"
                data-win-options="{id:'cmdCamera',label:'Compartir',icon:'reshare',
                section:'selection',tooltip:'Compartir'}"></button>
    </div>

Launching the flyouts is as easy as search for the control, and display it like we could do with jQuery:

var flyout = document.getElementById("contactFlyout").winControl;
flyout.show(main);

Finally, we can access preferences in a very similar way, in this case the call is performed from the app.js file, right after the routing and the controllers:

WinJS.Application.onsettings = function (e) {
    e.detail.e.request.applicationCommands.append(new Windows.UI.ApplicationSettings.SettingsCommand('privacy', 'Política de privacidad', function () {
        Windows.System.Launcher.launchUriAsync(new Windows.Foundation.Uri('http://rlbisbe.github.io/karmacracy/privacidad'));
    }));
};

WinJS.Application.start();

In this case, the goal was to show a privacy policy and redirect it to the web, but we can also use it as an internal link (for account configuration, for example).

Recap

This has been my first HTML5 app, the source code will be available soon on Github (and I’ll update the post when that occurs. Develop an app for Windows 8 is very, very easy but can be very challenging if you use a framework like angular.

I’ll keep refining the app while I read more and continue my training on this platform.

• Download the app on the Windows Store