Web3與智能合約交互實戰

鏈客，專爲開發者而生，有問必答！

此文章來自區塊鏈技術社區，未經容許拒絕轉載。

Web3與智能合約交互實戰

以太坊中智能合約和web3交互實戰

最近區塊鏈、以太坊十分的火，全部就會有許多人去進入區塊鏈這個工做，也有許多人去學習。因此在開端學習以太坊的時分，許多人都是本身建立以太坊節點後，運用geth交互。可是不能盼望普通用戶通過指令運用dapp。所以咱們需求一種友愛的方法來與智能合約交互，那麼這種問題的答案即是web3.js。

Web3.js

Web3.js是以太坊官方的API，能夠幫忙智能合約開發者運用HTTP或許IPC與本地、長途的以太坊節點交互。實踐就一個庫的調集。固然了也包括幾個庫，好比：

web3-eth用來與以太坊區塊鏈和智能合約交互

web3-shh用來控制whisper協議與p2p通信以及播送

web3-bzz用來與swarm協議交互

web3-utils包括了一些Dapp開發有用的功用

Web3與geth通信運用的是 JSON-RPC ，這是一種輕量級的RPC協議，整個通信的模型能夠抽象爲下圖。

樹立檢驗鏈

在開發的初期的時分，咱們並不用用實在的公鏈，爲了開發的效率，通常都是用本地樹立檢驗鏈。在這兒咱們就挑選用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，好比銜接到MetaMask

Web3 Provider：銜接到自定義的節點，如私有的檢驗網絡。

假設銜接成功，那麼在下面的Account的選項會默許挑選 Ganache 建立的第一個帳戶地址。接下來咱們點擊Create就會將咱們的智能合約佈置到咱們的檢驗網中。接下來 Remix 的頁面不要封閉，在後面編寫前端代碼時還要用到合約的地址以及ABI信息。

裝置Web3

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

mkdir info

cd info

接下來運用 node.js 的包管理工具 npm 初始化項目，建立package.json 文件，其間保存了項目需求的相關依賴環境。

npm init

一路按回車直到項目建立結束。終究，運轉下面指令裝置web.js：

npm install web3

建立 UI

在項目目錄下建立index.html，在這兒咱們將建立基礎的 UI，功用包括name和age的輸入框，以及一個按鈕，這些將通過 jQuery 結束：

Document

Info Contract

Name

    Age

    Update Info

接下來需求編寫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 建立好以後，在

這段代碼是web3.js Github供應的樣例，意思是假設web3現已被定義，那麼就能夠直接看成咱們的 provider 運用。假設沒有定義，則咱們手動指定 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檢驗效果以下圖（輸入名字和年齡後改寫）。

畢竟也說了，最近區塊鏈以太坊都很火，也就會有許多衍生的使用，需求咱們去多學習學習筆記那個跟上節奏嘛。今日就講到這兒，所以咱們需求一種友愛的方法來與智能合約交互，那麼這種問題的答案即是web3.js。因此能夠仔細仔細看一看，指望對咱們有些幫忙。