Boilerplateを使ったDapps(分散型アプリケーション)の作成(2)

ブロックチェーンをコントロールする

前回の作業ですでにEthereumのAPIであるgethにコマンドを送ることで、Ethereumが起動した状態になっています。
その状態でマイニングをスタートしてみます。

> miner.start()
true

マイニングが行われているかどうかは下記コマンドで確認できます。

> miner.hashrate
500450 //ゼロじゃなかったらマイニングされている状態

ストップは下記です。

> miner.stop()
true

今回はマイニングをしたまま開発を進めていきます。

アプリケーションの全体像

フォルダ構成は(抜粋すると)下記のようになっているかと思います。

├── client
│   ├── collections.js
│   ├── index.js
│   ├── lib
│   │   ├── compatibility
│   │   │   └── bootstrap.js
│   │   ├── contracts
│   │   │   └── MultiplyContract.sol
│   │   ├── helpers
│   │   │   ├── helperFunctions.js
│   │   │   └── templateHelpers.js
│   │   └── thirdparty
│   │       ├── chance.min.js
│   │       └── web3
│   │           └── web3.js
│   ├── meta.js
│   ├── routes.js
│   ├── stylesheets
│   └── templates
│       ├── components
│       │   ├── accounts.html
│       │   ├── accounts.js
│       │   ├── balance.html
│       │   ├── balance.js
│       │   ├── multiplyContract.html
│       │   ├── multiplyContract.js
│       │   ├── networkHealth.html
│       │   └── networkHealth.js
│       ├── index.html
│       ├── layout
│       │   ├── _footer.html
│       │   ├── _header.html
│       │   ├── main.html
│       │   └── notFound.html
│       └── views
│           ├── view1.html
│           ├── view1.js
│           ├── view2.html
│           └── view2.js
├── i18n
├── project-tap.i18n
├── public
│   ├── fonts
│   └── images
├── settings.json
├── test-genesis.json
└── tests
    └── mocha
        └── client
            └── MultiplyContract.js

Meteorでよく見かけるのは、ServerとClientにディレクトリを分けて、それぞれのサイドにおける開発を進めていく形でしょうか。
今回は、serverフォルダは存在せずに、Client側からだけで(実質的には)開発が可能なのMeteorの特徴が現れてています。

その他、簡単にピックアップして説明すると、

Meteorのデファクトスタンダードなルーティング用ライブラリ「iron-router」でルーティングが行われている
Viewは、 layout/main.html から views/view1 or views/view2 を呼び出し
views/view1 or views/view2 から components/ 以下の各テンプレートファイルを呼び出し
Componentsフォルダの各htmlファイル名に対応してJSファイルが作成される
(基本的には)JSファイル内に、各Viewで呼び出すためのhelperやイベントを記載していく

上記は主にMeteorの知識ですが、今回の特徴は、 Smart Contract を記載しているアプリであることです。
SmartContractは、デフォルトでは、 client/lib/contracts 以下に記載されています。
Meteorは独特の読み込みルールがあるため、それを意識した書き方が必要になります。
(参考:Meteor 開発者がおさえておきたい「ファイルの読み込み順番(File Load Order)」 )

SmartContractの中身

.sol という拡張子で保存されています。
Congractは「Solidity」という専用の言語で記載されています。

client/lib/contracts/multiplyContract.sol の中身は下記の通りです。

contract MultiplyContract {
    function multiply(uint a) returns(uint d) {
        return a * 7;
    }
}

上記のコードは、見たままではありますが、

MultiplyContract という契約を宣言
変数aと戻り値bを宣言して、引数を7倍したuint(符号なし整数)を戻す

ということを記述しています。

JSベースの言語で、チューリング完全を謳っており、どんな複雑な契約でもプログラミングにおとしこめるものであれば理論上は実現できます(ということになっています)。

SmartContractの動作確認

Cloneしたままの状態で、Meteorを起動すると、View2へのリンクがあるはずです。
View2を開くとこのような画面が出るはずです。

Screen Shot 2016-05-16 at 17.55.18.png

この画面に対応するhtmlとjsファイルは、 multiplyContract.html と multiplyContact.js です。

下記は、multiplyContract.jsの抜粋です。

Template['components_multiplyContract'].events({

    /**
    On "Create New Contract" click
    
    @event (click .btn-default)
    */

    "click .btn-default": function(event, template){ // Create Contract
        TemplateVar.set('state', {isMining: true});
        
        // Set coinbase as the default account
        web3.eth.defaultAccount = web3.eth.coinbase;
        
        // assemble the tx object w/ default gas value
        var transactionObject = {
            data: MultiplyContract.bytecode, 
            gasPrice: web3.eth.gasPrice,
            gas: 500000,
            from: web3.eth.accounts[0]
        };
        
        // estimate gas cost then transact new MultiplyContract
        web3.eth.estimateGas(transactionObject, function(err, estimateGas){
            // multiply by 10 hack for testing
            if(!err)
                transactionObject.gas = estimateGas * 10;
            
            MultiplyContract.new(transactionObject, 
                                 function(err, contract){
                if(err)
                    return TemplateVar.set(template, 'state', {isError: true, error: String(err)});
                
                if(contract.address) {
                    TemplateVar.set(template, 'state', {isMined: true, address: contract.address, source: source});
                    contractInstance = contract;
                }
            });
        });
    },

    
    /**
    On Multiply Number Input keyup
    
    @event (keyup #multiplyValue)
    */

    "keyup #multiplyValue": function(event, template){
        // the input value
        var value = template.find("#multiplyValue").value;  
        
        // call MultiplyContract method `multiply` which should multiply the `value` by 7
        contractInstance.multiply.call(value, function(err, result){
            TemplateVar.set(template, 'multiplyResult'
                            , result.toNumber(10));
            
            if(err)
                TemplateVar.set(template, 'multplyResult'
                                , String(err));
        });
    },
});

こちらも簡単にですが説明すると、