Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

세션5. web3.js와 Node.js 를 사용한 dApp 개발

14,376 views

Published on

이더리움 연구회 정기 발표회, 세션5 - web3.js와 Node.js 를 사용한 dApp 개발

Published in: Software
  • Be the first to comment

세션5. web3.js와 Node.js 를 사용한 dApp 개발

  1. 1. web3.js와 node.js를 사용한 dApp 개발 김재욱 cmdhema@gmail.com
  2. 2. 목차 • web3.js, truffle • dApp 구조 및 구현과정 • 주요 함수 소개 • 시연
  3. 3. web3.js & truffle • Ethereum Compatible JavaScript API • Ethereum 의 JavaScript API 이다. 내부적으로는 JSON RPC 를 통해 eth / geth 와 통신한다. • Geth/Eth 의 Javascript Console 이나 브라우져, Node.js runtime 에서 사용할 수 있는 API 이다. • Web3.js는 abi(Application Binary Interface)로 EVM과 통신한다. • truffle은 solidity로 작성된 Smart Contract 소스 코드를 컴파일하고 테스트하고 이더리움 네트워크에 배포할 수 있도록 하는 Contract 개발 framework이다.
  4. 4. dAPP 구조
  5. 5. dAPP 구현 과정 Smart Contract 설계 Smart Contract 구현 Smart Contract Compile dApp 구조 설계 dApp 구현 Contract call 설계 기타 packages send transaction get transaction event watch contract address abi Contract, web3 연동
  6. 6. dApp 구현 Set Get 블록체인에 데이터를 기록하는 것 블록체인의 데이터를 가져오는 것 Transaction을 보낸다. Transaction 발생 X Value(eth), Gas 필요 Value, Gas 필요하지 않다. Hex string 값으로 저장한다. Hex string 값을 읽어온다. Transaction이 Mining되었다는 callback 함수를 지원하지 않는다. get 함수를 호출하면 callback 함수로 데이터를 받아올 수 있다. 전송한 Transaction이 Mining되었나 를 확인하는 코드 작성 필요한다. callback 함수로 데이터를 바로 받아 온다. 복잡하거나 큰 데이터 등을 저장하기 위해서는 swarm과 같은 p2p 스토리지 를 사용하는 것이 좋다. Contract call 함수의 두 종류
  7. 7. dApp 구현 abi로 Contract와 web3 연동 1. deploy할 Contract import 2. contract compile truffle compile 3. contract deploy truffle deploy 4. abi를 포함한 json 파일 자동 생성 5. json 파일에서 Contract의 address 확인 6. json 파일 import 후 abi 필드 추출 7. web3 함수 호출 2,3. truffle migrate Solidity web3
  8. 8. dApp 구현 abi로 Contract와 web3 연동 deploy할 contract sol 파일을 import 하고 deploy 한다. deploy 함수의 두번째 인자부터는 Contract의 생성자이다.
  9. 9. dApp 구현 abi로 Contract와 web3 연동 truffle compile 수행 후 sol과 json 파일 1:1 생성 후 truffle deploy deploy 한 Contract의 json 파일 마다 networks의 address 필드 생성. 이 address가 contract의 주소이다.
  10. 10. dApp 구현 abi로 Contract와 web3 연동 truffle compile에서 생성된 json 파일을 불러오고 abi 필드 추출 abi 필드와 contract address 주소로 contract를 호출한다.
  11. 11. dApp 구현 send transaction Contract set call send transaction to EVM web3 Contract function call interface transaction Id is mining done? return transaction data
  12. 12. dApp 구현 send transaction 함수명 web3.eth.sendTransaction(transactionObject [, callback]) 주요 파라미터 from 보내는 wallet의 주소 to 받는 wallet의 주소 value 보낼 이더의 양(hex) gas 지불할 가스의 양(hex) 리턴 32Byte의 hex값, Transaction의 Id
  13. 13. dApp 구현 send transaction 트랜잭션이 정상적으로 기록됐는지 확인하기 위해서 res로 받은 Transaction Id로 getTransaction 함수를 호출한다.
  14. 14. dApp 구현 get transaction 함수명 web3.eth.getTransaction(transactionId [, callback]) 주요 파라미터 transactionId sendTransaction으로 받은 Transaction Id 리턴 트랜잭션의 정보를 담은 객체
  15. 15. dApp 구현 get transaction •getTransaction의 결과가 null 이면 해당 트랜잭션이 mining이 되지 않다는 뜻이다. •로직상 mining이 되고 진행되어야할 부분이 있으면 timer를 실행하여 주기적으로 트랜잭션이 mining이 되었는지 확인해야한다. •따라서 getTransaction 함수를 x초 단위로 호출하여 null이 아니면 다음 로직이 실행되도록 코딩한다.
  16. 16. dApp 구현 get transaction 트랜잭션이 정상적으로 기록됐는지 확인하기 위해서 res로 받은 Transaction Id로 getTransaction 함수를 호출한다. 마이닝이 됐으면 getTransaction 결과는 null이 아니다.
  17. 17. dApp 구현 get transaction receipt 함수명 web3.eth.getTransactionReceipt(hashString [, callback]) 주요 파라미터 transactionId sendTransaction으로 받은 Transaction Id 리턴 트랜잭션의 Receipt 정보를 담은 객체
  18. 18. dApp 구현 get transaction receipt
  19. 19. dApp 구현 get transaction receipt •Contract에서 sendTransaction의 결과를 콜백함수로 받을수 있는 방법은 없다. •getTransactionReceipt에서 logs의 data 필드는 setTransaction의 결과 값이 저장이 된다. •data 필드를 파싱하면 sendTransaction의 결과 값을 얻어 올 수 있다.
  20. 20. dApp 구현 get transaction receipt •Transfer를 호출한 결과가 logs에 기록된다. •msg.sender => 00000000000000000000000064e45fa2c1d5c55f 48790cad0ae036f073a97353 •_to => 000000000000000000000000517fb91985925bf8 e3c3da3826fe733b467bc953 •value => 000000000000000000000000000000000000000 00000000000000000000001f4 data: '0x00000000000000000000000064e45fa2c1d5c55f48790cad0ae036f073a97353000000000000000000000000517fb91 985925bf8e3c3da3826fe733b467bc95300000000000000000000000000000000000000000000000000000000000001f4 ',
  21. 21. dApp 구현 Event Filter •Contract에서 event 형으로 선언한 함수가 호출되면 EVM에서 Event가 발생한다. •event 형으로 선언한 함수는 전부 호출을 감지할 수 있다. 이를 콜백처럼 활용 가능하다.
  22. 22. dApp 구현 •세션4의 CrowdSale 예제를 node.js + truffle + solidity로 구현한 dApp을 시연 • node.js : v8.9.0 • npm web3.js : 0.18.0 • truffle : 4.0.1 • solidity 0.4.16 • os : mac os • blockchain : ethereumjs/testrpc
  23. 23. dApp 구현 Conclusion • HTTP Rest API를 설계할 때 처럼 Solidity – web3를 잘 설계하는게 중요하다. • 저장할 수 있는 hex string 문자열이 제한되어있으므로 저장할 데이터를 적절하게 설계한다. • 여러 정보가 들어있는 긴 hex string이 저장될 수 있으므로 길이를 잘 계산해서 파싱해야한다. • 문서화는 필수! Solidity의 파라미터 타입, 리턴 타입, 리턴 문자열 종류 등을 잘 명시해야한다. JSON과 같은 형태로 리턴할수 없으므로 HTTP Rest API 설계 문서 작성할때 보다 더 꼼꼼하고 정확한 문서 작성이 필요하다. • 테스트코드를 작성하자.
  24. 24. Q&A

×