Aplicaciones de API de Azure y aplicación web de Azure Mvc en Azure App Service

En este artículo, aprenderá a crear aplicaciones de API de Azure y un cliente MVC implementado en la aplicación We de Azure. Esta va a ser una aplicación muy sencilla que conecta varios componentes de los servicios de aplicaciones de Azure, y para construirla vamos a usar la aplicación API de Azure, la aplicación web de Azure y SQL Server en Azure.

Se puede dibujar una arquitectura de alto nivel de la aplicación como se muestra en la imagen a continuación:

Esencialmente, en este post aprenderemos a realizar las siguientes tareas:

• Make a SQL Connection in SQL database in Azure
• Use el enfoque de base de datos de Entity Framework para aplicar scaffolding a una operación CRUD
• Exponer las operaciones en una aplicación de API de Azure
• Configure the swagger API and UI for metadata and API testing
• Publish the Azure API App in Azure App Service
• Creación de código del lado del cliente mediante la API de metadatos de Swagger en una aplicación ASP.NET MVC
• Use el código de cliente generado en la aplicación MVC para realizar operaciones CRUD en una tabla de una base de datos SQL en Azure
• Publish the ASP.NET MVC application in Azure Web App

Al finalizar esta publicación, debe tener una aplicación de API de Azure y una aplicación web de Azure basada en MVC que se ejecute en vivo en el servicio de Azure. Como resultado del artículo, tenemos la aplicación de API de Azure ejecutándose en http://schoolapiapp.azurewebsites.net/swagger/ui/index. También tenemos una aplicación web de Azure basada en MVC que se ejecuta en esta dirección URL: http://mvcclientazureapiapp.azurewebsites.net/

En este ejemplo, estoy usando Visual Studio 2015, sin embargo, también puede usar Visual Studio 2013. También necesitará una suscripción a Azure, pero puede obtener una evaluación gratuita. ¡Empecemos!

Azure API App

Empecemos por la creación de una aplicación de API de Azure. Para configurar el entorno de desarrollo, instale el SDK de Azure. Puede descargar Azure SDK para Visual Studio 2015 desde aquí y Azure SDK para Visual Studio 2013 desde aquí.  Después de una instalación exitosa, debería obtener el cuadro de diálogo instalado correctamente como se muestra en la imagen a continuación:

Ahora el entorno de desarrollo está listo para crear las primeras aplicaciones de API de Azure. Sigamos adelante y creemos un nuevo proyecto, seleccionando Aplicación web de >ASP.NET de proyecto > nuevo. Asigne un nombre adecuado a la aplicación web ASP.NET y, en el cuadro de diálogo de plantilla, elija Aplicación de API de Azure, como se muestra en la imagen siguiente:

Después de crear correctamente el proyecto, haga lo siguiente:

1. Elimine ValuesController de la carpeta Controller. No necesitamos este controlador.
2. Haga clic derecho en la carpeta Modelos y agregue un nuevo elemento.

Para agregar un nuevo elemento, seleccione ADO.NET Modelo de entidad en la pestaña Datos y asigne un nombre al modelo. Aquí, lo dejo como SchoolModel.

En este paso, en el Asistente para el modelo de datos de entidad, seleccione EF Designer en la opción de base de datos y haga clic en Siguiente como se muestra en la imagen siguiente:

Tomemos un momento aquí y entendamos qué vamos a hacer en el siguiente paso. Aquí nos conectaremos a una base de datos escolar que está dentro de las bases de datos SQL en Azure.

Para conectarse a una base de datos SQL en Azure, debe realizar las siguientes tareas:

• Adición de una dirección IP de cliente a la regla de firewall del servidor de bases de datos en Azure Portal
• Proporcionar un nombre de servidor de base de datos en Azure
• Proporcionar un nombre de usuario y una contraseña mediante la autenticación de SQL Server
• Seleccione la base de datos requerida y haga clic en Aceptar

Es posible que desee consultar las imágenes siguientes para proporcionar información sobre cómo conectarse a una base de datos en Azure:

