技術文章 » Web3.0來了！它對前端很友好嗎？

Web3.0來了！它對前端很友好嗎？

2022-11-09 22:00:46

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

最近 web3.0 的呼聲真的是越來越高，也越來越瘋狂。對於我們前端來說，我們需要具備什麼技術呢？（學習視訊分享：）

首先先介紹一下 web3.0 是如何衍生的

網際網路

我們先聊一下啥是web，在1989 年，由CERN（歐洲粒子物理研究所）中 Tim Berners-Lee 領導的技術小組提交了一個針對網際網路的新協定和一個使用該協定的檔案系統，該系統命名為 World Wide Web，簡稱 WWW（全球資訊網），就是我們現在熟知的「網際網路」，它的目的在於使全球的科學家能夠利用網際網路來交流自己的工作檔案。它採用的技術主要是 HTML、URI 、URL、HTTP 等，可以通過靜態的方式展示網頁內容。也就是我們

Web1.0

通常來說，Web1.0 指的是20世紀90年代和21世紀初的網際網路。說白了，就是由部落格、留言板以及AOL和CompuServe等早期入口網站組成的網際網路，國內咱們所熟知得就是新浪、搜狐網易等網站就是當時的產物。在 Web1.0 上基本上都是被動地閱讀靜態網頁，網頁構建協定都是使用 HTTP、FTP 等。在Web1.0 的情況下，網頁內容是唯讀的、靜態的，類似於雜誌，只能看不能修改、不能互動。在Web1.0下，使用者只是資訊（網頁）的消費者，不能與之互動。Web1.0也是撥號上網，平均寬頻50k。

總的來說，Web1.0 是唯讀、去中心化的。

Web2.0

而 Web2.0 大概在2005年左右凸顯出來。 Web2.0 大概的含義就是使用者可以在網頁上建立和釋出自己的內容，主動參與到網際網路中，不再是單純地被動閱讀網頁。整個網頁最終的資金和控制權還是被網頁的擁有者所佔據。比如 Facebook、Twitter和YouTube等社交媒體也是這個時代的產物。當然通過這種方式讓使用者生成內容的激增也造成了自然壟斷，這樣也會導致幾個問題的產生：1.使用者資料是中心化的；2. 使用者資料不可移植；3. 使用者資料被出售

總而言之，Web2.0 是讀寫並存的

Web3.0

Web3.0 是一個去中心化的網路，通過將權力和資料集中到使用者手中，而不是某個公司所獨有。將資料分佈到網路上其中內含去中心化的區塊鏈技術。Web3.0 這個詞語已存在多年了，只是在過去一年才開始流行起來。使用 Web3，網路是去中心化的，因此沒有權威機構對其進行控制，並且構建在網路之上的去中心化應用程式（dapps）是開放的。去中心化網路的開放性意味著任何一方都無法控制資料或限制存取。任何人都可以在未經中央公司許可的情況下構建和連線不同的 dapp。

Web3.0 的主要特點包括如下幾點：

  • 語意 Web——它是 Web3.0 的關鍵，使機器易於處理資料。

  • AI——AI是影響 Web3.0 技術流行的主要關鍵因素之一。它使機器通過大量的Web資料變得更加智慧，以滿足使用者的需求。

  • 3D圖形——Web3.0 已經超越了傳統的網際網路，因為它的三維技術，它提供了一個比2D更現實的三維線上世界。

  • 無處不在——同時存在或無處不在的概念，移動裝置的興起日益增加，許多人更容易隨時隨地存取網際網路。

  • 開放性和互操作性，這指的是在應用程式程式設計介面、資料格式、協定和裝置與平臺之間的互操作性方面的開放性。

  • 全球資料儲存庫，這是一種跨程式和跨網路存取資訊的能力。

總之：Web3.0 是讀、寫、擁有網路的一切。

介紹

對於我們前端開發者來說，我們應該掌握哪些技術或者應該瞭解什麼呢？簡單來說，web3 開發人員建立了分散的全棧應用程式，這些應用程式存在於區塊鏈上並與之互動。下面簡單得說一下。

我們先了解一下專業術語有哪些：

  • Web3：它是以太坊區塊鏈 Ethereum blockchain 和你的智慧合約 Smart Contracts 之間的連線。
  • 以太坊 Ethereum：一個去中心化的開源區塊鏈 blockchain，允許使用者通過建立智慧合約 creating smart contracts 與網路進行互動。它的原生加密貨幣是以太幣。就市值而言，以太幣是僅次於位元幣的第二大最有價值的加密貨幣。它由 Vitalik Buterin 於 2013 年建立。
  • 智慧合約 Smart Contracts ：它們是儲存在區塊鏈上的計算機程式 computer programs ，在滿足預定條件時執行。智慧合約是用 Solidity 語言編寫的。
  • 去中心化 Decentralized ：資料狀態不由中央實體 central entity、平臺 platform 或個人 individual 收集
  • 區塊鏈：區塊鏈網路是一種對等連線，其中資訊在多個裝置之間共用，幾乎不可能被駭客入侵。它是一種記錄資訊的系統，其方式使得很難或不可能更改儲存在網路上的資訊。
  • Solidity：一種用於編寫智慧合約 writing smart contracts 的物件導向 object-oriented 的程式語言。它用於在各種區塊鏈平臺上實施智慧合約，最著名的是以太坊。Solidity 的語法類似於 javascript。要了解 Solidity，最好有 javascript 等程式語言的背景。直接跳入 Solidity 是一個壞主意
  • Dapp：代表去中心化應用程式 Decentralized App 。它們是在去中心化網路或區塊鏈上執行其後端程式碼（主要用 Solidity 編寫的智慧合約）的應用程式。可以使用 react、vue 或 Angular 等前端框架構建 Dapps。
  • Bitcoin 位元幣：世界上第一個被廣泛應用的加密貨幣。
  • Crypto: 又稱 Cryptocurrency，加密貨幣，一種去中心化的數位貨幣。
  • NFT： Non-Fungible Token，一種在鏈上被記錄的、有所有權的數位資產。
  • DAO： Decentralized Autonomous Organization，去中心化的自治組織。
  • Metaverse元宇宙：一種由科技手段創造的虛擬世界的構想。
  • DeFi Decentralized Finance：去中心化金融系統。
  • Token 代幣：可以理解為加密貨幣、NFT 等數位資產的統稱。
  • GameFi： Game + DeFi，中文說法鏈遊，遊戲中的金融系統可通過加密貨幣和 NFT 對映到現實。

