Manejo de imágenes con Azure Blob Storage y ASP.NET 7

En este tutorial aprenderemos paso a paso cómo administrar imágenes con Azure Blob Storage y ASP.NET 7. Para esto es super importante entender el concepto de cada uno.

Azure Blob Storage es una solución de almacenamiento en la nube proporcionada por Microsoft, con la que podemos almacenar y administrar grandes cantidades de datos no estructurados, es decir, imágenes, videos, audios y documentos, entre otros. Es una opción ideal para soluciones que necesiten almacenar una gran cantidad de datos, con todos los beneficios que nos proporciona Azure como la disponibilidad, escalabilidad y seguridad.

Por otra parte, ASP.NET es un framework de desarrollo de aplicaciones web, desarrollado por Microsoft. ASP.NET, mismo que nos proporciona componentes como ASP.NET MVC, que nos permite crear aplicaciones web modernas. A la fecha de este artículo, la última versión estable de .NET es .NET 7.

ASP.NET hereda todos los beneficios de .NET 7 como multiplataforma, código abierto, escalabilidad, seguridad, integración y soporte para muchos lenguajes, entre otros.

Con estos conceptos claros, podemos iniciar y crear una aplicación web con ASP.NET 7 y conectarla con Azure Blob Storage para administrar imágenes, entiéndase crear, eliminar y visualizar.

Requisitos

• Cuenta activa de Azure.
• Navegador de nuestra preferencia.
• Visual Studio 2022 (Versión 17.4 o superior) o Visual Studio Code y el SDK de .NET 7.

Dividiremos este tutorial en dos partes: el proceso de la creación de un Azure Blob Storage y el desarrollo y configuración de la aplicación web.

Parte 1. Azure Blob Storage

Paso 1. Ingresar a nuestro portal de Azure

El primer paso es entrar a nuestro portal de Azure. Si no tienes una cuenta, puedes crear una gratuita con un correo institucional o una temporal de dos meses. Cabe recalcar que, en esta segunda opción, debes ingresar una tarjeta de crédito.

Paso 2. Crear una cuenta de almacenamiento

Con la ayuda del buscador o directamente en la opción de Crear recursos, seleccionamos la opción de Cuentas de almacenamiento o Azure Storage. Tenemos dos opciones para crearla: en la parte superior izquierda o en la parte baja central.

Paso 3. Ingresar información y crear el recurso

Hay información básica que debemos insertar en el formulario de creación como:

Suscripción: Es el contrato que tenemos como usuarios con Azure, que nos permite acceder y utilizar los servicios propios de la plataforma.

Grupo de Recursos (GR): Es un contenedor que organiza y administra recursos de Azure, los cuales comparten la misma situación geográfica, permisos y configuraciones del GR. Puedes agregar un GR existente o crearlo en ese momento.

Nombre de la cuenta de almacenamiento: Debemos colocar el nombre deseado para este recurso.

Región: Es la ubicación geográfica donde se aloja nuestro recurso, es decir, la ubicación en la que Microsoft tiene sus centros de datos. Es recomendable elegir la ubicación más cercana a la de los usuarios finales de la aplicación, porque esto afecta a la latencia, el rendimiento y la disponibilidad del recurso.

Rendimiento: Es la capacidad de nuestro recurso. Esto influye en el rendimiento del mismo, por ejemplo, en el tiempo y la eficiencia de respuesta. En este caso, podemos dejar la opción Estándar o ajustarla a las necesidades.

Redundancia: Es la redundancia geográfica. Podemos elegir respaldar la información de nuestro recurso en otra ubicación geográfica, lo que garantiza la disponibilidad del recurso si existe algún fallo en la ubicación principal.

Existen más opciones de configuración en las pestañas de Opciones avanzadas, Redes, Protección de datos, Cifrado y Etiquetas, pero con la información ingresada en la pestaña de Datos básicos ya podemos dirigirnos a la última pestaña de Revisar y crear y si la configuración es correcta, podemos crear nuestro recurso.

Al completar la creación del recurso, visualizamos la siguiente pantalla e ingresamos al recurso con la opción Ir al recurso.

Paso 4. Crear un contenedor de Blob Storage

1. Ya en el recurso, creamos el contenedor que almacenará nuestras imágenes. En el menú izquierdo, en la sección de Almacenamiento de datos seleccionamos la opción Contenedores.
2. En esta ventana elegimos Contenedor. Al hacerlo nos muestra una ventana al lado derecho.
3. Agregamos un nombre al contenedor. Aquí trabajaremos con imágenes de productos. El nombre va a ser products y en Nivel de acceso público elegimos Blob.
4. Finalmente, creamos el contendor al dar clic en Crear.
   

Paso 5. Accesos al contenedor

Ya creado el contenedor, al dar clic derecho aparecen opciones de configuración. Seleccionamos la primera opción, Propiedades del contenedor.

Paso 6. Copiar credenciales

Una vez dentro, nos dirigimos a la opción Claves de acceso y copiamos la cadena de conexión, misma que servirá para configurar el acceso del recurso en nuestra aplicación.

Parte 2. Aplicación Web

Paso 1. Crear la Aplicación Web

En esta segunda parte crearemos una aplicación web con ASP.NET 7. Lo primero que debemos hacer es ingresar a Visual Studio y buscar la opción Asp.Net Core WebApp (MVC).

La parte importante aquí es elegir la versión de .NET 7. Dejamos las demás configuraciones y damos clic en Crear.

Paso 2. Configurar cadenas de conexión

