Motivação
Quando optamos por utilizar o Visual Studio Code para desenvolver aplicações ASP.NET Core, não temos à nossa disposição todos os recursos do Visual Studio, que cria rapidamente toda a estrutura do projeto. Para facilitar essa tarefa, temos o Yeoman, um framework responsável por fazer o scaffolding do projeto, ou seja, a geração da estrutura básica de um sistema ou framework.Neste artigo veremos como ganhar produtividade no desenvolvimento de aplicações ASP.NET Core utilizando o Yeoman e o Visual Studio Code.
Saiba mais sobre o Visual Studio Code
Passo 1: Instalação das ferramentas
Abra uma janela do prompt de comandos com direitos administrativos, garanta que o computador esteja conectado à internet e digite o comando abaixo para instalar as seguintes ferramentas:
- Yeoman: ferramenta responsável por gerar a estrutura básica de projetos, evitando a necessidade de composição manual de diretórios e arquivos;
- Generator ASP.NET: plugin que contém toda a estrutura de projetos ASP.NET Core a ser criada pelo Yeoman.
- Gulp: ferramenta de automatização de tarefas, utilizado para simplificar o fluxo de trabalho por meio da execução pré-configurada de procedimentos como minificação de arquivos;
- Bower: gerenciador de dependências para componentes front-end, como frameworks e bibliotecas JavaScript e CSS (jQuery, Bootstrap, etc.).
npm install –g yo generator-aspnet gulp bowerApós a instalação, que pode demorar alguns minutos, serão exibidas algumas mensagens no console informando quais pacotes foram baixados.
Passo 2: Criação do projeto
Em seguida, crie um diretório (que aqui se chamará MicroartigoCodeASPNETYeoman), navegue até ele e utilize o seguinte comando para acionar o gerador de projetos ASP.NET do Yeoman:
yo aspnet
Neste momento, uma lista de opções será exibida, como mostra a Figura 1.
Figura 1. Tela de seleção de scaffoldings do Yeoman
Utilize as setas do teclado para navegar até a opção Web Application Basic [without Membership And Authorization] e pressione Enter para iniciar a criação do projeto. Em seguida, ao ser questionado sobre qual framework de UI deseja utilizar, selecione a opção Bootstrap e pressione Enter novamente. Na próxima etapa digite o nome da aplicação, que aqui será nomeada como AgendaWeb, e prossiga com a criação.
Ao fim do processo, uma estrutura de pastas e arquivos terá sido criada. Nesse momento, automaticamente a ferramenta executará os comandos npm install e bower install para instalar as dependências necessárias ao projeto ASP.NET. Caso algum erro ocorra, você mesmo deverá executar esses comandos manualmente. Se tudo correr normalmente, o resultado deve ser semelhante ao que mostra a Figura 2.
Figura 2. Projeto ASP.NET criado com Yeoman
Saiba mais sobre o Bootstrap
Passo 3: Restauração de pacotes e compilação da aplicação
Agora que o Yeoman já criou toda a estrutura do projeto, passaremos a utilizar os comandos do próprio ASP.NET Core para concluir a aplicação. Para isso, navegue até o diretório do projeto (AgendaWeb) e restaure os pacotes do NuGet utilizando o seguinte comando:
dotnet restoreO NuGet é o gerenciador de pacotes padrão do .NET e a partir dele pode-se instalar diversas bibliotecas e frameworks necessários ao funcionamento da aplicação. Por padrão, quando a aplicação é criada esses pacotes são registrados no arquivo package.json, mas só são restaurados (baixados) mediante a execução do desse comando. Nesse momento, algumas requisições são feitas ao repositório do NuGet e no fim algumas mensagens de log são exibidas, informando do sucesso ou falha do procedimento.
Após o restore, precisamos efetuar o build da aplicação para verificar se não tivemos nenhum problema para a geração. Para isso, digite o comando abaixo:
dotnet buildSe tudo correr bem, você receberá uma mensagem informando que a compilação foi concluída sem erros ou warnings. Neste caso, já podemos executar a aplicação e vê-la no navegador, pois o Yeoman, com o gerador aspnet, cria uma página de exemplo completa. Para que possa visualizá-la, utilize o comando abaixo:
dotnet runCom esse comando o prompt se torna um servidor auto hospedado, como mostrado na Figura 3.
Figura 3. Servidor iniciado
Neste caso, o nosso servidor está localizado em http://localhost:5000 e é esse endereço que devemos acessar no navegador para visualizar o projeto, cuja tela inicial é mostrada na Figura 4.
Figura 4. Projeto ASP.NET de exemplo funcionando
Nossa aplicação inicial está plenamente funcional, agora podemos customizá-la.
Passo 4: Criação do Model
Para abrir o Visual Studio Code e editar o projeto, certifique-se de ter navegado até a pasta AgendaWeb e digite o comando a seguir:
code .Utilizando as opções da guia Explorer do VSCode, crie um novo diretório chamado Models na raiz do projeto, e dentro dele um arquivo nomeado como ContatoModel.cs, seguindo o que mostra a Figura 5.
Figura 5. Criando diretório e arquivo no VSCode
Nesse arquivo, adicione o código da Listagem 1.
01 using System;
02 using System.Collections.Generic;
03
04 namespace AgendaWeb.Models
05 {
06 public class ContatoListarModel
07 {
08 public string Nome { get; set; }
09 public string Email { get; set; }
10 }
11
12 public class AgendaBdMock: List<ContatoListarModel>
13 {
14 public AgendaBdMock ()
15 {
16 Add(new ContatoListarModel() { Nome = "Gabriel Simas", Email = "autorgabrielsimas@email.com" });
17 Add(new ContatoListarModel() { Nome = "Joel Rodrigues", Email = "joel@email.com" });
18 Add(new ContatoListarModel() { Nome = "Hurricane Truck", Email = "looktheside@email.com" });
19 }
20 }
21 }
Linhas 6 a 10: criamos a classe de modelo, com duas propriedades;
Linhas 12 a 20: criamos uma simulação dos dados, já que não temos bancos de dados neste exemplo.
Como o VSCode não tem análise estática de código, uma boa prática para evitar problemas é sempre efetuar um build após a criação de alguns objetos. Essa seria uma forma de se utilizar o fail-fast, que é uma forma de rapidamente identificar um erro ou uma falha e retornar um feedback de maneira satisfatória.
Passo 5: Criação do Controller
No diretório Controllers crie o arquivo ContatoController.cs, no qual teremos o método Index, que criará a listagem de contatos fictícia. O conteúdo desse arquivo pode ser visto na Listagem 2.
01 using Microsoft.AspNetCore.Mvc;
02 using AgendaWeb.Models;
03
04 namespace AgendaWeb.Controllers
05 {
06 public class ContatoController : Controller
07 {
08 public IActionResult Index()
09 {
10 AgendaBdMock contatos = new AgendaBdMock();
11 return View(contatos);
12 }
13 }
14 }
Compile novamente a aplicação e caso o build passe sem problemas, avance para o próximo passo: a criação da view.
Passo 6: Criação da View
Para a view, crie um subdiretório chamado Contato dentro do diretório Views e dentro dele crie um arquivo chamado Index.cshtml, cujo conteúdo é mostrado na Listagem 3.
01 @model System.Collections.Generic.IEnumerable<AgendaWeb.Models.ContatoListarModel>
02
03 <h1>Lista de Contatos</h1>
04
05 <table class="table">
06 <tr>
07 <th>
08 @Html.DisplayNameFor(model => model.Nome)
09 </th>
10 <th>
11 @Html.DisplayNameFor(model => model.Email)
12 </th>
13 </tr>
14 @foreach(var item in Model)
15 {
16 <tr>
17 <td>
18 @Html.DisplayFor(modelItem => item.Nome)
19 </td>
20 <td>
21 @Html.DisplayFor(modelItem => item.Email)
22 </td>
23 </tr>
24 }
25 </table>Linha 1: Fazemos uma referência ao model;
Linhas 14 a 24: iteramos sobre a coleção de dados enviados à view e preenchemos uma tabela.
Com isso já podemos testar a aplicação em nosso navegador, e para tal, basta que façamos o que já foi mostrado no Passo 3. Assim que a aplicação estiver iniciada, vá até o navegador e digite http://localhost:5000/Contato/. O resultado será o da Figura 6.
Figura 6. Customização do projeto web funcionando
Note que mesmo sem utilizar o Visual Studio convencional, podemos desenvolver aplicações ASP.NET Core facilmente com o apoio de ferramentas leves e bastante aplicadas em conjunto com outras tecnologias/stacks de desenvolvimento web, como o Yeoman, o Gulp e o Bower.
Saiba mais sobre as views do ASP.NET MVC
