www.久久久久|狼友网站av天堂|精品国产无码a片|一级av色欲av|91在线播放视频|亚洲无码主播在线|国产精品草久在线|明星AV网站在线|污污内射久久一区|婷婷综合视频网站

當前位置:首頁 > 物聯(lián)網(wǎng) > 區(qū)塊鏈
[導讀] 你在以太坊上構建DApps時,你很可能最常使用Web3.js來構建javascript前端。Ethers.js是一個輕量級的JavaScript庫,可以用來替代Web3.js來構建javascr

你在以太坊上構建DApps時,你很可能最常使用Web3.js來構建javascript前端。Ethers.js是一個輕量級的JavaScript庫,可以用來替代Web3.js來構建javascript前端并與以太坊區(qū)塊鏈進行交互。這篇文章/教程中,我將展示如何使用Ethers.js構建一個簡單的DApp。我希望這有助于您評估并開始使用Ethers.js進行下一個項目。

在本教程中,我們將創(chuàng)建一個簡單的Voting dapp。Solidity合同將是相同的,但我們將使用Ethers.js而不是Web3.js作為前端。申請非常簡單,只需初始化一組候選人,讓任何人投票給那些候選人并顯示每位候選人收到的總票數(shù)。

本教程的目標是:

1.設置開發(fā)環(huán)境。

2.學習編寫合同、編譯合同和在開發(fā)環(huán)境中部署合同的過程。

3.通過nodejs控制臺使用ethers.js與合同交互。

4.在簡單的網(wǎng)頁中使用ethers.js與合同互動,以顯示投票計數(shù)并通過頁面對候選人進行投票。

這就是我們將要構建的應用程序的流程圖。

搭建開發(fā)環(huán)境

我們將使用名為ganache的內(nèi)存區(qū)塊鏈(將其視為區(qū)塊鏈模擬器),而不是針對實時區(qū)塊鏈開發(fā)應用程序。 下面是在MacOS上安裝Ganache、EthersJS、Solc(編譯我們的合同)和啟動測試區(qū)塊鏈的步驟。同樣的指令也適用于Linux

zastrin@macbook$ brew update

zastrin@macbook$ brew install nodejs

zastrin@macbook$ mkdir -p ethereum_voTIng_dapp/chapter1-ethersjs

zastrin@macbook$ cd ethereum_voTIng_dapp/chapter1-ethersjs

zastrin@macbook$ npm install ganache-cli ethers solc@0.5.3

zastrin@macbook$ node_modules/.bin/ganache-cli

Ganache CLI v6.0.3 (ganache-core: 2.0.2)

Available Accounts

==================

(0) 0x5c252a0c0475f9711b56ab160a1999729eccce97

(1) 0x353d310bed379b2d1df3b727645e200997016ba3

(2) 0xa3ddc09b5e49d654a43e161cae3f865261cabd23

(3) 0xa8a188c6d97ec8cf905cc1dd1cd318e887249ec5

(4) 0xc0aa5f8b79db71335dacc7cd116f357d7ecd2798

(5) 0xda695959ff85f0581ca924e549567390a0034058

(6) 0xd4ee63452555a87048dcfe2a039208d113323790

(7) 0xc60c8a7b752d38e35e0359e25a2e0f6692b10d14

(8) 0xba7ec95286334e8634e89760fab8d2ec1226bf42

(9) 0x208e02303fe29be3698732e92ca32b88d80a2d36

Private Keys

==================

(0) a6de9563d3db157ed9926a993559dc177be74a23fd88ff5776ff0505d21fed2b

(1) 17f71d31360fbafbc90cad906723430e9694daed3c24e1e9e186b4e3ccf4d603

(2) ad2b90ce116945c11eaf081f60976d5d1d52f721e659887fcebce5c81ee6ce99

(3) 68e2288df55cbc3a13a2953508c8e0457e1e71cd8ae62f0c78c3a5c929f35430

(4) 9753b05bd606e2ffc65a190420524f2efc8b16edb8489e734a607f589f0b67a8

(5) 6e8e8c468cf75fd4de0406a1a32819036b9fa64163e8be5bb6f7914ac71251cc

