Hyperledger Composerで簡単なアプリケーションを作るwith React Frontend Part1

#Hyperledger Fabricとは
過去記事
https://qiita.com/melonattacker/items/342bf39a2119a2f6d880
公式サイト
https://www.hyperledger.org/projects/fabric

この記事はPart1です。[Part2へのリンク](https://qiita.com/melonattacker/items/d9d56cb238f66aae0bd0)。

#Hyperledger Composerとは
JavaScriptでHyperledger上で動くアプリケーションを作れる便利グッズです。
チェーンコードがJavaScriptで書けるというのがいいと思います。
公式サイト
https://hyperledger.github.io/composer/latest/

#:sunny:今回作るもの:sunny:
土地の所有権を取引できるようにしてブロックチェーンに記録するというシンプルなものです。
Hyperledger Composerが提供しているRest APIを使ってReactで書くフロントエンドにデータ引っ張ってきて表示させます。

#:construction_worker_tone1:事前準備:construction_worker:
nodeとdockerが必要です
nodeのバージョンはv8.9.4を使っています。v10.14.2とかだと動きません笑。
dockerのインストールはこちら
 https://docs.docker.com/docker-for-mac/install/
dockerを起動しておきましょう。
公式サイトに従ってCLI toolsをインストールしていきます。

```
npm install -g composer-cli@0.20
npm install -g composer-rest-server@0.20
npm install -g generator-hyperledger-composer@0.20
npm install -g yo
```
この時gyp ERR!が出る人はpythonを2.7系にしてnode-gypをインストールするといいです。
自分はこのインストールの段階でエラー連発しまくって4時間くらい詰まってました...

自分はこれをやるとインストールできるようになりました。

```
npm install -g node-gyp
npm i -g npm
```
次にHyperledger Fabricをインストールします。
まず、インストールするためのファイルを入れます。

```
mkdir ~/fabric-dev-tools && cd ~/fabric-dev-tools

curl -O https://raw.githubusercontent.com/hyperledger/composer-tools/master/packages/fabric-dev-servers/fabric-dev-servers.zip

unzip fabric-dev-servers.zip
```

次にHyperledger Fabric v1.2 をインストールします。

```
cd ~/fabric-dev-tools
export FABRIC_VERSION=hlfv12
./downloadFabric.sh
```
Hyperledger FabricをスタートしてPeerAdmin cardを生成します。

```
cd ~/fabric-dev-tools
./startFabric.sh
./createPeerAdminCard.sh
```

Yeomanを使ってbusiness networkを作ります。

```
yo hyperledger-composer:businessnetwork
```
こんな感じで答えます。
<img width="644" alt="スクリーンショット 2018-12-24 15.41.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/326169/29858ae5-0dae-068d-767c-65aefba49a8d.png">

#:walking:Model Fileの設定:walking_tone2:
このbusiness networkの構成要素であるParticipant、asset、transactionを定義します。


```:fabric-dev-tools/land-owner/models/org.acme.landowner.cto
namespace org.acme.landowner
enum LandDesc {
  o Normal
  o Agricultual
  o Mountain
  o Forest
}

enum LandSize {
  o SMALL
  o MEDIUM
  o LARGE
}

participant Trader identified by email {
 o String email
 o String firstName
 o String lastName
 o String type
}

asset Land identified by landId {
 o String landId
 o LandSize size
 o LandDesc description
 --> Trader owner
}

transaction Trade {
 --> Land land
 --> Trader newOwner
}
```
土地の交換をするTrader、土地であるLand、Tradeトランザクションを用意しました。
Traderはemail、LandはlandIdで判別されます。

#:high_heel:Script Fileの設定:high_heel:
このbusiness modelのメインロジックです。
これがチェーンコードの役割を果たします。

```:fabric-dev-tools/land-owner/lib/logic.js
/**
 * Track the trade of a land from one trader to another
 * @param {org.acme.landowner.Trade} trade - the trade to be processed
 * @transaction
 */
async function tradeLand(trade) {
    trade.land.owner = trade.newOwner;
    let assetRegistry = await getAssetRegistry('org.acme.landowner.Land');
    await assetRegistry.update(trade.land);
}
```
これによって土地の所有権を移します。
#:gear:Access Controllの設定:gear:
このbusiness networkのルールのようなものです。

```:fabric-dev-tools/land-owner/permissions.acl

rule Default {
    description: "Allow all participants access to all resources"
    participant: "ANY"
    operation: ALL
    resource: "org.acme.landowner.*"
    action: ALLOW
}

rule SystemACL {
  description:  "System ACL to permit all access"
  participant: "ANY"
  operation: ALL
  resource: "org.hyperledger.composer.system.**"
  action: ALLOW
}
```
##business network archive(.bna)ファイルの生成
business networkが定義されたので、.bnaファイルを生成します。
.bnaファイルは上で定義した３つのファイルをパッケージ化してHyperledger Fabricにデプロイするためのものです。
land-ownerディレクトリに移動して以下のコマンドを実行しましょう。bnaファイルが生成されます。

```
composer archive create -t dir -n .
```
#:airplane:business networkのデプロイ:airplane:
Hyperledger Fabricにbusiness networkをデプロイするにはHyperledger Composerで作ったbusiness networkをピア上にインストールする必要があります。
land-ownerディレクトリにて以下を実行します。

```
composer network install --card PeerAdmin@hlfv1 --archiveFile land-owner@0.0.1.bna
```
```composer network install```コマンドはPeerAdminというbusiness networkのcardを必要とします（上で作って、インポートしている)。.bnaファイルがbusiness networkを定義します。

