Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

Tutorial Asp.net Web API con MongoDB – Parte 1

Hola, en esta primera parte del un tutorial en el cual vamos a estar trabajando con ASP.NET Web API junto a MongoDB, adicionalmente vamos a utilizar también jQuery y Windows Phone 7 como cliente.

El contexto de la aplicación es el siguiente, existen farmacias de turno, que se pueden consultar mediante la ciudad y la fecha. Entonces la idea es disponibilizar esta información mediante la Web Api, por lo tanto la primera parte de este tutorial tiene que ver con esta consulta.

Entonces el tutorial se dividirá en las siguientes partes:

  • Parte 1 : Creación de Proyecto, Controlador , consulta de datos con jQuery
  • Parte 2: Inserción , Borrado y Modificación
  • Parte 3: Autorización
  • Parte 4: Consumo de datos mediantes WP7
  • Como esta es la parte 1 , vamos a revisar paso a paso lo que necesitamos para comenzar:

    Primero , crear un proyecto ASP.NET MVC 4 Web Application:

    image

    Luego se nos presenta una pantalla con las distintas plantillas con las que podemos trabajar, obviamente vamos a seleccionar Web API

    image

    Luego ya tenemos la estructura del proyecto. Paso siguiente es hacer referencia a las librerías de MongoDB, para mayor información revisa este post que hice sobre ello: http://geeks.ms/blogs/gperez/archive/2011/12/02/tutorial-mongodb-con-asp-net-mvc-ejemplo-pr-225-ctico.aspx

    image

    En mi caso voy a crear mi propio controlador, no voy a utilizar el que viene por defecto, así que agrego un nuevo controlador, seleccionado Add, Controller

     

    image

    Agrego entonces mi “FarmaciaController” utilizando el template Empty API Controller,

    image

    El template seleccionado nos entrega un controlador vacío, al cual agregaremos la acción que necesitamos, consultar por ciudad y fecha.

     

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Net.Http;
    using System.Web.Http;
    using FarmaciasWebAPI.Models;

    namespace FarmaciasWebAPI.Controllers

    {    public class FarmaciaController : ApiController    {

            public Farmacia GetFarmacia(string comuna, string fecha) {

              FarmaciaModels fm = new FarmaciaModels();
              Farmacia farmacia = fm.GetFarmacia(comuna, fecha);
              if (farmacia != null){
                   return farmacia;
              }
              throw new HttpResponseException(HttpStatusCode.NotFound);
            }

        }
    }

     Es una buena práctica devolver una excepción del tipo HttpStatusCode.NotFound, ya que de esta manera podemos manejas los estados del Http Response en jQuery de manera más cómoda. Como puedes ver, instanciamos el modelo y  ejecutamos su método GetConsulta. Veamos el código del modelo:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MongoDB.Bson.IO;
    using MongoDB.Bson.Serialization;
    using MongoDB.Bson.Serialization.Attributes;
    using MongoDB.Bson.Serialization.Conventions;
    using MongoDB.Bson.Serialization.IdGenerators;
    using MongoDB.Bson.Serialization.Options;
    using MongoDB.Bson.Serialization.Serializers;
    using MongoDB.Driver.Builders;
    using MongoDB.Driver.GridFS;
    using MongoDB.Driver.Wrappers;
    using MongoDB.Driver;
    using MongoDB.Bson;

     namespace FarmaciasWebAPI.Models
    {
        public class FarmaciaModels    {

         private MongoDatabase Db()  {
           string connectionString = "mongodb://localhost";
           MongoServer server = MongoServer.Create(connectionString);
           MongoDatabase db = server.GetDatabase("farmaciasTurno");
           return db;
       }

       public Farmacia GetFarmacia(String comuna, string fecha)
      {

        MongoDatabase db = Db();
       
    MongoCollection<Farmacia> farmacias =
                                      db.GetCollection<
    Farmacia>("farmacias"
    );

        var query = Query.And(
                      Query.EQ("Comuna",comuna),
                      Query.EQ("Fecha",fecha)
                  );

        Farmacia farmacia = farmacias.FindOne(query);
        return farmacia;
       }

      }
    }

    Puedes ver que tenemos la conexión, obviamente en ambientes del producción vamos a necesitar el string de conexión con autenticación.
    Veamos el método GetFarmacias que recibe los parámetro comuna y fecha para luego ejecutar la consulta sobre la colección que se obtiene desde mongo.
    El clase farmacia tiene la siguiente estructura:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MongoDB.Bson.Serialization.Attributes;
    using MongoDB.Bson.Serialization.IdGenerators;
    using MongoDB.Bson; 

    namespace FarmaciasWebAPI.Models{

        public class Farmacia
        {  [BsonId(IdGenerator = typeof(CombGuidGenerator))]
            public Guid Id { get; set; }

           [BsonRequired]
            public string Nombre { get; set; }

           [BsonRequired]
            public string Direccion { get; set; }

           [BsonIgnoreIfNull]
            public string Telefono {get;set;}

           [BsonRequired]
            public string Comuna { get; set; }

            public string Latitud { get; set; }
            public string Longitud { get; set; }

            [BsonRequired]
            public string Fecha { get; set; }

        }

    }

    Pero se me queda algo en el tintero, debemos modificar el global.asax  para agregar un MapRoute nuevo, de manera que nos permita llamar a un controlador con la acción que ya vimos, es decir con dos parámetros.

       routes.MapHttpRoute(
                    name: "ConsultaDefaulWebApi",
                    routeTemplate: "api/{controller}/{comuna}/{fecha}",
                    defaults: new { }
       );

       (En este caso los parámetros no son opcionales)

    Ahora podemos ejecutar nuestro proyecto,a modo de ejemplo ingreso la siguiente URL:

    http://localhost:<puerto>/Api/Farmacia/Concepcion/27-04-2012

    Y vemos:

    image

    Ahora que estamos ok con nuestro BackEnd, vamos a programar el front-end, de manera muy sencilla, la idea es que al presionar un botón buscar, veamos la información de la farmacia solicitada y que podamos ocupar la información de Latitud y Longitud para geo referenciarla:

    image

    El código JavaScript es el siguiente:

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" ></script>

    <script>
        $(document).ready(function () {
            $("#buscar").on({
                click: function () {
                    var data = "/Concepcion/27-04-2012";
                    $.ajax({
                        url: "http://localhost:51753/Api/Farmacia" + data,
                        type: "GET",
                        contentType: "application/json;charset=utf-8",
                        statusCode: {
                            200: function (farmacia) {
                                muestraMapa(farmacia);
                            },
                            400: function () {
                                $("#mensaje").text("Error en la Petición");
                            },
                            404: function () {
                                $("#mensaje").text("Datos no Encontrados");
                            },
                            500:function(){
                                $("#mensaje").text("Error en el servidor");
                            }
                        }

                    });
                }
            });

    function muestraMapa(farmacia)
    {
      $("#mensaje").text(farmacia.Nombre + " " +
                          farmacia.Direccion + " " +
                          farmacia.Comuna + 
                          " Fono:" + farmacia.Telefono);

       var lat = farmacia.Latitud;
       var lon = farmacia.Longitud;
       var options = { zoom: 13,
            center: new google.maps.LatLng(lat, lon), 
            mapTypeId: google.maps.MapTypeId.ROADMAP
            }

       var map = new google.maps.Map($("#canvas").get(0), options);
                var marker = new google.maps.Marker({ position: new
                                                google.maps.LatLng(lat, lon) });

                marker.setMap(map); 
     }

     });

    Como puedes apreciar agregamos un manejador para el evento click del botón, el cual utiliza la función $.ajax de jQuery, puedes notar que no ocupo la propiedad data, más bien una variable data que tiene los parámetros como ruta. Luego y dependendiedo del  código del HTTP Response podemos decidir que hacer. El código 200 corresponde a OK, por lo que vamos a la función muestraMapa, que hace uso de la API de Google para geolocalización para mostrar el mapa y el marker en la posición solicitada.
    Como vez, bastante sencillo, espero que este ejemplo te sirva.
    Saludos!
    @chalalo

    Posted: 11/3/2012 20:24 por Gonzalo Perez | con 3 comment(s) |
    Archivado en: ,
    Comparte este post:

    Comentarios

    Chalalo Land ha opinado:

    Hola, vamos a ver la primera parte de la segunda parte (suena raro, o la parte 2.1) del tutorial de MongoDB

    # March 19, 2012 1:13 PM

    MVP Factor ha opinado:

    Nuestro buen amigo Gonzalo Pérez C. nos comparte su tutorial: Tutorial Asp.net Web API con MongoDB –

    # March 21, 2012 4:52 AM

    Chalalo Land ha opinado:

    Hola!, y seguimos con el tutorial de MongoDB + ASP.NET Web API , apoyándonos siempre en jQuery para la

    # April 3, 2012 11:13 PM