Solana 开发入门 101：使用新版 DAS API 创建 SvelteKit 应用

简介

数字资产标准 API (DAS) SDK 通过引入类型、单行抽象和格式规范的响应，简化了 Solana 上的压缩技术和 DAS。

本分步教程将指导你使用 DAS SDK，通过 getAssetsByGroup 方法在网页上展示 NFT 系列图片。此外，本教程还将为你在更复杂的场景中使用 DAS SDK 打下基础。

准备工作

为了充分掌握本教程，请确保满足以下准备条件：

已安装 npm 或 yarn：它们是管理项目依赖项所必需的包管理器。
具备 JavaScript 基础知识：你应该熟悉变量、函数和对象等 JavaScript 基础概念。
已安装 Git：版本控制和协作需要使用 Git。

设置开发环境

为了跟随本教程操作，建议使用我们提供的样板仓库，地址在这里。

你可以在这里查看此项目的实时版本。

第 1 步：设置新的 SvelteKit 项目

首先，我们需要设置一个新的 SvelteKit 项目。你可以使用 create-svelte 模板搭建项目结构。在终端中运行以下命令：

代码

git clone https://github.com/helius-labs/das-ui.git

然后进入新目录：

代码

cd das-ui

接下来，安装项目依赖项：

代码

npm install

第 2 步：设置实用函数

在已设置好的 src/lib/util 目录中，创建一个名为 collection.ts 的新文件。

在该文件中设置 getCollection 函数，如下所示：

代码

import { Helius } from 'helius-sdk';

export async function getCollection() {
// Request goes here //
}

getCollection 函数是一个异步函数，用于从 DAS API 获取 NFT 数据集合。它使用 Helius SDK 发出 RPC 请求，无需设置 fetch 或 axios 调用。

首先，检查本地存储中是否有以 'nftData' 为键保存的数据。如果有，则解析该 JSON 数据并将其返回。

代码

const storedData = localStorage.getItem('nftData');

if (storedData !== null) {
    return JSON.parse(storedData);
}

这是一种缓存机制。如果之前已经获取过数据，它可以减少不必要的网络请求。你也可以加入自己的自定义缓存和加载逻辑。

2. 接下来，我们使用 API 密钥初始化 Helius 客户端。你还可以选择传入要使用的集群以及 RPC 请求 ID。

代码

const helius = new Helius('YOUR_API_KEY');

我们初始化几个用于分页的变量。我们将使用这些变量对 DAS API 的结果进行分页，每次获取 1000 个项目，直到获取完所有项目。

代码

let results = [];
let page = 1;
let paginate = true;

我们进入一个 while 循环。只要 paginate 为 true，该循环就会持续运行。在循环中，我们使用 helius.rpc.getAssetsByGroup() 向 DAS API 发出请求，并提供分组键、分组值和当前页码。

代码

while (paginate) {
    try {
        const response = await helius.rpc.getAssetsByGroup({
            groupKey: 'collection',
            groupValue: 'YOUR_COLLECTION_VALUE',
            page: page,
        });
        ...
    }
    ...
}

我们处理响应中的项目。如果项目数量少于 1000，就表示已经获取完所有项目，因此将 paginate 设为 false 以退出循环。否则，我们递增 page 变量，以便在下一次循环迭代中获取下一批项目。

代码

const nfts = response.items;

// if the amount of items returned is less than 1000, stop pagination
if (nfts.length < 1000) {
    paginate = false;
} else {
    // otherwise, increase the page number to get the next page of results
    page++;
}

对于响应中的每个项目，我们从元数据中提取 name 和 image，并将其添加到 results 数组中。

代码

for (const nft of nfts) {
    const name = nft.content?.metadata.name;
    const image = nft.content?.links?.image;

    results.push({ name, image });
}

最后，我们将结果保存在本地存储中（这样下次就不必再次获取），然后返回结果。

代码

localStorage.setItem('nftData', JSON.stringify(results));
return results;

完整代码如下：

代码

import { Helius } from 'helius-sdk';

export async function getCollection() {
	const storedData = localStorage.getItem('nftData');

	if (storedData !== null) {
		return JSON.parse(storedData);
	}

	const helius = new Helius('YOUR_API_KEY');
	let results = [];
	let page = 1;
	let paginate = true;
	while (paginate) {
		try {
			const response = await helius.rpc.getAssetsByGroup({
				groupKey: 'collection',
				groupValue: '8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH',
				page: page,
			});
			const nfts = response.items;

			// if the amount of items returned is less than 1000, stop pagination
			if (nfts.length < 1000) {
				paginate = false;
			} else {
				// otherwise, increase the page number to get the next page of results
				page++;
			}
			for (const nft of nfts) {
				const name = nft.content?.metadata.name;
				const image = nft.content?.links?.image;

				results.push({ name, image });
			}
			localStorage.setItem('nftData', JSON.stringify(results));
			return results;
		} catch (e) {
			console.log(e);
		}
	}
}

请记得将 YOUR_API_KEY 替换为你的实际 Helius API 密钥，并将 groupValue 替换为你想要展示的系列的实际值。在此示例中，我们的 groupValue 是 8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH，即 Solana Monkey Business Gen 3 的系列 ID。