Demo DApp 체험하기

[실습자료]
https://luniverse.s3.ap-northeast-2.amazonaws.com/demo/demo-idol-funding.zip

Demo DApp 체험하기

루니버스를 이용하여 DApp을 개발하는 과정을 Funding Demo DApp을 만들며 복습해봅시다.
클라이언트(Front-end)는 Vue.js와 axios로 개발되어 있으며 서버(Back-end)는 루니버스를 사용하여 DApp과 Transaction을 정의합니다.
클라이언트와 서버간의 통신은 루니버스에서 제공하는 REST API를 사용하여 진행합니다.

클라이언트 세팅하기

위의 실습자료를 다운 받아 압축을 해제합니다. (demo-idol-funding.zip)
demo-idol-funding/src/js 디렉토리로 이동합니다.
$ cd demo-idol-funding/src/js
config.js 파일을 열어서 설정을 확인합니다.

DApp 실행하기

웹 서버 실행하기 : idol-funding Application 을 브라우저에서 접속하기 위해서는 웹 서버를 실행해야 합니다. 이 예제에서는 npm run serve를 이용해서 웹 서비스를 제공합니다. 예제는 다음과 같은 순서로 진행합니다.

Idol Funding 디렉토리로 이동합니다.
$cd demo-idol-funding
idol-funding Application 을 서비스 하기 위한 웹 서버를 실행합니다.
$ npm install
$ npm run serve

DONE  Compiled successfully in 10488ms            

 
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.17.43.38:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Idol Funding Demo는 아직 블록체인과 연결되지 않은 web-application 입니다.
브라우저에서 http://localhost:8080 로 접속합니다.

서버 세팅하기

루니버스 콘솔에서 아래와 같이 서버를 세팅합니다.

사이드체인 환경 구축 및 MT 생성은 유로로 체인 플랜을 구매하여야 진행이 가능한 부분으로 배제하고 무료 체험 버전(30일)인 Free Trial 버전에서 적용할 수 있도록 ST를 생성하여 Demo DApp의 서버를 세팅합니다.

idol-funding 용 루니버스 DApp 및 API Key 생성하기

guide : DApp 생성하기

DApp Name : IdolFunding
DApp Description : IdolFunding Demo DApp

윗 내용은 모두 Demo를 위해 임의로 작성된 내용입니다. 원하시는 문구를 입력해서 설정하실 수 있습니다.

API Key 생성하기

Console 홈 > DApp 선택 > API Key > Generate

Side Token 생성하기

guide : 사이드 토큰(ST) 발행하기
idol-funding 에서 사용할 토큰을 [Console]에서 생성합니다. RewardToken(RWT)으로 해당 토큰의 명세는 다음과 같습니다.

RewardToken (RWT)
-TokenName : RewardToken
-TokenSymbol : RWT
-1MT : 100.00 PT
-Initail Supply : 10000
-Decimal : 18

윗 내용은 모두 Demo를 위해 임의로 작성된 내용입니다. 숫자를 바꿔가며 시험해보실 수 있습니다.
Token Symbol의 경우, Demo 참여자 모두 루니버스에서 생성한 Free Trial 체인을 사용하기 때문에 Name 및Symbol 명 중복이 발생할 수 있습니다.
다음과 같은 경우 (R+휴대전화 뒷 네자리 ex] R1234 ) 로 생성하시면 중복을 피하실 수 있습니다.

idol-funding 용 스마트 컨트랙트 배포하기

스마트 컨트랙트를 배포하실 수 있는 2가지의 방법을 소개드립니다.

루니버스 콘솔에서 스마트 컨트랙트 배포하기
-Contract Name : Product
-Description : Product
-Contract File : Product.sol
-Contract Select : Product ( contract file 첨부 후 선택 )
Remix IDE로 스마트 컨트랙트 배포하기

/*Product.sol*/

pragma solidity ^0.4.18;

contract Product {
 string [8] owner;

 function setOwner(uint _index, string _name) public {
   owner[_index] = _name;
 }

 function getOwner(uint _index) public view returns (string) {
   return owner[_index];
 }
}

