lesson-1_Reactとウォレットをセットアップしよう
💻 クライアントを設定する
このセクションでは、Webサイトの構築を通して、クライアントとスマートコントラクトの連携方法について学びます。
実装は下記をイメージ してください。
-
クライアント＝フロントエンド
-
スマートコントラクト＝バックエンド
それでは、始めましょう 🚀
🏁 Web アプリケーションを起動する
ターミナル上でETH-NFT-Collectionディレクトリ直下に移動して下記を実行しましょう。
yarn client start
あなたのローカル環境で、Webサイトのフロントエンドが立ち上がりましたか？
例)ローカル環境で表示されているWebサイト
上記のような形でフロントエンドが確認できれば成功です。
これからフロントエンドの表示を確認したい時は、ターミナルに向かい、ETH-NFT-Collectionディレクトリ上で、yarn client startを実行します。これからも必要となる作業ですので、よく覚えておいてください。
ターミナルを閉じるときは、以下のコマンドが使えます ✍️
- Mac:
ctrl + c - Windows:
ctrl + shift + w
🦊 MetaMask をダウンロードする
次に、イーサリアムウォレットをダウンロードしましょう。
このプロジェクトではMetaMaskを使用します。
- こちら からブラウザの拡張機能をダウンロードし、MetaMaskウォレットをあなたのブラウザに設定します。
すでに別のウォレットをお持ちの場合でも、今回はMetaMaskを使用してください。
✍️: MetaMask が必要な理由 ユーザーが、スマートコントラクトを呼び出すとき、イーサリアムアドレスと秘密鍵を備えたウォレットが必要となります。
- これは、認証作業のようなものです。
🙋♂️ 質問する
ここまでの作業で何かわからないことがある場合は、Discordの#ethereumで質問をしてください。
ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨
1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット
MetaMaskのダウンロードが完了したら次のレッスンに進みましょう 🎉