ではbusiness networkをスタートします。

```
composer network start --networkName land-owner --networkVersion 0.0.1 --networkAdmin admin --networkAdminEnrollSecret adminpw --card PeerAdmin@hlfv1 --file networkadmin.card
```

```composer network start```コマンドはbusiness network cardが必要です。
同様にbusiness network cardとしてインポートするためにnetworkのバージョンと名前、adminのidentityなども必要です。

networkの管理者のidentityを使用可能なbusiness network cardとしてインポートするために以下のコマンドを実行します。

```
composer card import --file networkadmin.card
```
business networkがちゃんとデプロイされているかを確認するには以下のコマンドを実行します。

```
composer network ping --card admin@land-owner
```
#:page_facing_up:REST サーバーの生成:page_with_curl:
 Hyperledger Composerはbusiness networkに基づくREST APIを生成することができます。これはWebアプリケーションを作るのに役立ちます。
land-ownerディレクトリにて次のコマンドを実行しましょう。

```
composer-rest-server
```
こんな感じで答えていきます。
<img width="639" alt="スクリーンショット 2018-12-24 15.53.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/326169/d7bda0ab-b4aa-71e5-fad6-d9e64231bcd6.png">


http://localhost:3000/explorer にアクセスするとREST APIに繋がります。

<img width="1416" alt="スクリーンショット 2018-12-24 15.54.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/326169/dc6222a8-32ce-381d-ac12-a178dc101bb5.png">


上で定義したparticipant、asset、transactionが表示されています。

まず、POSTルートで２人のTraderを登録しましょう
ParametersのValueの部分に以下を入力し、Try it out!を押しましょう。

```
{
  "$class": "org.acme.landowner.Trader",
  "email": "happy@email.com",
  "firstName": "Ryugamine",
  "lastName": "Mikado",
  "type": "Farmer"
}
```
２人目も同じように作ります。

```
{
  "$class": "org.acme.landowner.Trader",
  "email": "sad@email.com",
  "firstName": "Sonohara",
  "lastName": "Anri",
  "type": "Farmer"
}
```
Response Codeが200になっていると成功しています。また、GETルートでidのvalueに２人のemailを入力することによっても確認できます。http://localhost:3000/api/Trader に接続することによっても確認できます。

次にLandを作りましょう。
POSTルートでParametersのValueの部分に以下を入力し、Try it out!を押しましょう。

```
{
  "$class": "org.acme.landowner.Land",
  "landId": "0001",
  "size": "SMALL",
  "description": "Agricultual",
  "owner": "resource:org.acme.landowner.Trader#happy@email.com"
}
```
http://localhost:3000/api/Land に接続するとLand:0001のownerがemail:happy@email.comであるTrader、つまりミカドであることがわかります。

では、Tradeトランザクションを作って見ましょう！
ここでは農民であるミカドとアンリが農地の所有権を取引する場面を考えています。
ミカドが持っているLand:0001の所有権をアンリに移します。
POSTルートでParametersのValueの部分に以下を入力し、Try it out!を押しましょう。

```
{
  "$class": "org.acme.landowner.Trade",
  "land": "resource:org.acme.landowner.Land#0001",
  "newOwner": "resource:org.acme.landowner.Trader#sad@email.com"
}
```

ここでhttp://localhost:3000/api/Land に接続するとLand:0001のownerがemail:sad@email.comであるTrader、アンリに変わっていることが確認できます。

トランザクションの作成に成功しました！
Part1はここまでとして、Part2でシンプルなアプリケーションをReactで作っていきます。
Part2は[こちら](https://qiita.com/melonattacker/items/d9d56cb238f66aae0bd0)。

###参照
https://hyperledger.github.io/composer/latest/installing/installing-prereqs
https://hyperledger.github.io/composer/latest/installing/development-tools
https://hyperledger.github.io/composer/latest/tutorials/developer-tutorial
https://medium.com/coinmonks/building-a-blockchain-application-using-hyperledger-fabric-with-angular-frontend-part-1-f070bf169231