最新內(nèi)容會更新在主站深入淺出區(qū)塊鏈社區(qū)
原文鏈接:Web3與智能合約交互實(shí)戰(zhàn)
寫在前面
在最初學(xué)習(xí)以太坊的時(shí)候，很多人都是自己創(chuàng)建以太坊節(jié)點(diǎn)后，使用geth與之交互。這種使用命令行交互的方法雖然讓很多程序員感到興奮（黑客帝國的既視感？），但不可能指望普通用戶通過命令行使用Dapp。因此，我們需要一種友好的方式（比如一個(gè)web頁面）來與智能合約交互，于是問題的答案就是web3.js。
Web3.js
Web3.js是以太坊官方的Javascript API，可以幫助智能合約開發(fā)者使用HTTP或者IPC與本地的或者遠(yuǎn)程的以太坊節(jié)點(diǎn)交互。實(shí)際上就是一個(gè)庫的集合，主要包括下面幾個(gè)庫：
web3-eth用來與以太坊區(qū)塊鏈和智能合約交互web3-shh用來控制whisper協(xié)議與p2p通信以及廣播web3-bzz用來與swarm協(xié)議交互web3-utils包含了一些Dapp開發(fā)有用的功能
Web3與geth通信使用的是 JSON-RPC ，這是一種輕量級的RPC（Remote Procedure Call）協(xié)議，整個(gè)通信的模型可以抽象為下圖。
搭建測試鏈
在開發(fā)初期，我們并沒有必要使用真實(shí)的公鏈，為了開發(fā)效率，一般選擇在本地搭建測試鏈。在本文我們選擇的Ganache（在此之前使用的是testrpc，Ganache屬于它的升級版），一個(gè)圖形化測試軟件（也有命令行版本），可以一鍵在本地搭建以太坊區(qū)塊鏈測試環(huán)境，并且將區(qū)塊鏈的狀態(tài)通過圖形界面顯示出來，Ganache的運(yùn)行界面如下圖所示。
從圖中可以看到Ganache會默認(rèn)創(chuàng)建10個(gè)賬戶，監(jiān)聽地址是http://127.0.0.1:7545，可以實(shí)時(shí)看到Current Block、Gas Price、Gas Limit等信息。
創(chuàng)建智能合約
目前以太坊官方全力支持的智能合約開發(fā)環(huán)境是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，這里對這三個(gè)選項(xiàng)做一簡單說明：
Javascript VM：簡單的Javascript虛擬機(jī)環(huán)境，純粹練習(xí)智能合約編寫的時(shí)候可以選擇Injected Web3：連接到嵌入到頁面的Web3，比如連接到MetaMaskWeb3 Provider：連接到自定義的節(jié)點(diǎn)，如私有的測試網(wǎng)絡(luò)。
如果連接成功，那么在下面的Account的選項(xiàng)會默認(rèn)選擇 Ganache 創(chuàng)建的第一個(gè)賬戶地址。接下來我們點(diǎn)擊Create就會將我們的智能合約部署到我們的測試網(wǎng)中。接下來 Remix 的頁面不要關(guān)閉，在后面編寫前端代碼時(shí)還要用到合約的地址以及ABI信息。
安裝Web3
在這之前，先在終端創(chuàng)建我們的項(xiàng)目：
> mkdir info > cd info
接下來使用 node.js 的包管理工具 npm 初始化項(xiàng)目，創(chuàng)建package.json 文件，其中保存了項(xiàng)目需要的相關(guān)依賴環(huán)境。
> npm init
一路按回車直到項(xiàng)目創(chuàng)建完成。最后，運(yùn)行下面命令安裝web.js：
> npm install web3
注意： 在實(shí)際安裝過程中我發(fā)現(xiàn)web3在安裝完成后并沒有 /node_modules/web3/dist/we3.min.js 文件，這個(gè)問題在 issue#1041中有體現(xiàn)，但官方好像一直沒解決。不過可以在這里下載所需的文件，解壓后將dist文件夾的內(nèi)容拷貝到 /node_modules/web3路徑下。
創(chuàng)建 UI
在項(xiàng)目目錄下創(chuàng)建index.html，在這里我們將創(chuàng)建基礎(chǔ)的 UI，功能包括name和age的輸入框，以及一個(gè)按鈕，這些將通過 jQuery 實(shí)現(xiàn)：
<!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文件設(shè)定基本的樣式：
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 創(chuàng)建好之后，在<script>標(biāo)簽中間編寫web.js的代碼與智能合約交互。首先創(chuàng)建web3實(shí)例，并與我們的測試環(huán)境連接：
<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已經(jīng)被定義，那么就可以直接當(dāng)作我們的 provider 使用。如果沒有定義，則我們手動指定 provider。
這里可能會存在疑問：為什么 web3 會被事先定義呢？實(shí)際上，如果你使用類似 MetaMask（一個(gè) Chrome 上的插件，迷你型以太坊錢包）這樣的軟件，provider 就會被自動植入。
在上面代碼的基礎(chǔ)上，接下來設(shè)置默認(rèn)的以太坊賬戶：
web3.eth.defaultAccount = web3.eth.accounts[0];
在上文中我們使用 Ganache 已經(jīng)創(chuàng)建了 10 個(gè)賬戶了，這里我們選擇第一個(gè)賬戶當(dāng)作默認(rèn)賬戶。
接下來需要讓我們的web3知道我們的合約是什么樣的，這里需要用到合約的 ABI（Application Binary Interface）。ABI可以使我們調(diào)用合約的函數(shù)，并且從合約中獲取數(shù)據(jù)。
在上文中我們已經(jīng)在 Remix 中創(chuàng)建了我們的合約，這時(shí)重新回到 Remix，在 Compile 的 tab 下我們點(diǎn)擊Details 出現(xiàn)的頁面中我們可以拷貝合約的ABI，如下圖所示。
將其復(fù)制到代碼中：
var infoContract = web3.eth.contract(PASTE ABI HERE!);
接下來轉(zhuǎn)到 run 的tab，拷貝合約的地址，將其復(fù)制到下面的代碼中：
var info = InfoContract.at('PASTE CONTRACT ADDRESS HERE');
完成這些我們就可以調(diào)用合約中的函數(shù)了，下面我們使用 jQuery 與我們的合約進(jìn)行交互：
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()); });
以上的代碼就簡單地實(shí)現(xiàn)了對合約中兩個(gè)函數(shù)的調(diào)用，分別讀取和顯示name和age變量。
到此我們就完成了全部的代碼，完整代碼可以在 InfoContract 中找到。在瀏覽器中打開index.html測試效果如下圖（輸入名字和年齡后刷新）。
本文的作者是蓋蓋，他的微信公眾號: chainlab
參考文獻(xiàn)
☛ 深入淺出區(qū)塊鏈 - 系統(tǒng)學(xué)習(xí)區(qū)塊鏈，打造最好的區(qū)塊鏈技術(shù)博客。