tech

Solana NFT dApp开发实战

在本教程中，我们将构建一个简单的 dApp，允许你在 Solana 区块链上创建 NFT。在本教程结束时，新铸造的 NFT 将在你的钱包中可用。

一键发币： SOL | BNB | ETH | BASE | Blast | ARB | OP | POLYGON | AVAX | FTM | OK

在本教程中，我们将构建一个简单的 dApp，允许你在 Solana 区块链上创建 NFT。在本教程结束时，新铸造的 NFT 将在你的钱包中可用。

1、先决条件

首先，我们通过以下链接安装 Phantom Wallet 的浏览器扩展：Chrome/Bravo浏览器，火狐浏览器。

安装后，在浏览器中打开 Phantom，然后按照屏幕上的步骤创建新钱包。如果您需要帮助，请参阅这个指南。现在，你拥有了一个公钥-私钥对，可用作区块链上的身份。

2、安装nodeJs和npx

Mac 版步骤：

//type the following commands on your terminal:
$ brew update
$ brew install node
//once completed, check if installed properly:
$ node -v
v18.0.0    // if installed properly, should output the node installed version
// install npx:
$ npm i -g npx

3、项目设置

现在我们已经准备好创建我们的第一个 NFT 铸造 dapp。我们将使用 ReactJs 构建一个简单的前端，以允许您交互地创建 NFT。我们将使用 VS Code 来演练本教程。

身份验证：获取你的 Shyft API 密钥

x-api-key 是一个身份验证参数，可让你访问 SHYFT API。你可以从 SHYFT 网站获取自己的 API 密钥。只需在此处使用你的电子邮件 ID 注册即可免费获取。

设置react项目

$ npx create-react-app my-first-nft-dapp

这将为你的 dapp 创建样板代码，文件结构如下所示：

4、深入研究代码

让我们创建一个新表单来接受创建新 NFT 所需的所有详细信息（参数）。我们为表单创建了一个新组件，但你也可以将此代码直接放在 App.js 中：

const [file, setfile] = useState();
  const [network, setnetwork] = useState("devnet");
  const [publicKey, setPublicKey] = useState(''); //your wallet's public key
  const [name, setName] = useState();
  const [symbol, setSymbol] = useState();
  const [desc, setDesc] = useState();
  const [attr, setAttr] = useState();
  const [extUrl, setExtUrl] = useState();
  const [maxSup, setMaxSup] = useState(0);
  const [roy, setRoy] = useState(1);
  
  const [status, setStatus] = useState("Awaiting Upload");
  const [dispResponse, setDispResp] = useState("");
  
  return (
    <div className="App">
      <form>
        <label htmlFor="file">Select File</label>
        <input name="file" type="file" onChange={(e) => {
          setfile(e.target.files[0]));
        }} />
        <br />
<label htmlFor="network">
          Network <span>(network: string)</span>
        </label>
        <select name="network" onChange={(e) => { setnetwork(e.target.value) }}>
          <option value="devnet">Devnet</option>
          <option value="testnet">Testnet</option>
          <option value="mainnet-beta">Mainnet Beta</option>
        </select>
        <br />
<label>Public Key (wallet:string)</label>
        <input type="text" value={publicKey} onChange={(e) => setPublicKey(e.target.value)} required />
        <br />
<label htmlFor="name">Name (name:string)</label>
        <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} required />
        <br />
<label htmlFor="symbol">Symbol (symbol:string)</label>
        <input type="text" name="symbol" value={symbol} onChange={(e) => setSymbol(e.target.value)} required />
        <br />
<label htmlFor="desc">Description (description:string)</label>
        <textarea name="desc" value={desc} onChange={(e) => setDesc(e.target.value)} required></textarea>
        <br />
<label htmlFor="attributes">Attributes (attributes:string)</label>
        <textarea name="attributes" value={attr} onChange={(e) => setAttr(e.target.value)} required></textarea>
        <br />