El proyecto se crea con una plantilla determinada por ASP.NET. Uno de los archivos de la plantilla corresponde al archivo appsettings.json, utilizado para colocar configuraciones del proyecto. En nuestro caso, en la opción ConnectionString de la sección Blob colocamos la cadena de conexión que copiamos en el paso 6 de la primera parte.

Asimismo, en el mismo archivo, en la opción DefaultConnection de la sección ConnectionString, colocamos la cadena de conexión con la información para la base de datos. Colocamos el servidor, credencial de usuario, contraseña y el nombre de la base de datos, si fuera el caso.

Paso 3. Crear La entidad Product

Las entidades pueden crearse dependiendo de la arquitectura de tu proyecto. Vamos a trabajar aquí en el mismo proyecto. Entonces, en la plantilla creada tenemos la carpeta Models, donde crearemos todas las entidades necesarias, así como una clase.

En este tutorial trabajaremos con productos, así que nuestra entidad va a ser Products y la generamos con los siguientes atributos:

Paso 4. Configuración de Datos

Para el manejo de datos trabajaremos con Entity Framework Core enfoque Code First (Código Primero), es decir, crearemos y manipularemos la data mediante C#.

Para instalarlo, nos dirigimos a la opción de administrador de paquetes NuGet o Manage NuGet Package e instalamos los paquetes de Entity Framework. Aquí aprovecharemos e instalaremos el paquete para trabajar con Azure Blob Storage.

Los paquetes a instalar son los siguientes:

• Microsoft.EntityFrameworkCore (Paquete principal de Entity Framework).
• Microsoft.EntityFrameworkCore .SqlServer (para trabajar con bases de datos SQL Server).
• Microsoft.EntityFrameworkCore.Tools (para trabajar con comandos de consola).
  

Configuraremos el contexto de datos, así que creamos una nueva carpeta con el nombre de DemoDataContext o puedes llamarla simplemente Data. Dentro de la carpeta creamos la clase DemoDataContext, agregamos la entidad Products y configuramos el constructor del DataContext.

Es momento de agregar configuración adicional para trabajar con la base de datos. En el archivo Program añadiremos la configuración de SQL Server, recuperando la información del archivo appsettings.json correspondiente a la cadena de conexión.

Paso 5. Creación de los servicios

Dentro del mismo proyecto creamos una nueva carpeta a la cual la nombramos como Repository o Services. En su interior crearemos una clase llamada ProductService y una interfaz llamada IProductService.

En la interfaz creamos los métodos para el manejo de archivos.

En la clase ProductService implementamos la interfaz IProductService, es decir, crearemos los métodos colocados en la interfaz.

Por nivel de seguridad y código limpio se debe acceder a los métodos del servicio por medio de su interfaz en este caso por medio de IProductService, para esto en el archivo Program configuramos la inyección de dependencias, agregamos el código enmarcado.

Paso 6. El Controlador

En la carpeta Controllers crearemos la clase ProductController. En el constructor del controlador agregamos la conexión al contexto de datos y al ProductService.

Añadimos los métodos del producto e iniciamos con el método GetProducts para obtener todos los productos. El método Index enviará la información a la vista de la aplicación.

El siguiente método es el de crear. Para este método tenemos dos partes: el método get y el método post. El primero nos ayuda a recuperar la información y el segundo la envía a la base de datos (En este caso también a Azure Blob Storage).

Por último, realizaremos el método de eliminación. Aquí enviaremos solamente el id del producto.

Paso 7. Crear Vistas

En los métodos del controlador damos clic derecho y elegimos Agregar vistas o Add View. Generamos ahora la vista Index.

Elegimos la opción Razor View - Empty, le asignamos un nombre y la creamos.

En el archivo creamos la vista para visualizar la lista de los productos existentes.

Visualizamos el resultado en la sección final.

Por otro lado, de la misma forma en la que creamos la vista de index, generamos la vista del formulario de la creación de un producto, por lo que colocamos el nombre Crear.

Paso 8. Migración de datos

Como mencioné al inicio de esta segunda sección, trabajamos con un enfoque Code First (Código Primero) de Entity Framework, lo que implica dar vida a la base de datos y manipularla mediante C#. A continuación, nos dirigimos a la Consola de Administración de Paquetes o Package Manager Console y ejecutamos el comando add-migration nombreDeLaMigración.

Aquí se crea un archivo con toda la información a migrar o con la información que se insertará en la base de datos.

Terminado el proceso anterior con un mensaje satisfactorio, finalmente ejecutamos el comando update-database.

Verificamos la creación de la base de datos con la tabla Products:

Paso 9. Probar y verificar

Para acceder de forma directa a la vista de productos agregamos el menú en el archivo _Layout ubicado en la subcarpeta Shared dentro de la carpeta Views.

Al ejecutar la aplicación web, nos dirigimos a la página inicial.

Con la configuración del _Layout tenemos ya la pestaña de Productos.

Al dar clic accedemos en primera instancia a la vista Index que enumera los productos existentes. Al momento no contamos con ningún registro, entonces crearemos un producto al dar clic en el botón azul Agregar Nuevo.

Ingresamos la información de un producto. En este ejemplo agregué los datos de un teclado.

Al guardar nos redirige al index o página principal y se mostrará el producto ingresado.

Conclusión

En este artículo hemos visto cómo subir, recuperar y eliminar imágenes utilizando la biblioteca Azure Blob Storage y ASP.NET 7, hemos aprendido cómo trabajar con los contenedores de blobs y cómo interactuar con los de imagen. Asimismo, hemos implementado una función de carga de imágenes en una aplicación web ASP.NET 7 y cómo mostrarlas en la página web.

Espero que esta información haya sido valiosa para ti. ¡Hasta la próxima!