# ゼロからNFT分散化取引プラットフォームを構築するERC-721プロトコルに従ったNFTに対して、どのように分散化取引を実現するのでしょうか?現在の主流なNFT取引方法はオーダーブック方式を採用しており、商品を棚に陳列するのに似ていて、買い手が価格が適切だと感じれば購入できます。本記事では、スマートコントラクトの作成とシンプルなフロントエンドページを通じて、基本的なNFT分散化取引プラットフォームを実現します。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-5d391cb28a9a6eafd3ef56f39b0dc5bc)## NFT取引プラットフォームの基本機能基本的なNFT取引プラットフォームは、以下の機能を備えているべきです:1. NFTを上場: 売り手は価格を設定してNFTを上場できます2. NFTの購入: 購入者は定価で上架されているNFTを購入できます3. 手数料の徴収: プラットフォームは取引価格から一定の割合の手数料を抽出することができます。### にNFTを上場しますNFTの上架のプロセスは次のとおりです:1. 売り手は上場するNFTを選択し、価格を設定します。2. 売り手は取引契約を通じてそのNFTを操作することができます。3. コントラクトの上場メソッドを呼び出し、上場情報を記録する### NFTを購入するNFTを購入するプロセスは以下の通りです:1. バイヤーは購入したいNFTを選択します。2. コントラクトの購入メソッドを呼び出す3. 契約は買い手の資金を売り手に移し、同時にNFTを買い手に移します。! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-65746508ae31b6e3e418c31b6e8bcdc2)## 取引プラットフォーム### 1. テスト用NFTを作成するRemixを使用してERC-721プロトコルのNFTコントラクトを迅速にデプロイしてテストすることができます。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-f6f730a4e82de02e49d30d9089e8716e)### 2. 取引契約を書く取引契約は以下の主要なメソッドを実装する必要があります:#### 2.1 NFTを上場するソリディティ関数 listNFT(address nftAddress, uint256 tokenId, uint256 price) public { NFTの所有権を確認する レコード リスト情報 // 上架イベントをトリガーする}#### 2.2 NFTを購入するソリディティ関数 purchaseNFT(address nftAddress, uint256 tokenId) public payable { NFTのリスティング情報を取得する // 手数料を計算して差し引く // NFTを買い手に移転する // 購入イベントをトリガーする }#### 2.3 上架をキャンセルソリディティ関数 cancelListing(address nftAddress, uint256 tokenId) public { 操作のアクセス許可を確認する // 上場ステータスを無効に設定 // キャンセルイベントをトリガーする}#### 2.4 手数料の引き出しソリディティ関数 withdrawFees() public onlyOwner { // コントラクト内の手数料を移転する}! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-b6b3dc59b2ca9328bb852240a2181119)### 3. フロントエンドインターフェースの開発以下のツールを使用してフロントエンドを開発します:- Ant Design Web3:ウォレット接続とNFTディスプレイ用- Wagmi:ウォレットと対話するために使用される- Next.js + Vercel:プロジェクトをデプロイするフロントエンドには以下の主要なページが含まれています:- Mint:テストNFTを作成するために使用されます- 購入:NFT取引市場では、上場しているNFTを購入できます- ポートフォリオ: ユーザーのNFTを管理し、上架と下架ができます#### 3.1 ウォレットを接続するAnt Design Web3の接続コンポーネントを使用して、ウォレット接続機能を実現します。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-8dc32f1a83e46e857340f9841df2c7f5)#### 3.2 ミントページNFTコントラクトのmintメソッドを呼び出してテスト用NFTを作成します。! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-64251e5648f68085d608a40fe42097c4)#### 3.3 ポートフォリオページ- ユーザーが所有しているNFTを取得する- NFTが上架されているかどうかを判断する- NFTの上場および上場廃止機能の実装! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-b47304559c5b8978028d581df19049c8)#### 3.4 購入ページ - 上架されているすべてのNFTを表示する- 購入機能の実装! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-4dc46af090a3d3987626b915c0d5f1ac)これにより、基本的なNFT分散化取引プラットフォームが完成しました。これをVercelにデプロイしてテスト使用できます。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-4e5e1ba70137403b4ea0e0503378e14a)! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-56f66de1a4bb30af91363bd5cc567e40)! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-a11e2cb9eb62433a03adcf2abd7b56b5)! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-0a338541b5f8b2aa130fb03a46027c47)! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-6d344484abad011d83b96ff377ffae1f)
NFT分散化取引プラットフォームの構築:スマートコントラクトからフロントエンドインターフェースまで
ゼロからNFT分散化取引プラットフォームを構築する
ERC-721プロトコルに従ったNFTに対して、どのように分散化取引を実現するのでしょうか?現在の主流なNFT取引方法はオーダーブック方式を採用しており、商品を棚に陳列するのに似ていて、買い手が価格が適切だと感じれば購入できます。本記事では、スマートコントラクトの作成とシンプルなフロントエンドページを通じて、基本的なNFT分散化取引プラットフォームを実現します。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-5d391cb28a9a6eafd3ef56f39b0dc5bc.webp)
NFT取引プラットフォームの基本機能
基本的なNFT取引プラットフォームは、以下の機能を備えているべきです:
にNFTを上場します
NFTの上架のプロセスは次のとおりです:
NFTを購入する
NFTを購入するプロセスは以下の通りです:
! Web3初心者シリーズ:NFT DEXをゼロから実装する
取引プラットフォーム
1. テスト用NFTを作成する
Remixを使用してERC-721プロトコルのNFTコントラクトを迅速にデプロイしてテストすることができます。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-f6f730a4e82de02e49d30d9089e8716e.webp)
2. 取引契約を書く
取引契約は以下の主要なメソッドを実装する必要があります:
2.1 NFTを上場する
ソリディティ 関数 listNFT(address nftAddress, uint256 tokenId, uint256 price) public { NFTの所有権を確認する レコード リスト情報
// 上架イベントをトリガーする }
2.2 NFTを購入する
ソリディティ 関数 purchaseNFT(address nftAddress, uint256 tokenId) public payable { NFTのリスティング情報を取得する // 手数料を計算して差し引く // NFTを買い手に移転する // 購入イベントをトリガーする
}
2.3 上架をキャンセル
ソリディティ 関数 cancelListing(address nftAddress, uint256 tokenId) public { 操作のアクセス許可を確認する // 上場ステータスを無効に設定 // キャンセルイベントをトリガーする }
2.4 手数料の引き出し
ソリディティ 関数 withdrawFees() public onlyOwner { // コントラクト内の手数料を移転する }
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3. フロントエンドインターフェースの開発
以下のツールを使用してフロントエンドを開発します:
フロントエンドには以下の主要なページが含まれています:
3.1 ウォレットを接続する
Ant Design Web3の接続コンポーネントを使用して、ウォレット接続機能を実現します。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3.2 ミントページ
NFTコントラクトのmintメソッドを呼び出してテスト用NFTを作成します。
! Web3初心者シリーズ:NFT DEXをゼロから実装する
3.3 ポートフォリオページ
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3.4 購入ページ
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-4dc46af090a3d3987626b915c0d5f1ac.webp)
これにより、基本的なNFT分散化取引プラットフォームが完成しました。これをVercelにデプロイしてテスト使用できます。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
! Web3スターターシリーズ:NFT DEXをゼロから実装する
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-a11e2cb9eb62433a03adcf2abd7b56b5.webp)
! Web3スターターシリーズ:NFT DEXをゼロから実装する
! Web3初心者シリーズ:NFT DEXをゼロから実装する