Solana Dev 101 – Eine SvelteKit-App mit der neuen DAS API erstellen

Einführung

Das SDK der Digital Asset Standard API (DAS) vereinfacht Compression und DAS auf Solana. Es bietet Typen, Abstraktionen mit nur einer Codezeile und korrekt formatierte Antworten.

Dieses Schritt-für-Schritt-Tutorial zeigt dir, wie du mit dem DAS SDK und der Methode getAssetsByGroup Bilder einer NFT-Collection auf einer Webseite anzeigst. Außerdem schafft es die Grundlage dafür, das DAS SDK in komplexeren Szenarien einzusetzen.

Voraussetzungen

Damit du dieses Tutorial optimal nutzen kannst, brauchst du Folgendes:

• Installiertes npm oder yarn: Diese Paketmanager brauchst du, um die Abhängigkeiten des Projekts zu verwalten.
• Grundkenntnisse in JavaScript: Du solltest mit JavaScript-Grundlagen wie Variablen, Funktionen und Objekten vertraut sein.
• Installiertes Git: Du brauchst es für Versionskontrolle und Zusammenarbeit.

Deine Umgebung einrichten

Für dieses Tutorial empfehlen wir das bereitgestellte Boilerplate-Repository. Du findest es hier.

Eine Live-Ansicht dieses Builds findest du hier.

Schritt 1: Ein neues SvelteKit-Projekt einrichten

Zuerst musst du ein neues SvelteKit-Projekt einrichten. Mit dem create-svelte-Template kannst du die Projektstruktur erstellen. Führe dazu den folgenden Befehl in deinem Terminal aus:

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

Wechsle anschließend in das neue Verzeichnis:

cd das-ui

Installiere als Nächstes die Projektabhängigkeiten:

npm install

Schritt 2: Die Hilfsfunktion einrichten

Erstelle im eingerichteten Verzeichnis src/lib/util eine neue Datei namens collection.ts.

Richte in dieser Datei wie unten gezeigt eine getCollection-Funktion ein:

import { Helius } from 'helius-sdk';

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

Die Funktion getCollection ist asynchron und ruft eine Collection mit NFT-Daten von einer DAS API ab. Sie verwendet das Helius SDK für RPC-Anfragen, sodass du keinen fetch- oder axios-Aufruf einrichten musst.

1. Prüfe zu Beginn der Funktion, ob im lokalen Speicher unter dem Schlüssel „nftData“ Daten gespeichert sind. Falls ja, parse diese JSON-Daten und gib sie zurück.

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

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

Das ist eine Form des Cachings, die unnötige Netzwerkanfragen vermeidet, wenn die Daten bereits abgerufen wurden. Du kannst deine eigene Cache- und Ladelogik verwenden.

       2. Als Nächstes initialisieren wir unseren Helius-Client mit unserem API-Schlüssel. Optional kannst du den gewünschten Cluster und deine Anfrage-ID für den RPC angeben.

const helius = new Helius('YOUR_API_KEY');

3. Wir initialisieren einige Variablen für die Paginierung. Mit ihnen durchlaufen wir die Ergebnisse der DAS API und rufen jeweils 1.000 Elemente ab, bis alle Elemente geladen sind.

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

4. Wir starten eine while-Schleife, die ausgeführt wird, solange paginate true ist. Innerhalb dieser Schleife senden wir über helius.rpc.getAssetsByGroup() eine Anfrage an die DAS API. Dabei übergeben wir den Gruppenschlüssel, den Gruppenwert und die aktuelle Seitennummer.

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

5. Wir verarbeiten die Elemente in der Antwort. Sind es weniger als 1.000, wurden alle Elemente abgerufen. Deshalb setzen wir paginate auf false und beenden die Schleife. Andernfalls erhöhen wir die Variable page, um im nächsten Schleifendurchlauf die nächsten Elemente abzurufen.

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. Für jedes Element in der Antwort extrahieren wir name und image aus den Metadaten und fügen sie unserem Array results hinzu.

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

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

7. Abschließend speichern wir die Ergebnisse im lokalen Speicher, damit wir sie beim nächsten Mal nicht erneut abrufen müssen, und geben sie zurück.

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

Hier ist der vollständige Code: 

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

Ersetze YOUR_API_KEY durch deinen tatsächlichen Helius API-Schlüssel und groupValue durch den tatsächlichen Wert der Collection, die du anzeigen möchtest. In diesem Beispiel ist unser groupValue gleich 8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH. Das ist die Collection-ID für Solana Monkey Business Gen 3.

Schritt 3: Die Collection-Komponente erstellen

1. Erstelle im Verzeichnis $lib/components eine neue Datei namens Collection.svelte. Richte in dieser Datei die erforderlichen Imports im Tag <script> ein.

In diesem Code:

• importieren wir unsere getCollection-Funktion, um sie in dieser Komponente zu verwenden.
• importieren wir onMount, onDestroy und afterUpdate aus svelte.
• legen wir unsere Collection als leeren Typ fest, um für jedes NFT einen Namen und ein Bild zu empfangen.
• richten wir unsere onMount-Funktion so ein, dass sie die Funktion getCollection aufruft und anschließend unsere Collection-Daten setzt.

2. Jetzt können wir unseren Intersection Observer so konfigurieren, dass Bilder erst gerendert werden, wenn sie in den sichtbaren Bereich kommen. Das ist besonders wichtig, wenn du so viele Bilder lädst wie in diesem Beispiel.

3. Jetzt können wir onDestroy so einrichten, dass der in der vorherigen afterUpdate-Funktion konfigurierte Observer beendet wird.

4. Jetzt können wir unser Grid mit Tailwind als Raster einrichten und für alle Bildschirmgrößen responsiv gestalten:

5. Richte den Inhalt unseres Grids so ein, dass die zurückgegebenen Bilder in die Anzeige geladen werden:

Im obigen Code:

• verwenden wir das äußere div, um mit Tailwind das Grid und die Spalten festzulegen.
• fügen wir hier einen each-Block ein, um die Bildquelle für jedes Element zu laden.
• fügen wir für jedes zurückgegebene NFT-Element ein Karten- und Bild-div zum Grid-Layout hinzu.

Hier ist der vollständige Code:

Schritt 4: Die Seite zur Anzeige der Collection erstellen

1. Erstelle in deinem Verzeichnis src/routes eine neue Datei namens +page.svelte und füge den folgenden Code ein:

In diesem Schritt importieren wir unsere Collection-Komponente in unsere Hauptseite.

2. Richte als Nächstes das Layout der Seite ein.

In diesem Schritt:

• richten wir den Container für den Inhalt unserer Seite ein.
• fügen wir einen Header hinzu, der im Tag <style> gestaltet wird.
• platzieren wir unsere importierte Collection.svelte direkt unter <h1> im Container.

Schritt 5: Den Server starten

Jetzt kannst du deinen SvelteKit-Server starten. Führe den folgenden Befehl in deinem Terminal aus:

npm run dev

Fazit

Glückwunsch! Du hast erfolgreich ein SvelteKit-Projekt eingerichtet, das mit dem Helius SDK eine Collection von NFTs abruft und anzeigt. Die in collection.ts eingerichtete Funktion ist flexibel und kann in verschiedenen Frameworks verwendet werden. Dieses Tutorial schafft die Grundlage dafür, das DAS SDK für komplexere Anwendungsfälle einzusetzen.