Aplicación noBackend: Azure Mobile Services (Parte 2)

Como desarrollador web
Quiero consumir el servicio Azure Mobile Services utilizando HTML5/JavaScript
Para comprender mejor el concepto del noBackend.

En la primera parte de este post vimos como crear un servicio de Azure Mobile Services, ahora en esta ocasión vamos a ver como consumir este servicio a través de HTML5/JavaScript, recordemos que en este ejemplo, nuestro mini proyecto consta de crear contactos para una agenda que utiliza el servicio de Azure.

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

<script src='http://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.1.0.min.js'></script>

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 $('<tr>').attr('data-id', item.id)
                    .append($('<td>').append(item.name))
                    .append($('<td>').append(item.address))
                    .append($('<td>').append(item.cellphone))
                    .append($('<td>').append(item.email))
                    .append($('<td>')
                        .append
                            (
                                $('<button>').attr('class', 'btn btn-primary btn-xs edit-element')
                                .append($('<span>').attr('class', 'glyphicon glyphicon-pencil'))
                            ))
                    .append($('<td>')
                        .append
                            (
                                $('<button>').attr('class', 'btn btn-primary btn-xs remove-element')
                                .append($('<span>').attr('class', 'glyphicon glyphicon-trash'))
                            ));
            });
            $('#tblTablaContactos > tbody').empty().append(listItems).toggle(listItems.length > 0);
        });
    }

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.

Anuncios

2 comentarios en “Aplicación noBackend: Azure Mobile Services (Parte 2)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s