La première étape que vous franchirez pour créer une Dapp de frappe NFT consiste à préparer l'œuvre d'art. Sans l'illustration, vous ne pouvez pas actualiser votre projet NFT. Une autre raison de prétraiter vos œuvres d'art est de générer des métadonnées pour chacune des images. Sans ces métadonnées, votre NFT ne peut être vendu sur aucun des grands marchés secondaires, comme Opensea. Par exemple, l'image ci-dessous est un NFT sur le marché Opensea contenant des métadonnées qui peuvent également être vues ci-dessous. Les informations ci-dessus, y compris l'illustration, ses détails et ses caractéristiques, peuvent être vues sur l'image IPFS ci-dessous. Configuration des dépendances du projet Ouvrez votre terminal et accédez au répertoire de votre projet ou créez un dossier de projet à un emplacement spécifique. Par exemple, l'exécution de sur le terminal créera un dossier appelé « à l'emplacement spécifié. **mkdir preprocessor** preprocessor » Ensuite, exécutez les commandes suivantes sur le terminal. cd preprocessor npm init -y npm install sharp @faker.js/faker --save-dev Les commandes ci-dessus installeront les bibliothèques et sur votre projet. La bibliothèque de faux nous aidera à générer des informations aléatoires. Alors que la bibliothèque pointue nous aidera à traiter l'image à une certaine dimension, qualité et format. sharp faker Ensuite, créez un dossier dans votre projet appelé et un autre appelé . Dans le dossier "arts", placez toutes les images à traiter à l'intérieur. arts outputs Une fois les étapes ci-dessus accomplies, ouvrez le projet sur "Code VS". La structure du projet devrait ressembler à celle ci-dessous. - preprocessor/ - arts/ - node_modules/ - outputs/ - package.json - package-lock.json Super, passons au codage du moteur chargé de traiter les images. Conditions préalables Vous aurez besoin des éléments suivants installés sur votre ordinateur pour terminer ce didacticiel. NodeJs Application de bureau IPFS Code VS Codage du moteur de traitement Créez un fichier à la racine de votre projet appelé et collez le code suivant **imagify.js** const fs = require('fs') const path = require('path') const sharp = require('sharp') const { faker } = require('@faker-js/faker') const input = './arts' const output = './outputs' let img_counter = 1 const imgSize = { width: 500, height: 500 } const desired_ext = '.webp' const base_url = 'https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/' const attributes = { weapon: [ 'Stick', 'Knife', 'Blade', 'Clube', 'Ax', 'Sword', 'Spear', 'Gun', 'Craft', ], environment: [ 'Space', 'Sky', 'Desert', 'Forest', 'Grassland', 'Moiuntains', 'Oceans', 'Rainforest', ], rarity: Array.from(Array(10).keys()), } fs.readdirSync(input).forEach((file) => { const orginal_ext = path.extname(file) const orginal_file_name = path.basename(file).split('.')[0] if (['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(orginal_ext)) { const id = img_counter const metadata = { id, name: `Adulam NFT #${id}`, description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: base_url + id + desired_ext, demand: faker.random.numeric({ min: 10, max: 100 }), attributes: [ { trait_type: 'Environment', value: attributes.environment.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Weapon', value: attributes.weapon.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Rarity', value: attributes.rarity.sort(() => 0.5 - Math.random())[0], max_value: 10, }, { display_type: 'date', trait_type: 'Created', value: Date.now(), }, { display_type: 'number', trait_type: 'generation', value: 1, }, ], } if (fs.existsSync(`${input}/${orginal_file_name + orginal_ext}`)) { sharp(`${input}/${orginal_file_name + orginal_ext}`) .resize(imgSize.height, imgSize.width) .toFile(`${output}/images/${id + desired_ext}`, (err, info) => console.log(err), ) fs.writeFileSync(`${output}/metadata/${id}.json`, JSON.stringify(metadata), { encoding: 'utf-8', flag: 'w', }) } console.log(metadata) img_counter++ } }) Les étapes suivantes vous aideront à comprendre le fonctionnement de ce moteur de traitement des métadonnées. Importation des bibliothèques essentielles const fs = require('fs') const path = require('path') const sharp = require('sharp') const { faker } = require('@faker-js/faker') const input = './arts' const output = './outputs' Le représente le système de fichiers, c'est un module intégré fourni avec NodeJs. Il a la responsabilité de gérer les activités de lecture et d'écriture de fichiers sur votre machine. fs Le est un autre module de nœud qui vous aide à naviguer dans les structures de répertoires de votre machine. Cela contribuera à localiser où nos images sont conservées. path Sharp est le module que nous utilisons pour traiter l'image, comme le redimensionner et la transformer en un type de fichier différent. Nous utiliserons le faker pour générer un nombre aléatoire. Enfin, la variable contient l'emplacement où se trouvent les images à traiter et la pointe vers l'emplacement où les images traitées seront enregistrées. input output Définition des variables essentielles let img_counter = 1 const imgSize = { width: 500, height: 500 } const desired_ext = '.webp' const base_url = 'https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/' const attributes = { weapon: [ 'Stick', 'Knife', 'Blade', 'Clube', 'Ax', 'Sword', 'Spear', 'Gun', 'Craft', ], environment: [ 'Space', 'Sky', 'Desert', 'Forest', 'Grassland', 'Moiuntains', 'Oceans', 'Rainforest', ], rarity: Array.from(Array(10).keys()), } Les codes ci-dessus contiennent des variables importantes à utiliser lors de la génération de nos métadonnées. nous aide à numéroter les images de manière cohérente avec l'itération actuelle. **Image_counter** définit la dimension de la largeur et de la hauteur de chaque image à traiter. **ImgSize** parle du format de fichier que vous voulez que vos images traitées portent. **Desired_ext** spécifie l'emplacement où les images doivent être stockées sur l'IPFS. **Base_url** contient des informations supplémentaires sur les métadonnées de chaque image. **Attributes** Exécution d'une tâche récursive fs.readdirSync(input).forEach((file) => { if(['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(orginal_ext)) { // Images and metadata tasks are recursively performed here... } }) Dans le bloc de code ci-dessus, nous avons utilisé la bibliothèque du système de fichiers (fs) pour parcourir toutes les images de l'emplacement (arts). Et pour chacune des images, nous nous sommes assurés que notre moteur ne sélectionne que des images à partir d'une liste approuvée d'extensions. **input** Exécution de la tâche de métadonnées const id = img_counter const metadata = { id, name: `Adulam NFT #${id}`, description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: base_url + id + desired_ext, demand: faker.random.numeric({ min: 10, max: 100 }), attributes: [ { trait_type: 'Environment', value: attributes.environment.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Weapon', value: attributes.weapon.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Rarity', value: attributes.rarity.sort(() => 0.5 - Math.random())[0], max_value: 10, }, { display_type: 'date', trait_type: 'Created', value: Date.now(), }, { display_type: 'number', trait_type: 'generation', value: 1, }, ], } Dans le bloc de code ci-dessus, nous avons fourni des valeurs pour chaque espace de métadonnées. Par exemple, les environnements, les armes et toutes les valeurs de trait sont fournies de manière aléatoire et dynamique. Exécution de la tâche de transformation d'image if (fs.existsSync(`${input}/${orginal_file_name + orginal_ext}`)) { sharp(`${input}/${orginal_file_name + orginal_ext}`) .resize(imgSize.height, imgSize.width) .toFile(`${output}/images/${id + desired_ext}`, (err, info) => console.log(err), ) fs.writeFileSync(`${output}/metadata/${id}.json`, JSON.stringify(metadata), { encoding: 'utf-8', flag: 'w', }) } console.log(metadata) img_counter++ Dans l'extrait ci-dessus, nous avons de nouveau utilisé le module de système de fichiers pour d'abord localiser chacune de nos illustrations et la redimensionner à notre dimension spécifiée (500 x 500). De plus, nous avons fourni un nouveau nom en ligne avec l'itération actuelle et lui avons donné l'extension souhaitée (webp). Le redimensionnement et la transformation des images en grandement optimisé nos œuvres d'art à une hauteur étonnante. webp Par exemple, où j'ai soumis ce moteur de prétraitement d'images à images totalisant une taille de . La taille est descendue à pour l'extension et à 4,5 Cette énorme réduction de taille représente un grand bond dans le temps de chargement d'un site Web Minting construit avec mes images. dans cette vidéo 99 111MB 62MB .png .webp 4.5MB Enfin à partir du bloc de code ci-dessus, nous avons créé des métadonnées pour chaque image traitée, portant à la fois un nom identique et une URL pointant vers l'emplacement de l'image. Ces métadonnées sont ce que nous allons déployer sur IPFS après le traitement des images. JSON Maintenant, exécutez la commande ci-dessous pour transformer votre image. Assurez-vous d'être dans votre dossier de projet. node imagify.js À ce stade, nous en avons terminé avec notre moteur d'image, notre dossier de sortie devrait avoir la structure de fichier suivante comme résultat. - output/ - images - 1.webp - 2.webp - ...... - metadata - 1.json - 2.json - ...... Téléchargement d'images et de métadonnées sur IPFS IPFS signifie le système de fichiers interplanétaire, il est peer-to-peer et décentralisé. Il n'existe pas de moyen simple d'extraire les données stockées sur l'IPFS et, en tant que tel, il s'agit d'un pair presque parfait à utiliser avec vos applications blockchain pour stocker le contenu multimédia. Pour utiliser la méthode simple et moins déroutante, rendez-vous sur la page d'installation de l'application IPFS Desktop et suivez les instructions qui y sont spécifiées. Une fois l'installation réussie, ouvrez l'application IPFS et téléchargez EN PREMIER, et je le répète, téléchargez EN PREMIER le dossier images. Une chaîne CID (identification de contenu) unique sera générée dans le cadre du nom du dossier, voir l'image ci-dessous. Maintenant, copiez le dossier d'images CID comme on peut le voir sur l'image ci-dessus, et remplacez-le dans votre code . Voir le code ci-dessous. **imagify.js** const base_url = "https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/" //old string const base_url = "https://ipfs.io/ipfs/QmY1zrFibpdHQ7qcqZqq7THsqTremZYepXNWR5Au3MF1ST/" //new string Maintenant, exécutez à nouveau le pour inclure l'emplacement précis de chaque image dans vos métadonnées . Voir un exemple des métadonnées JSON générées avant et après le remplacement du CID. **node imagify.js** JSON Vous pouvez regarder cette vidéo pour comprendre comment j'ai utilisé ces images et métadonnées sur un projet complet de frappe NFT. https://www.youtube.com/watch?v=QN3wb_mXBjY?embedable=true Avant le remplacement du CID { id: 97, name: 'Adulam NFT #97', description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: 'https://ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/97.webp', demand: '4', attributes: [ { trait_type: 'Environment', value: 'Forest' }, { trait_type: 'Weapon', value: 'Craft' }, { trait_type: 'Rarity', value: 4, max_value: 10 }, { display_type: 'date', trait_type: 'Created', value: 1664478034024 }, { display_type: 'number', trait_type: 'generation', value: 1 } ] } Après le remplacement du CID { id: 97, name: 'Adulam NFT #97', description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: 'https://ipfs.io/ipfs/QmY1zrFibpdHQ7qcqZqq7THsqTremZYepXNWR5Au3MF1ST/97.webp', demand: '7', attributes: [ { trait_type: 'Environment', value: 'Moiuntains' }, { trait_type: 'Weapon', value: 'Clube' }, { trait_type: 'Rarity', value: 2, max_value: 10 }, { display_type: 'date', trait_type: 'Created', value: 1664478110287 }, { display_type: 'number', trait_type: 'generation', value: 1 } ] } Enfin, comme indiqué dans l'image ci-dessous, téléchargez le dossier de métadonnées sur IPFS à côté du dossier d'images. Fantastique, maintenant épinglons-le sur le Web pour que le monde le voie. Actuellement, les deux dossiers se trouvent sur votre nœud IPFS local (votre ordinateur), pour qu'il soit accessible dans le monde entier, vous devez utiliser un service Pinning tel que . Pinata Épingler vos dossiers à IPFS Tout d'abord, dirigez-vous vers le et inscrivez-vous si vous ne l'avez pas encore fait. Cliquez ensuite sur l'icône du compte et sélectionnez Clés API. Voir l'image ci-dessous. gestionnaire de broches Pinata Sur la page de création de clés, cliquez sur créer une nouvelle clé et entrez le nom de la clé. Observez l'image ci-dessous. Copiez maintenant la clé JWT dans votre presse-papiers. C'est ce que nous utiliserons pour lier notre bureau IPFS à notre compte Pinata. Voir l'image ci-dessous. Ensuite, ouvrez votre application de bureau IPFS, accédez à l'onglet Paramètres et ajoutez un nouveau service, sélectionnez Pinata et collez votre jeton JWT dans l'espace prévu. Reportez-vous à l'image ci-dessous. La dernière chose à faire est d'épingler vos dossiers sur Pinata en suivant les instructions ci-dessous. Dirigez-vous vers l'onglet Fichiers, cliquez sur la ligne à trois pointillés et sélectionnez Définir l'épinglage. Cela apparaîtra dans l'image ci-dessous. Sélectionnez Pinata et appliquez, ce faisant, votre dossier d'images sera accessible globalement. Confirmation de l'accessibilité globale de l'image Rendez-vous sur ce site Web, copiez et collez votre CID dans le champ de saisie IPFS et cliquez sur le bouton de cache. Cela analyse l'ensemble des passerelles IPFS accessibles au public à la recherche de vos images. Voir l'image ci-dessous. Les résultats de l'image ci-dessus montrent que de nombreux nœuds IPFS ont désormais des copies du dossier images disponibles et accessibles globalement, même si vous avez supprimé la copie d'origine sur votre nœud local. Avec les étapes clairement décrites pour vous, épinglez également le dossier de métadonnées pour les rendre accessibles au public en ligne. Vous pouvez maintenant utiliser l'un des liens de l'image ci-dessus comme URL de base pour les jetons . Voir l'image ci-dessous. ERC721 Et voilà, voilà comment préparer et télécharger vos œuvres sur l'IPFS. Conclusion Vous rencontrerez toujours le besoin de comprendre comment prétraiter et télécharger des œuvres d'art sur l'IPFS à l'échelle d'un lot. Une fois que vous avez compris comment travailler et traiter les images sur l'IPFS, vous pouvez commencer à l'utiliser sur vos projets Web3 spéciaux. Jusqu'à la prochaine fois, continuez à l'écraser! Voir l'utilisation de la démonstration en direct sur mon projet NFT sur le testnet Goerli . Voir l'emplacement d'Opensea . Vous pouvez regarder la version vidéo sur ma chaîne YouTube. ici ici https://www.youtube.com/watch?v=YzurgMLwFVQ?embedable=true A propos de l'auteur Je suis un développeur blockchain complet avec plus de ans d'expérience dans l'industrie du développement de logiciels. 6+ En combinant le développement de logiciels, l'écriture et l'enseignement, je montre comment créer des applications décentralisées sur des réseaux blockchain compatibles EVM. Mes piles incluent , , , , , , , , etc. JavaScript React Vue Angular Node React Native NextJs Solidity pour apprendre à créer une application Web3 à partir de zéro. J'offre également des cours privés et spécialisés pour les personnes sérieuses qui souhaitent apprendre en tête-à-tête avec un mentor. Abonnez-vous à ma chaîne YouTube . Réservez vos cours Web3 ici Maintenant, laissez-moi vous montrer comment représenter l'image et les métadonnées ci-dessus dans votre code.
