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

最近 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這個以太坊提供的工具包，來完成合約的編譯，發布，合約方法調用的一整個流程。