如何通过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智能合约集成在一起。
责任编辑;zl
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/qkl/2021-03-25/40705.html