IPFS、以太坊、React DApp详细教程三部曲【进阶篇】

来源:区块星球BlockPlanet  作者:区块星球BlockPlanet  时间:2018-11-30

    一、概括

到目前为止,我们已经

1.制定了我们的Remix合同

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

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

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

IPFS、以太坊、React DApp详细教程三部曲【进阶篇】

  二、设置IPFS

1).创建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;

2).将IPFS集成到我们的前端

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

1.导入ipfs.js.

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

IPFS、以太坊、React DApp详细教程三部曲【进阶篇】

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

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

IPFS、以太坊、React DApp详细教程三部曲【进阶篇】

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函数中使用正确的契约。

IPFS、以太坊、React DApp详细教程三部曲【进阶篇】

  (什么是IPFS?星际文件系统(IPFS)是一种分布式存储文件的方式。IPFS由Protocol Labs开发,该公司发布旨在改善互联网运作方式的开源软件。根据协议实验室的说法,IPFS是“一种点对点超媒体协议,可以使网络更快,更安全,更开放。”当与区块链结合使用时,IPFS是文件存储的绝佳解决方案。IPFS网页包含有关两种技术之间自然同步的说明:IPFS与区块链完美匹配!您可以使用IPFS处理大量数据,并将不可变的、永久的IPFS链接放置到一个区块链事务中。这样能够在内容上留下时间戳,保护内容,不用将数据独自留在链上。事实上,区块链初创公司已经开始使用IPFS来存储文件。例如,分散式文件共享服务Filecoin使用IPFS以分散的方式存储文件。目前在以太坊上存储这些文件过于昂贵,所以IPFS是一个很好的解决方案。IPFS也是管理文件的绝佳方式。即使以太坊能够以较低的成本处理大型文件,IPFS的文件管理工具也会使其具有相关性。不过严格来说,IPFS不是区块链项目,是一个分布式的存储项目。)

  三、运行它

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

IPFS、以太坊、React DApp详细教程三部曲【进阶篇】

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

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

四、添加以太坊接口

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

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

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

IPFS、以太坊、React DApp详细教程三部曲【进阶篇】

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

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

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

IPFS、以太坊、React DApp详细教程三部曲【进阶篇】

以下是处理程序的代码:

IPFS、以太坊、React DApp详细教程三部曲【进阶篇】

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

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

contract。,{from:})

3.向UI添加按钮和表单

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

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

IPFS、以太坊、React DApp详细教程三部曲【进阶篇】

  (什么是以太坊?以太坊是一个运行应用程序的分散式平台。智能合约决定了这些应用程序的规则。这些合同以Solidity(一种面向合同的编程语言)编程。为Ethereum平台“以太”提供燃料的原生货币目前的市值超过179亿美元。自2014年成立以来,以太坊的估值显着增加。将以太坊智能联系人视为确定新分散式互联网上的规则和行动。与IPFS等文件共享工具配合使用,开发人员现在可以运行连接到P2P文件共享服务的分散式智能合约。当您使用以太坊网络时,您需要使用以太网支付执行这些智能合约的一部分,称为功能。以太坊的开发人员社区正在研究支持每秒更多事务的方法,以便更多人可以以更低的成本使用网络。有许多简单的方法开始学习更多关于以太坊。学习如何通过几个简单步骤创建您自己的加密货币令牌,或者如何使用Airdrop构建一个大型社区。)

  五、运行应用程序

1.创建区块链

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

ganache-cli

2.将合同迁移到区块链

进入根目录并运行:

truffle migrate

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

3.启动服务器

在客户端目录中运行它

npm start

4.设置MetaMask

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

IPFS、以太坊、React DApp详细教程三部曲【进阶篇】

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

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部分中,我们将分析我们的智能合约代码,并指出它可能容易受到攻击的方式。

您可能喜欢
Copyright © 2017 iIPFS.cn IPFS/FileCoin资讯站