メインコンテンツまでスキップ

lesson-3_GitHub連携

🐱 GitHub にプロジェクトをアップロードしよう​

コントラクトアドレスと ABI の設定​

ShieldコントラクトのアドレスとABIを直接記載していましたが、コントラクトアドレスは.env.localファイルから、ABIはビルド時に生成されるartifactsフォルダからそれぞれ参照するようにしましょう。

まずはpackages/clientフォルダ内に.env.localファイルを作成しましょう。

作成したファイルに、下記を記述しましょう。ADDRESS_OF_SHIELD_CONTRACTには自身のShieldコントラクトアドレスを設定してください。

NEXT_PUBLIC_CONTRACT_ADDRESS=ADDRESS_OF_SHIELD_CONTRACT

Section5 Lesson1でhardhat.config.tsを更新した際に、artifactsフォルダの生成先を../client/artifactsに設定したことを覚えていますか？ モノレポの動作確認でyarn contract compileを実行しているので、既にpackages/clientフォルダ内に生成されていることが確認できます。ABIはここからインポートするようにしましょう。

それでは、pages/index.tsxを更新しましょう。下記のimport文を追加して、contractAddressとabiを下記のように更新しましょう。

import ShieldArtifact from "@/artifacts/contracts/Shield.sol/Shield.json";

const contractAddress = process.env.NEXT_PUBLIC_CONTRACT_ADDRESS as string;
const abi = ShieldArtifact.abi;

.gitignore ファイルの設定​

GitHub上へアップロードしないファイルを指定するために、.gitignoreファイルを設定しましょう。

プロジェクトのルートに.gitignoreファイルを作成します。

下記をファイルに記載しましょう。

**/yarn-error.log*

# dependencies
**/node_modules

# chainIDE
**/.deps
**/.build

packages/clientフォルダの.gitignoreファイルに下記を追加しましょう。

# Hardhat files
artifacts

お疲れ様でした！ これでGitHubにアップロードするための準備が完了しました。では、実際にアップロードをしてみましょう。

GitHub にアップロード​

Git Managerを開き、「Create a new repo」を選択します。

OwnerがChainIDEのログインに使用した自身のGitHubアカウントであることを確認しましょう。Repository nameにはPolygon-Whitelist-NFTと入力し、「Create repository」をクリックします。

Git Manager上に、Commit & Push画面が表示されます。GitHubへプッシュを行うファイルを選択しましょう。.gitignoreファイルを設定しましたが、アップロードしたくないファイルが含まれていないかを確認することをお勧めします。ファイルを1つずつ確認しながら横にある「＋」でステージングを変更しても良いですし、全てのファイルを確認し終わったら一括でステージングを変更することもできます（CHANGESにカーソルを当てると＋ボタンが出現します）。

全てのファイルをステージングしたら、コミットメッセージを入力し、「Commit & Push」をクリックします。

自身のGitHubアカウントにアクセスをして、Polygon-Whitelist-NFTリポジトリにファイルがアップロードされていることを確認しましょう。

🤟 Vercel に Web アプリケーションをデプロイする​

Vercelにアプリケーションをデプロイする場合は、Vercel で Web アプリケーションをデプロイするを参考にしてみてください。

🎊 やったね！​

おめでとうございます！ ホワイトリストに登録されたユーザーだけがミントできるNFTコレクションのフルスタックプロジェクトが完成しました。web3の旅に向けて大きな一歩を踏み出しました。この達成感を心から共有します。

しかし、私が学生時代に授業後の宿題と向き合っていたように、今のあなたにもその挑戦を渡すかもしれません 😁。というわけで、少し休憩して、次の質問について考えてみてください：

  • Shieldコントラクトのmint関数は、オーナーがコントラクトをデプロイした後、ホワイトリストに登録されたユーザーが直接ミントできるようになっています。オーナーが許可を設定した後にのみ、ホワイトリストのユーザーがミントできるようにする方法はありますか？
  • Shieldコントラクトのmint関数は、ホワイトリストに登録されたユーザーごとのミントの数を制限していません。ユーザー 1人あたりのミント数を1回のみとするには、どのようにコードを修正したら良いですか？
  • ホワイトリストに登録されたユーザーがShieldコントラクトを通じてミントを行った後、全員にミントの許可を与えたい場合、コードはどのように設計すればよいですか?
  • Whitelistコントラクトは、ホワイトリストのアドレスを記録するためにマッピングを使用します。アドレスの数が1000を超えると、多くのガスを消費する可能性があります。これを解決するにはどうすればよいでしょうか？

これらの質問は少し難しいかもしれませんが、このコンテンツ内にヒントが含まれています。諦めずに取り組んでみてください。私は、あなたの知恵が解決策を見つける手助けをしてくれると信じています。もし困った時は、遠慮なく私たちをフォローしてください。これからのコンテンツで答えが明らかになるでしょう！

それでは！

🙋‍♂️ 質問する​

ここまでの作業で何かわからないことがある場合は、Discordの#polygonで質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の4点を記載してください ✨

1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット

🎫 NFT を取得しよう!​

NFTを取得する条件は、以下のようになります。

  1. MVPの機能がすべて実装されている（実装OK）

  2. WebアプリケーションでMVPの機能が問題なく実行される（テストOK）

  3. このページの最後にリンクされているProject Completion Formに記入する

  4. Discordの🔥｜completed-projectsチャンネルに、あなたのOpenSeaのリンクをシェアしてください 😉🎉 Discordに投稿する際に、追加実装した機能とその概要も教えていただけると幸いです!

プロジェクトを完成させていただいた方には、NFTをお送りします。

Project Completion Formはこちらです。