루니버스 DApp에서 idol-funding용 트랜잭션 정의하기

idol funding에서는 getOwner와 setOwner 라는 Product의 소유주를 블록체인상에 쓰고 읽는 2개의 트랜잭션을 필요로 합니다. 이를 위해 다음과 같이 2개의 트랜잭션을 정의합니다.

guide : 트랜잭션 목록(Transaction List) 만들기

(1) getOwner Function 정의

-Token/Contract: [User Contract] Product
-Function: getOwner(uint256)
-Action Name: getOwner
-Description: getOwner

(2) setOwner Function 정의

-Token/Contract: [User Contract] Product
-Function: setOwner(uint256, string)
-Action Name: setOwner
-Description: setOwner

idol- funding용 DApp의 EOA List 정의하기

idol-funding에서는 PD Account와 User Account라는 2개의 EOA를 필요로 합니다. 이를 위해 아래 2개의 EOA를 생성하되 개인키를 서버에서 관리하기 위해 REOA(Remote External Owned Account)형태로 계정을 생성합니다.

guide : Whitelist IP 및 원격 EOA(REOA) 생성하기
PDAccount 생성
-Name: PdAccount
-Description: PdAccount

User Account 생성
-Name: UserAccount
-Description: UserAccount

idol-funding 용 Side Token(RWT)의 트랜잭션 정의하기

guide : 트랜잭션 목록(Transaction List) 만들기

(1)Like Transaction 생성하기

-Token/Contract: [Side Token] RWT (RewardToken)
-Function: Free Simple Transfer
-Action Name: like
-Description: like
-Sender: pd
-Receiver: Flexible

(2)Funding Transaction 생성하기

-Token/Contract: [Side Token] RWT (RewardToken)
-Function: Free Simple Transfer
-Action Name: funding
-Description: funding
-Sender: pd
-Receiver: Flexible

(3)Purchase Transaction 생성하기

-Token/Contract: [Side Token] RWT (RewardToken)
-Function: Free Simple Transfer
-Action Name: purchase
-Description: purchase
-Sender: Flexible
-Receiver: pd

PD Account에 Side Token 전송하기

guide : 사이드 토큰(ST) 전송하기

(1) 생성된 RWT Token을 PdAccount에게 전송

-Recipient: PDAccount EOA Address 입력
-Amount Sent : 10000

Amount는 충분한 테스트를 위해 임의로 지정한 값입니다.

Luniverse Transction API에 IP Whitelist 등록하기

guide: Whitelist IP 및 원격 EOA(REOA) 생성하기

Add Whitelist IP클릭 후, demo-idol-funding가 적용된 머신의 outbound ip주소를 등록합니다.

*IP 주소는 google에 'myip'를 입력하여 쉽게 확인하실 수 있습니다.

클라이언트와 서버 연결하기

demo-idol-funding 디렉토리로 이동합니다.
src/js/config.js 파일을 변경합니다.
변경된 파일은 다음과 같습니다.
**로 표시된 부분은 Luniverse Console에서 사이드 체인 ID, MT symbol, ST symbol, PD 및 User의 EOA Address, DApp API Key를 확인하여 입력해야 합니다.

module.exports = {
  Config : {
    chainId: '*CHAIN ID HERE*',
    mt: {
      symbol: '*MT SYMBOL HERE*',
    },
    st: {
      symbol: '*ST SYMBOL HERE*',
    },
    walletAddress: {
      pd: '*PD ADDRESS HERE*',
      user: '*USER ADDRESS HERE*'
    },
    dapp: {
      apiKey: '*DAPP API HERE*'
    },
    txActionName: {
      like: '*like*',
      funding: '*funding*',
      purchase: '*purchase*',
      getOwner: '*getOwner*',
      setOwner: '*setOwner*'
    },
    userName: '*USER NAME HERE*',
  }
}

Luniverse User Guide

Luniverse User Guide

Search results for "{{ search.query }}"

Demo DApp 체험하기