Construisons un projet NFT de bout en bout à l’aide de Truffle Suite

Les jetons non fongibles (NFT) sont l’une des innovations les plus importantes (et les plus populaires) de Web3 à ce jour. Bien que leurs capacités soient encore explorées, l’industrie de l’art et le monde du jeu ont bénéficié de la technologie. En effet, les NFT créent un enregistrement incontestable de la propriété numérique.

Construire des NFT n’est pas aussi compliqué que vous le pensez, en particulier avec des suites d’outils telles que Truffle Suite Cet article vous présentera la suite d’outils Truffle et vous apprendra comment les utiliser pour créer un projet NFT de bout en bout et inclure le Suivant:

Configuration et installation du projet à l’aide de la Truffle NFT Box.
Introduction à l’extension Truffle VS Code.Comment créer et déployer le contrat intelligent NFT à l’aide du tableau de bord Truffle.
Instructions pour créer un NFT à partir du client React intégré avec la Truffle NFT Box.
Vérification sur l’explorateur de blocs et OpenSea/Rarible.

Introduction à la Suite Truffe

Pour faciliter la vie des développeurs Ethereum, Truffle fournit un environnement de développement, un cadre de test et un pipeline d’actifs.

Il possède plusieurs fonctionnalités qui le rendent attrayant pour les développeurs Web3 expérimentés et novices, et il permet aux développeurs de créer et de déployer des dapps pour de nombreux cas d’utilisation. La suite d’outils Truffle comporte plusieurs composants, notamment :

Un pipeline de construction programmable utilisé pour créer des applications console et Web.
Reconstruction instantanée des actifs pendant le développement (truffle watch)
Une console qui simplifie l’utilisation de vos contrats compilés (truffle console).
Compilation et déploiement de contrats avec prise en charge intégrée de JavaScript, CoffeeScript, ES6 et JSX en utilisant le client RPC de votre choix.

Suite Truffe

Truffle comprend des outils essentiels pour aider quiconque à créer et déployer rapidement des projets Web3. Les outils de la pile incluent :

Truffle – L’environnement de développement et le cadre de test.
Ganache – Une blockchain personnelle pour le développement d’Ethereum.
Truffle For VS Code Extension – Une extension qui facilite la création et la gestion de projets Truffle.
Tableau de bord Truffle – Un moyen simple d’utiliser votre portefeuille MetaMask existant pour vos déploiements et autres transactions que vous devez envoyer à partir d’un contexte de ligne de commande.
Boîtes à truffes – Des projets passe-partout pour être rapidement opérationnels.

Bien qu’ils ne fassent pas partie de la suite d’outils Truffle, les outils suivants s’associent parfaitement à la pile pour rationaliser encore plus le développement et le déploiement :

Infura – Un backend Web3 et un fournisseur d’infrastructure en tant que service (IaaS), offrant divers services et outils aux développeurs de blockchain.
MetaMask – Un portefeuille crypto et une passerelle vers les applications blockchain.

Comment lancer un projet NFT de bout en bout à l’aide de la pile Truffle

Maintenant que vous avez une idée des outils impliqués, rassemblons-les pour créer un projet NFT.

Conditions préalables

Avant de commencer, nous avons besoin des prérequis suivants :

Créez un compte Infura pour accéder au réseau

Visitez le site Web d’Infura pour créer un nouveau compte ou connectez-vous si vous en avez déjà un.

Après une inscription réussie, la page redirige vers notre tableau de bord, où nous pouvons créer une nouvelle clé, comme indiqué ci-dessous.

Clique le « Créer une nouvelle clé » et remplissez les informations requises.

Après avoir créé votre clé, votre ID de projet sera visible sur votre tableau de bord sous le clé API section, comme indiqué ci-dessous. Copiez-le et conservez-le quelque part ; vous en aurez besoin plus tard dans ce tutoriel.

Configurer MetaMask avec Infura RPC

