如何使用 JavaScript 创建 NFT

作者：阿德博拉·阿德尼兰✏️

2021 年 2 月，Figma 首席执行官 Dylan Fields以 750 万美元的价格出售了一件NFT 艺术品。同样，Twitter 联合创始人 Jack Dorsey 也将他在 Twitter 上的第一条推文以NFT 的形式出售，售价为 2,915,835.47 美元。

NFT（非同质化代币）是一项引人入胜的新技术，它以数字方式代表资产的所有权。在本教程中，我们将介绍一些重要的背景信息，设置第三方服务，并最终编写我们自己的 NFT 并将其部署到 Ropsten 测试网。

让我们开始吧！

背景信息

在创建我们自己的 NFT 之前，让我们先了解一下使 NFT 发挥作用的技术和特性。

可替代与不可替代

可互换性本质上是指用一件物品交换同等价值的类似物品的能力。比如一张五美元的钞票。它在世界任何地方的面值都是一样的。你可以用五张一美元的钞票交换一张五美元的钞票，而且它们的价值始终相同。

另一方面，非同质化物品彼此之间价值不同。例如，一幅蒙娜丽莎的复制品，尽管在各个方面都与原作完全相同，但其价值并不相等。非同质化物品本质上是独一无二的，不能被视为与任何其他物品等同。

一件物品既可以是可替代的，也可以是不可替代的。例如，虽然飞机经济舱的两个座位价格相同，但一个人可能会对靠窗的座位赋予情感价值，从而降低其他座位对他的价值。

区块链

区块链是一个公共数据库或数字账本，用于记录交易。它会被复制到构成区块链的多个计算机系统上。我们将在以太坊区块链上构建我们的 NFT。

铸造 ERC721 代币

铸币是指首次创建某个事物的过程，或者在我们的情况下，是在区块链上发布我们ERC721 代币的唯一实例。ERC -721是创建 NFT 的标准，ERC721 代币是发布到以太坊区块链的数字内容的唯一表示。没有两个代币是完全相同的，因此每次使用相同的代码块铸造一个新代币时，都会生成一个新的地址。

智能合约和 NFT

智能合约是部署到区块链上并按原样运行的简单程序，这意味着它们不受用户控制。我们可以使用智能合约来创建和跟踪我们的代币。

NFT 是一种符合 ERC-721 标准并驻留在公链上的数字数据存储。NFT 包含其所代表资产的信息或数据，这些资产可以是数字商品（例如推文），也可以是实体商品（例如连帽衫）。

如果智能合约实现了 ERC-721 标准，则可以将其视为 NFT，而 NFT 是智能合约的一个实例。每次我们创建新的 NFT 时，都会使用已部署到区块链上的智能合约代码。

公共网络：主网与测试网

以太坊使用多个网络。用于生产的网络通常称为主网 (Mainnet)，而用于测试的其他网络称为测试网 (Testnet)。我们将把创建的 NFT 部署到Ropsten 测试网，这是一个以太坊的工作量证明 (PoW) 测试网。

请注意，当我们最终将 NFT 部署到生产环境或主网时，Ropsten 测试网上的交易历史记录和余额将不会转移。请将测试网视为公共的预发布/开发环境，将主网视为生产环境。

专用网络

如果网络的节点未连接到公有区块链，则该网络被视为私有网络。您可以在私有网络（例如您的本地计算机）上运行以太坊区块链，也可以在一组无法在主网或测试网上访问的机器（例如联盟网络）上运行以太坊区块链。

在像内联网这样的一组机器上运行以太坊区块链需要使用节点来验证交易，节点是在客户端上运行的以太坊软件，用于验证区块和交易数据。

HardHat和Ganache是以太坊区块链开发环境的两个示例，您可以在本地机器上运行它们来编译、测试、部署和调试智能合约应用程序。

我们将在公共网络上运行我们的应用程序，以便任何连接到网络的人都可以访问它。

水龙头

为了测试我们的应用程序，我们需要从水龙头获取以太币（ETH），即以太坊加密货币。水龙头，例如Ropsten 水龙头，是一些网页应用，允许您指定并发送测试 ETH 到某个地址，然后您可以使用该地址在测试网上完成交易。

