# ゼロからNFT分散化取引プラットフォームを構築するERC-20トークンは特定のDEXを通じて分散化取引が可能ですが、ERC-721規格のNFTはどのように分散化取引を実現するのでしょうか？現在、主流のNFT取引所は多くが注文方式を採用しており、これは商品がスーパーマーケットの棚に並べられるようなものです。本記事では、スマートコントラクトとシンプルなフロントエンドページを通じてNFTの分散化取引を実現する方法を紹介します。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-5d391cb28a9a6eafd3ef56f39b0dc5bc)## NFT取引メカニズムNFT(非同質化トークン)はERC-721規格に従い、各トークンはユニークです。その特性により、ERC-20のように価格曲線で価格を設定することはできません。現在一般的な取引方法はオーダーブック形式です。注文書モードには主に2種類あります:1. 値付け注文: 売り手が価格を設定し、買い手がそれが適切だと感じた場合に購入することができます。2. 購買注文: バイヤーが購入注文を出し、売り手が価格が適切だと感じた場合、販売することができます一般的に、購入注文の価格は定価注文よりも低くなります。本記事では、定価注文の取引方法について紹介します。! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-65746508ae31b6e3e418c31b6e8bcdc2)## 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-f6f730a4e82de02e49d30d9089e8716e)## NFT DEXの実装### 1. NFTを作成するRemixを使用してERC-721プロトコルのNFTを迅速にデプロイすることも、既存のNFTを直接使用することもできます。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-b6b3dc59b2ca9328bb852240a2181119)### 2. 受託開発 主に以下の方法を含みます:#### 2.1 売り手がNFTを出品する1. NFTの所有権を確認する2. リスティングレコードを追加する 3. 上場イベントをトリガーする! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-8dc32f1a83e46e857340f9841df2c7f5)#### 2.2 バイヤーがNFTを購入1. NFTデータを読み取る2. 手数料を計算して差し引く3. NFTを買い手に転送する4. 購入イベントをトリガーする! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-64251e5648f68085d608a40fe42097c4)#### 2.3 上架をキャンセルリスト レコードの isActive フィールドを false に設定します! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-b47304559c5b8978028d581df19049c8)#### 2.4 手数料の引き出し契約中に累積された手数料を指定したアドレスに引き出す! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-4dc46af090a3d3987626b915c0d5f1ac)### 3. フロントエンド開発Ant Design Web3、Wagmi、Next.jsなどのツールを使用して開発。主に3つのページを含みます:- Mint:NFTを鋳造するためのテストに使用- 購入:NFTマーケットプレイス - ポートフォリオ: ユーザーのNFTを管理する! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-4e5e1ba70137403b4ea0e0503378e14a)#### 3.1 ウォレットを接続するAnt Design Web3コンポーネントを使用してウォレット接続を実現します。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-56f66de1a4bb30af91363bd5cc567e40)#### 3.2 ミントページコントラクトのmintメソッドを呼び出してテストNFTを鋳造します。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-a11e2cb9eb62433a03adcf2abd7b56b5)#### 3.3 ポートフォリオページユーザーのNFTを表示し、上架と下架の操作をサポートします。- ユーザーのNFTリストを取得- NFTの上場状況を判断する- 上架/下架コントラクトメソッドを呼び出す! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-0a338541b5f8b2aa130fb03a46027c47)#### 3.4 購入ページ上場しているすべてのNFTを表示し、購入操作をサポートします。- isAliveのNFTの展示 - purchaseNFTメソッドを呼び出して購入するフロントエンド開発が完了した後、Vercelなどのプラットフォームにデプロイできます。上記のステップを通じて、基本機能を備えたNFT分散化取引プラットフォームを実現しました。! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-6d344484abad011d83b96ff377ffae1f)
0から1へ：あなたのNFT分散化取引プラットフォームを構築する
ゼロからNFT分散化取引プラットフォームを構築する
ERC-20トークンは特定のDEXを通じて分散化取引が可能ですが、ERC-721規格のNFTはどのように分散化取引を実現するのでしょうか？現在、主流のNFT取引所は多くが注文方式を採用しており、これは商品がスーパーマーケットの棚に並べられるようなものです。本記事では、スマートコントラクトとシンプルなフロントエンドページを通じてNFTの分散化取引を実現する方法を紹介します。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-5d391cb28a9a6eafd3ef56f39b0dc5bc.webp)
NFT取引メカニズム
NFT(非同質化トークン)はERC-721規格に従い、各トークンはユニークです。その特性により、ERC-20のように価格曲線で価格を設定することはできません。現在一般的な取引方法はオーダーブック形式です。
注文書モードには主に2種類あります:
一般的に、購入注文の価格は定価注文よりも低くなります。本記事では、定価注文の取引方法について紹介します。
! Web3初心者シリーズ:NFT DEXをゼロから実装する
NFT DEXのコア機能
基本的なNFT DEXは以下の機能を含むべきです:
商品の上架プロセス
契約内でユーザーの出品商品の価格マップを維持する必要があります。
商品購入プロセス
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-f6f730a4e82de02e49d30d9089e8716e.webp)
NFT DEXの実装
1. NFTを作成する
Remixを使用してERC-721プロトコルのNFTを迅速にデプロイすることも、既存のNFTを直接使用することもできます。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
2. 受託開発
主に以下の方法を含みます:
2.1 売り手がNFTを出品する
! Web3スターターシリーズ:NFT DEXをゼロから実装する
2.2 バイヤーがNFTを購入
! Web3初心者シリーズ:NFT DEXをゼロから実装する
2.3 上架をキャンセル
リスト レコードの isActive フィールドを false に設定します
! Web3スターターシリーズ:NFT DEXをゼロから実装する
2.4 手数料の引き出し
契約中に累積された手数料を指定したアドレスに引き出す
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-4dc46af090a3d3987626b915c0d5f1ac.webp)
3. フロントエンド開発
Ant Design Web3、Wagmi、Next.jsなどのツールを使用して開発。
主に3つのページを含みます:
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3.1 ウォレットを接続する
Ant Design Web3コンポーネントを使用してウォレット接続を実現します。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3.2 ミントページ
コントラクトのmintメソッドを呼び出してテストNFTを鋳造します。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-a11e2cb9eb62433a03adcf2abd7b56b5.webp)
3.3 ポートフォリオページ
ユーザーのNFTを表示し、上架と下架の操作をサポートします。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3.4 購入ページ
上場しているすべてのNFTを表示し、購入操作をサポートします。
フロントエンド開発が完了した後、Vercelなどのプラットフォームにデプロイできます。
上記のステップを通じて、基本機能を備えたNFT分散化取引プラットフォームを実現しました。
! Web3初心者シリーズ:NFT DEXをゼロから実装する