Artigo
10/09/2015

Outubro de 2015

Volume 30 - Número 10

ASP.NET: ASP.NET 5 sem fronteiras com OmniSharp e Yeoman

Por Sayed Ibrahim Ibrahim | Outubro de 2015

Conforme as equipes de desenvolvimento foram diversificando seu arsenal de ferramentas, as estruturas também passaram a oferecer opções sem conflitos. O ASP.NET 5 adotou suporte a plataformas cruzadas, inclusive a desenvolvimento com ferramentas de código aberto como OmniSharp e hospedagem no Microsoft Azure usando contêineres como o Docker. Nesse artigo, vamos demonstrar como você pode começar a usar o ASP.NET 5 na plataforma de sua escolha. Vamos cobrir tudo o que você precisa para começar a desenvolver aplicativos Web com o ASP.NET 5.

Deixar um projeto pronto e em execução pode representar um desafio, uma vez que o desenvolvimento moderno de aplicativos Web é repleto de opções. Como usuário do Visual Studio, os benefícios do IDE, dos modelos internos e das ferramentas como Web Essentials para ajudá-lo a decolar um projeto podem ter quase mimado você demais. Mas desenvolvedores que não usam o Windows e uma IDE complexa como o Visual Studio geralmente dependem de ferramentas de linha de comando, como Yeoman, Grunt ou Gulp, ou Node.js para construir e compilar aplicativos Web. Agora, o ASP.NET 5 foi totalmente reconstruído do zero com foco em todas as plataformas, adotando a filosofia "a escolha é quem manda" para as ferramentas de desenvolvimento. Agora, além de seus projetos Windows, você pode usá-lo para Linux e OS X. Aqui está uma visão rápida sobre a instalação e criação de um projeto de uma perspectiva diferente do sistema operacional Windows, usando o ASP.NET 5.

Configurando o seu ambiente

Você precisará de algumas peças para configurar seu ambiente, mas o processo é muito bem documentado tanto para OS X quanto para Linux. Você pode encontrar instruções detalhadas em bit.ly/1Ljhj68. Para esse artigo, vamos considerar que a maioria de vocês use o OS X.

O primeiro passo é instalar as ferramentas que usaremos para compilar nosso aplicativo Web no ASP.NET 5. Eventualmente, CoreCLR (github.com/dotnet/coreclr) será a base do tempo de execução para a estrutura. Por enquanto, porém, o ASP.NET 5 ainda requer o tempo de execução Mono. Para instalar o Mono, use o HomeBrew (brew.sh):

$ brew install mono

Em seguida, instale o .NET Version Manager (DNVM), um conjunto de utilitários em linha de comando que permitem atualizar e configurar seu ambiente de execução .NET (DNX), essencialmente habilitando o desenvolvimento em plataforma cruzada usando o .NET Core 5 (docs.asp.net/en/latest/dnx/). Para instalar o DNVM e o DNX do seu terminal, execute os seguintes comandos:

$ brew tap aspnet/dnx
$ brew update
$ brew install dnvm

Agora você instalou o tempo de execução Mono, além do DNVM e do DNX. Para verificar sua versão do DNVM, digite "$ dnvm" no terminal, como na Figura 1. Observe que, seu o seu shell não reconhecer o comando dnvm, talvez você precise executar "source dnvm.sh" para carregá-lo.

Figura 1 Verificando a versão do DNVM

Escolhendo um Editor

Se estiver usando o Windows, não há muito o que debater; você usará alguma versão do Visual Studio. No entanto, em OS X ou Linux há muitas opções, de um editor de texto simples como TextMate até uma grande variedade de editores populares, como Sublime, Atom, Emacs ou Vim. E há uma novidade na lista de editores para desenvolvimento em plataforma cruzada: o Visual Studio Code (code.visualstudio.com) da Microsoft, nosso editor preferido não apenas para desenvolvimento em ASP.NET 5, mas também em AngularJS, Node.js e JavaScript em geral (veja a Figura 2).

Figura 2 Página de boas-vindas do Visual Studio Code

