天天看點
傳回

【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

// ...或者其他。

又如：

<script language="javascript" type="text/javascript" src="web3.min.js"></script>

對于後面的方式，我們需要從GitHub上面下載下傳壓縮後的.js檔案，然後包含到我們的項目中。

4、實戰

1.要求

在下面的HTML項目中使用script标簽添加js檔案。

JS檔案為： ​

​web3.min.js​

 ​

2.代碼 

<!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

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

這是一個浏覽器擴充插件，我們可以使用谷歌或者火狐浏覽器安裝并使用。它能讓使用者安全地維護他們的以太坊賬戶和私鑰， 并用他們的賬戶和使用 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檔案中的 </body> 标簽前面放置了一個空的 script 标簽。可以把這節課的 JavaScript 代碼寫在裡面。

​

​1.​

 ​把上面用來檢測 MetaMask 是否安裝的模闆代碼粘貼進來。請粘貼到以 window.addEventListener 開頭的代碼塊中。

2.代碼 

<!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>

    <script>
      // Start here
      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()

      })
    </script>
  </body>
</html>
web3.js web3 Provider infura MetaMask javascript
上一篇: Java Fork-Join架構實作并發查找
下一篇: Java項目:角色權限背景管理系統腳手架(java+springboot+freemark+jpa+maven+Mysql)

繼續閱讀