วันอาทิตย์ที่ 3 พฤศจิกายน พ.ศ. 2562

Code Client Smart Contract

โดยผมจะแบ่งเป็น สามส่วนครับ

1. CSS



 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Digital Lock</title>
  <style>
  body {
    background-color:#F0F0F0;
    padding: 2em;
    font-family: 'Raleway','Source Sans Pro', 'Arial';
  }
  .container {
    width: 50%;
    margin: 0 auto;
  }
  label {
    display:block;
    margin-bottom:10px;
  }
  input {
    padding:10px;
    width: 50%;
    margin-bottom: 1em;
  }
  button {
    margin: 2em 0;
    padding: 1em 4em;
    display:block;
  }

  #balance {
    padding:1em;
    background-color:#fff;
    margin: 1em 0;
  }
  #status {
    font-weight:normal;
    font-family: monospace;
    padding:1em;
    background-color:#fff;
    margin: 1em 0;
  }
  </style>
</head>

ส่วนนี้จะเป็นการตกแต่งหน้าเว็บของเราเช่น ปุ่มกด, พื้นหลัง และ อื่นๆ

2. Body



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
  <!-- Form -->
  <div class="container">
    <h1>Basic Digital Lock</h1>

    <h2 id="showStatus">Status Room = <span id="statusRoom"></span></h2>
    <h3 id="time"> Time:  <span id="timeCount"></span></h3>

    <hr/>
    <br/>
    <h4 id="balance">Current Balance = <span id="currentBalance"></span></h4>
    <button id="button" style="display: block" onclick="javascript:getBalance()">Get New Balance</button>
    <hr/>
    <br/>
    <label for="newBalance" class="col-lg-2 control-label"><strong>New Balance</strong></label>
    <input id="newBalance" type="number" value="300" style="display: inline-block">
    <button id="button" style="display: inline-block" onclick="javascript:setBalance()">Set New Balance</button>
    <br/>
    <label><strong>Status</strong></label>
    <h4 id="status"></h4>
  </div>
</body>

เป็นส่วนที่เราสร้าง ปุ่มกด หรือ หน้าต่างแสดงสถานะต่างๆของเว็บเรา ซึ่งปุ่มกดจะไปเรียกใช้งานฟังกชั่นต่างๆ ในส่วนของ <script> ตามที่เรากำหนดไว้

3. script

     
        ในส่วนนี้จะสำคัญมาก เริ่มจาก JavaScript Loader กันก่อน โดยเราจะโหลดส่วนของ jquery และ web3 เข้ามาในไฟล์ Client ของเรา ซึ่งเราจะใช้ เพื่อติดต่อกับ smart contract ที่เรา deploy ไปเรียบร้อยแล้ว


1
2
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.37/dist/"></script>

        ส่วนต่อมาจะเป็น ฟังก์ชั่นต่างๆ ใน Client ของเราโดยจะมีอยู่สามฟังก์ชั่นคือ
  • checkLock
       จะเป็นฟังก์ชั่นที่จะ นับเวลาเพื่อทำการโอนเหรียญอัตโนมัติ ตามเวลาที่เราระบุไว้ในสัญญา
  • getBalance
        เป็นฟังก์ชั่นที่มีไว้เช็ค Balance ในบัญชีของเราว่าเหลือเท่าไหร่
  • setBalance
       เป็นฟังก์ชั่นที่มีไว้ Set Balance ซึ่งฟังก์ชั่นนี้มีไว้เพื่อทดสอบเฉยๆว่า DApp ของเราสามารถโอนเหรียญและเช็ค Balance ได้จริงหรือไม่


 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
<script>
function addStatusLine(text) {
  document.getElementById("status").innerHTML = text + "<br/><br/>" + document.getElementById("status").innerHTML;
}
var countTime = setInterval(checkLock, 1000);
function checkLock() {
  var d = new Date();
  // TODO: Call checkLock Smart Contract
  //addStatusLine("calling checkLock");
  document.getElementById("timeCount").innerHTML = d.toLocaleTimeString();
  SimpleContract.checkLock(function(errorLock,resultLock){
    if (resultLock == 1) {
      document.getElementById("statusRoom").innerText = "OPEN";
   }else {
      document.getElementById("statusRoom").innerText = "LOCK";
   }

  })
}
function getBalance() {
  //var d = new Date();
  addStatusLine("");
  addStatusLine("calling getBalance()");
  // TODO: Call getBalance Smart Contract
  SimpleContract.getBalance(function(errorGet,resultGet){
    addStatusLine("Current balance =" + resultGet);
    document.getElementById('currentBalance').innerText=resultGet;
  })
}
function setBalance() {
  // TODO: Call setBalance Smart Contract
  //addStatusLine("called");
  newBalance =parseInt(document.getElementById('newBalance').value);
  //addStatusLine(newBalance);
  SimpleContract.setBalance(newBalance,function(error,result){
    if(error){
      addStatusLine(error);
      return;
    }
    // addStatusLine("");
    addStatusLine("calling setBalance("+newBalance+")");
    txHash = result;
    addStatusLine("TxHash = <a href='https://kovan.etherscan.io/tx/"+
    result + "' target='_blank'>" + result + "</a>");
  });
}

</script>

        ส่วนต่อมาเป็นส่วนที่เราจะตั้งค่าเกี่ยวกับ Smart Contract ที่เรา Deploy เอาไว้
  • ตั้งค่า Account ของเราให้ใช้ Metamask
  • ตั้งค่า Address และ ABI ของเรา 
ABI คือ ฟังก์ชั่นต่างๆใน Smart contract ของเรา ซึ่งถูกจักเก็บในรูปแบบของ JSON เราจะนำมาใส่ใน Client ของเรา เพื่อให้ Client ของเรารู้ว่า Smart contract มีฟังก์ชั่นอะไร มีข้อมูลอะไรส่งออกมา


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<script>
// Initializing
if (typeof web3 !== 'undefined') {
  web3 = new Web3(web3.currentProvider); // inject from Metamask plugin
}
// Get default address
web3.eth.defaultAccount = web3.eth.accounts[0];
window.ethereum.enable();
// TODO: Replace your SimpleContract contract address here
var contractAddress = 'ใส่ address ของเรา';
// TODO: Replace your SimpleContract abi here
var abi = ใส่ ABI ของเรา;
// Create an interface to SimpleContract on TomoChain
var SimpleContractContract = web3.eth.contract(abi);
var SimpleContract = SimpleContractContract.at(contractAddress);
// Get Balance on the first load
getBalance();
</script>

ก็จะจบในส่วนของการอธิบาย Code ครับ ด้านล่างนี้จะเป็น Code ตัวเต็มครับ ย้ำนิดนึงว่า
** ระวังส่วนของ JavaScript Loader ด้วยนะครับเพราะ Web3.js มีการ update บ่อยมาก **

Full Code 


  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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Digital Lock</title>
  <style>
  body {
    background-color:#F0F0F0;
    padding: 2em;
    font-family: 'Raleway','Source Sans Pro', 'Arial';
  }
  .container {
    width: 50%;
    margin: 0 auto;
  }
  label {
    display:block;
    margin-bottom:10px;
  }
  input {
    padding:10px;
    width: 50%;
    margin-bottom: 1em;
  }
  button {
    margin: 2em 0;
    padding: 1em 4em;
    display:block;
  }

  #balance {
    padding:1em;
    background-color:#fff;
    margin: 1em 0;
  }
  #status {
    font-weight:normal;
    font-family: monospace;
    padding:1em;
    background-color:#fff;
    margin: 1em 0;
  }
  </style>
