十一課堂|經過小遊戲學習Ethereum DApps編程（6）

時間 2019-11-10

標籤十一課堂經過遊戲學習 ethereum dapps 編程欄目遊戲简体版

原文原文鏈接

在前面的系列文章中咱們瞭解了ERC20 tokens以及ERC721標準，和crypto-collectible。這些知識可讓咱們能夠和其餘玩家交易本身的創造的角色。javascript

在最後一篇咱們將瞭解怎麼把智能合約發不到ETH網絡上。咱們會了解一些關於Web3.js庫的知識點。html

1 客戶端和node之間的通訊機制

一個客戶端向ETH網絡發出請求的時候，咱們的客戶端須要告訴nodejava

咱們須要的智能合約的地址node
咱們須要哪一個功能jquery
和那個功能須要的參數git

ETH網絡的node只可以識別：JSON-RPC語言，對於人類來講不是那麼容易閱讀。github

在實際中，客戶端向node發出的請求是這樣的web

// Yeah... Good luck writing all your function calls this way!

// Scroll right ==>

{"jsonrpc":"2.0","method":"eth_sendTransaction","params":[{"from":"0xb60e8dd61c5d32be8058bb8eb970870f07233155","to":"0xd46e8dd67c5d32be8058bb8eb970870f07244567","gas":"0x76c0","gasPrice":"0x9184e72a000","value":"0x9184e72a","data":"0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675"}],"id":1}

而經過Web3.js庫來進行通信的話，就能夠把上面的晦澀難懂的部分包裝到盒子裏面。而表面上，咱們可使用易懂的語言。ajax

咱們能夠這樣寫：npm

CryptoZombies.methods.createRandomZombie("Vitalik Nakamoto ") .send({ from: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", gas: "3000000" })

2 安裝Web3.js庫

// Using NPM

npm install web3

// Using Yarn

yarn add web3

// Using Bower

bower install web3

// ...etc.

你也能夠直接下載最小化了的js文件：github（https://github.com/ethereum/web3.js/blob/1.0/dist/web3.min.js）

而後import到你到文件裏面。

<script language="javascript" type="text/javascript" src="web3.min.js"></script>

咱們的html文件會是這個樣子：

<!DOCTYPE html><html

 lang="en">

  <head>

    <meta charset="UTF-8">

    <title>CryptoZombies front-end</title>

    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script language="javascript" type="text/javascript" src="web3.min.js"></script>

  </head>

  <body>

  </body>

</html>

3 設置Web3 Provider

ETH網絡上，有很成千上萬的node，經過設置Web3 Provider，咱們能夠設置咱們將對哪一個特定的node發出請求。固然你須要本身建立一個node，來作provider。

若是說這些特別的設置，會讓不少人困惑，固然ETH社區已經爲你準備好了一個工具：Infura

Infura

Infura是一個附帶有緩存，高速處理讀寫的node。

Infura is a service that maintains a set of Ethereum nodes with a caching layer for fast reads, which you can access for free through their API. Using Infura as a provider, you can reliably send and receive messages to/from the Ethereum blockchain without needing to set up and maintain your own node.

能夠這樣設置Infura爲你的Web3 Provider

var web3 = new Web3(new Web3.providers.WebsocketProvider("wss://mainnet.infura.io/ws"));

public，private key

區塊鏈上，別人不可能冒名頂替你，是由於別人不知道你的private key。可是一個智能合約在執行的時候，咱們須要用戶用private key來簽名，從而證實此次調用，是咱們在調用。咱們既然知道private key的重要性，固然不敢輕易的來管理用戶的private key了。

因此，在用Infure的功能的基礎上，若是想要加上private key的管理的功能的話，Chrome和firefox的extension：Metamask將是一個必備的工具。

Metamask uses Infura's servers under the hood as a web3 provider, just like we did above — but it also gives the user the option to choose their own web3 provider. So by using Metamask's web3 provider, you're giving the user a choice, and it's one less thing you have to worry about in your app.

若是安裝了Metamask，也就意味這你裝備了Web3.js。

下面這段代碼是Metamask提供的，怎麼檢測是否Metamask已經安裝：

window.addEventListener('load', function() {

  // Checking if Web3 has been injected by the browser (Mist/MetaMask)

  if (typeof web3 !== 'undefined') {

    // Use Mist/MetaMask's provider

    web3js = new Web3(web3.currentProvider);

  } else {

    // Handle the case where the user doesn't have web3\. Probably

     // show them a message telling them to install Metamask in

     // order to use our app.

  } 

 // Now you can start your app & access web3js freely:

  startApp()

})

4 ABI

ABI stands for Application Binary Interface。

表明了智能合約函數的JSON形式。Solidity編輯器會告訴咱們的ABI。

5 發佈

在編輯，發佈了你的智能合約以後，咱們須要記下下面的內容：

記下咱們智能合約在ETH網絡上地地址。好比電子貓的地址：0x06012c8cf97BEaD5deAe237070F9587f8E7A266d
還有上面ABI。

6 初始化智能合約

// Instantiate myContract

var myContract = new web3js.eth.Contract(myABI, myContractAddress);

Web3.js

咱們會經過Web3.js提供的兩個接口來和Web3.js進行交互：call 和 send call is used for view and pure functions. It only runs on the local node, and won't create a transaction on the blockchain.

還記得：view and pure麼？表示這個函數不會對區塊鏈進行寫的操做，只會讀取，並且徹底是免費的。

Web3.js的call用於激活任何view or pure的函數。

咱們能夠這樣激活Web3.js的call

myContract.methods.myMethod(123).call()

send will create a transaction and change data on the blockchain. You'll need to use send for any functions that aren't view or pure.

Web3.js的call用於激活任何非view or pure的函數。並且須要用戶支付費用

和call同樣，你能夠這樣激活

myContract.methods.myMethod(123).send()

拓展閱讀：

十一課堂|經過小遊戲學習Ethereum DApps編程（1）

十一課堂|經過小遊戲學習Ethereum DApps編程（2）

十一課堂|經過小遊戲學習Ethereum DApps編程（3）