# ゼロからのNFT分散化取引プラットフォームの構築ERC-721プロトコルのNFTにとって、分散化取引は重要な課題です。現在、主流のNFT取引プラットフォームは多くが注文方式を採用しており、商品が棚に陳列されているように買い手が選ぶことができます。本記事では、スマートコントラクトとシンプルなフロントエンドを通じてNFTの分散化取引を実現し、学習参考のために提供します。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-5d391cb28a9a6eafd3ef56f39b0dc5bc)## NFTの概要NFTは非代替性トークンを意味し、各Tokenは唯一無二です。それはERC-721プロトコルに従い、通常はウォレット内で異なる画像形式で表示され、唯一のIDで識別されます。NFTの特性により、ERC-20トークンのように価格曲線で価格を設定することはできず、オーダーブック方式で取引されます。! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-65746508ae31b6e3e418c31b6e8bcdc2)## オーダーブック取引モデルオーダーブック取引には主に2種類あります:1. 価格設定: 売り手が価格を設定し、買い手が適切だと感じたら購入できる2. 求購単:バイヤーが求購注文を出し、サプライヤーが価格に同意すれば販売できます。この記事では、価格設定オーダーモードについて重点的に説明します。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-f6f730a4e82de02e49d30d9089e8716e)## NFT DEXのコア機能基本的なNFT DEXは、以下の機能を含むべきです:1. 商品の上架: 売り手がNFTの価格を設定して上架します2. 商品購入:買い手は定価でNFTを購入します。3.取引手数料:取引価格に応じて一定の割合が請求されます### 上場プロセス1. フロントエンド: ユーザーがNFTを選択し、価格を設定する2. 契約:ユーザーはNFTの操作を契約に委任します契約は、上架商品価格のマッピング表を維持する必要があります。### 購入プロセス1. フロントエンド:ユーザーがNFTを選択して購入をクリックする2. 契約: バイヤーの資金を売り手に移転し、NFTをバイヤーに転送する! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-b6b3dc59b2ca9328bb852240a2181119)## NFT DEXの実装### 1. テストNFTを作成するRemixを使ってERC-721プロトコルのNFTコントラクトを迅速に展開できます。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-8dc32f1a83e46e857340f9841df2c7f5)### 2. スマートコントラクトを作成する主に以下の方法を含む:#### 2.1 売り手がNFTを出品する1. NFTの所有権を確認する2. リスティングレコードを追加する 3. 上場イベントをトリガーする! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-64251e5648f68085d608a40fe42097c4)#### 2.2 バイヤーがNFTを購入1. NFTの上場データを読み取る2. 手数料を計算し、差し引く3. NFTを買い手に転送する4. 購入イベントをトリガーする! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-b47304559c5b8978028d581df19049c8)#### 2.3 上場を取り消すリストされたレコードの isActive フィールドを false に設定します! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-4dc46af090a3d3987626b915c0d5f1ac)#### 2.4 手数料の引き出し契約から蓄積された手数料を引き出す! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-4e5e1ba70137403b4ea0e0503378e14a)### 3. フロントエンド開発ツールを使用する:- Ant Design Web3: ウォレット接続 & NFT ショーケース- Wagmi:ウォレットインタラクション- Nextjs + Vercel: デプロイ主要ページ:- Mint:テストNFTを鋳造する- 購入:NFTマーケットプレイス- ポートフォリオ:個人のNFTを管理! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-56f66de1a4bb30af91363bd5cc567e40)#### 3.1 ウォレット接続Ant Design Web3の接続コンポーネントを使用して実装します。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-a11e2cb9eb62433a03adcf2abd7b56b5)#### 3.2 ミントページコントラクトのmintメソッドを呼び出してNFTを鋳造します。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-0a338541b5f8b2aa130fb03a46027c47)#### 3.3 ポートフォリオページユーザーのNFTを表示し、上架と下架の操作をサポートします。上場する前に、NFTを契約に承認する必要があります。! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-6d344484abad011d83b96ff377ffae1f)#### 3.4 購入ページすべての上場NFTを表示し、購入操作をサポートします。購入時にpurchaseNFTメソッドを呼び出し、ETHを支払います。完了後、Vercelプラットフォームにデプロイできます。上記のステップを通じて、基本機能を備えたNFT分散化プラットフォームを実現しました。これにより、より複雑なNFT取引システムのさらなる開発の基盤が築かれました。
手取り足取りNFT分散化取引プラットフォームを構築する方法を教えます
ゼロからのNFT分散化取引プラットフォームの構築
ERC-721プロトコルのNFTにとって、分散化取引は重要な課題です。現在、主流のNFT取引プラットフォームは多くが注文方式を採用しており、商品が棚に陳列されているように買い手が選ぶことができます。本記事では、スマートコントラクトとシンプルなフロントエンドを通じてNFTの分散化取引を実現し、学習参考のために提供します。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-5d391cb28a9a6eafd3ef56f39b0dc5bc.webp)
NFTの概要
NFTは非代替性トークンを意味し、各Tokenは唯一無二です。それはERC-721プロトコルに従い、通常はウォレット内で異なる画像形式で表示され、唯一のIDで識別されます。NFTの特性により、ERC-20トークンのように価格曲線で価格を設定することはできず、オーダーブック方式で取引されます。
! Web3初心者シリーズ:NFT DEXをゼロから実装する
オーダーブック取引モデル
オーダーブック取引には主に2種類あります:
この記事では、価格設定オーダーモードについて重点的に説明します。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-f6f730a4e82de02e49d30d9089e8716e.webp)
NFT DEXのコア機能
基本的なNFT DEXは、以下の機能を含むべきです:
上場プロセス
契約は、上架商品価格のマッピング表を維持する必要があります。
購入プロセス
! Web3スターターシリーズ:NFT DEXをゼロから実装する
NFT DEXの実装
1. テストNFTを作成する
Remixを使ってERC-721プロトコルのNFTコントラクトを迅速に展開できます。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
2. スマートコントラクトを作成する
主に以下の方法を含む:
2.1 売り手がNFTを出品する
! Web3初心者シリーズ:NFT DEXをゼロから実装する
2.2 バイヤーがNFTを購入
! Web3スターターシリーズ:NFT DEXをゼロから実装する
2.3 上場を取り消す
リストされたレコードの isActive フィールドを false に設定します
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-4dc46af090a3d3987626b915c0d5f1ac.webp)
2.4 手数料の引き出し
契約から蓄積された手数料を引き出す
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3. フロントエンド開発
ツールを使用する:
主要ページ:
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3.1 ウォレット接続
Ant Design Web3の接続コンポーネントを使用して実装します。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-a11e2cb9eb62433a03adcf2abd7b56b5.webp)
3.2 ミントページ
コントラクトのmintメソッドを呼び出してNFTを鋳造します。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3.3 ポートフォリオページ
ユーザーのNFTを表示し、上架と下架の操作をサポートします。 上場する前に、NFTを契約に承認する必要があります。
! Web3初心者シリーズ:NFT DEXをゼロから実装する
3.4 購入ページ
すべての上場NFTを表示し、購入操作をサポートします。 購入時にpurchaseNFTメソッドを呼び出し、ETHを支払います。
完了後、Vercelプラットフォームにデプロイできます。
上記のステップを通じて、基本機能を備えたNFT分散化プラットフォームを実現しました。これにより、より複雑なNFT取引システムのさらなる開発の基盤が築かれました。