image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image
Sérgio Junior
Sérgio Junior22/03/2021 23:48
Compartilhe

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

  • #HTML
  • #JavaScript
  • #CSS

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”.

image

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”.

image

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.

image

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.

image

image

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.

image

image

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.

image

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.

image

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

Compartilhe
Comentários (8)

TM

Thiago Moreno - 15/12/2021 15:05

Show de bola, conectei uma aplicacao spring-boot com schedule consumingo essa api, usando uma lib tambem em java que esta disponivel la no github. O unico problema que tive foi que o metodo INTRADAY nao funciona com a key gratuita. Eu so consigo usar DAILY, e na documentacao nao fala nada sobre essa restricao. Mandei um email para o suporte deles e ate agora nada.

JF

José Filho - 20/09/2021 15:21

Goste muito da API, obrigado pela dica, estou usando em um aplicativo android kotlin.

Infelizmente ela tem algumas limitações, como por exemplo permitir apenas 5 chamadas em 1 minuto. Isso dificulta principalmente em chamadas recursivas, como exemplo, montar uma lista de ações (pelo menos não achei outras forma de retornar vários ativos de uma vez na documentação, se souber me ajudaria muito).

Porém, buscando achei uma API brasileira:

https://console.hgbrasil.com/documentation/finance


Ela também tem limitações de uso e uma lista de ações limitadas, mas pode ser útil em projetos futuros. Até mesmo usando as duas em conjunto.

Agradeço mais uma vez, espero ter ajudado. Quando finalizar meu app compartilharei aqui no fórum.

Sérgio Junior
Sérgio Junior - 25/03/2021 21:51

Valeu @Déborah,


Com certeza o seu desenvolvimento front-end vai ficar muito melhor que o meu rsrsrsrs

Quem sabe uma versão em Ionic? :)

Déborah Lacerda
Déborah Lacerda - 25/03/2021 21:49

Parabéns pelo projeto e por disponibilizar o código fonte! Será muito útil em meus futuros projetos.

Valeu!

Sérgio Junior
Sérgio Junior - 23/03/2021 13:13

Valeu @Gaspar Sousa


Espero que seja divertido.

Se usar tecnologias diferentes, depois conta para a gente como foi a experiência.

Gaspar Sousa
Gaspar Sousa - 23/03/2021 09:04

@Sérgio Junior


Muito Legal! Gostei!


Salvei aqui e sobrando um tempinho, vou brincar com isso aí.


Obrigado!

Sérgio Junior
Sérgio Junior - 23/03/2021 08:23

Valeu Eros.


Algotrading é um tema muito legal também. Um case de implementação daria um bom artigo.

🏂⚡️Eros M.Lima
🏂⚡️Eros M.Lima - 23/03/2021 04:51

Conhece o Algotrading? muito bom o conteúdo!