Hola y bienvenidos/as a este tutorial en donde te enseñaré como crear widgets de precios de criptomonedas en tiempo real utilizando la API de Binance con JavaScript y Websockets, usaremos la API de Binance para extraer los precios de las criptomonedas (Bitcoin, Ethereum, Cardano y Polkadot). Esta pequeña aplicación ha sido creada usando HTML, CSS y JavaScript.
Este widgets de precios de criptomonedas puedes integrarlos fácilmente a tu aplicación web o sitio web para mostrar a los usuarios el precio de la criptomoneda que desees . Para este ejemplo he usado 4 criptomonedas, pero con unos pocas modificaciones tu puedes añadir las que desees o sean de tu preferencia.
Nota importante: Para poder seguir este tutorial, debes tener instalado en tu computadora servidor web local como XAMPP
Para crear widgets de precios de criptomonedas. Primero, debemos crear un archivo llamado index.html. Después de crear dicho archivos, simplemente copia y pega el código mostrado a continuación.
Archivo index.html
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Api prices</title> </head> <body> <div class="container"> <div class="coin-price"> <div class="logo"><img src="images/btc.png" ></div> <div> <h1>$<span id="bitcoin"></span></h1> <h1>Bitcoin</h1> </div> </div> <div class="coin-price"> <div class="logo"><img src="images/eth.png" ></div> <div> <h1>$<span id="ethereum"></span></h1> <h1>Ethereum</h1> </div> </div> <div class="coin-price"> <div class="logo"><img src="images/ada.png" ></div> <div> <h1>$<span id="cardano"></span></h1> <h1>Cardano</h1> </div> </div> <div class="coin-price"> <div class="logo"><img src="images/dot.png" ></div> <div> <h1>$<span id="polkadot"></span></h1> <h1>Polkadot</h1> </div> </div> </div> </body> <script src="app.js"></script> </html> |
En segundo archivo que vamos a crear lo vamos a nombrar style.css. Este archivo se encarga de darle una mejora visual a nuestra aplicación de precios de criptomonedas.
Archivo style.css
|
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 |
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 20vh; } .container { display: flex; justify-content: center; align-items: center; border-radius: 5px; flex-direction: row; } /* Responsive layout */ @media (max-width: 800px) { .container { flex-direction: column; } } .container .coin-price{ display: flex; justify-content: center; align-items: center; padding: 10px 20px; border-radius: 5px; box-shadow: 0 0 3px #ccc; margin: 7px; width:250px; } .container .coin-price .logo{ width: 60px; margin-right: 10px; } .container .coin-price .logo img{ width: 100%; } .container .coin-price div{ display: block; } .container .coin-price div h1{ font-size: 20px; } |
Ahora vamos a crear un archivo JavaScript, lo vamos a nombrar app.js, este archivo lo colocaremos dentro del directorio raíz de nuestra aplicación. El archivo app.js se encargará de darle un poco de dinamismo a nuestra aplicación web a través de JavaScript, para la consulta de precios a través de la API de Binance, para así poder mostrar los precios de las criptomonedas en tiempo real, todo esto usando WebSocket .
Archivo app.js
|
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 |
function crear_ws(par){ let ws=new WebSocket("wss://stream.binance.com:9443/ws/"+par+"@trade"); return ws; } function mostrar_precio(html_tag,data){ let data_ws = JSON.parse(data); let precio_cripto= parseFloat(data_ws.p).toFixed(2) html_tag.innerText = precio_cripto ; return precio_cripto; } //Polkadot let ws_dot = crear_ws("dotbusd"); let precio_cripto_html = document.getElementById('polkadot'); let last_price=null; ws_dot.onmessage =(event) =>{ let precio_dot= mostrar_precio(precio_cripto_html,event.data); precio_cripto_html.style.color = !last_price || last_price===precio_dot ? 'black': precio_dot>last_price? 'green': 'red'; last_price=precio_dot; } //Bitcoin let ws_btc = crear_ws("btcbusd"); let precio_btc_html = document.getElementById('bitcoin'); let ultimo_btc=null; ws_btc.onmessage =(event) =>{ let precio_btc= mostrar_precio(precio_btc_html,event.data); precio_btc_html.style.color = !ultimo_btc || ultimo_btc===precio_btc ? 'black': precio_btc>ultimo_btc? 'green': 'red'; ultimo_btc=precio_btc; } //Ethereum let ws_eth = crear_ws("ethbusd"); let precio_eth_html = document.getElementById('ethereum'); let ultimo_eth=null; ws_eth.onmessage =(event) =>{ let precio_eth=mostrar_precio(precio_eth_html,event.data); precio_eth_html.style.color = !ultimo_eth || ultimo_eth===precio_eth ? 'black': precio_eth>ultimo_eth? 'green': 'red'; ultimo_eth=precio_eth; } //Cardano let ws_ada = crear_ws("adabusd"); let precio_ada_html = document.getElementById('cardano'); let ultimo_ada=null; ws_ada.onmessage =(event) =>{ let precio_ada=mostrar_precio(precio_ada_html,event.data); precio_ada_html.style.color = !ultimo_ada || ultimo_ada===precio_ada ? 'black': precio_ada>ultimo_ada? 'green': 'red'; ultimo_ada=precio_ada; } |
Esto sería todo, ahora haz creado con éxito una aplicación para mostrar los precios de criptomonedas en tiempo real. Puedes conseguir el código funcional si sigues cada uno de los pasos detallados en este tutorial.
Ver demostración Descargar archivos
