Начните работу с Infura и IPFS на Ethereum

1656571215 nachnite rabotu s infura i ipfs na ethereum

автор Нихарика Сингх

pR1pTOl2Jc2ZJawokXoAbscy0ndeXWKLjDPX

Почему Инфура?

Блокчейн сталкивается со многими проблемами, которые в определенной степени могут быть решены с помощью Infura и/или межпланетной файловой системы (IPFS). Вот основные проблемы:

  1. Хранить данные в блокчейне Ethereum дорого
  2. Трудно настроить клиент Ethereum geth
  3. Трудно масштабировать инфраструктуру

При использовании Infura доступ к сети Ethereum и IPFS становится намного быстрее. Синхронизация клиента geth больше не занимает час, использующий огромный кусок памяти и пропускной способности, пока загружается весь блокчейн.

Вот некоторые другие преимущества использования Infura:

  • В IPFS можно хранить огромные объемы данных, а в Ethereum можно хранить только хэш файла.
  • Infura предоставляет безопасные, надежные, масштабируемые и простые в использовании API для доступа к сети Ethereum и IPFS. Разработчикам не придется беспокоиться об инфраструктуре узла Ethereum или IPFS. Об этом занимается Инфура.
  • Infura предоставляет общедоступные конечные точки с поддержкой TLS.
  • Код переносится в интерфейс Ethereum с помощью JSON RPC, Web3.
  • Infura – это практически швейцарский нож разработчика, а также спасает команду развертывания от ада проблем с масштабируемостью.
y8iwhXpRkRt2PGMowxrJ7p8UY8PXSdhy-Sjc
GS-bzDc0-YSK4Ut4mryw7AjVcYL3UUF2IJB5
  • И, наконец, Инфуре доверяют:
nWAllpEFkm1FUmv0KIYZAPEW9sEanL0oQbvB

Описание dApp

Наш dApp возьмет файл в качестве входных данных от пользователя и загрузит его в IPFS, вызвав контракт Ethereum. Хэш файла будет храниться в Ethereum.

Вот процесс, который мы пройдем:

  1. Возьмите файл как входящий
  2. Превратить файл в буфер
  3. Буфер загрузки в IPFS
  4. Хранить хэш файла, который возвращает IPFS
  5. Получите адрес пользователя Metamask Ethereum
  6. Пользователь подтверждает транзакцию в Ethereum через Metamask
  7. Хэш IPFS записывается на Ethereum
iO9rRzyMkmjnJABUKCkFMbVvByzCUh7HWPXZ
Архитектура dApp

Привлеченный технический стек

  • React — Front-end библиотека
  • Solidity — язык, используемый для создания разумных контрактов, работающих на Ethereum
  • IPFS — децентрализованное хранилище
  • Infura — API-доступ к сетям Ethereum и IPFS

Давайте кодировать!

Убедитесь, что вы уже скачали Metamask. Если нет, загрузите его отсюда.

Кроме того, обновляйте свой 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

.Убедитесь, что вы находитесь в тестовой сети Ropsten на метамаске.

Для развертывания смарт-контракта нам нужен эфир. Чтобы получить эфир для тестовой сети Ropsten, перейдите на страницу 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; }
}
agAOGfoOvoQfYAqSDGqH94y4Lw1KoYHdrF4d

Сохраните адрес смарт-контракта. Мой: 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” создайте следующие файлы: web3.js, ipfs.jsи storehash.js.

Файл 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 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

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 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;

И все это!

Получите доступ к dApp по адресу localhost:3000. Загрузите файл и вы увидите сгенерированный хэш. Чтобы убедиться, что файл загружен, откройте его через шлюз IPFS. Убедитесь, что вы принимаете запросы Metamask.

gsZvutm3tRljA5j6vS4MygjSlmfnQ072vBO6
4KoRXxzXfal5sHgZyDbbP8pZ8xodGPSMeaK6

Доступ к файлу по адресу: хэш IPFS

Мой по адресу: https://gateway.ipfs.io/ipfs/QmbyizSHLirDfZhms75tdrrdiVkaxKvbcLpXzjB5k34a31

Дополнительные сведения об IPFS см. в других статьях:

Учитесь на практике: хорошее и простое вступление в межпланетную файловую систему
Праймер на IPFSmedium.freecodecamp.orgIPFS? и лес Меркл?
Вчна IPFS?гоckernoon.com

Спасибо, что читаете. Если вам это понравилось, пожалуйста, хлопайте! Следите за мной на Twitter @Niharika3297

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *