Manipulação de imagens com Azure Blob Storage e ASP.NET 7

Neste tutorial vamos aprender passo a passo como gerenciar imagens com Azure Blob Storage e ASP.NET 7. Para isso, é super importante entender o conceito de cada um.

Azure Blob Storage é uma solução de armazenamento em nuvem fornecida pela Microsoft, com a qual podemos armazenar e gerenciar grandes quantidades de dados não estruturados, ou seja, imagens, vídeos, áudios e documentos, entre outros. É uma opção ideal para soluções que precisam armazenar uma grande quantidade de dados, com todos os benefícios que o Azure nos proporciona, como disponibilidade, escalabilidade e segurança.

Por outro lado, ASP.NET é um framework de desenvolvimento de aplicativos da Web, desenvolvida pela Microsoft. ASP.NET, que nos fornece componentes como ASP.NET MVC, que nos permite criar aplicações web modernas. Na data deste artigo, a versão estável mais recente do .NET é o .NET 7.

O ASP.NET herda todos os benefícios do .NET 7, como plataforma cruzada, código aberto, escalabilidade, segurança, integração e suporte para muitos idiomas, entre outros.

Com esses conceitos claros, podemos iniciar e criar um aplicativo Web com ASP.NET 7 e conectá-lo ao Azure Blob Storage para gerenciar imagens, entender como criar, excluir e exibir.

Requisitos

• Conta ativa do Azure.
• Navegador de nossa preferência.
• Visual Studio 2022 (Versão 17.4 ou superior) o Visual Studio Code e o SDK do .NET 7.

Iremos dividir este tutorial em duas partes: o processo de criação de um Azure Blob Storage e o desenvolvimento e configuração da aplicação web.

Parte 1. Azure Blob Storage

Passo 1. Entrar em nosso portal do Azure

O primeiro passo é entrar no nosso portal Azure. Se você não tem conta, pode criar uma gratuita com e-mail institucional ou temporária por dois meses. De referir que, nesta segunda opção, deverá introduzir um cartão de crédito.

Passo 2. Criar uma conta de armazenamento

Com a ajuda do buscador ou diretamente na opção Criar recursos, selecionamos a opção Contas de armazenamento ou Azure Storage. Temos duas opções para criá-lo: na parte superior esquerda ou na parte central inferior.

Passo 3. Inserir informação e criar o recurso

Existem informações básicas que devemos inserir no formulário de criação, como:

Inscrição: É o contrato que temos como utilizadores com o Azure, que nos permite aceder e utilizar os serviços da plataforma.

Grupo de Recursos (GR): É um container que organiza e gerencia os recursos do Azure, que compartilham a mesma localização geográfica, permissões e configurações do GR. Você pode adicionar um GR existente ou criá-lo agora.

Nome da conta de armazenamento: Devemos colocar o nome desejado para este recurso.

Região: É a localização geográfica onde nosso recurso está hospedado, ou seja, o local onde a Microsoft possui seus datacenters. Recomenda-se escolher o local mais próximo dos usuários finais da aplicação, pois isso afeta a latência, desempenho e disponibilidade do recurso.

Desempenho: É a capacidade do nosso recurso. Isso influencia seu desempenho, por exemplo, tempo de resposta e eficiência. Neste caso, podemos deixar a opção Standard ou ajustá-la às necessidades.

Redundância: É redundância geográfica. Podemos optar por fazer backup de nossas informações de recursos em outro local geográfico, garantindo a disponibilidade do recurso caso haja uma falha no local principal.

Existem mais opções de configuração nas abas Opções Avançadas, Redes, Proteção de Dados, Criptografia e Etiquetas, mas com as informações inseridas na aba Dados Básicos já podemos ir para a última aba Revisar e Criar e se a configuração estiver correta, podemos criar nosso recurso.

Ao concluir a criação do recurso, exibimos a seguinte tela e inserimos o recurso com a opção Ir para recurso.

Passo 4. Criar um container de Blob Storage

1. Já no recurso, criamos o container que irá armazenar nossas imagens. No menu à esquerda, na seção Armazenamento de dados, selecionamos a opção Containers.
2. Nesta janela escolhemos Container. Ao fazê-lo, mostra-nos uma janela do lado direito.
3. Adicionamos um nome ao container. Aqui vamos trabalhar com imagens de produtos. O nome vai ser produtos e no Nível de Acesso Público escolhemos Blob.
4. Por fim, criamos o contêiner clicando em Criar.
   

Passo 5. Acessos ao container

Uma vez criado o container, ao clicar com o botão direito, aparecem as opções de configuração. Selecionamos a primeira opção, Propriedades do container.

Passo 6. Copiar credenciais

Uma vez dentro, vamos até a opção Chaves de acesso e copiamos a string de conexão, que será utilizada para configurar o acesso do recurso em nossa aplicação.

Parte 2. Web App

Passo 1. Criar a Web App

Nesta segunda parte vamos criar uma aplicação web com ASP.NET 7. A primeira coisa que devemos fazer é entrar no Visual Studio e procurar a opção Asp.Net Core WebApp (MVC).

O importante aqui é escolher a versão do .NET 7. Deixamos as demais configurações e clicamos em Criar.

Passo 2. Configurar strings de conexão

O projeto é criado com um modelo determinado pelo ASP.NET. Um dos arquivos de modelo corresponde ao arquivo appsettings.json, usado para colocar as configurações do projeto. No nosso caso, na opção ConnectionString da seção Blob colocamos a string de conexão que copiamos no passo 6 da primeira parte.