交易所的 ETH 价格由主网上任意时刻发生的交易决定。如果您选择在私有网络上运行以太坊应用程序，则无需测试 ETH。

节点和客户端

如前所述，节点验证区块和交易数据。您可以使用Geth和OpenEthereum等客户端创建自己的节点，并通过验证区块链上的交易和区块来为以太坊区块链做出贡献。

您可以跳过创建自己的节点的过程，而是使用像Alchemy这样的节点即服务平台，在云端托管一个节点。我们可以快速从开发阶段过渡到生产阶段，并确保获得应用程序的重要指标。

我们将使用 Alchemy API 将我们的应用程序部署到 Ropsten 区块链。Alchemy 被称为区块链的 AWS，它提供了开发者工具，让我们能够深入了解应用程序的运行情况。

构建 NFT

先决条件

• Node.js 和 npm
• JavaScript 基础知识

我喜欢摄影，经常用移动设备拍摄大量照片。有什么比创建 NFT 更好的保护我作品的方法呢？我可以把它转让给任何喜欢我作品的人。然后，他们可以在 Ropsten 测试网或主网上使用 NFT 数据来证明他们拥有原始图像的版权。

我们将创建一个 NFT，用于识别我拍摄的下面这张奥孙河的照片，据信这条河具有独特的治愈能力。

创建 Alchemy 帐户

我们将使用Alchemy来编写我们的 NFT，这样我们就可以跳过在本地机器上运行以太坊节点的过程。

导航到 Alchemy 仪表板，您将看到一个名为“创建您的第一个应用程序”的屏幕。我使用我的名字作为团队名称，并将应用程序命名为“奥孙河 NFT”。

选择 Ropsten 作为应用程序的测试网络。

点击“创建应用程序”按钮继续。

在下一个屏幕上，选择免费方案。在接下来的屏幕上，您可以点击“暂时跳过”按钮来避免输入付款信息，但您也可以选择稍后再输入。在最后一个屏幕上，选择“容量上限”选项。

现在，您将在仪表板上看到我们的应用程序列表。

创建以太坊账户

我们需要创建一个钱包来存放以太坊账户。要将我们的应用程序部署到网络，我们需要支付一笔以 ETH 计价的费用，即 Gas 费。测试应用程序时，我们可以使用虚拟 ETH 来完成测试，稍后我们会从水龙头 (faucet) 中取出这些虚拟 ETH。

我们将使用MetaMask（一个可作为Chrome 扩展程序使用的虚拟钱包）创建一个以太坊帐户。

安装 MetaMask 并创建帐户后，在 Chrome 中打开 MetaMask 扩展程序，然后从网络列表中选择 Ropsten 测试网络。

MetaMask 将自动生成一个以 ETH 计价的钱包地址。点击“账户 1”即可复制您的钱包地址。

从水龙头获取 ETH

让我们使用 Ropsten Faucet 将 Ether 发送到我们的新钱包。首先，输入你的钱包地址（你可以从上面复制），网站会将 1ETH 发送到你的钱包。

您可以通过检查您的 MetaMask 钱包来确认。

设置我们的令牌

让我们开始编写我们的 NFT 代币吧！首先，为我们的项目创建一个新目录并初始化 npm：

mkdir the-osun-river-nft && cd the-osun-river-nft
npm init -y

我们需要设置Hardhat，这是一个以太坊的开发环境，它允许我们在本地机器上编译我们的应用程序并在部署到 Ropsten Testnet 之前测试功能。

要在我们的项目中安装 Hardhat 作为开发依赖项，请运行：

npm install -D hardhat

现在，使用以下命令初始化 Hardhat npx hardhat：

选择“创建一个空的”hardhat.config.js。稍后我们将使用此文件来设置项目的配置。现在，我们将在项目中设置两个新文件夹：一个用于保存智能合约的代码，另一个用于保存部署并与智能合约代码交互的脚本：

mkdir contracts && mkdir scripts

创建智能合约

智能合约是可以在以太坊区块链上运行的应用程序。它们使用一种名为Solidity的语言编写。

