Exercício – Usar uma biblioteca JavaScript em um aplicativo Blazor

10 minutos

Depois que um cliente adiciona uma pizza ao pedido, ele pode selecionar um ícone X para remover a pizza do pedido sem confirmação. Para impedir que os clientes removam acidentalmente pizzas de seus pedidos, a empresa de pizza quer que você adicione um prompt de confirmação para remoção de item.

A pizzaria também quer que os clientes vejam como seu pedido está progredindo em tempo real. Você precisa atualizar a página de detalhes do pedido para consultar de forma contínua o status do pedido e informar aos clientes que a página está sendo atualizada.

Neste exercício, você estende o aplicativo existente da empresa de entrega de pizza usando a interoperabilidade JS de um componente Blazor para chamar JavaScript no lado do cliente. Integre-se a uma biblioteca JavaScript de terceiros para aprimorar o pop-up de cancelamento e chamar um método Blazor do JavaScript para obter o status em tempo real de um pedido do cliente.

Clonar o aplicativo existente

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.

Para obter mais informações, consulte Criar seu primeiro aplicativo Web com o ASP.NET Core usando Blazor.

Abra o Visual Studio Code e abra um terminal integrado selecionando Terminal>Novo Terminal no menu superior.
No terminal, altere para o diretório onde você deseja criar o projeto.

Execute o comando a seguir para clonar o aplicativo do GitHub para um subdiretório local.

git clone https://github.com/MicrosoftDocs/mslearn-build-interactive-components-blazor.git BlazingPizza

Na barra de menus superior, selecione Arquivo>Abrir Pasta.
Na caixa de diálogo Abrir Pasta , navegue até a pasta BlazingPizza e selecione Selecionar Pasta.

Se o Visual Studio Code avisar sobre ativos ausentes ou dependências não resolvidas, selecione Sim ou Restaurar.
Para executar o aplicativo e verificar se tudo está funcionando corretamente, pressione F5 ou selecione Executar>Iniciar Depuração.
No aplicativo Web, selecione algumas pizzas e adicione-as ao seu pedido. Com algumas pizzas em sua lista de pedidos, selecione o X ao lado de uma das pizzas e verifique se o item desaparece sem qualquer prompt.
Pressione Shift+F5 ou selecione Executar>Parar Depuração para interromper o aplicativo.

Refatorar o processo de pedido

Para usar a interoperabilidade do JS, você injeta a abstração IJSRuntime.

No Explorador do Visual Studio Code, expanda Páginas e selecione Index.razor.
No arquivo Index.razor , após a @inject OrderState OrderState instrução, adicione a IJSRuntime injeção da seguinte maneira.
```
@inject OrderState OrderState
@inject IJSRuntime JavaScript
```
Atualmente, o evento onclick para a funcionalidade de remover uma pizza chama o método OrderState.RemoveConfiguredPizza(configuredPizza)) diretamente. Substitua todo o elemento <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">❌</a> pelo seguinte código:
```
<button type="button" class="close text-danger" aria-label="Close"
     @onclick="@(async () => await RemovePizzaConfirmation(configuredPizza))">
     <span aria-hidden="true">&times;</span>
</button>
```
@code Na diretiva no final do arquivo, adicione um novo método para chamar a função JavaScript confirm nativa. Se o cliente selecionar OK no prompt, o método chamará OrderState.RemoveConfiguredPizza para remover a pizza do pedido. Caso contrário, a pizza permanecerá no pedido.
```
async Task RemovePizzaConfirmation(Pizza removePizza)
{
    if (await JavaScript.InvokeAsync<bool>(
        "confirm",
        $"""Do you want to remove the "{removePizza.Special!.Name}" from your order?"""))
    {
        OrderState.RemoveConfiguredPizza(removePizza);
    }
}
```
O servidor usa o IJSRuntime.InvokeAsync método para chamar a confirm função no lado do cliente. A resposta da chamada retorna um bool valor. Se o resultado da caixa de diálogo de confirmação for true, a pizza será removida do pedido.
Pressione F5 ou selecione Executar>Iniciar Depuração.
No aplicativo, adicione algumas pizzas ao seu pedido.
Com algumas pizzas em seu pedido, selecione o X ao lado de uma das pizzas. Uma caixa de diálogo de confirmação padrão do JavaScript é exibida.
Selecione OK e verifique se a pizza foi removida do pedido. Selecione X ao lado de outra pizza, selecione Cancelar na caixa de diálogo de confirmação e verifique se a pizza permanece em seu pedido.
Pressione Shift+F5 ou selecione Executar>Parar Depuração para interromper o aplicativo.

Adicionar uma biblioteca JavaScript de terceiros a um aplicativo Blazor

A empresa de pizza quer um texto mais claro nos botões da caixa de diálogo de confirmação e deseja usar sua identidade visual e estilo na caixa de diálogo. Depois de algumas pesquisas, você decide usar uma pequena biblioteca JavaScript chamada SweetAlert como uma boa substituição para a caixa de diálogo padrão.

