Como criar aplicativos ASP.NET Core no Visual Studio para MacBuilding ASP.NET Core applications in Visual Studio for Mac

O ASP.NET Core é uma estrutura open-source e multiplataforma para a criação de aplicativos modernos, conectados à Internet e baseados em nuvem, como serviços e aplicativos Web, aplicativos IoT e back-ends móveis.ASP.NET Core is an open-source and cross-platform framework for building modern cloud-based internet connected applications, such as web apps and services, IoT apps, and mobile backends. Os aplicativos ASP.NET Core podem ser executados nos runtimes do .NET Core ou do .NET Framework.ASP.NET Core apps can run on .NET Core or on the .NET Framework runtimes. Ele foi projetado para fornecer uma estrutura de desenvolvimento otimizada para aplicativos que são implantados na nuvem ou executados localmente.It was architected to provide an optimized development framework for apps that are deployed to the cloud or run on-premises. Ele consiste em componentes modulares com sobrecarga mínima, para que você mantenha a flexibilidade durante a construção de suas soluções.It consists of modular components with minimal overhead, so you retain flexibility while constructing your solutions. Você pode desenvolver e executar aplicativos ASP.NET Core de multiplataforma no Windows, Mac e Linux.You can develop and run your ASP.NET Core apps cross-platform on Windows, Mac, and Linux. O ASP.NET Core é um software livre no GitHub.ASP.NET Core is open source at GitHub.

Neste laboratório, você criará e explorar um aplicativo ASP.NET Core com o Visual Studio para Mac.In this lab, you will create and explore an ASP.NET Core application with Visual Studio for Mac.

ObjetivosObjectives

  • Criar um aplicativo Web ASP.NET CoreCreate an ASP.NET Core web app
  • Explorar o modelo de hospedagem, configuração e middleware do ASP.NET CoreExplore the ASP.NET Core hosting, configuration, and middleware model
  • Depurar um aplicativo Web ASP.NET CoreDebug an ASP.NET Core web app

Pré-requisitosPrerequisites

Público-alvoIntended Audience

Este laboratório destina-se a desenvolvedores que estão familiarizados com o C#, embora uma ampla experiência não seja necessária.This lab is intended for developers who are familiar with C#, although deep experience is not required.

