Criando projetos ASP.NET Core com Yeoman

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

Nota: Algumas das ferramentas que utilizaremos precisam ser instaladas via NPM, um gerenciador de pacotes para JavaScript. Portanto, � preciso que ele esteja instalado no ambiente de desenvolvimento. Tamb�m ser� necess�rio instalar o Visual Studio Code, que pode ser baixado gratuitamente.

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 bower

Ap�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 restore

O 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 build

Se 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 run

Com 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 }

Listagem 1. Classe modelo ContatoModel

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 }

Listagem 2. Controller de contatos

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>

Listagem 3. View Index dos contatos

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