Appsmith에서 실시간 비트코인 가격 추적기 구축

최근 Appsmith에는 JavaScript 타이머를 사용하여 real-time polling of data을 활성화하는 기능이 도입되었습니다.API 및 쿼리의 데이터는 현재 JavaScript의 setInterval() 메소드를 사용하여 정기적으로 업데이트할 수 있습니다.
setInterval() 방법은 코드 세그먼트를 고정 호출 간격으로 반복합니다.이전 Appsmith에서는 데이터를 업데이트하려면 새로 고침 버튼을 수동으로 클릭해야 했습니다.하지만 이제 JavaScript 타이머를 사용하면 프로그래밍을 통해 실현할 수 있습니다.
본 강좌에서 우리는 비트코인 가격 추적기 응용 프로그램을 구축할 것이다. 아래와 같이 데이터의 실시간 조회를 보여 준다.이를 위해 Stats Box 위젯과 최근에 도입한 타이머 기능을 사용합니다.

이 프로젝트의 가장 중요한 요구는 실시간 비트코인 가격의 API를 제공하는 것이다.Finnhub은 바로 이런 사이트로 무료 API를 제공하여 실시간 주식, 화폐와 암호화를 방문한다.따라서 첫 번째 단계는 Finnhub에 계정을 만들어서 API에 접근하는 키를 얻는 것입니다.
Finnhub에 계정을 만든 후 다음과 같이 API 키에 액세스할 수 있습니다.

Finnhub는 재무 데이터를 얻기 위해 몇 개의 API를 제공합니다.다음과 같이 Quote API를 사용하여 비트코인 가격을 추적합니다.

그런 다음 새 Appsmith 응용 프로그램을 만듭니다.왼쪽 메뉴 패널에서 데이터 소스를 클릭하고 새 API 작성을 선택합니다.새 API의 이름을 GetBitcoinPrice으로 변경합니다.비트코인 가격은 Finhub Quote API를 입력하면 다음과 같습니다.https://finnhub.io/api/v1/quote?symbol=BINANCE:BTCUSDT&token=YOUR_API_KEY
이제 메뉴 패널에서 클릭하여 창의 작은 위젯 부분을 엽니다.통계 상자와 스위치를 캔버스 위에 끌어다 놓으세요.통계 상자는 텍스트 상자와 아이콘 등 여러 요소로 구성된 복합 소부품이다.Stats Box 위젯의 이름을 StatBox, Switch 위젯의 이름을 SwLive으로 변경합니다.
지정된 단계에 따라 Stats Box 위젯을 구성하여 위에서 구성한 API에서 가져올 비트코인 가격을 표시합니다.

은 첫 번째 텍스트 상자의 텍스트를'비트코인 가격'으로 변경하고 텍스트 색상과 글꼴 크기를 원하는 선택으로 변경합니다.

은 두 번째 텍스트 상자를 TxtPrice으로 바꾸고 텍스트 속성을 다음과 같은 코드에 연결합니다.이 코드는 GetBitcoinPrice API에서 현재 비트코인 가격을 추출하여 통계 상자에 텍스트로 표시합니다.

${{GetBitcoinPrice.data.c}}

다음은 Finnhub API가 반환하는 샘플 응답입니다. 여기서 c은 현재 가격이고 dp은 이전 변경 사항입니다.

은 세 번째 텍스트 상자를 TxtChange으로 바꾸고 다음 코드로 텍스트 속성을 연결합니다.이 코드는 GetBitcoinPrice API에서 비트코인 가격의 백분율 변화를 추출합니다.

{{GetBitcoinPrice.data.dp}}% change  

현재 아래 코드로 TxtChange 작은 위젯의 텍스트 색상 속성을 연결합니다.이 코드는 API가 반환하는 백분율에 따라 음수 또는 양수 값을 변경하여 표시되는 텍스트 색상을 빨간색 또는 녹색으로 변경합니다.

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

, 우리의 마지막 단계는 통계 상자에 새로운 이미지 위젯을 추가하는 것입니다. API가 되돌아오는 마이너스나 양의 백분율 변화값에 따라 아래 화면 캡처와 같은 위쪽 또는 아래쪽 화살표를 표시합니다.이 작업을 수행하려면 다음 절차를 따르십시오.

a. 통계 상자 위젯의 기본 설정에 첨부된 아이콘 단추 위젯을 삭제합니다.
b. 아이콘 단추 대신 새 이미지 위젯을 추가합니다. (통계 상자 위젯 내부에 있습니다.)

c. 이 새 그림 위젯을 ImgUpDown으로 이름 바꾸기
d, 현재 우리는 ImgUpDown의 Image 속성에 다음과 같은 두 개의 Base64 형식의 이미지를 삽입할 것이다.

온라인 이미지 인코더를 사용할 수 있습니다. https://elmah.io/tools/base64-image-encoder/과 같은 서비스로 이미지를 Base64 형식으로 변환할 수 있습니다.

e. 이미지의 Base64 등가물을 획득하면 ImgUpDown 작은 위젯의 Image 속성을 아래 코드에 귀속시킨다.백분율 변화 값이 음수이면 Base64와 같은 빨간색 아래쪽 화살표 이미지를, 양수이면 Base64와 같은 녹색 위쪽 화살표 이미지를 반환합니다.

{{

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

}}

마지막으로, 우리는 정기적으로 운행하는 타이머를 설정할 것이다.자동 업데이트 스위치 위젯 (SwLive) 이 켜져 있는지 여부에 따라 실행됩니다.켜져 있으면 초당 GetBitcoinPrice API를 실행하는 타이머를 시작합니다.만약 그것이 꺼진다면, 우리는 타이머를 지울 것이다.SwLive의 onChange 이벤트에서 다음과 같은 귀속을 작성합니다.

{{

  (function(){

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

  })()

}}

기본적으로, 페이지를 불러올 시간이 있기를 원하지 않기 때문에, 작은 위젯의 '기본 선택' 속성을 닫습니다.

지금 우리는 우리의 응용 프로그램을 발표할 준비를 하고 있다.Deploy를 클릭하여 응용 프로그램을 시작합니다!