이 글은 Hyperledger Composer Composite Journey - Part.3 데모 실습을 정리한 글이다.

상품 경매 네트워크 데모 에서 하이퍼레저 패브릭 네트워크에 비즈니스 네트워크를 배포하고, 배포된 비즈니스 네트워크에 REST API 서버를 연결하는 방법을 배웠다면,

이번 과정에서는 하이퍼레저 패브릭 네트워크에서 이벤트가 발생하면, 외부 어플리케이션에서 웹소켓 이벤트 리스너를 통해 Web UI를 업데이트하는 방법을 알아보자.

Table of Contents

  1. 아카이브 생성
  2. 로컬 패브릭에서 실행되는 하이퍼레저 컴포저에 아카이브 배포
  3. 웹 UI 시작
  4. 트랜잭션 submit
    1. 참여자 생성
    2. 상품 추가
    3. 경매 입찰
    4. Web UI를 통한 경매 현황 확인
    5. 경매 종료

아카이브 생성

저장소 복제:

1
git clone https://github.com/IBM/BlockchainEvents-CompositeJourney.git

아카이브 파일(.bna) 생성:

~/demo/BlockchainEvents-CompositeJourney/Composer
1
npm install

{projectDir}/dist에 events.bna파일이 생성되었다.

프로젝트 디렉토리에서 npm test 명령을 실행하면 test/productAuction.js에 작성된 테스트 코드로 유닛테스트가 가능하다.

로컬 패브릭에서 실행되는 하이퍼레저 컴포저에 아카이브 배포

로컬 패브릭을 시작한 뒤 events.bna 파일이 들어있는 dist 디렉토리에서 다음 명령어를 통해 비즈니스 네트워크를 설치/시작한다:

1
2
3
composer network install --card PeerAdmin@hlfv1 --archiveFile events.bna
composer network start --networkName events --networkVersion 0.0.1 --networkAdmin admin --networkAdminEnrollSecret adminpw --card PeerAdmin@hlfv1 --file networkadmin.card
composer card import --file networkadmin.card

다음 명령을 통해 네트워크가 잘 배포되었는지 확인할 수 있다:

1
composer network ping --card admin@events

이제 프로젝트 디렉토리로 이동해서 REST API 서버를 시작한다:

1
2
3
4
5
6
7
➜  BlockchainEvents-CompositeJourney git:(master) ✗ composer-rest-server
? Enter the name of the business network card to use: admin@events
? Specify if you want namespaces in the generated REST API: never use namespaces
? Specify if you want to use an API key to secure the REST API: No
? Specify if you want to enable authentication for the REST API using Passport:No
? Specify if you want to enable event publication over WebSockets: Yes
? Specify if you want to enable TLS security for the REST API: No

각 질문에 대해 답하면 이에 맞는 REST API 서버가 시작된다.

  • 비즈니스 네트워크 카드 이름: admin@events
  • 생성된 API에서 네임스페이스 사용 여부: Never use namespaces
  • API key 사용 여부: No
  • Passport를 통한 인증 허용 여부: No
  • 웹소켓을 통한 이벤트 퍼블리싱 허용 여부: Yes
  • TLS 보안 허용 여부: No

REST API 서버가 정상적으로 시작된 경우 웹브라우저로 http://localhost:3000/explorer 로 이동하면 API를 볼 수 있다.

웹 UI 시작

새 터미널을 열어서 프로젝트 디렉토리 내 Web 디렉토리로 이동한다.

npm install 를 통해 모듈 설치 후 node server.js 명령을 사용해 노드 서버를 시작한다.

http://localhost:8000/seller.html, http://localhost:8000/buyer.html 에서 각각 판매자와 구매자의 이벤트에 대한 대시보드를 볼 수 있다.

트랜잭션 submit

경매 네트워크 데모 실습에서는 composer playground를 이용해 트랜잭션을 발생시켜 보았으니, 이번 실습에서는 REST API를 이용해 보겠다.

