本项目的代码在这里[4]
我最近加入了EdgeNode[5]，担任开发者关系工程师，并一直在深入研究以太坊的智能合约开发。我已经确定了我认为用Solidity构建全栈dApps的最佳技术栈：
??客户端框架-React
??以太坊开发环境-**Hardhat**[6]
??以太坊Web客户端库-**Ethers.js**[7]
??API层-TheGraPHProtocol[8]
在学习的过程中，我遇到的问题是，虽然每件事情都有相当好的文档，但对于如何将所有这些事情放在一起，并了解它们如何相互合作，却没有什么真正的文档。有一些非常好的项目模板，比如scaffold-eth[9](其中还包括Ethers、Hardhat和TheGraph)，但对于刚入门的人来说，可能内容太多，难以拾掇。
我想要一个从前到后的完整指南，告诉我如何使用最新的资源、库和工具来构建全栈以太坊应用。
我感兴趣的内容有：
如何在本地、测试和主网上进行以太坊智能合约的创建、部署和测试。如何在本地、测试和生产环境/网络之间切换。如何从前端（如React、Vue、Svelte或Angular）使用各种环境连接到合约并与之交互。在花了一些时间来弄清楚所有这些事情，并且用我觉得真正满意的技术栈去做之后，我想写出如何使用这个技术栈来构建和测试一个全栈的以太坊应用，不仅是为了给其他可能对这个栈感兴趣的人，也是为了给我自己将来做参考。
组件背景让我们来介绍一下将使用的主要组件，以及它们是如何融入到堆栈中的。
1.以太坊开发环境在构建智能合约时，你需要一种方法来部署你的合约，运行测试和调试Solidity代码，而无需处理真实的网络环境。
你还需要一种方法将你的Solidity代码编译成可以在客户端应用程序中运行的代码--在我们的例子中，就是一个React应用程序。
Hardhat是一个专为全栈开发而设计的以太坊开发环境和框架，也是我将在本教程中使用的框架。
生态系统中其他类似的工具还有Ganache[10]和Truffle[11]（见Truffle中文文档[12]）
2.以太坊Web客户端库在我们的React应用中，需要一种与已部署的智能合约进行交互的方式，我们需要一种方法来读取数据以及发送新的交易。
ethers.js[13]是一个一个完整而紧凑的库，用于从React、Vue、Angular或Svelte等JavaScript应用客户端中与以太坊区块链及其生态系统进行交互。我们将要使用这个代码库（见ethers.js中文文档[14]）。另一个流行的选择是web3.js[15](见web3.js中文文档[16])
3.MetamaskMetamask[17]用来管理账户和将当前用户连接到区块链。MetaMask使用户能够以几种不同的方式管理他们的账户和密钥，同时将密钥与网站环境隔离。
一旦用户连接了MetaMask钱包，作为开发者，你就可以与全局可用的以太坊API（window.ethereum）进行交互，该API可以识别与web3兼容浏览器的用户（比如MetaMask用户），每当你请求交易签名时，MetaMask都会以尽可能可理解的方式提示用户。
4.ReactReact是一个前端JavaScript库，用于构建Web应用、用户接口和UI组件。它是由Facebook和许多许多个人开发者和公司维护的。
React有及其庞大生态系统，如Next.js[18]、Gatsby[19]、Redwood[20]、Blitz.js[21]等，可以实现所有类型的部署目标，包括传统的SPA、静态网站生成器、服务器端渲染，以及三者的结合。React似乎继续主导着前端领域，我认为至少在不久的将来依旧会继续。
5.TheGraph对于大多数建立在区块链（如以太坊）上的应用来说，直接从链上读取数据是很难的，也是很耗时的，所以你曾经看到有人和公司建立自己的中心化索引服务器，并从这些服务器上服务API请求。这需要大量的工程和硬件资源，并且打破了去中心化所需的安全属性。
TheGraph是一个用于查询区块链数据的索引协议，可以创建完全去中心化的应用程序，其暴露了一个可供应用程序使用的GraphQL查询层。在本指南中，我们不会为应用程序构建一个subgraph，之后单独出一个教程。
我们将构建什么在本教程中，我们将构建、部署并连接到几个基本的智能合约：
一个在以太坊区块链上创建和更新消息的合约。铸造代币合约，然后允许合约的拥有者向他人发送代币并读取代币余额，新代币的拥有者也可以向他人发送代币。我们还将构建出一个React前端，让用户：
阅读部署在区块链上的合约的问候语。更新问候语将新铸造的代币从他们的地址发送到另一个地址。一旦有人收到了代币，允许他们也将自己的代币发送给其他人。从部署到区块链的合约中读取代币余额。安装依赖在你的本地机器上安装Node.js。浏览器中安装的Chrome扩展程序MetaMask[22]。在本指南中，你不需要拥有任何以太坊，因为我们将在整个教程中在测试网络上使用测试（假的）以太币。
项目初始化创建一个新的React应用程序：
npxcreate-react-appreact-dapp
接下来，换到新的目录下，使用NPM或Yarn安装`ethers.js`[23]和`hardhat`[24]。
npminstallethershardhat
nomiclabs/hardhat-waffleethereum-wafflechainomiclabs/hardhat-ethers安装和配置以太坊开发环境接下来，用Hardhat初始化一个新的以太坊开发环境。
npxhardhat?Whatdoyouwanttodo?Createasampleproject?Hardhatprojectroot:Choosedefaultpath
现在应该看到在根目录中为你创建了以下工件：
hardhat.config.js-Hardhat设置的全部内容（即配置、插件和自定义任务）都包含在这个文件中。scripts-文件夹中包含一个名为sample-script.js的脚本，在执行时会部署智能合约。test-一个包含示例测试脚本的文件夹。contracts-一个存放以太坊示例智能合约的文件夹。
由于MetaMask配置问题[25]，我们需要将HardHat配置中的链ID更新为。我们还需要更新artifacts[26]的位置，让我们编译的合约在React应用的src目录下。
要进行这些更新，请打开hardhat.config.js，并将module.exports更新成这样：
module.exports={solidity:"0.8.3",paths:{artifacts:./src/artifacts,},networks:{hardhat:{chainId:}}};智能合约
接下来，来看看给我们的合约示例：contracts/Greeter.sol
//SPDX-License-Identifier:Unlicensepragmasolidity^0.7.0;import"hardhat/console.sol";contractGreeter{stringgreeting;constructor(stringmemory_greeting){console.log("DeployingaGreeterwithgreeting:",_greeting);greeting=_greeting;}functiongreet()publicviewreturns(stringmemory){returngreeting;}functionsetGreeting(stringmemory_greeting)public{console.log("Changinggreetingfrom%sto%s",greeting,_greeting);greeting=_greeting;}}
这是一个非常简单的智能合约，在部署时，设置了一个Greeting变量，并公开了一个返回问候语的函数(greet)。
它还有一个允许用户更新问候语的函数（setGreeting）。当部署到以太坊区块链后，用户可以和这些方法交互。
我们对智能合约做一个小小的修改。由于我们在hardhat.config.js中设置了编译器的solidity版本为0.8.3，所以也要确保更新合约，使用相同版本的solidity。
//contracts/Greeter.solpragmasolidity^0.8.3;对以太坊区块链进行读写
与智能合约的交互方式有两种，读或写（交易）。在我们的合约中，greet可以认为是读，setGreeting可以认为是写（交易）。
对于写入交易，必须为写入区块链交易付费（gas），如果只是从区块链中读取，则是免费的。读取调用的函数只由你所连接的节点来执行，所以你不需要付出任何gas。
从我们的React应用中，与智能合约进行交互是使用ethers.js库、合约地址和从合约中创建的ABI[27]。
什么是ABI？ABI代表应用二进制接口。可以把它看作是客户端应用程序和以太坊区块链(智能合约部署的地方)之间的接口。
ABI通常是由HardHat等开发框架从Solidity智能合约中编译出来的，经常可以在以太坊浏览器[28]上找到智能合约的ABI。
编译出ABI现在我们有了基本的智能合约，知道了什么是ABI，让我们为项目编译一个ABI。
进入命令行并运行以下命令：
npxhardhat