前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用

最近 web3.0 的呼聲真的是越來越高，也越來越瘋狂。對于我們前端來說，我們需要具備什么技術(shù)呢？（學(xué)習(xí)視頻分享：web前端）

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

互聯(lián)網(wǎng)

我們先聊一下啥是web，在1989 年，由CERN（歐洲粒子物理研究所）中 Tim Berners-Lee 領(lǐng)導(dǎo)的技術(shù)小組提交了一個針對互聯(lián)網(wǎng)的新協(xié)議和一個使用該協(xié)議的文檔系統(tǒng)，該系統(tǒng)命名為 World Wide Web，簡稱 WWW（萬維網(wǎng)），就是我們現(xiàn)在熟知的“互聯(lián)網(wǎng)”，它的目的在于使全球的科學(xué)家能夠利用互聯(lián)網(wǎng)來交流自己的工作文檔。它采用的技術(shù)主要是 HTML、URI 、URL、HTTP 等，可以通過靜態(tài)的方式展示網(wǎng)頁內(nèi)容。也就是我們

Web1.0

通常來說，Web1.0 指的是20世紀(jì)90年代和21世紀(jì)初的互聯(lián)網(wǎng)。說白了，就是由博客、留言板以及AOL和CompuServe等早期門戶網(wǎng)站組成的互聯(lián)網(wǎng)，國內(nèi)咱們所熟知得就是新浪、搜狐網(wǎng)易等網(wǎng)站就是當(dāng)時的產(chǎn)物。在 Web1.0 上基本上都是被動地閱讀靜態(tài)網(wǎng)頁，網(wǎng)頁構(gòu)建協(xié)議都是使用 HTTP、FTP 等。在Web1.0 的情況下，網(wǎng)頁內(nèi)容是只讀的、靜態(tài)的，類似于雜志，只能看不能修改、不能互動。在Web1.0下，用戶只是信息（網(wǎng)頁）的消費者，不能與之交互。Web1.0也是撥號上網(wǎng)，平均寬帶50k。

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

Web2.0

而 Web2.0 大概在2005年左右凸顯出來。 Web2.0 大概的含義就是用戶可以在網(wǎng)頁上創(chuàng)建和發(fā)布自己的內(nèi)容，主動參與到互聯(lián)網(wǎng)中，不再是單純地被動閱讀網(wǎng)頁。整個網(wǎng)頁最終的資金和控制權(quán)還是被網(wǎng)頁的擁有者所占據(jù)。比如 Facebook、Twitter和YouTube等社交媒體也是這個時代的產(chǎn)物。當(dāng)然通過這種方式讓用戶生成內(nèi)容的激增也造成了自然壟斷，這樣也會導(dǎo)致幾個問題的產(chǎn)生：1.用戶數(shù)據(jù)是中心化的；2. 用戶數(shù)據(jù)不可移植；3. 用戶數(shù)據(jù)被出售

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

Web3.0

Web3.0 是一個去中心化的網(wǎng)絡(luò)，通過將權(quán)力和數(shù)據(jù)集中到用戶手中，而不是某個公司所獨有。將數(shù)據(jù)分布到網(wǎng)絡(luò)上其中內(nèi)含去中心化的區(qū)塊鏈技術(shù)。Web3.0 這個詞語已存在多年了，只是在過去一年才開始流行起來。使用 Web3，網(wǎng)絡(luò)是去中心化的，因此沒有權(quán)威機(jī)構(gòu)對其進(jìn)行控制，并且構(gòu)建在網(wǎng)絡(luò)之上的去中心化應(yīng)用程序（dapps）是開放的。去中心化網(wǎng)絡(luò)的開放性意味著任何一方都無法控制數(shù)據(jù)或限制訪問。任何人都可以在未經(jīng)中央公司許可的情況下構(gòu)建和連接不同的 dapp。

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

• 語義 Web——它是 Web3.0 的關(guān)鍵，使機(jī)器易于處理數(shù)據(jù)。

• AI——AI是影響 Web3.0 技術(shù)流行的主要關(guān)鍵因素之一。它使機(jī)器通過大量的Web數(shù)據(jù)變得更加智能，以滿足用戶的需求。

• 3D圖形——Web3.0 已經(jīng)超越了傳統(tǒng)的互聯(lián)網(wǎng)，因為它的三維技術(shù)，它提供了一個比2D更現(xiàn)實的三維在線世界。

• 無處不在——同時存在或無處不在的概念，移動設(shè)備的興起日益增加，許多人更容易隨時隨地訪問互聯(lián)網(wǎng)。

• 開放性和互操作性，這指的是在應(yīng)用程序編程接口、數(shù)據(jù)格式、協(xié)議和設(shè)備與平臺之間的互操作性方面的開放性。

• 全球數(shù)據(jù)存儲庫，這是一種跨程序和跨網(wǎng)絡(luò)訪問信息的能力。

總之：Web3.0 是讀、寫、擁有網(wǎng)絡(luò)的一切。

介紹

對于我們前端開發(fā)者來說，我們應(yīng)該掌握哪些技術(shù)或者應(yīng)該了解什么呢？簡單來說，web3 開發(fā)人員創(chuàng)建了分散的全棧應(yīng)用程序，這些應(yīng)用程序存在于區(qū)塊鏈上并與之交互。下面簡單得說一下。

我們先了解一下專業(yè)術(shù)語有哪些：

• Web3：它是以太坊區(qū)塊鏈 Ethereum blockchain 和你的智能合約 Smart Contracts 之間的連接。
• 以太坊 Ethereum：一個去中心化的開源區(qū)塊鏈 blockchain，允許用戶通過創(chuàng)建智能合約 creating smart contracts 與網(wǎng)絡(luò)進(jìn)行交互。它的原生加密貨幣是以太幣。就市值而言，以太幣是僅次于比特幣的第二大最有價值的加密貨幣。它由 Vitalik Buterin 于 2013 年創(chuàng)建。
• 智能合約 Smart Contracts ：它們是存儲在區(qū)塊鏈上的計算機(jī)程序 computer programs ，在滿足預(yù)定條件時運(yùn)行。智能合約是用 Solidity 語言編寫的。
• 去中心化 Decentralized ：數(shù)據(jù)狀態(tài)不由中央實體 central entity、平臺 platform 或個人 individual 收集
• 區(qū)塊鏈：區(qū)塊鏈網(wǎng)絡(luò)是一種點對點連接，其中信息在多個設(shè)備之間共享，幾乎不可能被黑客入侵。它是一種記錄信息的系統(tǒng)，其方式使得很難或不可能更改保存在網(wǎng)絡(luò)上的信息。
• Solidity：一種用于編寫智能合約 writing smart contracts 的面向?qū)ο?object-oriented 的編程語言。它用于在各種區(qū)塊鏈平臺上實施智能合約，最著名的是以太坊。Solidity 的語法類似于 javascript。要了解 Solidity，最好有 javascript 等編程語言的背景。直接跳入 Solidity 是一個壞主意
• Dapp：代表去中心化應(yīng)用程序 Decentralized App 。它們是在去中心化網(wǎng)絡(luò)或區(qū)塊鏈上運(yùn)行其后端代碼（主要用 Solidity 編寫的智能合約）的應(yīng)用程序。可以使用 react、vue 或 Angular 等前端框架構(gòu)建 Dapps。
• Bitcoin 比特幣：世界上第一個被廣泛應(yīng)用的加密貨幣。
• Crypto: 又稱 Cryptocurrency，加密貨幣，一種去中心化的數(shù)字貨幣。
• NFT： Non-Fungible Token，一種在鏈上被記錄的、有所有權(quán)的數(shù)字資產(chǎn)。
• DAO： Decentralized Autonomous Organization，去中心化的自治組織。
• Metaverse元宇宙：一種由科技手段創(chuàng)造的虛擬世界的構(gòu)想。
• DeFi Decentralized Finance：去中心化金融系統(tǒng)。
• Token 代幣：可以理解為加密貨幣、NFT 等數(shù)字資產(chǎn)的統(tǒng)稱。
• GameFi： Game + DeFi，中文說法鏈游，游戲中的金融系統(tǒng)可通過加密貨幣和 NFT 映射到現(xiàn)實。

