Solana Dev 101 - Tạo ứng dụng SvelteKit với DAS API mới

Giới thiệu

SDK Digital Asset Standard API (DAS) đơn giản hóa khả năng nén và DAS trên Solana bằng cách cung cấp các kiểu dữ liệu, lớp trừu tượng một dòng và phản hồi được định dạng đúng chuẩn.

Hướng dẫn từng bước này sẽ chỉ cho bạn cách dùng DAS SDK để hiển thị hình ảnh bộ sưu tập NFT trên trang web bằng phương thức getAssetsByGroup. Ngoài ra, hướng dẫn này còn đặt nền tảng để sử dụng DAS SDK trong các tình huống phức tạp hơn.

Điều kiện tiên quyết

Để tận dụng tối đa hướng dẫn này, hãy đảm bảo bạn đáp ứng các điều kiện tiên quyết sau:

• Đã cài đặt npm hoặc yarn: Đây là các trình quản lý gói cần thiết để quản lý phần phụ thuộc của dự án.
• Kiến thức cơ bản về JavaScript: Bạn nên nắm vững các kiến thức nền tảng của JavaScript như biến, hàm và đối tượng.
• Đã cài đặt Git: Công cụ này cần thiết cho việc kiểm soát phiên bản và cộng tác.

Thiết lập môi trường

Để làm theo hướng dẫn này, chúng tôi khuyên bạn sử dụng kho lưu trữ mã khởi đầu được cung cấp tại đây.

Xem phiên bản trực tiếp của bản dựng này tại đây.

Bước 1: Thiết lập dự án SvelteKit mới

Trước tiên, chúng ta cần thiết lập một dự án SvelteKit mới. Bạn có thể dùng mẫu create-svelte để thiết lập cấu trúc dự án. Chạy lệnh sau trong terminal:

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

Sau đó, chuyển đến thư mục mới:

cd das-ui

Tiếp theo, cài đặt các phần phụ thuộc của dự án:

npm install

Bước 2: Thiết lập hàm tiện ích

Trong thư mục src/lib/util đã thiết lập, hãy tạo một tệp mới có tên collection.ts.

Trong tệp này, hãy thiết lập hàm getCollection như bên dưới:

import { Helius } from 'helius-sdk';

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

Hàm getCollection là một hàm bất đồng bộ dùng để truy xuất bộ dữ liệu NFT từ DAS API. Hàm này sử dụng Helius SDK để gửi yêu cầu RPC thay vì phải thiết lập lệnh gọi fetch hoặc axios.

1. Bắt đầu hàm bằng cách kiểm tra xem local storage có dữ liệu nào được lưu dưới khóa 'nftData' hay không. Nếu có, hãy phân tích dữ liệu JSON đó và trả về.

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

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

Đây là một hình thức lưu vào bộ nhớ đệm nhằm giảm các yêu cầu mạng không cần thiết nếu dữ liệu đã được truy xuất trước đó. Bạn có thể dùng logic tải và bộ nhớ đệm tùy chỉnh của riêng mình.

       2. Tiếp theo, chúng ta khởi tạo Helius client bằng API key. Bạn cũng có thể truyền vào cluster muốn sử dụng và ID yêu cầu cho RPC.

const helius = new Helius('YOUR_API_KEY');

3. Chúng ta khởi tạo một vài biến để phân trang. Các biến này sẽ được dùng để phân trang kết quả từ DAS API, truy xuất 1000 mục mỗi lần cho đến khi lấy được toàn bộ mục.

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

4. Chúng ta vào vòng lặp while, vòng lặp này sẽ tiếp tục chạy miễn là paginate là true. Bên trong vòng lặp, chúng ta gửi yêu cầu đến DAS API bằng helius.rpc.getAssetsByGroup(). Chúng ta cung cấp khóa nhóm, giá trị nhóm và số trang hiện tại.

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

5. Chúng ta xử lý các mục trong phản hồi. Nếu số lượng mục ít hơn 1000, tức là đã truy xuất toàn bộ mục, vì vậy chúng ta đặt paginate thành false để thoát vòng lặp. Nếu không, chúng ta tăng biến page để truy xuất nhóm mục tiếp theo trong lần lặp kế tiếp.

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++;
}

6. Với mỗi mục trong phản hồi, chúng ta trích xuất name và image từ metadata rồi thêm vào mảng results.

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

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

7. Cuối cùng, chúng ta lưu kết quả vào local storage để không phải truy xuất lại vào lần sau, rồi trả về kết quả.

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

Đây là toàn bộ mã: 

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);
		}
	}
}

Hãy nhớ thay YOUR_API_KEY bằng Helius API key thực tế của bạn và groupValue bằng giá trị thực tế của bộ sưu tập muốn hiển thị. Trong ví dụ này, groupValue là 8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH, đây là ID bộ sưu tập của Solana Monkey Business Gen 3.

Bước 3: Tạo component Collection

1. Trong thư mục $lib/components, hãy tạo một tệp mới có tên Collection.svelte. Trong tệp này, hãy thiết lập các lệnh import cần thiết trong thẻ <script>.

Trong đoạn mã này, chúng ta đang:

• Import hàm getCollection để sử dụng trong component này.
• Import onMount, onDestroy và afterUpdate từ svelte.
• Đặt collection thành một kiểu trống để nhận tên và hình ảnh cho mỗi NFT.
• Thiết lập hàm onMount để gọi hàm getCollection, sau đó đặt dữ liệu cho collection.

2. Bây giờ, chúng ta có thể thiết lập Intersection Observer để chỉ kết xuất hình ảnh khi chúng xuất hiện trong vùng nhìn thấy. Điều này đặc biệt quan trọng khi tải nhiều hình ảnh như trong trường hợp này.

3. Bây giờ, chúng ta có thể thiết lập onDestroy để dừng observer đã tạo trong hàm afterUpdate trước đó.

4. Bây giờ, chúng ta có thể thiết lập lưới bằng Tailwind theo định dạng lưới và tương thích với mọi kích thước màn hình:

5. Thiết lập phần bên trong lưới để tải hình ảnh từ kết quả trả về vào giao diện:

Trong đoạn mã trên, chúng ta đang:

• Dùng div bên ngoài để thiết lập lưới và các cột bằng Tailwind.
• Đặt một khối each tại đây để tải nguồn hình ảnh cho từng mục.
• Thêm div thẻ và hình ảnh vào bố cục lưới cho mỗi mục NFT được trả về để hiển thị.

Đây là toàn bộ mã:

Bước 4: Tạo trang để hiển thị bộ sưu tập

1. Trong thư mục src/routes, hãy tạo một tệp mới có tên +page.svelte và nhập đoạn mã sau:

Trong bước này, chúng ta import component collection vào trang chính.

2. Tiếp theo, thiết lập bố cục cho trang.

Trong bước này, chúng ta đang:

• Thiết lập container để chứa nội dung trang.
• Thêm tiêu đề được định kiểu trong thẻ <style>.
• Đặt Collection.svelte đã import ngay bên dưới <h1> trong container.

Bước 5: Khởi động máy chủ

Bây giờ, bạn đã sẵn sàng khởi động máy chủ SvelteKit. Chạy lệnh sau trong terminal:

npm run dev

Kết luận

Xin chúc mừng! Bạn đã thiết lập thành công một dự án SvelteKit sử dụng Helius SDK để truy xuất và hiển thị một bộ sưu tập NFT. Hàm được thiết lập trong collection.ts rất linh hoạt và có thể dùng trong nhiều framework khác nhau. Hướng dẫn này đặt nền tảng để tận dụng DAS SDK cho các trường hợp sử dụng phức tạp hơn.