TruffleによるEthereumのSolidityスマートコントラクトとReactフロントエンドのDApps開発
広告
知っておくと良い概念
事前準備
MetaMaskをインストールする
Google Chromeなどのブラウザで、Ethereumネットワークに接続して、支払いやスマートコントラクトの実行トランザクションなどをできるようにしてくれるエクステンション
これのおかげでブラウザ（Web）の世界とEthererumの世界が繋げられる
事前にインストール、セットアップが必要
SolidityのVSCode用エクステンション（任意）
Ubuntuでのapt install（macOSの場合は各自調べてください）
bashsudo add-apt-repository -y ppa:ethereum/ethereum
sudo apt-get update
sudo apt-get install ethereum
sudo apt-get install solc
sudo apt install sqliteTruffle SuiteによるDAppsの開発
Truffle Suiteとは
React Truffle Boxとは
TruffleでReactを使ったフロントエンドを開発するためのテンプレート
Truffle SuiteとReact Truffle Boxを使ったプロジェクトを立ち上げる
インストールとセットアップ
bashnpm install -g truffle
mkdir myfirstdapps
cd myfirstdapps
truffle unbox reactバージョン確認
bashtruffle versiontruffle-config.jsを変更する
network_idを指定するのが重要
truffle-config.jsmodule.exports = {
// See <http://truffleframework.com/docs/advanced/configuration>
// to customize your Truffle configuration!
contracts_build_directory: path.join(__dirname, "client/src/contracts"),
networks: {
develop: {
host: "127.0.0.1",
port: 8545,
network_id: "*"
}
}
};（別のターミナルで）開発用Ethereumネットワークの立ち上げ
開発用のEthereumネットワークが立ち上げられ、10個のアカウントとそれに対応する秘密鍵が生成されます
bashtruffle develop
重要：ここで表示されるAccounts, Private Keys, Mnemonicをスクショなどでメモっておく
重要：このtruffle developはそのまま立ち上げっぱなしにしておく
（元のターミナルで）Solidityをコンパイルしてマイグレートして開発用Ethereumネットワークにデプロイする
bashtruffle compile
truffle migrate --network develop重要：MetaMaskの設定を変更する
ネットワークをlocalhostに切り替える
「アカウントのインポート」をクリック
truffle develop で生成されたアカウントの秘密鍵（Private Keys）のひとつをコピペする10個あるうちのどれでもOK
新しくインポートされたアカウントに切り替えるのを忘れずに
フロントエンドの動作確認
bashcd client
npm run startブラウザで http://localhost:4679/ が開く
MetaMaskのダイアログが表示されるので、「確認」をクリックする
Solidityで記述した
Set トランザクションが実行され、結果が表示される
本格的な独自のDAppsの開発
Solidityについて学ぶ
CryptoKittiesのようなゾンビゲーム作りを通じてSolidityの基本的な言語仕様が一通り学べます
OpenZeppelinについて学ぶ
OpenZeppelinは、Solidityによるスマートコントラクトのライブラリ集
Truffleプロジェクトにおいては、
npm i openzeppelin-solidity で導入可能