소개

여기서 nem2-sdk 는 nem2-sdk-typescript-javascript 입니다.

환경

Node.js v8.15.1

Windows 10

설치

아래의 명령을 입력했을 때, 여러가지 들을 수 있습니다만, 우선 전부 엔터키 누름으로 진행합니다.

npx create-nuxt-app nem2-sdk-nuxt

cd nem2-sdk-nuxt
npm run dev

http://localhost:3000 로 이동하세요.

뭔가 페이지가 표시되었습니다.

nem2-sdk 추가

여기에 nem2-sdk 를 추가하겠습니다.

npm i nem2-sdk rxjs

쓰기 시점의 버전은 다음과 같습니다.

"nuxt": "^2.4.0"
"rxjs": "^6.4.0"

nuxt.config.js 로 설정합니다.

nuxt.config.js

build: {
  extend(config, ctx) {
    config.node = {
      fs: 'empty',
      net: 'empty',
      tls: 'empty'
    }
  }
}

components/Account.vue 를 작성합니다. 우선 무언가의 계정 정보를 얻기 위해 만들었습니다.

components/Account.vue

<template>
  <div style="margin-top: 2rem;">
    <button @click="getAccountInfo" class="button--grey">getAccountInfo</button>
    <pre style="text-align: left; font-size: xx-small;">{{ accountInfo }}</pre>
  </div>
</template>
<script>
import { Address, AccountHttp, NetworkType } from 'nem2-sdk'

export default {
  name: 'Account',
  data() {
    return {
      accountInfo: null
    }
  },
  methods: {
    getAccountInfo() {
      const accountHttp = new AccountHttp('http://13.114.200.132:3000', NetworkType.MIJIN_TEST);
      const address = Address.createFromRawAddress('SCA7ZS-2B7DEE-BGU3TH-SILYHC-RUR32Y-YE55ZB-LYA2');
      accountHttp.getAccountInfo(address).subscribe((x) => {
        this.accountInfo = JSON.stringify(x, null, "\t");
      })
    }
  }
}
</script>
<style>
</style>

components/index.vue 를 편집합니다.

components/index.vue

<template>
  <section class="container">
    <div>
      <logo />
      <h1 class="title">
        nem2-sdk-nuxt
      </h1>
      <h2 class="subtitle">
        My spectacular Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green"
        >Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >GitHub</a>
      </div>
      <account />
    </div>
  </section>
</template>

<script>
import Logo from '~/components/Logo.vue'
import Account from '~/components/Account.vue'

export default {
  components: {
    Logo,
    Account
  }
}
</script>

이제 페이지를 다시 살펴보겠습니다.

버튼이 추가되었습니다.



버튼을 클릭합니다.


nem2-sdk 를 사용하여 정보를 검색하고 볼 수 있습니다.