如何實現一鍵呼叫以太坊智慧合約
今天有人問如何用按鈕呼叫智慧合約，我不知道在哪裡找，所以我決定寫這個，很快就可以。
在這篇文章中，我將給出一個簡單但有希望有效的演示，說明JavaScript開發人員如何建立一個能夠呼叫智慧合約的網頁，並通過單擊即可向其匯款（以太幣）。
要做到這一點，使用者將需要使用支援Web3的瀏覽器，因此可以使用像Parity或Mist這樣的可安裝瀏覽器，或者他們可以使用像MetaMask這樣的瀏覽器擴充套件。
此外，雖然我可以教你如何直接使用 web3 API，但我將教你如何使用一個新的很方便的庫與乙太網智慧合約 ofollow,noindex">EthJS 互動。
你的網站需要等待 ready 事件，然後檢查全域性 web3 物件。看起來像這樣：
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 屬性初始化它們，這就是它與區塊鏈的對話方式。
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：
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。
<button class="transferFunds">Send Money!</button>
還有一點JavaScript來響應點選，併發送這些資金：
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以太。轉換的簡單方法是這樣的：
var inWei = web3.toWei('10', 'ether')
對於普通的Web開發人員來說，一個奇怪的部分是交易響應並不意味著交易現在已經完成，它只是意味著它已經被傳輸到網路。它仍然需要被挖掘，而在以太坊中，平均需要大約14秒（阻斷時間，檢視EthStats.net上的統計資料）。
現在還沒有很好的訂閱方法可以等待挖掘交易，所以你需要用收到的 txHash 進行輪詢。是的，這很乏味，所以我會告訴你如何使用新的JavaScript async/await 模式來減少痛苦：
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語言工程師快速入門區塊鏈開發的最佳選擇。
匯智網原創翻譯，轉載請標明出處。這裡是原文 如何實現一鍵呼叫以太坊智慧合約