全栈开发以太坊应用的完整教程指南与源码 - Dabit


在本文中，您将学习如何使用React，Ethers.js，Solidity和Hardhat构建全栈dApp。
您可以在此处找到该项目的代码。本教程的视频课程在这里。
我最近以开发人员关系工程师的身份加入Edge＆Node，并已与Ethereum一起深入研究智能合约开发。我已经确定了使用Solidity构建完整堆栈dApp的最佳堆栈：


但是我在解决所有问题时遇到了一个问题。尽管每个工具都有各自不错的文档，但是并没有什么可以帮助您将它们全部组合在一起并了解它们如何相互配合的。
里有一些非常好的样板，例如scaffold-eth（还包括Ethers，Hardhat和The Graph），但是对于刚入门的人来说，它们可能太多了。
我想要一个端到端的指南，向我展示如何使用最新的资源，库和工具来构建全栈的以太坊应用程序。
这是我感兴趣的：
  1. 如何创建，部署和测试以太坊智能合约到本地，测试和主网
  2. 如何在本地，测试和生产环境/网络之间切换
  3. 如何使用前端，React，Vue，Svelte或Angular等各种环境连接到合同并与之交互

在花了一些时间弄清楚所有这些内容之后，我终于选择了自己感到非常满意的堆栈。然后，我认为写出如何使用此堆栈构建和测试完整堆栈的以太坊应用程序会很好。
我希望本指南不仅对其他可能对此堆栈感兴趣的人有用，也对我自己有帮助，以供将来参考。这就是参考。
 
我们将使用的技术
让我们看一下将要使用的主要部分以及它们如何装入堆栈。
  • 1.以太坊开发环境

构建智能合约时，您将需要一种无需处理实时环境即可部署合约，运行测试和调试Solidity代码的方法。
您还需要一种将Solidity代码编译为可以在客户端应用程序（在我们的情况下为React应用程序）中运行的代码的方法。稍后，我们将详细了解其工作原理。
Hardhat是一个用于全栈开发的以太坊开发环境和框架，这是我将在本教程中使用的框架。
生态系统中的其他类似工具是Ganache和Truffle。
  • 2.以太坊Web客户端库

在我们的React应用程序中，我们将需要一种与已部署的智能合约进行交互的方式。我们将需要一种读取数据以及发送新交易的方法。
ethers.js旨在成为一个完整，紧凑的库，用于通过客户端JavaScript应用程序（例如React，Vue，Angular或Svelte）与以太坊区块链及其生态系统进行交互。这是我们将要使用的库。
生态系统中另一个受欢迎的选择是web3.js
  • 3. Metamask

Metamask可帮助您处理帐户管理并将当前用户连接到区块链。MetaMask使用户能够以几种不同的方式管理其帐户和密钥，同时将其与站点上下文隔离。
一旦用户连接了他们的MetaMask钱包，作为开发人员，您就可以与全球可用的以太坊API（window.ethereum）进行交互，该API识别与Web3兼容的浏览器的用户（例如MetaMask用户）。每当您请求交易签名时，MetaMask都会以一种易于理解的方式提示用户。
  • 4.React

React是用于构建Web应用程序，用户界面和UI组件的前端JavaScript库。它由Facebook以及许多个人开发商和公司维护。
React及其大型的元框架生态系统（如Next.js，Gatsby，Redwood，Blitz.js）和其他实现了所有类型的部署目标，包括传统SPA，静态站点生成器，服务器端渲染以及这三者的组合。
React似乎继续在前端领域占据主导地位，而且我认为在不久的将来甚至可能以后，它将继续保持领先地位。
  • 5.Graph

对于以太坊等区块链上构建的大多数应用程序而言，直接从链中读取数据既费时又费力。因此，在过去，您会看到人们和公司在构建自己的集中式索引服务器并服务于来自这些服务器的API请求。这需要大量的工程和硬件资源，并且破坏了分散化所需的安全性。
Graph是用于查询区块链数据的索引协议，可让您创建完全去中心化的应用程序。它通过公开应用可以使用的丰富的GraphQL查询层来解决此问题。
在本指南中，我们不会为我们的应用构建子图，但将在以后的教程中进行构建。
 
我们将要建设的
在本教程中，我们将构建，部署并连接到几个基本的智能合约：
  1. 在以太坊区块链上创建和更新消息的合同
  2. 铸造令牌的合同，该合同允许合同所有者将令牌发送给其他人并读取令牌余额，并让新令牌的所有者也将令牌发送给其他人。

我们还将构建一个React前端，该前端将允许用户：
  1. 阅读部署到区块链的合同中的问候
  2. 更新问候语
  3. 将新铸造的令牌从其地址发送到另一个地址
  4. 有人收到令牌后，请允许他们也将令牌发送给其他人
  5. 从部署到区块链的合同中读取代币余额

 
先决条件
  1. 安装在本地计算机上的Node.js
  2. 浏览器中已安装MetaMask Chrome扩展程序

您无需拥有任何本指南的以太坊，因为我们将在整个教程的测试网络上使用假冒/测试以太坊。
更详细步骤点击标题