首页 > 区块链

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

admin 区块链 2020-11-30 16:00:00 2021年03月25日 16时29分46秒

通过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的原因。

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

第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

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

1.输入trufle compile命令。

2.然后输入命令truffle migrate。

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

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

5.打开浏览器,然后转到localhost:3000。

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

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

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

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

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

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

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/qkl/2021-03-25/40705.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持