Web3與智能合約交互實(shí)戰(zhàn)

liaoyg8023 發(fā)布于2019-06-27 18:26 / 1704人閱讀

摘要：本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)原文鏈接與智能合約交互實(shí)戰(zhàn)原文已更新，請(qǐng)讀者前往原文閱讀寫(xiě)在前面在最初學(xué)習(xí)以太坊的時(shí)候，很多人都是自己創(chuàng)建以太坊節(jié)點(diǎn)后，使用與之交互。

本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)
原文鏈接:Web3與智能合約交互實(shí)戰(zhàn)原文已更新，請(qǐng)讀者前往原文閱讀

寫(xiě)在前面

在最初學(xué)習(xí)以太坊的時(shí)候，很多人都是自己創(chuàng)建以太坊節(jié)點(diǎn)后，使用geth與之交互。這種使用命令行交互的方法雖然讓很多程序員感到興奮（黑客帝國(guó)的既視感？），但不可能指望普通用戶通過(guò)命令行使用Dapp。因此，我們需要一種友好的方式（比如一個(gè)web頁(yè)面）來(lái)與智能合約交互，于是問(wèn)題的答案就是web3.js。

Web3.js

Web3.js是以太坊官方的Javascript API，可以幫助智能合約開(kāi)發(fā)者使用HTTP或者IPC與本地的或者遠(yuǎn)程的以太坊節(jié)點(diǎn)交互。實(shí)際上就是一個(gè)庫(kù)的集合，主要包括下面幾個(gè)庫(kù)：

web3-eth用來(lái)與以太坊區(qū)塊鏈和智能合約交互

web3-shh用來(lái)控制whisper協(xié)議與p2p通信以及廣播

web3-bzz用來(lái)與swarm協(xié)議交互

web3-utils包含了一些Dapp開(kāi)發(fā)有用的功能

Web3與geth通信使用的是 JSON-RPC ，這是一種輕量級(jí)的RPC（Remote Procedure Call）協(xié)議，整個(gè)通信的模型可以抽象為下圖。

搭建測(cè)試鏈

在開(kāi)發(fā)初期，我們并沒(méi)有必要使用真實(shí)的公鏈，為了開(kāi)發(fā)效率，一般選擇在本地搭建測(cè)試鏈。在本文我們選擇的Ganache（在此之前使用的是testrpc，Ganache屬于它的升級(jí)版），一個(gè)圖形化測(cè)試軟件（也有命令行版本），可以一鍵在本地搭建以太坊區(qū)塊鏈測(cè)試環(huán)境，并且將區(qū)塊鏈的狀態(tài)通過(guò)圖形界面顯示出來(lái)，Ganache的運(yùn)行界面如下圖所示。

從圖中可以看到Ganache會(huì)默認(rèn)創(chuàng)建10個(gè)賬戶，監(jiān)聽(tīng)地址是http://127.0.0.1:7545，可以實(shí)時(shí)看到Current Block、Gas Price、Gas Limit等信息。

創(chuàng)建智能合約

目前以太坊官方全力支持的智能合約開(kāi)發(fā)環(huán)境是Remix IDE，我們?cè)诤霞s編輯頁(yè)面編寫(xiě)如下代碼：

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);
   }   
}

代碼很簡(jiǎn)單，就是簡(jiǎn)單的給name和age變量賦值與讀取，接下來(lái)切換到 run 的 tab 下，將Environment切換成Web3 Provider，并輸入我們的測(cè)試鏈的地址http://127.0.0.1:7545，這里對(duì)這三個(gè)選項(xiàng)做一簡(jiǎn)單說(shuō)明：

Javascript VM：簡(jiǎn)單的Javascript虛擬機(jī)環(huán)境，純粹練習(xí)智能合約編寫(xiě)的時(shí)候可以選擇

Injected Web3：連接到嵌入到頁(yè)面的Web3，比如連接到MetaMask

Web3 Provider：連接到自定義的節(jié)點(diǎn)，如私有的測(cè)試網(wǎng)絡(luò)。

