Por que eu devo ler este artigo:Este artigo é útil por apresentar os conceitos e práticas mais importantes acerca do framework de componentes do Shield UI. Nascido para facilitar o desenvolvimento de softwares web, o Shield UI fornece uma série de componentes prontos e fáceis de customizar que podem se integrar com os mais diversos tipos de aplicações web, sejam elas em ASP.NET (Core ou MVC), sejam em tecnologias como Java, HTML, etc. Aqui, você terá insumos e instruções sobre como integrá-lo aos seus projetos ASP.NET Core, bem como popular widgets via serviços RESTful.

Desenvolver aplicações web na plataforma .NET é uma tarefa que se torna cada vez mais simples há cada lançamento de atualizações da Microsoft. O Visual Studio, aliado aos plugins e componentes mantidos pela companhia, facilita a criação e automatização de códigos, CRUDS, integrações, dentre outros, ao passo em que viabiliza que o desenvolvedor foque em partes mais importantes do software como um todo. Em contrapartida, cada vez mais complexidades como a comunicação direta com determinados frameworks, toda a parte front-end, o banco de dados, são adicionados ao sistema final, o que exige certa proficiência do time para unificar tudo de forma concisa e funcional.

O Bootstrap é um dos frameworks front-end mais usados na atualidade e a forma como ele simplifica a criação e customização de componentes web tornou-se não só seu maior diferencial, como a principal razão por ser adotado pela maioria das plataformas, bem como respectivos desenvolvedores. Todos os tipos de aplicações se encaixam bem no visual/estrutura do Bootstrap, desde aplicações corporativas, educacionais, financeiras, de notícias, isso sem falar do lado responsivo bem encapsulado pelo framework para todos os tipos de dispositivos.

E quando se trata de mesclar o que há de melhor nos dois mundos, chegamos num ponto onde a maioria dos desenvolvedores entrava: como integrar tecnologias tão distintas de forma limpa, sem criar enlaces que tornem a manutenção do sistema difícil no futuro? A resposta mais simples está em conhecer bem ambas as tecnologias. A plataforma .NET, especificamente, fornece inúmeros recursos para lidar com elementos web de forma simplificada, incluindo diversas bibliotecas JavaScript que já têm inclusão automática feita pelo gerenciador de dependências do Visual Studio, como o jQuery, por exemplo.

Neste artigo, trataremos de expor as principais facetas desse tipo de processo, através da criação de uma aplicação totalmente responsiva de gerenciamento escolar, alunos, notas, disciplinas, etc. de modo a expor o passo a passo requerido na hora de incutir estilos, elementos e widgets do Bootstrap em conjunto com o desenvolvimento de scripts web, bem como toda a parte JavaScript do cliente. Neste, especialmente, faremos uso do framework Shield UI, já conhecido dos desenvolvedores .NET por sua fácil integração com a plataforma, com o jQuery, dentre outros.

Configurando o ambiente

Antes de qualquer coisa, certifique-se de que tem o ambiente devidamente configurado com uma versão recente do Visual Studio, além das opções “ASP.NET and web development” e “.NET Core cross-platform development” quando estiver instalando a IDE. Isso é tudo para que possamos criar um projeto do tipo ASP.NET Core MVC. Para isso, seleciona a opção “Arquivo > Novo > Projeto...” e, em seguida, nos modelos instalados, selecione a opção tal como mostrado na Figura 1.

Criando novo
projeto Web ASP.NET Core
Figura 1. Criando novo projeto Web ASP.NET Core

Em seguida, selecione a opção que representa o tipo de aplicação para web, que encapsula tanto os controladores do MVC quanto o modelo RESTful, tal como demonstrado na Figura 2.

Selecionando o
tipo de template do projeto
Figura 2. Selecionando o tipo de template do projeto

Para iniciar as configurações do Shield UI no nosso projeto, basta clicar com o botão direito no mesmo e selecionar a opção “Gerenciar pacotes do NuGet...”. Na aba “Procurar”, digite o texto “ShieldUI.AspNetCore.Mvc”, clique em pesquisar e na opção que aparecer clique em “Instalar”. Caso algum erro seja apresentado durante esse procedimento, revise as versões máximas que o Shield UI suporta (ele informará a mesma no Console de erros, uma vez que a última versão que o autor estiver usando pode não mais ser a mesma da data de escrita deste artigo).

Uma vez com o app criado e a dependência do Shield UI devidamente adicionada ao projeto, precisamos importar suas classes de inicialização nos arquivos de configuração do projeto .NET. A primeira delas no arquivo de views /_ViewImports.cshtml, o qual define o resumo de recursos externos que as páginas web da webapplication terão acesso liberado. A mesma conta apenas com os tag helpers padrão da Microsoft, bem como o do próprio projeto. Portanto, adicione a seguinte linha de código ao fim do arquivo:

@using ShieldUI.AspNetCore.Mvc

Asegunda configuração, já no código C#, consiste em adicionar a inicialização e respectivo uso da API do Shield UI no arquivo de startup do projeto, o Startup.cs. Há dois métodos que devemos alterar: o primeiro é método Configure(), que recebe o objeto de IApplicationBuilder para configuração de recursos específicos que a aplicação fará uso. Vejamos na Listagem 1 como o mesmo deve ficar.

Listagem 1. Método Configure() pós configuração do Shield UI.

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
  public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
  {
      loggerFactory.AddConsole(Configuration.GetSection("Logging"));
      loggerFactory.AddDebug();
   
      if (env.IsDevelopment())
      {
          app.UseDeveloperExceptionPage();
          app.UseBrowserLink();
      }
      else
      {
          app.UseExceptionHandler("/Home/Error");
      }
   
   ... 

Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo