TruffleによるEthereumのSolidityスマートコントラクトとReactフロントエンドのDApps開発

広告

https://gyazo.com/7897e9e71550514e3e81734a111e171f https://amzn.to/385IST8

知っておくと良い概念

事前準備

Google Chromeなどのブラウザで、Ethereumネットワークに接続して、支払いやスマートコントラクトの実行トランザクションなどをできるようにしてくれるエクステンション

これのおかげでブラウザ（Web）の世界とEthererumの世界が繋げられる

事前にインストール、セットアップが必要

SolidityのVSCode用エクステンション（任意）

Ubuntuでのapt install（macOSの場合は各自調べてください）

code:bash

sudo add-apt-repository -y ppa:ethereum/ethereum

sudo apt-get update

sudo apt-get install ethereum

sudo apt-get install solc

sudo apt install sqlite

Truffle Suiteとは

React Truffle Boxとは

Truffle SuiteとReact Truffle Boxを使ったプロジェクトを立ち上げる

インストールとセットアップ

code:bash

npm install -g truffle

mkdir myfirstdapps

cd myfirstdapps

truffle unbox react

バージョン確認

code:bash

truffle version

truffle-config.jsを変更する

network_idを指定するのが重要

code:truffle-config.js

module.exports = {

// 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ネットワークが立ち上げられ、10個のアカウントとそれに対応する秘密鍵が生成されます

code:bash

truffle develop

https://gyazo.com/2a58429752630fdf14b473300d2b56c9

重要：ここで表示されるAccounts, Private Keys, Mnemonicをスクショなどでメモっておく

重要：このtruffle developはそのまま立ち上げっぱなしにしておく

code:bash

truffle compile

truffle migrate --network develop

重要：MetaMaskの設定を変更する

ネットワークをlocalhostに切り替える

https://gyazo.com/f1f1712a452db1b062c5f644c0cf01a3

「アカウントのインポート」をクリック

https://gyazo.com/edfacffbc68e812424aae198d6b2c278

10個あるうちのどれでもOK

https://gyazo.com/adf0b4e2c6c20aa6100201f208aa8b50

新しくインポートされたアカウントに切り替えるのを忘れずに

フロントエンドの動作確認

code:bash

cd client

npm run start

MetaMaskのダイアログが表示されるので、「確認」をクリックする

https://gyazo.com/24c2fd980f3e05a98135e83ac42c4694

https://gyazo.com/e81852eb47b4ac68fbc9e70419589592

本格的な独自のDAppsの開発

OpenZeppelinは、Solidityによるスマートコントラクトのライブラリ集