Web3與智慧合約互動實戰

wyfem發表於2021-09-09
Web

寫在前面

在最初學習以太坊的時候，很多人都是自己建立以太坊節點後，使用geth與之互動。這種使用命令列互動的方法雖然讓很多程式設計師感到興奮（黑客帝國的既視感？），但不可能指望普通使用者通過命令列使用Dapp。因此，我們需要一種友好的方式（比如一個web頁面）來與智慧合約互動，於是問題的答案就是web3.js。

Web3.js

Web3.js是以太坊官方的Javascript API，可以幫助智慧合約開發者使用HTTP或者IPC與本地的或者遠端的以太坊節點互動。實際上就是一個庫的集合，主要包括下面幾個庫：

  • web3-eth用來與以太坊區塊鏈和智慧合約互動
  • web3-shh用來控制whisper協議與p2p通訊以及廣播
  • web3-bzz用來與swarm協議互動
  • web3-utils包含了一些Dapp開發有用的功能

Web3與geth通訊使用的是 JSON-RPC ，這是一種輕量級的RPC（Remote Procedure Call）協議，整個通訊的模型可以抽象為下圖。

Web3 Communication Model

搭建測試鏈

在開發初期，我們並沒有必要使用真實的公鏈，為了開發效率，一般選擇在本地搭建測試鏈。在本文我們選擇的Ganache（在此之前使用的是testrpc，Ganache屬於它的升級版），一個圖形化測試軟體（也有命令列版本），可以一鍵在本地搭建以太坊區塊鏈測試環境，並且將區塊鏈的狀態通過圖形介面顯示出來，Ganache的執行介面如下圖所示。

Ganache

從圖中可以看到Ganache會預設建立10個賬戶，監聽地址是http://127.0.0.1:7545，可以實時看到Current Block、Gas Price、Gas Limit等資訊。

建立智慧合約

目前以太坊官方全力支援的智慧合約開發環境是Remix IDE，我們在合約編輯頁面編寫如下程式碼：

pragma solidity ^0.4.21;

contract InfoContract {
    
   string fName;
   uint age;
   
   function setInfo(string _fName, uint _age) public {
       fName = _fName;
       age = _age;
   }
   
   function getInfo() public constant returns (string, uint) {
       return (fName, age);
   }   
}

程式碼很簡單，就是簡單的給name和age變數賦值與讀取，接下來切換到 run 的 tab 下，將Environment切換成Web3 Provider，並輸入我們的測試鏈的地址http://127.0.0.1:7545，這裡對這三個選項做一簡單說明：

  • Javascript VM：簡單的Javascript虛擬機器環境，純粹練習智慧合約編寫的時候可以選擇
  • Injected Web3：連線到嵌入到頁面的Web3，比如連線到MetaMask
  • Web3 Provider：連線到自定義的節點，如私有的測試網路。

如果連線成功，那麼在下面的Account的選項會預設選擇 Ganache 建立的第一個賬戶地址。接下來我們點選Create就會將我們的智慧合約部署到我們的測試網中。接下來 Remix 的頁面不要關閉，在後面編寫前端程式碼時還要用到合約的地址以及ABI資訊。

安裝Web3

在這之前，先在終端建立我們的專案：

> mkdir info
> cd info

接下來使用 node.js 的包管理工具 npm 初始化專案，建立package.json 檔案，其中儲存了專案需要的相關依賴環境。

> npm init

一路按回車直到專案建立完成。最後，執行下面命令安裝web.js：

> npm install web3

注意： 在實際安裝過程中我發現web3在安裝完成後並沒有 /node_modules/web3/dist/we3.min.js 檔案，這個問題在 issue#1041中有體現，但官方好像一直沒解決。不過可以在這裡下載所需的檔案，解壓後將dist資料夾的內容拷貝到 /node_modules/web3路徑下。

建立 UI

在專案目錄下建立index.html，在這裡我們將建立基礎的 UI，功能包括name和age的輸入框，以及一個按鈕，這些將通過 jQuery 實現：

<!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>Document</title>

    <link rel="stylesheet" type="text/css" href="main.css">

    <script src="./node_modules/web3/dist/web3.min.js"></script>

</head>
<body>
    <div class="container">

        <h1>Info Contract</h1>

        <h2 id="info"></h2>

        <label for="name" class="col-lg-2 control-label">Name</label>
        <input id="name" type="text">

        <label for="name" class="col-lg-2 control-label">Age</label>
        <input id="age" type="text">

        <button id="button">Update Info</button>


    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script>
       // Our future code here..
    </script>

</body>
</html>

接下來需要編寫main.css檔案設定基本的樣式：

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

#info {
    padding:1em;
    background-color:#fff;
    margin: 1em 0;
}

使用Web3與智慧合約互動

UI 建立好之後，在<script>標籤中間編寫web.js的程式碼與智慧合約互動。首先建立web3例項，並與我們的測試環境連線：

<script>
    if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
    } else {
        // set the provider you want from Web3.providers
        web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));
    }
</script>

這段程式碼是web3.js Github提供的樣例，意思是如果web3已經被定義，那麼就可以直接當作我們的 provider 使用。如果沒有定義，則我們手動指定 provider。

這裡可能會存在疑問：為什麼 web3 會被事先定義呢？實際上，如果你使用類似 MetaMask（一個 Chrome 上的外掛，迷你型以太坊錢包）這樣的軟體，provider 就會被自動植入。

在上面程式碼的基礎上，接下來設定預設的以太坊賬戶：

web3.eth.defaultAccount = web3.eth.accounts[0];

在上文中我們使用 Ganache 已經建立了 10 個賬戶了，這裡我們選擇第一個賬戶當作預設賬戶。

接下來需要讓我們的web3知道我們的合約是什麼樣的，這裡需要用到合約的 ABI（Application Binary Interface）。ABI可以使我們呼叫合約的函式，並且從合約中獲取資料。

在上文中我們已經在 Remix 中建立了我們的合約，這時重新回到 Remix，在 Compile 的 tab 下我們點選Details 出現的頁面中我們可以拷貝合約的ABI，如下圖所示。
Web3與智慧合約互動實戰
將其複製到程式碼中：

var infoContract = web3.eth.contract(PASTE ABI HERE!);

接下來轉到 run 的tab，拷貝合約的地址，將其複製到下面的程式碼中：

var info = InfoContract.at('PASTE CONTRACT ADDRESS HERE');

完成這些我們就可以呼叫合約中的函式了，下面我們使用 jQuery 與我們的合約進行互動：

info.getInfo(function(error, result){
    if(!error)
        {
            $("#info").html(result[0]+' ('+result[1]+' years old)');
            console.log(result);
        }
    else
        console.error(error);
});

$("#button").click(function() {
    info.setInfo($("#name").val(), $("#age").val());
});

以上的程式碼就簡單地實現了對合約中兩個函式的呼叫，分別讀取和顯示name和age變數。

到此我們就完成了全部的程式碼，完整程式碼可以在 InfoContract 中找到。在瀏覽器中開啟index.html測試效果如下圖（輸入名字和年齡後重新整理）。

Web3與智慧合約互動實戰

本文的作者是蓋蓋，他的微信公眾號: chainlab

參考文獻

☛ 深入淺出區塊鏈 - 系統學習區塊鏈，打造最好的區塊鏈技術部落格。

相關文章