소개

이 기사는 Hyperledger Composer로 간단한 응용 프로그램을 만드는 with React Frontend의 ​​Part2입니다.
Part2는 Hyperledger Composer에서 business network를 만들어 Hyperledger Fabric에 배포한 후 REST API로 트랜잭션을 만드는 곳까지 했습니다.

Part1은 여기 .

애플리케이션 개요

GET로 Trader를 표시시킨다.

POST에서 새로운 Trader를 추가한다.

create-react-app

~/Home

npm install -g create-react-app
create-react-app landowner-app

프록시 및 포트 설정

REST API는 localhost:3000에서 실행됩니다. 지금 REST API에서 데이터를 당기고 싶습니다. 그 때문에 어플리케이션 자체는 다른 port로 달리게 하지 않으면 안됩니다. 데이터를 가져올 위치를 지정하기 위해 package.json 파일에서 proxy를 설정합니다.

~/landowner-app/package.json

"proxy": "http://localhost:3000/

그런 다음 다른 포트에서 애플리케이션을 실행할 수 있도록 scripts start 명령을 변경합니다.

~/landowner-app/package.json

"start": "PORT=3001 react-scripts start"

CODE

Client.js와 App.js 파일을 작성합니다. 구조는 매우 간단합니다.

Client.js

const search = async(type) => {
    let response = await fetch(`api/${type}`, {
        accept: 'application/json'
    });
    let result = await response.json();
    return result;
}

const create = async(type, data) => {
    let response = await fetch(`api/${type}`, {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        method: 'post',
        body: JSON.stringify(data)
    });
    let result = await response.json();
    return result;
}

const Client = {search, create};
export default Client;

search 함수와 create 함수를 준비했습니다.
search는 GET 요청을 create는 POST 요청을 해줍니다.
Trader를 GET하거나 POST하는 방법은 http://localhost:3000/api/Trader에 문의하십시오.

App.js

import React, { Component } from 'react';
import './App.css';
import Client from './Client.js';

class App extends Component {

  constructor() {
    super()
    this.state = {
      traders: []
    }
    this.handleTraderInputChange = this.handleTraderInputChange.bind(this)
  }

  componentWillMount = () => {
    this.getTrader()
  }

  handleTraderInputChange = event => {
    const {target: {name, value}} = event
    this.setState({
      [name]: value
    });
  }

  getTrader = async() => {
    Client.search('Trader')
    .then(data => {
      this.setState({
        traders: data
      })
    })
  }

  submitTrader = () => {
    const data = {
      "$class": "org.acme.landowner.Trader",
      "email": this.state.email,
      "firstName": this.state.firstName,
      "lastName": this.state.lastName,
      "type": this.state.type
    }

    Client.create('Trader', data)
    .then(() => {
      this.getTrader()
    })
  }

  render() {
    return(
      <div className="App">
        <h2>Add Trader</h2>
        <p>email:</p>
        <input 
          onChange={this.handleTraderInputChange}
          type="text"
          name="email" />
        <p>firstName:</p>
        <input 
          onChange={this.handleTraderInputChange}
          type="text"
          name="firstName" />
        <p>lastName:</p>
        <input 
          onChange={this.handleTraderInputChange}
          type="text"
          name="lastName" />
        <p>type:</p>
        <input
          onChange={this.handleTraderInputChange}
          type="text"
          name="type" />
        <button onClick={this.submitTrader}>Create New Trader</button>

        <div style={{justifyContent: 'space-around'}}>
          <div>
            <h2>Trader List</h2>
            {this.state.traders.map((r, i) => (
              <div 
                style={{border: '1px solid black'}}
                key={i}>
              <p>email: {r.email}</p>
              <p>firstName: {r.firstName}</p>
              <p>lastName: {r.lastName}</p>
              <p>type: {r.type}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }
}

export default App;

Trader를 등록하는 하나의 form과 등록된 Trader를 표시하는 박스를 만들었습니다.
componentWillMount에서는 데이터를 가져오고 있습니다.

Running the App!

REST API가 실행 중이 아니면 component-rest-server를 다시 시도하십시오.
landowner-app 디렉토리에서 npm start 하자!

이제 Hyperledger Composer를 사용한 간단한 응용 프로그램이 완성되었습니다! !

이런 식으로 Trader를 만들어 표시시킬 수 있습니다.


위와 같습니다만 일단 코드를 실어 둡니다.
htps : // 기주 b. 코 m / 메이 된 c r / hy ぺr ぇd

Part1에 대한 링크

참조