Independentemente da ferramenta que você decidir usar, o segredo para ativar o editor para ASP.NET 5 no OS X e no Linux é o OmniSharp (omnisharp.net). O Visual Studio Code vem com OmniSharp interno; outros editores possuem extensões ou repositórios de suplementos de onde o componente pode ser baixado.

Iniciar seu primeiro projeto

Sem o complexo ambiente de desenvolvimento do Visual Studio 2015, você precisará adotar uma outra abordagem para o desenvolvimento de aplicativos em ASP.NET 5 no OS X. É aí que entre o Yeoman (yeoman.io) e o projeto ASP.NET generator (bit.ly/1MPe5KY). Yeoman é uma plataforma de scaffolding construída sobre Node.js que permite que você compile geradores com base em modelos para projetos ou arquivos de códigos. É um utilitário em linha de comando que, por ser construído sobre Node.js, possui algumas dependências que precisam ser trabalhadas.

Para começar, instale o Node.js e o gerenciador de pacotes do nó (node package manager, NPM) pelo HomeBrew ou diretamente do nodejs.org:

$ brew install node

Ao concluir, instale os generators usando o npm:

$ npm install -g yo generator-aspnet

Se ainda não estiver usando Bower, Grunt ou Gulp, também baixe essas ferramentas. Para se familiarizar com essas ferramentas, que são partes do desenvolvimento mais novo e moderno, consulte o artigo "Ferramentas modernas para desenvolvimento para a Web: Bower", nesta edição.

$ npm install -g bower grunt-cli gulp-cli

O Bower é um gerenciador de pacotes para desenvolvimento de front-end para a Web, e um repositório para recursos Web como JavaScript e CSS. Grunt e Gulp são bibliotecas de execução de tarefas para realizar processos de compilação como minificação e transpiling de script e de imagens (TypeScript ou CoffeeScript).

Essa é toda a configuração de ferramentas que você precisa para desenvolvimento, independentemente do editor. Agora, para iniciar o novo tipo de projeto, execute “$ yo aspnet” para inicializar o gerador Yeoman e selecionar o projeto que deseja criar. Nesse caso, selecione "Web Application Basic [without Membership and Authorization]." como demonstrado na Figura 3, insira o nome do seu projeto e pressione enter.

Figura 3 Selecionar o tipo de projeto em Yeoman

Quando o gerador completar, você terá a opção de executar o aplicativo usando o servidor Web de plataforma cruzada Kestrel. No entanto, antes você precisará instalar as dependências de npm, Bower e NuGet , então execute o comando restaurar para obter esses recursos:

$ cd [projectname]
$ dnu restore

Esse comando fará download de todos os pacotes NuGet para o projeto referenciado no arquivo project.json.

(Também executamos "$ npm install" e "$ bower install" para verificar se os recursos dos componentes JavaScript e interface do usuário estão atualizados, mas isso não é obrigatório.)

Em seguida, execute o comando para iniciar o Kestrel:

$ dnx . kestrel

(Observe que no ASP.NET 5 Beta 7, esse comando será alterado para apenas "dnx kestrel.")

A palavra "Started' aparecerá na janela do terminal e você poderá ver o site da Web navegando até http://localhost:5000. Até agora, você criou o projeto, restaurou pacotes e executou o site sem o Windows ou o Visual Studio. Agora, abrirá o código no Visual Studio Code.

Editar ASP.NET

Como já apontado, o Visual Studio Code é um excelente editor para desenvolvimento de plataforma cruzada. Abra o projeto da maneira normal, ou usando o atalho de teclado "código" da pasta do projeto. (Acesse bit.ly/1LwonPN para obter informações sobre como configurar o atalho "código".)

Depois de abrir a pasta fonte no Visual Studio Code, pode começar a desenvolver o aplicativo. A Figura 4 mostra o resultado ao abrir o projeto no Code.

Figura 4 Abrir um projeto no editor Visual Studio Code

Como pode ver, você terá o destaque completo de sintaxe para arquivos C#, como esperado, no Mac OS X! Se olhar atentamente, verá uma pequena lâmpada perto do cursor na linha 2. A lâmpada, como no Visual Studio, pode ser usada para realizar ações rápidas em contexto. Nesse caso, o Visual Studio Code oferece a sugestão para Remover Usos Desnecessários. Agora, vamos adicionar novos arquivos ao seu projeto.

