最新內容會更新在主站深入淺出區塊鏈社區
原文鏈接:Web3與智能合約交互實戰
寫在前面
在最初學習以太坊的時候，很多人都是自己創建以太坊節點后，使用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）協議，整個通信的模型可以抽象為下圖。
搭建測試鏈
在開發初期，我們並沒有必要使用真實的公鏈，為了開發效率，一般選擇在本地搭建測試鏈。在本文我們選擇的Ganache（在此之前使用的是testrpc，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，比如連接到MetaMaskWeb3 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，如下圖所示。
將其復制到代碼中：
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
參考文獻
☛ 深入淺出區塊鏈 - 系統學習區塊鏈，打造最好的區塊鏈技術博客。