2022年最新铸造 NFT方法一览

在本节中，我们将使用应用程序和用户界面讨论 NFT 铸造过程。为了获得一些东西并显示元数据如何与 Flow 上的 NFT 一 起工作，我们将使用命令行和 Cadence 脚本。
在我们的 pinata-party 项目的根目录中创建一个新目录，并将它们称为“事务”。创建文件夹后，在其中创建一个名为 MintPinataParty.cdc 的新文件。
我们应该在我们提供给 NFT 的元数据中引用一个文件。文件通过 Pinata 上传到 IPFS。在本教程中，NFT 的重点是可交 易的皮纳塔在派对上被砸的视频。在这个演示中，我们将上传一个孩子在生日聚会上击打皮纳塔的视频。您可以上传任何您想 要的媒体文件并将其与 NFT 相关联。
文件上传后，您将获得 IPFS 哈希。复制哈希，因为它将在铸造过程中使用。现在，在 MintPinataParty.cdc 文件中添加 以下代码。

从 0xf8d6e0586b0a20c7 导入 PinataPartyContract 交易{ 让 receiverRef: & { PinataPartyContract. NFT 接收器} 让 minterRef: &PinataPartyContract. NFTMinter 准备（帐户：AuthAccount ）{ 自己。接收者参考= 帐户。getCapability < & { PinataPartyContract. NFTReceiver }>( /public/NFTReceiver ) . 借() ?? 恐慌（“无法借用接收者参考” ） 自己。minterRef = 帐户。借< &PinataPartyContract. NFTMinter >（来自：/storage/NFTMinter ） ?? 恐慌（“无法借用铸币厂参考” ） }执行{ 让元数据：{字符串：字符串} = { “名称”：“大秋千”， “swing_velocity”：“ 29 ”， “swing_angle”：“ 45 ”， “评分”：“ 5 ”， “uri”：“ipfs ://QmRZdc3mAMXpv6Akz9Ekp1y4vDSjazTx2dCQRkxVy1yUj6” }让 newNFT < - 自我。minterRef 。mintNFT () 自己。接收器参考。存款（令牌：<- newNFT，元数据：元数据） 日志（“NFT 铸造并存入账户 2 的收藏” ） }}

首先，我们定义了两个引用变量，minterRef 和 receiverRef。在这种情况下，我们既是 NFT 的接收者又是铸造者。这些变 量引用在合同中创建的资源。如果执行该事务的人无权访问该资源，则该事务将失败。
上述合约将铸造和存入 NFT。现在，我们将发送交易并铸造 NFT。但在此之前，我们需要准备好账户。在项目的根文件夹中 创建用于从命令行签名的私钥。

运行以下命令：
流键生成
它将为您提供公钥和私钥。
确保保护您的私钥。
您将需要私钥来签署需要粘贴到我们的 flow.json 文件中的交易。
指定签名算法也很重要，以下是 flow.json 文件中的帐户
对象应如下所示：

“帐户”：{ “模拟器帐户”：{ “地址”：“您的帐户地址”， “privateKey”：“你的私钥”， “链”：“流模拟器”， “sigAlgorithm”：“ECDSA_P256”， “哈希算法”：“SHA3_256” }}

如果您想将此项目中的任何内容存储在远程 git 存储库或 Github 上，则不应包含私钥。您可能需要 .gitignore 整个 flow.json。虽然我们只使用本地模拟器，但最好保护密钥。
我们需要做的最后一件事是验证令牌是否在我们的帐户中并获取元数据。为了验证它，我们需要编写一个简单的脚本并从命令 行调用它。
从项目的根目录创建一个名为 scripts 的新文件夹。在文件夹中创建一个名为 CheckTokenMetadata.cdc 的文件。
在该文 件中添加以下代码：

从 0xf8d6e0586b0a20c7 导入 PinataPartyContract 酒吧乐趣主要（）：{字符串：字符串} { let nftOwner = getAccount ( 0xf8d6e0586b0a20c7 ) // log(“NFT Owner”) 让能力 = nftOwner。getCapability < & { PinataPartyContract. NFTReceiver }>( /public/NFTReceiver ) 让 receiverRef = 能力。借() ?? 恐慌（“无法借用接收者参考” ） 返回接收器参考。获取元数据（id：1 ） }

我们正在从这个脚本中的部署地址导入合约。我们定义了 main 函数，并在其中定义了三个变量：  nftOwner  该账户拥有 NFT。  能力  能力是受访问控制的。如果尝试借用它的地址无法使用某个功能，则脚本将失败。在此示例中，我们从 NFTReceiver 资 源中借用功能。  receiverRef  变量获取我们的能力并声明要从部署的合约中借用的脚本。 我们希望确保问题中的地址已收到我们铸造的 NFT，然后我们希望查看与令牌关联的元数据。

使用以下命令运行脚本，看看我们得到了什么： 流脚本执行 ./scripts/CheckTokenMetadata。CDC 你会得到这样的输出： { “名称” ：“大摇摆” ，“swing_velocity” ：“29” ，“swing_angle” ：“45” ，“评级” ：“5” ，“uri” ： “ipfs://QmRZdc3mAMXpv6Akz9Ekp1y4vDSjazTx2dCQRkxVy1yUj6” }

然后，我们将构建一个前端 React 应用程序，允许您通过获取元数据来显示 NFT。

展示 NFT 收藏品 我们将构建一个简单的 React 应用程序，与 Flow 智能合约交互以验证和获取用户拥有的 NFT。 设置 React 和依赖项 在父目录 pinata-party 中创建 React 应用程序。运行以下命令来创建一个 React 应用程序： npx create-react-app pinata-party-frontend 完成安装后，您将看到一个名为 pinata-party-frontend 的新目录。切换到该目录并安装依赖项。对于前端设置的第一部 分，运行： npm i @onflow/fcl @onflow/types 我们将一些值存储为我们的应用程序的全局变量并使用环境变量。在 react 中，这意味着创建一个 .env 文件并设置键值对， 您需要在其中添加 REACT_APP 前缀。 然后，创建一个用于与 Flow JS SDK 交互的配置文件。在 src 目录下创建一个文件 config.js 并添加以下代码：

从“@onflow/fcl”导入{配置} 配置（） . 把（“接入节点。API ”的过程。ENV 。REACT_APP_ACCESS_NODE ） . 把（“挑战。握手”过程。ENV 。REACT_APP_WALLET_DISCOVERY ） . 把（“0xProfile”过程。ENV 。REACT_APP_CONTRACT_PROFILE ）

这个配置文件只是帮助 JS SDK 与 Flow 区块链（或本例中的模拟器）一起 工作。要使该文件在整个应用程序中可用， 请打开该 index.js 文件并添加以下行：
导入“./config
在应用程序中具有身份验证功能以启用 NFT 资产的安全转移非常重要。我们需要一个身份验证组件。在 src 目录中创建文件 AuthCluster.js。在该文件中添加以下内容：

从“反应”导入反应，{useState，useEffect} 从“@onflow/fcl”导入 * 作为 fcl 常量 AuthCluster = () => { const [user, setUser] = useState({loggedIn: null}) useEffect(() => fcl.currentUser().subscribe(setUser), []) 如果（user.loggedIn）{ 返回 （ < div > <跨度> {user?.addr ?? “无地址”}  < button classname = "”btn-primary”" onclick = "{fcl.unauthenticate}" >注销  )} 别的 { 返回 （ < div > <按钮类名= “”btn-primary”onClick={fcl.logIn}” >登录 < button classname = ""btn-secondary"" onclick = "{fcl.signUp}" >注册  )}}导出默认 AuthCluster

要将此组件放入应用程序，请将 app.js 文件替换为以下内容：

导入'./App.css'； 从 './AuthCluster' 导入 AuthCluster;function App() { 返回 （ < div 类名= “”应用程序”” > <认证集群>   );
}导出默认应用；

添加上述代码后，您将在启动应用程序时看到一个带有登录注册按钮的页面。现在，是时候构建为帐户获取 NFT 并显示它们 的能力了。

从 Flow 中获取

NFT 要显示我们创建的 NFT，必须与 Flow 区块链进行通信。在本教程中，我们应该能够与 Flow 模拟器进行通信。 让我们构建一个允许获取数据和显示 NFT 数据的组件。在 src 目录中创建一个文件 TokenData.js 并在该文件中添加以下 代码：

从“反应”导入反应，{ useState}； 从“@onflow/fcl”导入 * 作为 fcl； 常量 TokenData = () => { const [nftInfo, setNftInfo] = useState(null) const fetchTokenData = async () => { 常量编码 = 等待 fcl 。发送（[ fcl.script` 从 0xf8d6e0586b0a20c7 导入 PinataPartyContract 酒吧乐趣 main() : {String : String} { 让 nftOwner = getAccount(0xf8d6e0586b0a20c7) 让能力 = nftOwner.getCapability<&{PinataPartyContract.NFTReceiver}>(/public/NFTReceiver) 让 receiverRef = capability.borrow() ?? 恐慌（“无法借用接收者参考”） 返回 receiverRef.getMetadata(id: 1) }`])常量解码 = 等待 fcl.decode（编码） setNftInfo（解码） };返回 （ < div 类名= ""令牌数据"" > < div 类名= ""center"" > < button classname = "”btn-primary”" onclick = "{fetchTokenData}" >获取令牌数据  {nftInfo && < div > {Object.keys(nftInfo).map(k => { 返回 （ < p > {k}: {nftInfo[k]}  )})}< button onclick = "{()=" > setNftInfo(null)} className=”btn-secondary”>清除令牌信息  } );};导出默认 TokenData； 

