[Scriptable] 코인 위젯 만들기 ( Binance & Upbit Bitcoin widget )-1

바이낸스와 업비트에서의 비트코인 가격을 동시에 보여주는 위젯 만들기.

 

1. 바이낸스와 업비트 api를 활용해 필요한 데이터 저장

 

 

바이낸스 API docs

https://binance-docs.github.io/apidocs/spot/en/#change-log

 

업비트 API docs

https://ujhin.github.io/upbit-client-docs/#upbit-client-official-reference

 

 

# 위젯에 들어갈 차트

 

22 라인 

    let step = this.ctx.size.width / 48;

점이 찍히는 x좌표의 간격에 해당하는 step은 차트 가로길이(width)를 48로 나누는 것으로 변경했다.

30분 봉에서 가격을 받아와 좌표를 나타내고 차트를 그릴 것이기 때문이다.

시작점 (09:00 KST) + 24시간 동안의 30분 봉 수 = 49개 이므로 x축의 간격은 48개.

 

차트 참고

https://gist.github.com/kevinkub/b74f9c16f050576ae760a7730c19b8e2

https://github.com/Chrischi-/tradegate-stock-widget-for-scriptable

 

 

# 위젯에 쓰일 색상 정의

 

const ENV = {// Define colors:
    "colors": {
        "bg": new Color('#131722'),
        "normal": new Color('#B2B5BE'),
        "red": new Color('#F23645'),
        "green": new Color('#22AB94'),
        "white": new Color('#FFFFFF'),
        "gray": Color.gray(),
        "gold": new Color('#D4AF37')
    }
}

색상은 트레이딩뷰 차트에서 개발자 도구를 통해 알아낸 색상값을 적용했다.

 

색상 정의 참고

https://github.com/Martlgap/CryptoDepotWidget/blob/main/cryptowidget.js

 

 

 

# binance BTCUSDT data

 

/api/v3/ticker/24hr

https://api.binance.com/api/v3/ticker/24hr?symbol=BTCUSDT 에는 24시간 BTCUSDT의 시세변동에 대한 정보가 담겨 있음. 

 

const binanceSymbol = 'BTCUSDT'
const binanceUrl = `https://api.binance.com/api/v3/ticker/24hr?symbol=${binanceSymbol}`
const binanceReq = new Request(binanceUrl)
const binanceRes = await binanceReq.loadJSON()
const binanceNum = new Intl.NumberFormat('en-US',{minimumFractionDigits: 2 })

 

binanceInfo['symbol'] :

바이낸스 비트코인 심볼 BTCUSDT

 

binanceInfo['lastPrice'] :

binanceInfo['lastPrice'] = Number(binanceRes.lastPrice)

 last Price를 현재 가격으로 사용.

 

binanceInfo['startTime'] :

binanceInfo['startTime'] = start.getTime();
if (hour < 9) {
	start = new Date(start.setDate(start.getDate() - 1));
	binanceInfo['startTime'] = start.getTime();
}

day reset 시간 00:00 UTC (09:00 KST)

 

 

## 바이낸스 BTC 차트에 필요한 데이터

 

/api/v3/klines 에는 시세 캔들 관련 데이터를 포함한다.

 

let binanceChartUrl = `https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=30m&limit=48&startTime=${binanceInfo.startTime}`
const binanceChartReq = new Request(binanceChartUrl)
const binanceChartRes = await binanceChartReq.loadJSON()

 

binanceInfo['openingPrice']:

binanceInfo['openingPrice'] = Number(binanceChartRes[0][1])

BTCUSDT의 시작시간을 위에서 정의한 startTime으로 하는 30분 봉 candelstick 데이터

'https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=30m&limit=48&startTime=${binanceInfo.startTime}'   api url을 통해 시작시간의 가격을 얻는다.

 

 

binanceInfo['timePrice'] :