介紹完以上這些，我們再聊下區(qū)塊鏈對于開發(fā)人員也是分類得。主要是核心區(qū)塊鏈開發(fā)（核心區(qū)塊鏈工程師負(fù)責(zé)區(qū)塊鏈系統(tǒng)的架構(gòu)和安全協(xié)議）和區(qū)塊鏈軟件開發(fā)（這些區(qū)塊鏈開發(fā)人員利用核心區(qū)塊鏈開發(fā)人員提供的設(shè)計架構(gòu)創(chuàng)建 Dapp）。

開始

下面我們來點實在得，對于我們前端開發(fā)，我們想要開發(fā)駐留并與區(qū)塊鏈交互的去中心化應(yīng)用程序，就必須使用 web3.js 和 Ethers.js 庫。

web3.js

web3.js 是一個JavaScript API庫。要使 DApp 在以太坊上運(yùn)行，我們可以使用web3.js庫提供的web3對象。web3.js 通過RPC調(diào)用與本地節(jié)點通信，它可以用于任何暴露了RPC層的以太坊節(jié)點。web3 包含 eth 對象 – web3.eth（專門與以太坊區(qū)塊鏈交互）和 shh 對象 – web3.shh（用于與 Whisper 交互）

添加web3

將 web3 引入到你的工程中，其實跟我們現(xiàn)有的引用方式基本一致

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

使用

然后你需要創(chuàng)建一個web3的實例，設(shè)置一個provider。為了保證你不會覆蓋一個已有的provider，比如使用Mist時有內(nèi)置，需要先檢查是否web3實例已存在

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

由于這套API被設(shè)計來與本地的RPC結(jié)點交互，所有函數(shù)默認(rèn)使用同步的HTTP的請求。如果你想發(fā)起一個異步的請求。大多數(shù)函數(shù)允許傳一個跟在參數(shù)列表后的可選的回調(diào)函數(shù)來支持異步

web3.eth.getBlock(48, function(error, result){   if(!error)       console.log(result)   else       console.error(error); })

API的具體目錄可以點擊查看

Ethers.js

為以太坊區(qū)塊鏈及其生態(tài)系統(tǒng)提供一個小而完整的 JavaScript API 庫 它最初是與 ethers.io 一起使用，現(xiàn)在已經(jīng)擴(kuò)展為更通用的庫。功能上基本和web3.js差不多。

特點如下：

• 將私鑰保存在客戶端，安全 可信賴
• 可支持導(dǎo)入和導(dǎo)出的 JSON錢包文件 （Geth，Parity和crowdsale）
• 從任何合同ABI創(chuàng)建JavaScript 元類對象，包括 ABIv2 和 可讀的 ABI
• 支持通過 JSON-RPC，INFURA ， Etherscan 或 MetaMask 連接到以太坊節(jié)點。
• 庫 非常小 （壓縮~88kb;未壓縮284kb）

工具

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

• Truffle: 提供了一個使用以太坊虛擬機(jī)編譯和測試智能合約的開發(fā)環(huán)境，用作項目中的構(gòu)建依賴項
• Remix IDE: 編寫和使用智能合約的完美環(huán)境，我們可以使用它直接從瀏覽器創(chuàng)建、修改和執(zhí)行智能合約。它更像是一個編輯器
• MetaMask: 一個 Chrome 擴(kuò)展程序，可讓您從瀏覽器連接到以太坊區(qū)塊鏈網(wǎng)絡(luò)
• Ganache: 提供了一個本地區(qū)塊鏈環(huán)境來測試您的智能合約

構(gòu)建

我們想構(gòu)建一個全棧 Dapp 如果您想為項目添加用戶界面，react.js、vue.js 或 angular.js 是很好的 javascript 前端框架，因為它們可以使用 ethers.js 或 web3.js 輕松與區(qū)塊鏈網(wǎng)絡(luò)集成。有多種平臺可讓您在不編寫代碼的情況下創(chuàng)建完整的 Dapp比如：Bunz、Dapp builder、Atra io、Bubble io

結(jié)論

總的來說，Web3.0 不是一種技術(shù)，而是一個概念。我們前端開發(fā)者也不用很慌張，不管技術(shù)發(fā)展成什么樣子，都會用到前端。我們可以利用我們 react.js、vue.js 或 angular.js 去為我們自己開發(fā)的 Dapp 應(yīng)用去搭建屬于我們自己的平臺，也可以利用 nodejs 通過使用web3.js這個以太坊提供的工具包，來完成合約的編譯，發(fā)布，合約方法調(diào)用的一整個流程。