Publicando un WebApi ASP .NET Core con Entity Framework Core en IIS y aplicación cliente de Xamarin

por Luis Beltran · 23 octubre, 2018

Número de visitas: 18,938

¡Hola! Esta es la continuación del post Creando un WebApi con ASP .NET Core, Entity Framework Core, AutoMapper y publicación en IIS de hace dos semanas. En dicha sesión desarrollamos un pequeño backend para una pequeña tienda y llegamos a publicarlo en IIS para pruebas locales; en esta segunda parte vamos a publicar el proyecto nuevamente en IIS pero ahora estará disponible también para ser consultado desde otros dispositivos y aplicaciones (por ejemplo, una app móvil). De hecho, también desarrollaremos una pequeña aplicación de Xamarin que muestra los clientes registrados en nuestro sistema.

Nota #1. El código fuente de la aplicación móvil está disponible en GitHub en este repositorio.

Nota #2: Esta publicación es la guía paso a paso de la sesión en vivo que tuvimos en mi canal de YouTube el pasado sábado 20 de Octubre. La sesión fue grabada y puedes revisarla aquí.

¿Listos? ¡Pues comenzamos!

Products from Amazon.com.mx

‹ ›

Publicación del web api en IIS visible en la red local

Paso 1. Primero que nada debemos asegurarnos de que tenemos instalado IIS y no la versión exprés (el caso más común). Para ello, abre Panel de Control y selecciona Programas.

Paso 2. Selecciona la opción Activar o desactivar las características de Windows.

Paso 3. Marca las siguientes opciones dentro de Internet Information Services (también las sub-opciones que aparecen palomeadas):

Paso 4. Da clic en Aceptar y espera a que el proceso finalice correctamente.

En la sesión anterior hablamos del Runtime & Hosting Bundle (paso 32, usamos la versión 2.0.9 que puedes descargar desde este enlace). Cuando lo descargamos se menciona un punto muy importante: Si IIS está instalado en el equipo, el Bundle también agregará el Módulo ASP .NET Core para IIS. Dado que recién agregamos IIS, nuestra instalación del Bundle está incompleta.

Paso 5. Ejecuta el instalador del Runtime & Hosting Bundle nuevamente y selecciona la opción Reparar.

Paso 6. Una vez finalizada la reparación, lo más probable es que tengas que reiniciar el equipo.

Paso 7. Una vez de vuelta, busca y ejecuta el Administrador de Internet Information Services (IIS).

Paso 8. Ahora da clic derecho en Sitios y selecciona Agregar sitio web.

Paso 9. Coloca la siguiente información:

Nombre del sitio: Store
Ruta de acceso física: La ubicación donde publicaste el WebApi de la sesión anterior.
Puerto: Uno diferente al 5000, por ejemplo el 5001.
Nombre de host: Comodín, es decir, *.

Paso 10. Ahora selecciona Grupos de aplicaciones, elige el grupo Store (se creó al momento de generar el sitio web) y da clic en Configuración básica.

Paso 11. En Versión de .NET CLR selecciona Sin código administrado y da clic en Aceptar.

Paso 12. Vuelve a seleccionar el grupo de aplicación Store y ahora elige Configuración avanzada.

Paso 13. En la categoría Modelo de proceso, da clic en el botón que aparece en la propiedad Identidad.

Paso 14. Selecciona la cuenta integrada LocalSystem de la lista y acepta este cambio.

Paso 15. Abre Postman y utilizando la dirección IP de tu equipo realiza una petición a alguno de los controladores disponibles en tu web service. La petición debería ser exitosa. Por ejemplo, consultemos la lista de clientes realizando una petición de tipo GET a la URL http://mi-direccion-ip:puerto/api/customers; como puedes ver en la imagen, en este caso estoy usando:

