Mở đầu
Trong thời đại blockchain đang rất phát triển, rất nhiều những ứng dụng truyền thống đang dần chuyển dịch sang hướng phi tập trung.
Những ứng dụng này được gọi là decentralized application, hay gọi tắt là dapp.
Dapp hiện giờ hầu hết được xây dựng dưới dạng web app, bởi môi trường và các công cụ tương tác đã được hoàn thiện khá tốt, ví dụ như metamask, hay các dapp browser.
Về mặt lý thuyết, ta cũng hoàn toàn có thể xây dựng được các dapp trên mobile, song hiện giờ vẫn còn một rào cản khá lớn khi các app store truyền thống như google play hay app store chưa chấp nhận các app như vậy. Một phần vì lý do bảo mật, một phần cũng vì sẽ ảnh hưởng đến hệ thống in-app purchase của các store đó.
Hi vọng trong tương lai với sự hoàn thiện hơn của blockchain thì các store sẽ có các cơ chế thông thoáng hơn với dapp.
Để xây dựng dapp chúng ta có thể sử dụng javascript thuần, hay reactjs, hay vuejs đều được, các bạn có thể tham khảo thêm các bài viết sau đây của bạn @tranchien:
- Plain: https://viblo.asia/p/xay-dung-ung-dung-phi-tap-trung-dapp-gAm5y8LLldb
- Reactjs: https://viblo.asia/p/xay-dung-ung-dung-phi-tap-trung-dapp-voi-reacjs-L4x5x8p15BM
- Vuejs: https://viblo.asia/p/xay-dung-ung-dung-phi-tap-trung-dapp-voi-vuejs-vyDZOaP95wj
Trong bài viết này mình sẽ hướng dẫn các bạn xây dựng một web dapp trên nển tảng ethereum bằng một engine game khá nổi tiếng Cocos Creator. Các bạn hoàn toàn có thể mở rộng nó để làm các web game tích hợp ethereum cho mình.
Full Code: https://github.com/dotrungkien/eth-cocos-code-base
Note: Môi trường làm việc trong bài viết này là MacOS, tuy nhiên vẫn có thể chạy trên Window bình thường.
Cài đặt
Chúng ta cần cài đặt truffle để code contract, Cocos Creator để code một sample app đơn giản, và Metamask để tương tác với web dapp.
truffle
1 2 | npm install -g truffle |
Cocos Creator
Download và cài đặt tại đây: https://www.cocos.com/en/creator
Metamask
Cài đặt chrome extension tại đây: https://chrome.google.com/webstore/search/metamask?hl=en-US
Init project
Ứng dụng của chúng ta sẽ có 2 phần, phần contract
và phần game
, ta sẽ lần lượt tạo từng folder:
1 – Tạo thư mục gốc của ứng dụng:
1 2 | mkdir hello-world && cd hello-world |
2 – tạo thư mục contract
:
1 2 | mkdir contract && cd contract |
3 – init truffle project
1 2 | truffle init |
khi này chúng ta sẽ có được một project để bắt đầu code contract rồi.
4 – init game project
Ta sẽ khởi động Cocos Creator lên và tạo một project mới, để project đơn giản và dễ hiểu nhất ta sẽ tạo project theo template Hello-world
OK ta đã sẵn sang để vào bước phát triển rồi.
Contract Development
Trong bài này ta sẽ làm một contract vô cùng đơn giản, chỉ có 2 phương thức và 1 biến mà thôi.
Contract
Vào thư mục contracts
và tạo một file mới SimpleStore.sol
với nội dung như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | pragma solidity <span class="token operator">^</span><span class="token number">0.5</span><span class="token number">.0</span><span class="token punctuation">;</span> contract SimpleStore <span class="token punctuation">{</span> uint256 value<span class="token punctuation">;</span> event <span class="token function">NewValueSet</span><span class="token punctuation">(</span>uint256 indexed _value<span class="token punctuation">,</span> address _sender<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token keyword">set</span><span class="token punctuation">(</span>uint256 newValue<span class="token punctuation">)</span> <span class="token keyword">public</span> <span class="token punctuation">{</span> value <span class="token operator">=</span> newValue<span class="token punctuation">;</span> emit <span class="token function">NewValueSet</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> msg<span class="token punctuation">.</span>sender<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">public</span> view <span class="token function">returns</span> <span class="token punctuation">(</span>uint256<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> value<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
ở đây ta sẽ dùng phiên bản solidity 0.5.0.
Truffle config
tại truffle-config.js
ta sẽ config tất cả những thông tin về chain, compiler, accounts…
1 2 3 4 5 6 7 8 9 10 11 | module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> contracts_build_directory<span class="token punctuation">:</span> <span class="token string">'../game/assets/Contracts'</span><span class="token punctuation">,</span> networks<span class="token punctuation">:</span> <span class="token punctuation">{</span> development<span class="token punctuation">:</span> <span class="token punctuation">{</span> host<span class="token punctuation">:</span> <span class="token string">'127.0.0.1'</span><span class="token punctuation">,</span> port<span class="token punctuation">:</span> <span class="token number">8545</span><span class="token punctuation">,</span> network_id<span class="token punctuation">:</span> <span class="token string">'123456789'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Ta sẽ build contracts vào luôn một thư mục bên trong thư mục game, để chút nữa ta có thể sử dụng nó trong Cocos.
Với chain, để đơn giản nhất ta sẽ sử dụng một local chain, chạy bởi ganache-cli
.
Chạy local chain
Nếu bạn chưa cài đặt ganache-cli
thì hãy tiến hành cài đặt trước.
1 2 | npm install -g ganache-cli |
Ta sẽ chạy một local chain với chain id là 123456789 bằng lệnh:
1 2 | ganache-cli -i 123456789 |
Khi này đã có một chain chạy tại địa chỉ http://localhost:8545
và 10 account, mỗi account có 100 ETH như thế này, mỗi account tương ứng với một private key bên dưới.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | Available Accounts ================== (0) 0x7c28281fb4fa65b40e3f47af4f88bfe82224090b (1) 0x02c5c736031b4fa576cb911ddbb3e55eb741f134 (2) 0x905aef31f11b49923a6c377f83dec84567b90a25 (3) 0x3429059ea3d218c43266998cfed14e7f85f8d372 (4) 0x0ae76d77a96b34aff16f8910078ae2cf4e001768 (5) 0x148ffe781de6676fde20c2c6ff5bb022e80a9748 (6) 0x776be00b63a9d8692c1a4ce4d6baec1101fc913e (7) 0x977eded9ac70b067c7cb840779ea9f46e8a89afb (8) 0x01452fe9da1362ab8ace90d87056a4e5cfc22766 (9) 0xb422c3fafc0514cb733f83294d1681d6e3e8fc03 Private Keys ================== (0) 26b3f59a6fec532ffc45f121bd2ba3c088666a34136669df03b315e938330d58 (1) 57adbbb3ba0aa454b3b85a87a6fc73e5ded11748e9323d0ba3866dca40e2e301 (2) db4093821ee1f362897847ac59851adea4a4aeeba22404321978111a02236174 (3) 3e953bb74802810739dec2df4cf2eb0e36d6ac665836a3c5658e35e4ef64814b (4) 3ad55f2e89c7fe489a0cc04dd3574df69466656a98e92be78c9599a442370333 (5) ccc5585cbcbb0405fa5ea2aa48775e6ce7f75b819477c51396084b0b5ec3120d (6) 77cab936b6001ad056cace50db94bacbec066fdf8842dbe598d7f656a18ec620 (7) 718159194d52ca85fad5dcaac0e9a9269994b6e3301cb233e107b4a71403d172 (8) debf1a6e65da5b3314de06dcefb6fec85065c9c74a42a8660a61d6786b322ba7 (9) 4c97648a754569ef7cfbfafeeb3df4213eea2fb8f1ced9ff38ade25e1ad688c5 |
hãy lưu lại private key đầu tiên để chút nữa ta sẽ sử dụng account tương ứng trong metamask.
Compile và Migration
Ta sẽ tiến hành compile contract để đảm bảo rằng contract của chúng ta không có lỗi:
1 2 | truffle compile |
kết quả
1 2 3 4 | > Compiling ./contracts/Migrations.sol... > Compiling ./contracts/SimpleStore.sol... > Writing artifacts to ./../game/assets/Contracts |
Để migration contract của chúng ta lên local chain, ta sẽ phải tạo thêm một file migration cho nó.
Trong thư mục migrations
tạo thêm file 2_simple_store_migration.js
với nội dung như sau:
1 2 3 4 5 6 | <span class="token keyword">const</span> SimpleStore <span class="token operator">=</span> artifacts<span class="token punctuation">.</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'SimpleStore'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>deployer<span class="token punctuation">)</span> <span class="token punctuation">{</span> deployer<span class="token punctuation">.</span><span class="token function">deploy</span><span class="token punctuation">(</span>SimpleStore<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Và tiến hành migrate
1 2 | truffle migrate --network development |
kết quả
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | Starting migrations... ====================== > Network name: 'development' > Network id: 123456789 > Block gas limit: 6721975 1_initial_migration.js ====================== Deploying 'Migrations' ---------------------- > transaction hash: 0xaa2af826be86a1561c79bbff42c1c8646921e327609995b486c0b71eb920edc4 > Blocks: 0 Seconds: 0 > contract address: 0x6E896215aD8E6c9d335AAc6642747Cfa96b88511 > account: 0x7c28281Fb4FA65B40E3f47af4F88BFe82224090b > balance: 99.99430184 > gas used: 284908 > gas price: 20 gwei > value sent: 0 ETH > total cost: 0.00569816 ETH > Saving artifacts ------------------------------------- > Total cost: 0.00569816 ETH 2_simple_store_migration.js =========================== Deploying 'SimpleStore' ----------------------- > transaction hash: 0x70d5bfd2b6f35bced155e93422f7f73a04f475f604e158b766421690ee730882 > Blocks: 0 Seconds: 0 > contract address: 0xaC78cEE4872Dd65945a22C66DFCB2d55a9cc65DC > account: 0x7c28281Fb4FA65B40E3f47af4F88BFe82224090b > balance: 99.99139726 > gas used: 145229 > gas price: 20 gwei > value sent: 0 ETH > total cost: 0.00290458 ETH > Saving artifacts ------------------------------------- > Total cost: 0.00290458 ETH Summary ======= > Total deployments: 2 > Final cost: 0.00860274 ETH |
OK vậy là xong phần contract.
Game Development
Hãy mở Cocos Creator và chọn project game
mà chúng ta vừa tạo.
Scene
Mở đầu chúng ta sẽ có một scene helloworld
với chỉ có một background, một logo và một label.
Ta sẽ tiến hành xóa logo, thêm một label cho Address
, một label cho Balance
, một inputBox cho giá trị value
trong contract, và một button để set giá trị cho value
.
Scene sẽ trở thành như sau:
Script
Để kết nối với blockchain từ game, ta cần phải sử dụng thư viện Web3js
, trong bài viết này chúng ta sử dụng phiên bản 1.0.0-beta36
.
Download tại đây https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js.
Tạo một thư mục Library
trong thư mục game
và đưa web3.min.js
vào đây. Thư mục game của chúng ta sẽ trông như sau:
click vào web3.min.js
và đảm bảo rằng checkbox import as plugin
không được check.
OK, giờ ta sẽ chỉnh sửa script Hello World
như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | <span class="token keyword">const</span> Web3 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'web3.min'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token constant">GAS_PRICE_DEFAULT</span> <span class="token operator">=</span> <span class="token string">'20000000000'</span><span class="token punctuation">;</span> cc<span class="token punctuation">.</span><span class="token function">Class</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token keyword">extends</span><span class="token punctuation">:</span> cc<span class="token punctuation">.</span>Component<span class="token punctuation">,</span> properties<span class="token punctuation">:</span> <span class="token punctuation">{</span> currentValueLabel<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> type<span class="token punctuation">:</span> cc<span class="token punctuation">.</span>Label <span class="token punctuation">}</span><span class="token punctuation">,</span> addressLabel<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> type<span class="token punctuation">:</span> cc<span class="token punctuation">.</span>Label <span class="token punctuation">}</span><span class="token punctuation">,</span> balanceLabel<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> type<span class="token punctuation">:</span> cc<span class="token punctuation">.</span>Label <span class="token punctuation">}</span><span class="token punctuation">,</span> inputBox<span class="token punctuation">:</span> cc<span class="token punctuation">.</span>EditBox<span class="token punctuation">,</span> contractABI<span class="token punctuation">:</span> cc<span class="token punctuation">.</span>JsonAsset <span class="token punctuation">}</span><span class="token punctuation">,</span> onLoad<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3 <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3Provider <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3ProviderName <span class="token operator">=</span> <span class="token string">'metamask'</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contract <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>currentValue <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address <span class="token operator">=</span> <span class="token string">'0x'</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>balance <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressLabel<span class="token punctuation">.</span>string <span class="token operator">=</span> <span class="token string">'Address: '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>balanceLabel<span class="token punctuation">.</span>string <span class="token operator">=</span> <span class="token string">'Balance: '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>currentValue<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateCurrentValue</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initWeb3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">initWeb3</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token function-variable function">isWeb3Enabled</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator">!</span><span class="token operator">!</span>window<span class="token punctuation">.</span>web3<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isWeb3Enabled</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Web3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//Request account access for modern dapp browsers</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>ethereum<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3Provider <span class="token operator">=</span> window<span class="token punctuation">.</span>ethereum<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span><span class="token function">setProvider</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>web3Provider<span class="token punctuation">)</span><span class="token punctuation">;</span> window<span class="token punctuation">.</span>ethereum <span class="token punctuation">.</span><span class="token function">enable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>accounts <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>error <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">//Request account access for legacy dapp browsers</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>web3<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3Provider <span class="token operator">=</span> window<span class="token punctuation">.</span>web3<span class="token punctuation">.</span>currentProvider<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span><span class="token function">setProvider</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>web3Provider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'You must enable and login into your Wallet or MetaMask accounts!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">initAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span>eth<span class="token punctuation">.</span><span class="token function">getAccounts</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>accounts <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>accounts<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address <span class="token operator">=</span> accounts<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressLabel<span class="token punctuation">.</span>string <span class="token operator">=</span> <span class="token string">'Address: '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initContract</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateBalance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'You must enable and login into your Wallet or MetaMask accounts!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">initContract</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> networks <span class="token operator">=</span> <span class="token punctuation">{</span> main<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span> ropsten<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span> kovan<span class="token punctuation">:</span> <span class="token string">'42'</span><span class="token punctuation">,</span> rinkeby<span class="token punctuation">:</span> <span class="token string">'4'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span>eth<span class="token punctuation">.</span>net<span class="token punctuation">.</span><span class="token function">getNetworkType</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>netId <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contract <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">this<span class="token punctuation">.</span>web3<span class="token punctuation">.</span>eth<span class="token punctuation">.</span>Contract</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contractABI<span class="token punctuation">.</span>json<span class="token punctuation">.</span>abi<span class="token punctuation">,</span> <span class="token comment">// this.contractABI.json.networks[networks[netId]].address</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contractABI<span class="token punctuation">.</span>json<span class="token punctuation">.</span>networks<span class="token punctuation">[</span><span class="token string">'123456789'</span><span class="token punctuation">]</span><span class="token punctuation">.</span>address <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">updateBalance</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span>eth<span class="token punctuation">.</span><span class="token function">getBalance</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>address<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> balance<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">this</span><span class="token punctuation">.</span>balanceLabel<span class="token punctuation">.</span>string <span class="token operator">=</span> cc<span class="token punctuation">.</span>js<span class="token punctuation">.</span><span class="token function">formatStr</span><span class="token punctuation">(</span> <span class="token string">'Balance: %d ETH'</span><span class="token punctuation">,</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">fromWei</span><span class="token punctuation">(</span>balance<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contract<span class="token punctuation">.</span>methods <span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token keyword">from</span><span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>val <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateCurrentValue</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// console.log('get current value: ', val);</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">setValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contract<span class="token punctuation">.</span>methods <span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>inputBox<span class="token punctuation">.</span>string<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token keyword">from</span><span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address<span class="token punctuation">,</span> gas<span class="token punctuation">:</span> <span class="token number">250000</span><span class="token punctuation">,</span> gasPrice<span class="token punctuation">:</span> <span class="token constant">GAS_PRICE_DEFAULT</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'transactionHash'</span><span class="token punctuation">,</span> hash <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// console.log('transactionHash: ', hash);</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'receipt'</span><span class="token punctuation">,</span> receipt <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> error <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'endgame error: '</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">updateCurrentValue</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>currentValueLabel<span class="token punctuation">.</span>string <span class="token operator">=</span> <span class="token string">'Current Value: '</span> <span class="token operator">+</span> value<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Giải thích:
- khai báo các label và input box ta vừa định nghĩa bên trên, ở đây đáng chú ý là ta sẽ có một biến
contractABI
, đây chính là contract mà ta đã build bằng lệnhtruffle migrate --network development
ở bên trên.
1 2 | contractABI<span class="token punctuation">:</span> cc<span class="token punctuation">.</span>JsonAsset<span class="token punctuation">;</span> |
- tại
onLoad
, ta sẽ tiến hành khởi tạo các thuộc tính cần thiết, cũng như web3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | onLoad<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3 <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3Provider <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3ProviderName <span class="token operator">=</span> <span class="token string">'metamask'</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contract <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>currentValue <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address <span class="token operator">=</span> <span class="token string">'0x'</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>balance <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressLabel<span class="token punctuation">.</span>string <span class="token operator">=</span> <span class="token string">'Address: '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>balanceLabel<span class="token punctuation">.</span>string <span class="token operator">=</span> <span class="token string">'Balance: '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>currentValue<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateCurrentValue</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initWeb3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
- Tại
initWeb3
, ta sẽ detect network ta đang dùng hiện tại và tạo ra một web3 instance
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>ethereum<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3Provider <span class="token operator">=</span> window<span class="token punctuation">.</span>ethereum<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span><span class="token function">setProvider</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>web3Provider<span class="token punctuation">)</span><span class="token punctuation">;</span> window<span class="token punctuation">.</span>ethereum <span class="token punctuation">.</span><span class="token function">enable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>accounts <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>error <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>web3<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3Provider <span class="token operator">=</span> window<span class="token punctuation">.</span>web3<span class="token punctuation">.</span>currentProvider<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span><span class="token function">setProvider</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>web3Provider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
- ta sẽ lấy account đầu tiên trong số các account của ganache-cli và update balance cho nó, đồng thời tạo một instance của contract
SimpleStorage
chúng ta đã code trên kia.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <span class="token function">initAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span>eth<span class="token punctuation">.</span><span class="token function">getAccounts</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>accounts <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>accounts<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address <span class="token operator">=</span> accounts<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressLabel<span class="token punctuation">.</span>string <span class="token operator">=</span> <span class="token string">'Address: '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initContract</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateBalance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'You must enable and login into your Wallet or MetaMask accounts!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">initContract</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> networks <span class="token operator">=</span> <span class="token punctuation">{</span> main<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span> ropsten<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span> kovan<span class="token punctuation">:</span> <span class="token string">'42'</span><span class="token punctuation">,</span> rinkeby<span class="token punctuation">:</span> <span class="token string">'4'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span>eth<span class="token punctuation">.</span>net<span class="token punctuation">.</span><span class="token function">getNetworkType</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>netId <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contract <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">this<span class="token punctuation">.</span>web3<span class="token punctuation">.</span>eth<span class="token punctuation">.</span>Contract</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contractABI<span class="token punctuation">.</span>json<span class="token punctuation">.</span>abi<span class="token punctuation">,</span> <span class="token comment">// this.contractABI.json.networks[networks[netId]].address</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contractABI<span class="token punctuation">.</span>json<span class="token punctuation">.</span>networks<span class="token punctuation">[</span><span class="token string">'123456789'</span><span class="token punctuation">]</span><span class="token punctuation">.</span>address <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">updateBalance</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span>eth<span class="token punctuation">.</span><span class="token function">getBalance</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>address<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> balance<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">this</span><span class="token punctuation">.</span>balanceLabel<span class="token punctuation">.</span>string <span class="token operator">=</span> cc<span class="token punctuation">.</span>js<span class="token punctuation">.</span><span class="token function">formatStr</span><span class="token punctuation">(</span> <span class="token string">'Balance: %d ETH'</span><span class="token punctuation">,</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">fromWei</span><span class="token punctuation">(</span>balance<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
- Cuối cùng ta sẽ cài đặt 2 hàm
setValue
vàgetValue
tương ứng với hai hàmset
vàget
trongSimpleStorage
contract. Lưu ý rằng Cocos Creator chưa supportasync/await
nên buộc ta phải xử lý các bất đồng bộ bằng cách wrap và chain promise.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contract<span class="token punctuation">.</span>methods <span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token keyword">from</span><span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>val <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateCurrentValue</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// console.log('get current value: ', val);</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">setValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contract<span class="token punctuation">.</span>methods <span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>inputBox<span class="token punctuation">.</span>string<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token keyword">from</span><span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>address<span class="token punctuation">,</span> gas<span class="token punctuation">:</span> <span class="token number">250000</span><span class="token punctuation">,</span> gasPrice<span class="token punctuation">:</span> <span class="token constant">GAS_PRICE_DEFAULT</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'transactionHash'</span><span class="token punctuation">,</span> hash <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// console.log('transactionHash: ', hash);</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'receipt'</span><span class="token punctuation">,</span> receipt <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> error <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'endgame error: '</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
ok script đã sẵn sàng, kết nối đã sẵn sàng, quay trở lại scene, kéo các biến cần thiết từ scene vào trong script HelloWorld
:
Test game
Giờ là lúc play, nhớ chọn Browser
và nhấn Play, ta sẽ tới địa chỉ http://localhost:7456/
.
Khi này ta cần check lại network đã setup ở Metamask xem đã đúng local chưa. Nếu chưa đúng ta sẽ phải thêm một Custom RPC
như sau:
Sau đó tiến hành import account:
Sau đó ta sẽ nhập vào private key đầu tiên ở bên trên khi ta chạy ganache-cli
lúc nãy
Ok, mọi thứ đã hoàn tất, khi này scene của chúng ta sẽ trông như sau:
set thử một giá trị xem sao, ví dụ 123, khi này metamask sẽ hiện ra popup như sau:
Confirm và chờ một chút, ta sẽ thấy transaction hoàn thành, và giá trị của chúng ta đã được update thành 123:
All done!
Kết luận
Vậy là chúng ta đã hoàn thành một ứng dụng vô cùng đơn giản với Cocos Creator tích hợp với Ethereum Blockchain rồi.
Dù chức năng chỉ là minimum nhưng ta hoàn toàn có rất nhiều hướng để phát triển. Cocos vốn là một engine nổi tiếng để làm game, do đó ta có thể xây dựng được các game trên đó rất dễ dàng.
Đồng thời ngoài localchain, bằng cách tương tự, ta cũng có thể deploy và kết nối đến các chain khác như Main chain, Ropsten, Rinkeby, Kovan, Loom, Tomo…
Hi vọng chúng ta đã có những trải nghiệm tích cực
Enjoy coding!