Web3與智能合約交互實戰

時間 2019-11-19

標籤 web3 web 智能合約交互實戰欄目 HTML 简体版

原文原文鏈接

本文首發於深刻淺出區塊鏈社區原文連接:Web3與智能合約交互實戰原文已更新，請讀者前往原文閱讀css

寫在前面

在最初學習以太坊的時候，不少人都是本身建立以太坊節點後，使用geth與之交互。這種使用命令行交互的方法雖然讓不少程序員感到興奮（黑客帝國的既視感？），但不可能期望普通用戶經過命令行使用Dapp。所以，咱們須要一種友好的方式（好比一個web頁面）來與智能合約交互，因而問題的答案就是web3.js。html

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）協議，整個通訊的模型能夠抽象爲下圖。node

搭建測試鏈

在開發初期，咱們並無必要使用真實的公鏈，爲了開發效率，通常選擇在本地搭建測試鏈。在本文咱們選擇的Ganache（在此以前使用的是testrpc，Ganache屬於它的升級版），一個圖形化測試軟件（也有命令行版本），能夠一鍵在本地搭建以太坊區塊鏈測試環境，而且將區塊鏈的狀態經過圖形界面顯示出來，Ganache的運行界面以下圖所示。jquery

從圖中能夠看到Ganache會默認建立10個帳戶，監聽地址是http://127.0.0.1:7545，能夠實時看到Current Block、Gas Price、Gas Limit等信息。git

建立智能合約

目前以太坊官方全力支持的智能合約開發環境是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，這裏對這三個選項作一簡單說明：github

Javascript VM：簡單的Javascript虛擬機環境，純粹練習智能合約編寫的時候能夠選擇
Injected Web3：鏈接到嵌入到頁面的Web3，好比鏈接到MetaMask
Web3 Provider：鏈接到自定義的節點，如私有的測試網絡。

若是鏈接成功，那麼在下面的Account的選項會默認選擇 Ganache 建立的第一個帳戶地址。接下來咱們點擊Create就會將咱們的智能合約部署到咱們的測試網中。接下來 Remix 的頁面不要關閉，在後面編寫前端代碼時還要用到合約的地址以及ABI信息。web

安裝Web3

在這以前，先在終端建立咱們的項目：npm

> 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，以下圖所示。將其複製到代碼中：

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測試效果以下圖（輸入名字和年齡後刷新）。

本文的做者是蓋蓋，他的微信公衆號: chainlab