Dado que hemos proporcionado información vital como el nombre de usuario y la contraseña para conectarnos al servidor de base de datos de Azure, el Entity DataModel Wiazrd nos pregunta si queremos incluir datos confidenciales en la cadena de conexión o no. Aquí seleccionaremos el botón de opción Sí y haremos clic en Siguiente. Además, si lo desea, es posible que desee cambiar el nombre de la cadena de conexión, pero en este ejemplo lo dejo como predeterminado.

Ahora tenemos que seleccionar las entidades con las que vamos a trabajar. Para mantenerlo simple, estoy seleccionando la tabla más simple en la base de datos de la escuela (y por "simple", me refiero a la tabla que no tiene relación con ninguna otra tabla). Así que voy a seleccionar la tabla de departamentos para continuar en este ejemplo. Como se muestra en la imagen a continuación, para seleccionar la tabla Departamento, marque la casilla de verificación de Departamento y deje los demás campos como predeterminados.

A continuación, para crear el modelo de datos, haz clic en Finalizar y ya hemos añadido el modelo. Con este modelo, crearemos la API de Azure. Puede comprobar el SchoolModel creado en el Explorador de soluciones, como se muestra en la imagen siguiente:

A partir de ahora hemos añadido el modelo. Asegúrese de haber construido correctamente el proyecto en esta etapa y, a continuación, vamos a crear un controlador. Haga clic con el botón derecho en la carpeta Controllers y, desde contextmeny, seleccione Add->Controller.  En la opción de scaffolding, seleccione Controlador de API web 2 con acciones, mediante Entity Framework, como se muestra en la imagen siguiente:

Para agregar el controlador mediante el andamiaje, debe seleccionar las siguientes opciones:

1. Clase de modelo: elija Departamento en el menú desplegable
2. Clase de contexto de datos: elija SchoolEntities en el menú desplegable
3. Proporcione el nombre de controlador deseado o deje el nombre sugerido que se basa en la clase de modelo.

Al hacer clic en Agregar, DepartmentsController se agregaría al proyecto. Básicamente, hemos creado una API web para realizar operaciones CRUD en la tabla Departamento. En el siguiente paso, tenemos que habilitar los metadatos y la interfaz de usuario de Swagger.

Habilitación de los metadatos y la interfaz de usuario de Swagger

Azure App Service admite metadatos de Swagger 2.0. Con esto, cada API puede definir una URL de punto final que devuelve metadatos para la API en formato JSON de Swagger. Los metadatos devueltos se pueden usar para generar código de cliente.

Puede navegar por los metadatos de la API creada anexando apiUrl/swagger/docs/v1. Así que sigamos adelante y ejecutemos el proyecto, y debería recibir un mensaje de "prohibido" como se muestra en la imagen a continuación:

 

Para navegar a los metadatos de la API, anexe / swagger/docs/v1 a la baseurl como se muestra aquí

Aquí verá los metadatos de la API de Azure en formato JSON. Se trata de los metadatos JSON de Swagger 2.0 para la API. Esto se puede utilizar para crear el código de cliente.

Para habilitar la interfaz de usuario de Swagger, vuelva al proyecto y, desde la carpeta App_Start, abra SwaggerConfig.cs archivo.  En el archivo, busque las siguientes líneas de código y quítelas de comentario:

Una vez más, siga adelante y ejecute la aplicación de API de Azure presionando F5. Agregue la URL con /swagger y verá que la interfaz de usuario de Swagger se ha habilitado en la API.

Usando la interfaz de usuario de Swagger, podemos probar la API creada. Por ejemplo, sigamos adelante e intentemos crear un nuevo Departamento. Haga clic en la opción POST, cree los datos del departamento que se insertarán en JSON fromat y haga clic en Pruébelo.

Verá el cuerpo de la respuesta y el código de respuesta devueltos por la API. Una vez creado correctamente el recurso, debe devolver el código de estado 201.

Es posible que haya notado a partir de ahora que es muy sencillo crear aplicaciones de API de Azure, habilitar los datos y la interfaz de usuario de Swagger y probarlos localmente. Ahora sigamos adelante y publicémoslos en Azure.

