Actualización: Ya está disponible el código fuente en https://github.com/rlbisbe/karmacracy

Read the english version of this article

En abril pude publicar, tras algunos meses de desarrollo, y siguiendo la línea de HTML, CSS y Javascript de RealPoll, un cliente para Windows 8 de la red social de contenidos Karmacracy, que tiene este aspecto:

La tecnología que hay por detrás es HTML + CSS + Javascript. El framework usado para el desarrollo fue AngularJS, aunque recurrí a algunas funciones de WinJS como la AppBar o los flyouts, aunque salvo para estos dos componentes, el objetivo era conseguir una app portable que luego se pudiera exportar a otras plataformas web, como Firefox OS.

Arquitectura

Para el desarrollo se ha usado AngularJS, que define una arquitectura basada en vistas parciales, controladores y servicios:

Cada controlador está asociado a una vista, en este caso:

user: Permite mostrar información del usuario actual
details: Permite mostrar los detalles de una kcy
world: Representa la pantalla principal, en la cual podemos compartir nuestro código

Además, tengo un par de servicios adicionales, que proporcionan información global a todos los controladores:

currentKcy: Permite gestionar la Kcy actual (al pasar a la lista detalles)
karmacracyLogin: Representa el estado de login actual de un objeto.

Finalmente un componente clave ha sido la librería karmacracy.js desarrollada por Jorge del Casar, que me ha ahorrado mucho tiempo de desarrollo, ya que encapsula las llamadas a la API de manera sencilla.

Retos

Desarrollar esta app ha tenido sus peculiaridades, desde el uso de Angular en un entorno protegido hasta el scroll horizontal, pasando por la interacción con WinJS:

El scroll horizontal

Como no quería depender de las implementaciones de los controles de WinJS, intenté buscar una solución multiplataforma para el scroll horizontal, y el resultado ha sido bastante interesante.

LA solución está descrita con algo más de profundidad en este artículo.

AngularJS con Windows Store

Resulta que para conseguir que AngularJS funcione correctamente con el entorno protegido de las aplicaciones HTML y Javascript de la Windows Store, se necesitan hacer ciertas modificaciones en el código fuente de Angular, que se resumen en este artículo

Integración con WinJS

Para conseguir detalles como los botones de atrás, los flyouts o la AppBar, necesitábamos cierta integración con WinJS, que proporciona los estilos y la interacción con los mismos. Para ello necesitábamos agregar las referencias a WinJS en la página principal:

    <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>

Además, necesitábamos llamar al evento processAll desde el controlador de Angular, para ello, se espera en el momento que esté activa la página, y se hace la llamada:

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

Una vez ese código esté funcionando, podemos agregar la AppBar, asignando a los botones una acción ng-click y (en caso de que sea necesario, 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>

Para lanzar los flyouts, es tan sencillo como buscar el control, y mostrarlo de manera similar a como lo hacemos en jQuery:

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

Finalmente, las preferencias se acceden de manera similar, aunque en este caso el código iba en el fichero app.js, donde definimos las rutas y los controladores:

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();

En este caso el objetivo era mostrar la política de privacidad de la app y redirigirla a la web, aunque podemos redirigir a una página local si lo deseamos.

Conclusiones

Esta ha sido mi primera app, el código fuente lo publicaré esta semana en Github y actualizaré el post. Desarrollar para Windows 8 tiene sus retos, sus limitaciones respecto a la tienda de aplicaciones, así como el hecho de usar un framework como AngularJS implica aprender una manera diferente de hacer las cosas. Como ha sido mi primera aproximación (por el tradicional método de prueba-y-error) iré refinándola con el tiempo, mientras sigo leyendo y formándome sobre esta plataforma.