Web3.0 はフロントエンドにとても優しいですか?

最先端

最近web3.0、声が大きくてクレイジーになってきています。フロントエンドには、どのようなテクノロジーが必要ですか?

まず、その導出方法web3.0を

インターネット

まず Web とは何かについてお話ししましょう. 1989 年に CERN (欧州素粒子物理学研究所) の Tim Berners-Lee が率いる技術グループが、インターネット用の新しいプロトコルと、そのプロトコルを使用したドキュメントシステムを提出しました. システムの名前は The WWW (World Wide Web) と呼ばれる World Wide Web は、現在「インターネット」として知られているものです。その目的は、世界中の科学者がインターネットを使用して研究文書を交換できるようにすることです。使用する技術は主に HTML、URI、URL、HTTP などで、Web ページのコンテンツを静的に表示できます。それが私たちです

Web1.0

通常、Web 1.0 は 1990 年代から 2000 年代初頭のインターネットを指します。端的に言えば、ブログや掲示板、AOLやCompuServeなどの初期のポータルサイトで構成されたインターネットであり、中国でおなじみのSina、Sohu、Neteaseなどのサイトは当時の製品です。Web1.0では、静的なWebページは基本的に受動的に読み込まれ、Webページ構築プロトコルはHTTPやFTPなどを利用しています。Web1.0 の場合、Web ページのコンテンツは読み取り専用で静的であり、雑誌と同様に、閲覧のみ可能で、変更や操作はできません。Web 1.0 では、ユーザーは情報 (Web ページ) の消費者に過ぎず、それらと対話することはできません。Web1.0 もダイヤルアップインターネットアクセスで、平均ブロードバンドは 50k です。

一般に、Web1.0 は読み取り専用で分散化されています。

Web2.0

そして 2005 年頃に Web2.0 が登場しました。Web 2.0 の一般的な意味は、ユーザーが Web ページ上で独自のコンテンツを作成して公開し、積極的にインターネットに参加できるようになり、Web ページを単に受動的に読むだけではなくなるということです。ウェブページ全体の最終的な資金と管理は、依然としてウェブページの所有者が占めています。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这个以太坊提供的工具包，来完成合约的编译，发布，合约方法调用的一整个流程。