Exercício: criar uma interface do usuário com componentes Blazor

  • 5 minutos

Neste exercício, você começará a criar um novo aplicativo Blazing Pizza para a empresa de entrega de pizza. A empresa forneceu o CSS, as imagens e o HTML atuais do site antigo para o trabalho.

Observação

Este módulo usa a CLI do .NET e o Visual Studio Code para o desenvolvimento local. Depois de concluir este módulo, você poderá aplicar os conceitos usando o Visual Studio para Windows ou o Visual Studio para Mac (macOS). Para o desenvolvimento contínuo, você pode usar o Visual Studio Code para Windows, Linux e macOS.

Se você ainda não criou um aplicativo Blazor, siga as instruções de instalação do Blazor para instalar a versão correta do .NET e verificar se o computador está configurado corretamente. Pare na etapa Criar seu aplicativo.

Criar um aplicativo Blazor

Este módulo usa o SDK do .NET 6.0. Verifique se tem o .NET 6.0 instalado, executando o seguinte comando em seu terminal preferido:

dotnet --list-sdks

Saída semelhante à seguinte exibida:

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

Verifique se uma versão que começa com 6 está listada. Se nenhum estiver listado ou o comando não for encontrado, instale o SDK do .NET 6.0 mais recente.

O .NET permite que você crie novos projetos com qualquer versão do Visual Studio ou comandos de terminal. Os exercícios a seguir mostram as etapas usando o terminal e o Visual Studio Code.

  1. Abra o Visual Studio Code.

  2. Abra o terminal integrado no Visual Studio Code selecionando Exibir. Em seguida, no menu principal, escolha Terminal.

  3. No terminal, vá para onde você deseja criar o projeto.

  4. Execute o comando de terminal do dotnet:

    dotnet new blazorserver -o BlazingPizza --no-https true -f net6.0

    Este comando cria um novo projeto de servidor Blazor em uma pasta chamada BlazingPizza. Ele também informa o projeto para desabilitar o HTTPS.

  5. Selecione Arquivo>Abrir pasta.

  6. Na caixa de diálogo Abrir, vá para a pasta BlazingPizza e escolha Selecionar Pasta.

  7. O Visual Studio Code solicita a você a adição dos ativos necessários para compilar e depurar o projeto. Selecione Sim.

    Captura de tela mostrando a caixa de diálogo Ativos ausentes.

  8. O Visual Studio Code adiciona launch.json e tasks.json na pasta .vscode do seu projeto.

Esses arquivos permitem que você execute e depure seu aplicativo Blazor com as ferramentas de depuração do Visual Studio Code.

Testar a configuração

Você pode optar por usar o terminal ou o Visual Studio Code para executar seu aplicativo.

  1. Na janela do terminal, inicie o aplicativo Blazor com:

    dotnet watch

    Este comando compila e inicia o aplicativo. O comando watch informa ao dotnet para inspecionar a todos os seus arquivos de projeto. As alterações feitas nos arquivos de projetos disparam automaticamente uma recompilação e reiniciam seu aplicativo.

    O navegador padrão de seus computadores deve abrir uma nova página em http://localhost:5000.

  2. Para interromper o aplicativo, selecione Ctrl + C na janela do terminal.

Você também pode executar e depurar seu projeto com o Visual Studio Code.

  1. No Visual Studio Code, selecione F5. Ou, então, no menu Executar, selecione Iniciar Depuração.

    O aplicativo deve compilar e abrir uma nova página do navegador.

  2. O Visual Studio Code também muda para a janela Executar e Depurar, que permite a reinicialização ou interrupção do aplicativo.

    Captura de tela mostrando a janela de depuração no Visual Studio Code.

  3. Selecione Shift + F5 para interromper o aplicativo.

Baixar os ativos de Blazing Pizza e os arquivos iniciais

Agora, você clonará os arquivos de projeto do aplicativo Blazor existentes de suas equipes do repositório do GitHub.

  1. Exclua sua pasta BlazingPizza usando o explorador de arquivos ou no Visual Studio Code.

  2. No terminal, clone os arquivos de trabalho atuais em uma nova pasta BlazingPizza.

    git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza

  3. Execute a versão atual do aplicativo. Selecione F5.

    Captura de tela mostrando a inicialização do aplicativo Blazing Pizza.

Faça algumas pizzas

O componente Pages/Index.razor permite que os clientes selecionem e configurem as pizzas que desejam solicitar. O componente responde à URL raiz do aplicativo.

A equipe também criou classes para representar os modelos no aplicativo. Examine o modelo PizzaSpecial atual.

  1. No Visual Studio Code, no explorador de arquivos, expanda a pasta Modelo. Selecione PizzaSpecial.

    namespace BlazingPizza;

/// <summary>
/// Represents a pre-configured template for a pizza a user can order
/// </summary>
public class PizzaSpecial
{
    public int Id { get; set; }

    public string Name { get; set; }

    public decimal BasePrice { get; set; }

    public string Description { get; set; }

    public string ImageUrl { get; set; }

    public string GetFormattedBasePrice() => BasePrice.ToString("0.00");
}

    Observe que um pedido de pizza tem Name, BasePrice, Description e ImageUrl.

  2. No explorador de arquivos, expanda Páginas e selecione Index.razor.

    @page "/"

<h1>Blazing Pizzas</h1>

    No momento, há apenas uma única tag H1 para o título. Você adicionará código para criar pizzas especiais.

  3. Na tag <h1>, adicione este código C#:

    @code {
    List<PizzaSpecial> specials = new();

    protected override void OnInitialized()
    {
        specials.AddRange(new List<PizzaSpecial>
        {
            new PizzaSpecial { Name = "The Baconatorizor", BasePrice =  11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"},
            new PizzaSpecial { Name = "Buffalo chicken", BasePrice =  12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"},
            new PizzaSpecial { Name = "Veggie Delight", BasePrice =  11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"},
            new PizzaSpecial { Name = "Margherita", BasePrice =  9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"},
            new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice =  11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"},
            new PizzaSpecial { Name = "Classic pepperoni", BasePrice =  10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" }               
        });
    }
}

    O bloco @code cria uma matriz para conter as pizzas especiais. Quando a página é inicializada, ela adiciona seis pizzas à matriz.

  4. Selecione F5 ou Executar. Selecione Iniciar Depuração.

    O aplicativo será compilado e executado e você verá que nada mudou. O código não está sendo usado por nada no HTML do lado do cliente. Vamos corrigir isso.

  5. Selecione Shift + F5 ou selecione Parar Depuração.

  6. Em Index.razor, substitua <h1>Blazing Pizzas</h1> por este código:

    <div class="main">
  <h1>Blazing Pizzas</h1>
  <ul class="pizza-cards">
    @if (specials != null)
    {
      @foreach (var special in specials)
      {
        <li style="background-image: url('@special.ImageUrl')">
          <div class="pizza-info">
              <span class="title">@special.Name</span>
                  @special.Description
                <span class="price">@special.GetFormattedBasePrice()</span>
          </div>
        </li>
      }
    }
  </ul>
</div>

    Esse código combina HTML sem formatação com diretivas de loop e de acesso de membro. O loop @foreach cria uma tag <li> para cada pizza na matriz specials.

    Dentro do loop, cada pizza especial exibe seu nome, descrição, preço e imagem com diretivas de membro.

  7. Selecione F5 ou Executar. Selecione Iniciar Depuração.

    Captura de tela mostrando uma lista de pizzas flamejantees.

Agora você tem um componente base de pizza para permitir que os clientes peçam uma pizza. Você melhorará esse componente nos exercícios a seguir.