如果連接成功，那么在下面的Account的選項(xiàng)會(huì)默認(rèn)選擇 Ganache 創(chuàng)建的第一個(gè)賬戶地址。接下來(lái)我們點(diǎn)擊Create就會(huì)將我們的智能合約部署到我們的測(cè)試網(wǎng)中。接下來(lái) Remix 的頁(yè)面不要關(guān)閉，在后面編寫(xiě)前端代碼時(shí)還要用到合約的地址以及ABI信息。

安裝Web3

在這之前，先在終端創(chuàng)建我們的項(xiàng)目：

> mkdir info
> cd info

接下來(lái)使用 node.js 的包管理工具 npm 初始化項(xiàng)目，創(chuàng)建package.json 文件，其中保存了項(xiàng)目需要的相關(guān)依賴環(huán)境。

> npm init

一路按回車(chē)直到項(xiàng)目創(chuàng)建完成。最后，運(yùn)行下面命令安裝web.js：

> npm install web3

注意： 在實(shí)際安裝過(guò)程中我發(fā)現(xiàn)web3在安裝完成后并沒(méi)有 /node_modules/web3/dist/we3.min.js 文件，這個(gè)問(wèn)題在 issue#1041中有體現(xiàn)，但官方好像一直沒(méi)解決。不過(guò)可以在這里下載所需的文件，解壓后將dist文件夾的內(nèi)容拷貝到 /node_modules/web3路徑下。

創(chuàng)建 UI

在項(xiàng)目目錄下創(chuàng)建index.html，在這里我們將創(chuàng)建基礎(chǔ)的 UI，功能包括name和age的輸入框，以及一個(gè)按鈕，這些將通過(guò) jQuery 實(shí)現(xiàn)：




    
    
    
    Document

    

    



    

        Info Contract

        

        Name
        

        Age

接下來(lái)需要編寫(xiě)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 使用。如果沒(méi)有定義，則我們手動(dòng)指定 provider。

這里可能會(huì)存在疑問(wèn)：為什么 web3 會(huì)被事先定義呢？實(shí)際上，如果你使用類(lèi)似 MetaMask（一個(gè) Chrome 上的插件，迷你型以太坊錢(qián)包）這樣的軟件，provider 就會(huì)被自動(dòng)植入。

在上面代碼的基礎(chǔ)上，接下來(lái)設(shè)置默認(rèn)的以太坊賬戶：

web3.eth.defaultAccount = web3.eth.accounts[0];

在上文中我們使用 Ganache 已經(jīng)創(chuàng)建了 10 個(gè)賬戶了，這里我們選擇第一個(gè)賬戶當(dāng)作默認(rèn)賬戶。

接下來(lái)需要讓我們的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)的頁(yè)面中我們可以拷貝合約的ABI，如下圖所示。

將其復(fù)制到代碼中：

var infoContract = web3.eth.contract(PASTE ABI HERE!);

接下來(lái)轉(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()); });

以上的代碼就簡(jiǎn)單地實(shí)現(xiàn)了對(duì)合約中兩個(gè)函數(shù)的調(diào)用，分別讀取和顯示name和age變量。

到此我們就完成了全部的代碼，完整代碼可以在 InfoContract 中找到。在瀏覽器中打開(kāi)index.html測(cè)試效果如下圖（輸入名字和年齡后刷新）。

本文的作者是蓋蓋，他的微信公眾號(hào): chainlab
參考文獻(xiàn)
Interacting with a Smart Contract through Web3.js (Tutorial))

? 深入淺出區(qū)塊鏈 - 系統(tǒng)學(xué)習(xí)區(qū)塊鏈，打造最好的區(qū)塊鏈技術(shù)博客。

? 我的知識(shí)星球為各位解答區(qū)塊鏈技術(shù)問(wèn)題，歡迎加入討論。

? 關(guān)注公眾號(hào)“深入淺出區(qū)塊鏈技術(shù)”第一時(shí)間獲取區(qū)塊鏈技術(shù)信息。

