はじめに
今回の記事は、前回のブログ記事「Test a DApp from First Principles」を更新したものです。前回と同様に、Solidity Remix IDEの「Donation」チュートリアルをEthereumのプライベートネット上で動作させるために必要な手順を説明します。今回の記事のベースとなるチュートリアルはRemix IDEのReadTheDocsで公開されていますが、yann300さんの許可を得て、必要な2つのファイルをここで公開することにしました。この記事では、DAppが正しく機能するために必要な追加のステップをいくつか紹介します。
このチュートリアルでは、これまでと同じツールセットを使用します。Ethereumノードにはeth、DAppブラウザにはMist、静的ファイル用のWebサーバにはPythonのSimpleHTTPServerを選びました。gethを使うことで、ブロックチェーン上のデータを保存したり、読み込んだりすることができるようになりました。ウェブサーバは、DAppで使用する静的なHTML、CSS、JavaScriptファイルを迅速に提供します。Mistブラウザは、これら2つの情報技術のパラダイムの間の橋渡し役となり、Webサーバから静的ファイルをロードして利用したり、注入されたweb3.jsオブジェクトを介してEthereumノードと通信したりすることができます。
これまでの経験から、開発モードで geth ノードを実行するのが DApp の開発とテストに最適な方法であるという結論に至りました。Ganache のような他の開発プラットフォームもありますが、メインネット上で DApp の動作をシミュレートするには geth dev モードを使って開発するよりも良い方法はないことがわかりました。
今回のチュートリアルでは、新しくリリースされたRemix IDEのスタンドアロン版を使用します。npmやyarnを使ってインストールしてください。
このチュートリアルは geth バージョン 1.8.6-stable と Mist バージョン 0.10.0 を使用して書かれています。
セスの初期化
まず、ブロックチェーンデータを保存するフォルダを作成しましょう。
次に、新しく作成したデータディレクトリを指す geth ノードを起動します。gethをdevモードで実行しているので、DAppはシングルノードのプライベートネットにデプロイされ、メインネット上でDAppを構築してテストするという金銭的な負担を避けることができます。
geth ターミナルウィンドウでは、以下のような出力が表示されるはずです。
出力の2番目の最後の行は、ノードがブロックのマイニングを開始したことを示しています。しかし、出力の最後の行は、ブロックに含めるべきトランザクションがないため、マイニングが一時停止されたことを示しています。これは、前回のチュートリアルで表示された出力とは異なります。元の記事を書いている時点で、geth --devはProof of WorkからProof of Authorityのマイニングアルゴリズムへと移行しています。これにより、プライベートネットDAppの開発が簡素化され、手動でマイニングツールを起動したり停止したりする必要がなくなりました。マイナーは、含まれるべきトランザクションがある場合にのみブロックをマイニングします。
IPCエンドポイントがオープンされたという行に注目してください。これでMistを起動してプライベートネットに接続できるようになりました。これで、Mistを起動してプライベートネットに接続できます。
Linuxです。
マックです。
その後まもなく、Mistのターミナルウィンドウが出力を開始し、そのスプラッシュスクリーンが開くのがわかります。Launch Applicationボタンを押してアプリケーションウィンドウを開きます。以下のようなウィンドウが表示されるはずです。
スタート時の残高が非常に大きいことに注目してください。Etherを生成するためにブロックを採掘する必要はありません。Etherbaseから個人アカウントにブロックを送信するだけで、Etherbaseウォレットを直接使用することができます。
それはさておき、端末画面に戻って個人アカウントを作成してみましょう。
Mistアプリケーションのウィンドウに戻ると、Ethereum Walletタブに新しいアカウントが表示されます。このアカウントの開始時のイーサの残高はゼロです。また、イーサの残高を確認するには、イーサ端末のウィンドウから確認することができます。
また、配列のインデックス値を 1 から 0 に切り替えることで、コマンドラインから Etherbase のバランスを確認することもできます。
寄付金DApp
このチュートリアルでは、2つのファイルが必要です。
- ソリダリティスマートコントラクトファイル
このファイルをDonation.solとして保存します。
- DApp ウェブページ
このファイルをindex.htmlとして保存します。
webserverという新しいフォルダを作成し、その中にindex.htmlを移動します。ターミナルウィンドウでフォルダを開き、以下のコマンドを実行します。
デフォルトのブラウザを開き、http://localhost:8000 を読み込んでください。開発者コンソールを開いて出力を確認してください。
以下のような画面が表示されます。
コンソールのエラーに注目してください。さすがにChromeはweb3をサポートしていません。 そのため、部分的にMistを使う必要があります。
ここで、Mistで http://localhost:8000 を開きます。そのページを右クリックして開発者コンソールを開きます。同じエラーが表示されるはずです。
web3がまだ定義されていないようです。index.htmlにJavaScriptファイルを入れてみましょう。
Below the closing </div> at line 20, add the following line
Mistでページを更新してください。それでも同じエラーが表示されるはずです。なぜでしょうか。
結局のところ、web3にgethノードを提供することでweb3を初期化する必要があります。これにより、web3.js プラグインが geth に接続できるようになり、JavaScript API を使用してブロックチェーンにデータを読み書きできるようになります。
Add the following code inside the <script> tag containing all the donation functions.
Mistでページを更新します。コンソールにエラーが出なくなっているはずです。
HTMLにweb3.jsを入れて、gethノード接続で初期化しなければならないのに、Mistを使う意味があるのかと疑問に思うかもしれません。これはChromeでも同じように動作するのではないでしょうか。
簡単に言うと、MistはEthereumとの統合の他の形態を提供しているということです。例えば、Mistの右上に小さなアイコンがあるはずです。これをクリックすると、Etherウォレットを含むポップアップが表示されます。このモーダルを使用して、DAppsが支払いを行ったり受け取ったりする際に使用するアドレスを制御することができます。従来のウェブブラウザでは、このタイプの統合はサポートされていません。
ブロックチェーンへのDonation.solの展開
フロントエンドが立ち上がったので、Donationスマートコントラクトをプライベートネットブロックチェーンにデプロイする必要があります。
ターミナルウィンドウでRemix IDEを起動してください。スタンドアロンのIDEが利用できるようになったので、Mistに統合されたIDEよりも、スタンドアロンのIDEを使用することを強くお勧めします。
Mistブラウザを開き、http://localhost:8080 を読み込みます。以下のような画面が表示されるはずです。
デフォルトのballot.solタブを閉じ、左パネル左上のフォルダアイコンを押してDonation.solを開きます。右パネルの「コンパイル」タブを選択し、「コンパイル開始」ボタンを押します。右側のパネルに警告のリストが表示されるはずですが、このチュートリアルの目的上、これらを気にする必要はありません。
右側のパネルで、[実行]タブに切り替えます。パネルの上部にある[環境]ドロップダウンに注意してください。3つのオプションがあります。JavaScript VM、Injected Web3、Web3 Providerです。このドロップダウンでは、スマートコントラクトのデプロイ先を選択できます。
- JavaScript VM - ブラウザを使って分離されたEthereumノードを実行します。これはスマートコントラクトを素早くテストするのに便利ですが、結果として得られるブロックチェーンは永続的ではなく、ブラウザを閉じると消えてしまいます。
- Injected Web3 - ブラウザが現在接続しているWeb3プロバイダを使用します。このチュートリアルでは、Mist のインスタンスを実行中の geth dev ノードに既に接続しているので、このオプションを使用します。
- Web3 Provider - これにより、IDEを手動でWeb3 Providerに指定することができます。例えば、別のマシン上でGethノードを実行している場合、ローカルのRemix IDEインスタンスを接続してリモートのEthereumノードを使用することができます。
環境] ドロップダウンの下に、[アカウント] ドロップダウンがあります。ここでは、スマートコントラクトの展開に資金を供給するために使用するイーサウォレットを選択できます。デフォルトでは、アカウントのドロップダウンは空です。これは、Remix IDEに接続するためのEtherウォレットがまだ認可されていないためです。Mistの右上にあるピクセル化されたトップハットのアイコンをクリックします。すると以下のようなポップアップウィンドウが表示されます。
認証するアカウントを選択してください。ここではEtherbaseアカウントを使用します。認証をクリックすると、ブラウザが更新されます。実行タブに戻ると、ドロップダウンに利用可能なアカウントが表示されます。
さて、スマートコントラクトをプライベートネットにデプロイしましょう。実行タブのパネルの2番目のセクションで、ドロップダウンで「寄付」が選択されていることを確認し、その下のサーモン色のデプロイボタンをクリックします。次のウィンドウがポップアップします。
Ether ウォレットのパスワードを入力します。個人アカウントを使用している場合は、チュートリアルの最初にアカウントを作成したときに入力したものと同じパスワードになります。Etherbase ウォレットのデフォルトのパスワードは空白です。Send Transaction（トランザクションの送信）ボタンをクリックします。
gethターミナルのウィンドウに戻します。以下のような出力が表示されます。
大成功!当社のスマートコントラクトがブロックチェーンにデプロイされました。出力の最初の行にある契約アドレスに注目してください。このアドレスは、Remix IDEウィンドウの「実行」タブの下部からコピーすることもできます。これがブロックチェーン上のスマートコントラクトのアドレスです。
寄付DAppの使用
今、私たちのフロントエンドは稼働していて web3 を介して geth に接続することができ、スマートコントラクトは私たちのプライベートネットブロックチェーンにデプロイされています。それでは、すべてをまとめてみましょう。
PythonのSimpleHTTPServerを実行している状態で、Mistブラウザでhttp://localhost:8000をロードします。一番上の契約アドレスのフィールドに、前のステップでgethターミナルウィンドウまたはRemixからコピーした契約アドレスを貼り付けます。次の行のフィールドでは、「from」フィールドにイーサウォレットアドレスを、「金額」フィールドに1000000000000000000を貼り付けます。この金額は魏で1イーサです。ここでギブボタンを押すと、取引画面がポップアップします。
イーサウォレットのパスワードを入力し、取引を送信します。しばらくすると、DApのウィンドウは以下のようになります。
geth端末のウィンドウを見て、何が起こったのかを確認してみましょう。
トランザクションが成功し、イーサがスマートコントラクトのアドレスに送信されました。トランザクションのFullhashをコピーして、何が起こったのかを見てみましょう。
トランザクションのデバッグ
Remix IDEウィンドウの右側パネルにあるデバッガタブに切り替えて、"Transaction index or hash"フィールドにfullhashを貼り付けることで、トランザクションによって実行されたコードをステップスルーすることができます。再生ボタンを押して、ハッシュからトランザクションをロードします。これで、スマートコントラクトの機能の実行中にスライダーや前進・後退ボタンを使って移動することができます。
結論
このチュートリアルでDAppの基本的なアーキテクチャをよりよく理解していただけたのではないでしょうか。Geth dev modeはテスト用のEthereumブロックチェーンを使って素早く立ち上げて実行するのに最適な方法であり、GethとMistとシンプルなWebサーバーの組み合わせは、基本的なDApp開発のための完全なツールチェーンです。
.png)
