星鉴网>IPFS技术>动手:开始使用Infura和以太坊上的IPFS

动手:开始使用Infura和以太坊上的IPFS

2018/11/9 13:32:52 1717人阅读

【导读】 以太坊区块链面临许多痛点,在某种程度上可由Infura与星际文件系统(IPFS)解决。


为何选择Infura?


以太坊区块链面临许多痛点,在某种程度上可由Infura与星际文件系统(IPFS)解决。这些是主要痛点是:


将数据存储在以太坊区块链上是很昂贵的


配置以太坊geth客户端很困难


扩展基础设施很困难


如果您使用Infura,访问以太坊网络和IPFS会变得更快。在整个区块链下载时,不再需要花费数小时来同步占用大量内存和带宽的geth客户端。



以下是使用Infura时的其他一些优点:


可以在IPFS上存储大量数据,只需将文件的哈希值存储在以太坊上即可。


Infura提供安全,可靠,可扩展且易于使用的API,以访问以太坊网络和IPFS。开发人员不必担心以太坊节点或IPFS节点的基础结构。这是由Infura提供的。


Infura支持TLS的公共端点。


该代码可以使用JSON RPC,Web3在以太坊的界面上移植。


Infura实际上是开发人员的利器,为部署团队节省了可扩展性问题。


Infura值得信赖:

Infura受到全球数百家公司的信赖

dApp说明


我们将创建一个dApp文件,并通过调用以太坊合约将其上传到IPFS。该文件的哈希值将存储在以太坊中。


这是我们将要经历的过程:


1、将文件作为输入


2、将文件转换为缓冲区


3、上传缓冲区到IPFS


4、存储IPFS返回的文件的哈希值


5、获取用户的Metamask以太坊地址


6、用户通过Metamask确认交易到以太坊


7、IPFS哈希写在以太坊上



dApp架构


参与的技术堆栈


React  - 前端库


Solidity  - 用于构建在以太坊上运行的智能合约的语言


IPFS  - 分散存储


Infura -API访问以太坊网络和IPFS


搭建代码!


确保已下载Metamask。如果没有,请从这里https://metamask.io/下载。


此外,让您的Node和NPM保持最新状态。


安装以下依赖项:

$ npm i -g create-react-app
$ npm install react-bootstrap
$ npm install fs-extra
$ npm install ipfs-api
$ npm install web3


完成后,在CLI上运行以下命令以创建示例React项目。我将我的项目命名为ipfs。

$ create-react-app ipfs


在Ropsten Testnet上部署智能合约


确保你在metamask上使用Ropsten testnet。


要部署智能合约,我们需要以太网。要获得Ropsten testnet的以太网,请访问https://faucet.metamask.io/。


要部署智能合约,请访问https://remix.ethereum.org

pragma solidity ^0.4.17;
contract Contract {
string ipfsHash;

function setHash(string x) public {
  ipfsHash = x;
}

function getHash() public view returns (string x) {
  return ipfsHash;
}
}


智能合约地址


保存智能合约的地址。我的是:0x610DD75057738B73e3F17A9D607dB16A44f962F1


另外,将应用程序二进制接口(ABI)保存在JSON中。它可以在“详细信息”下的“编译”选项卡中找到。


我的是以下内容:

[
{
 "constant": false,
 "inputs": [
  {
   "name": "x",
   "type": "string"
  }
 ],
 "name": "sendHash",
 "outputs": [],
 "payable": false,
 "stateMutability": "nonpayable",
 "type": "function"
},
{
 "constant": true,
 "inputs": [],
 "name": "getHash",
 "outputs": [
  {
   "name": "x",
   "type": "string"
  }
 ],
 "payable": false,
 "stateMutability": "view",
 "type": "function"
}
]


在“ipfs / src”目录中,创建以下文件:


文件1 - Web3.js

import Web3 from 'web3';
const web3 = new Web3(window.web3.currentProvider);
export default web3;


文件2 - Storehash.js

import web3 from './web3';
//Your contract address
const address = '0x610dd75057738b73e3f17a9d607db16a44f962f1';
//Your contract ABI
const abi = [
{
 "constant": false,
 "inputs": [
  {
   "name": "x",
   "type": "string"
  }
 ],
 "name": "sendHash",
 "outputs": [],
 "payable": false,
 "stateMutability": "nonpayable",
 "type": "function"
},
{
 "constant": true,
 "inputs": [],
 "name": "getHash",
 "outputs": [
  {
   "name": "x",
   "type": "string"
  }
 ],
 "payable": false,
 "stateMutability": "view",
 "type": "function"
}
]
export default new web3.eth.Contract(abi, address);