云服務(wù)器 GPU云服務(wù)器智能合約區(qū)塊鏈智能合約技術(shù) 區(qū)塊鏈智能合約開(kāi)發(fā) 人工智能實(shí)戰(zhàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/24095.html

上一篇：美鏈BEC合約漏洞技術(shù)分析

下一篇：基于星云鏈開(kāi)發(fā)智能合約和DApp

相關(guān)文章

詳解Solidity事件Event - 完全搞懂事件的使用

摘要：什么是事件事件是以太坊虛擬機(jī)日志基礎(chǔ)設(shè)施提供的一個(gè)便利接口。在的應(yīng)用中，如果監(jiān)聽(tīng)了某事件，當(dāng)事件發(fā)生時(shí)，會(huì)進(jìn)行回調(diào)。不過(guò)要注意日志和事件在合約內(nèi)是無(wú)法被訪問(wèn)的，即使是創(chuàng)建日志的合約。使用監(jiān)聽(tīng)事件，刷新現(xiàn)在需要使用監(jiān)聽(tīng)事件，刷新。本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)原文鏈接:搞懂 Solidity 事件 Event - 如何在 DApp 中使用原文已更新，請(qǐng)讀者前往原文閱讀很多同學(xué)對(duì)Soli...

dabai 2019-06-27 18:26 評(píng)論0 收藏0

Java開(kāi)發(fā)區(qū)塊鏈的三大sdk庫(kù)

摘要：是企業(yè)與區(qū)塊鏈相遇的地方。的框架旨在成為開(kāi)發(fā)區(qū)塊鏈解決方案的支柱。以太坊，主要是針對(duì)工程師使用進(jìn)行區(qū)塊鏈以太坊開(kāi)發(fā)的詳解。如果你想將區(qū)塊鏈合并到一個(gè)Java項(xiàng)目中，現(xiàn)在我們來(lái)看看就是這個(gè)細(xì)分領(lǐng)域中三個(gè)最大的OSS玩家。好的伙計(jì)們，我們都聽(tīng)說(shuō)過(guò)比特幣，以太坊或其他加密貨幣，其中有一些時(shí)髦的名字圍繞著我們常見(jiàn)的新聞，但我們作為Java開(kāi)發(fā)人員知道如何輕松地與這些區(qū)塊鏈技術(shù)進(jìn)行交互嗎？以...

iKcamp 2019-08-16 17:16 評(píng)論0 收藏0

以太坊開(kāi)發(fā)實(shí)戰(zhàn)學(xué)習(xí)-Web3.js(九)

摘要：首先我們需要要記住，以太坊是由共享同一份數(shù)據(jù)的相同拷貝的節(jié)點(diǎn)構(gòu)成的。你可以運(yùn)行你自己的以太坊節(jié)點(diǎn)來(lái)作為。在你部署智能合約以后，它將獲得一個(gè)以太坊上的永久地址。如果你還記得第二課，在以太坊上的地址是。通過(guò)前邊的學(xué)習(xí)，DApp 的 Solidity 合約部分就完成了?，F(xiàn)在我們來(lái)做一個(gè)基本的網(wǎng)頁(yè)好讓你的用戶能玩它。要做到這一點(diǎn)，我們將使用以太坊基金發(fā)布的 JavaScript 庫(kù) —— ...

luckyyulin 2019-06-27 18:31 評(píng)論0 收藏0

在區(qū)塊鏈上編程：DApp 開(kāi)發(fā)簡(jiǎn)介

