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

[Tips] Gráficos con Ajax Control Toolkit–Release de Junio 2013

Hola que tal? si bien ya no es tan famosa como antes, debido a que tenemos una gran cantidad de plugins de jquery disponible, la suite de controles Ajax Control Tookit se sigue actualizando, con nuevos y mejorados controles. Uno que me llamó la atención por la facilidad de uso es el nuevo control Bar Chart, el cual permite crear gráficos de barra de una manera bastante sencilla.

Para el ejemplo voy a crear una App ASP.NET WebForm, y luego incluir la biblioteca de controles con NuGet (aunque recuerda que hoy en día, con el nuevo Visual Studio 2013 y ASP.NET 4.5 el concepto de ASP.NET en uno solo)

image

Luego agregamos los controles con Nuget

image

Una vez agregadas todas las referencias, voy a agregar en mi formulario un ToolkitScriptManager y el control BarChart

<ajaxToolkit:BarChart ID="BarChart1" runat="server"

   ChartHeight="300" ChartWidth="450" ChartType="Column"

   ChartTitle="Venta de Telefonos Lumia – Julio (Miles)"

   CategoriesAxis="620,720,820,920"

   ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9"

   ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">

   <Series>

    <ajaxToolkit:BarChartSeries Name="EEUU" BarColor="#0404B4"

                 Data="110, 189, 255, 95" />

    <ajaxToolkit:BarChartSeries Name="Europa" BarColor="#FF8000"

                 Data="49, 77, 95, 68" />

   </Series>

</ajaxToolkit:BarChart>

Y el resultado (los datos son de prueba, los inventé):

image

Las Propiedades del Barchar son las siguientes

  • ChartHeight: Permite customizar el alto del gráfico.
  • ChartWidth: Permite customizar el ancho del gráfico.
  • ChartTitle: Setea el titulo del gráfico.
  • CategoryAxis: [Requerido] . Set de valores para setear los valores del eje de categorias para crear el gráfico de barras.
  • ChartType: Permite seleccionar entre diferentes tipos de gráficos de barra (Column, StackedColumn, Bar y StackedBar.)
  • Theme : Permite controlar la apariencia del gráfico mediante un archivo CSS.
  • ValueAxisLines: Esta propiedad le permite establecer el tamaño del intervalo de la línea de eje.
  • ChartTitleColor: Esta propiedad permite setear el color de la fuente del titulo del gráfico.
  • CategoryAxisLineColor:   Esta propiedad permite setear el color del la línea del eje de categorías.
  • ValueAxisLineColor: Este propiedad permite setear el color de las líneas del eje de los valores.
  • BaseLineColor: Este propiedad permite setear el color de las líneas  base del gráfico.

Propiedades de BarChartSeries:

  • Name – El nombre de la serie (requerida)
  • Data : Corresponde a la data  (Arreglo de decimales) de la serie.
  • BarColor : Permite setear el color del la barra de la serie.

En el ejemplo anterior vemos que utilizamos dos BarChartSeries, ahora vamos a probar algo sencillo de pero de manera programática. Para esto voy quitar las series y la propiedad CategoryAxis del código declarativo, luego , la declaración del control queda de la siguiente manera:

<ajaxToolkit:BarChart ID="Grafico" runat="server"

   ChartHeight="300" ChartWidth="450" ChartType="Bar"

   ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9"

    ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">

</ajaxToolkit:BarChart>

Y el código programático para definir las series y configurar el gráfico:

protected void Button1_Click(object sender, EventArgs e)

{

   //Definimos el arreglo de Decimales

   decimal[] Datos1 = { 40m, 55m, 67m, 64.7m };

   decimal[] Datos2 = { 45m, 75m, 47m, 44.7m };

   Grafico.ChartTitle = "Total Ventas";

   Grafico.CategoriesAxis = "Limones, Naranjas, Platanos, Uvas";

 

   //Setear la Serie 1

   AjaxControlToolkit.BarChartSeries serie1 = new
                                       AjaxControlToolkit.BarChartSeries
();

   serie1.Name = "Market 1";

   serie1.Data = Datos1;

   serie1.BarColor = "#999999";

  

   //Setear la Serie 2

    AjaxControlToolkit.BarChartSeries serie2 = new
                                       AjaxControlToolkit.
BarChartSeries
();

    serie2.Name = "Market 2";

    serie2.Data = Datos2;

    serie2.BarColor = "#33FFFF";

   

    //Agregamos las series al gráfico

    Grafico.Series.Add(serie1);

    Grafico.Series.Add(serie2);

  

    //Hacermos el Binding

    Grafico.DataBind();

}

Luego al ejecutar el código y al presionar al botón veremos nuestro gráfico:

image

Como vez, bastante fácil y gratis Sonrisa, espero que te sirva!
Links:

@chalalo

[Tip] Nueva característica en la barra de desplazamiento de Visual Studio 2013

Sin duda cada vez que hay un nuevo release de visual studio nos encontramos con nuevas características, esta vez una que encuentro muy Cool, que tiene que ver con la barra de desplazamiento en la vista de código, puedes llegar al menú mediante opciones o presionar botón derecho sobre la barra de desplazamiento, este es la ventana de opciones de Visual Studio 2013:

image

En la sección de comportamiento vamos a seleccionar “Usar el modo Mapa para la barra de desplazamiento Vertical”

Y ahora veremos en la barra el siguiente mapa, que al pasar el mouse sobre él nos dará una vista ampliada del código que ahi se encuentra Sonrisa

image