Para adicionar um novo arquivo ao seu projeto ASP.NET 5, não é preciso fazer nada especial. Basta adicionar um arquivo ao diretório, que ele será incluído imediatamente. No Code você pode usar o botão Adicionar Arquivo no modo de exibição de árvore, ou Ctrl+N para adicionar um novo arquivo em branco. Se desejar iniciar com algum conteúdo inicial, pode usar "yo aspnet". Para adicionar arquivos ao seus projetos ASP.NET 5 existentes, invoque um sub-gerador usando a seguinte sintaxe:

$ yo aspnet:<Name> <options>

Para demonstrar, vamos adicionar um novo controlador MVC e Visualização para uma nova página Admin para o aplicativo Web. Primeiro, vamos adicionar o controlador MVC. Quando yo aspnet for executado, adicionará arquivos ao diretório de trabalho atual, então você deve cd no diretório correto antes de executar os comandos. Para adicionar o controlador MVC, execute o seguinte comando na pasta Controllers:

yo aspnet:MvcController AdminController

Após executar o comando, você verá um novo arquivo, Hello.cs, no diretório de trabalho atual com o conteúdo exibido na Figura 5.

Figura 5 Hello.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;
// For more information on enabling MVC for empty projects, visit
// go.microsoft.com/fwlink/?LinkID=397860
namespace MyNamespace
{
  public class AdminController : Controller
  {
    // GET: /<controller>/
    public IActionResult Index()
    {
      return View();
    }
  }
}

O arquivo parece igual a quando você usa Arquivo | Novo Item no Visual Studio e seleciona Controlador MVC, porém aqui o nome do namespace não será atualizado automaticamente; ao invés disso, será codificado como MyNamespace. Por enquanto, você precisará atualizar a declaração do namespace para corresponder ao que você espera, mas isso será atualizado em uma versão futura. O sub-gerador MvcController é apenas um dentre muitos sub-geradores disponíveis em yo aspnet. Para acessar a lista completa de sub-geradores, você pode executar:

$ yo aspnet --help

Os sub-geradores em yo aspnet se equivalem aos modelos de item no Visual Studio ao usar Arquivo | Adicionar Novo Item. Para adicionar uma visualização, use o sub-gerador MvcView. Para adciionar a visualização Admin, execute o seguinte comando da pasta Views:

$ yo aspnet:MvcView Index

A visualização resultante, Index.cshtml, é muito básica:

@*
  // For more information on
  // enabling MVC for empty projects,
  // visit bit.ly/1PBdyKc
*@
@{
  // ViewBag.Title = "Index Page";
}

Mais uma vez, o conteúdo gerado usando yo aspnet se equivale ao diálogo Adicionar Novo Item do Visual Studio. No arquivo Index.cshtml você pode adicionar um cabeçalho para que possa navegar até essa página e verificar se tudo está funcionando:

<h1>Admin Page</h1>

Agora vejamos o que é preciso fazer para compilar e executar esse aplicativo.

Nós já mencionamos que você pode usar o comando "dnx . kestrel" para executar seu aplicativo. Se estiver usando o Code pode iniciar o servidor Web usando a paleta de comando exibida na Figura 6.

Figura 6 Iniciar um servidor Web no Visual Studio Code

Ao usar o Code, seu projeto será compilado nos bastidores usando o OmniSharp sempre que seus arquivos fontes forem alterados. Para exibir erros e avisos no Code, como os exibidos na Figura 7, use o botão de erros e avisos na barra de status. Como pode ver, o Code está indicando código deficiente na linha 16.

Figura 7 Exibir erros e avisos no Visual Studio Code

Também é possível compilar seu projeto a partir da linha de comando. Digamos que sua classe AdminController possua um erro de compilação. Para compilar o aplicativo na linha de comando, execute:

$ dnu build

Isso deve retornar os mesmos erros e avisos que o Code exibir. Agora que você viu como compilar e executar seu aplicativo, vamos seguir em frente e demonstrar depuração e implantação.

Depuração