No Explorador do Visual Studio Code, expanda Páginas e selecione _Host.cshtml.
No final do arquivo _Host.cshtml , após a <script src="_framework/blazor.server.js"></script> linha, mas antes da </body> linha, adicione o seguinte script elemento para incluir a biblioteca SweetAlert.
```
<script src="https://cdn.jsdelivr.net/npm/sweetalert@latest/dist/sweetalert.min.js"></script>
```
A biblioteca SweetAlert agora está disponível para ser utilizada no lado do cliente.

Para usar a nova biblioteca, atualize o RemovePizzaConfirmation método no arquivo Index.razor da seguinte maneira.

async Task RemovePizzaConfirmation(Pizza removePizza)
{
    var messageParams = new
    {
        title = "Remove Pizza?",
        text = $"""Do you want to remove the "{removePizza.Special!.Name}" from your order?""",
        icon = "warning",
        buttons = new
        {
            abort = new { text = "No, leave it in my order", value = false },
            confirm = new { text = "Yes, remove pizza", value = true }
        },
        dangerMode = true
    };

    if (await JavaScript.InvokeAsync<bool>("swal", messageParams))
    {
        OrderState.RemoveConfiguredPizza(removePizza);
    }
}

O nome "swal" é o identificador usado para a função JavaScript proveniente da referência de sweetalert.js de terceiros. O código para chamar a swal função é semelhante a confirm. A maior parte da atualização está em como a função recebe parâmetros. SweetAlert aceita um objeto JSON que inclui todas as configurações necessárias.

No Visual Studio Code, pressione F5 ou selecione Executar>Iniciar Depuração.
Verifique se a confirm caixa de diálogo agora tem dois botões que dizem Não, deixe-o no meu pedido e Sim, remova pizza e se eles funcionam conforme o esperado.
Pressione Shift+F5 ou selecione Executar>Parar Depuração para interromper o aplicativo.

Mostrar o status do pedido em tempo real na página do pedido

Depois que um cliente faz um pedido de pizza, a página Meus Pedidos usa o OrderDetail componente para mostrar o status atual do pedido. A empresa de pizza quer que os clientes vejam como seu pedido está progredindo em tempo real. Você atualiza o componente para chamar um método .NET do JavaScript e obter continuamente o status do pedido até que ele seja entregue.

No Explorador do Visual Studio Code, expanda Páginas e selecione OrderDetail.razor.
No arquivo OrderDetail.razor, adicione a declaração a seguir na parte superior do componente, logo abaixo da última instrução @inject.
```
@implements IDisposable
```
Essa @implements declaração permite que você defina um Dispose método.
Adicione um spinner à página para fornecer ao cliente um feedback de que a página está em atualização. Em <div class="track-order-details">, acima da @foreach instrução, adicione o seguinte código:
```
@if (IsOrderIncomplete)
{
    <div class="spinner-grow text-danger float-right" role="status">
        <span class="sr-only">Checking your order status...</span>
    </div>
}
```

Na diretiva @code, na declaração de propriedade OrderId, adicione os membros a seguir.

bool IsOrderIncomplete =>
    orderWithStatus is null || orderWithStatus.IsDelivered == false;

PeriodicTimer timer = new(TimeSpan.FromSeconds(3));

Substitua o método existente OnParametersSetAsync pelo seguinte código:
```
protected override async Task OnParametersSetAsync() =>
    await GetLatestOrderStatusUpdatesAsync();
```
O código agora chama o GetLatestOrderStatusUpdatesAsync método para atualizar o status do pedido.

Adicione os métodos a seguir após o método atualizado OnParametersSetAsync .

protected override Task OnAfterRenderAsync(bool firstRender) =>
    firstRender ? StartPollingTimerAsync() : Task.CompletedTask;

async Task GetLatestOrderStatusUpdatesAsync()
{
    try
    {
        orderWithStatus = await HttpClient.GetFromJsonAsync<OrderWithStatus>(
            $"{NavigationManager.BaseUri}orders/{OrderId}");
    }
    catch (Exception ex)
    {
        invalidOrder = true;
        Console.Error.WriteLine(ex);
    }
}

async Task StartPollingTimerAsync()
{
    while (IsOrderIncomplete && await timer.WaitForNextTickAsync())
    {
        await GetLatestOrderStatusUpdatesAsync();
        StateHasChanged();
    }
}

public void Dispose() => timer.Dispose();

O OrderDetail componente inicia a sondagem após a renderização da página e interrompe a sondagem quando a ordem é entregue. Embora o status do pedido seja incompleto, a função StartPollingTimerAsync usa um PeriodicTimer para aguardar assincronamente o próximo tique. Quando o pedido é entregue, o spinner animado é removido e a página mostra o status da ordem final.

No Visual Studio Code, pressione F5 ou selecione Executar>Iniciar Depuração.
No aplicativo, peça uma pizza. Vá para a tela Meus Pedidos e verifique se o ponto vermelho animado aparece enquanto a ordem está incompleta e desaparece quando o status mostra Entregue.
Pressione Shift+F5 ou selecione Executar>Parar Depuração para interromper o aplicativo.

Comentários

Esta página foi útil?