Eletron를 만져보고 싶습니다. 이번에는 구현 자료로 가상 통화의 판 정보를 표시하고 싶습니다.
Eletron이란, 다시 말하면, Windows/macOS/Linux에서 실행할 수 있는 데스크탑 앱을 HTML+CSS+JavaScript와 같은 Web 기술로 개발할 수 있는 프레임워크입니다. VSCode나 Atom에서 사용되고 있는 프레임워크군요.

전제

Node.js가 설치되어 있어야 합니다.

프로젝트 만들기

프런트 엔드는 Vue.js를 사용하여 만들고 싶으므로 Electron에 Vue.js가 들어있는 보일러 플레이트 electron-vue를 사용하여 프로젝트를 만들려고합니다.

electron-vue는 일본어 문서하지만, 충실하고 있기 때문에 그쪽을 보는 것이 빠르다든지 있습니다만, 아래와 같이 vue-cli를 인스톨 해, vue init로 환경이 곧 만들 수 있습니다.

# vue-cliをインストール
npm install -g vue-cli
# プロジェクト作成
vue init simulatedgreg/electron-vue my-project

# 依存関係をインストールして実行
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

표시되었습니다!

Bitflyer Lightning API 키 획득

Bitflyer Lightning 개발자 페이지에서 API 키와 API 비밀을 발행합니다.



Bitflyer의 API 문서는 아래에 있습니다.
htps : // ぃght 마늘 g. tfぇr. jp/두 cs

예를 들어, 이번에 취득하고 싶은 판 정보의 경우라면, 다음과 같이 간단하게 취득할 수 있습니다.

var request = require('request');
var url = 'https://api.bitflyer.jp/v1/board';
request(url, function (err, response, payload) {
  console.log(payload);
});

라고 써 주목했지만, Bitflyer의 API에는, API 키에 의한 인증이 불필요한 HTTP Public API 와, 인증이 필요한 HTTP Private API 가 있어, 이번 판 정보와 같은 Public인 API를 사용하는 것만이라면 , API 키는 필요하지 않습니다. . .

구현

먼저 프로젝트를 열고 router를 수정하고 판 정보 표시용 페이지로의 라우팅을 작성합니다.

router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'btc',
      component: require('@/components/Btc').default
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

다음으로, 판 정보 표시용의 페이지를 작성합니다.

Btc.vue

<template>
  <main>
    <section class="section">
      <div class="container">
        <h1 class="title">Bitcoin ask/bid volume</h1>
        <board></board>
      </div>
    </section>
  </main>
</template>


<script>
  import Board from './Btc/Board'

  export default {
    name: 'btc',
    components: { Board }
  }
</script>

다음으로, 판 정보 표시용의 컴퍼넌트를 작성합니다.
※Bitflyer의 API는, 위쪽에서 예시한 것처럼 간단하게 사용할 수 있습니다만, 코드에서는 API를 랩 해 모듈화해 사용하도록 하고 있습니다.
※덧붙여 생략했습니다만, CSS는 vuejs+bulma인 buefy 도 인스톨 하고 있습니다.

Btc/Board.vue

<template>
  <div class="is-size-7">
      <b-table
        :data="asks"
        :narrowed="true"
        :bordered="true">
        <template slot-scope="props">
          <b-table-column label="size (Ask)" width="120" numeric class="has-text-success">
            {{ props.row.size.toFixed(8) }}
          </b-table-column>
          <b-table-column label="price" width="100" numeric centered>
            {{ props.row.price.toLocaleString() }}
          </b-table-column>
          <b-table-column label="" width="120">
          </b-table-column>
        </template>
      </b-table>
      <b-table
        :data="bids"
        :narrowed="true"
        :bordered="true">
        <template slot-scope="props">
          <b-table-column label="" width="120" numeric>
          </b-table-column>
          <b-table-column label="price" width="100" numeric centered>
            {{ props.row.price.toLocaleString() }}
          </b-table-column>
          <b-table-column label="size (Bid)" width="120" class="has-text-danger">
            {{ props.row.size.toFixed(8) }}
          </b-table-column>
        </template>
      </b-table>
  </div>
</template>

<script>
  import { BitFlyerClient } from '@tadko/bitflyer-client'

  export default {
    name: 'board',
    mounted () {
      this.$nextTick(function () {
        const bitflyerClient = new BitFlyerClient(process.env.BITFLYER_KEY, process.env.BITFLYER_SECRET)
        window.setInterval(() => {
          bitflyerClient.getBoard()
            .then((board) => {
              this.asks = board.asks.slice(0, 10).reverse()
              this.bids = board.bids.slice(0, 10)
            })
            .catch(console.error)
        },
        3000)
      })
    },
    data () {
      return {
        bids: [],
        asks: []
      }
    }
  }
</script>

실행하면 실시간으로 Bitflyer의 BTC 보드 정보가 표시됩니다.

마지막으로

Electron은, 웹의 기술만으로 데스크탑 앱을 만들 수 있어, 여러가지 브라우저 의존을 신경쓰지 않고 최신의 기술을 사용할 수 있어, 상당히 즐겁기 때문에 앞으로 잠깐 사용해 가려고 생각합니다.