Comenzando Azure Mobile Services–Ejemplo Práctico con HTML5 + JS [Parte 1]

Hola que tal?, en este post vamos a ver un pequeño ejemplo de como utilizar Azure Mobile Services con HTML + JS + JQueryMobile. AMS simplemente me parece genial, nos abstrae de la comprejidad de un backend para que nuestras apps puedan, un poco tiempo y con el mínimo esfuerzo, almacenar y acceder a recursos en la nube. Si quieres más información te recomiendo que veas estos excelentes videos del build 2013.

AMS permite en pocos pasos descargar una aplicación de ejemplo para HTML, IOS, Android , WP8 y Windows 8, que nos permitirá apreciar la funcionalidad. En mi caso,voy a hacer una app paso a paso de HTML, para no quedarnos solo con el ejemplo y entender como funciona.

Como es un ejemplo , hay cosas que quizás no te parezcan las más lógicas, pero es solo para mostrar algunas funcionalidades, entre las cuales tenemos:

  • Crear el servicio móvil (parte 1)
  • Listar los registros  (parte
  • Validar entradas en el servidor mediante javascript, que los campos nombre y tipo no sean menores, en su largo a 3, caracteres. (parte 1)
  • Modificar registros
  • Eliminar Registros

Gráficamente lo que realizaré será lo siguiente

image image[64]

Básicamente un listado, en donde se muestre una lista de películas, en donde podamos votar por ella o borrarla, además de un formulario de ingreso, como puedes ver, las dos páginas creadas con jQueryMobile.

Entonces, nos vamos con el tutorial Sonrisa

Azure Mobile Services.

Una vez que tengas tu cuenta, vas a poder a la opción de AMS, en mi caso, primero cree la base de datos PeliculasSinet_db:

image

Luego, con la opción Administrar cree la tabla que necesitaba para el ejemplo:

image

Luego seleccioné la opción de crear un nuevo servicio móvil:

image

Si no has creado la base de datos, vas a tener la oportunidad de crearla

image

y luego seleccioné la base de datos que había creado (seleccioné la opción gratis de 20mb)

image

Y listo, tenemos ya el servicio móvil, puedes ver que al lado del nombre hay una flecha, con la cual podremos entrar a las opciones del servicio movil.

image

En esta parte verás que se ofrece soporte para crear una nueva aplicación o conectar una aplicación existente en distintas plataformas, esto tiene como resultado que descargar una app totalmente funcional apuntando a una base de prueba (ToDo-List).

image

Luego podemos ir a la vista panel para revisar el dashboard muy completo de la utilización de este servicio móvil (en mi caso ya había hecho unas pruebas, por eso la gráfica de estas características)

image

Si vamos a la vista de Datos, podremos explorar los datos, ver las columnas de la tabla, intervenir los script de inserción, modificación, eliminación y selección de la tabla (esto lo veremos más adelante en el post) , además podemos establecer los permisos sobre la misma. (esto lo veremos en otro post)

image

Con esto estamos Ok, ahora veamos el desarrollo del cliente

Cliente HTML + JS

Como ya habíamos visto al inicio, el ejemplo tendrá dos vistas, la de inserción y la de listado-modificación-eliminación, primero veremos la vista de inserción. Para el desarrollo de este cliente utilice mi editor favorito, WebMatrix Sonrisa

Pagina de Inserción:

Como ya dije anteriormente, voy a utilizar jQueryMobile, para simplificar la explicación, me voy a concentrar solamente en el tema de la funcionalidad y no el diseño de JQM

image

Voy a incluir dos referencias a archivos JS, uno que permite la conexión a AMS y es obligatorio si deseas ocupar esta tecnología, el otro es la lógica de la pantalla y que vamos a pasar a revisar:

<script src=”https://peliculassinet.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js”></script>

<script src=”insertar.js”></script>

Veamos el archivo insertar.js para entender como se trabaja desde JS con AMS.

$(function () {
    var client = new WindowsAzure
                   .MobileServiceClient('https://peliculassinet.azure-mobile.net/'
                   ,'OUkhVzulGEkkSCtMGpkVoQbEpFVJK337'),
                    TablaPeliculas = client.getTable('Peliculas');
 
    function manejaError(error) {
        var text = error + (error.request ? ' - ' + error.request.responseText : '');
        alert(text);
    }
 
    function cuentaRegistros() {
        $("#sp_total").html("<img src='ajax-loader.gif' />");
        TablaPeliculas.take(0).includeTotalCount()
                              .read().then(function (results) {
            $("#sp_total").text(results.totalCount);
        });
    }
 
    $('#agregar-pelicula').submit(function (evt) {
        TablaPeliculas.insert({
            Nombre: $('#tx_pelicula').val(),
            Tipo: $('#tx_tipo').val(),
            Votos: $('#rn_votos').val()
        }).then(cuentaRegistros, manejaError);
 
        evt.preventDefault();
 
    });
    cuentaRegistros();
});

 

Puedes ver al inicio del script que se hace la llamada al AMS propiamente tal, mediante el método MobileServiceClient con la URL y la clave de la aplicación. Esta clave de la aplicación la puedes obtener en el panel del AMS en la opción:

image

Luego obtengo la tabla Peliculas, en esta parte puedes crear jqueries para filtrar los registros que vas a obtener (esto lo veremos en un próximo post), en mi caso, estoy recuperando toda la tabla.

Agregamos handler para cuando se presione el botón “Guardar Pelicula” del formulario. Puedes notar que simplemente se hace un insert con los valores, muy parecido a Linq, y es que la referencia a la biblioteca de Azure nos permite esta facilidad. Luego ocupamos los deferred de jquery , en este caso then para llamar a la función cuentaRegistros o manejaError en el caso que algo no saliera según lo previsto.

La función ManejaError es muy simple, solo recibe el objeto error y lo muestra al usuario,  la función cuentaRegistros obtiene el total de contar todos los registros de la tabla, solo trae el resultado, no la lista completa.

Ahora bien, necesitamos que nos valide que no se ingresen valores con menos de 3 caracteres:

image

Esto lo vamos a hacer en el servicio móvil, así que vamos a la opción Datos, y luego Script , en la operación Insert voy a escribir el siguiente código:

image

Como vez es JavaScript , esto trabaja por debajo con Node.js, asi que era natural que los script se definieran de esta forma. Una vez detectado el error, lo que hacemos es responder con un statusCode. BAD REQUEST, puedes ver que en la captura del error.

Ok, sigo en los próximos días entregando la segunda y tercera parte de este post. Les dejo también un par de link para recursos:

Recursos:

http://www.windowsazure.com/en-us/develop/mobile/how-to-guides/work-with-server-scripts/?fb=es-es#register-table-scripts

http://www.windowsazure.com/en-us/develop/mobile/resources/?fb=es-es#header-3

6 comentarios en “Comenzando Azure Mobile Services–Ejemplo Práctico con HTML5 + JS [Parte 1]”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *