Creando y entendiendo nuestro primer Web API


Cover Entry

Continuando con esta serie de tutoriales para aprender a usar Web API, comenzaremos con lo más básico e ir gradualmente aumentando la complejidad hasta llevar al objetivo inicial.

En este tutorial crearemos nuestro primer proyecto de ASP .NET Web API y ASP .NET MVC, donde consumiremos el API desde JQuery que ya viene por defecto en la plantilla de Bootstrap, recordemos que se está usando Visual Studio 2013 en su último update.

Creación del proyecto nuevo

  1. Abrir Visual Studio 2013, en mi caso es la versión Ultimate, pero puede ser la versión Express que es gratis para desarrolladores y la versión Professional para estudiantes. Elegir “Proyecto nuevo” y en la sección “Web” aparece un único tipo. Se debe seleccionar el nombre del proyecto, la ubicación y preferiblemente que sea en C# ya que todo este tutorial está hecho en Visual C#.
  2. Cuando se presione el botón “Ok”, seleccionar la plantilla MVC y chulear la opción “Web API”, dado que la infraestructura de MVC se necesita más adelante.
  3. Esperamos un buen rato, dependiendo de la velocidad del computador de desarrollo y en dado caso particular, velocidad de descarga de Internet.
  4. Cuando se haya terminado de cargar el proyecto se verá una vista parecida a la siguiente.
  5. Ahora en el explorador de soluciones que por lo general está ubicado en el panel derecho aparecen 3 carpetas llamadas Controllers, Models y Views, que como su nombre lo dicen respetan el patrón de arquitectura MVC (Modelo, vista, controlador).
  6. Ahora en el modelo se debe crear una clase que usaremos durante todo el tutorial, entonces sería click derecho a la carpeta Model>Add>Class.
  7. Debió haber salido una ventana emergente , donde ya viene seleccionado el tipo de archivo que es “Class” y le asignamos el nombre de “PersonaModel.cs”.
  8. En esta clase usaremos las propiedades que se habían definido en la primera entrada de estos tutoriales. Tip: Para agregar una propiedad fácilmente y rápido basta con digitar “prop” sin comillas, presionar la tecla tab y seguido tab.
  9. Luego de haber ingresado las propiedades correctamente procederemos a crear el controlador del API, para ello daremos click derecho a la carpeta Controllers>Add>Web API Controller Class (V2)
  10. Cuando salga la ventana modal digitaremos “PersonaController”.
  11. Después de un tiempo nos creará la plantilla básica con los verbos que usa HTTP, Get, Post, Put, Delete; en donde podemos comenzar a trabajar sin problemas.
  12. Si quisieramos probar nuestra API no podríamos verlo en el explorador así a primerazo, tenemos que usar un sniffer como lo es Fiddler pero al ser tan completo se torna un poco complejo, para este caso, solo queremos hacer funciones muy básicas por lo cual deberemos descargar la herramienta llamada POSTMAN, que se encuentra en la dirección http://getpostman.com
  13. Cuando se termine la descarga y se instale correctamente Postman, este aparecera incluido en Chrome.
  14. Si se ejecuta aparecerá una ventana nueva y aparte del explorador muy parecida a la siguiente.
  15. Ahora nos queda probar si nuestro API funciona con los valores predeterminados, lo ejecutamos presionando en Visual Studio la tecla F5 o en el botón de “Run” que se caracteriza por tener un icono de play music.
  16. Para acceder al API solo basta con copiar la url, agregarle /api y el nombre del controlador, lo pegamos en Postman y damos click en el botón “Send”. Si todo sale bien, debemos tener 2 resultados en el panel de salida. La sintaxis cumple la regla api/{controller}/{id} donde controller es obligatorio.

Agregando funcionalidad al API

  1. En el controlador que acabamos de crear llamado “PersonaController.cs” tenemos los métodos necesarios que usa HTTP para su comunicación. Lo primero que haremos antes de tocar la base de datos es crear un contexto local muy muy local que son datos quemados. Para ellos haremos un arreglo de objetos tipo persona, con sus respectivos datos.
  2. En el Método Get retorna toda la lista de personas.
  3. En el siguiente método que es el mismo Get pero recibe un parametro que es el Id, hacemos la búqueda mediante LINQ y retornamos el objeto.

Agrego el código para insertarlo y una imagen de como debería quedar.

Persona[] personas = new Persona[]
        {
            new Persona(){Id=0,Nombres="Camilo Alexander",Apellidos="Rodríguez Cuarán", FechaPago= new DateTime(2013,05,05), Salario=2500000, ValorComisiones=0, ValorPension=100000, ValorSalud=50000, PagoNeto=2350000},
            new Persona(){Id=1,Nombres="Jazmín",Apellidos="Hernandez", FechaPago= new DateTime(2013,05,05), Salario=2500000, ValorComisiones=0, ValorPension=100000, ValorSalud=50000, PagoNeto=2350000},
            new Persona(){Id=2,Nombres="Rosalba",Apellidos="Cuarán Fonseca", FechaPago= new DateTime(2013,05,05), Salario=2500000, ValorComisiones=0, ValorPension=100000, ValorSalud=50000, PagoNeto=2350000},
            new Persona(){Id=3,Nombres="Rosy Tatiana",Apellidos="Pachón Cuarán", FechaPago= new DateTime(2013,05,05), Salario=2500000, ValorComisiones=0, ValorPension=100000, ValorSalud=50000, PagoNeto=2350000},
            new Persona(){Id=4,Nombres="Yohis",Apellidos="Ramirez", FechaPago= new DateTime(2013,05,05), Salario=2500000, ValorComisiones=0, ValorPension=100000, ValorSalud=50000, PagoNeto=2350000},
            new Persona(){Id=5,Nombres="Hugo Enrique",Apellidos="Marín", FechaPago= new DateTime(2013,05,05), Salario=2500000, ValorComisiones=0, ValorPension=100000, ValorSalud=50000, PagoNeto=2350000}
        };

        // GET api/<controller>
        public IEnumerable<Persona> Get()
        {
            return personas;
        }

        // GET api/<controller>/5
        public IHttpActionResult Get(int id)
        {
            var persona = personas.FirstOrDefault((p) => p.Id == id);
            if (persona == null)
            {
                return NotFound();
            }
            return Ok(persona);
        }

