寫在前面
在最初學習以太坊的時候简僧，很多人都是自己創(chuàng)建以太坊節(jié)點后兰绣，使用geth與之交互。這種使用命令行交互的方法雖然讓很多程序員感到興奮（黑客帝國的既視感聋丝？）索烹，但不可能指望普通用戶通過命令行使用Dapp。因此弱睦，我們需要一種友好的方式（比如一個web頁面）來與智能合約交互百姓，于是問題的答案就是web3.js。
Web3.js
Web3.js是以太坊官方的Javascript API每篷，可以幫助智能合約開發(fā)者使用HTTP或者IPC與本地的或者遠程的以太坊節(jié)點交互瓣戚。實際上就是一個庫的集合端圈，主要包括下面幾個庫：
-
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é)議，整個通信的模型可以抽象為下圖舱权。
搭建測試鏈
在開發(fā)初期矗晃，我們并沒有必要使用真實的公鏈，為了開發(fā)效率宴倍，一般選擇在本地搭建測試鏈张症。在本文我們選擇的Ganache（在此之前使用的是testrpc仓技，Ganache屬于它的升級版），一個圖形化測試軟件（也有命令行版本）俗他，可以一鍵在本地搭建以太坊區(qū)塊鏈測試環(huán)境脖捻，并且將區(qū)塊鏈的狀態(tài)通過圖形界面顯示出來，Ganache的運行界面如下圖所示兆衅。
從圖中可以看到Ganache會默認創(chuàng)建10個賬戶地沮，監(jiān)聽地址是http://127.0.0.1:7545，可以實時看到Current Block羡亩、Gas Price摩疑、Gas Limit等信息。
創(chuàng)建智能合約
目前以太坊官方全力支持的智能合約開發(fā)環(huán)境是Remix IDE畏铆，我們在合約編輯頁面編寫如下代碼：
可以使用本地的remix雷袋，速度快很多。具體配置請查看之前的文章辞居。
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虛擬機環(huán)境倚搬，純粹練習智能合約編寫的時候可以選擇Injected Web3：會連接到以太坊官方的測試網(wǎng)絡(luò)冶共，如Ropsten Test NetworkWeb3 Provider：連接到私有的測試網(wǎng)絡(luò)。
如果連接成功每界，那么在下面的Account的選項會默認選擇 Ganache 創(chuàng)建的第一個賬戶地址捅僵。接下來我們點擊Create就會將我們的智能合約部署到我們的測試網(wǎng)中。接下來 Remix 的頁面不要關(guān)閉眨层，在后面編寫前端代碼時還要用到合約的地址以及ABI信息庙楚。
安裝Web3
在這之前，先在終端創(chuàng)建我們的項目：
yuyangdeMacBook-Pro:~ yuyang$ mkdir testWeb3
yuyangdeMacBook-Pro:~ yuyang$ cd testWeb3
接下來使用 node.js 的包管理工具 npm 初始化項目趴樱，創(chuàng)建package.json 文件馒闷，其中保存了項目需要的相關(guān)依賴環(huán)境。
yuyangdeMacBook-Pro:testWeb3 yuyang$ npm init
一路按回車直到項目創(chuàng)建完成叁征。最后纳账，運行下面命令安裝web.js：
yuyangdeMacBook-Pro:testWeb3 yuyang$ npm install web3
注意： 在實際安裝過程中我發(fā)現(xiàn)web3在安裝完成后并沒有
/node_modules/web3/dist/we3.min.js文件，這個問題在 issue#1041中有體現(xiàn)捺疼，但官方好像一直沒解決疏虫。不過可以在這里下載所需的文件，解壓后將dist文件夾的內(nèi)容拷貝到/node_modules/web3路徑下。
創(chuàng)建 UI
在項目目錄下創(chuàng)建index.html卧秘，在這里我們將創(chuàng)建基礎(chǔ)的 UI呢袱，功能包括name和age的輸入框，以及一個按鈕翅敌，這些將通過 jQuery 實現(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>標簽中間編寫web.js的代碼與智能合約交互。首先創(chuàng)建web3實例蚯涮，并與我們的測試環(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)被定義，那么就可以直接當作我們的 provider 使用恋昼。如果沒有定義看靠，則我們手動指定 provider。
這里可能會存在疑問：為什么 web3 會被事先定義呢液肌？實際上挟炬，如果你使用類似 MetaMask（一個 Chrome 上的插件，迷你型以太坊錢包）這樣的軟件嗦哆，provider 就會被自動植入谤祖。
在上面代碼的基礎(chǔ)上，接下來設(shè)置默認的以太坊賬戶：
web3.eth.defaultAccount = web3.eth.accounts[0];
在上文中我們使用 Ganache 已經(jīng)創(chuàng)建了 10 個賬戶了老速，這里我們選擇第一個賬戶當作默認賬戶粥喜。
接下來需要讓我們的web3知道我們的合約是什么樣的，這里需要用到合約的 ABI（Application Binary Interface）橘券。ABI可以使我們調(diào)用合約的函數(shù)额湘，并且從合約中獲取數(shù)據(jù)。
在上文中我們已經(jīng)在 Remix 中創(chuàng)建了我們的合約旁舰，這時重新回到 Remix锋华，在 Compile 的 tab 下我們點擊Details 出現(xiàn)的頁面中我們可以拷貝合約的ABI，如下圖所示箭窜。
點擊ABI旁邊的按鈕復(fù)制毯焕。
在bejson中轉(zhuǎn)義成字符串
http://www.bejson.com/jsonviewernew/
將其復(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 與我們的合約進行交互：
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());
});
以上的代碼就簡單地實現(xiàn)了對合約中兩個函數(shù)的調(diào)用，分別讀取和顯示name和age變量竹捉。
到此我們就完成了全部的代碼芜辕，完整代碼可以在 https://github.com/gitferry/InfoContract 中找到。
<!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>
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"));
}
web3.eth.defaultAccount = web3.eth.accounts[0];
var infoContract = web3.eth.contract([{"constant":true,"inputs":[],"name":"getInfo","outputs":[{"name":"","type":"string"},{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_fName","type":"string"},{"name":"_age","type":"uint256"}],"name":"setInfo","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"}]);
var info = infoContract.at('0x8cdaf0cd259887258bc13a92c0a6da92698644c0');
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());
});
</script>
</body>
</html>
在瀏覽器中打開index.html測試效果如下圖（輸入名字和年齡后刷新）
原文：Web3與智能合約交互實戰(zhàn)
作者：蓋蓋
