Azure Mobile Services no es más que un servicio de Microsoft Azure que nos permite construir un backend de forma muy rápido y que puede ser utilizado por diferentes plataformas como: Windows 10, Windows Phone, iOS, Android y el cliente web (HTML5/JavaScript).

Lo primero que vamos hacer es crear nuestro servicio en el portal de Microsoft Azure

Screenshot_2

Lo siguiente es definir la url que tendra nuestro servicio, asi como si vamos a crear una nueva base de datos para el almacenamiento de los datos o si utilizaremos una DB ya existente, en este caso vamos a crear una DB gratis de SQL Azure y nuestro backend sera Javascript

Screenshot_3

Vamos a especificar los datos que el portal nos pide para crear nuestra base de datos.

Screenshot_4

Ahora en nuestro servicio vamos a crear una tabla ademas de adicionarle las columnas necesarias para nuestro ejemplo, que en este caso sera una agenda personal con los datos básicos, la tabla a crear sera “Contactos” y  los permisos se los daremos de acuerdo a nuestras necesidades.

Screenshot_6

Las columnas que vamos a crear par nuestro ejemplo son:

  • name
  • address
  • cellphone
  • email

Screenshot_7

Azure Mobile Services nos permite acceder desde diferentes plataformas como lo comente en párrafos mas arriba, ademas de esto podemos ver ejemplos simples de como realizar este proceso con cada uno. En la segunda parte del post vamos a consumir este servicio utilizando HTML/JavaScript.  Nos vemos en la siguiente parte de este post.

Screenshot_8

Ahora vamos hacer es que en el marcado HTML, agregue una referencia a la biblioteca JavaScript de servicios móviles:

Para este ejemplo utilizaremos una variable global llamada App que esta ubicada en un archivo App.js  y sera algo así:AppJSMobileService

Instanciar servicio de Mobile Service:

En el código de JavaScript, agregue el código siguiente, que crea una instancia de MobileServiceClient.

this.client = new WindowsAzure.MobileServiceClient("urlServicio","key");

Almacenar datos en el servicio móvil:

Para almacenar los datos en nuestro servicio móvil necesitamos una tabla. Recordemos que en la primera parte de este post creamos una tabla llamada “Contactos”. Utilizamos la API del cliente de servicios móviles para almacenar datos en la tabla que acaba de crear.

Vamos a crear una función dentro de nuestra variable global App, el método, como no se llamara “save”, para almacenar datos en el servicio móvil, solo es necesario conocer la tabla a la cual vamos a insertar el nuevo registro así como obviamente los datos a guardar.

save: function (item) {
    this.client.getTable("Contactos").insert(item);
}

Nuestro objeto instanciado es “client” para obtener la tabla utilizamos “getTable” donde pasamos como parámetro el nombre de la tabla, seguidamente utilizamos “insert” pasando como parametro los elementos a guardar en la tabla, en este caso,  item es un objeto de la forma:

var item = {
    name: "Super Sayayin",
    address: "Angelopolis",
    cellphone: "343144646",
    email: "notengo@gmail.com"
};

Eliminar datos en el servicio móvil:

Para eliminar un registro de nuestra tabla “Contactos” basta con pasar el “id” que deseamos  eliminar y utilizar la función “del” que nos provee la API.

remove: function (id) {
    this.client.getTable("Contactos")
        .del({
        id: id
    });
}

Leer datos en el servicio móvil:

En este paso no me detendré mucho, ya que así se vea mucho código es mas manejo de JQuery que otra cosa.  Para leer los datos del servicio móvil, podemos leer todos como también podemos utilizar alguna condición para eso bastaría con utilizar “where“.

En este ejemplo consultamos todos los items que tiene la tabla “Contactos” haciendo uso de la función “read“.

refreshTodoItems: function () {
    var query = this.client.getTable('contactos');
    query.read().then(function (todoItems) {
        listItems = $.map(todoItems, function (item) {
            return $('
').attr('data-id', item.id).append($('').append(item.name))
                .append($('').append(item.address))
                .append($('').append(item.cellphone))
                .append($('').append(item.email))
                .append($('')
                .append(
            $('')
                .append(
            $('

Actualizar datos en el servicio móvil:

Para actualizar un item que ya tenemos almacenado en nuestra tabla en la nube de Azure debemos hacer uso del método “uptade” en el cual pasamos el id del registro que vamos a actualizar así como, los parámetros que cambiaron o deseamos modificar.

update: function (id, item) {
    this.client.getTable("Contactos")
        .update({
        id: id,
        name: item.name,
        address: item.address,
        cellphone: item.cellphone,
        email: item.email
    });
}

En esta segunda parte de nuestro post vimos como utilizar las principales funciones que nos provee la API de Azure Mobile Services utilizando HTML/Javascript, si quieres descargar el código completo de esta aplicación puedes entrar a mi GitHub y descargarlo.