十一课堂|通过小游戏学习Ethereum DApps编程（6）

时间: 2018-10-07来源：OSCHINA

前景提要

【围观】麒麟芯片遭打压成绝版，华为亿元投入又砸向了哪里？>>>

在前面的系列文章中我们了解了ERC20 tokens以及ERC721标准，和crypto-collectible。这些知识可以让我们可以和其他玩家交易自己的创造的角色。
在最后一篇我们将了解怎么把智能合约发不到ETH网络上。我们会了解一些关于Web3.js库的知识点。
1
客户端和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" })
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）
十一课堂|通过小游戏学习Ethereum DApps编程（4）
十一课堂|通过小游戏学习Ethereum DApps编程（5）本系列文章作者：HiBlock区块链技术布道群- Amywu
原文发布于简书
加微信baobaotalk_com，加入技术布道群
Blockathon|48小时极客竞赛，区块链马拉松等你挑战（上海）
时间：2018年10月19-21日
地点：（上海黄浦）露香园路1号(近淮海东路)P2 招募 50名开发者（识别下图二维码或点击“阅读原文”即可了解详情并报名）

北京blockathon回顾：
Blockathon（北京）：48小时极客开发，区块松11个现场交付项目创意公开
成都blockathon回顾：
Blockathon2018（成都站）比赛落幕，留给我们这些区块链应用思考