Xây dựng ứng dụng phi tập trung (Dapp) với Cocos Creator

Thứ Sáu, 03/01/2020

Tram Ho

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:

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

npm install -g 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:

mkdir hello-world &amp;&amp; cd hello-world

1 2	mkdir hello-world && cd hello-world

2 – tạo thư mục contract:

mkdir contract &amp;&amp; cd contract

1 2	mkdir contract && cd contract

3 – init truffle project

truffle init

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:

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>

pragma solidity ^0.5.0;

contract SimpleStore {

uint256 value;

event NewValueSet(uint256 indexed _value, address _sender);

function set(uint256 newValue) public {

value = newValue;

emit NewValueSet(value, msg.sender);

}

function get() public view returns (uint256) {

return value;

}

ở đâ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…

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>

module.exports = {

contracts_build_directory: '../game/assets/Contracts',

networks: {

development: {

host: '127.0.0.1',

port: 8545,

network_id: '123456789'

}

};

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.

npm install -g ganache-cli

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:

ganache-cli -i 123456789

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.

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

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:

truffle compile

1 2	truffle compile

kết quả

&gt; Compiling ./contracts/Migrations.sol...
&gt; Compiling ./contracts/SimpleStore.sol...
&gt; Writing artifacts to ./../game/assets/Contracts

> 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:

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

const SimpleStore = artifacts.require('SimpleStore');

module.exports = function(deployer) {

deployer.deploy(SimpleStore);

};

Và tiến hành migrate

truffle migrate --network development

1 2	truffle migrate --network development

kết quả


Starting migrations...
======================
&gt; Network name:    'development'
&gt; Network id:      123456789
&gt; Block gas limit: 6721975


1_initial_migration.js
======================

   Deploying 'Migrations'
   ----------------------
   &gt; transaction hash:    0xaa2af826be86a1561c79bbff42c1c8646921e327609995b486c0b71eb920edc4
   &gt; Blocks: 0            Seconds: 0
   &gt; contract address:    0x6E896215aD8E6c9d335AAc6642747Cfa96b88511
   &gt; account:             0x7c28281Fb4FA65B40E3f47af4F88BFe82224090b
   &gt; balance:             99.99430184
   &gt; gas used:            284908
   &gt; gas price:           20 gwei
   &gt; value sent:          0 ETH
   &gt; total cost:          0.00569816 ETH

   &gt; Saving artifacts
   -------------------------------------
   &gt; Total cost:          0.00569816 ETH


2_simple_store_migration.js
===========================

   Deploying 'SimpleStore'
   -----------------------
   &gt; transaction hash:    0x70d5bfd2b6f35bced155e93422f7f73a04f475f604e158b766421690ee730882
   &gt; Blocks: 0            Seconds: 0
   &gt; contract address:    0xaC78cEE4872Dd65945a22C66DFCB2d55a9cc65DC
   &gt; account:             0x7c28281Fb4FA65B40E3f47af4F88BFe82224090b
   &gt; balance:             99.99139726
   &gt; gas used:            145229
   &gt; gas price:           20 gwei
   &gt; value sent:          0 ETH
   &gt; total cost:          0.00290458 ETH

   &gt; Saving artifacts
   -------------------------------------
   &gt; Total cost:          0.00290458 ETH


Summary
=======
&gt; Total deployments:   2
&gt; Final cost:          0.00860274 ETH

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:

<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">=&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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">&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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>

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

const Web3 = require('web3.min');

const GAS_PRICE_DEFAULT = '20000000000';

cc.Class({

extends: cc.Component,

properties: {

currentValueLabel: {

default: null,

type: cc.Label

},

addressLabel: {

default: null,

type: cc.Label

},

balanceLabel: {

default: null,

type: cc.Label

},

inputBox: cc.EditBox,

contractABI: cc.JsonAsset

},

onLoad: function() {

this.web3 = null;

this.web3Provider = null;

this.web3ProviderName = 'metamask';

this.contract = null;

this.currentValue = 0;

this.address = '0x';

this.balance = 0;

this.addressLabel.string = 'Address: ' + this.address;

this.balanceLabel.string = 'Balance: ' + this.currentValue;

this.updateCurrentValue(0);

this.initWeb3();

},

initWeb3() {

const isWeb3Enabled = () => !!window.web3;

if (isWeb3Enabled()) {

this.web3 = new Web3();

//Request account access for modern dapp browsers

if (window.ethereum) {

this.web3Provider = window.ethereum;

this.web3.setProvider(this.web3Provider);

window.ethereum

.enable()

.then(accounts => {

this.initAccount();

})

.catch(error => {

console.error(error);

});

}

//Request account access for legacy dapp browsers

else if (window.web3) {

}

} else {

console.error('You must enable and login into your Wallet or MetaMask accounts!');

}

},

initAccount() {

this.web3.eth.getAccounts().then(accounts => {

if (accounts.length > 0) {

this.address = accounts[0].toLowerCase();

this.initContract();

this.updateBalance();

} else console.error('You must enable and login into your Wallet or MetaMask accounts!');

});

},

initContract() {

let networks = { main: '1', ropsten: '3', kovan: '42', rinkeby: '4' };

this.web3.eth.net.getNetworkType().then(netId => {

this.contract = new this.web3.eth.Contract(

// this.contractABI.json.networks[networks[netId]].address

this.contractABI.json.networks['123456789'].address

);

});

},

updateBalance() {

this.web3.eth.getBalance(this.address, (err, balance) => {

if (err) {

console.error(err);

return;

}

this.balanceLabel.string = cc.js.formatStr(

'Balance: %d ETH',

parseInt(this.web3.utils.fromWei(balance))

);

});

},

getValue() {

this.contract.methods

.get()

.call({

from: this.address

})

.then(val => {

this.updateCurrentValue(val);

// console.log('get current value: ', val);

});

},

setValue() {

this.contract.methods

.set(this.inputBox.string)

.send({

from: this.address,

gas: 250000,

gasPrice: GAS_PRICE_DEFAULT

})

.on('transactionHash', hash => {

// console.log('transactionHash: ', hash);

})

.on('receipt', receipt => {

this.getValue();

})

.on('error', error => {

console.error('endgame error: ', error);

});

},

updateCurrentValue(value) {

this.currentValueLabel.string = 'Current Value: ' + value;

}

});

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ệnh truffle migrate --network development ở bên trên.

contractABI<span class="token punctuation">:</span> cc<span class="token punctuation">.</span>JsonAsset<span class="token punctuation">;</span>

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

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

<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">=&gt;</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">=&gt;</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>

window.ethereum

.enable()

})

});

} else if (window.web3) {

}

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.

