Para criar o seu primeiro aplicativo do .NET, você precisará instalar o SDK do .NET, o Visual Studio Code e o Kit de Desenvolvimento em C#.
O que são o SDK do .NET, o Visual Studio Code e o Kit de Desenvolvimento em C#?
O SDK (Software Development Kit) do .NET é uma coleção gratuita e de software livre de ferramentas e bibliotecas que você precisará para criar e executar aplicativos usando C#. C# é a linguagem de programação moderna orientada a objeto que você usará para este tutorial.
O Visual Studio Code (VS Code) é o editor de código leve, gratuito e de software livre mais popular do mundo. É aqui que você escreverá o seu código em C#.
O Kit de Desenvolvimento em C# é um conjunto avançado de extensões do VS Code que facilita o desenvolvimento em C#. Ele ajuda você a escrever, testar e depurar o seu código à medida que você cria aplicativos.
O arquivo de Configuração do WinGet do .NET instalará o SDK do .NET 9, o VS Code e o Kit de Desenvolvimento em C# para você. Se você já tiver uma parte instalada, o WinGet irá ignorar essa etapa de instalação.
Para criar seu primeiro aplicativo .NET com o Visual Studio Code, configure seu ambiente:
Abra o VS Code e selecione o botão Extensões na Barra de Atividades do VS Code à esquerda. Digite C# na barra de pesquisa, selecione Kit de Desenvolvimento em C# e, em seguida, selecione o botão Instalar na página de extensão do Kit de Desenvolvimento C#.
Baixar e executar o arquivo de configuração
Clique no link a seguir para baixar o arquivo WinGet:
Abra a pasta downloads e clique duas vezes no arquivo para iniciar a instalação. Se você for solicitado a selecionar um aplicativo para executar o arquivo, selecione Gerenciador de Pacotes do Windows Cliente.
Um terminal será aberto e você deverá verá que o arquivo de Configuração do WinGet está pronto para instalar o SDK do .NET 9, o VS Code se você não o tiver e o Kit de Desenvolvimento em C#.
Leia o contrato de licença e concorde com ele digitando "y" no terminal e pressionando Enter.
Observação: você é responsável por entender as definições de configuração que está optando por executar. A Microsoft não é responsável pelo arquivo de configuração que você criou ou importou. Essa configuração talvez possa alterar as definições no Windows, instalar software, alterar configurações de software (incluindo configurações de segurança) e aceitar contratos de usuário para pacotes e serviços de terceiros em seu nome. Ao executar esse arquivo de configuração, você reconhece que entende e concorda com esses recursos e definições. Todos os aplicativos instalados são licenciados para você pelos respectivos proprietários. A Microsoft não é responsável nem concede licenças para pacotes ou serviços de terceiros.
O WinGet está instalando tudo o que você precisa para começar! O tempo de instalação dependerá das especificações do computador, da velocidade da rede e muito mais. Pode levar até 5 minutos, mas até 15 minutos para ser concluído.
Algumas etapas de instalação podem exigir permissões no nível do administrador para serem instaladas. Esteja em busca de prompts de UAC (Controle de Conta de Usuário) em seu barra de tarefas do Windows e clique nesse ícone. Para continuar a instalação, você deve selecionar Sim se solicitado.
Quando a instalação for concluída, você deverá ver a saída abaixo no terminal.
Verifique se tudo foi instalado corretamente
Agora que o seu ambiente está configurado, vá para Arquivar na Barra de Tarefas do Windows e digite Visual Studio Code. Clique no aplicativo para abrir o VS Code.
Depois de configurar seu ambiente, abra um novo terminal do VS Code. Na barra de ferramentas, selecione Terminal e, em seguida, Novo Terminal.
Observação: se você abrir VS Code por meio de um terminal, será necessário habilitar o de Confiança do Workspace.
Agora, abra um novo terminal acessando a barra de ferramentas e selecionando Terminal e Novo Terminal.
No terminal, execute o comando a seguir para verificar sua instalação.
Terminal
dotnet
Se a instalação for bem-sucedida, você deverá ver uma saída semelhante à seguinte:
Terminal
Usage: dotnet [options]Usage: dotnet [path-to-application]Options:-h|--help Display help.--info Display .NET information.--list-sdks Display the installed SDKs.--list-runtimes Display the installed runtimes.path-to-application:The path to an application .dll file to execute.
Se tudo estiver certo, selecione o botão Continuar abaixo para ir para a próxima etapa.
Encontrou um erro?
Se você receber um erro o "dotnet" não é reconhecido como um comando interno ou externo, verifique se você abriu um novo terminal do VS Code. Se a reinicialização do VS Code ou a reinicialização do computador não resolver o problema, use o botão Encontrei um problema para obter ajuda para corrigir o problema.
Criar seu aplicativo
Abra a paleta de comandos no VS Code pressionando CTRL+SHIFT+P.
Abra a paleta de comandos no VS Code pressionando CMD+SHIFT+P.
Digite .NET: para ver os comandos que você pode executar com o Kit de Desenvolvimento em C#.
Localize e selecione .NET: Novo Projeto para criar um novo projeto .NET.
Role para baixo e selecione Blazor Web App.
Escolha o local da pasta em que você deseja salvar seu projeto.
Nomeie o projeto BlazorApp na paleta de comandos quando solicitado. Pressione Enter para confirmar.
Habilite a Confiança do Workspace marcando a caixa e selecionando Sim, eu confio nos autores.
Se você tiver uma Assinatura do Visual Studio, entre na sua conta. Se você não vir um prompt, clique no ícone C# na barra de status do VS Code, na parte inferior direita da janela.
Na Barra Lateral, certifique-se de que o VS Code Explorer esteja aberto. Aqui, você verá a pasta BlazorApp e o Gerenciador de Soluções.Acompanhe o vídeo abaixo para: recolher a pasta BlazorApp, abrir o projeto Gerenciador de Soluções, abrir o projeto BlazorApp e arrastar e soltar o Gerenciador de Soluções mais para cima.
Recolha a pasta BlazorApp no VS Code Explorer.
Clique na divisa à esquerda do Gerenciador de Soluções para expandi-lo.
Clique na divisa à esquerda do projeto do BlazorApp no Gerenciador de Soluções para expandi-lo.
Arraste e solte o Gerenciador de Soluções abaixo de BlazorApp.
O seu projeto foi criado e carregado no Visual Studio Code. Dê uma olhada no conteúdo do seu projeto usando o Gerenciador de Soluções.
Vários arquivos foram criados para fornecer a você um aplicativo Blazor simples pronto para ser executado.
Program.cs é o ponto de entrada para o aplicativo que inicia o servidor e onde você configura os serviços de aplicativo e middleware.
Dentro do diretório Components:
O App.razor é o componente raiz do aplicativo.
Routes.razor configura o roteador Blazor.
O diretório Pages contém algumas páginas da Web de exemplo para o aplicativo.
BlazorApp.csproj define o projeto do aplicativo e suas dependências. Ele pode ser exibido clicando duas vezes no nó do projeto BlazorApp no Gerenciador de Soluções.
O arquivo launchSettings.json dentro do diretório Properties define diferentes configurações de perfil para o ambiente de desenvolvimento local. Um número de porta é atribuído automaticamente na criação do projeto e salvo neste arquivo.
Se tudo estiver certo, selecione o botão Continuar abaixo para ir para a próxima etapa.
Executar seu aplicativo
Selecione o ícone Executar e depurar na Barra de Atividades no lado esquerdo do workspace.
Selecione o botão Executar e depurar.
O Visual Studio Code abrirá um menu de configurações de inicialização. Selecione C#: BlazorApp [Configuração Padrão].
Em seguida, você precisa selecionar um depurador. Selecione C#.
Aguarde até que o aplicativo seja iniciado no navegador. Após acessar a página a seguir, você terá executado com êxito seu primeiro aplicativo Blazor!
Você pode parar o aplicativo a qualquer momento clicando no botão Parar na barra de ferramentas superior.
Para executar novamente o aplicativo, selecione o menu suspenso à direita do botão Executar no canto superior direito e selecione Executar projeto associado a este arquivo.
A página exibida é definida pelo arquivo Home.razor localizado no diretório Components/Pages. Esta é a aparência do seu conteúdo:
Components/Pages/Home.razor
@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.
Ele já contém o código que o define como a página inicial e exibe o texto Hello, world! e Welcome to your new app. O componente PageTitle define o título da página atual para que ele seja exibido na guia do navegador.
Encontrou um erro?
Se você receber uma mensagem de erro dizendo "Sua conexão não é privada" com o código de erro NET::ERR_CERT_INVALID, tente reiniciar todas as janelas do navegador para que o novo certificado possa ser obtido pelo navegador e execute o aplicativo novamente.
Se o problema não for resolvido, selecione o botão Ocorreu um problema abaixo para obter ajuda para corrigir o problema.
Experimente o contador
No aplicativo em execução, navegue até a página Contador clicando na guia Contador na barra lateral à esquerda. A página a seguir deve ser exibida:
Selecione o botão Clique em mim para incrementar a contagem sem uma atualização de página. Incrementar um contador em uma página da Web normalmente requer escrever JavaScript, mas com o Blazor, você pode usar C#.
Você pode encontrar a implementação do componente Counter no arquivo Counter.razor localizado no diretório Components/Pages.
Uma solicitação de /counter no navegador, conforme especificado pela diretiva @page na parte superior, faz com que o componente Counter renderize seu conteúdo. A diretiva @rendermode habilita a renderização interativa do servidor no componente para que ele possa manipular os eventos de interface do usuário do navegador.
Sempre que o botão clicar em mim é selecionado:
O evento onclick é acionado.
O método IncrementCount é chamado.
O currentCount é incrementado.
O componente é renderizado para mostrar a quantidade atualizada.
Adicionar um componente
Cada um dos arquivos .razor define um componente de interface do usuário que pode ser reutilizado.
Abra o arquivo Home.razor no Visual Studio. O arquivo Home.razor já existe e foi criado quando você criou o projeto. Ele está localizado na pasta Components/Pages no diretório BlazorApp criado anteriormente.
Abra o arquivo Home.razor em um editor de texto dHome.razor sua escolha. O arquivo Home.razor já existe e foi criado quando você executou o comando dotnet new. Ele está localizado na pasta Components/Pages no diretório BlazorApp criado anteriormente.
Adicione um componente Counter à página Inicial do aplicativo adicionando um elemento <Counter /> ao final do arquivo Home.razor.
Components/Pages/Home.razor
@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<Counter />
Execute novamente o aplicativo para ver as alterações. O componente Counter será exibido na página inicial.
Depois que essa alteração for salva, o comando dotnet watch aplicará a alteração ao aplicativo em execução para que o componente Counter seja exibido na home page.
Modificar um componente
Os parâmetros de componente são especificados usando atributos ou conteúdo filho, que permitem definir propriedades no componente filho. Defina um parâmetro no componente Counter para especificar o quanto ele é incrementado a cada clique no botão:
Adicione uma propriedade pública para IncrementAmount com um atributo [Parameter].
Altere o método IncrementCount para usar IncrementAmount ao incrementar o valor de currentCount.
O código a seguir mostra como obtê-lo. As linhas realçadas mostram as alterações.
Em Home.razor, atualize o elemento <Counter> para adicionar um atributo IncrementAmount que altera o valor do incremento para dez, conforme mostrado pela linha realçada no código a seguir:
Components/Pages/Home.razor
@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<Counter IncrementAmount="10" />
Aplique a alteração no aplicativo ao clicar no botão Recarga Dinâmica. O componente Home já tem seu respectivo contador que aumenta em dez cada vez que o botão Click me é selecionado, conforme mostrado na imagem a seguir. O componente Counter (Counter.razor) no /counter continua a ser incrementado em um.
O componente Home já tem seu respectivo contador que aumenta em dez cada vez que o botão Click me é selecionado, conforme mostrado na imagem a seguir. O componente Counter (Counter.razor) no /counter continua a ser incrementado em um.
Próximas etapas
Parabéns, você criou e executou seu primeiro aplicativo Blazor!
Continuar aprendendo
Agora que você tem as noções básicas, continue criando seu primeiro aplicativo Blazor com o módulo de aprendizado autoguiado do Blazor no Microsoft Learn onde você criará um aplicativo de lista de tarefas pendentes.
