如何实现一键调用以太坊智能合约

今天有人问如何用按钮调用智能合约,我不知道在哪里找,所以我决定写这个,很快就可以。

在这篇文章中,我将给出一个简单但有希望有效的演示,说明JavaScript开发人员如何创建一个能够调用智能合约的网页,并通过单击即可向其汇款(以太币)。

要做到这一点,用户将需要使用支持Web3的浏览器,因此可以使用像Parity或Mist这样的可安装浏览器,或者他们可以使用像MetaMask这样的浏览器扩展。

此外,虽然我可以教你如何直接使用web3API,但我将教你如何使用一个新的很方便的库与以太网智能合约EthJS交互。

你的网站需要等待ready事件,然后检查全局web3对象。看起来像这样:

1
2
3
4
5
6
7
8
9
10
11
12
window.addEventListener('load', function() {

// Check if Web3 has been injected by the browser:
if (typeof web3 !== 'undefined') {
// You have a web3 browser! Continue below!
startApp(web3);
} else {
// Warn the user that they need to get a web3 browser
// Or install MetaMask, maybe with a nice graphic.
}

})

MetaMask开发人员指南中复制。

在这个例子中,我假设你正在使用像Browserify或Webpack这样的JavaScript捆绑器,并且知道如何从NPM安装模块。

在你的应用程序设置中,你将使用一些不同的ethjs模块,你将使用全局web3对象的currentProvider属性初始化它们,这就是它与区块链的对话方式。

1
2
3
4
5
6
7
8
const Eth = require('ethjs-query')
const EthContract = require('ethjs-contract')

function startApp(web3) {
const eth = new Eth(web3.currentProvider)
const contract = new EthContract(eth)
initContract(contract)
}

一旦实例化了合约,就可以使用它来创建对网络上实时合约的引用。要做到这一点,你需要两件事:

  • 合约地址。
  • 合约ABI。

ABI是应用程序二进制接口,它告诉你的JavaScript如何与智能合约通信。它只是描述合约方法的JSON数据。

通常,如果你发布合约,你知道如何获得ABI,如果你要与其他人签订合约,他们应该提供ABI,尽管有时候你可以找到与Etherscan等区块浏览器的合约相匹配的ABI。

假设你有可用的ABI和地址,并了解我们现在如何创建合约对象。在这个例子中,我将使用仅包含Token标准中的transfer(to,value)方法的ABI:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const abi = [{
"constant": false,
"inputs": [
{
"name": "_to",
"type": "address"
},
{
"name": "_value",
"type": "uint256"
}
],
"name": "transfer",
"outputs": [
{
"name": "success",
"type": "bool"
}
],
"payable": false,
"type": "function"
}]
const address = '0xdeadbeef123456789000000000000'
function initContract (contract) {
const MiniToken = contract(abi)
const miniToken = MiniToken.at(address)
listenForClicks(miniToken)
}

现在我们已经为智能合约初始化了一个JavaScript接口,所以我们只需要创建一个小HTML。

1
<button class="transferFunds">Send Money!</button>

还有一点JavaScript来响应点击,并发送这些资金:

1
2
3
4
5
6
7
8
9
10
11
12
function listenForClicks (miniToken) {
var button = document.querySelector('button.transferFunds')
button.addEventListener('click', function() {
miniToken.transfer(toAddress, value, { from: addr })
.then(function (txHash) {
console.log('Transaction sent')
console.dir(txHash)
waitForTxToBeMined(txHash)
})
.catch(console.error)
})
}

请注意,如果此交易也发送以太,你将向包含from字段的选项哈希添加value:'10000'。该值以wei为单位,为1x10 ^ -18以太。转换的简单方法是这样的:

1
var inWei = web3.toWei('10', 'ether')

对于普通的Web开发人员来说,一个奇怪的部分是交易响应并不意味着交易现在已经完成,它只是意味着它已经被传输到网络。它仍然需要被挖掘,而在以太坊中,平均需要大约14秒(阻断时间,查看EthStats.net上的统计数据)。

现在还没有很好的订阅方法可以等待挖掘交易,所以你需要用收到的txHash进行轮询。是的,这很乏味,所以我会告诉你如何使用新的JavaScript async/await模式来减少痛苦:

1
2
3
4
5
6
7
8
9
10
11
async function waitForTxToBeMined (txHash) {
let txReceipt
while (!txReceipt) {
try {
txReceipt = await eth.getTransactionReceipt(txHash)
} catch (err) {
return indicateFailure(err)
}
}
indicateSuccess()
}

如此而已!(我知道,这很多)我希望这足以向你展示如何通过以太坊区块链与智能合约进行互动。一旦你习惯它,它就非常棒,因为它是一种具有权限的全局API,所以当你必须做一些有趣的事情,比如等待交易被挖掘,你不必做令人讨厌的事情,比如管理用户帐户和密码,或自己管理后端服务器!

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

分享一些以太坊、EOS、比特币等区块链相关的交互式在线编程实战教程:

  • java以太坊开发教程,主要是针对java和android程序员进行区块链以太坊开发的web3j详解。
  • python以太坊,主要是针对python工程师使用web3.py进行区块链以太坊开发的详解。
  • php以太坊,主要是介绍使用php进行智能合约开发交互,进行账号创建、交易、转账、代币开发以及过滤器和交易等内容。
  • 以太坊入门教程,主要介绍智能合约与dapp应用开发,适合入门。
  • 以太坊开发进阶教程,主要是介绍使用node.js、mongodb、区块链、ipfs实现去中心化电商DApp实战,适合进阶。
  • C#以太坊,主要讲解如何使用C#开发基于.Net的以太坊应用,包括账户管理、状态与交易、智能合约开发与交互、过滤器和交易等。
  • EOS教程,本课程帮助你快速入门EOS区块链去中心化应用的开发,内容涵盖EOS工具链、账户与钱包、发行代币、智能合约开发与部署、使用代码与智能合约交互等核心知识点,最后综合运用各知识点完成一个便签DApp的开发。
  • java比特币开发教程,本课程面向初学者,内容即涵盖比特币的核心概念,例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等,同时也详细讲解如何在Java代码中集成比特币支持功能,例如创建地址、管理钱包、构造裸交易等,是Java工程师不可多得的比特币开发学习课程。
  • php比特币开发教程,本课程面向初学者,内容即涵盖比特币的核心概念,例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等,同时也详细讲解如何在Php代码中集成比特币支持功能,例如创建地址、管理钱包、构造裸交易等,是Php工程师不可多得的比特币开发学习课程。
  • tendermint区块链开发详解,本课程适合希望使用tendermint进行区块链开发的工程师,课程内容即包括tendermint应用开发模型中的核心概念,例如ABCI接口、默克尔树、多版本状态库等,也包括代币发行等丰富的实操代码,是go语言工程师快速入门区块链开发的最佳选择。

汇智网原创翻译,转载请标明出处。这里是原文如何实现一键调用以太坊智能合约