Demo DApp 체험하기

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

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

클라이언트 세팅하기

1. 위의 실습자료를 다운받아 압축을 해제합니다. (demo-idol-funding.zip)

2. demo-idol-funding/src/js 디렉토리로 이동합니다. $ cd demo-idol-funding/src/js

3. config.js 파일을 열어서 설정을 확인합니다.

DApp 실행하기

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

1. Idol Funding 디렉토리로 이동합니다. $cd demo-idol-funding

2. 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.

3. Idol Funding Demo는 아직 블록체인과 연결되지 않은 web-application 입니다.

4. 브라우저에서 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가지의 방법을 소개드립니다.

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

2. ​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'를 입력하여 쉽게 확인하실 수 있습니다.

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

1. demo-idol-funding 디렉토리로 이동합니다.

2. src/js/config.js 파일을 변경합니다.

3. 변경된 파일은 다음과 같습니다. **로 표시된 부분은 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*',
  }
}