如何實現Web一鍵調用以太坊智能合約

今天有人問如何用按鈕調用智能合約，我不知道在哪裏找，因此我決定寫這個，很快就能夠。

在這篇文章中，我將給出一個簡單但有但願有效的演示，說明JavaScript開發人員如何建立一個可以調用智能合約的網頁，並經過單擊便可向其匯款（以太幣）。

要作到這一點，用戶將須要使用支持Web3的瀏覽器，所以可使用像Parity或Mist這樣的可安裝瀏覽器，或者他們可使用像MetaMask這樣的瀏覽器擴展。

此外，雖然我能夠教你如何直接使用web3API，但我將教你如何使用一個新的很方便的庫與以太網智能合約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語言工程師快速入門區塊鏈開發的最佳選擇。

匯智網原創翻譯，轉載請標明出處。這裏是原文如何實現一鍵調用以太坊智能合約