조회 수 5898 좋아요 21 댓글 30

안녕하세요.

땡글에 리플은 많이 달아보았지만 게시글은 처음이네요 ㅎㅎㅎ

자료실에 올릴까 개발에다 올릴까 고민했는데 html로 개발하실 분들 대상으로 보시라고 여기에 올립니다.

 

예전에 거래소 API로 시세 얻어오는 html코드를 리플로 간단하게 드렸는데

생각보다 쓰시는 분이 종종 있으시는거 같아서 예제 코드 제대로 작성하여 드립니다.

코드 복사 후 붙여넣으시면 아래와 같이 띄워집니다.

 

test.png

 

 

작성한 예제코드의 특징입니다.

(※ 크로스도메인 문제로 익스에서만 제대로 동작합니다.)

 

1. 쉬운 문법 위주로 작성

  - 10년전에 javascript 배웠어도 알 수 있을 정도로 요즘 나온 문법들을 자제하고 최대한 분석이 쉽도록 작성하였습니다.

2. html코드로 독립적 작동 가능

  - 코드를 메모장에 복사 붙여넣기해서 test.html으로 저장해서 실행하면 인터넷 브라우저에서 작동합니다.

3. 4개 타입의 거래소 API 및 환율적용

  - 예제 코드에 작성된 코드를 수정하면 웬만한 거래소 시세를 원화로 가져올 수 있습니다.

4. 알람 기능

  - 설정된 가격의 이상/이하이면 알람이 띄워지도록 작성되었습니다.

5. 크로스도메인 문제 절반해결

  - 빗썸, 코빗이 ajax로 못가져가도록 서버에 설정이 있어서 해결하였는데...... 익스에서만 동작합니다ㅠㅠ

    (jquery 구버전에서는 크로스도메인 가능하지만 브라우저 자체에서 막습니니다.)

 

역시 javascript같은 프론트엔드는 크로스도메인 문제같은게 발생해서 만들기 어렵네요.
제대로 만드실분은 php나 python같은 백엔드에서 API 처리하도록 만드시는걸 추천드립니다.

 

아래 예제 코드입니다.

 

