Web3.0开发快速入门

大家好，我是Yupi。 今天就带大家简单介绍一下Web3.0开发。

Web3.0前言

Web 3.0概念由以太坊联合创始人Gavin Wood于2014年提出，是指基于区块链的去中心化在线生态系统，代表着下一代互联网时代。 目前，Web 3.0 还处于起步阶段，但发展非常迅速。 其去中心化和抗审查的特性，使人们更容易构建开放的网络生态。

区块链简介 区块链架构

区块链是一种去中心化的分布式账本，可以在数字世界中代表和传递价值。 区块链架构自下而上分为六层，即数据层、网络层、共识层、激励层、合约层和应用层。

区块链通过区块存储数据，每个数据节点包含所有数据，即分布式账本。 每个区块包括区块的大小、区块头、区块中包含的交易数量，以及部分或全部最近的新交易。 数据层主要解决这些数据如何组合成一个有意义的块。 区块链的数据结构包括两种哈希指针，两者都是不可篡改的数据结构基础。 一种是形成“区块+链”（block+chain）的链状数据结构，另一种是由哈希指针组成的默克尔树（如下图所示）。 链状数据结构，很容易发现某个区块中数据的修改； Merkle树的结构起着类似的作用，可以很容易地检测到其中任何交易数据的修改。

您可以在 上查看比特币的区块链交易数据，您可以在 上查看以太坊的区块链交易数据。

区块链采用去中心化的网络架构，没有中心化的服务器，依靠用户点对点交换信息，主要包括P2P组网机制、数据传播和验证机制。 正是由于节点的P2P特性，数据传输分布在节点之间，部分节点或网络损坏对其他部分影响很小。 节点是指区块链客户端软件（如比特币客户端、以太坊客户端），一般分为全节点和轻节点，全节点包含区块链所有的区块数据以太坊交易手续费给了谁，轻节点只包含自己的数据。

共识层的作用是让高度分散的节点在P2P网络中就区块数据的有效性达成共识，并决定谁可以向主链添加新区块（挖矿机制）。

工作量证明共识机制（PoW），矿工需要根据Merkle树将网络中未确认的交易组装成候选块，候选块头部有一个32位的随机数区域，矿工需要反复调整随机数计数和计算，目标是使整个区块的哈希值小于一个“目标值”，谁先完成这个目标，谁就有权在区块链分布式账本中记录这笔交易，并获得一个一定的报酬。 挖矿过程中的竞争是每个矿工节点的算力。 可以变相的认为，谁的算力大，谁的工作量就大，谁就有记账权和获得奖励的权利。 比特币采用PoW机制； 以太坊一开始使用的是PoW机制，后来由于交易速度更快，资源消耗更低，改为PoS机制。 这种挖矿计算是不对称的。 挖矿可能需要经过多次哈希计算，但要验证是否找到有效的随机数，只需要一次计算，其他节点可以快速验证交易是否已记录在账本中。

激励层的作用主要是提供一些激励措施，鼓励节点参与记账，保证整个网络的安全运行。 通过共识机制获胜并获得记账权的节点可以获得一定的奖励。

目前比特币的激励措施是，当一个新的区块产生时，系统会奖励矿工一定数量的比特币（系统产生的新比特币也会记录在分布式账本中，源地址为0，所以整个过程称为挖矿）。 就是50个比特币，每四年减半为25个，12.5个，以此类推。 当比特币数量达到上限 2100 万（2140）时，激励将完全取决于交易手续费。 以太坊交易依靠汽油费来激励矿工。

合约层封装了各种脚本、算法和智能合约，使区块链可编程。 例如，比特币的脚本 [1] 规定了比特币交易方式和流程的各种细节，但是这个脚本使用起来不够方便，也不是图灵完备的。 以太坊提出智能合约解决方案，提供图灵完备的高级编程语言编写智能合约，使智能合约能够运行在分布式以太坊虚拟机EVM上。 智能合约是存储在区块链上的一段代码。 它们可以由区块链上的交易所触发。 这段代码被触发后，可以从区块链中读取数据，也可以向区块链中写入数据。 区块链系统（比特币、以太坊）可以认为是一个分布式状态机，通过交易触发合约（脚本、智能合约）的运行来改变状态机的状态。

应用层封装了区块链的各种应用场景。 具体应用请参考90+ #Ethereum Apps You Can Use Right Now[2]。

以下是一笔比特币转账交易的流程：

以太坊简介

因为我们要在以太坊上开发一个Web3.0的demo应用，所以简单介绍一下以太坊的一些基本概念。

账户和钱包

以太坊账户分为外部账户和合约账户。 外部账户是拥有私钥的账户，拥有私钥意味着控制对以太币或合约的访问。 合约账户有地址但没有私钥，合约账户有智能合约代码，外部账户没有。 智能合约代码是以太坊区块链在EVM创建和执行合约账户时记录的软件程序。

钱包是用于管理以太坊账户、控制对以太币的访问、管理私钥和地址、跟踪账户余额以及创建和签署交易的软件应用程序。 可以说，以太坊钱包是通往以太坊世界的门户。 关于以太坊钱包的一个常见误解是它们包含以太币或代币。 事实上，只有钥匙放在钱包里。 以太币和其他各种代币都保存在以太坊区块链上。

