Solana Dev 101 - Membuat Aplikasi SvelteKit dengan DAS API Baru

Pendahuluan

SDK Digital Asset Standard API (DAS) menyederhanakan penggunaan kompresi dan DAS di Solana dengan menyediakan tipe, abstraksi satu baris, dan respons yang diformat dengan tepat.

Tutorial langkah demi langkah ini akan memandu Anda menggunakan DAS SDK untuk menampilkan gambar koleksi NFT di halaman web dengan metode getAssetsByGroup. Selain itu, tutorial ini akan menjadi dasar untuk menggunakan DAS SDK dalam skenario yang lebih kompleks.

Prasyarat

Untuk mendapatkan manfaat maksimal dari tutorial ini, pastikan Anda memenuhi prasyarat berikut:

• npm atau yarn telah terinstal: Keduanya adalah pengelola paket yang diperlukan untuk mengelola dependensi proyek.
• Pengetahuan dasar tentang JavaScript: Anda harus memahami dasar-dasar JavaScript seperti variabel, fungsi, dan objek.
• Git telah terinstal: Git diperlukan untuk kontrol versi dan kolaborasi.

Menyiapkan lingkungan Anda

Untuk mengikuti tutorial ini, sebaiknya gunakan repositori boilerplate yang tersedia di sini.

Lihat versi aktif dari hasil build ini di sini.

Langkah 1: Siapkan proyek SvelteKit baru

Pertama, kita perlu menyiapkan proyek SvelteKit baru. Anda dapat menggunakan template create-svelte untuk menyiapkan struktur proyek. Jalankan perintah berikut di terminal Anda:

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

Kemudian, buka direktori baru tersebut:

cd das-ui

Selanjutnya, instal dependensi proyek:

npm install

Langkah 2: Siapkan fungsi utilitas

Di direktori src/lib/util yang telah disiapkan, buat file baru bernama collection.ts.

Di dalam file ini, siapkan fungsi getCollection seperti yang ditunjukkan di bawah ini:

import { Helius } from 'helius-sdk';

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

Fungsi getCollection adalah fungsi asinkron yang akan mengambil sekumpulan data NFT dari DAS API. Fungsi ini menggunakan Helius SDK untuk membuat permintaan RPC sehingga Anda tidak perlu menyiapkan panggilan fetch atau axios.

1. Mulai fungsi dengan memeriksa apakah ada data yang tersimpan di penyimpanan lokal dengan kunci 'nftData'. Jika ada, uraikan data JSON tersebut dan kembalikan hasilnya.

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

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

Ini merupakan bentuk caching untuk mengurangi permintaan jaringan yang tidak perlu jika data telah diambil sebelumnya. Anda dapat menggunakan logika cache dan pemuatan kustom Anda sendiri.

       2. Selanjutnya, kita menginisialisasi klien Helius dengan API key kita. Anda juga dapat menyertakan cluster yang ingin digunakan serta ID permintaan Anda untuk RPC.

const helius = new Helius('YOUR_API_KEY');

3. Kita menginisialisasi beberapa variabel untuk paginasi. Variabel ini akan digunakan untuk menelusuri hasil dari DAS API per halaman, dengan mengambil 1.000 item setiap kali hingga semua item selesai diambil.

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

4. Kita memasuki loop while yang akan terus berjalan selama paginate bernilai true. Di dalam loop ini, kita membuat permintaan ke DAS API menggunakan helius.rpc.getAssetsByGroup(). Kita menyediakan group key, group value, dan nomor halaman saat ini.

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

5. Kita memproses item dalam respons. Jika jumlah item kurang dari 1.000, berarti semua item telah diambil. Karena itu, kita menetapkan paginate ke false untuk keluar dari loop. Jika tidak, kita menaikkan variabel page untuk mengambil kumpulan item berikutnya pada iterasi loop selanjutnya.

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. Untuk setiap item dalam respons, kita mengekstrak name dan image dari metadata, lalu menambahkannya ke array results.

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

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

7. Terakhir, kita menyimpan hasilnya di penyimpanan lokal agar tidak perlu mengambilnya lagi di lain waktu, lalu mengembalikan hasil tersebut.

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

Berikut kode lengkapnya: 

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

Jangan lupa mengganti YOUR_API_KEY dengan API key Helius Anda yang sebenarnya dan groupValue dengan nilai aktual koleksi yang ingin ditampilkan. Dalam contoh ini, groupValue kita adalah 8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH, yaitu ID koleksi untuk Solana Monkey Business Gen 3.

Langkah 3: Buat komponen Collection

1. Di direktori $lib/components, buat file baru bernama Collection.svelte. Di dalam file ini, siapkan impor yang diperlukan dalam tag <script>.

Dalam kode ini, kita:

• Mengimpor fungsi getCollection untuk digunakan dalam komponen ini.
• Mengimpor onMount, onDestroy, dan afterUpdate dari svelte.
• Menetapkan koleksi kita ke tipe kosong untuk menerima nama dan gambar setiap NFT.
• Menyiapkan fungsi onMount untuk memanggil fungsi getCollection, lalu menetapkan data koleksi kita.

2. Sekarang kita dapat menyiapkan Intersection Observer agar gambar hanya dirender saat muncul di layar. Hal ini sangat penting ketika Anda memuat gambar sebanyak ini.

3. Sekarang kita dapat menyiapkan onDestroy untuk menghentikan observer yang telah disiapkan dalam fungsi afterUpdate sebelumnya.

4. Sekarang kita dapat menyiapkan grid dengan tailwind agar menggunakan format grid dan responsif di semua ukuran layar:

5. Siapkan bagian dalam grid untuk memuat gambar dari hasil yang dikembalikan ke tampilan:

Dalam kode di atas, kita:

• Menggunakan div luar untuk mengatur grid dan kolom dengan tailwind.
• Menempatkan blok each di sini untuk memuat sumber gambar bagi setiap item.
• Menambahkan div kartu dan gambar ke tata letak grid untuk setiap item NFT yang dikembalikan agar ditampilkan.

Berikut kode lengkapnya:

Langkah 4: Buat halaman untuk menampilkan koleksi

1. Di direktori src/routes, buat file baru bernama +page.svelte, lalu masukkan kode berikut:

Pada langkah ini, kita mengimpor komponen koleksi ke halaman utama.

2. Selanjutnya, siapkan tata letak halaman.

Dalam langkah ini, kita:

• Menyiapkan container sebagai tempat konten halaman kita.
• Menambahkan header (yang diberi gaya dalam tag <style>).
• Menempatkan Collection.svelte yang telah diimpor tepat di bawah <h1> dalam container.

Langkah 5: Jalankan server

Sekarang Anda siap menjalankan server SvelteKit. Jalankan perintah berikut di terminal Anda:

npm run dev

Kesimpulan

Selamat! Anda telah berhasil menyiapkan proyek SvelteKit yang menggunakan Helius SDK untuk mengambil dan menampilkan koleksi NFT. Fungsi yang disiapkan dalam collection.ts bersifat fleksibel dan dapat digunakan dalam berbagai framework. Tutorial ini menjadi dasar untuk memanfaatkan DAS SDK dalam kasus penggunaan yang lebih kompleks.