Da mesma forma, no mesmo arquivo, na opção DefaultConnection da seção ConnectionString, colocamos a string de conexão com as informações do banco de dados. Colocamos o servidor, credencial do usuário, senha e o nome do banco de dados, se aplicável.

Passo 3. Criar a entidade Product

As entidades podem ser criadas dependendo da arquitetura do seu projeto. Vamos trabalhar aqui no mesmo projeto. Assim, no template criado temos a pasta Models, onde iremos criar todas as entidades necessárias, bem como uma classe.

Neste tutorial vamos trabalhar com produtos, então nossa entidade vai ser Products e a geramos com os seguintes atributos:

Passo 4. Configuração de Dados

Para o gerenciamento de dados trabalharemos com a abordagem Entity Framework Core Code First, ou seja, criaremos e manipularemos os dados usando C#.

Para instalá-lo, vamos ao gerenciador de pacotes NuGet ou à opção Manage NuGet Package e instalamos os pacotes do Entity Framework. Aqui vamos aproveitar e instalar o pacote para trabalhar com o armazenamento Azure Blob.

Os pacotes a instalar são os seguintes:

• Microsoft.EntityFrameworkCore (Pacote principal do Entity Framework).
• Microsoft.EntityFrameworkCore .SqlServer (para trabalhar com os bancos de dados SQL Server).
• Microsoft.EntityFrameworkCore.Tools (para trabalhar com comandos do console).

Estaremos configurando o contexto de dados, então criaremos uma nova pasta chamada DemoDataContext ou você pode apenas chamá-la de Data. Dentro da pasta criamos a classe DemoDataContext, adicionamos a entidade Products e configuramos o construtor DataContext.

É hora de adicionar configurações adicionais para trabalhar com o banco de dados. No arquivo de Program adicionaremos a configuração do SQL Server, recuperando as informações do arquivo appsettings.json correspondente à string de conexão.

Passo 5. Criação dos serviços

Dentro do mesmo projeto criamos uma nova pasta que chamamos de Repository ou Services. Dentro dele criaremos uma classe chamada ProductService e uma interface chamada IProductService.

Na interface criamos os métodos para manipulação de arquivos.

Na classe ProductService implementamos a interface IProductService, ou seja, criaremos os métodos colocados na interface.

Devido ao nível de segurança e código limpo, os métodos do serviço devem ser acessados ​​através de sua interface, neste caso através do IProductService, para isso no arquivo Program configuramos a injeção de dependência, adicionamos o código emoldurado.

Passo 6. O Controlador

Na pasta Controllers criaremos a classe ProductController. No construtor do controlador adicionamos a conexão ao contexto de dados e o ProductService.

Adicionamos os métodos do produto e começamos com o método GetProducts para obter todos os produtos. O método Index enviará as informações para a visualização do aplicativo.

O próximo método é criar. Para este método temos duas partes: o método get e o método post. O primeiro ajuda-nos a recuperar a informação e o segundo envia-a para a base de dados (neste caso também para o Azure Blob Storage).

Agora realizaremos o método de remoção. Aqui enviaremos apenas o id do produto.

Passo 7. Criar Visualizações

Nos métodos do controlador, clicamos com o botão direito e escolhemos Add views ou Add View. Agora geramos a exibição Index.

Escolhemos a opção Razor View - Empty, damos um nome e criamos.

No arquivo criamos a visualização para exibir a lista de produtos existentes.

Visualizamos o resultado na seção final.

Por outro lado, da mesma forma que criamos a visualização do índice, geramos a visualização do formulário de criação do produto, por isso colocamos o nome Criar.

Passo 8. Migração de dados

Como mencionei no início desta segunda seção, trabalhamos com uma abordagem Entity Framework Code First, que envolve dar vida ao banco de dados e manipulá-lo usando C#. Em seguida, vamos ao Console de Gerenciamento de Pacotes ou Package Manager Console e executamos o comando add-migration nomeDaMigração.

Aqui é criado um arquivo com todas as informações a serem migradas ou com as informações que serão inseridas no banco de dados.

Terminado o processo anterior com uma mensagem satisfatória, finalmente executamos o comando update-database.

Verificamos a criação do banco de dados com a tabela Products:

Passo 9. Testar e verificar

Para acessar diretamente a visualização do produto, adicionamos o menu no arquivo _Layout localizado na subpasta Shared dentro da pasta Views.

Ao executar a aplicação web, vamos para a página inicial.

Com a configuração _Layout já temos a aba Products.

Ao clicar, primeiro acessamos a visualização Índice que lista os produtos existentes. No momento não temos nenhum registro, então criaremos um produto clicando no botão azul Adicionar novo.

Entramos com as informações de um produto. Neste exemplo adicionei os dados de um teclado.

Ao salvar, nos redireciona para o index ou página principal e o produto inserido será exibido.

Conclusão

Neste artigo, vimos como carregar, recuperar e excluir imagens usando a biblioteca Azure Blob Storage e ASP.NET 7, aprendemos como trabalhar com contêineres de blob e como interagir com contêineres de imagem. Além disso, implementamos um recurso de carregamento de imagens em um aplicativo da Web ASP.NET 7 e como exibi-las no website.

Espero que esta informação tenha sido valiosa para você. Até a próxima!