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 pizzas dos pedidos acidentalmente, a pizzaria deseja que você adicione um prompt de confirmação para remoção de item.

A pizzaria também quer que os clientes vejam como o pedido está progredindo em tempo real. Você precisa atualizar a página de detalhes do pedido para consultar continuamente o status do pedido e fornecer comentários aos clientes de 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

Para usar o Blazor, verifique se você tem o SDK do .NET 8.0 instalado. Para obter mais informações, confira Verificar se tudo foi instalado corretamente.

  1. Abra o Visual Studio Code e abra o terminal integrado selecionando Terminal>Novo Terminal no menu superior.

  2. No terminal, acesse o diretório em que deseja criar o projeto.

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

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

  4. Na barra de menus superior, selecione Arquivo>Abrir Pasta.

  5. Na caixa de diálogo Abrir pasta, procure a pasta BlazingPizza e clique em Selecionar Pasta.

    Se o Visual Studio Code avisar sobre ativos ausentes ou dependências não resolvidas, selecione Sim ou Restaurar.

  6. Para executar o aplicativo e verificar se tudo está funcionando corretamente, pressione F5 ou selecione Executar>Iniciar Depuração.

  7. No aplicativo Web, selecione algumas pizzas e adicione-as ao pedido. Com algumas pizzas na lista de pedidos, selecione o X ao lado de uma das pizzas e verifique se o item desaparece sem prompt.

  8. Pressione Shift+F5 ou selecione Executar>Parar Depuração para interromper o aplicativo.

Refatorar o processo de pedido

Para usar a interoperabilidade JS, injete a abstração IJSRuntime.

  1. No Explorer do Visual Studio Code, expanda Páginas e selecione Index.razor.

  2. No arquivo Index.razor, após a instrução @inject OrderState OrderState, adicione a injeção IJSRuntime da seguinte maneira.

    @inject OrderState OrderState
@inject IJSRuntime JavaScript

  3. Atualmente, o evento onclick para a funcionalidade remover 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>

  4. Na diretiva @code 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 método IJSRuntime.InvokeAsync para chamar a função confirm no lado do cliente. A resposta da chamada retorna um valor bool. Se o resultado da caixa de diálogo de confirmação for true, a pizza será removida do pedido.

  5. Pressione F5 ou selecione Executar>Iniciar Depuração.

  6. No aplicativo, adicione algumas pizzas ao pedido.

  7. Com algumas pizzas no pedido, selecione o X ao lado de uma das pizzas. Uma caixa de diálogo de confirmação JavaScript padrão é exibida.

    Screenshot of the default JavaScript confirm dialog.

  8. Selecione OK e verifique se a pizza foi removida do pedido. Selecione o X ao lado de outra pizza, clique em Cancelar na caixa de diálogo de confirmação e verifique se a pizza permanece no pedido.

  9. Pressione Shift+F5 ou selecione Executar>Parar Depuração para interromper o aplicativo.

Adicionar uma biblioteca JavaScript de terceiros a um aplicativo Blazor

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

  1. No Explorer do Visual Studio Code, expanda Páginas e selecione _Host.cshtml.

  2. No final do arquivo _Host.cshtml, após a linha <script src="_framework/blazor.server.js"></script>, mas antes da linha </body>, adicione o elemento script a seguir 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 chamada no lado do cliente.

  3. Para usar a nova biblioteca, atualize o método RemovePizzaConfirmation 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 função swal é semelhante a confirm. A maior parte da atualização altera como a função recebe parâmetros. O SweetAlert aceita um objeto JSON que inclui todas as configurações necessárias.

  4. No Visual Studio Code, pressione F5 ou selecione Executar>Iniciar Depuração.

  5. Verifique se a caixa de diálogo confirm agora tem dois botões: Não, deixar a pizza no pedido e Sim, remover a pizza e se eles funcionam conforme o esperado.

    Screenshot showing the SweetAlert dialog box.

  6. Pressione Shift+F5 ou selecione Executar>Parar Depuração para interromper o aplicativo.

Atualizar a página de pedido para mostrar o status do pedido em tempo real

Depois que o cliente faz um pedido de pizza, a página Meus Pedidos usa o componente OrderDetail para mostrar o status atual do pedido. A pizzaria quer que os clientes vejam como o 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.

  1. No Explorer do Visual Studio Code, expanda Páginas e selecione OrderDetail.razor.

  2. No arquivo OrderDetail.razor, adicione a declaração a seguir na parte superior do componente, na última instrução @inject.

    @implements IDisposable

    A declaração @implements permite que você defina um método Dispose.

  3. Adicione um girador para informar ao cliente que a página está sendo atualizada. Em <div class="track-order-details">, acima da instrução @foreach, 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>
}

  4. 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));

  5. Substitua o método OnParametersSetAsync pelo código a seguir:

    protected override async Task OnParametersSetAsync() =>
    await GetLatestOrderStatusUpdatesAsync();

    Esse código agora chama o método GetLatestOrderStatusUpdatesAsync para atualizar o status do pedido.

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

    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 componente OrderDetail inicia a sondagem depois que a página é renderizada e é interrompido quando o pedido é 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 ícone giratório animado é removido da página e o status final do pedido é exibido.

  7. No Visual Studio Code, pressione F5 ou selecione Executar>Iniciar Depuração.

  8. No aplicativo, peça uma pizza. Acesse a tela Meus Pedidos e verifique se o ponto vermelho animado aparece enquanto o pedido está incompleto e desaparece quando o status mostra Entregue.

    Animation showing the order status changing in real-time.

  9. Pressione Shift+F5 ou selecione Executar>Parar Depuração para interromper o aplicativo.