Você conhece o site CryptoBubbles? Nele, podemos ver em um gráfico de bolhas as “melhores e piores” criptomoedas do mercado, ou seja, que mais cresceram ou que mais derreteram nos últimos dias. E no tutorial de hoje eu vou lhe ensinar como criar um CryptoBubbles-clone, ou um embrião do que pode se tornar com a sua criatividade, algo ainda mais legal e útil do que uma mera cópia do CryptoBubbles e de quebra ainda lhe render uma boa grana com AdSense e afiliados.
Nosso tutorial vai consistir em:
Se preferir, você pode assistir ao conteúdo deste tutorial no vídeo abaixo.
Vamos lá!
#1 – Coletando os dados de mercado
O primeiro passo e que talvez você julgue ser o mais complexo é a coleta de dados. Talvez a parte mais complexa seja a ESCOLHA da fonte de dados, já que existem muitas na Internet, mas a codificação em si você vai ver que é bem simples.
Eu vou usar aqui como fonte de dados a corretora Binance.
A Binance é a maior corretora e criptomoedas do mundo e por isso seus dados são muito representativos. Muitas pessoas perguntam se a Binance é confiável, mas é a maior corretora de criptomoedas que existe. Além disso, fornece publicamente esses dados de forma muito simples de consumir por meio de APIs e streams. No nosso projeto, quero que as atualizações sejam em tempo real, por isso optarei por utilizar streams da Binance cuja documentação você pode conferir neste link.
Se você não sabe o que é uma stream ou WebSockets, recomendo fortemente que faça este tutorial aqui também.
Como nosso projeto deve mostrar o percentual de crescimento (ou retração) do preço de criptomoedas, precisamos de uma stream que nos permita ter esta informação ou ao menos dados suficientes para fazer este cálculo. Uma em específico eu acho bem interessante que é a stream de Mini-Ticker.
A stream de Mini-Ticker permite que com apenas uma conexão de stream a gente receba dados de todos os pares listados na corretora, segundo a segundo, dadas as últimas 24h de transações. Com essa stream, vai ser bem fácil criar um CryptoBubbles-clone de 24h. Repare nos dados que receberemos a cada segundo:
|
1
2
3
4
5
6
7
8
9
10
11
|
{
“e”: “24hrMiniTicker”, // Event type
“E”: 123456789, // Event time
“s”: “BNBBTC”, // Symbol
“c”: “0.0025”, // Close price
“o”: “0.0010”, // Open price
“h”: “0.0025”, // High price
“l”: “0.0010”, // Low price
“v”: “10000”, // Total traded base asset volume
“q”: “18” // Total traded quote asset volume
}
|
Deste conjunto de dados, podemos calcular o percentual de alteração nas últimas 24h fazendo uma regra-de-3 em cima do open price e close price, certo?
Mas antes de chegar no cálculo em si, precisamos receber estes dados. Como o próprio nome do tutorial sugeriu, vamos fazê-lo usando unicamente JavaScript. Ok, vou usar um pouco de HTML também…
Se você não sabe nada de JavaScript e HTML, recomendo também que leia e pratique este ebook gratuito.
Comece criando um arquivo index.html com as tags padrões e uma div no corpo.
|
1
2
3
4
5
6
7
8
9
|
<html>
<body>
<h1>Market USDT 24h</h1>
<div id=“div”></div>
</body>
<script>
</script>
</html>
|
Repare que deixei uma tag SCRIPT vazia ali também, pois é nela que colocaremos toda a programação da nossa página. Programação esta que começaremos pela conexão à stream, via WebSockets. WebSockets é um padrão web atendido por todos os browsers modernos, mas se me permite uma recomendação, eu utilizo o Google Chrome com eles.
Para usar WebSockets, basta usarmos a classe de mesmo nome, conforme ensinado na documentação da Mozilla. O código abaixo deve ficar entre as tags SCRIPT da nossa página HTML.
|
1
2
3
4
|
const webSocket = new WebSocket(‘wss://stream.binance.com:9443/ws/!miniTicker@arr’);
webSocket.onmessage = function (event) {
document.getElementById(‘div’).innerHTML = event.data;
}
|
No código acima, eu inicializo uma conexão de WebSockets com a stream de produção da Binance que me traz um resumo dos dados de mercado a cada segundo, o que dá aquela sensação boa de real-time.
No código seguinte, nós configuramos o handler onmessage que dispara uma função toda vez que novos dados chegarem, com o event.data sendo a propriedade onde temos os dados em si. Neste exemplo, estou jogando eles dentro da única div que tem na nossa página.
O resultado, você confere abaixo.
Se você gosta um pouquinho de programação, só de ver isso funcionando no navegador (basta dar dois cliques no arquivo index.html) já deve ter te animado, certo? Mas calma, que tem mais!
#2 – Transformando os Dados
Agora que já aprendemos a trazer os dados da Binance segundo a segundo, é hora da gente transformar eles para o formato que queremos. No final do tutorial, o que esperamos é ter as moedas que mais subiram ou que mais caíram em preço nas últimas 24h, certo?
Então, vamos começar transformando os objetos recebidos para que eles tenham apenas as informações que nos interessam. As alterações a seguir são no mesmo código JavaScript de antes.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const objData = {};
const webSocket = new WebSocket(‘wss://stream.binance.com:9443/ws/!miniTicker@arr’);
webSocket.onmessage = function (event) {
const json = JSON.parse(event.data);
json.filter(o => o.s.endsWith(‘USDT’)
&& !/^.{2,}(DOWNUSDT|UPUSDT)$/.test(o.s))
.map(o => objData[o.s] = (((parseFloat(o.c) * 100) / parseFloat(o.o)) – 100));
const data = Object.keys(objData).map(symbol => {
return {
id: symbol.replace(‘USDT’, ”), value: objData[symbol]
}
}).filter(o => Math.abs(o.value) > 15);
document.getElementById(‘div’).innerHTML = JSON.stringify(data);
}
|
Vamos às explicações:
- Primeiro, inicializamos um objeto JS para ser nosso dicionário. Ele será especialmente útil para armazenar os dados durante a transformação. Declaro ele fora das funções pois ele se manterá o mesmo por toda a vida da página.
- A conexão com a stream de Mini-Ticker não mudou em nada, vamos adiante.
- Começamos fazendo a conversão dos dados da mensagem, que nativamente vêm como string, para um objeto JSON.
- A Binance manda todos os pares de moedas, mas neste exemplo vou me focar apenas aquelas pareadas com USDT (Tether), que é uma stablecoin lastreada no dólar americano. Faço isso com o primeiro filtro.
- O segundo filtro é uma expressão regular para não pegar os BLVTs (Binance Leveraged Tokens). Todo BLVTs possuem DOWN ou UP no final do base asset (moeda à esquerda).
- Após os filtros, temos um map para calcular o percentual de alteração no preço da moeda nas últimas 24h, regra-de-3 básica aqui em cima do close price (o.c) e open price (o.o).
- Agora fazemos uma última transformação do nosso objeto para um array de objetos com id e value, que serão úteis mais tarde, já removendo também o quote asset (USDT) que é sempre o mesmo.
- E por fim, filtramos somente aquelas criptos que mudaram ao menos 15% (para mais ou para menos) nas últimas 24h. O Math.abs nos ajuda com isso pois ele ignora o sinal do número. Ajuste para o intervalo que julgar mais interessante.
O resultado a gente converte para string e joga na DIV novamente. Você deve ter algo assim, bem mais clean quando testar novamente o index.html no seu navegador.
E com isso, nossos dados estão transformados e prontos para serem plotados!
#3 – Plotando os Dados
E por fim, chegamos à terceira e última parte do nosso tutorial, parte esta que pra mim é a mais difícil mas que tenho certeza que para alguns é a mais fácil: interface gráfica.
Sério, sou muito ruim nisso e nosso clone vai sofrer um pouco por causa disso. Já te adianto que o segredo para fazer algo mais bacana do que o que vou mostrar aqui é devorar os materiais sobre plotagem de gráficos em páginas HTML. Existe milhares de bibliotecas disponíveis por aí e mesmo a biblioteca que optei por utiliza tem toneladas de opções para você estudar e configurar para que fique do jeito que deseja.
Sem mais delongas, gostaria de lhe apresentar a D3.js, uma fantástica e muito popular biblioteca para plotagem de dados. Sério, ela é muito incrível mesmo e ao mesmo tempo um pouco assustadora por ter muitas opções. Vamos começar incluindo uma referência à ela na nossa página HTML, uma linha antes da tag SCRIPT que estamos usando para codificar a transformação dos dados.
|
1
|
<script src=“https://d3js.org/d3.v7.min.js”></script>
|
Isso carregará a biblioteca junto da nossa página e antes do nosso script. Uma coisa legal com esta biblioteca é que você tem muitos gráficos à disposição com apenas esta importação aí em cima. Um dos gráficos é o de bolhas, que é o que usaremos aqui.
Acessando esta página inclusive você vê como ele fica e tem acesso a um exemplo em JS que você pode copiar para usar e que eu reproduzo abaixo.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
// Copyright 2021 Observable, Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/bubble-chart
function BubbleChart(data, {
name = ([x]) => x, // alias for label
label = name, // given d in data, returns text to display on the bubble
value = ([, y]) => y, // given d in data, returns a quantitative size
group, // given d in data, returns a categorical value for color
title, // given d in data, returns text to show on hover
link, // given a node d, its link (if any)
linkTarget = “_blank”, // the target attribute for links, if any
width = 640, // outer width, in pixels
height = width, // outer height, in pixels
padding = 3, // padding between circles
margin = 1, // default margins
marginTop = margin, // top margin, in pixels
marginRight = margin, // right margin, in pixels
marginBottom = margin, // bottom margin, in pixels
marginLeft = margin, // left margin, in pixels
groups, // array of group names (the domain of the color scale)
colors = d3.schemeTableau10, // an array of colors (for groups)
fill = “#ccc”, // a static fill color, if no group channel is specified
fillOpacity = 0.7, // the fill opacity of the bubbles
stroke, // a static stroke around the bubbles
strokeWidth, // the stroke width around the bubbles, if any
strokeOpacity, // the stroke opacity around the bubbles, if any
} = {}) {
// Compute the values.
const D = d3.map(data, d => d);
const V = d3.map(data, value);
const G = group == null ? null : d3.map(data, group);
const I = d3.range(V.length).filter(i => V[i] > 0);
// Unique the groups.
if (G && groups === undefined) groups = I.map(i => G[i]);
groups = G && new d3.InternSet(groups);
// Construct scales.
const color = G && d3.scaleOrdinal(groups, colors);
// Compute labels and titles.
const L = label == null ? null : d3.map(data, label);
const T = title === undefined ? L : title == null ? null : d3.map(data, title);
// Compute layout: create a 1-deep hierarchy, and pack it.
const root = d3.pack()
.size([width – marginLeft – marginRight, height – marginTop – marginBottom])
.padding(padding)
(d3.hierarchy({children: I})
.sum(i => V[i]));
const svg = d3.create(“svg”)
.attr(“width”, width)
.attr(“height”, height)
.attr(“viewBox”, [–marginLeft, –marginTop, width, height])
.attr(“style”, “max-width: 100%; height: auto; height: intrinsic;”)
.attr(“fill”, “currentColor”)
.attr(“font-size”, 10)
.attr(“font-family”, “sans-serif”)
.attr(“text-anchor”, “middle”);
const leaf = svg.selectAll(“a”)
.data(root.leaves())
.join(“a”)
.attr(“xlink:href”, link == null ? null : (d, i) => link(D[d.data], i, data))
.attr(“target”, link == null ? null : linkTarget)
.attr(“transform”, d => `translate(${d.x},${d.y})`);
leaf.append(“circle”)
.attr(“stroke”, stroke)
.attr(“stroke-width”, strokeWidth)
.attr(“stroke-opacity”, strokeOpacity)
.attr(“fill”, G ? d => color(G[d.data]) : fill == null ? “none” : fill)
.attr(“fill-opacity”, fillOpacity)
.attr(“r”, d => d.r);
if (T) leaf.append(“title”)
.text(d => T[d.data]);
if (L) {
// A unique identifier for clip paths (to avoid conflicts).
const uid = `O–${Math.random().toString(16).slice(2)}`;
leaf.append(“clipPath”)
.attr(“id”, d => `${uid}–clip–${d.data}`)
.append(“circle”)
.attr(“r”, d => d.r);
leaf.append(“text”)
.attr(“clip-path”, d => `url(${new URL(`#${uid}–clip–${d.data}`, location)})`)
.selectAll(“tspan”)
.data(d => `${L[d.data]}`.split(/\n/g))
.join(“tspan”)
.attr(“x”, 0)
.attr(“y”, (d, i, D) => `${i – D.length / 2 + 0.85}em`)
.attr(“fill-opacity”, (d, i, D) => i === D.length – 1 ? 0.7 : null)
.text(d => d);
}
return Object.assign(svg.node(), {scales: {color}});
}
|
Repare que esta função está documentada nela própria, com uma série de explicações sobre as opções de configuração logo no início, bem como comentários explicando as seções do código. A recomendação da D3 é que a gente use esta função toda vez que quisermos gerar um gráfico de bolhas. Mas eu vou modificar levemente ela para se adequar às nossas necessidades em específico, aí vou lhe explicar as alterações apenas (todo este código deve ficar antes da conexão WebSocket).
Antes de mexermos na função em si, gostaria de criar um objeto de options com você, o qual eu reproduzo abaixo.
|
1
2
3
4
5
6
7
8
9
|
const options = {
label: d => d.id + “\n” + d.value.toFixed(2) + “%”,//text
value: d => Math.abs(d.value),//value
group: d => d.value > 0 ? “up” : “down”,//agrupamento por cor
title: d => d.id,//hover
link: d => `https://www.binance.com/en/trade/${d.id.replace(‘USDT’, ”)}_USDT`,
width: 1024,
height: 768
}
|
Este objeto options possui as configurações personalizadas que vão sobrescrever algumas configurações padrões da D3 para gráfico de bolhas. As configurações são:
- label: função que retorna o texto que vai aparecer dentro da bolha;
- value: função que retorna um número para cálculo do tamanho da bolha;
- group: função que retorna um texto indicando o grupo da bolha. O grupo impacta na cor da mesma e neste exemplo estou usando o valor percentual absoluto da cripto como referência;
- title: função que retorna o texto a ser exibido quando passarmos o mouse sobre a bolha;
- link: função que retorna o link que o usuário vai ser direcionado quando clicar na bolha;
- width: largura do gráfico;
- height: altura do gráfico;
Agora que temos as nossas próprias configurações, vamos modificar o código da função BubbleChart original. O primeiro lugar que precisaremos mudar é a linha onde dizia “const V = d3.map(data, value);” e que agora deve usar “const V = d3.map(data, options.value);” o que usará a nossa função de cálculo.
O segundo lugar que vamos alterar é onde tem o comentário “construct scales”. Vamos alterar a lógica de definição da cor da bolha baseada apenas nos grupos “up” e “down” que definimos nas nossas configurações antes.
|
1
2
|
// Construct scales.
const color = g => g === ‘up’ ? “green” : “red”;
|
Se for up, vai ser verde. Se for down, vai ser vermelha.
E isso finalizam as alterações da função em questão. Agora, para usarmos ela, basta fazermos uma chamada ao final do nosso bloco script, da seguinte forma.
|
1
2
|
const chart = BubbleChart(data, options);
document.getElementById(‘div’).innerHTML = chart.outerHTML;
|
O código acima usa a função BubbleChart que acabamos de ajustar passando as configurações que havíamos definido antes. O resultado é um objeto chart que pegamos o HTML dele para renderização na página.
E com isso, se deu tudo certo, você terá o seguinte resultado quando abrir novamente o index.html no navegador.
Espero que tenha gostado do tutorial!
E com isso você tem uma base importantíssima para começar esse tipo de projeto e a biblioteca D3.js tem muitos recursos que você pode explorar como outros tipos de gráficos, personalizações deste gráfico, animações e muito mais. Confesso que eu não sou muito bom com ela, mas quem sabe no futuro eu não aprenda alguns truques novos e traga pra vocês em um novo tutorial?
De 0 a 10, o quanto você recomendaria este artigo para um amigo?