<!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
        <style>
            table {border-collapse: collapse}
            td, th {padding:5px; width:120px}
        </style>
        <script src="https://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script>
            // 전역 변수 세팅
            var usd = 0;
            var alert_array = new Array();
            
            // 천단위 콤마 함수
            function numberWithCommas(x) {
                return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            }
            // 숫자 외 문자열 제거 함수
            function numberDeleteChar(x) {
                return x.toString().replace(/[^0-9]+/g, '');
            }
            
            // 달러 환율 함수 (ajax 동기식) <현재 URL이 막혀 밑의 함수로 대체합니다.>
            function usdkrw_(){
                $.ajax({
                    type: 'GET',
                    async: false, //동기식 처리
                    url:'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%3D%22USDKRW%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys',
                    success: function(data) {
                    usd = parseFloat(data['query']['results']['rate']['Rate']); // 전역변수에 저장하여 활용
                    $('#USDKRW').html('환율 : $1 = \\' + usd);
                    }
                });
            }

            // 달러 환율 함수 (ajax 동기식) <2017.09.18 수정>
            function usdkrw(){
                $.ajax({
                    type: 'GET',
                    async: false, //동기식 처리
                    url:'http://download.finance.yahoo.com/d/quotes.csv?e=.csv&f=c4l1&s=USDKRW=X',
                    success: function(data) {
                    usd = parseFloat(data.split(",")[1]); // 전역변수에 저장하여 활용
                    $('#USDKRW').html('환율 : $1 = \\' + usd);
                    }
                });
            }
            
            // 폴로닉스 함수 (환율 함수와 함께 적용되어야함)
            function poloniex(){
                $.get('https://poloniex.com/public?command=returnTicker', function(data) {
                    var poloniex_btc = parseFloat(data['USDT_BTC']['last']);
                    var poloniex_eth = parseFloat(data['USDT_ETH']['last']);
                    var poloniex_xrp = parseFloat(data['USDT_XRP']['last']);
                    $('#poloniex_BTC').html('\\ ' + numberWithCommas(Math.round(usd * poloniex_btc))); // 거래소 시세 정보 표에 값 세팅
                    $('#poloniex_ETH').html('\\ ' + numberWithCommas(Math.round(usd * poloniex_eth)));
                    $('#poloniex_XRP').html('\\ ' + numberWithCommas(Math.round(usd * poloniex_xrp)));
                });
            }
            
            // 코인원 함수
            function coinone(){
                $.get('https://api.coinone.co.kr/ticker?currency=all', function(data) {
                    var coinone_btc = parseFloat(data['btc']['last']);
                    var coinone_eth = parseFloat(data['eth']['last']);
                    var coinone_xrp = parseFloat(data['xrp']['last']);
                    $('#coinone_BTC').html('\\ ' + numberWithCommas(coinone_btc)); // 거래소 시세 정보 표에 값 세팅
                    $('#coinone_ETH').html('\\ ' + numberWithCommas(coinone_eth));
                    $('#coinone_XRP').html('\\ ' + numberWithCommas(coinone_xrp));
                });
            }
            
            // 빗썸 함수 (크로스도메인 문제로 익스에서만 됨)
            function bithumb(){
                $.get('https://api.bithumb.com/public/ticker/ALL', function(data) {
                    var bithumb_btc = parseFloat(data['data']['BTC']['closing_price']);
                    var bithumb_eth = parseFloat(data['data']['ETH']['closing_price']);
                    var bithumb_xrp = parseFloat(data['data']['XRP']['closing_price']);
                    $('#bithumb_BTC').html('\\ ' + numberWithCommas(bithumb_btc)); // 거래소 시세 정보 표에 값 세팅
                    $('#bithumb_ETH').html('\\ ' + numberWithCommas(bithumb_eth));
                    $('#bithumb_XRP').html('\\ ' + numberWithCommas(bithumb_xrp));
                });
            }
            
            // 코빗 함수 (크로스도메인 문제로 익스에서만 됨)
            function korbit(){
                $.get('https://api.korbit.co.kr/v1/ticker?currency_pair=btc_krw', function(data) {
                    data = JSON.parse(data); //json데이터로 전달 안되어 변환
                    var korbit_btc = parseFloat(data['last']);
                    $('#korbit_BTC').html('\\ ' + numberWithCommas(korbit_btc));
                });
                $.get('https://api.korbit.co.kr/v1/ticker?currency_pair=eth_krw', function(data) {
                    data = JSON.parse(data); //json데이터로 전달 안되어 변환
                    var korbit_eth = parseFloat(data['last']);
                    $('#korbit_ETH').html('\\ ' + numberWithCommas(korbit_eth));
                });
                $.get('https://api.korbit.co.kr/v1/ticker?currency_pair=xrp_krw', function(data) {
                    data = JSON.parse(data); //json데이터로 전달 안되어 변환
                    var korbit_xrp = parseFloat(data['last']);
                    $('#korbit_XRP').html('\\ ' + numberWithCommas(korbit_xrp));
                });
            }
            
            // 알람 세팅 함수
            function alert_setting() {
                var selectTrade = $("#targetTrade option:selected").val(); // 선택된 거래소
                var selectAmount = numberDeleteChar($("#targetAmount").val()); // 선택된 시세
                var targetIf = $("#targetIf option:selected").val(); // 이상/이하
                var tmp_array = new Array(selectTrade, selectAmount, targetIf); // 세팅 값 3개를 묶음
                alert_array.push(tmp_array); // 세팅 값 저장
                if(targetIf == '0')
                    var targetIfPrint = "<font color='blue'>이하</font>";
                else if(targetIf == '1')
                    var targetIfPrint = "<font color='red'>이상</font>";
                $("#alert_list").append("<li><b>"+selectTrade+"</b> 거래소의 시세가 <b>"+numberWithCommas(selectAmount)+"</b> 원 "+targetIfPrint+" 일 때 알람</li>")
            }
            
            // 알람 실행 함수
            function alert_start() {
                // 알람 배열 크기만큼 순회
                for(var i=0; i < alert_array.length; i++) {
                    if(typeof alert_array[i]=='undefined') continue; // 지워진 알람이면 건너뛰기
                    var selectTrade = alert_array[i][0];
                    var selectAmount = alert_array[i][1];
                    var targetIf = alert_array[i][2];
                    var currentAmount = numberDeleteChar($('#'+selectTrade).html()); // 선택된 거래소의 현재 시세
                    var d = new Date();
                    
                    if(targetIf == '0' && parseFloat(currentAmount) <= parseFloat(selectAmount)) { // 선택된 거래소의 현재 시세가 설정 값보다 이하일때
                        alert(selectTrade + " 거래소의 시세가 " + selectAmount + "원 이하(" + currentAmount + ")입니다.\n" + d.toString());
                        delete(alert_array[i]); // 알람 세팅 값 삭제
                    } else if(targetIf == '1' && parseFloat(currentAmount) >= parseFloat(selectAmount)) { // 선택된 거래소의 현재 시세가 설정 값보다 이상일때
                        alert(selectTrade + " 거래소의 시세가 " + selectAmount + "원 이상(" + currentAmount + ")입니다.\n" + d.toString());
                        delete(alert_array[i]); // 알람 세팅 값 삭제
                    }
                }
                
                // 알람목록 갱신
                $("#alert_list").empty();
                for(var i=0; i < alert_array.length; i++) {
                    if(typeof alert_array[i]=='undefined') continue; // 지워진 알람이면 건너뛰기
                    var selectTrade = alert_array[i][0];
                    var selectAmount = alert_array[i][1];
                    var targetIf = alert_array[i][2];
                    if(targetIf == '0') var targetIfPrint = "<font color='blue'>이하</font>";
                    else if(targetIf == '1') var targetIfPrint = "<font color='red'>이상</font>";
                    $("#alert_list").append("<li><b>"+selectTrade+"</b> 거래소의 시세가 <b>"+numberWithCommas(selectAmount)+"</b> 원 "+targetIfPrint+" 일 때 알람</li>")
                }
                
            }
            

            // 현재 시간 갱신
            function CurrentTime() {
                var d = new Date();
                $("#lastUpdate").html(d.toString());
            }
            
            // 갱신 함수
            function proc() {
                try {
                    usdkrw(); // 환율
                    poloniex(); // 폴로닉스
                    coinone(); // 코인원
                    bithumb(); // 빗썸
                    korbit(); // 코빗
                    alert_start(); // 알람 확인
                    CurrentTime(); // 갱신 시간
                } catch(e){
                    
                } finally {
                    setTimeout("proc()", 10000); //10초후 재시작
                }
            }
        </script>
    </head>
    <body onLoad="proc()">
        <!-- 환율 정보 -->
        <span id="USDKRW"></span>
        
        <!-- 거래소 시세 정보 -->
        <table border=1>
            <tr>
                <th></th>
                <th>폴로닉스</th>
                <th>코인원</th>
                <th>빗썸</th>
                <th>코빗</th>
            </tr>
            <tr>
                <td>비트코인</td>
                <td id="poloniex_BTC"></td>
                <td id="coinone_BTC"></td>
                <td id="bithumb_BTC"></td>
                <td id="korbit_BTC"></td>
            </tr>
            <tr>
                <td>이더리움</td>
                <td id="poloniex_ETH"></td>
                <td id="coinone_ETH"></td>
                <td id="bithumb_ETH"></td>
                <td id="korbit_ETH"></td>
            </tr>
            <tr>
                <td>리플</td>
                <td id="poloniex_XRP"></td>
                <td id="coinone_XRP"></td>
                <td id="bithumb_XRP"></td>
                <td id="korbit_XRP"></td>
            </tr>
            <tr>
                <td>최근 갱신 시간</td>
                <td colspan="4" id="lastUpdate"></td>
            </tr>
        </table>
        
        <!-- 작대기 구분 -->
        <hr>
        
        <!-- 알람 설정 -->
        <select id="targetTrade">
            <option value="poloniex_BTC">폴로닉스 비트코인</option>
            <option value="poloniex_ETH">폴로닉스 이더리움</option>
            <option value="poloniex_XRP">폴로닉스 리플</option>
            <option value="coinone_BTC">코인원 비트코인</option>
            <option value="coinone_ETH">코인원 이더리움</option>
            <option value="coinone_XRP">코인원 리플</option>
            <option value="bithumb_BTC">빗썸 비트코인</option>
            <option value="bithumb_ETH">빗썸 이더리움</option>
            <option value="bithumb_XRP">빗썸 리플</option>
            <option value="korbit_BTC">코빗 비트코인</option>
            <option value="korbit_ETH">코빗 이더리움</option>
            <option value="korbit_XRP">코빗 리플</option>
        </select> 이
        <input id="targetAmount" type="text" value="3000000"> 원
        <select id="targetIf">
            <option value="1">이상</option>
            <option value="0">이하</option>
        </select> 일때 알람
        <input id="targetSetting" type="button" value="설정" onClick="alert_setting()">
        
        <!-- 알람 목록 -->
        <ul id="alert_list"></ul>
    </body>