Nous devrons configurer et mettre en place un réseau de test Goerli sur MetaMask à l’aide du point de terminaison Infura RPC puisque vous allez créer et déployer votre application via le tableau de bord Truffle.

Rendez-vous sur metamask.io et téléchargez l’extension pour votre navigateur. Comprendre la sécurité du portefeuille est essentiel lors de l’utilisation d’un portefeuille crypto comme MetaMask.

Cliquer sur Ajouter un réseau manuellement comme indiqué dans l’image ci-dessus, puis saisissez les informations suivantes :

Network Name: Goerli Testnet - Infura
New RPC URL: https://goerli.infura.io/v3/<Paste-your-project-id-here>
Chain ID: 5
Currency Symbol: ETH
Block Explorer URL: https://goerli.etherscan.io/

Félicitations, vous avez configuré avec succès le Goerli Testnet avec Infura RPC.

Configuration de projet NFT de bout en bout avec la boîte Truffle NFT et Truffle pour l’extension de code VS

Dans cette section, vous allez configurer un projet NFT avec la Truffle NFT Box et l’extension Truffle for VS Code. Ouvrez VS Code à partir du dossier dans lequel vous souhaitez travailler, accédez à l’onglet des extensions et recherchez « Truffle for VS Code ».

Avec l’extension installée, vous pouvez facilement créer un nouveau projet Truffle à partir d’une Truffle Box. Appuyez sur ctrl + shift + P pour ouvrir la boîte de dialogue de commande et tapez « truffe ». Cela affichera une liste des commandes Truffle disponibles.

Sélectionner Nouveau projet de solidité et alors Créer un projet à partir de Truffle Box. Ensuite, une liste des boîtes à truffes disponibles s’affichera. Choisir nft-box pour créer le projet.

Alternativement, si vous n’utilisez pas VS Code comme éditeur principal, vous pouvez toujours suivre. Créez un projet NFT à partir d’une Truffle Box dans n’importe quel répertoire de votre choix à l’aide des commandes suivantes :

mkdir nft-project-demo && cd nft-project-demo
npx truffle unbox nft-box

Ou vous pouvez installer Truffle globalement et exécuter le unbox commande.

npm install -g truffle
truffle unbox nft-box

Cette commande devrait télécharger et déballer la Truffle NFT Box.

Ensuite, cd dans le nouveau répertoire et téléchargez toutes les dépendances du projet en running npm install.

Enfin, ouvrez le projet dans votre éditeur de code préféré. Quelle que soit la manière dont vous avez créé le projet, vous devriez avoir une structure de projet similaire à celle illustrée ci-dessous.

Télécharger les métadonnées NFT sur IPFS

Notre image NFT et nos métadonnées seront stockées à l’aide d’IPFS. Rendez-vous sur votre tableau de bord Infura et créez un autre projet, cette fois en sélectionnant IPFS comme indiqué ci-dessous.

Ensuite, cliquez sur Gérer la clé pour voir les détails du projet.

Vous aurez besoin du ID de projet, Secret du projetet URL du point de terminaison pour les tâches suivantes.

À l’aide de la commande suivante, téléchargeons l’image sur IPFS. Pour télécharger l’image, cd dans le dossier où l’image est enregistrée.

curl -X POST -F file=@yourfile -u "PROJECT_ID:PROJECT_SECRET" 
"https://ipfs.infura.io:5001/api/v0/add"

Remplacer @yourfile avec le nom du fichier image dans le dossier actuel, par exemple, image-name.jpeg.
Remplacer "PROJECT_ID:PROJECT_SECRET" avec votre identifiant de projet et votre secret dans cet ordre.

La sortie de la commande doit ressembler à ce qui est illustré ci-dessous.

Vous pouvez vérifier que l’image a bien été importée en collant ce hachage dans l’URL suivante : https://ipfs.io/ipfs/YOUR_HASH_HERE.

Remarque : Lorsque vous essayez d’accéder à l’image via l’URL pour la première fois, le chargement peut prendre quelques minutes.

