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

Posted by

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

本系列文章作者:HiBlock区块链技术布道群-Amywu

原文发布于简书

加微信baobaotalk_com,加入技术布道群

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

在前面的系列文章中我们了解了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到你到文件里面。

http://web3.min.js

我们的html文件会是这个样子:

<!DOCTYPE html><html

lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>CryptoZombies front-end</title>

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

http://web3.min.js

</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 和 sendcall 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)

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

Blockathon|48小时极客竞赛,区块链马拉松等你挑战(上海)

时间:2018年10月19-21日

地点:(上海黄浦)露香园路1号(近淮海东路)P2

  • 招募50名开发者(识别下图二维码或点击“阅读原文”即可了解详情并报名)

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

北京blockathon回顾:

Blockathon(北京):48小时极客开发,区块松11个现场交付项目创意公开

成都blockathon回顾:

Blockathon2018(成都站)比赛落幕,留给我们这些区块链应用思考

原文始发于微信公众号( 区块链社区HiBlock ):十一课堂|通过小游戏学习Ethereum DApps编程(6)