Consumindo uma API de cotação de ativos da bolsa de valores

Este artigo aborda dois temas muito interessantes e atuais, tanto do ponto de vista profissional, no tocante ao desenvolvimento de aplicações que consomem dados através de APIs, quanto pessoal, por tratar de um dos aspectos da gestão de investimentos, mais especificamente os ativos negociados na bolsa de valores.

Não vamos entrar em detalhes sobre o processo de negociação de ativos, mas demonstrar como uma aplicação que necessite de informações sobre cotações desses ativos pode obter esses dados através de uma API dentro do seu escopo de utilização.

Origem dos dados

Existem algumas opções disponíveis na internet que fornecem dados sobre ativos da bolsa, normalmente mediante a criação de um perfil e pagamento de alguma taxa. A própria B3 provê esse recurso através da sua página para desenvolvedores https://developers.b3.com.br.

Porém, como nosso objetivo aqui é apenas de estudo, não faz sentido pagar pelas informações, motivo pela qual vamos obtê-las através de um portal que fornece esses dados de maneira gratuita: O Alpha Vantage.

Obtendo uma chave (API Key) gratuita

Antes de começar a codificar, é necessário obter uma chave para acesso aos dados da API Alpha Vantage, a qual permite que você tenha acesso às informações sobre os ativos. Para isso, acesse o site https://www.alphavantage.co e clique sobre o botão “Get your free API Key Today”.

Você será direcionado à uma pequena tela de cadastro onde precisará responder algumas questões de perfil. Nesse caso, indiquei um perfil de estudante, já que estamos construindo um exemplo de estudo. Ao finalizar o seu cadastro, clique em “Get free API Key”.

Feito isso, você será direcionado a uma página que contém a sua chave, um código alfanumérico que você deve anotar, pois será utilizado pela sua aplicação para acesso aos dados de ativos da bolsa.

Desenvolvimento do Front-end

Você pode desenvolver o front-end utilizando as tecnologias e design de sua preferência. Para tornar esse exemplo mais simples, vamos utilizar aqui apenas HTML5, CSS3, JavaScript, Bootstrap e o Google Charts para criar os gráficos.

A página contém um mecanismo de busca onde o usuário deverá digitar o código do ativo desejado e clicar em “Pesquisar”. Logo abaixo, existem três DIVs distintas para exibir, respectivamente:

• Os dados das cinco últimas datas de negociação do ativo (Data, Abertura e Fechamento);

• Um gráfico de colunas com as informações de preços máximo, médio e mínimo do ativo no período de abrangência da série e dados (todos os dados da API);

• Um gráfico de linha exibindo todas as datas dos dados da API, contendo as séries referentes aos valores de abertura e de fechamento em cada data.

Obtendo os dados da API Alpha Vantage

Para alimentar as informações a serem exibidas ao usuário, precisamos então consumir e processar as informações provenientes da API Alpha Vantage, buscando o ativo indicado no form de pesquisa.

O código do ativo deve ser informado conforme negociado na bolsa de valores, seguido de “.SA”. Por exemplo, se quisermos obter a cotação para as ações preferenciais da Petrobrás, indicaremos o seu código (PETR4) mais o sufixo “.SA”, resultando em “PETR4.SA”.

A chamada à API será realizada de acordo com o seguinte formado:

https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=PETR4.SA&interval=5min&apikey=SUA-CHAVE

O resultado será obtido em formato JSON, separado por data de negociação, onde cada data possui os valores de abertura, maior valor, menor valor, valor de fechamento e volume negociado.

A função requestData implementa uma Promisse para consultar a API e obter os dados em formato JSON e, em caso de sucesso, chama uma outra função (showData) para exibir os dados de acordo com o design definido no front-end da aplicação.

Exibição dos dados

A exibição dos dados depende, naturalmente, do tipo de componente que se deseja utilizar. Para o exemplo atual, implementamos um laço de repetição para correr todos os dados da estrutura JSON, armazenando em estruturas de dados auxiliares, as informações de interesse.

No caso do gráfico de colunas, por exemplo, dentro do laço de repetição, já se pode testar e armazenar os valores máximo, mínimo e também calcular a média, de tal forma que, ao final, basta passar essas informações para o Google Charts exibi-las.

Conclusão

Como é possível observar no exemplo apresentado, o processo de obtenção e consumo dos dados da API é bastante simples, permitindo que o programador possa criar gráficos, tabelas e KPIs (Key Performance Indicators) de acordo com sua necessidade, integrando informações de ativos da bolsa de valores ao escopo da sua solução.

Esse tipo de desenvolvimento pode ser utilizado desde simples aplicações de pesquisa de preços, até sistemas mais complexos de gestão de investimentos.

Para quem tiver interesse:

Vídeo de apresentação desse exemplo https://www.youtube.com/watch?v=AgRd6hkb1wM

Códigos-fonte no Github https://github.com/sergio-lacerda/2021-11-Interface-API-Acoes-JavaScript.git