Solana Dev 101 - Créer une application SvelteKit avec la nouvelle API DAS

Introduction

Le SDK de l’API Digital Asset Standard (DAS) simplifie la compression et DAS sur Solana grâce à des types, des abstractions en une ligne et des réponses correctement formatées.

Ce tutoriel détaillé vous explique comment utiliser le SDK DAS pour afficher les images d’une collection de NFT sur une page web à l’aide de la méthode getAssetsByGroup. Il pose également les bases de l’utilisation du SDK DAS dans des scénarios plus complexes.

Prérequis

Pour tirer le meilleur parti de ce tutoriel, assurez-vous de disposer des prérequis suivants :

• npm ou yarn installé : ces gestionnaires de paquets sont nécessaires pour gérer les dépendances du projet.
• Connaissances de base en JavaScript : vous devez maîtriser les fondamentaux de JavaScript, comme les variables, les fonctions et les objets.
• Git installé : il est nécessaire pour le contrôle de version et la collaboration.

Configurer votre environnement

Pour suivre ce tutoriel, nous vous recommandons d’utiliser le dépôt de code de base fourni, disponible ici.

Consultez une version en ligne de ce projet ici.

Étape 1 : Configurer un nouveau projet SvelteKit

Commençons par configurer un nouveau projet SvelteKit. Vous pouvez utiliser le modèle create-svelte pour mettre en place la structure du projet. Exécutez la commande suivante dans votre terminal :

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

Accédez ensuite au nouveau répertoire :

cd das-ui

Installez ensuite les dépendances du projet :

npm install

Étape 2 : Configurer la fonction utilitaire

Dans le répertoire src/lib/util configuré, créez un nouveau fichier nommé collection.ts.

Dans ce fichier, configurez une fonction getCollection comme indiqué ci-dessous :

import { Helius } from 'helius-sdk';

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

La fonction getCollection est une fonction asynchrone qui récupère les données d’une collection de NFT depuis une API DAS. Elle utilise le SDK Helius pour effectuer des requêtes RPC, sans avoir à configurer un appel fetch ou axios.

1. Commencez la fonction en vérifiant si des données sont stockées dans le stockage local sous la clé « nftData ». Si c’est le cas, analysez ces données JSON et renvoyez-les.

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

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

Il s’agit d’une forme de mise en cache qui réduit les requêtes réseau inutiles si les données ont déjà été récupérées. Vous pouvez intégrer votre propre logique de mise en cache et de chargement.

       2. Ensuite, nous initialisons notre client Helius avec notre clé API. Vous pouvez éventuellement indiquer le cluster à utiliser, ainsi que l’identifiant de votre requête RPC.

const helius = new Helius('YOUR_API_KEY');

3. Nous initialisons quelques variables pour la pagination. Nous les utiliserons pour parcourir les résultats de l’API DAS, en récupérant 1 000 éléments à la fois jusqu’à ce qu’ils aient tous été récupérés.

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

4. Nous entrons dans une boucle while qui continue de s’exécuter tant que paginate est vrai. Dans cette boucle, nous envoyons une requête à l’API DAS avec helius.rpc.getAssetsByGroup(). Nous fournissons la clé du groupe, sa valeur et le numéro de la page actuelle.

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

5. Nous traitons les éléments de la réponse. Si leur nombre est inférieur à 1 000, nous savons que tous les éléments ont été récupérés. Nous définissons donc paginate sur false pour quitter la boucle. Sinon, nous incrémentons la variable page afin de récupérer la série d’éléments suivante lors de la prochaine itération.

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. Pour chaque élément de la réponse, nous extrayons name et image des métadonnées, puis les ajoutons à notre tableau results.

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

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

7. Enfin, nous stockons les résultats dans le stockage local afin de ne pas avoir à les récupérer de nouveau la prochaine fois, puis nous les renvoyons.

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

Voici le code complet : 

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

N’oubliez pas de remplacer YOUR_API_KEY par votre véritable clé API Helius et groupValue par la valeur réelle de la collection que vous souhaitez afficher. Dans cet exemple, notre groupValue est 8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH, qui correspond à l’identifiant de la collection Solana Monkey Business Gen 3.

Étape 3 : Créer le composant Collection

1. Dans le répertoire $lib/components, créez un nouveau fichier nommé Collection.svelte. Dans ce fichier, configurez les imports nécessaires dans la balise <script>.

Dans ce code, nous :

• Importons notre fonction getCollection afin de l’utiliser dans ce composant.
• Importons onMount, onDestroy et afterUpdate depuis svelte.
• Définissons notre collection avec un type vide afin de recevoir le nom et l’image de chaque NFT.
• Configurons notre fonction onMount pour appeler la fonction getCollection, puis définir les données de notre collection.

2. Nous pouvons maintenant configurer notre Intersection Observer afin d’afficher les images uniquement lorsqu’elles apparaissent à l’écran. C’est particulièrement important lorsque vous chargez autant d’images que dans cet exemple.

3. Nous pouvons maintenant configurer notre onDestroy afin d’arrêter l’observateur configuré dans la fonction afterUpdate précédente.

4. Nous pouvons maintenant configurer notre grille avec Tailwind pour utiliser une mise en page en grille qui s’adapte à toutes les tailles d’écran :

5. Configurez l’intérieur de notre grille pour charger dans l’affichage les images provenant du résultat :

Dans le code ci-dessus, nous :

• Utilisons la div externe pour définir la grille et les colonnes avec Tailwind.
• Plaçons ici un bloc each pour charger la source d’image de chaque élément.
• Ajoutons à la mise en page une div de carte et une div d’image pour chaque NFT renvoyé à afficher.

Voici le code complet :

Étape 4 : Créer la page qui affiche la collection

1. Dans votre répertoire src/routes, créez un nouveau fichier nommé +page.svelte et saisissez le code suivant :

Dans cette étape, nous importons notre composant Collection dans notre page principale.

2. Configurez ensuite la mise en page.

Dans cette étape, nous :

• Définissons le conteneur dans lequel placer le contenu de notre page.
• Ajoutons un en-tête, mis en forme dans la balise <style>.
• Plaçons le fichier Collection.svelte importé juste sous la balise <h1> du conteneur.

Étape 5 : Démarrer le serveur

Vous pouvez maintenant démarrer votre serveur SvelteKit. Exécutez la commande suivante dans votre terminal :

npm run dev

Conclusion

Félicitations ! Vous avez configuré avec succès un projet SvelteKit qui utilise le SDK Helius pour récupérer et afficher une collection de NFT. La fonction configurée dans collection.ts est flexible et peut être utilisée avec différents frameworks. Ce tutoriel pose les bases nécessaires pour exploiter le SDK DAS dans des cas d’utilisation plus complexes.