Ahora comprobamos si todo salió bien.

Agregando la vista al controlador

  1. Si nuestra meta no es solo hacer API’s si no de una u otra manera usarla desde ASP .NET MVC debemos organizar el controlador hecho anteriormente en una carpeta, yo la llamé “API” y arrastré el controlador.
  2. Haciendo click derecho en la carpeta Controllers y siguiendo los pasos Controllers>Add>New Scaffolded Item…
  3. Ahora debe salir la siguiente ventana emergente donde elegiremos el primer item que dice “MVC 5 Controller – Empty”.
  4. Luego debemos asignarle un nombre, por mi comodidad llamé este controlador igual que el anterior, ya que son pares las tareas que hacen.
  5. Pero entonces cuando se abre dicho controlador nos encontramos que ya existe el mismo en el namespace.
  6. Por lo que al controlador del API le cambiamos el namespace agregando un “.API” al final del nombre.
  7. Con esto ya podemos verificar que el problema ha sido resuelto.
  8. Lo que haremos a continuación es buscar el archivo _Layout.cshtml para agregar un item al menú de navegación y poder llegar más fácil a la nueva vista que crearemos. Está ubicado en “/Views/Shared/_Layout.cshtml”.
  9. En este archivo (el cual supondré que ya se tienen conocimientos básicos de ASP .NET MVC) solamente agregaremos un ActionLink que navegue a la vista.
  10. Luego de haber dado la navegación solo resta crear la vista, eso solo es dando click derecho al nombre del método “Index” y “Add View…”.
  11. Con esto nos genera una ventana emergente en donde debemos asignar un nombre (Preferible el que trae por defecto), Template (Empty) y Model Class (Persona), para este caso.
  12. Después de unos segundos genera la vista linkeada al controlador y al método.
  13. Listo, ya podemos verificar que quedó creada la vista perfectamente y que el link funciona.

Consumiendo el servicio de Web API desde el frontend

  1. Abrimos el archivo llamado Index.cshtml que está ubicado en /Views/Persona/
  2. Dado que en el _Layout está definida una sección para scripts que no es obligatoria la declaramos en este index para poder usar JS en la vista creada.
  3. Se crea una variable que contiene el uri del API, como es local solo basta con poner el sufijos.
  4. Lo que quisiera hacer es que cuando cargue la página me muestre una lista de las personas que tenemos en el contexto. Entonces cuando esté lista la página obtenemos un JSON desde la uri y la listamos en una lista.
  5. Se crea otra función que le da formato al nombre y al apellido para mostrarlo de una manera más agradable.
  6. Finalmente implementamos un buscador muy sencillo donde usamos el id para traer el objeto deseado.

Adjunto el código y como debería quedar en la vista. Nota: Esto se hizo a través de JQuery.

@section scripts{
    <script>
        var uri = 'api/persona';

        $(document).ready(function () {
            // Se envia la peticion Ajax
            $.getJSON(uri)
                .done(function (data) {
                    $.each(data, function (key, item) {
                        $('<li>', { text: formatItem(item) }).appendTo($('#personas'));
                    });
                });
        });

        function formatItem(item) {
            return item.Nombres + ' ' + item.Apellidos;
        }

        function find() {
            var id = $('#persoId').val();
            $.getJSON(uri + '/' + id)
                .done(function (data) {
                    $('#persona').text(formatItem(data));
                })
                .fail(function (jqXHR, textStatus, err) {
                    $('#persona').text('Error, no se encuentra la persona');
                })
        }
    </script>
}

Y así quedaría así visualmente y el buscador funcionando.

Finalmente aprovechando lo beneficios de tener Bootstrap gracias a que Microsoft lo implementó en ASP .NET MVC 5 podemos usar toda documentación para que se pueda darle estilo de una manera fácil, rápida y sin dolores de cabeza. Así lo hice yo.

6 comentarios en “Creando y entendiendo nuestro primer Web API

  1. Estimado, exelente explicacion. Queria consultarte si tenes algun ejemplo donde se pueda consumir la api sin usar JS, entiendo que vas a usar HttpClient. La idea es reutilizar toda la logica generar en la web api tanto en una aplicacion web (asp mvc) como una app mobile (android). Y la idea es que todo este hosteado en un solo dominio (asp.mvc + web api). Desde ya muchisimas gracias. Atte. Slds.

  2. como seria si el web Api consume un feed y una aplicación en Windows pone 8 utiliza esta web api? tienes algún ejemplo ? que cambiaria en relación a este post ?

    1. En el mejor de los casos se usa en sentido contrario, Web API para crear un feed. Sin embargo podrías usar las bondades que ofrece C#, creas un HttpClient para consumir otro servicio web (feed), deserializarlo y usarlo a tu acomodo.

Los comentarios están cerrados.