我们的智能合约代码将基于OpenZeppelin ERC721 实现。ERC721 是表示 NFT 所有权的标准，而 OpenZeppelin 合约为我们在使用 ERC721 时提供了一定的灵活性。

安装 OpenZeppelin 合约库：

npm i @openzeppelin/contracts@4.0.0

contracts在你的目录中，OsunRiverNFT.sol使用以下代码创建一个文件。我留下了几条注释来解释每一行：

//Contract based on https://docs.openzeppelin.com/contracts/3.x/erc721
// SPDX-License-Identifier: MIT
pragma solidity ^0.7.3;

// implements the ERC721 standard
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
// keeps track of the number of tokens issued
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

// Accessing the Ownable method ensures that only the creator of the smart contract can interact with it
contract TorNFT is ERC721, Ownable {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    // the name and symbol for the NFT
    constructor() public ERC721("TheOsunRiver", "TOR") {}

    // Create a function to mint/create the NFT
   // receiver takes a type of address. This is the wallet address of the user that should receive the NFT minted using the smart contract
    // tokenURI takes a string that contains metadata about the NFT

    function createNFT(address receiver, string memory tokenURI)
        public onlyOwner
        returns (uint256)
    {
        _tokenIds.increment();

        uint256 newItemId = _tokenIds.current();
        _mint(receiver, newItemId);
        _setTokenURI(newItemId, tokenURI);

        // returns the id for the newly created token
        return newItemId;
    }
}

为了使我们的 NFT 成为有效的 ERC721 代币，它必须满足所有 ERC721 标准。import "@openzeppelin/contracts/token/ERC721/ERC721.sol";通过将 ERC721 标准导入我们的文件来确保这一点。

将 MetaMask 连接到项目

现在，我们将 MetaMask 钱包连接到我们的项目。虚拟钱包上的每笔交易都需要私钥才能完成，所以我们需要获取 MetaMask 私钥。

在 Chrome 浏览器中，打开 MetaMask 扩展程序，点击右上角的三个点，然后选择“ 帐户详情”选项。接下来，点击“导出私钥”按钮。输入您的密码即可查看私钥，然后复制它。

确保私钥在项目代码库中安全非常重要，以防止在使用 GitHub 等版本控制平台时暴露。为了保证密钥安全，我们将安装dotenv包：

npm i dotenv

在项目根目录中创建一个.env文件，然后将之前的 MetaMask 私钥添加到其中。你还需要添加 alchemy API_URL，你可以在 Alchemy 仪表盘中找到它，点击“应用”下拉菜单，选择之前创建的应用，然后选择“查看密钥”按钮：

METAMASK_PRIVATE_KEY = "yourMetamaskPrivateKey"
API_URL = "https://eth-ropsten.alchemyapi.io/v2/your-api-key"

设置Ether.js

Ether.js是一个简化与以太坊区块链交互的库。我们将使用 Hardhat 的 Ether 插件：

npm i -D @nomiclabs/hardhat-ethers 'ethers@^5.0.0'

前往hardhat.config.js我们之前创建的文件来添加一些我们安装的新依赖项：

/**
* @type import('hardhat/config').HardhatUserConfig
*/
require('dotenv').config();
require("@nomiclabs/hardhat-ethers");
const { API_URL, METAMASK_PRIVATE_KEY } = process.env;
module.exports = {
   solidity: "0.7.3",
   defaultNetwork: "ropsten",
   networks: {
      hardhat: {},
      ropsten: {
         url: API_URL,
         accounts: [`0x${METAMASK_PRIVATE_KEY}`]
      }
   },
}

让我们来看看我们的配置文件中有什么：

• dotenv包：让我们在 Node.js 应用程序中使用环境变量
• require("@nomiclabs/hardhat-ethers")：在我们的部署脚本中运行 Ether 提供的用户友好方法
• defaultNetwork：指定在部署我们的应用程序时 Hardhat 应该使用哪个网络（Ropsten Testnet）
• accounts：由 MetaMask 生成的私钥，允许我们的应用程序连接到我们的 MetaMask 虚拟钱包以完成交易
• url：指定我们的 Node.js 应用程序托管的 URL（Alchemy 服务器）

我们将通过我们 URL 上托管的节点连接到 Ropsten 测试网。您可以在 Hardhat 中阅读有关配置文件的更多信息。

现在，让我们运行Hardhat 提供的compile 任务来检查一切是否正常运行：

npx hardhat compile

您应该会看到如下所示的成功消息。您可以忽略终端中出现的警告。

创建部署脚本

现在我们已经完成了智能合约代码，让我们编写必要的脚本将智能合约部署到以太坊区块链。

在您的scripts目录中，创建一个名为的新文件deploy.js：

async function main() {
    const [deployer] = await ethers.getSigners();
    console.log("Deploying contracts with the account:", deployer.address);

    console.log("Account balance:", (await deployer.getBalance()).toString());
    const TOR = await ethers.getContractFactory("TorNFT");

    // Start deployment, returning a promise that resolves to a contract object
    const tor = await TOR.deploy();
    console.log("Contract deployed to address:", tor.address);
 }

 main()
   .then(() => process.exit(0))
   .catch(error => {
     console.error(error);
     process.exit(1);
   });

现在，我们可以运行 Hardhat部署任务：

npx hardhat run scripts/deploy.js --network ropsten

我们添加--network ropsten标志来告诉 Hardhat 连接到特定网络，在我们的例子中是 Ropsten。

几秒钟后，我们将看到我们的智能合约已成功部署到 Ropsten 测试网。从终端日志中，我们可以看到新创建的智能合约地址。

现在，让我们确认我们的智能合约已部署到区块链。前往Ropsten Etherscan，并将您的合约地址粘贴到搜索栏中。您应该在一分钟内看到有关您的合约的详细信息。

如果你在 MetaMask 上查看你的以太坊钱包，你会发现你持有的 ETH 数量由于处理交易所需的 Gas 费用而减少了。现在，我们已经成功将智能合约部署到 Ropsten 测试网！

铸造 NFT

我们的智能合约代码接受两个参数：接收方地址和 tokenURI。tokenURI 指向我们想要绑定代币的数据。要使用接收方地址，只需将其传入您要向其提供代币的用户的钱包地址即可。

存储在区块链上的数据需要跨多个网络进行处理、验证和复制，因此在区块链上存储数据的成本非常高。不建议将整幅图像上传到区块链，您可以只存储 NFT 的元数据。

虽然 NFT 的 URL 可以存储在区块链上，但该链接随时可能离线。此外，任何有权访问 URL 内容的人都可以更改它。

例如，一位 NFT 艺术家在OpenSea 上出售 NFT时，突然撤回了原有的 NFT作品，这意味着他篡改了出售给买家的原始图片。这些图片的链接仍然保留在区块链上，但原始内容已被完全篡改。

因此，我们需要一种经济实惠、持久、分散且不可变的数据存储方式。

使用 IPFS

IPFS是一个用于存储和访问文件的分布式系统，它使用内容寻址来解决上述问题。任何上传到 IPFS 的数据都将被分配一个唯一的内容标识符 (CID)。一旦为某条数据生成了 CID，该 CID 将始终代表该数据，并且该数据不可更改。

以下是 IPFS URI 的示例：

ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi

要生成 IPFS URI，只需在 CID 前添加 前缀即可ipfs://。在浏览器中，IPFS URI 遵循以下格式：

https://ipfs.io/ipfs/{CID}

您的用户代理（浏览器）将解析 URI 以显示内容。有一些浏览器能够解析 IPFS URI，但我们将使用 Google Chrome 浏览器版本 90。

设置 web3.js

让我们继续向 NFT 添加元数据。我们将安装Alchemy Web3软件包：

npm install @alch/alchemy-web3

根据其文档，web3.js是一个库的集合，允许您使用 HTTP、IPC 或 WebSocket 与本地或远程以太坊节点进行交互。

Alchemy 围绕 Web3.js 库，通过提供自动重试和强大的 WebSocket 支持来扩展其功能。

设置脚本来铸造 NFT

现在，是时候编写脚本来铸造我们的 NFT 了。

