Non-Fungible-Token on Flow - ShowCase

注意：本教程仅作为教学使用，部署到生产环境时还需要进行严格的代码审计。

这是一份指南，教您如何使用 ChainIDE、Cadence 和 React 在 Flow 上创建全栈的 NFT Mint 页面

如果你有任何问题，请加入我们的 ChainIDE Discord

这份教程将分为以下几个步骤：

1. 使用 Flow 钱包并获取测试币
2. 部署 NFT 智能合约
3. 部署前端页面
4. 添加你的 NFT
5. 在主网上部署

1 使用 Flow 钱包并获取测试币

当我们在区块链上部署一个智能合约或对已部署的智能合约进行交互时，我们需要一个 Flow 的钱包，FLow 的钱包有许多种(Blocto,Lilico,Flipper等)，在此，我们使用 Blocto

在 ChainIDE Flow 编程页面右侧，选择 Testnet，然后点击 Autheniticate

选择 Flow Wallet

点击复制钱包地址

进入 Flow Faucet ，粘贴地址，默认选择 FLOW ，完成 hCaptcha 认证后，点击 FUND YOUR ACCOUNT

这样我们就获得1000个 Flow 测试币了

2 部署 NFT 智能合约

我们的 NFT 智能合约是基于Flow Non-Fungible Token Standard

进入contract文件夹 ,打开ChainIDEShieldNFT.cdc

import NonFungibleToken from 0x631e88ae7f1d7c20
import MetadataViews from 0x631e88ae7f1d7c20

NonFungibleToken和MetadataViews已经部署在各种网络上。你可以从这些地址将它们导入你的合同中，无需自己部署它们。你可以在Fungible Token Contract | Flow Blockchain找到所有信息

在这里你可以查看你的 Metadata

        /// Function that resolves a metadata view for this token.
        ///
        /// @param view: The Type of the desired view.
        /// @return A structure representing the requested view.
        ///
        pub fun resolveView(_ view: Type): AnyStruct? {...
    }

然后，切换到Deploy & Interaction面板，在 _maxSupply栏输入 NFT 的最大供应量（如：4），点击 Deploy

打开ChainIDEShieldNFTMintContract.cdc

开头处的地址信息需要我们配置下。

...
// TODO: change to your account which deploy ChainIDEShildNFT
import ChainIDEShieldNFT from 0x119dff553c54ffcc

将 ChainIDEShieldNFT 后的地址替换为当前登录的账户地址。

然后，在右侧面板输入NFT的Mint价格($Flow)参数price（如：10）以及receiver参数(接受付款的地址，如：你的钱包地址)，点击部署合约

3 部署前端页面

修改frontend/config.ts里面的参数，如果合约名没有做修改，只需要修改deployer地址即可，将depolyer的地址修改为你的钱包地址

打开Sandbox Flow (Ubuntu) ，执行

cd frontend  
yarn  
yarn start

打开左边端口转发面板，选择Flow (Ubuntu)镜像， Protocol： HTTP，输入端口号3000，点击Add

添加成功后，表格里会多一条3000端口的记录，点击图示按钮，用浏览器打开

浏览器会打开如下页面

钱包登录成功后可以看到价格和供应量从合约中读取成功

点击执行Mint，如果钱包Flow余额不足，可以从 FLow Faucet 中获取 Flow 测试代币

Mint过后，可以看到，剩余NFT的数值发生变化

4 添加你的 NFT

最后我们需要将我们的 NFT 添加到 NFT Catalog，这样其他 NFT 市场就可以引入我们的NFT了

点击进入NFT Catalog，你可以依据下方的教程完成整个步骤

官方 review 过后，记录以下3个字段

接下来去 NFT 交易市场，提供以上三个字段，交易市场就可以将你发行的 NFT 上架了

5 在主网上部署

如果你想把 NFT 和网页部署在主网上，你需要按照测试网的教程再走一遍，并对以下部分进行修改

1 连接主网

2 替换智能合约 import contract 的地址为主网地址

打开 cadences/contracts

3 替换前端页面 flow.ts 配置信息

打开 frontend/wallet/services/flow.ts

将 //Mainnet 后的内容替换到前方的代码中

最后，待合约主网部署+ MInt 成功后，依据第4步，你就可以向 NFT marketplace 申请主网 NFT 上架了 恭喜，你已经完成了本教程的所有内容！