Si bien existían plugin para esto, nunca están demás las ayuditas que se nos entregan en los IDE, mientras más productivos , mejor Sonrisa.
Saludos,
@chalalo

Nuevo y mejorado, el concepto UN solo ASP.NET.

Hola que tal, ha sido una semana llena de excelentes anuncios en el //build/ , realmente increíbles las novedades con un solido Windows 8.1 que me ha dejado asombrado, además de un Internet Explorer 11, cada vez mejorando la experiencia de usuario, Visual Studio 2013 y  muchísimas cosas más, realmente abrumador. En esta oportunidad quiero referirme al nuevo enfoque, y necesario a mi gusto, de ASP.NET, ahora existe el concepto de un 1 solo ASP.NET y indiferenciando si vas a utilizar WebForms, Web Pages, SPA, MVC, Web API o SignalR. Quizás los desarrolladores de WebForms erán los que  de alguna manera , se sentían más excluidos a las nuevas características, pero esta vez, es todo lo contrario, hay motivo para celebrar, ya que los desarrollos hechos con WebForms van a permitir incluir las librerías de MVC y Web API de una manera muy sencilla.  Es así como tu aplicación webform podrá tener, por ejemplo la misma cara de siempre, con WebControls y por otro lado aprovechar las ventajas de Web API para servicios Rest Ful, y esto es, entre otras cosas, utilizar controladores dentro de tu app WebForm.

Veamos un poco el esquema del concepto:

image

Algunos preguntarán , donde quedó WebServices que no lo veo en Services!, y calma, esta todo bien,  WebServices sigue firme en lo que es WebForms, y lo podrás seguir utilizando para conectarse desde tecnología del cliente o del servidor.

Ahora vamos a crear un proyecto, basado en la charla de Scott Hanselman del Build, asi que si ya la viste, este ejemplo te será familiar, la idea es crear una aplicación ASP.NET WebForms para luego  utilizar Scaffolding de una clase , este Scaffolding o “Andamiaje”creará todo lo necesario para que podamos hacer un CRUD.

Lo primero que vamos a hacer es crear un nuevo proyecto con Visual Studio 2013 Preview.

PD: Si no lo tienes, puedes descargarlo por acá.

Ahora verás que existe la opción “Aplicación Web ASP.NET” que ya nos da luces sobre el nuevo esquema “un solo ASP.NET”, de todos modos, vas a ver un submenú que dice “Visual Studio 2012” en donde vas a encontrar la organización separada de los proyectos tal cual vs2012.

image

Ahora podemos elegir que es lo que queremos integrar en nuestra aplicación de ASP.NET, por ejemplo yo voy a elegir Web Foms y voy a incluir las referencias y carpetas de MVC y Web API:

image

Luego en nuestro proyecto, en la carpeta Models vamos agregar una nueva Clase, en este caso es la Clase Persona:image

El código de la clase Persona va a ser el siguiente:

  public class Persona

    {

        [ScaffoldColumn(false)]

        public int PersonaId { get; set; }

        public string Nombre { get; set; }

        public string Apellido { get; set; }

        public int Edad { get; set; }

 

    }

Para utilizar el atributo de columna ScaffoldColum debes agregar la referencia, esto es simplemente para que no se haga el

image

Ahora vamos agregar el “Andamiaje…” en la carpeta de Controladores:

image

Visual Studio 2013 nos ofrece a través del administrador de Paquetes NuGet el Scaffold, vamos a seleccionar:image

Esto nos permitirá contar con las operaciones clásicas de un CRUD. Luego se nos consultará por el nuevo contexto de datos:

image

Luego se nos consultará sobre la clase asociada, el contexto, en este caso es un nuevo contexto, en mi caso, seleccioné la posibilidad de contar con vistas móviles y las de escritorio:

image

y ahora ya me ha creado las páginas aspx e incluyendo la vista móvil que seleccioné anteriormente:

image

Ahora al ejecutar la pagina (/Personas/Insert) tenemos las siguientes vistas para móvil (que utiliza jquerymobile) y la vista de escritorio (que también utiliza CSS3 media queries por defecto):

imageimage

Otro punto interesante es que por defecto se utiliza FriendyURL de manera que la integración Webform , MVC y Web Api sea aún más natural.

El concepto de ModelBinding que teníamos en MVC ahora también está en WebForms, Scott Hanselman remarcó en su charla, que el concepto de ModelBinding ahora es único para todo ASP.NET, independiente de la tecnología Sonrisa

Ahora pasaremos a punto 2 en donde vamos a integrar ASP.NET Web APi, para eso vamos a los controladores y agregamos nuevamente un Andamiaje:

image

Esta vez seleccionaremos Controlador de Web API 5 con acciones de L/E que utilizan EF, de manera tener esta API con las acciones necesarias para un CRUD.

image

Luego se nos consulta como se llamará el controlador , cual es el modelo de dato y el contexto asociado:

image

Veremos a continuación que ya se nos generó el controlador y estamos listos para utilizarlo:image

Ahora simplemente hacemos referencia a Api/Persona y tenemos los datos que ingresamos por el formulario WebForm:

image

Como puedes ver, la integración es total, me parece muy acertado el concepto de un solo ASP.NET, esto permitirá una nueva etapa en la que podremos expandir las posibilidades de nuestros desarrollos fácilmente Sonrisa.

Si quieres ver la charla de Shanselman, está acá:
http://channel9.msdn.com/Events/Build/2013/2-546

Más adelante comentaré otros nuevas características, Enjoy!!!

Saludos,
@chalalo