(6) c287c82e2040d271b9a4e071190715d40c0b861eb248d5a671874f3ca6d978a9

(7) cec41ef9ccf6cb3007c759bf3fce8ca485239af1092065aa52b703fd04803c9d

(8) c890580206f0bbea67542246d09ab4bef7eeaa22c3448dcb7253ac2414a5362a

(9) eb8841a5ae34ff3f4248586e73fcb274a7f5dd2dc07b352d2c4b71132b3c73f

HD Wallet

==================

Mnemonic: cancel better shock lady capable main crunch alcohol derive alarm duck umbrella

Base HD Path: m/44‘/60’/0‘/0/{account_index}

Listening on localhost:8545

請注意,GANACHE CLI創(chuàng)建了10個要自動使用的測試帳戶。這些帳戶預裝了100(測試)以太。

簡單投票合同

我們將使用可靠性編程語言來編寫我們的合同。如果您熟悉面向對象編程,那么學習編寫可靠性合同應該是輕而易舉的。我們將使用一個構造函數(shù)編寫一個智能合約(將合同視為您最喜歡的OOP語言中的類),該構造函數(shù)初始化一組候選項。我們將編寫2個方法,一個用于返回候選人收到的總票數(shù),另一個用于增加候選人的投票數(shù)。

注意:在將合同部署到區(qū)塊鏈時,只調(diào)用一次構造函數(shù)。與Web代碼中每次部署代碼都覆蓋舊代碼的情況不同,區(qū)塊鏈中部署的代碼是不可變的。即如果您更新合同并再次部署,舊合同仍將保留區(qū)塊鏈以及存儲在其中的所有數(shù)據(jù),新部署將創(chuàng)建合同的新實例。

下面是帶內(nèi)聯(lián)注釋解釋的投票合同代碼:

pragma solidity 》=0.4.0 《0.6.0;

// We have to specify what version of compiler this code will compile with

contract VoTIng {

/* mapping field below is equivalent to an associaTIve array or hash.

The key of the mapping is candidate name stored as type bytes32 and value is

an unsigned integer to store the vote count

*/

mapping (bytes32 =》 uint256) public votesReceived;

/* Solidity doesn’t let you pass in an array of strings in the constructor (yet)。

We will use an array of bytes32 instead to store the list of candidates

*/

bytes32[] public candidateList;

/* This is the constructor which will be called once when you

deploy the contract to the blockchain. When we deploy the contract,

we will pass an array of candidates who will be contesting in the election

*/

constructor(bytes32[] memory candidateNames) public {

candidateList = candidateNames;

}

// This function returns the total votes a candidate has received so far

function totalVotesFor(bytes32 candidate) view public returns (uint256) {

require(validCandidate(candidate));

return votesReceived[candidate];

}

// This function increments the vote count for the specified candidate. This

// is equivalent to casting a vote

function voteForCandidate(bytes32 candidate) public {

require(validCandidate(candidate));

votesReceived[candidate] += 1;

}

function validCandidate(bytes32 candidate) view public returns (bool) {

for(uint i = 0; i 《 candidateList.length; i++) {

if (candidateList[i] == candidate) {

return true;

}

}

return false;

}

}

將以上代碼復制到ethereum_voting_dapp / chapter1-ethersjs目錄中名為Voting.sol的文件中。 現(xiàn)在讓我們編譯代碼并將其部署到ganache區(qū)塊鏈。 按照以下命令編譯合同。

zastrin@macbook$ node_modules/.bin/solcjs — bin — abi Voting.sol

zastrin@macbook$ ls

Voting.sol Voting_sol_Voting.abi Voting_sol_Voting.bin

當您使用上述命令成功編譯代碼時,編譯器輸出2個文件,這些文件對于理解:

1. Voting_sol_Voting.bin:這是編譯Voting.sol中的源代碼時得到的字節(jié)碼。 這是將部署到區(qū)塊鏈的代碼。

2. Voting_sol_Voting.abi:這是合同的接口或模板(稱為abi),它告訴合同用戶合同中有哪些方法可用。 每當您將來必須與合同進行交互時,您將需要此abi定義。

我們現(xiàn)在將使用ethersjs庫來部署我們的應用程序并與之交互。

