Web3.0前端工程师需要具备哪些技术？

最近，Web3.0的声音越来越大，越来越疯狂，对于我们的前端，我们需要具备哪些技术？

Recently, Web3.0 has grown in voice and madness, and what technologies do we need for our front end?

首先，说说Web3.0是怎么衍生出来的？

First of all, how does Web3.0 come from?

1.互联网让我们谈谈什么是网络，在1989年，CERN(欧洲粒子物理研究所)TimBerners-Lee领导的一个技术小组提交了一个新的互联网协议和使用该协议的文档系统，命名为万维网，简称WWW(WorldWideWeb)，也就是我们现在所说的“互联网”。其目的是使世界各地的科学家能够使用Internet来交流他们的工作文件，它使用的技术主要有HTML、URI、URL、HTTP等，可以静态显示网页内容。接着，我们就来到web1.0。

1. The purpose of the Internet is to enable scientists around the world to use the Internet to communicate their working papers, using technologies such as HTML, URI, URL, HTTP, etc., which can still display web content. Then we come to Web1.0.

2.Web1.0一般来说，Web1.0指的是1990年代和2000年代初期的互联网。说白了就是由博客、留言板和早期的门户网站如AOL、CompuServe等组成的Internet。在Web1.0时代，我们只能读取信息，就好像我们看报纸一般，我们只能看，不能在网络里进行交互。web1.0是静态网页是被动读取，它的网页构建协议使用HTTP、FTP等。在Web1.0的情况下，网页内容是只读的、静态的，类似于杂志，只能阅读，不能修改，不能交互。在Web1.0的网络里，用户只是信息的消费者，无法与之交互。Web1.0也是拨号上网，平均宽带50k。因为，web1.0无法满足交互需求，于是，就有了web2.0的出现。

, and Web1.0 refers to the Internet in the 1990s and early 2000. It is the Internet, composed of blogs, message boards and early portals such as AOL, CompuServe, etc.. In the Web1.0 era, we can only read information, as if we read newspapers, and we can't interact with each other. Web1.0 is a static web page that is passively read and uses HTTP, FTP, etc. In the case of Web1.0, web content is read-only, static, similar to magazines, cannot be modified, cannot interact with each other. In the Web 1.0 network, users are just consumers of information and cannot interact with it. Web1.0 is also a dial-up Internet, with an average broadband of 50k.

3、Web2.0Web2.0大概是在2005年前后，Web2.0的大意是用户可以在网页上创作和发布自己的内容，主动参与互联网，不再是简单地被动阅读网页。整个网页的最终资金和控制权仍由网页所有者占据，像微信，抖音，Facebook、Twitter、YouTube等社交媒体也是这个时代的产物。当然，这种用户生成内容的泛滥也造成了天然的垄断，这也导致了几个问题：

3, Web 2.0 Web 2.0 is probably around 2005 , and Web 2.0 means that users can create and publish their own content on their web pages, actively participate in the Internet, and are no longer simply passive reading pages. The final funding and control of the entire web page is still held by the owners of the pages, social media such as micro-story, shivering, Facebook, Twitter, YouTube, etc. are also products of this era. Of course, the proliferation of content generated by such users also creates a natural monopoly, which also leads to several problems:

用户数据集中

User data concentration

用户数据不可移植

User data cannot be transplanted

用户数据被出售

User data sold

总而言之，Web2.0是读写并存的互联网时代。因为数据的安全问题，大家想要更加安全且相对自由的网络空间，于是，就有了web3.0的理念，于是，大家开始憧憬web3.0。

To sum up, Web 2.0 is an Internet age of reading and writing. Because of data security problems, we want safer and relatively free cyberspace, so we have web3.0, and we begin to dream about web3.0.

4.Web3.0那什么是web3.0？简单来讲，Web3.0是一个去中心化的网络，将权力和数据集中在用户手中，而不是某单一公司机构手中。在网络上分发数据包含去中心化的区块链技术。Web3.0一词已经存在多年，直到最近一两年才流行起来。使用Web3.0，网络是去中心化的，因此，没有任何一个人或者任何一家机构可以控制它，并且构建在网络之上的去中心化应用程序(应用程序)是开放的。去中心化网络的开放性意味着任何一方都无法控制数据或限制访问。任何人都可以在没有中央公司许可的情况下构建和连接不同的dapp。Web3.0的主要特点包括：

is simply a decentralised network that concentrates power and data in the hands of users rather than in the hands of a single corporate agency. Distribution of data on the network includes decentralised block chain technology. The word Web3.0 has existed for many years and has not been popular until the last year or two. Using Web3.0, the network is decentralized, so that no one or any institution can control it and decentralized applications (applications) built over the network are open. Decentralization of the network means that neither party can control data or limit access. The main features of Web3.0 can be constructed and connected differently without central company permission.