La dirección IP asignada en el adaptador de red inalámbrico (debido a que el dispositivo con el que probaré la aplicación cliente -un teléfono- está conectado a la misma red inalámbrica.
El puerto 5001 asignado en el paso 9.

Es importante recordar que en nuestro equipo puede haber varias direcciones IP según el número de adaptadores que tengamos; por ejemplo, en mi caso la conexión Ethernet y la red inalámbrica están en diferentes redes. Como mencioné, estoy usando la de la red WiFi porque el teléfono con el que probaré la aplicación también se conecta de manera inalámbrica (y por tanto podrá ver al servidor).

Paso 16. Dependiendo la seguridad que tengamos, es altamente probable que debamos agregar una regla de seguridad en nuestro firewall para permitir la comunicación con otros dispositivos. Entonces en primer lugar hay que ejecutar el firewall, por ejemplo el de Windows (si tienes antivirus, usa el firewall de tu antivirus).

Paso 17. Selecciona Configuración avanzada.

Paso 18. Selecciona Nueva regla en la sección de Reglas de entrada.

Paso 19. Elige el tipo de regla Puerto.

Paso 20. Especifica el puerto 5001 (o el que hayas asignado en el paso 9)

Paso 21. Dado que queremos aceptar las peticiones por este puerto, selecciona la opción Permitir la conexión.

Paso 22. Permite los 3 casos (dominio, privado y público)

Paso 23. Asigna un nombre a esta regla y finaliza el proceso para crear la regla de entrada.

Paso 24. Ahora realiza una petición de tipo GET desde otro dispositivo en la misma red hacia el servidor; a continuación puedes ver que utilicé un teléfono para obtener la lista de clientes con la URL http://direccion-ip-servidor:5001/api/customers y funcionó correctamente.

Así concluimos con la publicación del servicio web. Ahora es turno de desarrollar una pequeña aplicación móvil que utilice el servicio para mostrar datos y modificar la información de algunas tablas. En esta sección crearemos algo muy básico, la aplicación de los Empleados que podrá manipular la tabla de Clientes.

Cabe mencionar que en una sesión futura desarrollaremos otra aplicación (la de los Clientes), por tanto lo ideal es compartir los elementos comunes, como los modelos y los servicios. Por eso, antes de crear la aplicación móvil agregaremos dos proyectos (capas) a la solución

Proyectos móviles

Paso 1. Abre Visual Studio 2017 y selecciona Soluciones de Visual Studio dentro de la categoría Otros tipos de proyectos. Elige Solución en blanco y asigna el nombre MobileStore.

Paso 2. Da clic derecho en la solución vacía y elige la opción Agregar –> Nuevo proyecto…

Paso 3. Selecciona Biblioteca de clases (.NET Standard) dentro de Visual C# –> .NET Standard y asígnale el nombre MyStore.Services al proyecto.

Paso 4. Repite el paso 2 para agregar otro proyecto del mismo tipo que el anterior. Este segundo proyecto se llama MyStore.Models.

Paso 5. Elimina Class1.cs en ambos proyectos.

Paso 6. Da clic derecho sobre el proyecto MyStore.Models y selecciona Agregar –> Elemento existente…

Paso 7. Selecciona todas las clases DTO del proyecto StoreWebApi (excepto AutoMapperConfiguration, que no es un DTO)

Paso 8. Modifica el espacio de nombres de cada clase agregada. En vez de StoreWebApi.DTOs es MyStore.Models. Además, tanto en los modelos EmployeeDTO como CustomerDTO agrega una propiedad de solo lectura FullName que retorne el apellido y el nombre de la persona. Por ejemplo, a continuación se muestra el código de la clase EmployeeDTO.cs:

Recuerda, este paso hay que hacerlo por cada una de las 6 clases DTO del proyecto.

Paso 9. Ahora da clic derecho sobre Dependencias dentro del proyecto MyStore.Services.

Paso 10. Selecciona el proyecto MyStore.Models de la sección Proyectos. Esto permitirá utilizar las clases de la capa de Modelos en la capa de Servicios.

Paso 11. Vuelve a dar clic derecho sobre Dependencias del proyecto MyStore.Services pero ahora selecciona Administrar paquetes Nuget.

Paso 12. Busca el paquete Newtonsoft.Json en la sección Examinar e instálalo en el proyecto.

Paso 13. A continuación agrega una nueva clase al proyecto MyStore.Services. Su nombre es Constants y solo tiene una propiedad de momento, que es la URL que será utilizada como base para acceder al web api.

Paso 14. Otra clase que se creará en el proyecto MyStore.Services es MD5Security.cs, la cual convierte una cadena de texto en su equivalente MD5. Será utilizada para insertar el password en la base de datos. Su código es:

Paso 15. La última clase de este proyecto es la que se comunica con el web api y es una clase con métodos genéricos llamada StoreWebApiClient.cs. Por supuesto, es la clase más importante de la capa de servicios y además implementa el patrón Singleton con una instancia de clase (que a su vez hereda de HttpClient). Esto se hace porque al realizar una conexión a un servidor es mejor preservarla para su futura reutilización. Si durante el ciclo de vida de una aplicación abrimos y cerramos conexiones, en algún momento se agotará el número de conexiones disponibles con el servidor, por lo cual se recomienda una sola instancia.

Además en esta clase se definen métodos CRUD genéricos para llamar a los controladores del web api. Estos métodos genéricos nos sirven para todos los modelos, por lo que no es necesario definir métodos específicos (es decir, uno para el cliente, otro para el empleado, etc.) puesto que ambos se consultan de la misma forma (GET). Sí habrá algunos métodos particulares como el de Login. que se incluye. El código es el siguiente:

Paso 16. Nuevamente da clic derecho a la solución para agregar un proyecto. Sin embargo, en esta ocasión el proyecto será de la categoría Cross-Platform (dentro de Visual C#) –> Mobile App (Xamarin.Forms). El nombre del proyecto es MyStore.EmployeesApp.

Paso 17. Selecciona el template de Aplicación vacía y la estrategia de código compartido .NET Standard.

Paso 18. Da clic derecho sobre el proyecto MyStore.EmployeesApp y selecciona Agregar –> Referencia.

Paso 19. Selecciona los proyectos MyStore.Models y MyStore.Services de la solución

Paso 20. Nuevamente da clic derecho sobre MyStore.EmployeesApp y agrega una nueva carpeta llamada Pages. Ahora sobre esta carpeta da botón derecho y selecciona Agregar –> Nuevo elemento. Agregarás un Content Page (dentro de la categoría Xamarin.Forms) llamado LoginPage.

Paso 21. Esta página tendrá un pequeño formulario para que el usuario ingrese sus credenciales y, solo si son correctas, se le brinde el acceso. El código de la interfaz (XAML) es el siguiente:

Y el code-behind es:

Paso 22. Ahora agrega un nuevo Content Page (sobre la carpeta Pages) llamado CustomerListPage que mostrará la lista de clientes registrados (y un botón para agregar un nuevo cliente). Además, si se selecciona un cliente se navegará a otra página para conocer su detalle. El código XAML es el siguiente:

Y el code-behind es.

Paso 23. Nuevamente agregamos un Content Page dentro de la carpeta Pages llamado CustomerPage que mostrará el detalle del cliente seleccionado en la pantalla previa para editar sus datos o permitirá agregar un nuevo cliente (si se seleccionó esta opción en la página anterior). Se tienen 3 botones: Register (para guardar cambios), ViewOrders (para mostrar las órdenes del cliente -aunque de momento solo se navegará a la página-) y Delete (para eliminar el cliente, previa confirmación). El código XAML es el siguiente:

Y el code-behind es.

Paso 24. Ya casi para terminar, agrega un nuevo Content Page (sobre la carpeta Pages) llamado CustomerOrderListPage que de momento tendrá el código XAML por default. Solo se hará un pequeño cambio en el constructor en el código de C# respectivo, el cual se muestra a continuación:

Paso 25. Modifica el archivo App.xaml.cs de la siguiente manera:

Paso 26. Finalmente, da clic derecho sobre el proyecto que deseas probar, por ejemplo en este caso, el de Android y selecciona la opción Establecer como proyecto de inicio.

Paso 27. Compila y ejecuta la aplicación. Realiza varias pruebas para verificar el correcto funcionamiento de la misma.

Inicio de sesión:

Lista de Clientes:

Agregar un cliente:

Editar datos del cliente:

Eliminar un cliente:

¡Y eso es todo de momento! ¿Qué tal te pareció esta práctica? Si tienes alguna duda con la implementación de este proyecto, déjame un comentario para ayudarte 🙂

En una futura entrega mejoraremos la aplicación, agregaremos MFA -Autenticación Multifactor con código SMS-. desarrollaremos la segunda aplicación del cliente, meteremos notificaciones y más.

Recuerda que también puedes apoyarte de la sesión en vivo que realizamos en YouTube: