通过Web3将智能合约(Solidity代码)连接到用户界面

发布时间:2020-11-22    来源:yabo登录 nbsp;   浏览:28831次

yabo登录|通过Web3将智能合约(Solidity代码)相连到用户界面。如果您也是那些仍在希望找寻一个可信研发教程的初学者之一,那么对于您来说,网卓新闻网,这毫无疑问是参考书的文章。两个不可或缺组件在我们了解理解实际过程之前,我只想对一个十分关键的细节做到一个十分结尾的改动。既然早已告诉Web3是一个确实协助我们将智能合约相连到前端的库。

yabo登录

但是为了顺利相连到智能合约,Web3首先还必须两个十分关键的组件。这两个组件是:应用程序二进制模块(ABI):它基本上包括所有功能,它们的权限以及智能合约中的其他细节(使用JSON格式)。地址(ADDRESS):这是在迁入实体代码后分解的智能合约的地址。

现在您就可以牢记这些细节了,让我们继续前进,尝试实际将智能合约相连到前端的过程。先决条件1.Ganache CLI:为了让这个过程非常简单,基本上可以将其视作可自定义的区块链模拟器,它为您获取10个免费的以太坊帐户,其中每个帐户都装载100个以太坊。加装:$npm install -g ganache-cli2. 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启动前端,因此现在可以非常简单地启动前端部分了。。

本文来源:yabo登录-www.wholeboom.com