<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">=&gt;</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">&gt;</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">=&gt;</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">=&gt;</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>

initAccount() {

});

},

initContract() {

this.web3.eth.net.getNetworkType().then(netId => {

// this.contractABI.json.networks[networks[netId]].address

);

});

},

updateBalance() {

this.web3.eth.getBalance(this.address, (err, balance) => {

if (err) {

return;

}

this.balanceLabel.string = cc.js.formatStr(

'Balance: %d ETH',

);

});

},

Cuối cùng ta sẽ cài đặt 2 hàm setValue và getValue tương ứng với hai hàm set và get trong SimpleStorage contract. Lưu ý rằng Cocos Creator chưa support async/await nên buộc ta phải xử lý các bất đồng bộ bằng cách wrap và chain promise.

<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">=&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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>

getValue() {

this.contract.methods

.get()

.call({

from: this.address

})

this.updateCurrentValue(val);

// console.log('get current value: ', val);

});

},

setValue() {

this.contract.methods

.send({

gas: 250000,

gasPrice: GAS_PRICE_DEFAULT

})

// console.log('transactionHash: ', hash);

})

});

},

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!

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Xây dựng ứng dụng phi tập trung (Dapp) với Cocos Creator

Mở đầu

Cài đặt

Init project

Contract Development

Contract

Truffle config

Chạy local chain

Compile và Migration

Game Development

Scene

Script

Test game

Kết luận

Những game blockchain kiếm tiền hot nhất hiện nay

Sửa xong cáp quang biển AAG, Internet đi quốc tế trở lại bình thường

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu