美文网首页区块链 | Distributed Ledger TechnologyETH
通过小游戏学习Ethereum DApps编程(7)

通过小游戏学习Ethereum DApps编程(7)

作者: 假装在去天使之城的路上 | 来源:发表于2018-09-24 11:33 被阅读28次

    这篇博客是 通过小游戏学习Ethereum DApps编程 系列的第7篇。

    第五章结束

    在第五章里面我们了解了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()
    

    图片来源

    图片来自原作者官方网站

    相关链接

    HiBlock区块链技术布道 GitHub

    cryptozombies

    相关文章

      网友评论

        本文标题:通过小游戏学习Ethereum DApps编程(7)

        本文链接:https://www.haomeiwen.com/subject/bgutnftx.html