참여자 생성

참여자는 Seller 1명, Member 2명을 생성한다.

먼저 POST /Seller를 통해 Seller를 생성한다:

1
2
3
4
5
6
7
{
  "$class": "org.acme.product.auction.Seller",
  "organisation": "ACME",
  "email": "auction@acme.org",
  "balance": 100,
  "products": []
}

파라미터 부분에 Seller 생성을 위한 JSON Data를 입력하고 Try it out! 버튼을 클릭하면 아래에 API 실행 결과가 나온다.

createSeller

Member 생성도 동일한 방법으로 POST /Member를 통해 생성한다.

생성한 참여자들에게는 POST /system/identities/issue 를 통해 ID를 발급한다.

1
2
3
4
5
{
  "participant": "resource:org.acme.product.auction.Seller#auction@acme.org",
  "userID": "seller",
  "options": {}
}

issueID

memberA, memberB도 동일한 API를 통해 ID를 발급해준다.

상품 추가

POST /AddProduct를 통해 상품을 등록한다.

POST /AddProduct
1
2
3
4
5
6
{
  "$class": "org.acme.product.auction.AddProduct",
  "productId": "iphone",
  "description": "sample product",
  "owner": "resource:org.acme.product.auction.Seller#auction@acme.org"
}

POST /StartBidding을 통해 경매를 시작한다.

POST /StartBidding
1
2
3
4
5
6
{
  "$class": "org.acme.product.auction.StartBidding",
  "listingId": "sampleListingId",
  "reservePrice": 50,
  "product": "resource:org.acme.product.auction.Product#iphone"
}

경매 입찰

Member는 POST /Offer를 통해 경매에 참여할 수 있다.

memberA POST /Offer
1
2
3
4
5
6
{
  "$class": "org.acme.product.auction.Offer",
  "bidPrice": 180,
  "listing": "resource:org.acme.product.auction.ProductListing#sampleListingId",
  "member": "resource:org.acme.product.auction.Member#memberA@acme.org"
}
memberB POST /Offer
1
2
3
4
5
6
{
  "$class": "org.acme.product.auction.Offer",
  "bidPrice": 300,
  "listing": "resource:org.acme.product.auction.ProductListing#sampleListingId",
  "member": "resource:org.acme.product.auction.Member#memberB@acme.org"
}

Web UI를 통한 경매 현황 확인

웹소켓을 통한 이벤트 퍼블리싱 허용 여부: Yes

우리가 REST API 서버를 시작할 때 선택한 옵션 중 다음 옵션에 의해서 API 호출 시 발생하는 이벤트를 노드 서버에서 받을 수 있다.

대시보드를 보여주는 웹 어플리케이션의 루트 디렉토리인 Web 디렉토리의 내부를 보면 Web/scripts/events.js 가 있다.

이 스크립트는 ws://localhost:3000에 대한 이벤트 리스너가 정의되어 있고 이를 통해 이벤트가 발생할 때 Web UI를 업데이트 시켜준다.

아래는 지금까지의 경매 현황을 보여주는 Seller와 Member의 대시보드이다.

최소 금액 50으로 경매가 시작되고, memberA와 memberB가 입찰한 정보가 표시된다.

buyerDashboard

sellerDashboard

경매 종료

POST /StartBidding을 통해 경매를 시작하였다면, 경매 종료는 POST /CloseBidding을 이용한다.

POST /CloseBidding
1
2
3
4
{
  "$class": "org.acme.product.auction.CloseBidding",
  "listing": "sampleListingId"
}

경매가 종료되면 최고금액인 300을 입찰한 memberB가 낙찰받게 되며 이 정보는 노드 서버의 이벤트 리스너에 의해 http://localhost:8000/buyer.html, http://localhost:8000/seller.html 의 UI에 자동으로 업데이트된다.

buyer_ui

seller_ui