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 fornece o CSS, imagens e HTML atuais de seu site antigo para trabalhar.

Note

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.

Este módulo usa o SDK do .NET 9.0. Certifique-se de ter o .NET 9.0 instalado executando o seguinte comando em seu terminal de comando preferencial:

dotnet --list-sdks

Uma saída semelhante ao seguinte exemplo aparece:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

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

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

Criar um aplicativo Blazor

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 blazor -o BlazingPizza

    Este comando cria um novo projeto de servidor Blazor em uma pasta chamada BlazingPizza.

  5. Selecione Arquivo>Abrir pasta.

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

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

Testar a sua 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.

    Screenshot showing the debugging window in Visual Studio Code.Captura de tela mostrando a janela de depuração no Visual Studio Code.

  3. Para parar o aplicativo, selecione Shift + F5.

Baixar os ativos de Blazing Pizza e os arquivos iniciais

Clone os arquivos de projeto de aplicativo Blazor existentes de suas equipes do repositório 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.

    Screenshot showing the starter Blazing Pizza app.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 explorador de arquivos do Visual Studio Code, 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.

    Quando o aplicativo é compilado e executado, você não vê nada. 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.

    Screenshot showing a list of blazing pizzas.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. Nos exercícios a seguir, você aprimora esse componente.