文件3 - Ipfs.js

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


编辑 - Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();


文件4 - App.js

import React, { Component } from 'react';
import web3 from './web3';
import ipfs from './ipfs';
import storehash from './storehash';
import { Button } from 'reactstrap';
class App extends Component {
state = {
     ipfsHash:null,
     buffer:'',
     ethAddress:'',
     transactionHash:'',
     txReceipt: ''
   };
//Take file input from user
captureFile =(event) => {
       event.stopPropagation()
       event.preventDefault()
       const file = event.target.files[0]
       let reader = new window.FileReader()
       reader.readAsArrayBuffer(file)
       reader.onloadend = () => this.convertToBuffer(reader)
     };
//Convert the file to buffer to store on IPFS
convertToBuffer = async(reader) => {
     //file is converted to a buffer for upload to IPFS
       const buffer = await Buffer.from(reader.result);
     //set this buffer-using es6 syntax
       this.setState({buffer});
   };
//ES6 async function
onClick = async () => {
try{
       this.setState({blockNumber:"waiting.."});
       this.setState({gasUsed:"waiting..."});
await web3.eth.getTransactionReceipt(this.state.transactionHash, (err, txReceipt)=>{
         console.log(err,txReceipt);
         this.setState({txReceipt});
       });
     }
catch(error){
     console.log(error);
   }
}
onSubmit = async (event) => {
     event.preventDefault();
//bring in user's metamask account address
     const accounts = await web3.eth.getAccounts();
   //obtain contract address from storehash.js
     const ethAddress= await storehash.options.address;
     this.setState({ethAddress});
   //save document to IPFS,return its hash#, and set hash# to state
     await ipfs.add(this.state.buffer, (err, ipfsHash) => {
       console.log(err,ipfsHash);
       //setState by setting ipfsHash to ipfsHash[0].hash
       this.setState({ ipfsHash:ipfsHash[0].hash });
       // call Ethereum contract method "sendHash" and .send IPFS hash to etheruem contract
       //return the transaction hash from the ethereum contract
       storehash.methods.sendHash(this.state.ipfsHash).send({
         from: accounts[0]
       }, (error, transactionHash) => {
         console.log(transactionHash);
         this.setState({transactionHash});
       });
     })
   };
render() {
return (
       <div className="App">
         <header className="App-header">
           <h1>Ethereum and IPFS using Infura</h1>
         </header>
<hr/>
<grid>
         <h3> Choose file to send to IPFS </h3>
         <form onSubmit={this.onSubmit}>
           <input
             type = "file"
             onChange = {this.captureFile}
           />
            <Button
            bsStyle="primary"
            type="submit">
            Send it
            </Button>
         </form>
<hr/>
<Button onClick = {this.onClick}> Get Transaction Receipt </Button>
<hr/>
 <table bordered responsive>
               <thead>
                 <tr>
                   <th>Tx Receipt Category</th>
                   <th> </th>
                   <th>Values</th>
                 </tr>
               </thead>
<tbody>
                 <tr>
                   <td>IPFS Hash stored on Ethereum</td>
                   <td> : </td>
                   <td>{this.state.ipfsHash}</td>
                 </tr>
                 <tr>
                   <td>Ethereum Contract Address</td>
                   <td> : </td>
                   <td>{this.state.ethAddress}</td>
                 </tr>
                 <tr>
                   <td>Tx # </td>
                   <td> : </td>
                   <td>{this.state.transactionHash}</td>
                 </tr>
               </tbody>
           </table>
       </grid>
    </div>
     );
   }
}
export default App;

在localhost:3000访问您的dApp。


上传文件,您将看到生成的哈希。要确保上载文件,请通过IPFS网关访问它。确保您接受Metamask请求。



我的位置是:https://gateway.ipfs.io/ipfs/QmbyizSHLirDfZhms75tdrrdiVkaxKvbcLpXzjB5k34a31


要了解有关IPFS的更多信息,请参阅本站的其它文章。


本文作者Niharika Singh


25

参与讨论

登录后参加评论......

全部评论 0

作者

返回顶部