Usando el cliente web de Windows Azure Mobile Services

Desde el principio de su preview, Windows Azure Mobile Services contaba con SDK para Windows 8, y con el tiempo aparecieron también el de Windows Phone 8, iOS y Android. Sólo quedaba una plataforma sin SDK, asunto resuelto a mediados de Marzo de 2013 con el lanzamiento del cliente web (HTML5/JavaScript) , haciendo mucho más sencillo conectar nuestras aplicaciones móviles con su versión web usando un backend unificado. Vamos a ver un ejemplo de como funciona todo esto paso por paso.

SPOILER: sigue siendo muy sencillo, no tiene grandes diferencias con los SDKs de otras plataformas

1. Creación del servicio y la aplicación web

La idea para esta demo es crear una aplicación sencillita, basada en la estructura del ToDoItemList al que nos tienen acostumbrados los ejemplos de uso de WAMS con diferentes plataformas, pero en este caso se llevará un listado de jugadores (de baloncesto, como siempre acostumbra a usar quien escribe este post). Podremos introducir nombre y dorsal del jugador, y ver la lista de los mismos para borrarlos y/o editar sus datos.

Para empezar, y si tienes alguna duda acerca de cómo crear el servicio, te recomiendo que leas el paso a paso de Windows Azure Mobile Services, al menos hasta el primer paso, en el que se explica cómo hacerlo. Una vez creado, tendremos que crear también la tabla "Player” , en la que almacenaremos los datos de nuestros jugadores.

Esto podemos hacerlo desde el propio portal de Windows Azure: dentro de nuestro servicio, debemos ir a la pestaña “Datos” (donde veremos una lista de nuestras tablas), pulsar en el botón “Crear” que está bajo esta lista, introducir un nombre válido para la tabla (en este caso será Player) y confirmar la creación de la tabla con el botón de la esquina inferior derecha:

Por otro lado, tenemos que crear también la aplicación web que hará uso de WAMS. Esta aplicación puede ser cualquier cosa, un simple archivo html podría valernos, pero en este caso crearemos una nueva aplicación ASP.NET MVC. Para ello, crearemos un nuevo proyecto web en Visual Studio que consista en una aplicación web de ASP.NET MVC 4 utilizando el proyecto Básico:

Tras crear el controlador y la vista de la página principal de la aplicación, donde mostraremos todo en esta demo, podemos seguir adelante.

2. Conectando la aplicación con el servicio

La conexión de la aplicación con el servicio se basa, como en todas las demás plataformas, en obtener en nuestra app un cliente del servicio (a través de la URL y el ID del servicio) con el que haremos las operaciones necesarias. Esto podemos hacerlo en varias partes de la aplicación, pero lo mejor es hacerlo en un script que contendrá todas las acciones a realizar con el servicio y que podrá ser utilizado desde nuestra vista. Para ello, creamos un nuevo script en la carpeta del proyecto reservado para ello (en mi caso se llama “mobileService.js” ) e introducimos en nuestra vista las dos referencias necesarias: la del SDK y la del script que hemos creado:

<script src="https://aspnetmvcdemo.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js"></script><script src="~/Scripts/mobileService.js"></script>

Ahora, en nuestro script, declaramos el cliente que conectará nuestra aplicación con el servicio de la siguiente manera:

 var client = new WindowsAzure.MobileServiceClient
            ('serviceURL',
            'serviceID');

Donde tendrás que reemplazar los valores de ‘serviceURL’ y ‘serviceID’ por los de tu servicio. Puedes encontrar estos datos en el portal de Windows Azure, dentro del servicio:

También en nuestro script, declaramos una variable que apunte a la tabla sobre la que vamos a realizar todas las acciones en esta demo:

 var playersTable = client.getTable('player');

3. Inserción de datos

Ya tenemos la aplicación conectada al servicio y con una tabla preparada para almacenar datos, por lo que nos toca insertar alguno. Para ello, nos basta con la siguiente línea:

 playersTable.insert({ name: playerName, number: playerNumber});

En el caso de mi aplicación, recojo los valores de un par de cuadros de texto, y compruebo que ninguno está vacío a la hora de insertar. Tras realizar la inserción, se actualiza la vista para comprobar que se ha insertado el dato correctamente:

         $('#add-player').submit(function (evt) {
            var textboxName = $('#new-player-name'),
                    playerName = textboxName.val();
            var textboxNumber = $('#new-player-number'),
                    playerNumber = textboxNumber.val();
            if (playerNumber !== '' && playerName !== '') {
                    playersTable.insert({ name: playerName, number: playerNumber}).then(refreshPlayersList);
            }
            textboxNumber.val('');
            textboxName.val('').focus();
            evt.preventDefault();
        });

También se puede comprobar si la inserción se ha realizado correctamente en el portal de Windows Azure, yendo a la pestaña de “Datos” y entrando en la tabla en la que se haya realizado la inserción para ver los registros que contiene. Tras unas cuantas inserciones, esto es lo que se puede ver en mi tabla Player…

…en la que podemos ver que, automáticamente, se han creado las columnas necesarias para almacenar los datos introducidos.

4. Borrando registros

