Ola para todos, como descrevi no post inicial, não tenho muita experiencia com programação e web design e nunca utilizei fóruns na minha vida e achei que se tratava de um local onde os usuários criam posts com suas duvidas e recebem respostas com informações ou links com materiais que ajudem a solucionar a duvida em questão, possibilitando a troca de conhecimento criando uma rede de colaboradores, mas acho que me enganei, pois 10 dias depois do post a unica resposta que tive foi: "Erm, se não sabes webdesign básico devias começar por aí, a aprender js, css e html. A internet está cheia de tutoriais; quando conseguires fazer isso usando dados locais vais provavelmente precisar de aprender backend para ir buscar os dados à api, senão bates nas proteções de cross-domain requests dos browsers.", ao
lagadu Power Member, agradeço por pelo menos responder e já que ninguém respondeu como eu esperava, posto hoje uma parte da resposta:
Para a tabela com o Rank de Cripto Moedas usando os seguintes dados da API e acrescentando o web socket do coincap.io:
/front
- Description: Front Page Data of current coin stats
- URL: http://coincap.io/front
- Response:
[
{
"cap24hrChange": -6.05,
"long": "Bitcoin",
"mktcap": 65173805891.25,
"perc": -6.05,
"price": 3934.85,
"shapeshift": true,
"short": "BTC",
"supply": 16563225,
"usdVolume": 2337600000,
"volume": 2337600000,
"vwapData": 3997.5639538606733,
"vwapDataBTC": 3997.5639538606733
},
{
"cap24hrChange": -6.59,
"long": "Ethereum",
"mktcap": 26016428866.32,
"perc": -6.59,
"price": 275.02,
"shapeshift": true,
"short": "ETH",
"supply": 94598316,
"usdVolume": 945732000,
"volume": 945732000,
"vwapData": 278.03921067242516,
"vwapDataBTC": 278.03921067242516
}
]
A resposta que funcionou perfeitamente sem bloqueio por parte do navegador ficou assim:
**************
- HTML = index.html
**************
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Cryptocurrency Live Market Capitalization</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='
https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div ng-app="myApp">
<div ng-controller="CoinTableCtrl">
<h1 class="center">TutoCoins.info</h1>
<table style="margin-bottom: 2vh;">
<thead>
<tr>
<th class="center">Name</th>
<th class="center">Market Cap</th>
<th class="center">Price</th>
<th class="center">Supply</th>
<th class="center">24 Hour Volume</th>
<th class="center">%24hr</th>
</tr>
</thead>
<tbody>
<tr animate-on-change="coin.price" ng-repeat="coin in rowData">
<td class='center'>{{coin.name}}</td>
<td class='center'>{{coin.mktcap}}</td>
<td class='center'>{{coin.price}}</td>
<td class='center'>{{coin.supply}}</td>
<td class='center'>{{coin.volume}}</td>
<td class='center'>{{coin.percent}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src='
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>
<script src='
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js'></script>
<script src='
https://cdn.socket.io/socket.io-1.4.5.js'></script>
<script src='
https://cdnjs.cloudflare.com/ajax/libs/angular-socket-io/0.7.0/socket.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
**************
- CSS = style.css
**************
.change {
background-color: #ff0000;
}
.change-add,.change-remove {
background-color: white;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition: all 0.5s ease-in-out;
}
.change-add-active {
background-color: #ff0000;
}
.change-remove {
background-color: #ff0000;
}
.change-remove-active {
background-color: white;
}
.change-up {
background-color: #00ff00;
}
.change-up-add,.change-up-remove {
background-color: white;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition: all 0.5s ease-in-out;
}
.change-up-add-active {
background-color: #00ff00;
}
.change-up-remove {
background-color: #00ff00;
}
.change-up-remove-active {
background-color: white;
}
*****************
- JS = index.js
*****************
angular
.module('myApp', ['ngAnimate', 'btford.socket-io'])
.factory('mySocket', mySocket)
.directive('animateOnChange', animateOnChange)
.controller('CoinTableCtrl', CoinTableCtrl);
// Create the socket we'll use for the coin data
function mySocket(socketFactory) {
return socketFactory(
{
ioSocket: io.connect('
https://socket.coincap.io')
}
);
}
// Creates our animate-on-change directive
function animateOnChange($animate,$timeout) {
return function(scope, elem, attr) {
// we're watching each coin's price
scope.$watch(attr.animateOnChange, function(newValue, oldValue) {
// make sure the price has changed +/-
if (newValue != oldValue) {
// was the change for profit or loss?
var c = newValue > oldValue ? 'change-up' : 'change';
// add class 'change-up' for profit and 'change' for loss
$animate.addClass(elem,c).then(function() {
// remove class after a timeout. duration is handled in CSS
$timeout(function() {$animate.removeClass(elem,c)});
});
}
});
};
}
function CoinTableCtrl($http, $filter, $scope, mySocket) {
var self = this;
// store our coin names here
self.topTen = [];
// table iterates over this variable to create rows
$scope.rowData = {};
// gets our initial data for the table (on load) so it's not
// waiting for socket data to populate each coin
$http
.get('
https://coincap.io/front')
.then(function (response) {
// only grab the top ten coins
for (var i = 0; i < 100; i++) {
var msg = response.data
;
// add to array of coin names
self.topTen.push(msg.short.toString());
// construct objects to contain each row's data
$scope.rowData[msg.short.toString()] = {
name: msg.long + ' ' + msg.short,
mktcap: $filter('currency')(msg.mktcap, '$', 0),
price: $filter('currency')(msg.price, '$', 6),
supply: $filter('number')(msg.supply, 0),
volume: $filter('currency')(msg.volume, '$', 0),
percent: $filter('number')(msg.cap24hrChange).toString() + '%'
};
}
mySocket.on('trades', function (tradeMsg) {
// check if received 'trade' is with a coin we're displaying
if (self.topTen.includes(tradeMsg.message.msg.short)) {
var msg = tradeMsg.message.msg;
// update the data in received coin's row
$scope.rowData[msg.short] = {
name: msg.long + ' ' + msg.short,
mktcap: $filter('currency')(msg.mktcap, '$', 0),
price: $filter('currency')(msg.price, '$', 6),
supply: $filter('number')(msg.supply, 0),
volume: $filter('currency')(msg.volume, '$', 0),
percent: $filter('number')(msg.cap24hrChange).toString() + '%'
};
}
});
});
}
************
Passo a passo:
1º Crie uma pasta para o site, ex: "site" (essa pasta pode ter qualquer nome, as outras devem ser criadas com o nome informado no passo a passo).
2º Dentro da pasta "site" crie mais 2 pastas: css e js.
3º Ainda na pasta "site" crie um arquivo index.html e cole o código HTML acima.
4º Na pasta css crie o arquivo style.css e cole o código CSS acima.
5º Na pasta js crie o arquivo index.js e cole o código JS acima.
6º Transfira o conteúdo da pasta "site" para seu servidor de hospedagem e acesse o endereço do seu site para ver o resultado.
Exemplo:
- site
- index.html
- css
- style.css
- js
- index.js
DEMO: https://tutocoins.info
CÓDIGO: https://codepen.io/psychofish/pen/ypqbQL
Se alguém quiser ajudar e conseguir postar a resposta para criar a barra com a API /global eu agradeço !