<label htmlFor="external_url">External Url (external_url:string)</label>
        <input type="text" name="external_url" value={extUrl} onChange={(e) => setExtUrl(e.target.value)} />
        <br />
<label htmlFor="max_supply">Max Supply (max_supply:number)</label>
        <input type="number" name="max_supply" value={maxSup} onChange={(e) => { setMaxSup(e.target.value) }} required />
        <br />
<label htmlFor="royalty">Royalty (royalty:number)</label>
        <input type="number" name="royalty" value={roy} onChange={(e) => { setRoy(e.target.value) }} required />
        <br />
<button type="submit" onClick={mintNow}>
          Submit
        </button>
      </form>
<textarea
        className="form-control"
        name=""
        value={JSON.stringify(dispResponse)}
        id=""
        cols="30"
        rows="10"
      ></textarea>
    </div>
  );

这是一个简单的表单，采集以下参数：

选择想要铸造为 NFT 的图像文件
选择网络（测试网、开发网、主网测试版）
你的Phantom钱包的公钥
NFT名称
NFT 符号
NFT 描述
external_Url，可以链接到你想要放置的任何网站。这将在虚拟钱包帐户中可见以进行导航。
可以铸造的一种特定 NFT 的版本数量。如果你想创建一种独一无二的 NFT，可以设置为零。
NFT 创建者的版税百分比。可以是 0–100 之间的任何值。
与 NFT 相关的属性。它是一个 JSON 数组字符串，不要忘记像下面的代码片段中那样进行 Stringify。

let attrib = [{"trait_type": "speed", "value": 100},
{"trait_type": "aggression", "value": "crazy"},
{"trait_type": "energy", "value": "very high"}];
let paramsToPass = JSON.stringify(attrib);
//Here we have created 3 attributes for our NFT, namely:
//1. speed = 100
//2. aggression = "crazy"
//3. energy = "very high"

5、进行 API 调用

获得数据后，我们就可以进行 API 调用了。在本教程中，我们使用 axios 包进行 API 调用，但你可以使用任何其他方法，包括 JavaScript 自己的 fetch。

"dependencies": {
    ...
    "axios": "^0.27.2"
    ....
  },

axios 将允许你的 React 应用程序向 Shyft 的服务器发出 HTTP 请求并创建您的 NFT。

现在，让我们创建一个函数，使用我们在本教程中创建的表单收集的数据来进行 API 调用。

const mintNow = (e) => {
e.preventDefault();
setStatus("Loading");
let formData = new FormData();
formData.append("network", network);
formData.append("wallet", publicKey);
formData.append("name", name);
formData.append("symbol", symbol);
formData.append("description", desc);
formData.append("attributes", JSON.stringify(attr));
formData.append("external_url", extUrl);
formData.append("max_supply", maxSup);
formData.append("royalty", roy);
formData.append("file", file);
axios({
 // Endpoint to send files
 url: "https://api.shyft.to/sol/v1/nft/create_detach",
 method: "POST",
 headers: {
  "Content-Type": "multipart/form-data",
  "x-api-key": "Your-api-key",
  Accept: "*/*",
  "Access-Control-Allow-Origin": "*",
 },
// Attaching the form data
 data: formData,
})
 // Handle the response from backend here
 .then(async (res) => {
  console.log(res);
  if(res.data.success === true)
  {
   setStatus("success: Transaction Created. Signing Transactions. Please Wait.");
   const transaction = res.data.result.encoded_transaction; //encoded transaction
   setSaveMinted(res.data.result.mint);
   const ret_result = await signAndConfirmTransactionFe(network,transaction,callback); //signing the encoded transaction
       console.log(ret_result);
   setDispResp(res.data);
   
  }
 })
// Catch errors if any
 .catch((err) => {
  console.warn(err);
  setStatus("success: false");
 });
}

使用的 API 端点：

