Blockchain code Metaverse VR

Crypto×VR×SmartContract(388)

スポンサーリンク

//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の内容をサイトに反映するようにお願い

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2021 All Rights Reserved Powered by AFFINGER5.