在这个文件中，我们正在创建一个带有按钮的组件来获取令牌数据。我们还创建了一个按钮来清除令牌数据。单击获取按钮时， 将调用函数 fetchTokenData。该函数使用 Flow JS SDK 运行我们从命令行执行的脚本。获取执行结果并将结果设置为状 态变量 nftInfo。如果变量存在，则从屏幕上的 NFT 元数据和一个用于清除数据的按钮呈现键值对。 从 IPFS 获取媒体
由于我们已经注册了 Pinata 帐户并通过 Pinata 上传界面将视频文件添加到 IPFS，当您在 Pin Explorer 中单击哈希时， 您将被导航到 Pinata IPFS 网关，其中显示 IPFS 内容。 在 TokenData.js 文件中，添加一种显示从 IPFS 检索到的视频文件的方式。将文件更新为如下所示：

从“反应”导入反应，{ useState } ； 从“@onflow/fcl”导入*作为 fcl； 常量 TokenData = ( ) => { const [ nftInfo, setNftInfo ] = useState ( null ) const fetchTokenData = async ( ) => { 常量编码 =等待 fcl . 发送（[ 整箱 脚本` 从 0xf8d6e0586b0a20c7 导入 PinataPartyContract 酒吧乐趣 main() : {String : String} { 让 nftOwner = getAccount(0xf8d6e0586b0a20c7) 让能力 = nftOwner.getCapability<&{PinataPartyContract.NFTReceiver}>(/public/NFTReceiver) 让 receiverRef = capability.borrow() ?? 恐慌（“无法借用接收者参考”） 返回 receiverRef.getMetadata(id: 1) }`] ) 常量解码 =等待 fcl。解码（编码） setNftInfo (解码) } ; 返回( < div classname= ""token-data"" > < div classname= ""center"" > < button classname= ""btn-primary"" onclick= "{fetchTokenData}" >获取令牌数据< /button>