# Alchemy Road to Web3 第三周中文教程
By [LaiLai](https://paragraph.com/@lailai-2) · 2022-08-15
---
第三周：通过 Hardhat 和 JavaScript 制作有链上元数据的NFT
----------------------------------------
本教程只介绍操作步骤，代码含义等不做解释，下面是官方英文详细教程链接：
[https://docs.alchemy.com/docs/how-to-make-nfts-with-on-chain-metadata-hardhat-and-javascript](https://docs.alchemy.com/docs/how-to-make-nfts-with-on-chain-metadata-hardhat-and-javascript)
### Step1.添加Polygon Mumbai到 Metamask 钱包
1.打开链接 [Polygon Mumbai](https://mumbai.polygonscan.com/)，然后滑动到网页底部，点击右下角按钮完成Polygon Mumbai的添加
2.在水龙头( [mumbaifaucet.com](https://mumbaifaucet.com/) 或 [faucet.polygon.technology](https://faucet.polygon.technology/) )获取测试币，用于支付部 署需要的Gas Fee
等待10～20秒，可以收到测试币
### Step2.项目的环境配置
**1.创建项目文件夹，并导入到VSStudio**
1.1 创建文件夹 “ChainBattled”，使用VSStudio的“打开文件夹” 功能
使用VSStudio的“打开文件夹” 功能
1.2 选择对应文件夹并打开
打开对应文件夹
**2.项目依赖库配置**
2.1 在VSStudio打开终端
2.2 在终端输入如下命令 , 安装hardhat
yarn add hardhat
2.3 在终端输入如下命令 , 初始化hardhat
nxp hardhat init
选择 “Create a JavaScript project”，键盘点击回车确认
终端弹出相关hardhat初始化配置的提示，全点击“回车”
至此，hardhat 初始化结束
2.4 输入如下命令安装 [OpenZeppelin](https://docs.openzeppelin.com/contracts/4.x/) 库,这个库可以方便我们创建接下来的合约。
yarn add @openzeppelin/contracts
**3.在项目中配置Polygon Mumbai网络环境**
3.1 终端输入如下命令 安装 dotenv
3.2 终端输入如下命令创建 .env 文件
touch .env
3.3 获取 Polygon Mumbai 的 TESTNET\_RPC
进入 [Alchemy创建app的界面](https://dashboard.alchemyapi.io/apps) 创建一个 Polygon Mumbai 网络的app，创建app的时候注意网络需要选择 Polygon Mumbai
进入app详情界面，点击 VIEW KEY 按钮，图中的HTTPS就是我们需要的 TESTNET\_RPC
3.4 获取 Polygon Mumbai 的 POLYGONSCAN\_API\_KEY
打开 [Polygon注册界面](https://polygonscan.com/register)，创建一个账号
账号注册成功后，进入 [API KEY配置界面](https://polygonscan.com/myapikey) ，创建API KEY
下图Api Key Token就是我们需要的POLYGONSCAN\_API\_KEY
3.5 打开 .env文件，配置对应的值
3.6 打开 hardhat.config.js文件，输入下面的代码
require("dotenv").config();
require("@nomiclabs/hardhat-waffle");
require("@nomiclabs/hardhat-etherscan");
module.exports = {
solidity: "0.8.10",
networks: {
mumbai: {
url: process.env.TESTNET_RPC,
accounts: [process.env.PRIVATE_KEY]
},
},
etherscan: {
apiKey: process.env.POLYGONSCAN_API_KEY
}
};
### Step3.编辑代码并发布合约
### 1.创建合约文件
删除 contracts目录下原有文件，创建文件 ChainBattles.sol
下面是文件源码
pragma solidity ^0.8.0;
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/utils/Strings.sol";
import "@openzeppelin/contracts/utils/Base64.sol";
contract ChainBattles is ERC721URIStorage {
using Strings for uint256;
using Counters for Counters.Counter;
Counters.Counter private _tokenIds;
mapping(uint256 => uint256) public toknenIdToLevels;
constructor() ERC721("Chain Battles", "CBTLS") {}
function generateCharacter(uint256 tokenId)
public
view
returns (string memory)
{
bytes memory svg = abi.encodePacked(
'"
);
return
string(
abi.encodePacked(
"data:image/svg+xml;base64,",
Base64.encode(svg)
)
);
}
function getLevels(uint256 _tokenId) public view returns (string memory) {
uint256 levels = toknenIdToLevels[_tokenId];
return levels.toString();
}
function getTokenURI(uint256 tokenId) public view returns (string memory) {
bytes memory dataURI = abi.encodePacked(
"{",
'"name": "Chain Battles #',
tokenId.toString(),
'",',
'"description": "Battles on chain",',
'"image": "',
generateCharacter(tokenId),
'"',
"}"
);
return
string(
abi.encodePacked(
"data:application/json;base64,",
Base64.encode(dataURI)
)
);
}
function mint() public {
_tokenIds.increment();
uint256 newItemId = _tokenIds.current();
_mint(msg.sender, newItemId);
toknenIdToLevels[newItemId] = 0;
_setTokenURI(newItemId, getTokenURI((newItemId)));
}
function raiseLevel(uint256 _tokenId) public {
require(_exists(_tokenId), "error, the tokenId not exists");
require(
ownerOf(_tokenId) == msg.sender,
"error, you are not the owner"
);
toknenIdToLevels[_tokenId] = toknenIdToLevels[_tokenId] + 1;
_setTokenURI(_tokenId, getTokenURI(_tokenId));
}
}
### 2.创建部署文件
打开scripts目录下的deploy.js 文件，复制下面的源码到文件
// We require the Hardhat Runtime Environment explicitly here. This is optional
// but useful for running the script in a standalone fashion through `node