首先,在終端中運行‘node’命令以進入節(jié)點控制臺并初始化ethers對象。 下面的所有代碼片段都需要在節(jié)點控制臺中輸入。 要編譯合同,請將字節(jié)碼和abi從文件系統(tǒng)加載到如下所示的字符串中

zastrin@macbook$ node

》 ethers = require(‘ethers’)

》 bytecode = fs.readFileSync(‘Voting_sol_Voting.bin’).toString()

》 abi = JSON.parse(fs.readFileSync(‘Voting_sol_Voting.abi’).toString())

接下來是初始化程序,它是連接到區(qū)塊鏈的通用接口。 由于我們在本地運行區(qū)塊鏈,我們將使用JsonRPCProvider連接到它。 如果您想連接到生產(chǎn)的區(qū)塊鏈上,您還有許多其他提供選項。 連接后,您可以通過查詢ganache并列出所有帳戶來測試連接。 在nodejs控制臺中運行以下命令應該列出10個帳戶。

》 provider = new ethers.providers.JsonRpcProvider()

》 provider.listAccounts().then(result =》 console.log(result))

下一步是初始化用于簽署事務的簽名者。 我們可以通過將索引傳遞給getSigner來選擇我們想要使用的帳戶(我們在設置中有10個帳戶ganache),如下所示。 錢包初始化后,創(chuàng)建合同庫并按所示部署合同。 deploy函數(shù)接受一組傳遞給合同構造函數(shù)的參數(shù)。 在我們的案例中,我們傳遞候選人的姓名。 我們必須顯式地將字符串轉換為bytes32,因為我們的智能合約將bytes32作為參數(shù)。

》 signer = provider.getSigner(0)

》 factory = new ethers.ContractFactory(abi, bytecode, signer)

》 contract = null

》 factory.deploy([ethers.utils.formatBytes32String(‘Rama’), ethers.utils.formatBytes32String(‘Nick’), ethers.utils.formatBytes32String(‘Jose’)]).then(? =》 { contract = c})

如果您成功部署了合同,則您的合同對象應具有已部署合同的所有詳細信息。 區(qū)塊鏈上部署了數(shù)十萬份合同。 那么,你如何識別區(qū)塊鏈中的合同? 答案:contract.address。 當您必須與合同進行交互時,您需要我們之前談到的這個部署地址和abi定義。

在nodejs控制臺中與合同交互

》 contract.totalVotesFor(ethers.utils.formatBytes32String(‘Rama’))。

then((f) =》 console.log(f.toNumber()))

》 contract.voteForCandidate(ethers.utils.formatBytes32String(‘Rama’))。

then((f) =》 console.log(f))

》 contract.totalVotesFor(ethers.utils.formatBytes32String(‘Rama’))。

then((f) =》 console.log(f.toNumber()))

在節(jié)點控制臺中嘗試上述命令,您應該看到投票計數(shù)增量。 每次投票給候選人時,都會得到一個交易ID:例如:

‘0xdedc7ae544c3dde74ab5a0b07422c5a51b5240603d31074f5b75c0ebc786bf53’。 此事務ID是此事務發(fā)生的證據(jù),您可以在將來的任何時間再參考此事務。 此事務是不可變的。

連接到區(qū)塊鏈的投票網(wǎng)頁

現(xiàn)在大部分工作已經(jīng)完成,我們現(xiàn)在要做的就是創(chuàng)建一個帶有候選名稱的簡單html文件,并在js文件中調(diào)用投票命令(我們已在nodejs控制臺中嘗試和測試過)。 您可以在下面找到html代碼和js文件。 將它們都放在ethereum_voting_dapp / chapter1-ethersjs目錄中,然后在瀏覽器中打開index.html。

《!DOCTYPE html》

《html》

《head》

《title》Hello World DApp《/title》

《link href=‘https://fonts.googleapis.com/css?family=Open Sans:400,700’ rel=‘stylesheet’ type=‘text/css’》

《link href=‘https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css’ rel=‘stylesheet’ type=‘text/css’》

《/head》

《body class=“container”》

《h1》A Simple Hello World Voting Application《/h1》

《div class=“table-responsive”》

《table class=“table table-bordered”》

《thead》

《tr》

《th》Candidate《/th》

《th》Votes《/th》

《/tr》

《/thead》

《tbody》

《tr》

《td》Rama《/td》

《td id=“candidate-1”》《/td》

《/tr》

《tr》

《td》Nick《/td》

《td id=“candidate-2”》《/td》

《/tr》

《tr》

《td》Jose《/td》

《td id=“candidate-3”》《/td》

《/tr》

《/tbody》

《/table》

《/div》

《input type=“text” id=“candidate” /》

《a href=“#” onclick=“voteForCandidate()” class=“btn btn-primary”》Vote《/a》

《/body》

《script charset=“utf-8”

src=“https://cdn.ethers.io/scripts/ethers-v4.min.js”

type=“text/javascript”》《/script》

《script src=“https://code.jquery.com/jquery-3.1.1.slim.min.js”》《/script》

《script src=“。/index.js”》《/script》

《/html》

index.html

abi = JSON.parse(‘[{“constant”:true,“inputs”:[{“name”:“candidate”,“type”:“bytes32”}],“name”:“totalVotesFor”,“outputs”:[{“name”:“”,“type”:“uint8”}],“payable”:false,“stateMutability”:“view”,“type”:“function”},{“constant”:true,“inputs”:[{“name”:“candidate”,“type”:“bytes32”}],“name”:“validCandidate”,“outputs”:[{“name”:“”,“type”:“bool”}],“payable”:false,“stateMutability”:“view”,“type”:“function”},{“constant”:true,“inputs”:[{“name”:“”,“type”:“bytes32”}],“name”:“votesReceived”,“outputs”:[{“name”:“”,“type”:“uint8”}],“payable”:false,“stateMutability”:“view”,“type”:“function”},{“constant”:true,“inputs”:[{“name”:“”,“type”:“uint256”}],“name”:“candidateList”,“outputs”:[{“name”:“”,“type”:“bytes32”}],“payable”:false,“stateMutability”:“view”,“type”:“function”},{“constant”:false,“inputs”:[{“name”:“candidate”,“type”:“bytes32”}],“name”:“voteForCandidate”,“outputs”:[],“payable”:false,“stateMutability”:“nonpayable”,“type”:“function”},{“inputs”:[{“name”:“candidateNames”,“type”:“bytes32[]”}],“payable”:false,“stateMutability”:“nonpayable”,“type”:“constructor”}]’)

provider = new ethers.providers.JsonRpcProvider()

signer = provider.getSigner(0);

contract = new ethers.Contract(‘0x5735731eEbDA5BE1eEe9f0b119B9374a63b0f507’, abi, signer)

candidates = {“Rama”: “candidate-1”, “Nick”: “candidate-2”, “Jose”: “candidate-3”}

function voteForCandidate(candidate) {

candidateName = $(“#candidate”).val();

console.log(candidateName);

contract.voteForCandidate(ethers.utils.formatBytes32String(candidateName)).then((f) =》 {

let div_id = candidates[candidateName];

contract.totalVotesFor(ethers.utils.formatBytes32String(candidateName)).then((f) =》 {

$(“#” + div_id).html(f);

})

});

}

$(document).ready(function() {

candidateNames = Object.keys(candidates);

for(var i=0; i《candidateNames.length; i++) {

let name = candidateNames[i];

contract.totalVotesFor(ethers.utils.formatBytes32String(name)).then((f) =》 {

$(“#” + candidates[name]).html(f);

})

}

});

index.js

您現(xiàn)在應該看到投票計數(shù),您還應該能夠投票給候選人。

如果您使用Metamask之類的錢包,則需要使用Web3提供程序而不是之前使用的JsonRPCProvider。 要做到這一點,只需將index.js中的提供程序更改為:

provider = new ethers.providers.Web3Provider(web3.currentProvider);

如果您想通過Metamask進行交互,則不能再打開index.html并在瀏覽器中進行交互。 您必須通過服務器來服務該文件。 所以安裝一個簡單的網(wǎng)絡服務器,然后如下所示

zastrin@macbook$ npm install http-server

zastrin@macbook$ http-server

您現(xiàn)在可以轉到localhost:8080并與您的應用程序進行交互。 下面是一個快速演示,其中包括將測試以太網(wǎng)帳戶加載到元掩碼中。

我希望你能夠順利搭建應用程序并正常運行,好,教程就到此結束。

本站聲明: 本文章由作者或相關機構授權發(fā)布,目的在于傳遞更多信息,并不代表本站贊同其觀點,本站亦不保證或承諾內(nèi)容真實性等。需要轉載請聯(lián)系該專欄作者,如若文章內(nèi)容侵犯您的權益,請及時聯(lián)系本站刪除。
換一批
延伸閱讀

9月2日消息,不造車的華為或將催生出更大的獨角獸公司,隨著阿維塔和賽力斯的入局,華為引望愈發(fā)顯得引人矚目。

關鍵字: 阿維塔 塞力斯 華為

加利福尼亞州圣克拉拉縣2024年8月30日 /美通社/ -- 數(shù)字化轉型技術解決方案公司Trianz今天宣布,該公司與Amazon Web Services (AWS)簽訂了...

關鍵字: AWS AN BSP 數(shù)字化

倫敦2024年8月29日 /美通社/ -- 英國汽車技術公司SODA.Auto推出其旗艦產(chǎn)品SODA V,這是全球首款涵蓋汽車工程師從創(chuàng)意到認證的所有需求的工具,可用于創(chuàng)建軟件定義汽車。 SODA V工具的開發(fā)耗時1.5...

關鍵字: 汽車 人工智能 智能驅動 BSP

北京2024年8月28日 /美通社/ -- 越來越多用戶希望企業(yè)業(yè)務能7×24不間斷運行,同時企業(yè)卻面臨越來越多業(yè)務中斷的風險,如企業(yè)系統(tǒng)復雜性的增加,頻繁的功能更新和發(fā)布等。如何確保業(yè)務連續(xù)性,提升韌性,成...

關鍵字: 亞馬遜 解密 控制平面 BSP

8月30日消息,據(jù)媒體報道,騰訊和網(wǎng)易近期正在縮減他們對日本游戲市場的投資。

關鍵字: 騰訊 編碼器 CPU

8月28日消息,今天上午,2024中國國際大數(shù)據(jù)產(chǎn)業(yè)博覽會開幕式在貴陽舉行,華為董事、質(zhì)量流程IT總裁陶景文發(fā)表了演講。

關鍵字: 華為 12nm EDA 半導體

8月28日消息,在2024中國國際大數(shù)據(jù)產(chǎn)業(yè)博覽會上,華為常務董事、華為云CEO張平安發(fā)表演講稱,數(shù)字世界的話語權最終是由生態(tài)的繁榮決定的。

關鍵字: 華為 12nm 手機 衛(wèi)星通信

要點: 有效應對環(huán)境變化,經(jīng)營業(yè)績穩(wěn)中有升 落實提質(zhì)增效舉措,毛利潤率延續(xù)升勢 戰(zhàn)略布局成效顯著,戰(zhàn)新業(yè)務引領增長 以科技創(chuàng)新為引領,提升企業(yè)核心競爭力 堅持高質(zhì)量發(fā)展策略,塑強核心競爭優(yōu)勢...

關鍵字: 通信 BSP 電信運營商 數(shù)字經(jīng)濟

北京2024年8月27日 /美通社/ -- 8月21日,由中央廣播電視總臺與中國電影電視技術學會聯(lián)合牽頭組建的NVI技術創(chuàng)新聯(lián)盟在BIRTV2024超高清全產(chǎn)業(yè)鏈發(fā)展研討會上宣布正式成立。 活動現(xiàn)場 NVI技術創(chuàng)新聯(lián)...

關鍵字: VI 傳輸協(xié)議 音頻 BSP

北京2024年8月27日 /美通社/ -- 在8月23日舉辦的2024年長三角生態(tài)綠色一體化發(fā)展示范區(qū)聯(lián)合招商會上,軟通動力信息技術(集團)股份有限公司(以下簡稱"軟通動力")與長三角投資(上海)有限...

關鍵字: BSP 信息技術
關閉
關閉