在您的scripts 文件夹中，创建一个名为 的文件mint-nft.js。然后，添加以下代码块：

require('dotenv').config();
const API_URL = process.env.API_URL;
const { createAlchemyWeb3 } = require("@alch/alchemy-web3");
const alchemyWeb3 = createAlchemyWeb3(API_URL);
const contract = require("../artifacts/contracts/OsunRiverNFT.sol/TorNFT.json"); 

将 NFT 元数据上传至 Pinata

Pinata是一个使用 IPFS 协议存储 NFT 元数据的平台。如果您还没有账户，请立即创建。

登录后，选择青色上传按钮，单击“文件”，然后选择您的 NFT 图像。

镜像成功上传后，您将在仪表板上看到它。请务必记下上方 IPFS CID 列下的字母数字字符。我们稍后会用到它们。

现在我们已经将镜像上传到 Pinata，接下来创建一个 JSON 文件来保存有关 NFT 的信息。当 NFT 被铸造出来时，我们会将 URI 存储在区块链上。

在应用程序的根目录中，创建一个名为的文件nft-metadata.json并添加以下信息。请记住将图像值更改为使用将图像上传到 Pinata 时生成的 CID：

{
    "description" : "An image of the Osun River captured on the suspended bridge at the Osogbo Sacred Grove.",
    "image" : "https://ipfs.io/ipfs/Qmf1r8igsCAFTFjrQrK7jk6uD6YKVYo5dGu7cvm9TmPhJV",
    "photographer" : "Adebola Adeniran"
}

请注意，对于图像属性，我们已经从 Pinata 仪表板添加了带有前缀的 IPFS CID https://ipfs.io/ipfs/。保存文件，然后返回 Pinata 上传文件。

您应该在我们的仪表板上看到图像和 JSON 文件。

创建我们的合同实例

要铸造 NFT，请获取我们在 Ropsten 测试网部署智能合约时创建的合约地址。您可以在我们的终端日志中看到该地址。我们的合约地址是0x9436f34035a4885650C8311cA24e3E2DeD2FF0a2。

返回scripts/mint-nft.js 文件并添加以下代码：

const contractAddress = "0x9436f34035a4885650C8311cA24e3E2DeD2FF0a2";
const nftContract = new alchemyWeb3.eth.Contract(contract.abi, contractAddress);

让我们.env 用我们的公共以太坊地址更新我们的文件，这与我们之前复制的帐户地址相同。将地址添加到我们的.env文件中：

METAMASK_PRIVATE_KEY="Our metamask Private key"
API_URL="Our alchemy API URL"
METAMASK_PUBLIC_KEY="Our metamask public key"

接下来，我们需要创建一个交易。

将以下代码添加到我们的mint-nft.js 文件中。我添加了注释来解释我们每一步的操作：

const METAMASK_PUBLIC_KEY = process.env.METAMASK_PUBLIC_KEY;
const METAMASK_PRIVATE_KEY = process.env.METAMASK_PRIVATE_KEY;

async function mintNFT(tokenURI) {
    // get the nonce - nonce is needed for security reasons. It keeps track of the number of
    // transactions sent from our address and prevents replay attacks.
  const nonce = await alchemyWeb3.eth.getTransactionCount(METAMASK_PUBLIC_KEY, 'latest');
  const tx = {
    from: METAMASK_PUBLIC_KEY, // our MetaMask public key
    to: contractAddress, // the smart contract address we want to interact with
    nonce: nonce, // nonce with the no of transactions from our account
    gas: 1000000, // fee estimate to complete the transaction
    data: nftContract.methods
      .createNFT("0x0d28235B6191a66A3410cc1e3CeBfE53602D7865", tokenURI)
      .encodeABI(), // call the createNFT function from our OsunRiverNFT.sol file and pass the account that should receive the minted NFT.
  };
}

我创建了一个新的 MetaMask 钱包，并在tx.data上方传入了钱包地址。您也可以根据需要传入我们的钱包地址METAMASK_PUBLIC_KEY。在实际生产中，此处传入的钱包地址应为 NFT 接收者的钱包地址。

