【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

本文由IPFS原力区收集译制

 

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

01

概括

到目前为止,我们已经

1.制定了我们的Remix合同

2.在Truffle中建立一个开发环境

3.甚至使用Ganache将我们的合同部署到个人区块链上!

我们现在需要做的是设置IPFS并使用React创建一个UI,以便我们可以与区块链进行交互。

02

设置IPFS

一.创建IPFS节点

首先,我们要建立一个IPFS客户端。从顶级目录开始。

cd client
npm install ipfs-api

现在让我们编写代码来在另一个文件中创建一个节点:

cd src
touch ipfs.js

在ipfs.js中输入以下代码:

const IPFS = require(’ipfs-api’);
const ipfs = new IPFS({host:’ipfs.infura.io’,
   port:5001,protocol:’https’});

export default ipfs;

 

二.将IPFS集成到我们的前端

现在让我们对App.js进行一些更改:

1.导入ipfs.js.

2.稍后使用构造函数进行绑定,并添加一些状态变量。

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

3.删除runExample函数,以及componentDidMount函数中对它的引用。这使用了来自样板代码中的契约,这是我们不需要的。

4.复制以下代码并将其放在componentDidMount函数之后。这将帮助我们处理传入的文件并将其发送到IPFS节点。当我们选择文件将使用captureFile,当我们想将其上传到IPFS时将使用onIPFSSubmit。

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

5.更改我们在UI上呈现的内容。在这里,我们创建一个简单的表单和一个提交按钮。

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

6.现在,因为我们不再使用来自样板文件中的SimpleStorage契约,我们需要做一些内务管理,并确保App.js具有所需的所有依赖项。我发现由于样板中依赖项的变化,我们不能再使用src文件之外的文件了。

App.js需要一个由React制作的文件。这是调用truffle migrate后生成的契约.json文件。这很烦人,因为这意味着我们每次运行该命令时都必须将它带入src文件中。但是在本教程中,我们将这样做,因为它是最简单的方法。

因此,请确保您的区块链已设置(如果没有,请在命令行上运行 “ganache-cli ”)并再次运行 “truffle migrate”。

将ipfs-ethereum-tutorial / build / contracts / IPFSInbox.json复制到ipfs-ethereum-tutorial / client / src /目录。

而且我们将更改App.js的导入,并确保在componentDidMount函数中使用正确的契约。

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

03

运行它

在客户端运行“npm start”,然后转到本地主机:3000。您应该看到与下面类似的内容。尝试并提交一个小文本文件,这样您就不必等待太长时间才能弹出IPFS地址。

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

就是这样!然后,您应该能够在浏览器中查看您的文件:

https://gateway.ipfs.io/ipfs/ + <您的IPFS地址>

太好了,让我们一路狂奔!

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

04

添加以太坊接口

太棒了。现在我们将添加一个界面来直接与我们的区块链进行交互。

1.为合同事件添加监听器

让我们首先为我们在Solidity中编写的inboxResponse事件创建一个监听器。创建一个这样的函数。稍后我们将添加额外的状态属性receivedIPFS。

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

让我们在componentDidMount中调用此函数:

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

2.为按钮和表单添加监听器

更改应用程序的构造函数,以便我们可以添加一些按钮和表单处理程序。

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

以下是处理程序的代码:

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

注意我们如何在函数handleSend和handleReceiveIPFS中调用契约代码。

在这里,调用合同代码遵循以下语法:

contract。<contractFunction>(<contractArguments>,{from:<account>})

3.向UI添加按钮和表单

最后,我们通过添加到render函数为我们的UI添加一些按钮和表单:

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

瞧!这就是让这个应用程序运行所需的所有代码。它应该看起来像这样美丽:

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

05

运行应用程序

1.创建区块链

(您可以在命令行上的任何位置运行它)。请务必从命令行复制助记符(12个字):

ganache-cli

2.将合同迁移到区块链

进入根目录并运行:

truffle migrate

然后一定要将/build/contracts/IPFSInbox.json添加到/ client / src /中。

3.启动服务器

在客户端目录中运行它

npm start

4.设置MetaMask

单击左上角的下拉菜单,然后单击“Localhost 8545”。

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

单击“从种子短语按钮还原”,然后在种子短语表单中输入助记符。创建自己的密码并继续。

5.使用你的应用程序!

(请注意,每当您更改帐户时都需要刷新页面。您可以添加代码以每秒检查一次帐户以缓解此问题,但我没有将其包含在教程中。)

1..在MetaMask上进行帐户1。

2.选择一个小文件并将其发送到IPFS。将哈希值复制并粘贴到IPFS地址的第二部分。

3.转到MetaMask并转到帐户2.单击“帐户2”旁边的“…”并将地址复制到剪贴板。然后将其粘贴到Receiver Address中。

4..返回帐户1.按提交,然后确认交易。现在,我们已将帐户1的IPFS地址发送到帐户2。

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

5.转到帐户2并刷新页面。单击接收IPFS,您应该看到正在发送的地址!我们完成了。

太棒了!现在怎么办呢?

我们走了很长的路。

回顾一下,您学会了如何?

在Remix中开发智能合约

设置测试环境并使用Truffle部署合同

在React中为IPFS和区块链开发接口

接下来在第4部分中,我们将分析我们的智能合约代码,并指出它可能容易受到攻击的方式。

【IPFS相关】由IPFS原力区译制整理,收集外网中各领域人士在使用或开发IPFS及其相关应用时所分享的文章内容。

 

IPFS原力区官网:http://ipfsforce.com

IPFSER社区: http://ipfser.org

微博:http://weibo.com/ipfsforce

【IPFS相关】以太坊+ IPFS + React DApp教程第三部分

原创文章,作者:IPFSforce,如若转载,请注明出处:http://ipfser.org/2018/12/04/ethereumipfsreactdapptutorialpt-3/

发表评论

登录后才能评论

联系我们

在线咨询:点击这里给我发消息

邮件:[email protected]

工作时间:周一至周五,9:30-18:30,节假日休息

QR code