//tips
//smart contract
Lottery.test.jsのテストを実行。
今度は0.01eth以下の送金の際にエラー表示がされるかどうかを確認する。
it('requires a minimum amount of ether to enter',async()=>{
//送金制限外の送金をcatchできているか確認
try{
await lottery.methods.enter().send({
from:accounts[0],
value:0
});
assert(false);//強制バン、エラー表示。本来はここまできてはいけないので実装ミスが発覚する。
}catch(err){
assert.ok(err);//エラーの存在を確認するため
//errが返ればtrueを返す。正しく制約が稼働している。
}
});
Managerしかpickwinnerメソッドを呼べないことを確認する。restrictedが機能しているのでそれ以外のアカウントでは本来呼べないもの。
it('only manager can call pickWinner',async()=>{
//managerしかpickWinnerを呼べない
try{
await lottery.methods.pickWinner().send({
from:accounts[1]//本来はaccounts[0]しか呼べない
});
assert(false);//テスト失敗
}catch(err){
assert(err);//テスト成功
}
});
最後にもう一つpickwinnerの送金確認を行う。
it('sends money to the winner and resets the players array',async()=>{
await lottery.methods.enter().send({
from:accounts[0],
value:web3.utils.toWei('2','ether')
});
const initialBalance = await web3.eth.getBalance(accounts[0]);//2eth減少した状態
await lottery.methods.pickWinner().send({from:accounts[0]});//一人しかいないので送金主に送り返す
const finalBalance = await web3.eth.getBalance(accounts[0]);//gas代を考慮するとinitialよりも少なくなる
//gas代を考慮した差をとる
const difference=finalBalance-initialBalance;
console.log(difference);
assert(difference > web3.utils.toWei('1.8','ether'));
});
テストは十分かと思うので、ここからはReactを使用してのフロントエンドの制作に入っていく。reactを使用する理由は従来のweb環境のようにdatabaseではなく、ブロックチェーンから情報を引っ張り、ページ上でweb3に連動したメタマスクを通して、transactionを送り、ブロックチェーンに組み込んでいくことになる。
この際に従来のwebページのformのsubmitとは異なり、情報の変更にはメタマスクでの公開鍵・秘密鍵が使用されるので、自身のサーバからデータベースに情報を書き込む必要がなく、ユーザー自身がコストを払いその処理を行うことになる。
Reactではブラウザでの複雑なビジネスロジックなどの記述を簡潔にするので、データベースとの連携に注力する必要なく、ブラウザでの構築に集中できるブロックチェーン関連サイトで非常に相性が良いよう。
少し脱線してreactの基本的な使い方を習得していく。
基本的なjsの内容をwebブラウザに表示していく流れは.jsでコンパイルした内容をtranspileという変換器を通じて、index.html,application.js,style.cssなどの形になり、ブラウザに渡すことになる。
まずはインストラクターのパッケージReduxSimpleStarter-masterをダウンロードしてアップ。
cd ReduxSimpleStarter-master
Npm install
そもそもreduxはなんぞやと調べてみるとreactのUIstateを管理フレームワークとのこと。
この状態で早速Npm startを実行し、ブラウザに直接http://localhost:8080/を打ち込むと
React simple starter
と表示される。
この内容はフォルダ内に記載された下記のapp.jsの中身により反映されている。
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<div>React simple starter</div>
);
}
}
Index.jsも作成し、こちらも反映させてみる。
まずは簡単な表示から。
//create a new component
//this component should produce html
const App=function(){
return <div>Hi!</div>//JSXはhtml表記をjsでかけるもの
}
jsでHiと表示させたがここではJSXというhtmlをjsでかける言語を使用している。
これをBabelというJSXなどを通常jsに戻すサイトを活用してみるとなぜJSXで記載した方がいいのかわかる。表記が格段に簡単になるのだ。
さらにwebブラウザに反映できるようにreact対応の記述を進める。
import React from 'react';//nodemodulesフォルダのreactを参照する
//これでreactフォルダにアクセスできる
import ReactDOM from 'react-dom';//nodemodulesフォルダのreactを参照する
//create a new component
//this component should produce html
const App=function(){
return <div>Hi!</div>//JSXはhtml表記をjsでかけるもの
}
//take this component's generated html
//and put it on the page(in the DOM)
ReactDOM.render(App);//react-domにAppの内容をサイトに反映するようにお願い
