以太坊ipfs_动手：Infura和以太坊上的IPFS入门
以太坊ipfs
by Niharika Singh
由Niharika Singh
動手：Infura和以太坊上的IPFS入門 (Hands On: Get Started With Infura and the IPFS on Ethereum)
為什么選擇Infura？ (Why Infura?)
There are a lot of pain points being faced by blockchain which may be solved by Infura and/or the InterPlanetary File System (IPFS), to some extent. These are the main challenges:
區塊鏈面臨很多難題，Infura和/或行星際文件系統(IPFS)可以在一定程度上解決這些難題。 這些是主要挑戰：
If you use Infura, access to the Ethereum network and the IPFS becomes a lot faster. It no longer takes hours to sync up the geth client which uses up a huge chunk of memory and bandwidth while the entire blockchain gets downloaded.
如果您使用Infura，則訪問以太坊網絡和IPFS的速度將大大提高。 同步geth客戶端不再花費數小時，該客戶端在下載整個區塊鏈時會占用大量內存和帶寬。
Here are some other advantages that come with using Infura:
以下是使用Infura的其他一些優點：
- Huge amounts of data can be stored on the IPFS, and just the hash of the file can be stored on Ethereum. 大量數據可以存儲在IPFS上，而只是文件的哈希可以存儲在以太坊上。
- Infura provides secure, reliable, scalable, and easy to use APIs to access the Ethereum network and the IPFS. Developers do not have to worry about the infrastructure of an Ethereum node or an IPFS node. That is taken care of by Infura. Infura提供安全，可靠，可擴展且易于使用的API來訪問以太坊網絡和IPFS。 開發人員不必擔心以太坊節點或IPFS節點的基礎架構。 這由Infura負責。
- Infura provides TLS enabled public endpoints. Infura提供啟用TLS的公共端點。
- The code is portable on Ethereum’s interface using JSON RPC, Web3. 該代碼可使用JSON RPC Web3在以太坊的界面上移植。
- Infura is practically a developer’s Swiss Army knife, and also saves the deployment team from the hell of scalability issues. Infura實際上是開發人員的瑞士軍刀，也使部署團隊免于遭受可擴展性問題的困擾。
- And finally, Infura is trusted: 最后，Infura值得信賴：
dApp說明 (dApp Description)
Our dApp will take a file as input from a user and upload it to the IPFS by invoking an Ethereum contract. The hash of the file will be stored on Ethereum.
我們的dApp將從用戶那里獲取文件作為輸入，并通過調用以太坊合約將其上傳到IPFS。 文件的哈希值將存儲在以太坊上。
This is the process we’ll go through:
這是我們要經歷的過程：
涉及的技術棧 (Tech Stack Involved)
React — Front end library
React —前端庫
Solidity — The language used to build smart contracts that runs on Ethereum
堅固性 -用于構建在以太坊上運行的智能合約的語言
IPFS — Decentralized storage
IPFS —分散存儲
Infura —API access to Ethereum network and IPFS
Infura-對以太坊網絡和IPFS的API訪問
讓我們編碼！ (Let’s Code!)
Make sure you already have Metamask downloaded. If not, download it from here.
確保您已經下載了Metamask。 如果沒有，請從此處下載。
Also, keep your Node and NPM up to date.
另外，保持您的節點和NPM為最新。
安裝以下依賴項： (Install the following dependencies:)
$ npm i -g create-react-app$ npm install react-bootstrap$ npm install fs-extra$ npm install ipfs-api$ npm install web3After you’re done, run the following command on your CLI to create a sample React project. I’ll name my project ipfs.
完成后，在CLI上運行以下命令以創建示例React項目。 我將項目命名為ipfs 。
$ create-react-app ipfs在Ropsten Testnet上部署智能合約 (Deploy the Smart Contract on Ropsten Testnet)
.Make sure you’re on Ropsten testnet on metamask.
確保在元掩碼上使用Ropsten測試網。
To deploy the smart contract, we need ether. To get ether for Ropsten testnet, go to https://faucet.metamask.io/.
要部署智能合約，我們需要以太幣。 要獲取Ropsten測試網的以太幣，請訪問https://faucet.metamask.io/ 。
To deploy the smart contract, go to https://remix.ethereum.org.
要部署智能合約，請訪問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; }}Save the address of smart contract. Mine is: 0x610DD75057738B73e3F17A9D607dB16A44f962F1
保存智能合約的地址。 我的是：0x610DD75057738B73e3F17A9D607dB16A44f962F1
Also, save the Application Binary Interface (ABI) in JSON. It can be found in the ‘compile’ tab, under ‘details’.
另外，將應用程序二進制接口(ABI)保存為JSON。 可以在“詳細信息”下的“編譯”選項卡中找到。
Mine is the following:
我的是：
[ { "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" }]In the “ipfs/src” directory, create the following files: web3.js, ipfs.js, and storehash.js.
在“ ipfs / src”目錄中，創建以下文件： web3.js ， ipfs.js和storehash.js 。
文件1 — Web3.js (File 1 — Web3.js)
import Web3 from 'web3';const web3 = new Web3(window.web3.currentProvider);export default web3;文件2 — Storehash.js (File 2 — Storehash.js)
import web3 from './web3';//Your contract addressconst address = '0x610dd75057738b73e3f17a9d607db16a44f962f1';//Your contract ABIconst 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 (File 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 (Edit — 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 (File 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 usercaptureFile =(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 functiononClick = 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;And that is all!
僅此而已！
Access your dApp at localhost:3000. Upload a file and you will see a hash generated. To make sure your file is uploaded, access it via the IPFS gateway. Make sure you accept the Metamask requests.
通過localhost：3000訪問您的dApp。 上載文件，您將看到生成的哈希。 要確保文件已上傳，請通過IPFS網關訪問它。 確保您接受Metamask請求。
Access your file at: https://gateway.ipfs.io/ipfs/your IPFS hash
通過以下網址訪問文件：https://gateway.ipfs.io/ipfs/您的IPFS哈希
Mine is at: https://gateway.ipfs.io/ipfs/QmbyizSHLirDfZhms75tdrrdiVkaxKvbcLpXzjB5k34a31
我的是在： https : //gateway.ipfs.io/ipfs/QmbyizSHLirDfZhms75tdrrdiVkaxKvbcLpXzjB5k34a31
To know more about IPFS, see my other articles:
要了解有關IPFS的更多信息，請參閱其他文章：
Learn by doing: a nice and easy intro to the Inter Planetary File SystemPrimer on IPFSmedium.freecodecamp.orgIPFS ? and Merkle Forest?What is IPFS?hackernoon.com
邊做邊學： IPFS medium.freecodecamp.org IPFS 上 “ Inter Planetary File System Primer”的 一個很好的簡單介紹 。 和默克爾·森林(Merkle Forest)？ 為 W h 是IPFS？哈哈 ckernoon.com
感謝您的閱讀。 如果您喜歡這個，請鼓掌！ 在Twitter上關注我@ Niharika3297 (Thank you for reading. If you liked this, please clap! Follow me on Twitter @Niharika3297)
翻譯自: https://www.freecodecamp.org/news/hands-on-get-started-with-infura-and-ipfs-on-ethereum-b63635142af0/
以太坊ipfs
總結
以上是生活随笔為你收集整理的以太坊ipfs_动手：Infura和以太坊上的IPFS入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： react路由守卫+重定向_React
- 下一篇： 梦到烧火炒菜是什么意思