Para borrar uno de los registros insertados, debemos establecer el elemento a borrar a través de su id, pudiendo poner su valor de forma explícita o mediante alguna expresión que nos busque el id del elemento:

 playersTable.del({ id: 5 })

playersTable.del({ id: getPlayerId(this) })

En este caso, muy similar al del ejemplo que nos proporciona el portal, cada jugador dispondrá de su botón de borrado, por lo que utilizo la función getPlayerId para encontrar el elemento a borrar a través de su id:

         $(document.body).on('click', '.player-delete', function () {
            playersTable.del({ id: getPlayerId(this) }).then(refreshPlayersList());
        });

        function getPlayerId(formElement) {
            return Number($(formElement).closest('li').attr('data-player-id'));
        }

5. Actualizando registros ya insertados

Por último, en esta aplicación se pueden editar en todo momento los datos de los jugadores introducidos, ya que en la lista de jugadores los datos se muestran en un cuadro de texto que puede ser modificado en cualquier momento. El código para realizar la actualización de estos datos sería el siguiente:

 playersTable.update({ id: getPlayerId(this), name: newName, number: newNumber });

Buscando una vez más al jugador a editar por su id. En esta aplicación, contemplo cambios por separado de cada uno de los campos, realizando la actualización de los datos así:

         $(document.body).on('change', '.player-name', function () {
            var newName = $(this).val();
            var query = playersTable.where({ id: getPlayerId(this) });
            playersTable.update({ id: getPlayerId(this), 
                                  name: newName, 
                                  number: query.number });
        });

        $(document.body).on('change', '.player-number', function () {
            var newNumber = $(this).val();
            var playerToUpdate = playersTable.lookup(getPlayerId(this));
            playersTable.update({ id: getPlayerId(this), 
                                  name: playerToUpdate.name, 
                                  number: newNumber });
        });

Como podemos ver, hay varias maneras de obtener el elemento a editar: mediante una consulta sobre la tabla usando su id (query) o mediante la función lookup, a la que también tenemos que pasarle el id del elemento.

Por tanto, sí, se pueden realizar ciertas consultas sobre las tablas de nuestro servicio. Por ejemplo, para que los jugadores salgan en orden ascendente por dorsal, leemos la tabla en orden usando un OrderBy a la hora de añadirlos a la lista que los muestra:

     function refreshPlayersList() {
        playersTable.orderBy('number').read().then(function (players) {
            var listPlayers = $.map(players, function (player) {
                return $('<li>')
                    .attr('data-player-id', player.id)
                    .append($('<button class="player-delete">Borrar</button>'))
                    .append($('<div>').append($('<input class="player-number">').val(player.number))
                    .append($('<input class="player-name">').val(player.name)));
            });
            $('#players-list').empty().append(listPlayers).toggle(listPlayers.length > 0);
            $('#summary').html('<strong>' + players.length + '</strong> jugador(es)');
        });
    }

6. Publicando la aplicación en Windows Azure Websites

También tenemos muchas formas de publicar nuestra aplicación en Azure Websites: desde un repositorio con CI como Team Foundation Service, desde Git en un repositorio local, desde Github…y desde Visual Studio, utilizando el perfil de publicación del website en cuestión, que es el método que he usado en este caso. Para ello, creamos un nuevo website en el portal de Windows Azure y descargamos estas credenciales:

Ahora, desde Visual Studio, hacemos click con el botón derecho sobre nuestro proyecto y elegimos “Publicar…” y, en el pop-up que nos aparece, pulsamos en el botón “Importar” . Nos llevará a buscar ese archivo con el perfil de publicación que hemos descargado, lo elegimos y pasamos a ver algo como lo siguiente:

Pulsamos en “Publicar” ,se abrirá el website en el que acabamos de publicar nuestra aplicación en el navegador y…SORPRESA! No funciona!! Aunque todo lo demás se muestre correctamente, no muestra la lista de jugadores, ni permite añadir ninguno…es decir, parece desconectada de nuestro servicio. Vamos a ver cómo podemos arreglar esto.

7. CORS (Cross Origin Resource Sharing)

El uso compartido de recursos entre orígenes (a.k.a. CORS) es una de las características que Windows Azure Mobile Services empezó a soportar desde el lanzamiento de este cliente web. Básicamente, permitirá que un WAMS acepte peticiones Ajax entre dominios, por lo que debemos configurar una lista de dominios permitidos para realizar peticiones sobre nuestro servicio. Para ello, desde el portal de Windows Azure, vamos a la pestaña “Configurar” del servicio, y añadimos el dominio de nuestro website:

Si no se nos ha olvidado darle al botón de GUARDAR y volvemos a cargar nuestro website, podremos (esta vez sí) verlo en funcionamiento:

Y de esta forma tan sencilla podemos conectar nuestra aplicación web con las demás versiones que tengamos en distintas plataformas, haciendo que el backend de todas ellas sea común y compartan información de forma muy simple.

PD: dejo la app publicada en https://wamswebclientdemo.azurewebsites.net, para que podáis ver la aplicación en funcionamiento. Por tanto, si conseguís tirar el servicio, sabré que el post ha sido un éxito

Un saludo,

Gorka Madariaga Núñez (@Gk_8)

Technical Intern