Blazor Wasm - Convertendo dólar para real

  Neste artigo vou vamos criar uma aplicação Blazor WebAssembly para converter dólar para real usando o serviço oferecido pel API da ExchangeRate-API.

A ExchangeRate-API é uma API de terceiros que fornece informações sobre taxas de câmbio entre moedas. Ela permite que os desenvolvedores acessem taxas de câmbio atualizadas, histórico de taxas de câmbio, conversões de moeda e muito mais.

Com a ExchangeRate-API, você pode obter taxas de câmbio em tempo real e históricas entre várias moedas. Ela suporta uma ampla gama de moedas e oferece recursos adicionais, como conversões de valores em várias moedas e suporte para diferentes fontes de dados de taxas de câmbio.

Para usar a ExchangeRate-API, você geralmente precisa se inscrever em um plano, que pode variar de acordo com os recursos e a quantidade de chamadas à API permitidas. A API normalmente é acessada por meio de chamadas HTTP usando métodos como GET, POST, etc., e as respostas são retornadas em formatos como JSON.

Ao integrar a ExchangeRate-API em seu aplicativo Blazor WebAssembly ou qualquer outro aplicativo, você pode aproveitar as informações sobre taxas de câmbio para fornecer recursos como conversão de moeda, exibição de gráficos de tendências de câmbio e muito mais.

Neste artigo vamos acessar o serviço desta API e para isso vamos ter que obter uma chave de acesso. Acesse o endereço https://www.exchangerate-api.com/ , informe o seu email clique no botão Get Free Key :

A seguir registre uma senha e você vai receber uma chave de acesso que vamos chamar de ApiKey:

Você obtêm também um exemplo de um request usando a chave de acesso e a quantidade de request grátis que você ainda possui.

Para obter mais informações sobre como usar os serviços consulte a documentação em : https://www.exchangerate-api.com/docs/overview

A forma geral da URL para acessar o serviço da API para uma determinada moeda é a seguinte:

 var apiUrl = $"https://v6.exchangerate-api.com/v6/YOUR_API_KEY/latest/{baseCurrency}";

Agora vamos criar nossa aplicação Blazor Web Assembly no VS 2022.

Criando a aplicação : BlazorCambio

Vamos abrir o Visual Studio 2022 clicar em Create a new Project e selecionar o template Blazor WebAssembly app :

Informe o nome BlazorCambio e defina as seguintes configurações:

Vamos incluir no projeto os pacotes:

Vamos usar estes pacotes para acessar o arquivo de configuração e criar uma instância do serviço para obter a chave de acesso.

Vamos limpar o projeto removendo os componentes que não vamos usar e deixar apenas o componente Index.razor.

Vamos incluir a imagem cambio1.jpg na pasta wwwroot dentro de uma pasta images do projeto e ajustar o código do componente Index.razor para exibir esta imagem:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Câmbio</h1>

<img src="/cambio1.jpg" width="515" height="250"/>

 

A seguir vamos ajustar o código do componente NavMenu.razor para exibir o menu para Câmbio Dólar-Real:

...
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
<nav class="flex-column">
   <div class="nav-item px-3">
      <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
          <span class="oi oi-home" aria-hidden="true"></span> Home
      </NavLink>
   </div>
   <div class="nav-item px-3">
      <NavLink class="nav-link" href="cambio">
         <span class="oi oi-plus" aria-hidden="true"></span> Câmbio Dólar-Real
      </NavLink>
    </div>
</nav>
</div>
...

A seguir vamos incluir na pasta wwwroot um arquivo de configuração appsettings.json onde vamos incluir as informações da chave de acesso :

{
 "ApiConfiguration": {
     "ApiKey": "<sua_chave_de_acesso>"
   }
}

Agora vamos criar uma pasta Services no projeto e nesta pasta criar a classe ApiConfiguration:

public class ApiConfiguration
{
   public string? ApiKey { get; set; }
}

Na classe Program vamos configurar o serviço para obter a chave de acesso e criar um endereço

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

//lê o arquivo de configuração e obtem a ApiKey
var exchangeApiKey = builder.Configuration["ApiConfiguration:ApiKey"];

builder.Services.Configure<ApiConfiguration>(options =>
{ 
   options.ApiKey = exchangeApiKey;
});

builder.Services.AddSingleton<ApiConfiguration>(sp =>
{
   var apiConfig = sp.GetRequiredService<IOptions<ApiConfiguration>>().Value;
   return apiConfig;
});

builder.Services.AddHttpClient(nameof(ExchangeService), client =>
{
   client.BaseAddress = new Uri("https://v6.exchangerate-api.com/");
});

builder.Services.AddScoped<IExchangeService, ExchangeService>();

await builder.Build().RunAsync();
 

Vamos entender o código acima:

  1. var exchangeApiKey = builder.Configuration["ApiConfiguration:ApiKey"];
    Obtém o valor da chave ApiKey da seção ApiConfiguration do arquivo de configuração (appsettings.json ou outro arquivo de configuração) usando a propriedade Configuration do WebAssemblyHostBuilder. Essa chave é usada para armazenar a chave da API da ExchangeRate-API.
     
  2. builder.Services.Configure<ApiConfiguration>(options => { options.ApiKey = exchangeApiKey; });
    Configura a instância de ApiConfiguration com a chave da API obtida no passo anterior. O método Configure é usado para definir os valores das propriedades da classe ApiConfiguration.
     
  3. builder.Services.AddSingleton<ApiConfiguration>(sp => { var apiConfig = sp.GetRequiredService<IOptions<ApiConfiguration>>().Value; return apiConfig; });:
    Registra a instância configurada de ApiConfiguration como um serviço singleton no contêiner de injeção de dependência. O método GetRequiredService<IOptions<ApiConfiguration>>().Value é usado para obter a instância configurada de ApiConfiguration do contêiner.
     
  4. builder.Services.AddHttpClient(nameof(ExchangeService), client => { client.BaseAddress = new Uri("https://v6.exchangerate-api.com/"); });
    Registra um cliente HTTP nomeado (usando o nome nameof(ExchangeService)) no contêiner de injeção de dependência. Esse cliente HTTP será usado para fazer chamadas à API da ExchangeRate-API. A propriedade BaseAddress é definida como a URL base da API.
     
  5. builder.Services.AddScoped<IExchangeService, ExchangeService>();:
    Registra o serviço ExchangeService como um serviço de escopo no contêiner de injeção de dependência. O serviço ExchangeService é implementado pela classe ExchangeService e fornece métodos para acessar a API da ExchangeRate-API.

