Road to Web3 第七周创建一个NFT市场

原文地址：https://docs.alchemy.com/docs/how-to-build-an-nft-marketplace-from-scratch

请大家关注我的推特(twitter.com/SoullessL)和Link3(link3.to/caishen)，获取最新的Alchemy小白教程。教程汇总链接(jayjiang.gitbook.io/web3book/alchemy-road-to-web3)。

Metamask 添加Alchemy的测试网络

大部分人应该已经添加过了，如果已经添加可以忽略

测试网络信息如下

Network Name: Goerli Test Network

RPC base URL: https://eth-goerli.alchemyapi.io/v2/{INSERT YOUR API KEY}

Chain ID: 5

Block Explorer URL: https://goerli.etherscan.io/

Symbol (Optional): ETH

准备工作

进入Alchemy官方的Github地址(https://github.com/OMGWINNING/NFT-Marketplace-Tutorial)，点击Fork按钮，把官方的代码复制到你的Github里。

然后系统就会自动转跳到你的Github页面，像截图里的地方会是你的github名字，我们记录下自己项目的GitHub浏览器地址。

代码修改

然后通过Gitpod打开项目，在浏览器输入 https://gitpod.io/#https://github.com/你的github名字/NFT-Marketplace-Tutorial 开打项目。

然后等待出现下面的窗口，你可以点击这个Open Browser，来预览我们项目。

然后会出来这样一个窗口，就说明我们的项目加载好了，我图里的图片还没完全加载完，可以忽略。

然后我们回到我们的Terminal窗口，同时按住Ctrl+C，取消程序的运行。

然后我们输入命令 npm install dotenv --save 安装一下dotenv环境

然后在Explorer窗体的空白处点击鼠标右键，弹出一个窗口，选择New File。

文件名字为.env，里面的内容为

REACT_APP_ALCHEMY_API_URL="" REACT_APP_PRIVATE_KEY="" 请记得把””替换成Achemy的Goerli网络的Https部分，而””需要替换成你的Metamask账号的的私钥（这边最好使用一个新的账号，防止私钥泄密，这边使用的账号可以和你领取NFT的账号不一样，所以完全可以使用新的好账号，记得转点测试的ETH到新账号当手续费就行。用完最后记得把你的私钥删除，更安全一点）。然后我们进入 https://pinata.cloud 注册一个新的账号，然后进入https//app.pinata.cloud/keys，点击New Key，勾选Admin，输入Key name，点击Create Key，创建一个新的Key。在弹出的窗口里，记录对应的 API Key 和 API Secret。 REACT_APP_PINATA_KEY="<YOUR_PINATA_KEY>" REACT_APP_PINATA_SECRET="<YOUR_PINATA_SECRET>" 然后把pinata对应的KEY和SECRET替换""和""，并添加到.env文件里。最终.env文件如上图所示，但是对应的Key都是你自己的。贴上整体的.env文件内容，方便大家替换。 REACT_APP_ALCHEMY_API_URL="<YOUR_API_URL>" REACT_APP_PRIVATE_KEY="<YOUR_PRIVATE_KEY>" REACT_APP_PINATA_KEY="<YOUR_PINATA_KEY>" REACT_APP_PINATA_SECRET="<YOUR_PINATA_SECRET>" 然后我们找到hardhat.config.js文件，把里的内容替换为 require("@nomiclabs/hardhat-waffle"); require("@nomiclabs/hardhat-ethers"); const fs = require('fs'); // const infuraId = fs.readFileSync(".infuraid").toString().trim() || ""; require('dotenv').config(); task("accounts", "Prints the list of accounts", async (taskArgs, hre) => { const accounts = await hre.ethers.getSigners(); for (const account of accounts) { console.log(account.address); } }); module.exports = { networks: { goerli: { url: process.env.REACT_APP_ALCHEMY_API_URL, accounts: [process.env.REACT_APP_PRIVATE_KEY] } }, solidity: { version: "0.8.4", settings: { optimizer: { enabled: true, runs: 200 } } } }; 打开Contracts文件夹下面的NFTMarketplace.sol 文件，替换全部内容为 //SPDX-License-Identifier: Unlicense pragma solidity ^0.8.0; import "hardhat/console.sol"; import "@openzeppelin/contracts/utils/Counters.sol"; import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol"; import "@openzeppelin/contracts/token/ERC721/ERC721.sol"; contract NFTMarketplace is ERC721URIStorage { using Counters for Counters.Counter; //_tokenIds variable has the most recent minted tokenId Counters.Counter private _tokenIds; //Keeps track of the number of items sold on the marketplace Counters.Counter private _itemsSold; //owner is the contract address that created the smart contract address payable owner; //The fee charged by the marketplace to be allowed to list an NFT uint256 listPrice = 0.01 ether; //The structure to store info about a listed token struct ListedToken { uint256 tokenId; address payable owner; address payable seller; uint256 price; bool currentlyListed; } //the event emitted when a token is successfully listed event TokenListedSuccess ( uint256 indexed tokenId, address owner, address seller, uint256 price, bool currentlyListed ); //This mapping maps tokenId to token info and is helpful when retrieving details about a tokenId mapping(uint256 => ListedToken) private idToListedToken; constructor() ERC721("NFTMarketplace", "NFTM") { owner = payable(msg.sender); } function updateListPrice(uint256 _listPrice) public payable { require(owner == msg.sender, "Only owner can update listing price"); listPrice = _listPrice; } function getListPrice() public view returns (uint256) { return listPrice; } function getLatestIdToListedToken() public view returns (ListedToken memory) { uint256 currentTokenId = _tokenIds.current(); return idToListedToken[currentTokenId]; } function getListedTokenForId(uint256 tokenId) public view returns (ListedToken memory) { return idToListedToken[tokenId]; } function getCurrentToken() public view returns (uint256) { return _tokenIds.current(); } //The first time a token is created, it is listed here function createToken(string memory tokenURI, uint256 price) public payable returns (uint) { //Increment the tokenId counter, which is keeping track of the number of minted NFTs _tokenIds.increment(); uint256 newTokenId = _tokenIds.current(); //Mint the NFT with tokenId newTokenId to the address who called createToken _safeMint(msg.sender, newTokenId); //Map the tokenId to the tokenURI (which is an IPFS URL with the NFT metadata) _setTokenURI(newTokenId, tokenURI); //Helper function to update Global variables and emit an event createListedToken(newTokenId, price); return newTokenId; } function createListedToken(uint256 tokenId, uint256 price) private { //Make sure the sender sent enough ETH to pay for listing require(msg.value == listPrice, "Hopefully sending the correct price"); //Just sanity check require(price > 0, "Make sure the price isn't negative"); //Update the mapping of tokenId's to Token details, useful for retrieval functions idToListedToken[tokenId] = ListedToken( tokenId, payable(address(this)), payable(msg.sender), price, true ); _transfer(msg.sender, address(this), tokenId); //Emit the event for successful transfer. The frontend parses this message and updates the end user emit TokenListedSuccess( tokenId, address(this), msg.sender, price, true ); } //This will return all the NFTs currently listed to be sold on the marketplace function getAllNFTs() public view returns (ListedToken[] memory) { uint nftCount = _tokenIds.current(); ListedToken[] memory tokens = new ListedTokenUnsupported embed; uint currentIndex = 0; //at the moment currentlyListed is true for all, if it becomes false in the future we will //filter out currentlyListed == false over here for(uint i=0;i<nftCount;i++) { uint currentId = i + 1; ListedToken storage currentItem = idToListedToken[currentId]; tokens[currentIndex] = currentItem; currentIndex += 1; } //the array 'tokens' has the list of all NFTs in the marketplace return tokens; } //Returns all the NFTs that the current user is owner or seller in function getMyNFTs() public view returns (ListedToken[] memory) { uint totalItemCount = _tokenIds.current(); uint itemCount = 0; uint currentIndex = 0; //Important to get a count of all the NFTs that belong to the user before we can make an array for them for(uint i=0; i < totalItemCount; i++) { if(idToListedToken[i+1].owner == msg.sender || idToListedToken[i+1].seller == msg.sender){ itemCount += 1; } } //Once you have the count of relevant NFTs, create an array then store all the NFTs in it ListedToken[] memory items = new ListedTokenUnsupported embed; for(uint i=0; i < totalItemCount; i++) { if(idToListedToken[i+1].owner == msg.sender || idToListedToken[i+1].seller == msg.sender) { uint currentId = i+1; ListedToken storage currentItem = idToListedToken[currentId]; items[currentIndex] = currentItem; currentIndex += 1; } } return items; } function executeSale(uint256 tokenId) public payable { uint price = idToListedToken[tokenId].price; address seller = idToListedToken[tokenId].seller; require(msg.value == price, "Please submit the asking price in order to complete the purchase"); //update the details of the token idToListedToken[tokenId].currentlyListed = true; idToListedToken[tokenId].seller = payable(msg.sender); _itemsSold.increment(); //Actually transfer the token to the new owner _transfer(address(this), msg.sender, tokenId); //approve the marketplace to sell NFTs on your behalf approve(address(this), tokenId); //Transfer the listing fee to the marketplace creator payable(owner).transfer(listPrice); //Transfer the proceeds from the sale to the seller of the NFT payable(seller).transfer(msg.value); } //We might add a resell token function in the future //In that case, tokens won't be listed by default but users can send a request to actually list a token //Currently NFTs are listed by default } 然后我们打开Terminal，在里面输入 npx hardhat run scripts/deploy.js --network goerli 来部署我们的智能合约到goerli 测试网。然后我们可以到src文件夹下找到Marketplace.json文件，里面的address就是我们部署的合约地址。然后我们可以通过

原文地址：https://docs.alchemy.com/docs/how-to-build-an-nft-marketplace-from-scratch

请大家关注我的推特(twitter.com/SoullessL)和Link3(link3.to/caishen)，获取最新的Alchemy小白教程。教程汇总链接(jayjiang.gitbook.io/web3book/alchemy-road-to-web3)。