</head>
<body>
  <!-- Form -->
  <div class="container">
    <h1>Basic Digital Lock</h1>

    <h2 id="showStatus">Status Room = <span id="statusRoom"></span></h2>
    <h3 id="time"> Time:  <span id="timeCount"></span></h3>

    <hr/>
    <br/>
    <h4 id="balance">Current Balance = <span id="currentBalance"></span></h4>
    <button id="button" style="display: block" onclick="javascript:getBalance()">Get New Balance</button>
    <hr/>
    <br/>
    <label for="newBalance" class="col-lg-2 control-label"><strong>New Balance</strong></label>
    <input id="newBalance" type="number" value="300" style="display: inline-block">
    <button id="button" style="display: inline-block" onclick="javascript:setBalance()">Set New Balance</button>
    <br/>
    <label><strong>Status</strong></label>
    <h4 id="status"></h4>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.37/dist/"></script>
<script>
function addStatusLine(text) {
  document.getElementById("status").innerHTML = text + "<br/><br/>" + document.getElementById("status").innerHTML;
}
var countTime = setInterval(checkLock, 1000);
function checkLock() {
  var d = new Date();
  // TODO: Call checkLock Smart Contract
  //addStatusLine("calling checkLock");
  document.getElementById("timeCount").innerHTML = d.toLocaleTimeString();
  SimpleContract.checkLock(function(errorLock,resultLock){
    if (resultLock == 1) {
      document.getElementById("statusRoom").innerText = "OPEN";
   }else {
      document.getElementById("statusRoom").innerText = "LOCK";
   }

  })
}
function getBalance() {
  //var d = new Date();
  addStatusLine("");
  addStatusLine("calling getBalance()");
  // TODO: Call getBalance Smart Contract
  SimpleContract.getBalance(function(errorGet,resultGet){
    addStatusLine("Current balance =" + resultGet);
    document.getElementById('currentBalance').innerText=resultGet;
  })
}
function setBalance() {
  // TODO: Call setBalance Smart Contract
  //addStatusLine("called");
  newBalance =parseInt(document.getElementById('newBalance').value);
  //addStatusLine(newBalance);
  SimpleContract.setBalance(newBalance,function(error,result){
    if(error){
      addStatusLine(error);
      return;
    }
    // addStatusLine("");
    addStatusLine("calling setBalance("+newBalance+")");
    txHash = result;
    addStatusLine("TxHash = <a href='https://kovan.etherscan.io/tx/"+
    result + "' target='_blank'>" + result + "</a>");
  });
}
// Initializing
if (typeof web3 !== 'undefined') {
  web3 = new Web3(web3.currentProvider); // inject from Metamask plugin
}
// Get default address
web3.eth.defaultAccount = web3.eth.accounts[0];
window.ethereum.enable();
// TODO: Replace your SimpleContract contract address here
var contractAddress = 'ใส่ address ของเรา';
// TODO: Replace your SimpleContract abi here
var abi = ใส่ ABI ของเรา;
// Create an interface to SimpleContract on TomoChain
var SimpleContractContract = web3.eth.contract(abi);
var SimpleContract = SimpleContractContract.at(contractAddress);
// Get Balance on the first load
getBalance();
</script>
</html>
ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)

Code Client Smart Contract auto transfer

ในครั้งนี้เราจะมาทำให้ Smart Contract ของเรา transfer auto กันครับ โดยเริ่มจากส่วนของ Smart contract ของเราก่อน เราได้เพิ่มฟังก์ชั่น ...

  • Code Client Smart Contract
    โดยผมจะแบ่งเป็น สามส่วนครับ 1. CSS 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...
  • Smart Contract คืออะไร ???
              ในการทำ สัญญา อาจจะมีปัญญาเรื่องความปลอดภัย เช่น การปลอมแปลงเอกสารแบบกระดาษ  หรือขั้นตอนในการมานั่งตรวจสอบเอกสาร Nick Szabo จึงมอ...
  • NodeJS and XML
    XML ??       Extensible Markup Language หรือ XML  คืออะไร ? ภาษาของ computer ที่ใช้งานสำหรับการกำหนดรูปแบบการเข้ารหัสของข้อมูลใน format ข...