Criando projetos ASP.NET Core com Yeoman

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.

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.

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.

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.

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.

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.

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