Deploy API  to Azure

Hasta ahora todo lo que hemos hecho es local. Ahora queremos mover nuestra aplicación de API de Azure local a Azure mediante las herramientas de Azure integradas con Visual Studio 2015. Para empezar, haga clic con el botón derecho del ratón en el proyecto y seleccione Publicar.

En el cuadro de diálogo Publicar Web, seleccione Microsoft Azure App Service y haga clic en Siguiente.

En la siguiente viuda, seleccione suscripción y haga clic en Nuevo.

En la ventana "Crear servicio de aplicaciones", primero cambie el tipo a la aplicación de API, como se muestra en la imagen a continuación:

A continuación, proporcione la siguiente información:

1. Unique API name
2. Elige la suscripción
3. Si ya ha creado el plan de App Service, puede elegirlo. Para crear uno nuevo, haga clic en Nuevo.

En este ejemplo, estoy creando un nuevo plan de App Service, como se muestra en la imagen siguiente. Usaremos este plan recién creado para publicar la aplicación.

Después de proporcionar toda la información, sus opciones de alojamiento deberían verse a continuación:

A partir de ahora, hemos proporcionado toda la información necesaria para publicar la solicitud. Haga clic en Crear para continuar con la implementación. En la siguiente pantalla, confirme todos los detalles y haga clic en Siguiente para continuar.

En esta pantalla, puede verificar las cadenas de conexión y actualizar la base de datos. Para mantener las cosas simples, deje todas las configuraciones predeterminadas y haga clic en Siguiente.

En esta pantalla, obtenga una vista previa de las implementaciones y haga clic en publicar para implementar la aplicación de API de Azure en el servicio de Azure.

Puede ver el estado de publicación en la ventana de salida de Visual Studio. En una publicación correcta, se le dirigirá a la aplicación de API de Azure hospedada en el servicio de Azure. Debe hacer que la aplicación API de Azure se ejecute en el servicio de Azure, como se muestra en la imagen siguiente.

¡Ha implementado con éxito la aplicación de API de Azure en el servicio de Azure!

Configuring metadata URL in portal 

Para configurar la URL de los metadatos, inicie sesión en el portal y en la sección Servicios de aplicaciones encontrará su aplicación API recién creada.

Haga clic en la aplicación API y seleccione Definición de API.

En la definición de la API, puede cambiar la URL de metadatos. Como se ha comentado anteriormente, de forma predeterminada, la URL de metadatos se establece en.. /swagger/docs/v1.

Podemos cambiar la URL de los metadatos a otra cosa, como se muestra en la imagen a continuación. Después de cambiar la URL, no olvide guardar la nueva URL haciendo clic en el botón Guardar en la parte superior. Para mantenerlo simple, he dejado la URL de metadatos como defualt aquí. Por lo tanto, cuando navegas a .. /swagger/docs/v1, obtendrá los metadatos de swagger que se requieren para crear el código del lado del cliente. Los metadatos se pueden ver en el navegador como se muestra en la imagen a continuación:

Puede realizar una operación GET y ver todos los departamentos en el navegador navegando a la URL. /api/departamentos. Los departamentos se devolverán como JSON en el navegador, como se muestra en la imagen a continuación:

También puede probar las otras operaciones mediante la interfaz de usuario de swagger, como se analizó en la sección anterior de este artículo.

Genial, hasta ahora hemos creado Azure API que funciona con la base de datos SQL en Azure. También lo hemos implementado con éxito en Azure App Service.

Creating MVC Client

En esta sección del artículo, crearemos un cliente .NET. Sigamos adelante y creemos un proyecto ASP.NET MVC.

En la plantilla, seleccione MVC y elija Sin autenticación en la opción Cambiar autenticación.

Después de crear correctamente el proyecto, haga clic con el botón derecho en el proyecto y, en el menú contextual, seleccione Add->REST API Client.

Al seleccionar la opción Cliente de API REST, obtendrá opciones para Descargar API de Microsoft Azure o seleccionar el archivo de metadatos de Swagger existente. Opcionalmente, también puede cambiar el nombre del espacio de nombres del cliente aquí.

