資訊專欄INFORMATION COLUMN
摘要：本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)原文鏈接與智能合約交互實戰(zhàn)原文已更新，請讀者前往原文閱讀寫在前面在最初學(xué)習(xí)以太坊的時候，很多人都是自己創(chuàng)建以太坊節(jié)點后，使用與之交互。
本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)
原文鏈接:Web3與智能合約交互實戰(zhàn)原文已更新，請讀者前往原文閱讀
在最初學(xué)習(xí)以太坊的時候，很多人都是自己創(chuàng)建以太坊節(jié)點后，使用geth與之交互。這種使用命令行交互的方法雖然讓很多程序員感到興奮（黑客帝國的既視感？），但不可能指望普通用戶通過命令行使用Dapp。因此，我們需要一種友好的方式（比如一個web頁面）來與智能合約交互，于是問題的答案就是web3.js。
Web3.jsWeb3.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會默認(rèn)創(chuàng)建10個賬戶，監(jiān)聽地址是http://127.0.0.1:7545，可以實時看到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，這里對這三個選項做一簡單說明：
Javascript VM：簡單的Javascript虛擬機環(huán)境，純粹練習(xí)智能合約編寫的時候可以選擇
Injected Web3：連接到嵌入到頁面的Web3，比如連接到MetaMask
Web3 Provider：連接到自定義的節(jié)點，如私有的測試網(wǎng)絡(luò)。
如果連接成功，那么在下面的Account的選項會默認(rèn)選擇 Ganache 創(chuàng)建的第一個賬戶地址。接下來我們點擊Create就會將我們的智能合約部署到我們的測試網(wǎng)中。接下來 Remix 的頁面不要關(guān)閉，在后面編寫前端代碼時還要用到合約的地址以及ABI信息。
安裝Web3在這之前，先在終端創(chuàng)建我們的項目：
> mkdir info > cd info
接下來使用 node.js 的包管理工具 npm 初始化項目，創(chuàng)建package.json 文件，其中保存了項目需要的相關(guān)依賴環(huán)境。
> npm init
一路按回車直到項目創(chuàng)建完成。最后，運行下面命令安裝web.js：
> 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)：
Document
Info Contract
接下來需要編寫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)建好之后，在
這段代碼是web3.js Github提供的樣例，意思是如果web3已經(jīng)被定義，那么就可以直接當(dāng)作我們的 provider 使用。如果沒有定義，則我們手動指定 provider。
這里可能會存在疑問：為什么 web3 會被事先定義呢？實際上，如果你使用類似 MetaMask（一個 Chrome 上的插件，迷你型以太坊錢包）這樣的軟件，provider 就會被自動植入。
在上面代碼的基礎(chǔ)上，接下來設(shè)置默認(rèn)的以太坊賬戶：
web3.eth.defaultAccount = web3.eth.accounts[0];
在上文中我們使用 Ganache 已經(jīng)創(chuàng)建了 10 個賬戶了，這里我們選擇第一個賬戶當(dāng)作默認(rèn)賬戶。
接下來需要讓我們的web3知道我們的合約是什么樣的，這里需要用到合約的 ABI（Application Binary Interface）。ABI可以使我們調(diào)用合約的函數(shù)，并且從合約中獲取數(shù)據(jù)。
在上文中我們已經(jīng)在 Remix 中創(chuàng)建了我們的合約，這時重新回到 Remix，在 Compile 的 tab 下我們點擊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 與我們的合約進行交互：
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變量。
到此我們就完成了全部的代碼，完整代碼可以在 InfoContract 中找到。在瀏覽器中打開index.html測試效果如下圖（輸入名字和年齡后刷新）。
本文的作者是蓋蓋，他的微信公眾號: chainlab
參考文獻Interacting with a Smart Contract through Web3.js (Tutorial))
? 深入淺出區(qū)塊鏈 - 系統(tǒng)學(xué)習(xí)區(qū)塊鏈，打造最好的區(qū)塊鏈技術(shù)博客。
? 我的知識星球為各位解答區(qū)塊鏈技術(shù)問題，歡迎加入討論。
? 關(guān)注公眾號“深入淺出區(qū)塊鏈技術(shù)”第一時間獲取區(qū)塊鏈技術(shù)信息。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/24095.html
摘要：什么是事件事件是以太坊虛擬機日志基礎(chǔ)設(shè)施提供的一個便利接口。在的應(yīng)用中，如果監(jiān)聽了某事件，當(dāng)事件發(fā)生時，會進行回調(diào)。不過要注意日志和事件在合約內(nèi)是無法被訪問的，即使是創(chuàng)建日志的合約。使用監(jiān)聽事件，刷新現(xiàn)在需要使用監(jiān)聽事件，刷新。 本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)原文鏈接:搞懂 Solidity 事件 Event - 如何在 DApp 中使用原文已更新，請讀者前往原文閱讀 很多同學(xué)對Soli...
摘要：是企業(yè)與區(qū)塊鏈相遇的地方。的框架旨在成為開發(fā)區(qū)塊鏈解決方案的支柱。以太坊，主要是針對工程師使用進行區(qū)塊鏈以太坊開發(fā)的詳解。 如果你想將區(qū)塊鏈合并到一個Java項目中，現(xiàn)在我們來看看就是這個細分領(lǐng)域中三個最大的OSS玩家。 好的伙計們，我們都聽說過比特幣，以太坊或其他加密貨幣，其中有一些時髦的名字圍繞著我們常見的新聞，但我們作為Java開發(fā)人員知道如何輕松地與這些區(qū)塊鏈技術(shù)進行交互嗎？以...
摘要：首先我們需要要記住，以太坊是由共享同一份數(shù)據(jù)的相同拷貝的節(jié)點構(gòu)成的。你可以運行你自己的以太坊節(jié)點來作為。在你部署智能合約以后，它將獲得一個以太坊上的永久地址。如果你還記得第二課，在以太坊上的地址是。 通過前邊的學(xué)習(xí)，DApp 的 Solidity 合約部分就完成了。現(xiàn)在我們來做一個基本的網(wǎng)頁好讓你的用戶能玩它。 要做到這一點，我們將使用以太坊基金發(fā)布的 JavaScript 庫 —— ...
摘要：目前通常指代基于以太坊或者上的智能合約開發(fā)的相關(guān)應(yīng)用。引入以太坊通過的交互流程大致如下總結(jié)隨著區(qū)塊鏈近些年的大紅大紫，被推上了風(fēng)口浪尖，本文從技術(shù)的角度大致介紹了一下所涉及的技術(shù)要點。 當(dāng)你開始探索區(qū)塊鏈開發(fā)，需要了解到這些。 showImg(https://segmentfault.com/img/remote/1460000016608233?w=1370&h=389); 一、DA...
摘要：合約編寫可以看出合約需要實現(xiàn)用戶投注生成隨機數(shù)發(fā)放獎勵獎池余額查詢的功能，接下來編寫我們的合約代碼。總結(jié)當(dāng)前隨機數(shù)的實現(xiàn)通過鏈上信息生成，這種生成隨機數(shù)的方式容易受到不誠實的節(jié)點攻擊。 導(dǎo)讀：本文旨在引導(dǎo)對 DApp 開發(fā)感興趣的開發(fā)者，構(gòu)建一個基于以太坊去中心化應(yīng)用，通過開發(fā)一款功能完備的競猜游戲，邁出 DApp 開發(fā)的第一步，通過實例講解 Solidity 語言的常用語法，以及前端...
閱讀 3068·2021-09-22 15:59
閱讀 1322·2021-08-30 09:46
閱讀 2282·2019-08-30 15:54
閱讀 2021·2019-08-26 12:15
閱讀 2548·2019-08-26 12:09
閱讀 1346·2019-08-26 11:57
閱讀 3344·2019-08-23 17:11
閱讀 1893·2019-08-23 15:59
