[Tutorial]Crear WebService con WebMatrix y consumirlos desde WP7

Hola, debido a varias preguntas que me han hecho sobre el tema, es que vamos a ver un ejemplo de como hacer un WebService que retorne JSON con WebMatrix y que este pueda ser consumido desde una aplicación de Windows Phone 7.

Primero que nada vamos a ver como crear en WebMatrix servicios web que retornen JSON, de manera de poder consumirlos. En nuestro esquema vamos a tener un servicio conectado con una base de datos con productos. Entonces en webmatrix creamos la siguiente tabla que se llamará tabla Productos:

image

Luego debemos crear el código para la consulta a la base y el código para exponer los datos mediante JSON

Vamos por el primero, el código para obtener los datos desde la base para ser expuestos como JSON, para eso voy a crear la página (que va a hacer de librería) WSPrecio.cshtml, como vez, debe estar dentro de App_Code para que pueda ser accesible desde el resto de la aplicación

image

El código de esta página es:

@functions {

 

     public static List<Producto> GetProductos(string precio) {

        var db = Database.Open("Demo");

        var selectQueryString = "SELECT Nombre, Precio FROM Productos WHERE Precio > " + @precio;

        var data = db.Query(selectQueryString);

        List<Producto> productos = new List<Producto>();

        foreach (var row in data) {

             Producto producto = new Producto();

            producto.Nombre = @row.Nombre;

            producto.Precio = @row.Precio;

            productos.Add(producto);

 

        } 

 

       return productos;

    }

 

   public class Producto {

        public string Nombre {get; set; }

        public int Precio {get; set; }

    }

 

}

Revisemos un poco este código, tenemos una función estática que nos devuelve una listas de productos desde la base de datos que cumplan con la condición que tener un precio mayor a el parámetro de entrada a la función, el cual es el precio ingresado por el usuario.

Obtenemos los registros y luego recorremos esa colección para crear una colección tipada de objetos Producto, una vez que la recorremos por completo, devolvemos dicha colección.

Luego la pagina WS es la encargada de llamar a esta función, cuyo código es el siguiente:

@{

        var precio = Request.QueryString["precio"];

        if (precio == null || precio == string.Empty) {

            <p>Ingrese un Precio</p>

        }  else {

            var productos = WSPrecio.GetProductos(precio);

            Json.Write(productos, Response.Output);

        }

}

Como puedes ver , primero que nada obtenemos el parámetro obtenido por querystring (este será ingresado por el usuario), luego hacemos una pequeña validación y luego obtenemos la lista de productos desde la función para luego utilizar Json.Write que se encargará de la serialización.

Si probamos está pagina pasando el parámetro precio en 100

image

 

Ahora veamos capturar esta información desde Windows Phone 7, para ello crearemos un proyecto con Visual Studio 2010 para WP7, voy a crear una pantalla muy sencilla, que simplemente permita que el usuario ingrese un precio, y luego en un textbox voy a imprimir los resultados. Puedes ver en las siguientes imágenes el resultado.

image image

Ahora veamos el código del botón buscar, el que permite ir a buscar los valores al servicio que retorna JSON. Primero que nada, el handler del Boton, que simplemente valida que se ingrese un precio y luego instancia el objeto WebClient que se va a encargar de manejar el handler una vez que se haya realizado la conexión, luego llamamos al método GetProductos con el parámetro precio.

private void button1_Click(object sender, RoutedEventArgs e)
{
    if (tx_precio.Text != string.Empty){
       string precio = tx_precio.Text;
       productClient = new WebClient();
       productClient.OpenReadCompleted += new OpenReadCompletedEventHandler
                                         
(productClient_OpenReadCompleted);
       GetProductos(precio);
    }else{
       tx_resultados.Text = "Ingrese un número válido.";
    }
}

El siguiente método se encarga de hacer la petición a la dirección correspondiente (revisa el numero de puerto de tu iis express), pasaremos el parámetro precio por la Url y hacemos la llamada asíncrona( recuerda que en WP7 tiene que ser Asíncrono, no puedes hacerlo de otra forma, esto va en directo beneficio a la experiencia del usuario final)

private void GetProductos(string precio)

{

string requestUri = "http://localhost:60191/DemoWS.cshtml?precio=" + precio;

Uri uri = new Uri(requestUri);

productClient.OpenReadAsync(uri);

}

 

Ahora veamos lo último, en el siguiente método puedes ver que recibimos la respuesta, si es nula, bueno , es que se jodió la comunicación, nada que hacer, enviamos un error y terminamos, en otro caso serializamos el objeto que es una lista de objetos productos, tal como lo indicamos en Razor con WebMatrix. Recorremos la lista de productos que ya está tipada y podemos acceder a sus atributos, con esto es fácil asignarlos a controles de WP7, en mi caso lo hice simple y fue con un textbox.

void productClient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e){

 
if
(e.Error != null)

{

    tx_resultados.Text = "Ocurrio un error!";

    return;

}

var serializer = new DataContractJsonSerializer(typeof(List<Producto>));

var s = (List<Producto>)serializer.ReadObject(e.Result);

String resultado = "";

foreach (Producto p in s)

{

    resultado = p.Nombre + " " + p.Precio +"n" + resultado;

  }

if (resultado == null)

  {

    tx_resultados.Text = "No hay productos con un precio mayor o igual " +
    tx_precio.Text;
  }else{

    tx_resultados.Text = resultado;

   }

}

 

 

public class Producto

{

    public string Nombre { get; set; }

    public string Precio { get; set; }

}

 

y listo! con esto ya podemos enviar y recibir datos desde nuestro WP7 a WebServices desarrollados con WebMatrix y devolviendo JSON, que mejor? en serio, esta es la plataforma de desarrollo móvil mas sencilla para programar (desarrollo también para Android e iOS, se lo que digo Sonrisa)

Si quieres descargar el código de WebMatrix y de WP7 lo puedes hacer acá:

https://www.dropbox.com/s/v9yy4zoqmkm8u03/DemoWP7Web.zip

Espero que te sirva!
Saludos!
@chalalo

Un comentario en “[Tutorial]Crear WebService con WebMatrix y consumirlos desde WP7”

Deja un comentario

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