Exibindo Cotações de Criptomoedas em Tempo Real com PHP
Aprenda a integrar cotações de Bitcoin, Ethereum e outras criptomoedas em seu site
04/03/2024
Exibindo Cotações de Criptomoedas em Tempo Real com PHP
Introdução
Este artigo apresenta uma forma prática de integrar cotações de criptomoedas em tempo real em seu projeto PHP. Mostraremos como capturar essas informações de uma API e exibi-las, mantendo os dados atualizados.
Código Pronto para Uso
A seguir, apresentamos o código PHP completo que você pode utilizar para exibir a cotação de criptomoedas em tempo real. Este código faz uso de caching para otimizar o desempenho, evitando requisições excessivas à API de cotações. O exemplo inclui também o HTML para exibição e o CSS para estilização dos dados.
<?php
$cacheFile = 'cache.json';
// Tempo de cache em segundos (10 minutos)
$cacheTime = 600;
// Verifica se o arquivo de cache existe e ainda é válido
if (file_exists($cacheFile) && (time() - filemtime($cacheFile) < $cacheTime)) {
$data = json_decode(file_get_contents($cacheFile), true);
} else {
// Definindo User-Agent
$options = [
'http' => [
'method' => "GET",
'header' => "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3\r\n"
]
];
$context = stream_context_create($options);
// Definindo URL da API
$apiUrl = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=brl&order=market_cap_desc&per_page=20&page=1&sparkline=false';
$response = file_get_contents($apiUrl, false, $context);
if ($response !== false) {
$data = json_decode($response, true);
// Salva os dados no arquivo de cache
file_put_contents($cacheFile, json_encode($data));
} else {
// Em caso de falha na API, tenta ler o cache antigo se disponível
$data = file_exists($cacheFile) ? json_decode(file_get_contents($cacheFile), true) : [];
}
}
function formatarValor($valor) {
$casasDecimais = $valor < 0.5 ? max(2, strlen(substr(strrchr(sprintf('%.8f', $valor), '.'), 1))) : 2;
return number_format($valor, $casasDecimais, ',', '.');
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cotação de Criptomoedas</title>
<style>
body { font-family: sans-serif; }
.coin-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
max-width: 800px;
}
.coin-list .coin {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
}
.coin-list .coin-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.coin-list .coin-name {
font-weight: bold;
font-size: 1.1em;
margin: 0;
margin-bottom: 0.2em;
color: #444;
}
.coin-list .coin-value {
display: flex;
align-items: center;
gap: 5px;
}
.coin-list .price {
color: #888;
}
.coin-list .coin img {
width: 42px;
height: 42px;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}
.coin-list .variation {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
padding: 0.2em 0.5em;
color: white;
font-size: 0.7em;
white-space: nowrap;
}
.coin-list .positive {
background-color: #28a745;
}
.coin-list .negative {
background-color: #dc3545;
}
</style>
</head>
<body>
<h1>Cotação de Criptomoedas</h1>
<p>Atualizado em <?= date('d/m/Y H:i:s', filemtime($cacheFile)); ?></p>
<div class="coin-list">
<?php foreach ($data as $coin) : ?>
<div class="coin">
<img src="<?= htmlspecialchars($coin['image']) ?>" alt="<?= htmlspecialchars($coin['name']) ?>">
<div class="coin-info">
<p class="coin-name"><?= htmlspecialchars($coin['name']) ?> (<?= strtoupper(htmlspecialchars($coin['symbol'])) ?>)</p>
<div class="coin-value">
<?php if ($coin['price_change_percentage_24h'] != 0): ?>
<span class="variation <?= $coin['price_change_percentage_24h'] > 0 ? 'positive' : 'negative' ?>">
<?= number_format(abs($coin['price_change_percentage_24h']), 1, ',', '') ?>%
</span>
<?php endif; ?>
<span class="price">R$ <?= formatarValor($coin['current_price']) ?></span>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</body>
</html>
Demonstração
Veja abaixo o resultado esperado da execução do código PHP exibido anteriormente:
Cotação de Criptomoedas
Atualizado em 03/03/2024 14:09:14
Bitcoin (BTC)
Ethereum (ETH)
Tether (USDT)
BNB (BNB)
Solana (SOL)
XRP (XRP)
Lido Staked Ether (STETH)
USDC (USDC)
Cardano (ADA)
Dogecoin (DOGE)
Avalanche (AVAX)
Shiba Inu (SHIB)
TRON (TRX)
Polkadot (DOT)
Chainlink (LINK)
Polygon (MATIC)
Wrapped Bitcoin (WBTC)
Uniswap (UNI)
Toncoin (TON)
Bitcoin Cash (BCH)
Detalhando o Código
Nesta seção, vamos explorar cada componente do código fornecido, explicando o propósito e como cada parte contribui para a funcionalidade geral de exibição das cotações de criptomoedas em tempo real.
Configuração do Cache
Para evitar chamadas excessivas à API e melhorar a performance, utilizamos um sistema de cache. O código abaixo verifica se existe um arquivo de cache válido. Se sim, os dados são carregados a partir deste arquivo; caso contrário, uma nova requisição à API é feita.
<?php
$cacheFile = 'cache.json';
// Tempo de cache em segundos (10 minutos)
$cacheTime = 600;
if (file_exists($cacheFile) && (time() - filemtime($cacheFile) < $cacheTime)) {
$data = json_decode(file_get_contents($cacheFile), true);
} else {
// O restante do código de atualização do cache será detalhado a seguir
}
?>
Requisição à API e Atualização do Cache
Quando o cache está desatualizado ou inexistente, realizamos uma requisição à API de cotações de criptomoedas. O código a seguir demonstra como configurar o User-Agent para a requisição, realizar a chamada à API e, em caso de sucesso, atualizar o arquivo de cache com os dados recebidos.
// Definindo User-Agent
$options = [
'http' => [
'method' => "GET",
'header' => "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3\r\n"
]
];
$context = stream_context_create($options);
// Definindo URL da API
$apiUrl = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=brl&order=market_cap_desc&per_page=20&page=1&sparkline=false';
$response = file_get_contents($apiUrl, false, $context);
if ($response !== false) {
$data = json_decode($response, true);
// Salva os dados no arquivo de cache
file_put_contents($cacheFile, json_encode($data));
} else {
// Em caso de falha na API, tenta ler o cache antigo se disponível
$data = file_exists($cacheFile) ? json_decode(file_get_contents($cacheFile), true) : [];
}
Este trecho é crucial para garantir que os dados exibidos sejam sempre atualizados, respeitando o limite de tempo definido para o cache. A escolha da API do CoinGecko deve-se à sua ampla aceitação e confiabilidade nas informações fornecidas sobre criptomoedas.
Formatação do Valor das Cotações
Para abordar a variação de valores no mercado de criptomoedas, especialmente aquelas com valor unitário inferior a 1 centavo, a função formatarValor ajusta dinamicamente o número de casas decimais. Esta abordagem assegura a precisão na exibição dos preços, que é fundamental para uma representação correta no contexto financeiro. Veja a implementação dessa função:
function formatarValor($valor) {
$casasDecimais = $valor < 0.5 ? max(2, strlen(substr(strrchr(sprintf('%.8f', $valor), '.'), 1))) : 2;
return number_format($valor, $casasDecimais, ',', '.');
}
Essa lógica permite uma apresentação adequada dos valores, adaptando-se às necessidades específicas das criptomoedas de menor valor, garantindo que informações críticas sobre flutuações de preço sejam precisas e compreensíveis para o usuário.
Exibição das Cotações no HTML
Após a obtenção e formatação dos dados das criptomoedas, o próximo passo é exibir essas informações de maneira estruturada no HTML. Utilizamos um loop para percorrer o array de dados e gerar a marcação para cada criptomoeda, incluindo nome, símbolo, preço atual e variação de preço nas últimas 24 horas.
?><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cotação de Criptomoedas</title>
...
</head>
<body>
<h1>Cotação de Criptomoedas</h1>
<p>Atualizado em <?= date('d/m/Y H:i:s', filemtime($cacheFile)); ?></p>
<div class="coin-list">
<?php foreach ($data as $coin) : ?>
<div class="coin">
<img src="<?= htmlspecialchars($coin['image']) ?>" alt="<?= htmlspecialchars($coin['name']) ?>">
<div class="coin-info">
<p class="coin-name"><?= htmlspecialchars($coin['name']) ?> (<?= strtoupper(htmlspecialchars($coin['symbol'])) ?>)</p>
<div class="coin-value">
<?php if ($coin['price_change_percentage_24h'] != 0): ?>
<span class="variation <?= $coin['price_change_percentage_24h'] > 0 ? 'positive' : 'negative' ?>">
<?= $coin['price_change_percentage_24h'] > 0 ? '▲ ' : '▼ ' ?>
<?= number_format(abs($coin['price_change_percentage_24h']), 1, ',', '') ?>%
</span>
<?php endif; ?>
<span class="price">R$ <?= formatarValor($coin['current_price']) ?></span>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</body>
</html>
Esta seção do código é responsável por gerar a interface do usuário, onde as cotações atualizadas são exibidas. A estrutura HTML e o loop PHP asseguram que cada criptomoeda listada pela API seja apresentada de forma clara, incluindo informações visuais sobre a variação de preços, o que é essencial para os usuários interessados em acompanhar o mercado.
Como o CSS Melhora a Apresentação das Cotações
Utilizamos CSS para tornar a exibição das cotações de criptomoedas clara e funcional. A combinação de Grid e Flexbox nos ajuda a organizar os dados de maneira eficiente e responsiva.
body { font-family: sans-serif; }
.coin-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 20px;
max-width: 800px;
margin: auto;
}
.coin {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border: 1px solid #eee;
border-radius: 8px;
}
.coin-info {
display: flex;
flex-direction: column;
}
.coin-name {
font-weight: bold;
margin: 0;
color: #333;
}
.coin-value {
display: flex;
align-items: center;
gap: 5px;
}
.price {
color: #666;
}
.variation {
border-radius: 4px;
padding: 2px 6px;
color: white;
font-size: 0.8em;
}
.positive {
background-color: #28a745;
}
.negative {
background-color: #dc3545;
}
O Grid ajuda a alinhar as criptomoedas numa estrutura de grade, tornando a página adaptável a diferentes tamanhos de tela. Isso significa que, não importa o dispositivo, a listagem de criptomoedas sempre parecerá organizada e fácil de navegar.
Com Flexbox, ajustamos o layout de cada criptomoeda, colocando o ícone à esquerda e as informações à direita. Isso facilita a identificação rápida das criptomoedas e suas informações relevantes pelo usuário.
As classes .variation, .positive e .negative são usadas para destacar as mudanças de preço com cores distintas. Isso ajuda os usuários a verem rapidamente se o preço de uma criptomoeda aumentou ou diminuiu recentemente.
Em resumo, nosso CSS é projetado para fazer a página não só ser atraente visualmente, mas também prática e informativa, melhorando a experiência de quem busca informações atualizadas sobre criptomoedas.
Conclusão
Este artigo demonstrou como exibir cotações de criptomoedas em tempo real, utilizando PHP e CSS. Através dessas técnicas, você pode enriquecer seus projetos web com dados atualizados e interfaces atrativas. Esperamos que esse guia seja um ponto de partida útil para seus desenvolvimentos futuros.