Exercício - Criar uma interface de usuário com componentes Blazor

5 minutos

Neste exercício, você começa a criar um novo aplicativo Blazing Pizza para a empresa de entrega de pizza. A empresa lhe fornece o CSS, imagens e HTML atuais do seu site antigo para você trabalhar.

Note

Este módulo usa a CLI do .NET e o Visual Studio Code para desenvolvimento local. Depois de concluir este módulo, você pode aplicar os conceitos usando o Visual Studio para Windows e o Visual Studio para Mac para macOS. Para 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 no seu terminal de comando preferido:

dotnet --list-sdks

Aparece uma saída semelhante ao exemplo seguinte:

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

Certifique-se de que 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 configuração do Blazor para instalar a versão correta do .NET e verifique se sua máquina está configurada corretamente. Pare na etapa Criar seu aplicativo .

Criar um novo aplicativo Blazor

O .NET permite criar 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.

Abre Visual Studio Code.
Abra o terminal integrado do Visual Studio Code selecionando View. Em seguida, no menu principal, selecione Terminal.
No terminal, vá onde você deseja criar o projeto.
Execute o comando dotnet terminal:
```
dotnet new blazor -o BlazingPizza
```
Este comando cria um novo projeto de servidor Blazor em uma pasta chamada BlazingPizza.
Selecione Abrir pasta Arquivo>.
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.

Teste a sua configuração

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

Na janela do terminal, inicie o aplicativo Blazor com:
```
dotnet watch
```
Este comando cria e, em seguida, inicia o aplicativo. O comando watch diz ao dotnet para observar todos os seus arquivos de projeto. Todas as alterações feitas nos arquivos de projeto acionam automaticamente uma reconstrução e, em seguida, reiniciam seu aplicativo.

O navegador padrão do seu computador irá abrir uma nova página em http://localhost:5000.
Para parar o aplicativo, selecione Ctrl + C na janela do terminal.

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

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

O aplicativo deve criar e abrir uma nova página do navegador.
O Visual Studio Code também alterna para a janela Executar e Depurar que permite reiniciar ou parar seu aplicativo.

Captura de tela mostrando a janela de depuração no Visual Studio Code.
Para parar o aplicativo, selecione Shift + F5.

Baixe os ativos e arquivos iniciais da Blazing Pizza

Clone os arquivos de projeto existentes do aplicativo Blazor de suas equipes a partir do repositório GitHub.

Exclua sua pasta BlazingPizza usando o explorador de arquivos ou no Visual Studio Code.
No terminal de comandos, clone os ficheiros de trabalho atuais para um novo diretório chamado BlazingPizza.
```
git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza
```
Execute a versão atual do aplicativo. Selecione F5.

Captura de ecrã mostrando a aplicação inicial Blazing Pizza.

Faça algumas pizzas

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

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

No explorador de arquivos do Visual Studio Code, expanda a pasta Modelo . Em seguida, 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 um Name, BasePrice, Description, e ImageUrl.

No explorador de ficheiros, expanda Páginas e, em seguida, selecione Index.razor.
```
@page "/"

<h1>Blazing Pizzas</h1>
```
No momento, há apenas uma única tag H1 para o título. Você vai inserir código para criar promoções de pizza.

Sob a <h1> tag, 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 @code bloco cria uma matriz para armazenar os especiais de pizza. Quando a página é inicializada, ela adiciona seis pizzas à matriz.

Selecione F5 ou selecione Executar. Em seguida, selecione Iniciar depuração.

Quando o aplicativo é compilado e executado, você percebe que não aparece nada. O código não está sendo usado por nada no HTML do lado do cliente. Vamos corrigir isso.
Selecione Shift + F5 ou selecione Stop Debugging.

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>

Este código combina HTML simples com estruturas de repetição e diretivas de acesso a membros. O @foreach loop cria um <li> tag para cada pizza no specials array.

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

Selecione F5 ou selecione Executar. Em seguida, selecione Iniciar depuração.

Captura de ecrã mostrando uma lista de pizzas ardentes.

Agora você tem um componente base de pizza para permitir que os clientes peçam uma pizza. Nos exercícios seguintes, você melhora esse componente.

Comentários

Esta página foi útil?