<div id="contentMain">

<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615736596/2_td8lht.jpg" class="img-fluid">
<br/>
</center>
</div>




<table>
<tr>
<td>Greetings, today I am tasked with reading the BTC price data in real time and placing it on a web page for future interpretation by analysts in the area. For this I got an api (https://github.com/cryptowatch/cw-sdk-node) that helps me with the streaming of those values, use as a programming language on the backend side Node.js. and for communication in real time with the frontend use websockets (socket.io)

</td>
</tr>
</table>



<p>In the first instance I had to start a new node project, and install the necessary modules to develop the project</p>


<p> Followed by using the code that the api provider provides us </p>


<p> Once that is done, I started the connection with socket.io and issued those values to be displayed by the frontend (index.html) </p>

<p> In my index.html file I instantiated the socket and after that I showed by console the data sent by the backend to see if it worked. </p>

<p> Once it worked, what I had to do was look for a library for real-time graphics and I got the one indicated for this exercise, you can see its documentation by entering this link https://www.fusioncharts.com / charts </p>

Note:
<p> To style the page use a css framework called bootstrap. </p>

<p> and After many tests I was successful </p>

<p> I had created my real-time reading of bitcoin prices </p>


<h3> To see my app in real time visit the following link https://btc-real-time-by-jfdesousa7.herokuapp.com/ </h3>





<h4>Prints: </h4>



<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615736421/3_g1ptzx.jpg" class="img-fluid">
<br/>
</center>
</div>


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615736544/1_jchrpg.jpg" class="img-fluid">
<br/>
</center>
</div>




<table><tr><td><h3>And with those friends we reached the end of the tutorial, I hope you enjoyed it and until next time!</h3></td>
</tr>
</table>
<br/>

<h4>If you want to hire my services as a programmer you can write to me at whatsapp at <a title="Contratar servicios"
                  href="https://api.whatsapp.com/send?phone=+584128256644&amp;text=Hola%2C%20deseo%20contratar%20tus%20servicios"
                  target="_blank" >+58 412 825 6644</a></h4>


<h4>Visit my official website for budges and much more</h4>

<center><a href="https://tupaginaonline.net" target="_blank"><b>TupaginaOnline.net</b></a></center>























<h1>ESPANOL</h1>

<table>
<tr>
<td>Saludos, hoy me puesto con la tarea de leer los datos del precio del BTC en tiempo real y colocarlos en una página web para su futura interpretación por analistas en el área. Para ello conseguí una api (https://github.com/cryptowatch/cw-sdk-node) que me ayuda con el streaming de esos valores, use como lenguaje de programación del lado del backend Node.js. y para la comunicacion en tiempo real con el frontend use websockets (socket.io)

</td>
</tr>
</table>



<p>En primera instancia tuve que iniciar un nuevo proyecto de node, e instalar los módulos necesarios para desarrollar el proyecto</p>


<p>Seguido de usar el código que el proveedor de la api nos provee</p>


<p>Una vez hecho eso, inicie la conexión con socket.io y emití esos valores para ser mostrados por el frontend(index.html)</p>

<p>En mi archivo index.html instancie el socket y luego de eso mostré por consola la data enviada por el backend para ver si funcionaba.</p>

<p>Una vez funciono, lo que tuve que hacer fue buscar una librería para los gráficos en tiempo real y conseguí la indicada para este ejercicio, la misma la puedes ver su documentacion ingresando en este link https://www.fusioncharts.com/charts</p>

Nota:
<p>Para darle estilos a la página use un framework de css llamado bootstrap.</p>

<p>y Después de muchas pruebas tuve éxito</p>

<p>Había creado mi lectura en tiempo real de los precios del bitcoin</p>


<h3>Para ver en tiempo real mi app visita el siguiente link https://btc-real-time-by-jfdesousa7.herokuapp.com/</h3>





<h4>Capturas: </h4>



<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615736421/3_g1ptzx.jpg" class="img-fluid">
<br/>
</center>
</div>


<div>
<center>
<img src="https://res.cloudinary.com/dzemqknqv/image/upload/v1615736544/1_jchrpg.jpg" class="img-fluid">
<br/>
</center>
</div>




<table><tr><td><h3>Y con esos amigos llegamos al final del tutorial, espero que lo hayan disfrutado y ¡hasta la próxima! </h3></td>
</tr>
</table>
<br/>

<h4>Si deseas contratar mis servicios como programador puedes escribirme al whatsapp al <a title="Contratar servicios"
                  href="https://api.whatsapp.com/send?phone=+584128256644&amp;text=Hola%2C%20deseo%20contratar%20tus%20servicios"
                  target="_blank" >+58 412 825 6644</a></h4>


<h4>Visite mi sitio web oficial para presupuestos y mucho más</h4>

<center><a href="https://tupaginaonline.net" target="_blank"><b>TupaginaOnline.net</b></a></center>


</div>