介紹完以上這些，我們再聊下區塊鏈對於開發人員也是分類得。主要是核心區塊鏈開發（核心區塊鏈工程師負責區塊鏈系統的架構和安全協定）和區塊鏈軟體開發（這些區塊鏈開發人員利用核心區塊鏈開發人員提供的設計架構建立 Dapp）。

開始

下面我們來點實在得，對於我們前端開發，我們想要開發駐留並與區塊鏈互動的去中心化應用程式，就必須使用 web3.js 和 Ethers.js 庫。

web3.js

web3.js 是一個JavaScript API庫。要使 DApp 在以太坊上執行，我們可以使用web3.js庫提供的web3物件。web3.js 通過RPC呼叫與本地節點通訊，它可以用於任何暴露了RPC層的以太坊節點。web3 包含 eth 物件 - web3.eth（專門與以太坊區塊鏈互動）和 shh 物件 - web3.shh（用於與 Whisper 互動）

新增web3

將 web3 引入到你的工程中，其實跟我們現有的參照方式基本一致

  • npm: npm install web3
  • bower: bower install web3
  • metor: meteor add ethereum:web3
  • vanilla: dist./web3.min.js

使用

然後你需要建立一個web3的範例，設定一個provider。為了保證你不會覆蓋一個已有的provider，比如使用Mist時有內建，需要先檢查是否web3範例已存在

if (!web3) {
  web3 = new Web3(web3.currentProvider);
} else {
  web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
登入後複製

由於這套API被設計來與原生的RPC結點互動，所有函數預設使用同步的HTTP的請求。如果你想發起一個非同步的請求。大多數函數允許傳一個跟在參數列後的可選的回撥函數來支援非同步

web3.eth.getBlock(48, function(error, result){
  if(!error)
      console.log(result)
  else
      console.error(error);
})
登入後複製

API的具體目錄可以點選檢視

Ethers.js

為以太坊區塊鏈及其生態系統提供一個小而完整的 JavaScript API 庫 它最初是與 ethers.io 一起使用，現在已經擴充套件為更通用的庫。功能上基本和web3.js差不多。

特點如下：

  • 將私鑰儲存在使用者端，安全 可信賴
  • 可支援匯入和匯出的 JSON錢包檔案 （Geth，Parity和crowdsale）
  • 從任何合同ABI建立JavaScript 元類物件，包括 ABIv2 和 可讀的 ABI
  • 支援通過 JSON-RPC，INFURA ， Etherscan 或 MetaMask 連線到以太坊節點。
  • 庫 非常小 （壓縮~88kb;未壓縮284kb）

工具

當然除了上面這些，我們也會用到很多工具去完善我們的開發

  • Truffle: 提供了一個使用以太坊虛擬機器器編譯和測試智慧合約的開發環境，用作專案中的構建依賴項
  • Remix IDE: 編寫和使用智慧合約的完美環境，我們可以使用它直接從瀏覽器建立、修改和執行智慧合約。它更像是一個編輯器
  • MetaMask: 一個 Chrome 擴充套件程式，可讓您從瀏覽器連線到以太坊區塊鏈網路
  • Ganache: 提供了一個本地區塊鏈環境來測試您的智慧合約

構建

我們想構建一個全棧 Dapp 如果您想為專案新增使用者介面，react.js、vue.js 或 angular.js 是很好的 javascript 前端框架，因為它們可以使用 ethers.js 或 web3.js 輕鬆與區塊鏈網路整合。有多種平臺可讓您在不編寫程式碼的情況下建立完整的 Dapp比如：Bunz、Dapp builder、Atra io、Bubble io

結論

總的來說，Web3.0 不是一種技術，而是一個概念。我們前端開發者也不用很慌張，不管技術發展成什麼樣子，都會用到前端。我們可以利用我們 react.js、vue.js 或 angular.js 去為我們自己開發的 Dapp 應用去搭建屬於我們自己的平臺，也可以利用 nodejs 通過使用web3.js這個以太坊提供的工具包，來完成合約的編譯，釋出，合約方法呼叫的一整個流程。

更多程式設計相關知識，請存取：！！

以上就是Web3.0來了！它對前端很友好嗎？的詳細內容，更多請關注TW511.COM其它相關文章！