语义网-它是Web3.0的关键，使机器可以轻松处理数据。

Semantic Network - it is the key to Web3.0 so that the machine can easily process data.

AI——AI是影响Web3.0技术普及的主要关键因素之一。它通过海量的网络数据使机器变得更聪明，以满足用户的需求。

AI-AI is one of the main key factors influencing the spread of Web3.0 technology. It makes machines smarter through massive network data to meet the needs of users.

3D图形——Web3.0凭借其3D技术超越了传统互联网，提供了比2D更真实的3D网络世界。

3D graphics - Web3.0 provides a more real 3D networked world than 2D with its 3D technology going beyond the traditional Internet.

Ubiquity-同时或无处不在的概念，移动设备的兴起增加了，许多人更容易随时随地访问互联网。

Ubiquity - The concept of simultaneous or omnipresentity increases the rise of mobile devices and makes it easier for many people to access the Internet at any time or place.

开放互通是指应用程序接口、数据格式、协议的开放，以及设备与平台之间的互通。

Open interconnectivity refers to application interfaces, data formats, open protocols and interconnectivity between equipment and the platform.

全球数据存储库是跨程序和网络访问信息的能力。

The global data repository is the capacity to access information across processes and networks.

简而言之：Web3.0是读取、写入和拥有Web的一切。

In short, Web3.0 is everything that reads, writes and owns Web.

5.我们需要学习掌握哪些技术呢？那么，对于我们前端开发者来说，应该掌握哪些技术或者应该了解哪些？简而言之，web3.0开发人员创建去中心化的全栈应用程序，这些应用程序存在于区块链上并与之交互。下面简单说一下，不过，在开始之前，我们先来了解一下相关的一些专业术语：

? So, for those of us for the development of

Web3.0：它是以太坊区块链和您的智能合约之间的连接。

Web3.0: It is the connection between the Etherm block chain and your smart contract.

Solidity：一种用于编写智能合约的面向对象的编程语言。它用于在各种区块链平台上实施智能合约，最著名的是以太坊。Solidity的语法类似于JavaScript。要了解Solidity，最好有JavaScript等编程语言的背景，直接进入Solidity不是一个好主意。

Solidity: An object-oriented programming language for the preparation of smart contracts. It is used to implement smart contracts on a variety of block-chain platforms, most well known in Taiku. The syntax of Solidity is similar to the context of the programming of JavaScript. It is not a good idea to get into Solidity directly in the context of JavaScript.

Dapp：代表去中心化应用程序。它们是在去中心化网络或区块链上运行后端代码(主要用Solidity编写的智能合约)的应用程序。可以使用React、Vue或Angular等前端框架构建Dapp。

Dapp: represents decentralised applications. They are applications that run backend codes (smart contracts mainly written by Solidity) on decentralised networks or block chains.

比特币：世界上第一个广泛使用的加密货币。

Bitcoin: The world's first widely used encrypted currency.

Crypto：又称Cryptocurrency，加密货币，是一种去中心化的数字货币。

Crypto: Cryptocurency, an encrypted currency, is a decentralised digital currency.

NFT：Non-FungibleToken，一种所有权记录在链上的数字资产。

NFT: Non-FungibleToken, a digital asset whose ownership is recorded on the chain.

DAO：DecentralizedAutonomousOrganization，去中心化的自治组织。

DAO: Decentralized Autonomous Organization, decentralised self-governing organization.

Metaverse：通过技术手段创建的虚拟世界的概念。

Metaverse: The concept of a virtual world created by technological means.

DeFiDecentralizedFinance：去中心化金融系统。

DeFiDecentralized Finance: Decentralizing the financial system.

Token：一个令牌，可以理解为加密货币、NFT等数字资产的统称，

Token: A token that can be understood as a generic name for digital assets such as encrypted currency, NFT, etc.

GameFi：Game+DeFi，中文链游，游戏中的金融系统可以通过加密货币和NFT映射到现实中。

GameFi: Game+DeFi, a Chinese chain tour, where the financial system in the game can be mapped to reality through encrypted currency and NFT.

简单介绍完以上这些专业术语后，我们再来说说区块链对于开发者也是如何分类的。主要是核心区块链开发(核心区块链工程师负责区块链系统的架构和安全协议)和区块链软件开发(这些区块链开发者使用核心区块链开发者提供的设计架构来创建Dapps)。

After a brief introduction to these professional terms, let us say how block chains are classified for developers as well. It is mainly core block chain development (the core block chain engineer is responsible for the structure and security protocol of the block chain system) and block chain software development (these block chain developers use the design architecture provided by the core block chain developers to create Dapps).

