thirdwebで作成したコントラクトに、My JSON Serverにホストしたメタデータを設定してみよう！
こんにちは、CryptoGamesの高橋です。
本日は、こちらの公式のブログを元に進めていきます。
また、あらかじめthirdwebの「NFT Drop」でコントラクトの作成を行っておいてください。
やり方が不明でしたら、こちらのハンズオンもご参照ください。
1.開発準備を行う
まずは、こちらのGithubからGit cloneを行います。
下のように、できました。
次に、フォルダを移動した上で、下のどちらかで、dotenvをインストールします。
npm i @thirdweb-dev/sdk dotenv # npm
yarn add @thirdweb-dev/sdk dotenv # yarn
下のようにできました。
2.メタデータを設定する
次に、metadataを確認しましょう。
下のように、「db.json」に入れて、Githubに登録することで、「My JSON Server」で取得ができるようになります。
3.「.env」ファイルを作成する
「.env」ファイルを作り、秘密鍵を入れます。
「.gitignore」ファイルに「.env」が入っていることを確認してください。
4.Githubに登録する
現在、下のように、.git/configのoriginにthirdwebが入っています。
自分のGithubに登録したいので、次のようにして、消していきます。
git remote rm origin
Githubで、下のように新しいレポジトリを作成します。
このようにできました。
では、次のコマンドで、Githubに登録していきます。
git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin <YOUR_REPO_URL_HERE>
git push -u origin main
次のように、実行しました。
Githubにも、このように登録されました。
5.My JSON Serverを確認する
すると、下のURLを確認すると、My JSON Server上にホストされていることがわかります。
https://my-json-server.typicode.com/<your_username>/<your_repo_name>/nfts/0
下のようになっています。
6.スクリプトを実行する
では、あらかじめ作成しておいた、コントラクトのアドレスをコピーします。
下のように、getContract内にアドレスを設定します。
ここで、createBatch関数も見てみましょう。
下のように、メタデータを設定しています。
これで、完了です。
では、下のコマンドでスクリプトを実行してみましょう。
node scripts/upload-nfts.mjs
これで、下のように、メタデータが反映されました。
今回は以上です。
ぜひやってみてください。
Discussion