以太坊全栈开发完全指南
来源:未知 时间:2021-04-16 07:10 浏览量:
分享至

接下来,换到新的目录下,使用 NPMYarn 安装 ethers.js[23] 和 hardhat[24]。

安装和配置以太坊开发环境

接下来,用 Hardhat 初始化一个新的以太坊开发环境。

智能合约

接下来,来看看给我们的合约示例:contracts/Greeter.sol

这是一个非常简单的智能合约,在部署时,设置了一个 Greeting 变量,并公开了一个返回问候语的函数 (greet)。

它还有一个允许用户更新问候语的函数(setGreeting)。当部署到以太坊区块链后,用户可以和这些方法交互。

我们对智能合约做一个小小的修改。由于我们在 hardhat.config.js 中设置了编译器的 solidity 版本为 0.8.3,所以也要确保更新合约,使用相同版本的 solidity。

对以太坊区块链进行读写

与智能合约的交互方式有两种,读或写(交易)。在我们的合约中,greet 可以认为是读,setGreeting 可以认为是写(交易)。

对于写入交易,必须为写入区块链交易付费(gas),如果只是从区块链中读取,则是免费的。读取调用的函数只由你所连接的节点来执行,所以你不需要付出任何 gas。

从我们的 React 应用中,与智能合约进行交互是使用 ethers.js 库、合约地址和 从合约中创建的 ABI[27]。

什么是 ABI?ABI 代表应用二进制接口。可以把它看作是客户端应用程序和以太坊区块链 (智能合约部署的地方) 之间的接口。

ABI 通常是由 HardHat 等开发框架从 Solidity 智能合约中编译出来的,经常可以在以太坊浏览器 [28] 上找到智能合约的 ABI。

编译出 ABI

现在我们有了基本的智能合约,知道了什么是 ABI,让我们为项目编译一个 ABI。

进入命令行并运行以下命令:

现在,你应该在 hide 目录下看到一个名为 artifacts 的新文件夹。artifacts/contracts/Greeter.json 文件包含 ABI 作为属性之一。当我们需要使用 ABI 时,可以从 JavaScript 文件中导入它:

然后可以这样引用 ABI:

请注意,Ethers.js 也可以启用友好可读 ABI 格式 [29],但在本教程中不会涉及这个问题。

使用本地网络部署

接下来,让我们把智能合约部署到本地区块链上,这样就可以进行测试了。

要部署到本地网络,首先需要启动本地节点,打开 CLI 并运行以下命令 :

当运行这个命令时,你应该看到一个地址和私钥的列表 :

Hardhat 账号

hardhat 创建了 20 个测试账户,我们可以用来部署和测试智能合约。每个账户有 1 万个假的以太币。稍后,我们将学习如何将测试账户导入到 MetaMask 中,以便能够使用它。

接下来,需要将合约部署到测试网络中。首先将 scripts/sample-script.js 的名称更改为 scripts/deploy.js

现在可以运行 deploy 脚本,并给 CLI 提供部署网络参数:

一旦这个脚本被执行,智能合约应该会被部署到本地测试网络,然后我们应该可以开始与它进行交互:

在部署合约时,它使用的是我们启动本地网络时创建的第一个账户。

如果你看一下 CLI 的输出,你应该可以看到类似的输出:

这个是部署后的合约地址,将在客户端应用中用来与智能合约进行交互。

为了向智能合约发送交易,我们将需要使用之前 npx hardhat node 创建的账户导入到 MetaMask 钱包,你应该看到了账号以及私钥

我们可以将这个账户导入到 MetaMask 中,以便使用账号中的 ETH。首先打开 MetaMask,更新网络到 Localhost 8545:

网络

接下来,在 MetaMask 中点击账户菜单中的导入账户

帐户

复制然后粘贴一个私钥,点击导入。账户导入后,你应该可以看到账户中的 Eth:

导入账号

现在,我们已经部署了一个智能合约,并且账户也已经准备好了,我们可以在 React 应用中与它进行交互。

连接 React 客户端

在本教程中,我们不会去关注用 CSS 构建一个漂亮的 UI 之类的问题,而是 100% 专注于核心功能,让你能用起来。如果你愿意,你可以把它变得好看。

回顾一下我们想要从 React 应用中获得的两个目标:

  1. 从智能合约中获取 greeting 的当前值。

  2. 允许用户更新 greeting 的值。

我们如何实现这个目标呢?以下是我们需要做的事情:

  1. 创建一个输入字段和一些局部状态来管理输入的值(以更新 greeting)。

  2. 允许应用程序连接到用户的 MetaMask 账户以便签署交易。

  3. 创建对智能合约的读写函数。

要做到这一点,请打开 hide/App.js,并用以下代码更新它,将 greeterAddress 的值设置为你的智能合约的地址。

启动 React 服务器,测试一下:

当应用程序加载时,你应该能够获取当前的问候语并打印到控制台。也应该可以通过 MetaMask 钱包签名交易来进行更新问候语。

设置和获取问候值

部署和使用真实测试网络

有几个以太坊测试网络,如 Ropsten、Rinkeby 或 Kovan,我们也可以部署到这些网络上,以使合约有一个可公开访问的版本,而不必将其部署到主网。在本教程中,我们将部署到 Ropsten 测试网络中。

