從 0 開始，結合 Anchor 打造 NFT 鑄造功能的 Action & Blink (Part 3 串接API)

好的！相信到這裡的夥伴都完成合約部署和 NFT URL 生成。接下來將包括設置 API 端點、與 Anchor 合約互動，以及觸發 Action & Blink。

前置作業

• 添加出現在Blink 上圖片到 public file
• Webpack 設置

pnpm add ​stream-browserify crypto-browserify

/** @type {import('next').NextConfig} */
const nextConfig = {
	webpack: (config, options) => {
		if (options.nextRuntime === 'edge') {
				config.resolve.fallback = {
					...config.resolve.fallback,
					crypto: 'crypto-browserify',
					stream: 'stream-browserify',
				};
			}
			return config;
		},
	};
export default nextConfig;

• Solana 相關套件安裝

pnpm add @coral-xyz/anchor \
		@solana/actions \
		@solana/spl-token \
		@solana/web3.js

• 設置 actions.json

• 搬移 idl (類似 Ethereum 上 ABI)

mkdir app/my-app/app/idls
cp target/idl/action_example.json ./app/my-app/app/idls/action_example.json
cp target/types/action_example.ts ./app/my-app/app/idls/action_example.tsAPI 端點 (Get/Post Request)

假如搜尋不到 json or ts 檔案 ，請確認是否有成功部署合約。

接下來，我們就來建立我們的 API 服務

GET :

按照底下的標示 填入自己想要的內容，另外，由於 Mint NFT 需要 Name, Symbol, URL, 因此我們以參數的方式分別傳入

POST :

當完成了 Get 後，Blink 畫面也完成了，接下來我們將實作Post ，也就是與合約互動，在連結上實現與鏈上操作的部分。

接下來，我們可到 Dialect 的網站 測試我們的網頁

確認無誤後，可嘗試透過 cloudflare, vercel 部署一個專門的網域，給親朋好友都試試這個酷功能。請注意，記得設定根路徑為 /app/my-app。

最後，這裡是相關內容的連結

Github：https://github.com/XueDAOTW/sol_anchor_blink_nft

Website : https://dial.to/?action=solana-action:https://sol-anchor-blink-nft.pages.dev/api/mint&cluster=devnet