介绍
数字资产标准 API (DAS) SDK 通过引入类型、单行抽象和正确格式的响应简化了 Solana 上的压缩和 DAS 的功能。
本分步教程将指导您使用 DAS SDK 以该getAssetsByGroup方法在网页上显示 NFT 收藏图像。此外，本教程将为在更复杂的场景中使用 DAS SDK 奠定基础。
先决条件
为了充分利用本教程，请确保您满足以下先决条件：
已安装 npm 或 yarn：这些是管理项目依赖项所必需的包管理器。
JavaScript 基础知识：您应该熟悉 JavaScript 基础知识，例如变量、函数和对象。
已安装 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 请求，而不必设置提取或 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为真，该循环就会持续运行。在这个循环中，我们使用 向 DAS API 发出请求helius.rpc.getAssetsByGroup()。我们提供组键、组值和当前页码。
代码
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 和，并将其添加到我们的数组中。imageresults
代码
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);
}
}
}
请记住用实际的 Helius API 密钥替换YOUR_API_KEY ，并将 groupValue 替换为要显示的集合的实际值。在此示例中，我们的groupValue是8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZHSolana Monkey Business Gen 3 的集合 ID。
步骤 3：创建 Collection 组件
在$lib/components目录中，创建一个名为Collection.svelte的新文件。在此文件中，在标签中设置必要的导入<script>。
在此代码中我们：
导入我们的 getCollection 函数以在此组件中使用。
从 svelte 导入 onMount、onDestroy 和 afterUpdate。
将我们的集合设置为空类型以接收每个 NFT 的名称和图像。
设置我们的onMount函数来调用该getCollection函数，然后设置我们的集合数据。
现在我们可以将 Intersection Observer 设置为仅在图像进入视野时才渲染它们。当您像我们一样加载大量图像时，这一点尤其重要。
3.现在我们可以设置 onDestroy 来停止我们在之前的 afterUpdate 函数中设置的观察者。
4.现在我们可以使用 tailwind 将我们的网格设置为网格格式，并响应所有屏幕尺寸：
5.设置网格内部以将返回的图像加载到显示中：
在上面的代码中我们：
使用外部 div 来使用 tailwind 设置网格和列。
将每个块放在这里以加载每个项目的图像源。
为每个返回显示的 NFT 物品在网格布局中添加一张卡片和一张图像 div。
完整代码如下：
步骤 4：创建显示集合的页面
在你的src/routes目录中，创建一个名为+page.svelte的新文件并输入以下代码：
在此步骤中，我们将收集组件导入到主页中。
2.接下来，设置页面的布局。
在此步骤中，我们将：
设置用于放置页面内容的容器。
添加标题（在 <style> 中设置样式）标签。
将我们导入的 Collection.svelte 放在容器中的 <h1> 正下方。
步骤 5：启动服务器
现在您可以启动 SvelteKit 服务器了。在终端中运行以下命令：
代码
npm run dev
结论
恭喜！您已成功设置了一个 SvelteKit 项目，该项目使用 Helius SDK 来获取和显示 NFT 集合。collection.ts中设置的函数非常灵活，可以在不同的框架中使用。本教程为利用 DAS SDK 实现更复杂的用例奠定了基础。
