Vue.jsとSolidityでDapps

Vue.js(Nuxt)とSolidity(Truffle、zeppelin-solidity)でDapps開発

Transcript

1. diffeasy. inc 7VFKTͱ4PMJEJUZͰ%BQQT !@UBLFTIJ@
2. diffeasy. inc 2 /VYU 'JSFCBTF 7VF Թઘ ಡॻ (PMBOH 3VCZ ($1 ϒϩοΫνΣʔϯ إೱ͍ גࣜձࣾEJ⒎FBTZ σΟϑΟʔδʔ
   
   औక໾$50
   ੢
   ෢࢙ ʹ͠
   ͚ͨ͠
   
   
   
   
   
   !@UBLFTIJ@ EPDLFS
3. diffeasy. inc 3 ੈքதͷlΉ͔͍ͣ͠zΛ؆୯ʹ NBLF
   EJ⒏DVMU
   UIJOHT
   FBTZ
   
4. diffeasy. inc 4 ໨ඪୡ੒
   Ϛϯμϥʔτ
5. diffeasy. inc 7VFKTͱ4PMJEJUZͰ%BQQT !@UBLFTIJ@
6. diffeasy. inc 6 lΉ͔͍ͣ͠zݴ༿Λ؆୯ʹઆ໌
7. diffeasy. inc 7 %BQQT
   ʹ%FDFOUSBMJ[FE
   "QQMJDBUJPOT
   ʹ෼ࢄܕΞϓϦέʔγϣϯ %BQQTͱ͸ʁ
8. diffeasy. inc 8 4PMJEJUZͱ͸ʁ &UIFSFVN্Ͱಈ͘
   +BWB4DSJQUϥΠΫͳ
   εϚʔτίϯτϥΫτ։ൃݴޠ
9. diffeasy. inc 9 8FC ϒϩοΫνΣʔϯ ΍Γ͍ͨߏ੒
10. diffeasy. inc 10 ϒϩοΫνΣʔϯ ࠓ೔͸͜͜ͷ࿩
11. diffeasy. inc ͱΓ͋͑ͣσϞ 11
12. diffeasy. inc 12 Ծ૝௨՟Λൃߦ
13. diffeasy. inc w εϚʔτίϯτϥΫτͷ։ൃɺσϓϩΠɺ ςετɺϚΠάϨʔγϣϯ
    w &UIFSFVNͰτʔΫϯͷൃߦ
    13 OpenZeppelin TruffleϑϨʔϜϫʔΫ
14. diffeasy. inc 14 truffleϑϨʔϜϫʔΫΛΠϯετʔϧ $ npm install -g truffle truffleϑϨʔϜϫʔΫॳظԽ $ truffle init zeppelin-solidityΛΠϯετʔϧ $ npm install zeppelin-solidity 
 --save Πϯετʔϧ
15. diffeasy. inc 15 &3$४ڌͷ
    τʔΫϯ ίϯτϥΫτ
    ΛσϓϩΠ͢Δ
    ϚΠάϨʔγϣϯ
    ϑΝΠϧ
16. diffeasy. inc 16 pragma solidity ^0.4.18; import "zeppelin-solidity/contracts/token/ERC20/ StandardToken.sol"; contract DiffeasyCoin is StandardToken { string public constant name = "DiffeasyCoin"; string public constant symbol = "DEC"; uint8 public constant decimals = 18; constructor(uint256 _initialSupply) public { totalSupply_ = _initialSupply; balances[msg.sender] = _initialSupply; emit Transfer(0x0, msg.sender, _initialSupply); } } %J⒎FBTZ$PJOTPM
17. diffeasy. inc 17 const DiffeasyCoin = artifacts.require('./DiffeasyCoin.sol') module.exports = (deployer) => { const initialSupply = 50000e18 deployer.deploy(DiffeasyCoin, initialSupply) } @EFQMPZ@EJ⒎FBTZ@DPJOKT
18. diffeasy. inc 18 $ truffle develop Truffle Develop started at http://127.0.0.1:9545/ Accounts: (0) 0x627306090abab3a6e1400e9345bc60c78a8bef57 (1) 0xf17f52151ebef6c7334fad080c5704d77216b732 (2) 0xc5fdf4076b8f3a5357c5e395ab970b5b54098fef (3) 0x821aea9a577a9b44299b9c15c88cf3087f3b5544 (4) 0x0d1d4e623d10f9fba5db95830f7d3839406c6af2 (5) ɾɾɾɾ Private Keys: (0) c87509a1c067bbde78beb793e6fa76530b6382a4c0241e5e4a9ec (1) ae6ae8e5ccbfb04590405997ee2d52d2b330726137b875053c36d (2) 0dbbe8e4ae425a6d2687f1a7e3ba17bc98c673636790f1b8ad911 (3) c88b703fb08cbea894b6aeff5a544fb92e78a18e19814cd85da83 (4) 388c684f0ba1ef5017716adb5d21a053ea8e90277d0868337519f (5) ɾɾɾɾ ։ൃ༻ͷ&UIFSFVN؀ڥΛىಈ
19. diffeasy. inc 19 ϑϩϯτΤϯυͱ࿈ܞ
20. diffeasy. inc 20 NuxtΛΠϯετʔϧ $ vue init nuxt-community/starter- template front Web3.jsΠϯετʔϧ $ npm install web3 @types/node truffle-contract --save Πϯετʔϧ
21. diffeasy. inc 21 &UIFSFVNͱ઀ଓ
    import Web3 from 'web3' const web3 = new Web3(new Web3.providers.HttpProvider ("http://127.0.0.1:9545/")) if (typeof web3.currentProvider.sendAsync !== "function") { web3.currentProvider.sendAsync = function() { return web3.currentProvider.send.apply( web3.currentProvider, arguments ); }; } export default web3 QMVHJOTXFCKT
22. diffeasy. inc 22 &UIFSFVN্ͷΞΧ΢ϯτϦετऔಘ
    web3.eth.getAccounts() ΞΧ΢ϯτͷԾ૝௨՟࢒ߴऔಘ
    const dec = contract(DiffeasyCoin) dec.setProvider(web3.currentProvider) const instance = await dec.deployed() const balances 
 ɹɹɹ= awaitɹinstance.balanceOf(account) XFCΛ࢖ͬͯ&UIFSFVNͱ઀ଓ
23. diffeasy. inc 23 "͔Β#ʹԾ૝௨՟औҾ
    const dec = contract(DiffeasyCoin) dec.setProvider(web3.currentProvider) const instance = await dec.deployed() await instance.transfer ɹɹɹɹɹ(to, balance, { from: from }) XFCΛ࢖ͬͯ&UIFSFVNͱ઀ଓ
24. diffeasy. inc 24 ϒϩοΫνΣʔϯ
    ར༻ͨ͠αʔϏε৭ʑ
25. diffeasy. inc 25 ετϨʔδ ࿀Ѫ Ξʔτ Իָ
26. diffeasy. inc ຊ౰ʹϒϩοΫνΣʔϯ ͕ඞཁ͔ʁ 26
27. diffeasy. inc w தԝूݖతͳ؅ཧऀ͕͍ͳ͍͜ͱ ͕ຊ౰ʹྑ͍͔ʁ
    w վ͟Μʢमਖ਼ʣ͕ࠔ೉ͳ͜ͱ͕
 ຊ౰ʹྑ͍͔ʁ 27
28. diffeasy. inc w σʔλ͕ίϐʔͰ͖ͳ͍Θ͚Ͱ͸ ͳ͍
    w ӡӦऀͷ৴པੑ͕ॏཁͳϙΠϯτ ͔ʁ 28
29. diffeasy. inc 29 ੈքதͷ“Ή͔͍ͣ͠”Λ
 ؆୯ʹ