现在交易已创建，我们需要使用我们的签署交易METAMASK_PRIVATE_KEY。

将以下代码块添加到函数mint-nft.js内的文件mintNFT：

  const signPromise = alchemyWeb3.eth.accounts.signTransaction(
    tx,
    METAMASK_PRIVATE_KEY
  );
  signPromise
    .then((signedTx) => {
      alchemyWeb3.eth.sendSignedTransaction(
        signedTx.rawTransaction,
        function (err, hash) {
          if (!err) {
            console.log(
              "The hash of our transaction is: ",
              hash,
              "\nCheck Alchemy's Mempool to view the status of our transaction!"
            );
          } else {
            console.log(
              "Something went wrong when submitting our transaction:",
              err
            );
          }
        }
      );
    })
    .catch((err) => {
      console.log(" Promise failed:", err);
    });

最后，我们需要从之前上传到 Pinata 的文件中复制 IPFS CID 哈希，并在调用时将其传递到我们的nft-metadata.json 函数mintNFT中：

mintNFT("https://ipfs.io/ipfs/QmdZMtdApdeobM5iCRcWqAMByfG4No8tW4oheb7jQjKgTm") // pass the CID to the JSON file uploaded to Pinata

如果您在我们的浏览器中打开上面的链接，您应该会看到nft-metadata.json 带有上述 CID 的文件：

现在，我们可以node scripts/mint-nft.js在终端中运行来铸造 NFT。等待几秒钟，你应该会在终端中看到如下图所示的响应。

现在，我们将转到Alchemy Mempool，它可以跟踪我们帐户上发生的所有交易的状态，而无需使用 Etherscan。

我们可以在 Etherscan 上看到有关我们新铸造的 NFT 的信息，以及链接到nft-metadata.json以太坊区块链上我们文件的 URL。

向下滚动到输入数据，然后单击“解码输入数据”createNFT按钮。您应该在文件中看到我们传递给函数的数据contracts/OsunRiverNFT.sol：接收钱包地址以及包含 NFT 元数据的 JSON 文件的 URL。

如果你在 Etherscan 上搜索用于铸造 NFT 的合约地址，你会看到所有已铸造的 NFT 的记录，或者更准确地说，所有使用该智能合约发生的交易的记录。

将我们的 NFT 添加到 MetaMask 钱包

1. 检查与 Ropsten 测试网络的连接
2. 打开 MetaMask 钱包扩展
3. 点击添加令牌按钮
4. 从 Etherscan 复制新代币的合约地址，并将其粘贴到 MetaMask 中。MetaMask 将自动生成代币的符号。
5. 单击下一步将代币添加到您的钱包

结论

通过这些，我们学会了如何：

• 创建智能合约并将其部署到 Ropsten 测试网
• 通过将智能合约部署到区块链来铸造 NFT
• 通过 Piñata 使用 IPFS 中的内容寻址协议将元数据添加到我们的 NFT
• 在我们的 MetaMask 钱包中查看我们的 NFT

希望您明白NFT为何引起如此轰动。这是一项令人着迷的技术，预计会持续一段时间。

在实际生产环境中，步骤与本教程完全相同。唯一的区别在于，您现在将与主网进行交互，而不是测试网。

您可以在我的GitHub上看到该项目的所有代码。

您是否正在添加新的 JS 库来提升性能或构建新功能？如果他们做相反的事情怎么办？

毫无疑问，前端正变得越来越复杂。随着您向应用添加新的 JavaScript 库和其他依赖项，您需要更高的可见性，以确保用户不会遇到未知问题。

LogRocket是一种前端应用程序监控解决方案，可让您重播 JavaScript 错误，就像它们发生在您自己的浏览器中一样，以便您可以更有效地对错误做出反应。

LogRocket可与任何应用完美兼容，无论使用哪种框架，并且提供插件来记录来自 Redux、Vuex 和 ngrx/store 的额外上下文。您无需猜测问题发生的原因，而是可以汇总并报告问题发生时应用程序的状态。LogRocket 还可以监控应用的性能，报告客户端 CPU 负载、客户端内存使用情况等指标。

自信地构建——开始免费监控。