6.开始学习让我们进入正题。对于我们的前端开发，我们想要开发驻留在区块链上并与区块链交互的去中心化应用程序，我们必须使用web3.js和Ethers.js库。

. For our front-end development, we want to develop decentralised applications that stay on and interact with the block chain, we have to use web3.js and Ethers.js libraries.

6.1Web3.jsweb3.js是一个JavaScriptAPI库。要让DApp在以太坊上运行，我们可以使用web3.js库提供的web3对象。web3.js通过RPC调用与本地节点通信，它可以与任何公开RPC层的以太坊节点一起使用。web3包含eth对象-web3.eth(用于与以太坊区块链交互)和shh对象-web3.shh(用于与Whisper交互)

6.1Web3.jsweb3.js is a JavaScriptAPI library. To run DApp on the Etheria, we can use web3 objects provided by the Web3.js library. Web3.js communicate with local nodes via RPC, which can be used in conjunction with any open Ether node on the RPC layer. Web3 contains eth-web3.eth (for interaction with the Ethean block chain) and shi-web3.shh (for interaction with Whisper).

6.2添加web3web3引入到你的项目中和我们现有的参考方法是一样的

6.2 Add web3web3 to your project with the same reference we have available

npm:npm安装web3

npm: npm Install web3

Bower:bower安装web3

Bower: Bower Installed Web3

Metor:meteor添加Ethereum:web3

Metor:meteor Add Etheeum:web3

Vanilla：disthttps://web.tedu.cn/information/web3.min.js

6.3使用然后，你需要创建一个web3的实例并设置一个提供者。确保不覆盖已有的provider，比如使用Mist时，它是内置的，需要检查web3实例是否已经存在。

6.3 Use and then you need to create a web3 example and set up a provider. Ensure that there is no coverage of existing provider, for example, when using Mist, it is built-in and needs to be checked if the web3 example already exists.

if(！web3){web3=newWeb3(web3.currentProvider)；}else{web3=newWeb3(newWeb3.providers.HttpProvider("http://localhost:8545"))；}

由于此API旨在与本地RPC节点进行交互，因此默认情况下所有功能都使用同步HTTP请求。如果你想发出一个异步请求。大多数函数允许在参数列表之后传递一个可选的回调函数以支持异步。

As this API is intended to interact with local RPC nodes, all functions use synchronised HTTP requests by default. If you want to send an asynchronous request, most functions allow the transfer of an optional echo function after the parameter list to support the asymmetrical step.

web3.eth.getBlock(48,function(error,result){if(！error)console.log(result)elseconsole.error(error)；})

6.4Ethers.js

为以太坊区块链及其生态系统提供一个小而完整的JavaScriptAPI库。最初与ethers.io一起使用，它已扩展为更通用的库，功能类似于web3.js。

To provide a small and complete JavaScriptAPI library with the Taiwan block chain and its ecosystem. Initially used with ethers.io, it has been expanded to a more generic library with a similar function to web3.js.

特点如下：

The characteristics are as follows:

将私钥保存在客户端，安全可靠

Save private key on client, secure and reliable

JSON钱包文件的导入导出(Geth、Parity和crowd、sale)

Import and export of JSON wallet files (Geth, Parity and Crowd, sale)

从任何合约ABI创建JavaScript元类对象，包括ABIv2和可读ABI

Create JavaScript object from any contract ABI, including ABIv2 and readable ABI

支持通过JSON-RPC、INFURA、Etherscan或MetaMask连接到以太坊节点。

Support for connecting to the Etheria node via JSON-RPC, INBURA, Ethercan or Metamask.

该库非常小(~88kb压缩；284kb未压缩)

The library is very small (~88kb compressed; 284kb uncompressed)

6.5工具

6.5 Tools

当然，除了上面这些，我们还会用到很多工具来完善我们的开发工作。

Of course, in addition to those above, we will have a lot of tools to improve our development.

Truffle：提供使用以太坊虚拟机编译和测试智能合约的开发环境，在项目中用作构建依赖。

Truffle: Provides the development environment for the use of an ETA virtual machine to compile and test smart contracts for building reliance in the project.

RemixIDE：编写和使用智能合约的完美环境，我们可以直接从浏览器创建、修改和执行智能合约，它更像是一个编辑器。

RemixIDE: The perfect environment for the creation and use of smart contracts, which we can create, modify and execute directly from the browser, is more like an editor.

MetaMask：一个Chrome扩展程序，允许您从浏览器连接到以太坊区块链网络。

MetaMask: A Chrome extension that allows you to connect from the browser to the Etherm block chain network.

Ganache：提供原生区块链环境来测试你的智能合约

Ganache: Provide the original block chain environment to test your smart contract

7.构建

8.写在最后

注册有任何问题请添加 微信：MVIP619 拉你进入群

打开微信扫一扫

添加客服

进入交流群