Obtenons les métadonnées stockées sur IPFS maintenant que l’image est là. Pour vous conformer aux exigences d’OpenSea, vous aurez besoin que vos métadonnées soient au format JSON suivant :

{ 
  "name": "My Nature NFT",     
  "description": "Amazing nature NFT deployed to the Goerli Network using Infura RPC",
  "image": "ipfs://YOUR_HASH_HERE" 
}

Vous utiliserez la commande similaire à celle que vous avez utilisée précédemment pour télécharger l’image à l’étape précédente avec cette commande.

curl -X POST -F file=@yourjsonfile -u "PROJECT_ID:PROJECT_SECRET" 
"https://ipfs.infura.io:5001/api/v0/add"

Remplacer @yourjsonfile avec le nom du fichier json dans le dossier en cours, par exemple, nft-metadata.json.
Remplacer "PROJECT_ID:PROJECT_SECRET" avec votre identifiant de projet et votre secret dans cet ordre.

Vous pouvez vérifier que le fichier JSON a été téléchargé avec succès en collant ce hachage dans l’URL suivante : https://ipfs.io/ipfs/YOUR_HASH_HERE

Vous avez entièrement configuré tous les outils dont nous avons besoin pour créer et déployer un contrat intelligent avec le tableau de bord Truffle. Faisons cela à l’étape suivante.

Créez et déployez des contrats intelligents avec le tableau de bord Truffle

Dirigez-vous vers le projet NFT avec la Truffle NFT Box que nous avons installée plus tôt ; vous allez créer et déployer le contrat intelligent dans cette section.

À l’intérieur de 1_deploy_contracts.js dossier dans le migrations dossier, mettez-le à jour avec l’extrait de code suivant.

var NFTCollection = artifacts.require("./NFTCollection.sol");

module.exports = function (deployer) {
  deployer.deploy(
    NFTCollection,
    "https://ipfs.io/ipfs/YOUR_IPFS_HASH_HERE",
    "NFT DEMO",
    "NFTD"
  );
};

Dans l’extrait de code ci-dessus, nous avons ajouté l’URL du fichier JSON hébergé sur IPFS, le nom du jeton et le symbole comme paramètre du deployer.deploy() fonction.

Ensuite, vous allez créer et compiler à l’aide du tableau de bord Truffle, qui élimine le besoin d’interagir manuellement avec la phrase mnémonique ou les clés privées de votre portefeuille tout au long du cycle de vie du développement.

Dans une fenêtre de terminal distincte, saisissez la commande suivante :

La commande démarrera automatiquement Truffle Dashboard à l’adresse http://localhost:24012 et ouvrira un nouvel onglet dans votre session de navigateur existante.

Après avoir connecté votre portefeuille, assurez-vous de passer au testnet Goerli que nous avons configuré et configuré précédemment à l’aide du RPC Infura. Vous devriez avoir quelque chose de similaire à ce qui est montré ci-dessous après une connexion réussie.

Ensuite, compilez et déployez les contrats intelligents à l’aide de la commande suivante :

truffle migrate --network dashboard

Approuvez la transaction via le tableau de bord Truffle sur votre navigateur comme indiqué sur le terminal.

Après un déploiement réussi, vous devriez avoir quelque chose de similaire à ce qui est montré ci-dessous sur votre terminal.

Vérifier la création du contrat sur Goerli Testnet Block Explorer

Dans cette section, vérifiez la création du contrat sur l’explorateur de blocs Goerli Testnet via l’URL testnet en collant l’adresse du contrat ou en confirmant à partir de MetaMask, qui redirigera vers l’explorateur de blocs Goerli Testnet comme indiqué ci-dessous.

Configurer le client frontal et créer un NFT

Ouvrez un terminal séparé et exécutez la commande suivante pour configurer le client frontal. Cela nous permettra de frapper le NFT à partir du contrat intelligent que nous venons de déployer.

cd client
npm install
npm start

Si vous rencontrez une erreur similaire à celle indiquée ci-dessus,…