【CryptoZombies - 3 应用前端和 Web3.js】001 Web3.js入门与web3 Provider

目录

一、前言

二、Web3.js

1、引入

2、Web3.js怎么解决

3、Web3.js环境搭建

4、实战

1.要求

2.代码

三、Web3 Provider

1、引入

2、Infura

3、MetaMask

4、实战

1.要求

2.代码


一、前言

终于到了这里了,之前我们讲的solidity教程只是基础的合约编写,但是我们并不能像普通程序一样运行,因为我们还需要自己搭建运行环境。这确实要比比普通的编程语言难得多。

而我们要做的就是知难而上。

今天我们要讲的是Web3.js,这是针对以太坊的JavaScript库,让我们走进今天的内容来了解一下吧。

二、Web3.js

1、引入

我们都知道,以太坊是由很多结点组成的,每个结点都有区块链的备份,如果我们想要调用一份合约的某个方法,我们需要告诉结点:

1.合约地址

2.方法及其传入参数

以太坊结点只能识别一种叫做JSON-RPC的语言。这种语言不是那么太容易读懂,如果我们想调用一个合约,我们需要发送的查询语句如下:

// 哈……祝你写所有这样的函数调用的时候都一次通过
// 往右边拉…… ==>
{"jsonrpc":"2.0","method":"eth_sendTransaction","params":[{"from":"0xb60e8dd61c5d32be8058bb8eb970870f07233155","to":"0xd46e8dd67c5d32be8058bb8eb970870f07244567","gas":"0x76c0","gasPrice":"0x9184e72a000","value":"0x9184e72a","data":"0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675"}],"id":1}

看不明白?我们换种方式展示:

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

这样确实太麻烦了!

 

2、Web3.js怎么解决

在Web3.js中,把这些复杂的查询语句隐藏起来,我们只需要和JavaScript进行交互即可,方式也非常简单:

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

后续,我们还会更加详细讲解。

3、Web3.js环境搭建

我们想要使用Web3.js,就需要搭建好环境

搭建方式有很多种,如:

// 用 NPM
npm install web3

// 用 Yarn
yarn add web3

// 用 Bower
bower install web3

// ...或者其他。

又如:

对于后面的方式,我们需要从GitHub上面下载压缩后的.js文件,然后包含到我们的项目中。

 

4、实战

1.要求

在下面的HTML项目中使用script标签添加js文件。

JS文件为: web3.min.js

2.代码



  
    
    CryptoZombies front-end
    
    
  
  

  

三、Web3 Provider

1、引入

上面我们搭建好了Web3.js环境(虽然真的很简单,但是我们确实是完成了),然后我们就需要通过环境和区块链进行交互了。

在 Web3.js 里设置 Web3 的 Provider(提供者) 告诉我们的代码应该和 哪个节点 交互来处理我们的读写。我们可以运行自己的结点作为提供者。

但这样不是很方便!

因为如果我们用自己的结点作为提供者,那我们为其他用户提供DAPP服务的时候,我们还需要同步维护一个以太坊结点。所以,如果能有一个第三方服务为我们提供相关功能,这个问题就解决了。

2、Infura

Infura 是一个服务,它维护了很多以太坊节点并提供了一个缓存层来实现高速读取。我们可以用他们的 API 来免费访问这个服务。 用 Infura 作为节点提供者,我们无需自己运营节点就能很可靠地向以太坊发送、接收信息。

使用方法如下:

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

当然,在DAPP中,除了读信息,还会有用户写信息,所以我们需要一个方法,可以让用户用自己的私钥给事务签名。

这些需要涉及到密码学的知识。在这里给大家简单说明一下,在区块链中,每个用户都会有自己的公私钥对表明自己的身份,从而实现匿名性。用户自己保存私钥,公钥可以公开。用户使用自己的私钥对数据进行签名,其他用户可以利用公钥去验证。但是其他用户不会知道该用户的私钥(理想状态下,比如一个恶意用户,用酒把这个人的私钥灌出来也说不准)。一旦用户自己的私钥丢失,他所拥有的以太币(或比特币)就全部永久损失了,除非他能将私钥找回。

 

3、MetaMask

公私钥密码学真的是比较繁琐复杂的,对于一些只想做应用的人来说,他们不需要把密码学理解的太透彻,可能他们只是想挖矿赚个钱而已。

所以我们就需要一个工具来帮我们管理我们的公私钥。

最常用的就是MetaMask:

【CryptoZombies - 3 应用前端和 Web3.js】001 Web3.js入门与web3 Provider_第1张图片

这是一个浏览器扩展插件,我们可以使用谷歌或者火狐浏览器安装并使用。它能让用户安全地维护他们的以太坊账户和私钥, 并用他们的账户和使用 Web3.js 的网站互动。

上面图中的以太币是我做测试使用的,这个币没有实际的价值,只是用于测试。任何人都可以注册一个结点,获得免费的测试以太币。

我们用Metamask作用web3的提供者。具体做法如下:

1.MetaMask 将其 web3 提供者注入到浏览器的全局 JavaScript 对象 web3 中。

2.应用检查 web3 是否存在。若存在就使用 web3.currentProvider 作为其提供者。

举个例子,如:

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()

})

我们可以使用类似的代码在我们的应用中,用以检查用户是否安装MetaMask及提供用户安装。

 

 

4、实战

1.要求

我们在HTML文件中的 标签前面放置了一个空的 script 标签。可以把这节课的 JavaScript 代码写在里面。

 

1.把上面用来检测 MetaMask 是否安装的模板代码粘贴进来。请粘贴到以 window.addEventListener 开头的代码块中。

2.代码



  
    
    CryptoZombies front-end
    
    
  
  

    
  

 

 

 

 

 

 

你可能感兴趣的:(Blockchain)