创建以太坊外部账户时，会通过非对称加密算法生成一对公钥和私钥存储在钱包中，地址为公钥的哈希值。 交易的签名和验证过程如下（椭圆曲线数字签名算法）：

Sig=Fsig(Fkeccak256(m), k)

在：

函数 Fsig 生成一个由两部分组成的签名，通常称为 r 和 s：Sig=(r, s)

签名验证算法的输入包括交易数据包（实际上是交易的哈希值的一部分）、签名者的公钥和签名（r和s值）。 如果消息和公钥的签名验证成功，算法将返回 true 。

以太坊和天然气

以太坊的货币单位称为以太币，也常以ETH表示，如1以太币或1ETH。 以太可以拆分成更小的单位，最小的单位叫做wei，1以太=10^18 wei。 以太的面额和单位名称如下：

以太坊交易过程使用gas来支付手续费。 Gas不是Ether，它是一种独立的虚拟货币，与Ether存在汇率关系。 Gas独立于以太坊，是为了保护系统的灵活性，保证在以太坊价格大幅波动的情况下以太坊交易手续费给了谁，gas的价值相对稳定。

Gas 的另一个作用是通过交易来控制资源的使用。 交易数据会包含两个参数：gasPrice（交易发起者愿意支付的gas价格）和gasLimit（交易发起者愿意为本次交易支付的最大gas量），以及每一个智能合约的执行情况代码语句会消耗相应的gas。 当运行过程中累计gas消耗量超过gasLimit时，合约终止，交易失败。 失败的交易仍将被记录为失败的尝试，并且执行所花费的 gas 将从原始帐户中扣除。 除此之外，不会对合约或账户状态产生任何其他影响。

客户

Geth 是一个用 go 语言实现的官方以太坊客户端。 客户端可以作为全功能节点运行，也可以作为远程调用运行。 一个全功能的节点会下载所有的区块数据，这对系统的网络和存储有很高的要求。 远程调用以太坊的客户端不在本地保存区块链数据，也不参与区块和交易验证。 此类客户端提供钱包功能，还可以创建和广播交易。 以太坊客户端会提供API（如web3.js API、JSON-RPC API）来访问以太坊网络。

智能合约

智能合约是运行在以太坊虚拟机上的计算机程序。 一旦部署，智能合约的代码不能更改，但可以删除。 在区块链上注册合约需要特殊的交易。 本次交易的目标地址为0x0000000000000000000000000000000000000000，也称为零地址。

当交易以合约地址为目标时，它会导致该合约在 EVM 中运行，使用交易和交易的数据作为其输入。 由于合约账户没有私钥，因此无法发起交易。 只有外部账户可以发起交易，但合约可以通过调用其他合约对交易做出反应，构建复杂的执行路径。 智能合约永远不会“自动运行”或“在后台运行”。

常用的以太坊智能合约编程语言是solidity。

令牌/令牌/通行证

令牌、令牌和证书都指的是同一个东西。 区块链上的代币是指基于区块链的一种抽象资产，可以持有并用于代表资产、现金或访问权限。

代币不同于以太坊，因为以太坊协议本身与代币完全无关。 发送以太币是以太坊平台的固有行为，但发送或拥有代币并不是以太坊协议中定义的。 以太坊账户的以太币余额在协议层处理，而以太坊账户的代币余额在智能合约层处理。 要在以太坊上创建新代币，您必须创建新的智能合约。 部署后，智能合约会处理所有事情，包括所有权、转让和访问权限。

代币有可替代的代币和不可替代的代币。 标准分别为ERC20[3]和ERC721[4]。 目前市场上流行的NFT是一种不可替代的代币。

Web3.0简介 从信息互联网到价值互联网

1989 年，Tim Bernes-Lee 撰写了一篇题为“信息管理：一项提案”的论文，其中他将“网络”一词描述为通过超文本链接互连的信息系统网络，即 Web 1.0。 Web 1.0 发生在 1990 年至 2004 年间。网景、谷歌、雅虎、亚马逊、eBay、Java 和 AOL 等公司凭借其浏览器和搜索引擎主导了互联网。 这些平台是 Web 1.0 时代的内容创造者。 大多数用户是内容的消费者。

随着社交媒体平台的出现，Web 2.0 时代始于 2004 年。 在Web 2.0时代，用户可以将自己的文字、图片、视频等内容上传到平台，不再是内容的被动接受者，而是可以创造内容并与他人交流。 在Web 2.0时代，人们成为各种应用的用户，在这些产品上创造出大量的内容，而这些数据由一个中心化的平台控制。

Web 3.0概念由以太坊联合创始人、波卡创始人Gavin Wood于2014年提出，代表着下一代去中心化互联网，赋予个体价值。 Web 3.0关注的是通过区块链等去中心化技术形成的“谁创造，谁拥有”的关系价值。

以太坊官网[5]总结了Web 3.0的主要特点如下：

比较 Web 2.0 和 Web 3.0 开发范式

