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

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

#首先介紹一下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來了！它對前端很友善嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！