POST https://api.shyft.to/sol/v1/nft/create_detach

我们需要将从 SHYFT 网站获取的 API 密钥包含在此 API 调用的标头部分中。有关此 API 和使用的参数的详细信息，请阅读此处的 API 文档。进行上述更改后，链接到完整的 App.js 文件源码可参考这里。

6、交易签名

现在已准备好铸造你的第一个 NFT。请注意，此 API 不需要私钥，而是使用公钥来签署创建操作所需的交易。

前往终端并运行以下命令启动 React 应用程序：

npm run start

应用程序将如下所示：

你所要做的就是在字段中输入信息并点击提交按钮。

一旦点击提交，请求就会发送到 Shyft 服务器，并且你已经成功创建了一个新的 NFT 交易。现在，所需要做的就是使用你的钱包签署此交易，新创建的 NFT 将添加到你的钱包中。🎉

响应结果如下：

{
  "success": true,
  "message": "NFT create request generated successfully",
  "result": {
    "encoded_transaction": "AgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC1sWheB4cuv/Q2+0jo6buiunKcPGhvFP0MkPZKAqEaKsIdRPXcFkiLuiIa/pyUVrKUczLjr1Hs9QG5Y5iDBksMAgAFChjKn1HFRx7tvpclOYMfcFNqxsZNjaEl7aHTEnXr/g8Vvb/IjgDJjQVC1f/ryBRhD4ahT7Q1HBYM6DpJ0WUTWn4RAfrhLTPnJMqAy/QLpEQpZFP+r95vFI1kPxccS3tj+xQxDOha6hFwbvC1+bl1KPipyhIpii09w/bWfkdcNqLoa6h4uighckbsoxU8cDYR7skYHVwb90kZsVS8bPEVzOEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIyXJY9OJInxuz0QKRSODYMLWhOZ2v8QhASOe9jb6fhZC3BlsePRfEU4nVJ/awTDzVi4bHMaoP21SbbRvAP4KUYGp9UXGSxcUSGMyUw9SvF/WNruCJuh/UTj29mKAAAAAAbd9uHXZaGT2cvhRs7reawctIXtX1s3kTqM9YV+/wCpOUrCSjEODK7K+JCY0PfeMucSKkHyBEhkHVSHEcaSI5MGBQIAATQAAAAAYE0WAAAAAABSAAAAAAAAAAbd9uHXZaGT2cvhRs7reawctIXtX1s3kTqM9YV+/wCpCQIBCEMAABjKn1HFRx7tvpclOYMfcFNqxsZNjaEl7aHTEnXr/g8VARjKn1HFRx7tvpclOYMfcFNqxsZNjaEl7aHTEnXr/g8VBgcAAwABBQkIAAkDAQMACQcBAAAAAAAAAAcHAgEAAAAFCJ0BEAkAAABmaXNoIGV5ZXMDAAAARllFWAAAAGh0dHBzOi8vbmZ0c3RvcmFnZS5saW5rL2lwZnMvYmFma3JlaWVmamF6cnhpcGpwYmFwNjZkejQ3ZW80ZWdkdzdscHUzY2tvZW43NXZhdGhvaTRtaWszM2n0AQEBAAAAGMqfUcVHHu2+lyU5gx9wU2rGxk2NoSXtodMSdev+DxUBZAAAAQcJBAEAAAACCQUIChEBAQAAAAAAAAA=",
    "mint": "Pmhfos1S2sipnz3UPgAjHQeeYzFn1pbEqpdissS2fZbj"
  }
}

一旦我们收到 encoded_transaction响应，最后一步就是签署交易。我们可以通过两种方式对 encoded_transaction进行签名，要么使用前端的钱包，要么使用后端的钱包私钥。

可以在此处阅读有关在 Solana 上签署交易的更多信息，或者可以使用我们的在线开发工具来签署编码交易。

成功签名后，NFT 将被创建并添加到你的钱包中。🎉