Web 2.0 开发范式：

Web 3.0 开发范式：

实践：去中心化 HPC 代币交易系统

接下来，我们将基于以太坊开发一种遵循ERC20[6]标准的替代代币，称为HPC，并提供一个简单的HPC代币交易页面。

安装客户端&生成账号

按照官网说明安装geth客户端，生成两个测试账号。

brew tap ethereum/ethereum
brew install ethereum

mkdir -p geth-config/keystore
clef newaccount --keystore geth-config/keystore  # 运行两次，创建两个测试账户
clef newaccount --keystore geth-config/keystore

创建账户后，可以看到在geth-config/keystore目录下多了两个账户配置文件。 您也可以稍后使用这两个文件将帐户导入其他钱包。

clef --keystore geth-config/keystore --configdir geth-config/clef --chainid 5 #先启动clef，后续交易需要使用clef来签名
geth --datadir geth-config --signer=geth-config/clef/clef.ipc --goerli --syncmode light --http --http.api "eth,debug"   # 新开一个terminal tab，启动geth

geth attach http://127.0.0.1:8545   # 新开一个terminal tab运行该命令，运行该命令后terminal tab会被block住，需要到运行clef服务的tab去授权，授权完geth attach命令就会进入一个交互式的页面，该页面可以使用web3.js api进行交互

开发智能合约（类似于服务器端代码）

pragma solidity ^0.5.2;

interface IERC20 {
    function transfer(address to, uint256 value) external returns (bool);
    function approve(address spender, uint256 value) external returns (bool);
    function transferFrom(address from, address to, uint256 value) external returns (bool);
    function totalSupply() external view returns (uint256);
    function balanceOf(address who) external view returns (uint256);
    function allowance(address owner, address spender) external view returns (uint256);

    event Transfer(address indexed from, address indexed to, uint256 value);
    event Approval(address indexed owner, address indexed spender, uint256 value);
}

brew install solidity

solc --bin --abi HippoCoin.sol  # 在代码目录下执行

hpcContract = new eth.Contract(abi, '0x74fe09b3ba8adea31f6448f4c742e9148a262d9b')  # 获取合约实例
hpcContract.mint('0xEC30B4dAec9B113E5009a2259e7A4f201aE1D709', 200000, {from: '0xEC30B4dAec9B113E5009a2259e7A4f201aE1D709'})  # 0xEC30B4dAec9B113E5009a2259e7A4f201aE1D709是创建合约的地址，在合约代码里将其设为了owner，可以进行挖矿
hpcContract.mint('0xee45cE18A60C2Df0B092185Ca4C0B483018FB07B', 500000, {from: '0xEC30B4dAec9B113E5009a2259e7A4f201aE1D709'})
hpcContract.transfer('0xEC30B4dAec9B113E5009a2259e7A4f201aE1D709', 500, {from: '0xee45cE18A60C2Df0B092185Ca4C0B483018FB07B'})

查看交易记录

代币详情

开发前端页面

请求连接钱包：

export const requestMetamaskAccount = async () => {
  if (!ethereum) {
    return;
  }

  const accounts = await ethereum.request({ method: "eth_accounts" });

  if (accounts.length === 0) {
    currentAccount = null;
  } else if (accounts[0] !== currentAccount) {
    currentAccount = accounts[0];
  }

  return currentAccount;
};

发送交易：

  const toAddress = document.getElementById("toAddress").value.trim();
  const amount = document.getElementById("amount").value.trim();

  const contractAddress = '0x74FE09B3bA8AdEa31f6448f4c742e9148A262d9b';
  const abiInterface = new utils.Interface(abi);
  const functionData = abiInterface.encodeFunctionData("transfer", [
    toAddress,
    parseInt(amount),
  ]);
  const transactionParameters = {
    nonce: "0x00", // ignored by MetaMask
    gasPrice: "0x94810dee", // customizable by user during MetaMask confirmation.
    gas: "0x8a82", // customizable by user during MetaMask confirmation.
    to: contractAddress, // Required except during contract publications.
    from: account, // must match user's active address.
    value: "0x00", // Only required to send ether to the recipient from the initiating external account.
    data: functionData,
    chainId: "0x5", // Used to prevent transaction reuse across blockchains. Auto-filled by MetaMask.
  };

  const txHash = await ethereum.request({
    method: "eth_sendTransaction",
    params: [transactionParameters],
  });

为了让大家了解Web3.0常用的一些底层技术，本文的案例没有使用任何框架进行开发，但是在实际开发中我们可以使用一些工具来帮助提高开发效率，比如首页- Truffle Suite[11]，踏上以太之路。 | Embark[12]、Fleek：在新互联网上构建[13]、Remix - Ethereum IDE[14]。

参考

“精通以太坊：开发智能合约和去中心化应用程序”

什么是区块链？ 超级详细，无师自通！ [15]

Web 3.0架构不仅是去中心化的，更是模块化的——今日头条[16]

Web 3.0生态全解析：颠覆性技术变革——今日头条[17]

什么是 Web3，为什么它很重要？ | ethereum.org[18]

以太坊供应商 API | MetaMask 文档[19]