如何通过Web3将智能合约连接到用户界面

通过Web3将智能合约（Solidity代码）连接到用户界面。如果您也是那些仍在努力寻找一个可靠开发教程的初学者之一，那么对于您来说，这无疑是必读的文章。

两个必备组件

在我们深入了解实际过程之前，我只想对一个非常关键的细节做一个非常简短的修改。

既然已经知道Web3是一个真正帮助我们将智能合约连接到前端的库。但是为了成功连接到智能合约，Web3首先还需要两个非常关键的组件。

这两个组件是：

应用程序二进制接口（ABI）：它基本上包含所有功能，它们的权限以及智能合约中的其他细节（采用JSON格式）。

地址（ADDRESS）：这是在迁移实体代码后生成的智能合约的地址。

现在您就可以牢记这些细节了，让我们继续前进，尝试实际将智能合约连接到前端的过程。

先决条件

1.Ganache CLI：为了让这个过程非常简单，基本上可以将其视为可定制的区块链模拟器，它为您提供10个免费的以太坊帐户，其中每个帐户都携带100个以太坊。

安装：

$npm install -g ganache-cli

2. Metamask Extension：毫无疑问，这是最必要的要求，因为它可以帮助我们在Firefox或Chrome等常规浏览器中访问启用了以太坊的分布式应用程序（DAPP）。

3.Truffle：这是最好的开发工具，包括所有必要的文件和环境，您不仅可以部署和开发智能合约，还可以对其进行测试。

安装：

$npm install -g truffle

最终建立联系，到这里您已成功成功安装所有必备组件，现在让我们将智能合约连接到前端。

尽管您可以选择各种框架来开发前端，但到目前为止，让我们开始吧。

好吧，无可否认，考虑到React本身的复杂性，从头开始编写所有代码可能很麻烦。好吧，truffle为您提供了一些支持，该代码为您提供了一些将React与Web3连接的样板代码。您所要做的就是安装truffle的React Box。

安装

$truffle unbox react

第1步：Edit trufle-config.js：从trufle中解压react组件后，第一个任务是在module.export部分编辑网络对象。将主机设置为localhost，端口设置为8545。

为什么这样做？

好吧，我们需要将dapp连接到本地区块链。在我们的案例中，Ganche CLI将完成这项工作。最重要的是，Ganache CLI侦听端口8545，这就是为什么我们在tuffle.js中将端口设置为8545的原因。

第2步：启动Ganache CLI：下一部分是运行终端命令ganache-cli以激活Ganache。

第3步：设置METAMASK：

说实话，这是事情可能变得丑陋的部分。因此，让我们了解此步骤的基础知识。

Metamask可以简单地看作是一种工具，可以将您的常规浏览器（即Firefox或Chrome）基本上转换为可以与区块链通信的工具。

在开发过程中，可以通过为此metamask扩展提供合适的端口并设置其与我们的开发帐户的连接来完成。

为此，您有两个可靠的端口用于开发目的。

· 端口7545：-使用Ganache GUI

· 端口8545：-使用Ganache CLI

因此，假设您已在自己喜欢的浏览器上成功建立了Metamask扩展程序，现在让我们从主要部分开始。

如您所见，默认情况下，此扩展名连接到以太坊主网络，这不是您要用于开发目的的所有帐户（除非您真的很富有并且拥有大量以太币）。因此，单击下拉菜单，然后选择Localhost8545。（因为Ganache CLI使用端口8545）。

设置端口后，现在单击右上方的圆形按钮，然后选择“导入帐户”选项。

在此将要求您输入要使用的帐户的私钥。记住，Ganche CLI已经为我们提供了10个带有100个免费以太币的帐户。好了，从这10个帐户中选择任何私钥并将其粘贴到此处。

就这样，既然您已经设置了帐户，那么您就可以开始开发过程了。

最后，用REACT启动前端，因此现在可以简单地启动前端部分了。

请遵循以下步骤：

现在到 truffle react

1.输入trufle compile命令。

2.然后输入命令truffle migrate。

注意：一旦您迁移了智能合约，就会因gas而扣除少量的eth。因此，单击浏览器上的Metamask扩展，然后检查是否扣除了一些金额。如果是的话，那么您的设置就可以了。

4.转到客户端目录，然后输入命令npm start。

5.打开浏览器，然后转到localhost：3000。

您可能会看到这样的Metamask弹出窗口。

这只是您需要批准的一个简单事务，以便从智能合约获得价值到前端部分。只需单击确认按钮。

注意：您是否看到一行显示，存储的值是：5.此处的值5来自智能合约，因此表示您的前端与合约同步。

而已。您已通过WEB3和Ganache CLI成功将React与Solidity智能合约集成在一起。