Seleccionemos la opción Descargar desde la aplicación API de Microsoft Azure y haga clic en el botón Examinar.  Para seleccionar el servicio de aplicaciones, elija suscripción y seleccione la aplicación de API de Azure como se muestra en la imagen siguiente y haga clic en el botón Aceptar.

Después de hacer clic en el botón Aceptar, los metadatos se descargarán en la aplicación cliente. Al descargar correctamente los metadatos, encontrará que se ha generado el código del lado del cliente. Puede verlos en el explorador de soluciones como se muestra en la imagen a continuación:

Ahora hemos creado el código del lado cliente desde la aplicación de API de Azure. Sigamos adelante y agreguemos un contoller: haga clic derecho en la carpeta Controladores y, en el menú contextual, seleccione Agregar->Controlador.  En la plantilla, elija MVC 5 Controller con acciones de lectura y escritura.

Con el código genearted, es muy fácil realizar operaciones en Azure API.  En la acción Índice del controlador generado, puede capturar todos los departamentos mediante la instancia de SchoolApiApp. Para obtener todos los departamentos, consulte la lista a continuación:

private SchoolApiApp app = new SchoolApiApp();
public ActionResult Index() {
  return View(app.Departments.GetDepartments());
}

Como puede haber deducido del código enumerado anteriormente, solo se necesitan unas pocas líneas de código para trabajar con la API REST. Tenga en cuenta que el código del lado cliente de .NET se ha generado mediante los metadatos de Swagger de la aplicación API de Azure.

Para agregar vista, haga clic con el botón derecho en la acción Índice y seleccione agregar vista. En la plantilla Agregar vista, seleccione Lista y elija Departamento como clase de modelo.

Crear un registro también es muy sencillo. Para hacerlo, todo lo que necesita hacer es llamar a un método Post pasando el objeto enity como se muestra en la lista a continuación.

public ActionResult Create([Bind(Include = "Administrator,Budget,Name,StartDate")] Department department) {
  try {
    // TODO: Add insert logic here
    if (ModelState.IsValid) {
      department.DepartmentID = 4569;
      app.Departments.PostDepartmentByDepartment(department);
    }
    return RedirectToAction("Index");
  } catch (Exception ex) {
    return View();
  }
}

El código generado tendrá todas las operaciones como List, Post, Put y Delete. Puede usarlos tan fácilmente como acabamos de usar las operaciones List y Post en los ejemplos anteriores.

En el último paso, vamos a seguir adelante y publicar el cliente MVC en Azure Web App. La publicación sería la misma que publicamos la aplicación API. Por brevedad, evito las capturas de pantalla y solo menciono los pasos.

Publish MVC Client to Azure Web App

1. Haga clic derecho en el proyecto y haga clic en publicar
2. Seleccione Publicar destino como Servicio de aplicaciones de Microsoft Azure
3. Elija suscripción y haga clic en Nuevo
4. Asigne un nombre a la aplicación web, seleccione la región y haga clic en Crear
5. En el último paso, haz clic en Publicar

En una publicación correcta, recibirá un mensaje de "publicación correcta" junto con la dirección URL en la ventana de salida de Visual Studio.

¡Bien! Acabamos de publicar una aplicación ASP.NET MVC en Azure Web App, que consume una aplicación de API de Azure.

Conclusión

En este artículo, aprendimos a realizar las siguientes tareas:

• Realizar una conexión SQL a una base de datos SQL en Azure
• Usar el primer enfoque de la base de datos de Entity Framework para aplicar scaffolding a la operación CRUD
• Exposición de las operaciones en la aplicación de API de Azure
• Configure the swagger API and UI for metadata and API testing
• Publish Azure API App in Azure App Service
• Creación de código del lado del cliente mediante la API de metadatos de Swagger en una aplicación ASP.NET MVC
• Uso del código de cliente generado en la aplicación MVC para realizar operaciones CRUD en la tabla de la base de datos SQL en Azure
• Publish ASP.NET MVC application in Azure Web App