jquery


27
mar 12

Consumiendo REST desde C#.NET

No Gravatar
Consumir RESTful en .NET

Consumir RESTful en .NET

Hace algunos días atras buscaba una forma decente y elegante de crear mi propia api utilizando RESTful para Celestic .. de esa forma fue que llegue a StackOverflow y muchas preguntas de usuarios necesitando código para consumir servicios basados en REST.. En este sitio todavía no colaboro por lo que no quize responder, ya pensándolo bien fue que decidí escribir este artículo.

Sé que hay otra manera de hacerlo.. pero para este ejemplo utilizaremos el objeto HttpWebRequest y HttpWebResponse, entonces comenzamos:

var postString = new {clave1:valor1, clave2:valor2};
byte[] data = UTF8Encoding.UTF8.GetBytes(postString);
 
HttpWebRequest request;
request = WebRequest.Create("http://localhost/ejemplo/api") as HttpWebRequest;
request.Timeout = 10 * 1000;
request.Method = "POST";
request.ContentLength = data.Length;
request.ContentType = "application/json; charset=utf-8";

Básicamente lo que se hace es instanciar de HttpWebRequest y setear algunos parámetros, entre ellos y mas importante el método (Method), la longitud de la petición (ContentLength) y el tipo de dato a enviar (ContentType). No pierdan de vista que estoy enviando postString que a su vez es un objeto tipo Json.

La mayoría de servicios basados en REST requieren autenticación básica.. y pues es una de las más fáciles de utilizar.. inclusive desde el navegador se puede hacer, lo único que se requiere es un usuario y una clave de acceso..

string credentials = Convert.ToBase64String(ASCIIEncoding.ASCII.GetBytes("usuario:clave"));
request.Headers.Add("Authorization", "Basic " + credentials);

Esto es como algunas páginas en internet que piden autenticación para entrar, donde puedes escribir la url y esperar a que aparezca el formulario de inicio de sesion o escribirlo directamente en la url.. de la forma: “usuario:clave@http://localhost/ejemplo/api”

Ahora lo siguiente y último paso es enviar los datos y obtener la respuesta..

Stream postStream = request.GetRequestStream();
postStream.Write(data, 0, data.Length);
 
HttpWebResponse response = request.GetResponse() as HttpWebResponse;
StreamReader reader = new StreamReader(response.GetResponseStream());
string body = reader.ReadToEnd();

Y para finalizar body es el contenido de lo que ha respondido el servicio, recuerden que la respuesta es tipo Json.. por lo que pueden interpretarla facilmente con javascript o hacer algo más complejo si desean parsearlo desde .NET.

Espero les sirva el código.. y si encuentran algun error, recuerden que el formulario de comentarios no muerde.. :D

Compartir y Disfrutar

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon

28
feb 12

jQuery Mobile lo bueno y lo malo

No Gravatar
JQuery Mobile

JQuery Mobile

Desde mi blog la semana pasada hacía una reseña sobre 3 diferentes alternativas para desarrollar aplicaciones web para teléfonos móviles (iPhone, Android, Blackberry, Windows Phone, etc) .. al final decidí quedarme con jQuery Mobile por la sencillez y rápida curva de aprendizaje.. además que estaba trabajando en un prototipo de proyecto que no debía tomarme más de 3 días desarrollarlo. En fin, el propósito de este artículo es mostrarles de que manera funciona esta librería.. las carencias que encontré y las virtudes que pueden ayudar a escribir aplicaciones móviles en casi cuestión de horas.

Como funciona

Las aplicaciones web básicamente trabajan 2 capas que son el procesamiento de datos, algo que siempre ocurre del lado del servidor y la presentación de la información que es lo que el servidor regresa a los navegadores en un formato de meta etiquetas (html) .. pues bueno, jQuery Mobile agrega una capa extra que sería como una especie de manejador de eventos que se encarga de escuchar todas las pulsaciones que hacemos sobre los enlaces y botones de formularios para luego solicitar al servidor su proceso vía ajax .. La verdad es que la lógica de como funciona es muy simple porque todo ocurre mediante callbacks.. Si llegan a ver algunos ejemplos de como son estas aplicaciones desarrolladas con jQuery Mobile verán transiciones de entrada y salida entre las páginas y pues esto es el resultado de esas peticiones administradas vía ajax.. Y como todo lo que se hace con javascript, jQuery Mobile se puede parametrizar para que tenga el comportamiento que deseamos.

La tecnología que emplea

Es importante mencionar que esta librería y así he decidido llamarlo porque no creo que llegue al nivel de framework.. su uso esta basado totalmente en HTML5 .. ese nuevo estandar de desarrollo web que se está poniendo de moda.. y CSS3 que vienen a ser como el estilista del HTML5.. entonces si defino a jQuery Mobile diría que es una combinación de mucho HTML5 que utiliza inteligentemente metadatos en las etiquetas, canvas para dibujar algunos botones y CSS3 para administrar la capa visual (esquinas redondeadas, gradientes lineares, sombras y más)…

Una buena recomendación