Agora precisamos criar o serviço para acessar a API e realizar o cãmbio de dólar para real. Antes vamos criar um DTO para obter a resposta da API no serviço.

Para isso crie uma pasta DTOs no projeto e nesta pasta cria a classe ExchangeRateDTO:

public class ExchangeRateDTO
{
   public ExchangeRateDTO()
   {
    Rates = new Dictionary<string, double>();
   }

   [JsonPropertyName("conversion_rates")]
   public Dictionary<string, double> Rates { get; set; }

}

Esta classe ExchangeRateDTO é usada para representar as taxas de câmbio retornadas pela ExchangeRate-API, e, possui uma propriedade Rates, que é um dicionário onde as chaves são as moedas e os valores são as taxas de câmbio correspondentes.

Agora, na pasta Services vamos criar a interface IExchangeService e a classe concreta ExchangeService onde vamos implementar a lógica para realizar o câmbio.

1- IExchangeService

public interface IExchangeService
{
  Task<double> ConverteDolarReal(double dolar);
}

2- ExchangeService

using BlazorCambio.DTOs;
using System.Text.Json;

namespace BlazorCambio.Services;

public class ExchangeService : IExchangeService
{

private readonly HttpClient httpClient;
private readonly ApiConfiguration _apiKeyConfiguration;

   public ExchangeService(IHttpClientFactory httpClientFactory,
                        ApiConfiguration apiKeyConfiguration)
   {
     httpClient = httpClientFactory.CreateClient(nameof(ExchangeService));
     _apiKeyConfiguration = apiKeyConfiguration;
   }

   public async Task<double> ConverteDolarReal(double dolar)
   {
      using var httpResponse = await

      httpClient.GetAsync($"/v6/{_apiKeyConfiguration.ApiKey}/latest/USD");

      if (httpResponse.StatusCode != System.Net.HttpStatusCode.OK)
      {
        var errorResult = await httpResponse.Content.ReadAsStringAsync();
        throw new Exception(errorResult);
      }

      var jsonString = await httpResponse.Content.ReadAsStringAsync();
      var resultado = JsonSerializer.Deserialize<ExchangeRateDTO>(jsonString);
      var valorRealParaUmDolar = resultado.Rates["BRL"];
      var resultInBrl = Math.Round(dolar * valorRealParaUmDolar, 2);
      return resultInBrl;
   }
}

Criando o componente Cambio.razor

Vamos agora criar na pasta Pages o componente Cambio.razor com o seguinte código:

@page "/cambio"
@inject IExchangeService ExchangeService

<PageTitle>ConverteDolarReal</PageTitle>

<h2>Converter USD para BRL</h2>

<div class="row g-2 align-items-center">
    <div class="col-sm-6">
        <label style="font-size: 20px; font-weight:bold">Valor em dolar (U$)</label>
            <input @bind-value="Dolar" type="number" class="form-control"
                      style="font-size: 20px; font-weight:bold" />
    </div>
    <div class="col-sm">
        <button @onclick="ConverterParaReal" disabled="@IsLoading"
            style="margin-top: 25px" class="btn btn-primary">
            Converter para real
        </button>
    </div>
</div>

@if(IsLoading)
{
    <div class="alert alert-primary">
        Carregando...
    </div>
}
else
{
    if(Real.HasValue)
    {
        <div style="margin-top: 25px;font-size: 30px; font-weight:bold"
                                           class="alert alert-primary">
           Valor em Reais : @Real?.ToString("C")
        </div>
    }
}

@if(string.IsNullOrWhiteSpace(ErrorMessage) is false)
{
    <div style="margin-top: 25px;font-size: 20px; font-weight:bold"
              class="alert alert-danger">
        @ErrorMessage
    </div>
}

@code{
    bool IsLoading;
    double? Dolar;
    double? Real;
    string? ErrorMessage;

    async Task ConverterParaReal()
    {
        if(Dolar is null || Dolar <= 0)
        {
            Real = null;
            ErrorMessage = "O valor em dólar deve ser maior que zero.";
            StateHasChanged();
            return;
        }

        ErrorMessage = string.Empty;
        IsLoading = true;
        Real = null;
        StateHasChanged();
        try
        {
            Real = await ExchangeService.ConverteDolarReal(Dolar.Value);
            ErrorMessage = string.Empty;
        }
        catch(Exception ex)
        {
            ErrorMessage = ex.Message;
        }
        finally
        {
            IsLoading = false;
            StateHasChanged();
        }
    }
}

Executando o projeto iremos obter o seguinte resultado:

1- Página inicial

2- Página de câmbio

Com isso vimos como é simples consumir uma API usando o Blazor.

Pegue o projeto aqui:  BlazorCambio.zip

"Jesus dizia, pois, aos judeus que criam nele: Se vós permanecerdes na minha palavra, verdadeiramente sereis meus discípulos; E conhecereis a verdade, e a verdade vos libertará."
João 8:31-32

Referências:

José Carlos Macoratti