私たちの最初のNFTマーケットプレイスを構築すること🖖

GMの人々!2022年😻, WEB 3に乗り込む年ある朝、私たちは、HashNodeが2030年に最初のHackathonをウェブウェブ上で落としたことに気がつきました.なぜ私たちがこのハッカーのために調理したものを通り抜けるのを待つのか.
その前に、あなたがウェブ3に新しいならば、あなたはブロックチェーン、NFTとNFT市場とは何かを疑問に思わなければなりませんか?私があなたの背中を得たと心配しないでください.
⛓️ どのようなブロックチェーンですか?
まあ1つのライナーでブロックを説明するのは難しいですが、試してみましょう

Blockchain is a public database(ledger)📒 that is updated and shared across many computers(nodes) in a network.

👀 NFTとは
NFTは非資金のトークンを表します.それは正しい意味をなさない待って?私は、私が非fungibleがユニークであると言ったとき、私にそれを説明させたということを知っています.
Bitcoinは、あなたが別の1つのトークンを交換するとき、あなたは同じになったので、それは前のものとは異なります.
しかし、我々が非資金を言うとき、それはあなたが別の非資金的なトークンでその方法で全くユニークである1つのトークンを交換するならば、あなたは異なる種類を得ました.
🤔 NFT市場とは何か
市場は、クリエイターやコレクターの市場や会議のポイントとして機能する一般的なプラットフォームです.クリエイターは市場に来て、彼らのNFsを販売とコレクターにリストします.
🤷‍♀️問題
過去には、デジタルコンテンツの起源を確認することはほとんどできませんでした、1つの伝統的なオークションの物理的なコンテンツを確認することができるように芸術の与えられた作品は、実際には、元のレプリカではないです.
我々がすでに知っているように、ブロックチェーンは分散化されて、変更されることができない公共の元帳の取引履歴を含んでいます.そして、それはそれ自身の方法でどんなユニークなデジタル内容もユニークにする目的を提供します.素人の方法では、ブロック上のユニークなデジタルコンテンツの時制化は、NFTを鋳造していると言うことができます.
私たちは、ソリティアコードの1行を書くことなく、分散市場のアプリケーションを構築する場合は、何のような素晴らしい柔軟性を書いていないことを考えている、私はあなたに強固な素晴らしい契約を書くために使用される厳密に入力されたプログラミング言語です教えてみましょう.これは、新しく開発された言語を具体的にスマート契約書を書いて、Ethereumネットワーク上に展開します.私たちの多くは、書くことに非常に快適ではありません👩🏼‍💻スマート契約と粘り強さとNFTのmintingまたは別の目的のために独自のスマート契約を書くためのすべての基本的かつ重要なコンポーネントを理解する.
次に、どのような人が契約書を作成する必要はありませんが、まだ驚くべきWeb 3🙇‍♂️. (🥁ドラムロールをお願いします.ここではThirdwebが来る.
🌐サードウェブ
ThirdWebは、スマート契約、SDKを提供するポータルであり、UIコンポーネントは、クリエイター、開発者などは、プロジェクト/アプリケーションに統合することができます.それはあなたがすべてのweb 3関連ツールを取得することができますし、素晴らしいdappを構築開始場所です.
ThirdWeb SDK、プロジェクト、およびモジュールを使用して、我々はDAPPのバックエンドの部分に多くの注意を払う必要はありませんでした.我々は、フロントエンドの開発の初心者である誰にとっても完全に統合に焦点を当てるだけです.
💡インスピレーション
我々は、OpenSea、Raribleのような驚くべきNFT市場に触発されました.
⚡そこが難解なところだ
さて、ArcaneはNFT市場であり、NFTに彼のデジタルコンテンツを彼女に任せることができ、コレクターを購入させることができる.
live demo
我々は、暗号財布を持つことから始めます.我々は、Metamaskをインストールすることをお勧めします🦊

我々はCrypto Walletを通してThirdWebにログインします.そして、我々の市場のためにプロジェクトとモジュールをつくるネットワークとしてムンバイを設定します.
我々は、NFT、現在のアドレスでMarketplaceモジュールを作成しました.いくつかの許可を設定した後、我々はThirdWeb SDK経由でスマート契約を使用する準備が整いました.
NextJSアプリケーションでのTordWeb SDKのインストール.

//Instantiate 3rdweb SDK

 const rpcUrl = "https://rpc-mumbai.maticvigil.com";

 const privateKey = process.env.NEXT_PUBLIC_PRIVATE_KEY;

const wallet = new ethers.Wallet(

    privateKey,

    ethers.getDefaultProvider(rpcUrl)

  );

const market = new ThirdwebSDK(wallet).getMarketplaceModule(

    MARKETPLACE_ADDRESS

  );

NFTモジュールのアドレスを必要とし、必要な市場モジュールのアドレスをリスティングし、購入するためにNFTを使用している間に使用するモジュールを定義します.

// assign the smart contract address

const NFT_MODULE_ADDRESS = "0x0C8fe5019D3B3BaC3B9e0878080C898518E02060";

// Instantiate NFT Collection module

 const nft = new ThirdwebSDK(wallet).getNFTModule(NFT_MODULE_ADDRESS);

今すぐあなたのデジタル資産を別のアドレスに造る時です

// Minting the NFT asynchronously

import { ThirdwebSDK } from "@3rdweb/sdk";

import { ethers } from "ethers";

export default async function mint(req, res) {

  const rpcUrl = "https://rpc-mumbai.maticvigil.com";

const privateKey = process.env.NEXT_PUBLIC_PRIVATE_KEY;

const NFT_MODULE_ADDRESS = "0x0C8fe5019D3B3BaC3B9e0878080C898518E02060";

const { account, name, decription, image } = await req.body;

  console.log(req.body);

  const wallet = new ethers.Wallet(

    privateKey,

    ethers.getDefaultProvider(rpcUrl)

  );

// initialize the SDK and get the NFT Collection module

  const nft = new ThirdwebSDK(wallet).getNFTModule(NFT_MODULE_ADDRESS);

  await nft

    .mintTo(account, {

      name: name,

      decription: decription,

      image: image,

    })

    .then((metadata) => {

      console.log(metadata);

      res.send(JSON.stringify(metadata));

    })

    .catch((e) => console.log(e));

}

リストのために、私たちはモジュールアドレスの両方を必要とします.

// Declaring the NFT Collection module address

 const NFT_MODULE_ADDRESS = "0x0C8fe5019D3B3BaC3B9e0878080C898518E02060";

// Declaring the MarketPlace  module address

  const MARKETPLACE_ADDRESS = "0x229b1f789506dbea2052f8423a780b1be1c16f21";

// Initialize market module by passing in the module address

const market = new ThirdwebSDK(wallet).getMarketplaceModule(

    MARKETPLACE_ADDRESS

  );

あなたは市場であなたの鋳造nftを一覧表示できます

// the listingId of the listing you want to fetch data for

import { ThirdwebSDK } from "@3rdweb/sdk";

import { ethers } from "ethers";

export default async function list(req, res) {

const rpcUrl = "https://rpc-mumbai.maticvigil.com";

  const privateKey = process.env.NEXT_PUBLIC_PRIVATE_KEY;

const NFT_MODULE_ADDRESS = "0x0C8fe5019D3B3BaC3B9e0878080C898518E02060";

  const MARKETPLACE_ADDRESS = "0x229b1f789506dbea2052f8423a780b1be1c16f21";

 const TOKEN_ADDRESS = "0x0000000000000000000000000000000000000000";  //MATIC Mumbai token address

console.log(privateKey);

const { tokenOffer, tokenId } = await req.body;

console.log(req.body);

const wallet = new ethers.Wallet(

    privateKey,

    ethers.getDefaultProvider(rpcUrl)

  );

const market = new ThirdwebSDK(wallet).getMarketplaceModule(

    MARKETPLACE_ADDRESS

  );

await market

    .createDirectListing({

      assetContractAddress: NFT_MODULE_ADDRESS,

      buyoutPricePerToken: ethers.utils.parseUnits(tokenOffer, 18),

      currencyContractAddress: TOKEN_ADDRESS,

      startTimeInSeconds: Math.floor(Date.now() / 1000),

      listingDurationInSeconds: 60  60  24,

      tokenId: tokenId,

      quantity: 1,

    })

    .then((data) => {

      console.log(data);

      res.send(JSON.stringify(data));

    })

    .catch((error) => {

      console.log(error);

    });

}

🥳ウッ!我々は、デジタル資産を鋳造して、すべての行を書くことなく、多角形のブロックチェーンに記載されています✨.
今、我々はこの驚くべき市場を構築するために使用している技術のスタックを明らかにする時間です🙈
📚 使用済みスタック
フレームワークとサービス

NextJS -フロントエンド

のために

スタイリングのためにウェブサイト

Material UI - pre - buildスマート契約を得るために、

ライブラリ

thirdweb－Ethereumブロックチェーンおよびその生態系

との相互作用のために

ether.js -ブラウザとノードのためのHTTPベースのクライアントを約束します.JS

axios - IPFS実装のためのJavaScript HTTP RPC APIクライアントライブラリ.

👯‍♂️ チームと協力者
私はバックエンド、API/SDKの統合、およびWeb 3関連機能を扱うipfs-http-client✌️.
🚀 展開
全体のアプリはSneha Mauryaに展開されます.🏃🏽‍♀️ 行ってみてください.
🌐 リンクと資源

ライブデモ- Vercel

ギタブリポジトリリンク

ツイッターで我々に連絡してください
🤖 将来の可能性
当社のカスタム/既存の通貨トークンフォーム市場を使用して上場NFTを購入

鋳造されたNFsのためにロイヤリティを加える

.

我々のウェブサイトにアクセスするために、より多くの暗号化財布を加える

.

このブログはARCANEを使って掲載されます