</html>

 

 

코드는 예제이니 어떻게 사용하시든 자유입니다.

다만, 타 사이트에 게시글 작성 시 출처는 땡글임을 명시 부탁 드리겠습니다.

 

 

Comment '30'

개발자 추천글게시판

개발 추천글 모음입니다.

List of Articles
번호 제목 좋아요 조회 수 글쓴이 날짜
49 HI Miner basic 0.4.5 업데이트 했습니다. 무료 채굴관리 프로그램 HI Miner basic 0.4.5 버전 업데이트 안내입니다.   ※ 베타인 만큼 오류가 있을 수 있습니다. ※ 기존 버전 사용하시는 분들은 채굴 설정을 다시 해주시기 바랍니다. ※ 사용중 오류가 발생하면... 10 9 3059
AMDMANIA
2017.08.10
48 안녕하세요. 코인알람 개발자입니다~! 21 file 8 4249
CoinAlarm
2017.08.07
47 주말저녁에 bitcoinYo 한글버전을 출시했습니다. 어서 코인 버셔요 ㅋㅋ; 15 file 9 6836
이더리움링
2017.08.06
46 무료 개인용 채굴관리 프로그램 HI Miner basic 0.4 버전 업데이트 했습니다. 32 file 25 6099
AMDMANIA
2017.08.02
» 거래소 API 시세정보 및 알람 표시 HTML 예제 코드입니다. 안녕하세요. 땡글에 리플은 많이 달아보았지만 게시글은 처음이네요 ㅎㅎㅎ 자료실에 올릴까 개발에다 올릴까 고민했는데 html로 개발하실 분들 대상으로 보시라고 여기에 올립니다.   예전에 거래소 API로 시세 얻어... 30 file 21 5898
크로비
2017.08.02
44 비트코인이 현실생활에서 많이 사용되길 기대하며 ^^   Hello world,   비트코인 의 영원한 발전을 희망합니다! 땡글인으로써 비트코인 관련한 새로운 제품을 선보이게 되서 기쁘게 생각합니다. 오늘 소개해 드릴 상품은 비트코인으로 물건을 판매하길 원하는 사용자를 ... 5 14 4749
마이닝링
2017.08.01
43 모니터링 프로그램 ver 0.4 업데이트 67 file 40 11052
남자별
2017.07.19
42 채굴기 모니터링 뷰어[ EMiner Manager ] 업데이트 입니다.[버젼 0.9.1] 8 file 6 3901
마루마루
2017.07.19
41 채굴 관리프로그램 MINE ASSIST v1.2 공개 및 상용 서비스 일정 안내 36 file 13 3956
파이리
2017.07.14
40 채굴기 모니터링 뷰어[ EMiner Manager ] 입니다.[버젼 0.9.0] 17 file 14 4518
마루마루
2017.07.14
39 EWBF 0Sol 시 강제 종료 프로그램 44 file 20 4844
아뵤
2017.07.03
38 HI Miner basic 0.3 업데이트 했습니다. 11 file 29 3994
AMDMANIA
2017.07.01
37 [봇] 카톡 거래소 시세조회 및 알트코인 조회 봇입니다! 29 file 21 4126
지우긩
2017.06.30
36 HI Miner basic 0.2 업데이트 했습니다. 8 file 14 2415
AMDMANIA
2017.06.29
35 개인용 채굴관리 프로그램 HI Miner basic 입니다. 27 file 12 5183
AMDMANIA
2017.06.28
34 윈도우10 각종 기능 설정 도우미 배치파일 10 file 12 5168
남자별
2017.06.27
33 단순 콘솔 모니터링 프로그램 ver 0.2 배포 44 file 36 6544
남자별
2017.06.26
32 새로운 이더리움 블록체인에 대한 아이디어(이더리움 오리지널?) 자유게시판에 남겼다가 개발로 옭깁니다   이더리움의 테스트넷을 전전하면서, 그리고 제트캐쉬의 복제판인 제트클래식을 보면서 든 생각입니다만, 이더리움을 기반으로 한 블록체인을 만들고 몇가지 손본 다음에 이... 43 8 6080
인텔지원
2017.06.23
31 MINE ASSIST 베타 v1.1 공개합니다. 14 file 11 3010
파이리
2017.06.22
30 (초보용)Python을 이용한 마플허 및 코인원 API 사용법 코인원 도큐멘터리 : http://doc.coinone.co.kr/ 마풀허 : https://github.com/MPOS/php-mpos/wiki/API-Reference   python에서 사용할 모듈은 request, re입니다.   -마풀허-   기본적으로 http로 https://마풀허풀... 11 17 6148
mechasong
2017.06.20
Board Pagination Prev 1 2 3 4 5 Next
/ 5