Atualmente, não há suporte para depuração de ASP.NET 5 em qualquer outra plataforma que não seja o Windows e o Visual Studio, ou seja, não é possível realizar depuração em um aplicativo ASP.NET 5 no Mono para OS X ou Linux. Aplicativos ASP.NET 5 são compilados usando o compilador Roslyn e não o compilador Mono, e não há emissão de informações de depuração. Ainda não há suporte para depuração no Visual Studio Code, mas você pode sempre usar o Visual Studio em uma máquina virtual em seu computador Mac ou Linux. Esperamos que a equipe do Visual Studio Code consiga incluir suporte a depuração na versão CoreCLR.

Implantação

Você já aprendeu como desenvolver seu aplicativo localmente; vamos dar uma rápida olhada nas opções de hospedagem. Um exame detalhado sobre esse assunto precisaria de um artigo dedicado, por isso apresentaremos uma visão geral de alto nível para apontar alguns recursos externos. Visite bit.ly/1fvDQ41 para obter as informações mais recentes.

Em alto nível, essas são opções de publicação para ASP.NET 5:

Publicação em linha de comando usando o utilitário de linha de comando "dnu publish"
Publicação no Aplicativos Web do Azure usando Git
Publicação em um contêiner Docker em execução no Azure

O comando em linha dnu publish está no centro de todos os métodos de publicação. Ele irá empacotar seu aplicativo em um formato executável em servidores Web. Vamos examinar melhor.

Para começar e ver as opções de linha de comando disponíveis, execute:

dnu publish –help

A Figura 8 demonstra o resultado da execução deste comando.

Figura 8 Obter ajuda para o comando "dnu publish"

A opção de linha de comando mais importante é o argumento --out (-o), que permite especificar a pasta na qual seus arquivos devem ser publicados. Mas você também deve explorar as outras opções, conforme a necessidade

Após publicar o aplicativo em uma pasta, basta copiar essa pasta para seu servidor Web. Se estiver publicando em um computador Windows executando IIS, pode configurar seu site da Web como sempre fez. Para obter informações sobre como configurar seu servidor Web em Linux, consulte bit.ly/1E8uebl.

Se estiver publicando no Azure, pode obter suporte para iniciar. O Azure dá suporte a aplicativos ASP.NET 5 no Aplicativos Web do Azure, e também em contêineres Docker. Para implantar usando Aplicativos Web do Azure em um computador que não seja Windows, você pode usar FTP ou GIT. No caso de FTP, publicará os resultador do dnu publish. Consulte bit.ly/1LnFC2T para obter mais informações.

O modelo de publicação com base em Git é fácil de usar e oferece suporte a cenários de implantação contínua. Para começar a usar o Aplicativos Web do Azure Web usando Git, consulte bit.ly/1hQljS0. Isso é tudo o que você precisa saber para começar a desenvolver e executar aplicativos ASP.NET 5 na plataforma que escolher.

Conclusão

Antigamente, para desenvolver aplicativos Web ASP.NET era obrigatório usar Windows e Visual Studio. Agora, você pode usar ASP.NET 5 e os utilitários e ferramentas relacionadas em qualquer plataforma. E isso é só o começo. Para ficar de olho nas novidades do ASP.NET 5, visite github.com/aspnet/Home. O projeto yo aspnet é totalmente orientado pela comunidade. Se gostaria de ajudar, abra uma questão em bit.ly/1PvtcGX.

Shayne Boyeré ASP.NET MVP, palestrante da comunidade e arquiteto de soluções em Orlando, Flórida. Ele desenvolve soluções com base na Microsoft há 20 anos. Nos últimos 10 anos, vem trabalhando com aplicativos Web de grande escala, como foco em produtividade e desempenho. Você pode encontrar o Shayne no Twitter @spboyer e em seu site da Web tattoocoder.com.

Sayed Ibrahim Hashimi é gerente sênior de programas da Microsoft na equipe do Visual Studio Web. Ele escreveu vários livros sobre tecnologias da Microsoft e é o criador do SideWaffle e TemplateBuilder, bem como cocriador do OmniSharp. Você pode encontrar o Sayed no Twitter, em @SayedIHashimi e em seu blog sedodream.com.

Agradecemos ao seguinte especialista técnico da Microsoft pela revisão deste artigo: Scott Hanselman