Si estan interesados en empezar a desarrollar aplicaciones móbiles nativas, creo que antes deberían de entrarse un poco en el uso de este tipo de herramientas para desarrollar la visión del diseño de como son las aplicaciones móbiles, ya que la naturaleza de este tipo de aplicaciones requiere de otro tipo de destrezas relacionadas más que todo con usabilidad que al final es la parte visual y lo que más interesa a los usuarios. Con esto no estoy tratando de decir que las aplicaciones móbiles web son mejores que las nativas.. claro que no!! sería imposible hacer la comparación, pero en el caso de que se necesita escribir una aplicación en tiempo record que sea multiplataforma.. lo más obvio sería utilizar jQuery Mobile o cualquier otra herramienta para este propósito y bueno, eso sin mencionar que el costo monetario es mucho muy inferior.

Lo que hay que tener en cuenta

Es bueno recordar que las aplicaciones móbiles no deben ser complejar, el contenido debe invitar a los usuarios a navegar y al mismo tiempo a constuir un mapa de enlaces en la mente para que sepan como utilizarla casi inmediatamente. Eso significa que no se deben de pensar en interfaces complejas o en componentes que puedan confundir a quienes la usen. Jquery Mobile tiene como elementos básicos los componentes de formularios (input, select, checkbox, radio y button).. otros elementos serían las listas, barra de navegación y es todo.. igual que con jQuery hay desarrolladores externos que estan escribiendo plugins como por ej. datepickers o uploaders que son necesarios y no estan incluidos en la librería.

Utilizarlo con moderación

Creo que antes de decidir su uso o no.. deberían de tomar uno de los ejemplos de la página de ayuda y ver si es compatible con los dispostivos en los que pensarían utilizarlo.. por. ej. yo utilizo un Android 2.3 donde las imágenes y animaciones no son tan fluídas.. lo he probado en un iPhone 3GS y lo ví un poco torpe con las animaciones.. con el iPhone 4 se vé de maravilla al igual que con una tablet android con 3.0 y tampoco tuvo problemas..

Al final la aplicación que escribí es un ligero CRM con un enfoque hacia seguimiento de ventas.. si!! tarde 3 días en el desarrollo, aun es una versión beta y fue rápido hacerlo porque tras el código estuvo una arquitectura MVC.. si me animo quizás suba el código a github y luego al laboratorio de Qbit para que aprendan un poco sobre jQuery Mobile.

Y para finalizar el resultado final en un teléfono LG Optimus Black.. nada mal eh..!!

Mobile CRM

Mobile CRM

Compartir y Disfrutar

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon

7
feb 12

Ajax loading css (indicadores de carga)

No Gravatar
Indicadores de carga

Indicadores de carga

Si desarrollas aplicaciones web, seguramente te has topado con el comentario por parte de los usuarios de que dan click a un botón o enlace y dicen ellos que no pasa nada.. y claro, algunas veces el servidor responde muy lento debido a la carga de peticiones o la cantidad de datos que debe retornar.. entonces es ahí cuando se hace necesario mostrar de manera visual que deben esperar, que su petición esta siendo atendida y que pronto obtendrán una respuesta.

Este es uno de esos métodos siempre útiles para cuando trabajamos con ajax (postbacks o callbacks), mejor conocidos en inglés como loaders o loading spinners. Este post es una pequeña guía para mostrar como implementar un loader utilizando jQuery o Mootols y ajax.

Es necesario escribir un poco de CSS, por lo que el código que viene es la clave para que el cargador tenga sentido

div.loading, .loading {
   background-color: #FFFFFF;
   background-image: url('loading.gif');
   background-position: center center;
   background-repeat: no-repeat;
   z-index: 1400;
}
div.loading * {
   visibility: hidden;
}

Y ahora implementado utilizando jQuery

$.ajax({
  url: 'prueba.html',
  type: 'get',
  beforeSend: function() {
    $(".grid").addClass("loading");
  },
  success: function(respuesta) {
    $(".grid").empty().html(respuesta);
  },
  complete: function() {
    $(".grid").removeClass("loading");
  }
});

Y para quienes gustan de Mootools, se hace de esta forma

var req = new Request({
   method: 'get',
   url: 'prueba.html',
   onRequest: function() {
      $(".grid").addClass("loading");
   },
   onComplete: function(respuesta) {
      $(".grid").removeClass("loading");
      $(".grid").empty().setHTML(respuesta);
   }
}).send();

Para este ejemplo loading.gif es una imagen animada que puede conseguirse en cualquiera de los siguientes sitios:
http://www.ajaxload.info/
http://preloaders.net/
http://www.loadinfo.net/
http://www.webscriptlab.com/
http://www.chimply.com/Generator
http://mentalized.net/activity-indicators/

Para finalizar, .grid representa el elemento o etiqueta en el cual se mostrará el cargador.. yo cuando lo utilicé fue para una tabla que paginaba vía ajax..

Posted from WordPress for Android

Compartir y Disfrutar

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon

Qbit Mexhico Blog is using WP-Gravatar