[실습자료]
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 첨부 후 선택 )
/*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 등록하기
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*',
}
}
Updated about a year ago