Building a Real-Time Bitcoin Price Tracker in Appsmith
Tags: appsmith, javascript, tutorial
Published: 2021-10-30 18:19:53

Recently, [Appsmith](https://www.appsmith.com/) introduced the functionality that enables [real-time polling of data](https://github.com/appsmithorg/appsmith/issues/3312) using JavaScript timers. The data coming from the APIs and queries can now be periodically updated using the [setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) method of JavaScript.

The setInterval() method repeatedly executes a code snippet with a fixed time interval between the calls. Earlier in Appsmith, the user would have to manually click the refresh button to update the data. But now using the JavaScript timer one can do it programmatically.


In this tutorial, we will build a Bitcoin price tracker application as shown below to demonstrate real-time polling of data. For this, we would be using the Stats Box widget and the recently introduced timer functionality.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdbl9wjw6ct45dr50271.gif)



The most important requirement for this project is of an API that would provide us real-time Bitcoin prices. [Finnhub](https://finnhub.io/) is one such website that provides free APIs to access real-time stocks, currencies, and crypto. So the first step is to create an account on Finnhub from where you get a key to access their APIs.

Once you create an account on Finnhub, you can access your API key as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcdna2ocmjd7ukpgr8nw.png)

Finnhub provides several APIs to get the financial data. We will be using the Quote API to track the Bitcoin price as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yw7dfwwh57b3eyly3j5g.png)



Next, create a new Appsmith app. From the menu panel on the left, click on Datasources and select “Create new API.” Rename this new API as`GetBitcoinPrice`. Enter the Finnhub Quote API to fetch the Bitcoin prices as shown below.


`https://finnhub.io/api/v1/quote?symbol=BINANCE:BTCUSDT&token=YOUR_API_KEY`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpfe9bg3g7ap53olv5sr.png)



Now, from the menu panel click open the Widgets section. Drag and drop a Stats Box and a Switch onto the canvas. The Stats Box is a compound widget that comprises of multiple elements such as text boxes and icon. Rename the Stats Box widget as `StatBox` and the Switch widget as `SwLive`

Follow the given steps to configure the Stats Box widget to display Bitcoin Price that will be fetched from the above configured API:

* Change the text of the first text box to “Bitcoin Price” and change the text color and font size to your desired choice.


* Rename the second text box to `TxtPrice` and bind its Text property to the code shown below. This code extracts the current bitcoin price from the `GetBitcoinPrice` API and displays it as text in the Stats Box.


```javascript
${{GetBitcoinPrice.data.c}}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2weeampuorjbp3q9ylhi.png)



Following is the sample response returned from the Finnhub API where  `c` is the current price and `dp` is the precent change.

  ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcxbfuudbr2nyb0i65nn.png)



* Rename the third text box to `TxtChange` and bind its Text property with the following code. This code extracts the percentage change in the Bitcoin price from the `GetBitcoinPrice` API.



```javascript
{{GetBitcoinPrice.data.dp}}% change  
```

  ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysr4ir3okbtwov38jaan.png)




* Now bind `TxtChange` widget’s Text Color property with the following code. This code changes the color of the text displayed to either red or green depending on negative or positive value of the percent change returned by the API.


```javascript
{{parseFloat(GetBitcoinPrice.data.dp)<0?"red":"green"}}
```

  ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31kxm7bpiy6gxy0wv0fg.png)



* And our last step will be to add a new Image widget in the Stats Box to display Up or Down arrows as shown in the following screenshot depending on the negative or positive Percent Change value returned from the API. To do this, follow the steps below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thugkotgcrwrb0fzjtqp.png)
 

 a. Delete the Icon Button widget that comes with the Stats Box widget’s default configuration.
	
 b. Add a new Image widget in place of the Icon Button (inside Stats Box widget). 

  ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxds3tyk94eb29salfhe.png)



 c. Rename this new Image widget as `ImgUpDown`
	
 d. Now we will be embedding following two images in Base64 format in this `ImgUpDown`'s Image 	property.

   ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7baxiqbpmg1eukjn96i.png)


  You can use online image encoder using service like this `https://elmah.io/tools/base64-image-encoder/` to convert an image into Base64 format.

  ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr05tm2qwu7kwpa8uq2s.png)



e. Once you have Base64 equivalents of your images, bind the Image property of `ImgUpDown` widget to following code.  Notice here that if the value of Percent Change is negative we return the Base64 equivalent of red down arrow image and if it is positive we return Base64 equivalent of green up arrow image.



```javascript
{{

parseFloat(GetBitcoinPrice.data.dp)<0? "iVBORw0KGgoAAAANSUhEUgAAADYAAWFQIBxKbwhMrV8283eqQVllVErPOTjOeSGfnaui364X7plY………….cKDu13Qa5mfTI+AVg00vCweFcJhk9mAyjPRYIx2QtFh3OkhpmQMw3rWgDu9S202qzgTgWckfDOee9J":"iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAABGdBTUEAALGPC/xhBQAAA4b………..WxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucy"

}}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pybvvgki6uf0hg18mm9i.png)



Finally, we will setup a timer which runs periodically. It will run depending on whether the auto update switch widget (`SwLive`) is switched on or not. If it is switched on, we start a timer which will run the `GetBitcoinPrice` API at every second. And if it is switched off, we clear the timer. Write the following binding in `SwLive`'s `onChange` event.




```javascript
{{

  (function(){

    if(SwLive.isSwitchedOn){
       setInterval(() => {
        GetBitcoinPrice.run()
        },1000,'timer1')
    }else{
        clearInterval('timer1')
    }

  })()

}}
```

  ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bdsy9080llz3ghgnzrq.png)



By default we don’t want the time to start on page load, so we turn off “Default Selected” property of the widget.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35y6krugocf38s9ut3k8.png)



Now we are ready to publish our app. Click Deploy to take your application live!



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gg67s2v1x6bx1fugma2.png)