摘要：目前通常指代基于以太坊或者上的智能合約開(kāi)發(fā)的相關(guān)應(yīng)用。引入以太坊通過(guò)的交互流程大致如下總結(jié)隨著區(qū)塊鏈近些年的大紅大紫，被推上了風(fēng)口浪尖，本文從技術(shù)的角度大致介紹了一下所涉及的技術(shù)要點(diǎn)。當(dāng)你開(kāi)始探索區(qū)塊鏈開(kāi)發(fā)，需要了解到這些。 showImg(https://segmentfault.com/img/remote/1460000016608233?w=1370&h=389); 一、DA...

huangjinnan 2019-06-27 18:46 評(píng)論0 收藏0

在區(qū)塊鏈上編程：DApp 開(kāi)發(fā)實(shí)戰(zhàn)——來(lái)寫(xiě)個(gè)競(jìng)猜游戲吧

摘要：合約編寫(xiě)可以看出合約需要實(shí)現(xiàn)用戶投注生成隨機(jī)數(shù)發(fā)放獎(jiǎng)勵(lì)獎(jiǎng)池余額查詢的功能，接下來(lái)編寫(xiě)我們的合約代碼?？偨Y(jié)當(dāng)前隨機(jī)數(shù)的實(shí)現(xiàn)通過(guò)鏈上信息生成，這種生成隨機(jī)數(shù)的方式容易受到不誠(chéng)實(shí)的節(jié)點(diǎn)攻擊。導(dǎo)讀：本文旨在引導(dǎo)對(duì) DApp 開(kāi)發(fā)感興趣的開(kāi)發(fā)者，構(gòu)建一個(gè)基于以太坊去中心化應(yīng)用，通過(guò)開(kāi)發(fā)一款功能完備的競(jìng)猜游戲，邁出 DApp 開(kāi)發(fā)的第一步，通過(guò)實(shí)例講解 Solidity 語(yǔ)言的常用語(yǔ)法，以及前端...

codecook 2019-06-27 18:46 評(píng)論0 收藏0

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

liaoyg8023

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章
閱讀更多

虛擬主機(jī)不夠怎么做子-怎么讓自己電腦做虛擬主機(jī)？

閱讀 3068·2021-09-22 15:59

ION：2周年促銷(xiāo)，VPS年付8折優(yōu)惠，可選洛杉磯/圣何塞cn2 gia/新加坡cn2

閱讀 1319·2021-08-30 09:46

前端每日實(shí)戰(zhàn) 2018 年 5 月份項(xiàng)目匯總（共 30 個(gè)項(xiàng)目）

閱讀 2281·2019-08-30 15:54

ajax的原生實(shí)現(xiàn)-XMLHttpRequest

閱讀 2021·2019-08-26 12:15

JavaScript繼承理解：ES5繼承方式+ES6Class繼承對(duì)比

閱讀 2547·2019-08-26 12:09

javascript 判斷是否為數(shù)組 isArray()

閱讀 1346·2019-08-26 11:57

排序算法分析總結(jié)（附j(luò)s實(shí)現(xiàn)）

閱讀 3344·2019-08-23 17:11

用for...in 和Object.keys()枚舉對(duì)象屬性的差異

閱讀 1893·2019-08-23 15:59

最新活動(dòng)

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Web3與智能合約交互實(shí)戰(zhàn)

Info Contract

相關(guān)文章

詳解Solidity事件Event - 完全搞懂事件的使用

Java開(kāi)發(fā)區(qū)塊鏈的三大sdk庫(kù)

**以太坊開(kāi)發(fā)實(shí)戰(zhàn)學(xué)習(xí)-Web3.js(九)**

在區(qū)塊鏈上編程：DApp 開(kāi)發(fā)簡(jiǎn)介

**在區(qū)塊鏈上編程：DApp 開(kāi)發(fā)實(shí)戰(zhàn)——來(lái)寫(xiě)個(gè)競(jìng)猜游戲吧**

發(fā)表評(píng)論

0條評(píng)論

liaoyg8023

男|高級(jí)講師

TA的文章

虛擬主機(jī)不夠怎么做子-怎么讓自己電腦做虛擬主機(jī)？

ION：2周年促銷(xiāo)，VPS年付8折優(yōu)惠，可選洛杉磯/圣何塞cn2 gia/新加坡cn2

前端每日實(shí)戰(zhàn) 2018 年 5 月份項(xiàng)目匯總（共 30 個(gè)項(xiàng)目）

ajax的原生實(shí)現(xiàn)-XMLHttpRequest

JavaScript繼承理解：ES5繼承方式+ES6Class繼承對(duì)比

javascript 判斷是否為數(shù)組 isArray()

排序算法分析總結(jié)（附j(luò)s實(shí)現(xiàn)）

用for...in 和Object.keys()枚舉對(duì)象屬性的差異

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Web3與智能合約交互實(shí)戰(zhàn)

Info Contract

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！