这篇博客是 通过小游戏学习Ethereum DApps编程 系列的第7篇。
- 通过小游戏学习Ethereum DApps编程（7）← 你在这里
- 通过小游戏学习Ethereum DApps编程（6）
- 通过小游戏学习Ethereum DApps编程（5）
- 通过小游戏学习Ethereum DApps编程（4）
- 通过小游戏学习Ethereum DApps编程（3）
- 通过小游戏学习Ethereum DApps编程（2）
- 通过小游戏学习Ethereum DApps编程（1）
在第五章里面我们了解了ERC20 tokens以及ERC721标准，和crypto-collectible。这些知识可以让我们可以和其他玩家交易自己的创造的角色。
在最后一章节我们将了解怎么把智能合约发不到ETH网络上。我们会了解一些关于Web3.js库的知识点。
客户端和node之间的通信机制
一个客户端向ETH网络发出请求的时候，我们的客户端需要告诉node
- 我们需要的智能合约的地址
- 我们需要哪个功能
- 和那个功能需要的参数
ETH网络的node只能够识别：JSON-RPC语言，对于人类来说不是那么容易阅读。
在实际中，客户端向node发出的请求是这样的
// 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库来进行通讯的话，就可以把上面的晦涩难懂的部分包装到盒子里面。而表面上，我们可以使用易懂的语言。
我们可以这样写：
CryptoZombies.methods.createRandomZombie("Vitalik Nakamoto 🤔")
.send({ from: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", gas: "3000000" })
安装Web3.js库
// Using NPM
npm install web3
// Using Yarn
yarn add web3
// Using Bower
bower install web3
// ...etc.
你也可以直接下载最小化了的js文件：github
然后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>
设置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()
})
ABI
ABI stands for Application Binary Interface。
代表了智能合约函数的JSON形式。Solidity编辑器会告诉我们的ABI。
发布
在编辑，发布了你的智能合约之后，我们需要记下下面的内容：
- 记下我们智能合约在ETH网络上地地址。比如电子猫的地址：0x06012c8cf97BEaD5deAe237070F9587f8E7A266d
- 还有上面ABI。
初始化智能合约
// 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()
图片来源
图片来自原作者官方网站