首先,先更新你的 MetaMask 钱包,连接到 Ropsten 网络。

Ropsten 网络

接下来,通过访问本测试水龙头 [30],给自己发送一些测试以太,以便在本教程的后面使用。

我们可以通过注册类似 Infura[31] 或 Alchemy[32] 这样的服务来访问 Ropsten(或其他任何测试网络),本教程我使用的是 Infura。

一旦你在 Infura 或 Alchemy 中创建了应用程序,你会得到一个类似于这样的节点 URL:

请确保在 Infura 或 Alchemy 应用程序配置中设置 ALLOWLIST ETHEREUM ADDRESSES,包括你的钱包地址。

要部署到测试网络,我们需要在 hardhat 配置中添加额外的网络信息,以及设置部署账号的钱包私钥。

可以从 MetaMask 中导出私钥:

导出私钥

我建议不要在应用程序中硬编码私钥,而是把它设置为环境变量之类的东西。

接下来,添加一个 networks 属性,配置如下:

请运行以下脚本进行部署:

一旦你的合约部署完毕,你应该可以开始与它进行交互。现在可以在 Etherscan Ropsten Testnet Explorer[33] 上查看合约。

创建代币

智能合约最常见的使用场景之一是创建代币,来看看如何做到这一点。由于我们对这些工作比较了解了,所以速度会更快一些。

contracts 目录下创建一个名为 Token.sol 的新文件,添加以下代码:

请注意,该代币合约仅用于演示目的,不符合 ERC20[34],关于 ERC20 代币的例子,请查看此合约 [35]

该合约将创建一个名为 Nader Dabit Token 的新代币,并设置发行量为 1000000。

接下来,编译这份合约。

更新 scripts/deploy.js 的部署脚本,加入新的 Token 合约:

现在,我们可以将这个新的合约部署到本地或 Ropsten 网络。

一旦合约部署完毕,可以开始向其他地址发送这些代币。

为此,让我们更新一下我们需要的客户端代码,以使其工作:

接下来,运行应用程序:

点击获取余额(Get Balance),看到我们的账户里有 100 万币打印在控制台。

也可以通过点击添加代币 (Add Token),以便在 MetaMask 中查看它们 :

Add Token

接下来点击自定义代币 (Custom Token),输入代币合约地址,然后添加代币。现在,你的钱包里应该有代币了。

显示代币

接下来,让我们试着把这些硬币发送到另一个地址。

结论

本教程涵盖了很多, 希望你能学到很多东西。

如果你想在 MetaMask 之外支持多个钱包,请查看 Web3Modal[36],它可以通过一个相当简单和可定制的配置,方便在你的应用程序中轻松实现对多个网络提供者的支持。

在我未来的教程和指南中,我会深入研究更复杂的智能合约开发,以及如何将其部署到 Subgraph[37],使用 GraphQL API,实现分页和全文搜索等功能。

参考资料

[1]

登链翻译计划 :https://github.com/lbc-team/Pioneer

[2]

翻译小组 :https://learnblockchain.cn/people/412

[3]

Tiny 熊 :https://learnblockchain.cn/people/15

[4]

这里 :https://github.com/dabit3/full-stack-ethereum

[5]

Edge & Node:https://twitter.com/edgeandnode

[6]

Hardhat:https://hardhat.org/

[7]

Ethers.js:https://docs.ethers.io/v5/

[8]

The Graph Protocol:https://thegraph.com/

[9]

scaffold-eth:https://github.com/austintgriffith/scaffold-eth

[10]

Ganache:https://www.trufflesuite.com/ganache

[11]

Truffle:https://www.trufflesuite.com/

[12]

Truffle 中文文档 :https://learnblockchain.cn/docs/truffle/

[13]

ethers.js:https://docs.ethers.io/v5/

[14]

ethers.js 中文文档 :https://learnblockchain.cn/docs/ethers.js/

[15]

web3.js:https://web3js.readthedocs.io/en/v1.3.4/

[16]

web3.js 中文文档 :https://learnblockchain.cn/docs/web3.js/

[17]

Metamask:https://metamask.io/download.html

[18]

Next.js:https://nextjs.org/

[19]

Gatsby:https://www.gatsbyjs.com/

[20]

Redwood:https://redwoodjs.com/

[21]

Blitz.js:https://blitzjs.com/

[22]

MetaMask:https://metamask.io/

[23]

ethers.js:https://docs.ethers.io/v5/

[24]

hardhat:https://github.com/nomiclabs/hardhat

[25]

MetaMask 配置问题 :https://hardhat.org/metamask-issue.html

[26]

artifacts:https://hardhat.org/guides/compile-contracts.html#artifacts

[27]

ABI:https://learnblockchain.cn/docs/solidity/abi-spec.html

[28]

以太坊浏览器 :https://etherscan.io/

[29]

友好可读 ABI 格式 :https://blog.ricmoo.com/human-readable-contract-abis-in-ethers-js-141902f4d917

[30]

本测试水龙头 :https://faucet.ropsten.be/

[31]

Infura:https://infura.io/dashboard/ethereum/cbdf7c5eee8b4e2b91e76b77ffd34533/settings

[32]

Alchemy:https://alchemyapi.io/"以太坊全栈开发完全指南" loading="lazy" src="/uploads/allimg/210416/0G0201337-0.jpg"/>