本文由IPFS原力区收集译制
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();
export default ipfs;
二.将IPFS集成到我们的前端
现在让我们对App.js进行一些更改:
1.导入ipfs.js.
2.稍后使用构造函数进行绑定,并添加一些状态变量。
3.删除runExample函数,以及componentDidMount函数中对它的引用。这使用了来自样板代码中的契约,这是我们不需要的。
4.复制以下代码并将其放在componentDidMount函数之后。这将帮助我们处理传入的文件并将其发送到IPFS节点。当我们选择文件将使用captureFile,当我们想将其上传到IPFS时将使用onIPFSSubmit。
5.更改我们在UI上呈现的内容。在这里,我们创建一个简单的表单和一个提交按钮。
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函数中使用正确的契约。
03
运行它
在客户端运行“npm start”,然后转到本地主机:3000。您应该看到与下面类似的内容。尝试并提交一个小文本文件,这样您就不必等待太长时间才能弹出IPFS地址。
就是这样!然后,您应该能够在浏览器中查看您的文件:
https://gateway.ipfs.io/ipfs/ +
太好了,让我们一路狂奔!
04
添加以太坊接口
太棒了。现在我们将添加一个界面来直接与我们的区块链进行交互。
1.为合同事件添加监听器
让我们首先为我们在Solidity中编写的inboxResponse事件创建一个监听器。创建一个这样的函数。稍后我们将添加额外的状态属性receivedIPFS。
让我们在componentDidMount中调用此函数:
2.为按钮和表单添加监听器
更改应用程序的构造函数,以便我们可以添加一些按钮和表单处理程序。
以下是处理程序的代码:
注意我们如何在函数handleSend和handleReceiveIPFS中调用契约代码。
在这里,调用合同代码遵循以下语法:
contract。(,)
3.向UI添加按钮和表单
最后,我们通过添加到render函数为我们的UI添加一些按钮和表单:
瞧!这就是让这个应用程序运行所需的所有代码。它应该看起来像这样美丽:
05
运行应用程序
1.创建区块链
(您可以在命令行上的任何位置运行它)。请务必从命令行复制助记符(12个字):
ganache-cli
2.将合同迁移到区块链
进入根目录并运行:
truffle migrate
然后一定要将/build/contracts/IPFSInbox.json添加到/ client / src /中。
3.启动服务器
在客户端目录中运行它
npm start
4.设置MetaMask
单击左上角的下拉菜单,然后单击“Localhost 8545”。
单击“从种子短语按钮还原”,然后在种子短语表单中输入助记符。创建自己的密码并继续。
5.使用你的应用程序!
(请注意,每当您更改帐户时都需要刷新页面。您可以添加代码以每秒检查一次帐户以缓解此问题,但我没有将其包含在教程中。)
1..在MetaMask上进行帐户1。
2.选择一个小文件并将其发送到IPFS。将哈希值复制并粘贴到IPFS地址的第二部分。
3.转到MetaMask并转到帐户2.单击“帐户2”旁边的“...”并将地址复制到剪贴板。然后将其粘贴到Receiver Address中。
4..返回帐户1.按提交,然后确认交易。现在,我们已将帐户1的IPFS地址发送到帐户2。
5.转到帐户2并刷新页面。单击接收IPFS,您应该看到正在发送的地址!我们完成了。
太棒了!现在怎么办呢?
我们走了很长的路。
回顾一下,您学会了如何?
在Remix中开发智能合约
设置测试环境并使用Truffle部署合同
在React中为IPFS和区块链开发接口
接下来在第4部分中,我们将分析我们的智能合约代码,并指出它可能容易受到攻击的方式。
【IPFS相关】由IPFS原力区译制整理,收集外网中各领域人士在使用或开发IPFS及其相关应用时所分享的文章内容。
IPFS原力区官网:http://ipfsforce.com
IPFSER社区: http://ipfser.org
微博:http://weibo.com/ipfsforce
领取专属 10元无门槛券
私享最新 技术干货