Tarefa 1: Criando um novo aplicativo de ASP.NET CoreTask 1: Creating a new ASP.NET Core application

  1. Iniciar Visual Studio para Mac.Launch Visual Studio for Mac.

  2. Selecione Arquivo > Nova Solução.Select File > New Solution.

  3. Selecione a categoria .NET Core > Aplicativo e o modelo Aplicativo Web ASP.NET Core (C#).Select the .NET Core > App category and the ASP.NET Core Web App (C#) template. Clique em Próximo.Click Next.

    Captura de tela mostrando como selecionar um modelo de aplicativo Web para seu novo projeto.

  4. Insira o nome "CoreLab" e clique em Criar para criar o projeto.Enter a name of "CoreLab" and click Create to create the project. Isso levará alguns instantes para ser concluído.It will take a moment to complete.

    Captura de tela da configuração do aplicativo Web, adicionando um nome de projeto.

Tarefa 2: Tour pela soluçãoTask 2: Touring the solution

  1. O modelo padrão produzirá uma solução com um único projeto ASP.NET Core chamado CoreLab.The default template will produce a solution with a single ASP.NET Core project named CoreLab. Expanda o nó do projeto para expor seu conteúdo.Expand the project node to expose its contents.

    Captura de tela do nó do projeto de solução selecionado para ver seu conteúdo, incluindo pastas e arquivos.

  2. Esse projeto segue o paradigma MVC (Model-View-Controller) para fornecer uma divisão clara das responsabilidades entre os dados (modelos), a apresentação (exibições) e a funcionalidade (controladores).This project follows the model-view-controller (MVC) paradigm to provide a clear division of responsibilities between data (models), presentation (views), and functionality (controllers). Abra o arquivo HomeController.cs da pasta Controladores.Open the HomeController.cs file from the Controllers folder.

    Captura de tela do projeto de solução com uma classe C# denominada HomeController selecionada.

  3. Por convenção, a classe HomeController manipula todas as solicitações de entrada que começam com /Home.The HomeController class-by convention-handles all incoming requests that start with /Home. O método Index manipula solicitações para a raiz do diretório (como http://site.com/Home) e outros métodos manipulam as solicitações para seu caminho nomeado baseado em convenção, como About() manipula solicitações para http://site.com/Home/About.The Index method handles requests to the root of the directory (like http://site.com/Home) and other methods handle requests to their named path based on convention, such as About() handling requests to http://site.com/Home/About. Obviamente, isso tudo é configurável.Of course, this is all configurable. Um aspecto notável é que o HomeController é o controlador padrão em um novo projeto e, portanto, as solicitações para a raiz do site (http://site.com) passarão pelo Index() do HomeController, assim como as solicitações para http://site.com/Home ou http://site.com/Home/Index.One notable is that the HomeController is the default controller in a new project, so requests to the root of the site (http://site.com) would go through Index() of the HomeController just like requests to http://site.com/Home or http://site.com/Home/Index.

    Captura de tela de uma classe C# chamada HomeController.

  4. O projeto também tem uma pasta Exibições que contém outras pastas que são mapeadas para cada controlador (bem como uma para exibições Compartilhadas).The project also has a Views folder that contains other folders that map to each controller (as well as one for Shared views. Por exemplo, o arquivo de exibição CSHTML (uma extensão de HTML) para o caminho /Home/About seria em Views/Home/About.cshtml.For example, the view CSHTML file (an extension of HTML) for the /Home/About path would be at Views/Home/About.cshtml. Abra esse arquivo.Open that file.

    Captura de tela do projeto de solução com o arquivo C S H T M chamado sobre selecionado.

  5. Esse arquivo CSHTML usa a sintaxe Razor para renderizar HTML com base em uma combinação de marcas padrão e C# embutido.This CSHTML file uses the Razor syntax to render HTML based on a combination of standard tags and inline C#. Saiba mais sobre isso na documentação online.You can learn more about this in the online documentation.

    Captura de tela de parte de um arquivo C S H T M mostrando sintaxe Razor.

  6. A solução também contém uma pasta wwwroot que será a raiz do site.The solution also contains a wwwroot folder that will be the root for your web site. Você pode colocar o conteúdo estático do site, como CSS, imagens e bibliotecas JavaScript, diretamente nos caminhos de que você deseja que eles estejam quando o site for implantado.You can put static site content, such as CSS, images, and JavaScript libraries, directly at the paths you'd want them to be at when the site is deployed.

    Captura de tela da solução com a pasta raiz w w selecionada.

  7. Também há uma variedade de arquivos de configuração que servem para gerenciar o projeto, seus pacotes e o aplicativo no runtime.There are also a variety of configuration files that serve to manage the project, its packages, and the application at runtime. Por exemplo, a configuração de aplicativo padrão é armazenada em appsettings.json.For example, the default application configuration is stored in appsettings.json. Aninhado abaixo do appsettings.jsno arquivo é o appsettings.Development.jsno arquivo.Nested below the appsettings.json file is the appsettings.Development.json file. Aqui, você pode substituir algumas ou todas essas configurações em uma base por ambiente.Here, you can override some/all of these settings on a per-environment basis. Visual Studio para Mac aninhará arquivos dessa maneira usando a mesma lógica que o Visual Studio para Windows, para que os arquivos que você precisa acessar com mais frequência estejam no Forefront.Visual Studio for Mac will nest files in this manner using the same logic as Visual Studio for Windows, so that files which you need to access more often are at the forefront.

    Captura de tela mostrando um modo de exibição de detalhes com um arquivo JSON selecionado.

Tarefa 3: entendendo como o aplicativo é hospedadoTask 3: Understanding how the application is hosted

  1. No Gerenciador de Soluções, abra Program.cs.From Solution Explorer, open Program.cs. Esse é o bootstrapper que executará seu aplicativo.This is the bootstrapper that will run your application.

    Captura de tela da solução com o arquivo de origem C# chamado programa selecionado.

  2. Embora haja apenas duas linhas de código aqui, elas são significativas.While there are only two lines of code here, they're substantial. Vamos detalhá-las.Let's break them down. Primeiro, um WebHostBuilder é criado.First, a new WebHostBuilder is created. Os aplicativos ASP.NET Core exigem um host no qual serão executados.ASP.NET Core apps require a host in which to execute. Um host precisa implementar a interface IWebHost, que expõe coleções de funcionalidades e serviços, e um método Start.A host must implement the IWebHost interface, which exposes collections of features and services, and a Start method. O host é normalmente criado com uma instância de um WebHostBuilder, que cria e retorna uma instância de WebHost.The host is typically created using an instance of a WebHostBuilder, which builds and returns a WebHost instance. O WebHost referencia o servidor que manipulará as solicitações.The WebHost references the server that will handle requests.

    Captura de tela do método Main do C# com uma instrução que Inicializa uma variável chamada host com o tipo WebHostBuilder.

  3. Embora o WebHostBuilder seja responsável por criar o host que irá inicializar o servidor para o aplicativo, ele requer que você forneça um servidor que implementa o IServer .While the WebHostBuilder is responsible for creating the host that will bootstrap the server for the app, it requires you provide a server that implements IServer. Por padrão, esse é o Kestrel, um servidor Web multiplataforma para o ASP.NET Core baseado no libuv, uma biblioteca de E/S assíncrona multiplataforma.By default, this is Kestrel, a cross-platform web server for ASP.NET Core based on libuv, which is a cross-platform asynchronous I/O library.

    Captura de tela do método Main do C# realçando a variável de host definindo o servidor com o método UseKestrel.

  4. Em seguida, a raiz do conteúdo do servidor é definida.Next, the server's content root is set. Isso determina o local em que ele pesquisa arquivos de conteúdo, como arquivos de Exibição do MVC.This determines where it searches for content files, like MVC View files. A raiz do conteúdo padrão é a pasta na qual o aplicativo é executado.The default content root is the folder from which the application is run.

    Captura de tela do método Main do C# realçando a variável de host definindo a raiz de conteúdo para o servidor com o método UseContentRoot.

  5. Se o aplicativo precisar funcionar com o servidor Web do IIS (Serviços de Informações da Internet), o método UseIISIntegration deverá ser chamado como parte da criação do host.If the app must work with the Internet Information Services (IIS) web server, the UseIISIntegration method should be called as part of building the host. Isso não configura um servidor, como UseKestrel o faz.That this does not configure a server, like UseKestrel does. Para usar o IIS com o ASP.NET Core, é necessário especificar UseKestrel e UseIISIntegration.To use IIS with ASP.NET Core, you must specify both UseKestrel and UseIISIntegration. O Kestrel foi projetado para ser executado por trás de um proxy e não deve ser implantado diretamente para a Internet.Kestrel is designed to be run behind a proxy and should not be deployed directly facing the internet. UseIISIntegration especifica o IIS como o servidor proxy reverso, mas só é relevante quando executado em computadores que têm o IIS.UseIISIntegration specifies IIS as the reverse proxy server, but it's only relevant when running on machines that have IIS. Se você implanta seu aplicativo no Windows, pode deixá-lo lá.If you deploy your application to Windows, leave it in. Fazer isso não será prejudicial.It doesn't hurt otherwise.

    Captura de tela do método Main do C# realçando a variável de host Configurando o servidor proxy reverso com o método UseIISIntegration.

  6. É uma prática mais limpa de separar o carregamento das configurações da inicialização do aplicativo.It's a cleaner practice to separate the loading of settings from the application bootstrapping. Para fazer isso com facilidade, UseStartup é chamado para especificar que a classe Startup será chamada para o carregamento das configurações e outras tarefas de inicialização, como a inserção de middleware no pipeline HTTP.To easily do this, UseStartup is called to specify that the Startup class is to be called for the loading of settings and other startup tasks, such as inserting middleware into the HTTP pipeline. Você pode ter várias chamadas UseStartup com a expectativa de que cada uma delas substitua as configurações anteriores, conforme necessário.You may have multiple UseStartup calls with the expectation that each one overwrites previous settings as needed.

    Captura de tela do método Main do C# realçando a variável de host definindo a classe de inicialização com a opção UseStartup.

  7. A última etapa na criação do IWebHost é chamar o Build.The last step in creating the IWebHost is to call Build.

    Captura de tela do método Main do C# realçando a variável de host com o método Build.

  8. Embora as classes IWebHost sejam necessárias para implementar o Start sem bloqueio, os projetos ASP.NET Core têm um método de extensão chamado Run que encapsula Start com um código de bloqueio, de modo que você não precisa impedir de forma manual o encerramento do método imediatamente.While IWebHost classes are required to implement the non-blocking Start, ASP.NET Core projects have an extension method called Run that wraps Start with blocking code so you don't need to manually prevent the method from exiting immediately.

    Captura de tela do método Main do C# realçando a instrução do ponto de host do extracto.

Tarefa 4: executando e Depurando o aplicativoTask 4: Running and debugging the application

  1. No Gerenciador de Soluções, clique com o botão direito do mouse no nó do projeto CoreLab e selecione Opções.In Solution Explorer, right-click the CoreLab project node and select Options.

    Captura de tela mostrando o menu de contexto da solução CoreLab, opções de realce.

  2. A caixa de diálogo Opções do Projeto inclui tudo o que você precisa para ajustar como o aplicativo é criado e executado.The Project Options dialog includes everything you need to adjust how the application is built and run. Selecione o nó Executar > Configurações > Padrão no painel esquerdo.Select the Run > Configurations > Default node from the left panel.

  3. Marque Executar no console externo e desmarque Pausar a saída do console.Check Run on external console and uncheck Pause console output. Normalmente, o aplicativo auto-hospedado não teria seu console visível, mas, em vez disso, registraria seus resultados na janela de saída .Ordinarily the self-hosted application would not have its console visible, but would instead log its results to the Output window. Para os fins deste laboratório, vamos mostrá-lo em uma janela separada também, embora não seja necessário fazer isso durante o desenvolvimento normal.For the purposes of this lab, we'll show it in a separate window as well, although you don't need to do that during normal development.

  4. Clique em OK.Click OK.

    Captura de tela mostrando a guia geral de configuração de execução, com executar no console externo selecionado e pausar a saída do console não selecionada.

  5. Pressione F5 para compilar e executar o aplicativo.Press F5 to build and run the application. Como alternativa, você pode selecionar Executar > Iniciar Depuração.Alternatively, you can select Run > Start Debugging.

  6. O Visual Studio para Mac iniciará duas janelas.Visual Studio for Mac will launch two windows. A primeira é uma janela de console que fornece uma exibição do aplicativo para servidores auto-hospedados.The first is a console window that provides you a view into the self-hosted server application.

    Captura de tela mostrando a janela do console para o aplicativo de servidor auto-hospedado.

  7. A segunda é uma janela do navegador típica para testar o site.The second is a typical browser window to test the site. Pelo que o navegador sabe, esse aplicativo pode ser hospedado em qualquer lugar.As far as the browser knows, this application could be hosted anywhere. Clique em Sobre para navegar até essa página.Click About to navigate to that page.

    Captura de tela mostrando uma janela do navegador para testar o site, destacando a opção about.

  8. Entre outras coisas, a página Sobre renderiza um texto definido no controlador.Among other things, the about page renders some text set in the controller.

    Captura de tela mostrando o resultado da seleção da opção About, que é uma página About.

  9. Mantenha ambas as janelas abertas e retorne ao Visual Studio para Mac.Keep both windows open and return to Visual Studio for Mac. Abra Controllers/HomeController.cs se ainda não estiver aberto.Open Controllers/HomeController.cs if it's not already open.

    Captura de tela mostrando a solução com a classe HomeController C# novamente selecionada.

  10. Definir um ponto de interrupção na primeira linha do método Sobre.Set a breakpoint in the first line of the About method. Faça isso clicando na margem ou definindo o cursor na linha e pressionando F9.You can do this by clicking in the margin or setting the cursor on the line and pressing F9. Essa linha define alguns dados na coleção ViewData que é renderizada na página CSHTML em Views/Home/About.cshtml.This line sets some data in the ViewData collection that is rendered in the CSHTML page at Views/Home/About.cshtml.

    Captura de tela mostrando o método about com um ponto de interrupção definido.

  11. Retorne ao navegador e atualize a página Sobre.Return to the browser and refresh the about page. Isso disparará o ponto de interrupção no Visual Studio para Mac.This will trigger the breakpoint in Visual Studio for Mac.

  12. Passe o mouse sobre o membro ViewData para exibir seus dados.Mouse over the ViewData member to view its data. Expanda também seus membros filho para ver os dados aninhados.You can also expand its child members to see nested data.

    Captura de tela mostrando um ponto de interrupção com seus dados expandidos.

  13. Remova o ponto de interrupção do aplicativo usando o mesmo método que você usou para adicioná-lo.Remove the application breakpoint using the same method you used to add it.

  14. Abra Views/Home/About.cshtml.Open Views/Home/About.cshtml.

  15. Altere o texto “adicional” para “alterado” e salve o arquivo.Change the text "additional" to "changed" and save the file.

    Captura de tela do C S H T M arquivo chamado sobre com uma alteração em seu texto.

  16. Pressione o botão Continuar para continuar a execução.Press the Continue button to continue execution.

    Captura de tela da janela do Visual Studio destacando o botão continuar.

  17. Retornar à janela do navegador para ver o texto atualizado.Return to the browser window to see the updated text. Essa alteração pode ser feita a qualquer momento e não exige, necessariamente, um ponto de interrupção do depurador.This change could be done at any time and didn't necessarily require a debugger breakpoint. Atualize o navegador se você não vir a alteração refletida imediatamente.Refresh the browser if you don't see the change reflected immediately.

    Captura de tela da página sobre, desta vez com o texto alterado.

  18. Feche a janela do navegador de teste e o aplicativo de console.Close the test browser window and application console. Isso interromperá a depuração também.This will stop debugging as well.

Tarefa 5: configuração de inicialização do aplicativoTask 5: Application startup configuration

  1. No Gerenciador de Soluções, abra Startup.cs.From Solution Explorer, open Startup.cs. Você pode observar alguns rabiscos vermelhos inicialmente, conforme os pacotes NuGet são restaurados em segundo plano e o compilador Roslyn cria um panorama completo das dependências do projeto.You may notice some red squiggles initially as NuGet packages are being restored in the background and the Roslyn compiler is building a complete picture of the project dependencies.

    Captura de tela da solução com o arquivo de classe C# chamado Startup selecionado.

  2. Localize o método Startup.Locate the Startup method. Essa seção define a configuração inicial para o aplicativo e é densamente compactada.This section defines the initial configuration for the application and is densely packed. Vamos por partes.Let's break it down.

    Captura de tela mostrando o método de inicialização da classe de inicialização.

  3. O método começa inicializando um ConfigurationBuilder e definindo seu caminho base.The method starts off by initializing a ConfigurationBuilder and setting its base path.

    Captura de tela do método Startup, mostrando uma instrução inicializando uma variável chamada Builder com o tipo ConfigurationBuilder.

  4. Em seguida, ele carrega um arquivo appsettings.json necessário.Next, it loads a required appsettings.json file.

    Captura de tela do método Startup, mostrando a variável Builder usando o método addjsonfile para adicionar o arquivo JSON denominado appSettings.

  5. Depois disso, ele tenta carregar um arquivo appsettings.json específico do ambiente, que substituirá as configurações existentes.After that, it attempts to load an environment-specific appsettings.json file, which would override existing settings. Por exemplo, esse é um arquivo appsettings.Development.json fornecido usado para esse ambiente específico.For example, this is a provided appsettings.Development.json file used for that specific environment. Para ler mais sobre a configuração no ASP.NET Core, confira a documentação.To read more about configuration in ASP.NET Core, check out the docs.

    Captura de tela do método Startup, mostrando a variável Builder usando o método addjsonfile para adicionar um arquivo JSON de appSettings específico do ambiente.

  6. Por fim, as variáveis de ambiente são adicionadas ao construtor de configuração e a configuração é criada e definida para uso.Finally, the environment variables are added to the configuration builder and the configuration is built and set for usage.

    Captura de tela do método Startup, mostrando a variável Builder adicionando variáveis de ambiente e, em seguida, usando o método Build para criar a configuração.

Tarefa 6: inserindo middleware de aplicativoTask 6: Inserting application middleware

  1. Localize o método Configure na classe Startup.Locate the Configure method in the Startup class. É nele em que todo o middleware é configurado para que possa ser inserido no pipeline HTTP e usado para processar cada solicitação ao servidor.This is where all the middleware is configured so that it can be inserted into the HTTP pipeline and used to process every request to the server. Embora esse método seja chamado apenas uma vez, o conteúdo dos métodos (como UseStaticFiles) pode ser executado em cada solicitação.While this method is called only once, the contents of the methods (such as UseStaticFiles) may be executed on every request.

    Captura de tela mostrando o método configure na classe Startup.

  2. Você também pode adicionar outro middleware a ser executado como parte do pipeline.You can also add additional middleware to be executed as part of the pipeline. Adicione o código abaixo após app.UseStaticFiles para adicionar automaticamente um cabeçalho X-Test a cada resposta de saída.Add the code below after app.UseStaticFiles to automatically add an X-Test header to every outgoing response. O IntelliSense ajudará a preencher o código conforme você digitar.IntelliSense will help complete the code as you type.

    app.Use(async (context, next) =>
    {
        context.Response.Headers.Add("X-Test", new[] { "Test value" });
        await next();
    });
    
  3. Pressione F5 para criar e executar o projeto.Press F5 to build and run the project.

  4. Podemos usar o navegador para inspecionar os cabeçalhos para verificar se eles são adicionados.We can use the browser to inspect the headers to verify they are added. As instruções abaixo referem-se ao Safari, mas você pode fazer o mesmo no Chrome ou no Firefox.The instructions below are for Safari, but you can do the same in Chrome or Firefox.

  5. Depois que o navegador carregar o site, selecione Safari > Preferências.Once the browser loads the site, select Safari > Preferences.

  6. Na guia Avançado, marque Mostrar menu Desenvolver na barra de menus e feche a caixa de diálogo.On the Advanced tab, check Show Develop menu in menu bar and close the dialog.

    Captura de tela mostrando o painel avançado na caixa de diálogo Preferências do safari com o menu Mostrar desenvolver na opção barra de menus selecionada.

  7. Selecione Desenvolver > Mostrar Recursos da Página.Select Develop > Show Page Resources.

  8. Atualize a janela do navegador para que as ferramentas para desenvolvedores recém-abertas possam acompanhar e analisar o tráfego e o conteúdo.Refresh the browser window so that the newly opened developer tools can track and analyze the traffic and content.

  9. A página HTML do localhost renderizada pelo servidor será o item selecionado por padrão.The localhost HTML page rendered by the server will be the item selected by default.

    Captura de tela destacando a página do localhost H T M L.

  10. Expanda a barra lateral de Detalhes.Expand the Details sidebar.

    Captura de tela destacando o controle a ser usado para expandir a barra lateral de detalhes.

  11. Role a página até a parte inferior da barra lateral para ver o cabeçalho de resposta adicionado ao código anteriormente.Scroll to the bottom of the sidebar to see the response header added in code earlier.

    Captura de tela destacando o cabeçalho de resposta chamado XTest com um valor de Test Value.

  12. Feche a janela do navegador e o console quando estiver satisfeito.Close the browser window and console when satisfied.

ResumoSummary

Neste laboratório, você aprendeu a começar a desenvolver aplicativos ASP.NET Core com o Visual Studio para Mac.In this lab, you've learned how to get started developing ASP.NET Core apps with Visual Studio for Mac. Caso deseje explorar o desenvolvimento de um aplicativo de banco de dados de filmes mais completo, confira o tutorial Introdução ao ASP.NET Core MVC.If you'd like to explore developing a more complete movies database application, see the Get started with ASP.NET Core MVC tutorial.