Building a Real-Time Bitcoin Price Tracker in Appsmith

#appsmith #javascript #tutorial

Recently, Appsmith introduced the functionality that enables real-time polling of data using JavaScript timers. The data coming from the APIs and queries can now be periodically updated using the 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.

The most important requirement for this project is of an API that would provide us real-time Bitcoin prices. Finnhub 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.

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

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 asGetBitcoinPrice. 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

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.

${{GetBitcoinPrice.data.c}}

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

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.

{{GetBitcoinPrice.data.dp}}% change

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.

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

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.

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).

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.

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

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.

{{

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

}}

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.

{{

  (function(){

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

  })()

}}