for (var i = 1; i < binanceChartRes.length; i++) {
	var openPrice = +binanceChartRes[i][1]
	var closePrice = +binanceChartRes[i][4]
	var meanPrice = (openPrice + closePrice) / 2
	binanceInfo.timePrice.push(meanPrice)
}

 

각 30분봉 캔들하나에서 openPrice와 closePrice의 중간가격을 시간에 따른 가격변화 차트를 그리는 데에 필요한 가격으로 사용.

시작시간부터 현재시간까지의 30분봉 캔들의 중간가격들을 배열로 저장.

 

 

binanceInfo['priceChangePresent'] :

binanceInfo['priceChange'] = binanceInfo.lastPrice - binanceInfo.openingPrice
binanceInfo['priceChangePersent'] = persentNum.format(binanceInfo.priceChange / binanceInfo.openingPrice * 100)

시작시간 (09:00 KST)을 기준으로  현재 가격에 대한 가격 변동률을 저장한다.

 

 

# upbit BTCKRW data

 

/v1/ticker

https://api.upbit.com/v1/ticker?markets=KRW-BTC 은 시세 Ticker 조회 - 현재가 정보. 요청 종목의 스냅샷을 반환.

 

const upbitSymbol = 'KRW-BTC'
const upbitUrl = `https://api.upbit.com/v1/ticker?markets=${upbitSymbol}`
const upbitReq = new Request(upbitUrl)
const upbitRes = await upbitReq.loadJSON()
const upbitNum = new Intl.NumberFormat('ko-KR',{minimumFractionDigits: 0 })

 

upbitInfo['symbol'] :

upbitInfo['symbol'] = upbitRes[0].market

업비트 비트코인 종목 구분 정보 KRW-BTC

 

upbitInfo['lastPrice'] :

upbitInfo['lastPrice'] = Number(upbitRes[0].trade_price)

trade_price인 종가를 현재가로 사용

 

upbitInfo['openingPrice'] :

upbitInfo['openingPrice'] = upbitRes[0].prev_closing_price

전일 종가 prev_closing_price 를 시작 가격으로 사용

 

 

## 업비트 BTC 차트 데이터

 

/v1/candles/minutes/{unit}으로 분(Minutes) 단위 시세 캔들을 조회한다.

 

let upbitChartUrl = `https://api.upbit.com/v1/candles/minutes/30?market=KRW-BTC&count=48`
const upbitChartReq = new Request(upbitChartUrl)
const upbitChartRes = await upbitChartReq.loadJSON()

 

upbitInfo['timePrice'] :

for (var i = 0; i < upbitChartRes.length; i++) {
	dateTime = new Date(upbitChartRes[i].candle_date_time_kst);
	var upbitDateTime = dateTime.getTime();
	
	if (upbitDateTime > upbitInfo.startTime) {
		var openPrice = upbitChartRes[i].opening_price
		var closePrice = upbitChartRes[i].trade_price
		var meanPrice = (openPrice + closePrice) / 2
		upbitInfo.timePrice.unshift(meanPrice);
	}
	else {
		break;
	}
}
upbitInfo.timePrice.unshift(upbitInfo.openingPrice);

/v1/candles/minutes/{unit}을 통해 얻은 30분 단위 BTC 데이터는 최근 시간부터 과거 순으로 정렬되어 있다. 가격 변화 차트를 그리는 데에 필요한 30분 봉 가격을 저장하는 timePrice배열에 최근 시간의 30분 봉 가격부터 저장하고 다음 값에 해당하는 이전 30분봉 가격은 배열의 앞에 새로운 값을 추가하는 unshift함수를 사용해 저장한다. 바이낸스 api에서와는 달리 시작시간을 지정할 수 없으므로 조건문에서 캔들 기준시각이 시작시간(09:00 KST) 보다 큰 경우만 timePrice에 저장한다.

 

 

다음 글 보기 =>

https://clolee.tistory.com/48