devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

构建一个简单的以太坊+IPFS+React.js DApp

作者：知新_RL | 2024-06-14 07:43:22

赞

踩

ipfs如何在react结合strhash

我们为什么要构建这个？在以太坊区块链上存储大量数据是非常昂贵的。根据以太坊的黄皮书，它是大约20,0000gas，256bit/8字节（1字）。基于02/28/2018 gas价格为4gwei/gas。请参阅：https://ethgasstation.info了解当前价格。

每个交易8个字节20,000gas*4gwei/gas=80,000gwei。

8,000字节80,000gwei*1000bytes/8=10,000,000gwei/kB=0.01`以太。

0.01以太/kB*1000kB=10以太存储1Mb，价格为860美元/以太=8600.00美元！在以太坊区块链上存储1GB文件需要花费8,600,000.00美元！

存储以太坊的38页PDF黄皮书（520Kb）=4472美元。请参阅： http://eth-converter.com/进行转换计算。

如果我们只能在区块链上存储几Kb的数据，那么我们仍然需要依靠集中式服务器来存储数据。值得庆幸的是，可以使用称为InterPlanetary files system 星际文件系统IPFS的去中心化网络上存储数据的解决方案。请参阅：https://ipfs.io/了解更多信息。在IPFS中查找文件时，你要求网络查找将内容存储在唯一哈希后面的节点。来自IPFS自己的网站：

“IPFS和Blockchain完美匹配！你可以使用IPFS处理大量数据，并将不可变的永久IPFS链接放入区块链交易中。这个时间戳和保护你的内容，而不必将数据放在链本身上。“

我们构建什么？

一个简单的DApp，用于将文档上载到IPFS，然后将IPFS哈希存储在以太坊区块链上。一旦IPFS哈希号被发送到以太坊区块链，用户将收到交易收据。我们将使用Create-React-App框架来构建前端。此Dapp适用于在浏览器中安装了MetaMask的任何用户。

这就是我们完成后DApp的样子：

11831773-34b1a0d600793969.png
image

如何建立它：

注意：如果你只是想要代码，请参阅我的github。

在我们开始之前，这些是我做出的假设：

  • 关于用户的假设：用户安装了Metamask以与DApp交互。
  • 关于你/开发人员的假设：你对JavaScript、React.js以及Node.js/NPM有一定的了解。重要说明：请确保你运行当前版本的Node和NPM。对于本教程，我正在运行：node v8.9.4和NPM 5.6.0。
  • 安装MetaMask。如果尚未安装MetaMask，请访问https://metamask.io/并按照说明操作。此DApp将假定用户已安装MetaMask。
  • 创建一个目录来存储我们的DApp。对于本教程，我将其称为eth-ipfs。
  • 使用NPM安装Create-React-App和其他依赖项。使用NPM并安装以下内容：
  1. npm i create-react-app
  2. npm install react-bootstrap
  3. npm install fs-extra
  4. npm install ipfs-api
  5. npm install web3@^1.0.0-beta.26

输入eth-ipfs目录，键入npm start ，Create-React-App应自动在http://localhost:3000/上呈现。

注意：如果你到目前为止尚未使用create-react-app，则可能必须先在全局安装它

    1. sudo npm install -g create-react-app或者npm install -g create-react-app
    1. create-react-app eth-ipfs
    1. cd进入eth-ipfs然后运行npm start

在Rinkeby testnet上使用Remix部署以下Solidity代码。请参阅https://remix.ethereum.org。你需要一些Rinkeby测试以太，如果你还没有Rinkeby faucet的一些免费测试以太话。https://www.rinkeby.io/#faucet。

  1. pragma solidity ^0.4.17;
  2. contract Contract {
  3.  string ipfsHash;
  4.  
  5.  function sendHash(string x) public {
  6.    ipfsHash = x;
  7.  }
  8.  
  9.  function getHash() public view returns (string x) {
  10.    return ipfsHash;
  11.  }
  12. }

保存部署它的合约地址和应用程序二进制接口（ABI）。要获得合约的ABI，请在Remix中转到你的合约地址：

单击“Compile”选项卡，然后单击灰色的“Details”按钮。

11831773-278d19b84a673e1c.png
image

这将打开“Details”窗口。复制“ABI”，它是一个JSON文件。

11831773-db3923a5324606d3.png
image

我个人更喜欢将ABI JSON放入格式化程序，例如https://jsonformatter.org，并在我的javascript代码中使用之前检查它是否有效。保存合约地址和ABI以供日后使用。

在我们的“eth-ipfs/src”目录中，创建以下文件： web3.js，ipfs.js和storehash.js。我们的大部分代码都在App.js中。

11831773-06a39bea936df5ce.png
image

web3.js

我们想使用1.0版本的web3.js，因为与0.20版本不同，1.0允许我们在我们的javascript中使用async并等待而不是promises。目前，MetaMask的默认web3.js提供程序是0.20版本。所以，让我们确保我们覆盖Metamask的web3版本0.20的默认版本，并使用我们的1.0。这是代码：

  1. //为我们的1.0版本覆盖metamask v0.2。 
  2. //1.0让我们使用async和await而不是promises 
  3. import Web3 from ‘web3’;
  4.  
  5. const web3 = new Web3(window.web3.currentProvider);
  6. export default web3;

storehash.js

为了让web3.js能够访问我们之前部署到以太坊的Rinkeby testnet的合约，你需要以下内容：1）合约地址和2）合约中的ABI。一定要从/src目录中导入web3.js文件。这是代码：

  1. import web3 from './web3';
  2. //access our local copy to contract deployed on rinkeby testnet
  3. //use your own contract address
  4. const address = '0xb84b12e953f5bcf01b05f926728e855f2d4a67a9';
  5. //use the ABI from your contract
  6. const abi = [
  7.   {
  8.     "constant": true,
  9.     "inputs": [],
  10.     "name": "getHash",
  11.     "outputs": [
  12.       {
  13.         "name": "x",
  14.         "type": "string"
  15.       }
  16.     ],
  17.     "payable": false,
  18.     "stateMutability": "view",
  19.     "type": "function"
  20.   },
  21.   {
  22.     "constant": false,
  23.     "inputs": [
  24.       {
  25.         "name": "x",
  26.         "type": "string"
  27.       }
  28.     ],
  29.     "name": "sendHash",
  30.     "outputs": [],
  31.     "payable": false,
  32.     "stateMutability": "nonpayable",
  33.     "type": "function"
  34.   }
  35. ]
  36. export default new web3.eth.Contract(abi, address);

ipfs.js

在本教程中，我们将运行ipfs.infura.io节点以连接到IPFS，而不是在我们自己的计算机上运行IPFS守护程序。在代码注释中，如果将IPFS安装为全局依赖项，则还可以选择运行自己的IPFS守护程序。有关使用其节点的更多信息，请参阅https://infura.io/。这是代码：

  1. //using the infura.io node, otherwise ipfs requires you to run a //daemon on your own computer/server.
  2. const IPFS = require(‘ipfs-api’);
  3. const ipfs = new IPFS({ host: ‘ipfs.infura.io’, port: 5001, protocol: ‘https’ });
  4. //run with local daemon
  5. // const ipfsApi = require(‘ipfs-api’);
  6. // const ipfs = new ipfsApi(‘localhost’, ‘5001’, {protocol:‘http’});
  7. export default ipfs;

App.js

这是App.js中的操作顺序：

  • 1.设置状态变量。
  • 2.捕获用户的文件。
  • 3.将文件转换为缓冲区。
  • 4.将缓冲的文件发送到IPFS。
  • 5.IPFS返回一个哈希值。
  • 6.获取用户的MetaMask以太坊地址
  • 7.发送IPFS以便在以太坊上存储。
  • 8.使用MetaMask，用户将确认交易到以太坊。
  • 9.以太坊合约将返回一个交易哈希数。
  • 10.交易哈希值可用于生成具有诸如所使用的gas量和块编号之类的信息的交易收据。
  • 11.IPFS和以太坊信息将在使用Bootstrap for CSS的表中呈现。注意：我没有创建一个isLoading类型变量来自动重新呈现blockNumber和gasUsed变量的状态。因此，现在，你必须再次单击或实现自己的加载图标。 描述变量和函数的表，后面是代码本身如下：
11831773-fd0eb1d1f2399fc9.png
image
11831773-052817891ba616fb.png
image
11831773-de5d4e1ee2cc9855.png
image

最后，这是App.js代码：

  1. import React, { Component } from ‘react’;
  2. //import logo from ‘./logo.svg’;
  3. import ‘./App.css’;
  4. import web3 from ‘./web3’;
  5. import ipfs from ‘./ipfs’;
  6. import storehash from ‘./storehash’;
  7. class App extends Component {
  8.  
  9.     state = {
  10.       ipfsHash:null,
  11.       buffer:'',
  12.       ethAddress:'',
  13.       blockNumber:'',
  14.       transactionHash:'',
  15.       gasUsed:'',
  16.       txReceipt: ''   
  17.     };
  18. captureFile =(event) => {
  19.         event.stopPropagation()
  20.         event.preventDefault()
  21.         const file = event.target.files[0]
  22.         let reader = new window.FileReader()
  23.         reader.readAsArrayBuffer(file)
  24.         reader.onloadend = () => this.convertToBuffer(reader)    
  25.       };
  26.  convertToBuffer = async(reader) => {
  27.       //file is converted to a buffer for upload to IPFS
  28.         const buffer = await Buffer.from(reader.result);
  29.       //set this buffer -using es6 syntax
  30.         this.setState({buffer});
  31.     };
  32. onClick = async () => {
  33. try{
  34.         this.setState({blockNumber:"waiting.."});
  35.         this.setState({gasUsed:"waiting..."});
  36. //get Transaction Receipt in console on click
  37. //See: https://web3js.readthedocs.io/en/1.0/web3-eth.html#gettransactionreceipt
  38. await web3.eth.getTransactionReceipt(this.state.transactionHash, (err, txReceipt)=>{
  39.           console.log(err,txReceipt);
  40.           this.setState({txReceipt});
  41.         }); //await for getTransactionReceipt
  42. await this.setState({blockNumber: this.state.txReceipt.blockNumber});
  43.         await this.setState({gasUsed: this.state.txReceipt.gasUsed});    
  44.       } //try
  45.     catch(error){
  46.         console.log(error);
  47.       } //catch
  48.   } //onClick
  49. onSubmit = async (event) => {
  50.       event.preventDefault();
  51.      //bring in user's metamask account address
  52.       const accounts = await web3.eth.getAccounts();
  53.      
  54.       console.log('Sending from Metamask account: ' + accounts[0]);
  55.     //obtain contract address from storehash.js
  56.       const ethAddress= await storehash.options.address;
  57.       this.setState({ethAddress});
  58.     //save document to IPFS,return its hash#, and set hash# to state
  59.     //https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#add 
  60.       await ipfs.add(this.state.buffer, (err, ipfsHash) => {
  61.         console.log(err,ipfsHash);
  62.         //setState by setting ipfsHash to ipfsHash[0].hash 
  63.         this.setState({ ipfsHash:ipfsHash[0].hash });
  64.    // call Ethereum contract method "sendHash" and .send IPFS hash to etheruem contract 
  65.   //return the transaction hash from the ethereum contract
  66.  //see, this https://web3js.readthedocs.io/en/1.0/web3-eth-contract.html#methods-mymethod-send
  67.         
  68.         storehash.methods.sendHash(this.state.ipfsHash).send({
  69.           from: accounts[0] 
  70.         }, (error, transactionHash) => {
  71.           console.log(transactionHash);
  72.           this.setState({transactionHash});
  73.         }); //storehash 
  74.       }) //await ipfs.add 
  75.     }; //onSubmit
  76. render() {
  77.       
  78.       return (
  79.         <div className="App">
  80.           <header className="App-header">
  81.             <h1> Ethereum and IPFS with Create React App</h1>
  82.           </header>
  83.           
  84.           <hr />
  85. <Grid>
  86.           <h3> Choose file to send to IPFS </h3>
  87.           <Form onSubmit={this.onSubmit}>
  88.             <input 
  89.               type = "file"
  90.               onChange = {this.captureFile}
  91.             />
  92.              <Button 
  93.              bsStyle="primary" 
  94.              type="submit"> 
  95.              Send it 
  96.              </Button>
  97.           </Form>
  98. <hr/>
  99.  <Button onClick = {this.onClick}> Get Transaction Receipt </Button>
  100.   <Table bordered responsive>
  101.                 <thead>
  102.                   <tr>
  103.                     <th>Tx Receipt Category</th>
  104.                     <th>Values</th>
  105.                   </tr>
  106.                 </thead>
  107.                
  108.                 <tbody>
  109.                   <tr>
  110.                     <td>IPFS Hash # stored on Eth Contract</td>
  111.                     <td>{this.state.ipfsHash}</td>
  112.                   </tr>
  113.                   <tr>
  114.                     <td>Ethereum Contract Address</td>
  115.                     <td>{this.state.ethAddress}</td>
  116.                   </tr>
  117.                   <tr>
  118.                     <td>Tx Hash # </td>
  119.                     <td>{this.state.transactionHash}</td>
  120.                   </tr>
  121.                   <tr>
  122.                     <td>Block Number # </td>
  123.                     <td>{this.state.blockNumber}</td>
  124.                   </tr>
  125.                   <tr>
  126.                     <td>Gas Used</td>
  127.                     <td>{this.state.gasUsed}</td>
  128.                   </tr>
  129.                 
  130.                 </tbody>
  131.             </Table>
  132.         </Grid>
  133.      </div>
  134.       );
  135.     } //render
  136. } //App
  137. export default App;

我在src/App.css中添加了一些CSS，使它看起来更容易一些：

  1. /*some css I added*/
  2. input[type=”file”] {
  3.  display: inline-block;
  4. }
  5. .table {
  6.  max-width: 90%;
  7.  margin: 10px;
  8. }
  9. .table th {
  10.  text-align: center;
  11. }
  12. /*end of my css*/

并向src/index.js添加一些导入：

  1. /*https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet*/
  2. import ‘bootstrap/dist/css/bootstrap.css’;
  3. import ‘bootstrap/dist/css/bootstrap-theme.css’;

这就对了！你的DApp应该完成。所以你需要做的就是选择一个文件，发送它，并获得一个交易收据。如果你通过localhost:3000连接到IPFS节点，那么你应该能够在其中一个IPFS网关上看到你的文件。https://gateway.ipfs.io/ipfs/+你的IPFS哈希。

例如： https://gateway.ipfs.io/ipfs/QmYjh5NsDc6LwU3394NbB42WpQbGVsueVSBmod5WACvpte

关于IPFS的一个注意事项是，除非你的文件被另一个节点接收或者你将其固定，否则IPFS最终将垃圾收集你的文件。他们的网站上有很多关于此的内容。

======================================================================

分享一些以太坊、EOS、比特币等区块链相关的交互式在线编程实战教程：

  • java以太坊开发教程，主要是针对java和android程序员进行区块链以太坊开发的web3j详解。
  • python以太坊，主要是针对python工程师使用web3.py进行区块链以太坊开发的详解。
  • php以太坊，主要是介绍使用php进行智能合约开发交互，进行账号创建、交易、转账、代币开发以及过滤器和交易等内容。
  • 以太坊入门教程，主要介绍智能合约与dapp应用开发，适合入门。
  • 以太坊开发进阶教程，主要是介绍使用node.js、mongodb、区块链、ipfs实现去中心化电商DApp实战，适合进阶。
  • C#以太坊，主要讲解如何使用C#开发基于.Net的以太坊应用，包括账户管理、状态与交易、智能合约开发与交互、过滤器和交易等。
  • EOS教程，本课程帮助你快速入门EOS区块链去中心化应用的开发，内容涵盖EOS工具链、账户与钱包、发行代币、智能合约开发与部署、使用代码与智能合约交互等核心知识点，最后综合运用各知识点完成一个便签DApp的开发。
  • java比特币开发教程，本课程面向初学者，内容即涵盖比特币的核心概念，例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等，同时也详细讲解如何在Java代码中集成比特币支持功能，例如创建地址、管理钱包、构造裸交易等，是Java工程师不可多得的比特币开发学习课程。
  • php比特币开发教程，本课程面向初学者，内容即涵盖比特币的核心概念，例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等，同时也详细讲解如何在Php代码中集成比特币支持功能，例如创建地址、管理钱包、构造裸交易等，是Php工程师不可多得的比特币开发学习课程。
  • tendermint区块链开发详解，本课程适合希望使用tendermint进行区块链开发的工程师，课程内容即包括tendermint应用开发模型中的核心概念，例如ABCI接口、默克尔树、多版本状态库等，也包括代币发行等丰富的实操代码，是go语言工程师快速入门区块链开发的最佳选择。

汇智网原创翻译，转载请标明出处。这里是原文构建一个简单的以太坊+IPFS+React.js DApp

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/717075
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号