Comment créer un DApp sur Ethereum en utilisant Solidity?

Web3 est à la mode depuis le début de 2022, tout comme les NFT explosaient l’année dernière. Pourtant, l’idée de créer des applications décentralisées pour des cas d’utilisation grand public tels que Facebook, Instagram et Google a été une ambition de longue date de la communauté crypto. Cependant, alors que certaines entreprises de blockchain ont déjà développé des DApps, l’industrie Web3 n’a que récemment commencé à gagner en popularité. Dans cet article, nous allons créer un système de suivi de l’adoption pour une animalerie sur Ethereum à partir de zéro.

Résumé (TL;DR)

• Web3 est à la mode depuis le début de 2022, tout comme les NFT explosaient l’année dernière.
• Une expérience préalable dans les outils de développement Solidity et Blockchain tels que Ganache, Truffle, etc., n’est pas requise.
• Un DApp est une application logicielle qui fonctionne sur un réseau distribué.
• Nous devons installer VS Code, NodeJS, Git, Truffle et Ganache.
• Après cela, nous mettrons en place notre environnement de développement en utilisant la Truffle Box, c’est-à-dire l’animalerie.

• L’étape suivante consiste à créer un contrat intelligent en utilisant la solidité.
• Nous allons compiler le contrat intelligent à l’aide de la commande truffle compile, puis le migrer à l’aide de la commande truffle migrate.
• Nous allons créer un fichier TestAdoption.sol pour tester notre contrat intelligent avec la commande truffle test.
• Nous allons créer une interface utilisateur avec Web3.js et du code existant dans la boîte à truffes.
• Enfin, nous interagirons avec notre DApp en utilisant MetaMask et Ganache.

Énoncé du problème
Prenons l’exemple de Pete. Pete est propriétaire d’une animalerie à New Delhi, en Inde.

Comme nous pouvons le voir, la technologie Blockchain et la crypto-monnaie sont de plus en plus acceptées par le grand public. Le 1er février 2022, la ministre des Finances, Nirmala Sitharaman, a annoncé que la Banque de réserve de l’Inde émettrait une roupie numérique en utilisant la technologie Blockchain à partir de 2022-23. C’est un pas positif dans la direction de l’adoption de la cryptographie. Maintenant, l’Inde a reconnu la technologie Blockchain.

Pete est donc également intéressé par l’utilisation de la technologie Blockchain. Il veut utiliser la technologie Blockchain pour sa boutique. Après avoir fait quelques recherches par lui-même, Pete est fasciné par Ethereum Blockchain et l’idée de contrats intelligents. Il est intéressé à l’utiliser pour gérer plus efficacement les adoptions d’animaux de compagnie. Son entreprise peut accueillir jusqu’à 16 animaux de compagnie à tout moment. Il a déjà une base de données sur les animaux de compagnie prête. Pete veut que quelqu’un crée un DApp pour lui.

L’objectif du DApp est de connecter une adresse Ethereum à un animal de compagnie à adopter.

Ceci est un exemple de ce à quoi ressemble un énoncé de problème typique dans une entreprise Blockchain. Passons maintenant à l’étape suivante.

Conditions préalables

Cet article est destiné aux personnes qui ont une compréhension de base d’Ethereum et des contrats intelligents. Si vous n’avez aucune connaissance préalable sur Ethereum, commencez à partir d’ici.

Une certaine expérience de codage de HTML et JavaScript aidera à comprendre facilement la logique de codage. Si quelqu’un est nouveau sur DApps ou commence son parcours de développement Web, il peut facilement suivre cet article. Une expérience préalable dans les outils de développement Solidity et Blockchain tels que Ganache, Truffle, etc., n’est pas requise. Cependant, nous expliquerons chaque étape à mesure que nous avancerons.

Cet article sera utile pour chaque débutant, et nous allons construire un DApp étape par étape. Passons maintenant à l’étape suivante et comprenons ce qu’est un DApp.

Qu’est-ce qu’un DApp ?

Une application décentralisée est une application logicielle qui fonctionne sur un réseau distribué. Il n’est pas hébergé sur un serveur centralisé mais sur un réseau peer-to-peer décentralisé tel que IPFS. Pour déployer ou interagir avec un DApp, il n’est pas nécessaire de révéler une identification réelle.

DApp = FrontEnd + BackEnd de contrat intelligent

Le code BackEnd est écrit principalement en Solidity (ou Vyper). Toutefois, il n’existe pas de langage spécifique pour le code frontal. Passons maintenant à l’étape suivante et comprenons comment fonctionnent les DApps.

Comment fonctionnent les DApps ?

Dans le diagramme ci-dessous, nous pouvons voir comment fonctionne un DApp typique. Plongeons maintenant dans ce diagramme pour mieux le comprendre.

1. Navigateur client : C’est un navigateur normal écrit en HTML, CSS et JS.
2. Web3 .js : Il s’agit d’une collection de bibliothèques qui nous permettent d’interagir avec un nœud Ethereum local ou distant en utilisant HTTP, IPC ou WebSocket.
3. Fournisseur Web3 : Le réseau Ethereum contient des nœuds et tous les nœuds partagent la même copie des données. Définir un fournisseur web3 dans web3.js indique à notre code à partir de quel nœud nous allons lire et écrire des données. Nous utilisons Metamask dans notre DApp pour injecter son fournisseur web3 dans le navigateur.
4. Machine virtuelle Ethereum (EVM): Chaque nœud Ethereum du réseau a son implémentation EVM et est responsable de l’exécution des mêmes instructions Smart Contract sur le réseau.

Installation des dépendances

Il y a quelques exigences techniques avant de commencer à créer DApp. Dans cette section, nous allons installer toutes les dépendances requises.

1. Installation de VS Code

Tout d’abord, nous avons besoin d’un IDE, c’est-à-dire d’un environnement de développement intégré. Un IDE permet aux programmeurs de simplifier le processus de construction d’un programme informatique. Il augmente la productivité d’un programmeur en fusionnant des tâches de développement logiciel typiques telles que l’édition du code source, la création d’exécutables et le débogage en un seul endroit.

Nous utiliserons Visual Studio Code dans notre article. Il s’agit d’un éditeur de code source léger idéal pour une utilisation quotidienne avec des fonctionnalités telles que la coloration syntaxique, la correspondance entre crochets, l’indentation automatique, la sélection de boîtes, les extraits de code, etc. Il allie la facilité d’utilisation d’un éditeur de code source à des fonctionnalités de développement avancées telles que la complétion et le débogage de code IntelliSense. Il est disponible pour macOS, Linux et Windows.

2. Installation de NodeJS et npm

Deuxièmement, nous avons besoin d’un environnement d’exécution. Nous utiliserons NodeJS et npm. npm est livré avec NodeJS.

Node.js est un environnement d’exécution JavaScript open source et multiplateforme. C’est un outil largement utilisé pour presque tous les projets. Il s’agit d’une plate-forme linguistique légère, évolutive et open source qui simplifie la création d’applications au niveau de l’entreprise. Npm contient des packages que nous utilisons dans nos applications pour accélérer et améliorer le processus de développement.

3. Installation de Git

Troisièmement, nous avons besoin de Git. Il s’agit d’un système de contrôle de version distribué gratuit et open-source conçu pour tout gérer avec rapidité et efficacité. Il maintient les modifications que nous apportons aux fichiers, de sorte que nous avons un enregistrement de ce qui a été fait.

4. Installation de truffe

Quatrièmement, nous avons besoin de la truffe. Il s’agit d’un environnement de développement de classe mondiale, d’un cadre de test et d’un pipeline d’actifs pour les blockchains basées sur la machine virtuelle Ethereum (EVM).

Pour télécharger Truffle, suivez ce guide étape par étape.

• Étape 1 : Ouvrez VS Code.
• Étape 2 : Cliquez sur Terminal.
• Étape 3 : Cliquez sur Nouveau terminal.
• Étape 4 : Collez cette commande sur le terminal.

npm install -g truffle

• Étape 5 : Pour vérifier que Truffle est installé correctement, collez cette commande sur le terminal.

truffle version

5. Installation de Ganache

Enfin, nous avons besoin de Ganache. Il s’agit d’une blockchain locale pour le développement rapide d’applications Ethereum et Corda. Nous pouvons utiliser Ganache tout au long du cycle de développement : développement, déploiement et test de DApps dans un environnement sûr et sécurisé. Toutes les versions de Ganache sont disponibles pour Windows, Mac et Linux.

Ganache est disponible en deux modes : GUI et CLI. Ganache UI est une application de bureau prenant en charge Ethereum et Corda. Ganache CLI n’est disponible que pour le développement Ethereum.

Dans cet article, nous allons utiliser Ganache CLI car il est simple et facile à utiliser. Pour télécharger Ganache CLI, suivez ce guide étape par étape.

• Étape 1 : Ouvrez VS Code.
• Étape 2 : Cliquez sur Terminal.
• Étape 3 : Cliquez sur Nouveau terminal.
• Étape 4 : Collez cette commande sur le terminal.

npm install ganache –global

• Étape 5 : Pour démarrer Ganache, collez cette commande sur le terminal.

ganache
Maintenant, nous avons installé toutes les dépendances. L’étape suivante consiste à configurer et à optimiser notre environnement de développement.

Configuration de l’environnement de développement

Dans cette section, nous allons configurer notre environnement de développement. Pour configurer l’environnement de développement, suivez ce guide étape par étape.

• Étape 1 : Allez dans VS Code et créez un dossier pet-shop-tutorial.
• Étape 2 : Maintenant, faites un clic droit sur le tutoriel de l’animalerie et cliquez sur Ouvrir dans le terminal intégré.

L’équipe Truffle a créé Truffle Boxes. Ce sont les boilerplates qui contiennent des modules utiles, des contrats de solidité et des bibliothèques, des vues frontales et bien plus encore.

• Étape 3 : Dans cet article, nous utiliserons une Truffle Box, c’est-à-dire une animalerie, qui comprend la structure de base du projet et le code de l’interface utilisateur. Collez cette commande sur le terminal.

truffle unbox pet-shop

Après avoir exécuté la commande ci-dessus, la commande téléchargera les fichiers que nous pouvons voir dans l’image ci-dessus.

• Méthode alternative pour l’étape 3: Si quelqu’un souhaite créer l’interface utilisateur à partir de zéro mais veut un passe-partout truffier. Collez cette commande sur le terminal.

truffle init

• Étape 4 : Nous allons installer l’extension VS Code Solidity de Juan Blanco pour écrire du code Solidity dans VS Code. Ouvrez VS Code et accédez à Extensions dans la barre latérale droite et cliquez dessus. Recherchez Solidity et cliquez sur Extension, dont l’auteur est Juan Blanco. Cliquez sur Installer.

Maintenant, notre environnement de développement est créé avec succès. L’étape suivante consiste à créer un contrat intelligent.
Création d’un contrat intelligent
Dans cette section, nous allons créer un contrat intelligent pour notre DApp. Cette logique servira de backend et de stockage pour notre DApp. Pour créer un contrat intelligent, suivez ce guide étape par étape.

Étape 1 : Accédez au répertoire des contrats dans le dossier pet-shop-tutorial

Ce répertoire contiendra notre code de contrat intelligent écrit en solidité. Maintenant, créez un nouveau fichier Adoption.sol.

Étape 2: Maintenant, nous allons commencer à écrire notre code de solidité

Collez ce code dans le fichier Adoption.sol.

// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.4.0 <0.9.0;
contract Adoption {
}

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• SPDX-License-Identifier: GPL-3.0 : Solidity version 0.6.8 a introduit des identifiants de licence SPDX, permettant aux développeurs de définir la licence utilisée par le contrat. Les développeurs doivent ajouter ceci en haut. Si cela est manquant dans le fichier de contrat, le compilateur affichera un avertissement. En outre, si le fichier de contrat comporte plusieurs identificateurs de licence, le compilateur affichera une erreur.
• solidité pragma >=0,4,0 <0,9,0; : Cette commande indique au compilateur que le code source est écrit pour Solidity versions 0.4.0 à 0.9.0. Le mot-clé pragma est utilisé pour activer les fonctionnalités et les vérifications du compilateur.
• contract Adoption {} : Cette commande spécifie la collecte de code et de données à une adresse spécifique sur la blockchain Ethereum.

Étape 3: Maintenant, nous allons déclarer une variable pour notre contrat intelligent

Collez ce code après l’adoption du contrat { dans le fichier Adoption.sol.

address[16] public adopters;

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• address[16] : Cette déclaration est un tableau d’adresses Ethereum. Les tableaux contiennent un type et peuvent avoir une longueur fixe ou variable. Dans ce cas, le type est adresse et la longueur est 16.
• public : Les fonctions publiques font partie de l’interface du contrat et peuvent être appelées en externe ou en interne. Pour les variables d’état publiques, une fonction getter automatique est générée.
• adoptants : Cette instruction est une variable qui est un conteneur pour stocker de la valeur.

Étape 4: Maintenant, nous allons ajouter la fonction adopt() à notre contrat intelligent

Nous avons besoin d’une fonction pour permettre aux utilisateurs de faire leurs demandes d’adoption. Nous allons donc créer une fonction adopt(). Collez ce code après la déclaration de variable dans le fichier Adoption.sol.
// Adopting a pet
function adopt(uint256 petId) public returns (uint256) {
require(petId >= 0 && petId <= 15);
adopters[petId] = msg.sender;
return petId;
}

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• function adopt(uint256 petId) public returns (uint256) {} : Nous devons spécifier les paramètres de fonction et les types de sortie dans Solidity. Dans ce cas, nous prenons l’entrée petId comme un entier et le retournons comme un entier. Pour en savoir plus sur les fonctions en solidité, cliquez ici.
• require(petId >= 0 && petId <= 15); : Nous utilisons la fonction require() pour vérifier si petID se trouve dans la plage. Comme les tableaux sont indexés à partir de 0 dans Solidity, nous prenons la valeur petID entre 0 et 15.
• adopters[petId] = msg.sender; : Si l’ID se situe dans la plage, la fonction ajoute l’adresse qui a effectué l’appel au tableau des adoptants. msg.sender indique l’adresse de la personne ou du contrat intelligent qui a appelé cette fonction.
• retourner petId; : Nous renvoyons le petId en sortie.

Étape 5: Maintenant, nous allons ajouter la fonction getAdopters() à notre contrat intelligent

Nous avons besoin d’une fonction pour récupérer les adoptants. Cette fonction devrait mettre à jour tous les statuts d’adoption d’animaux de compagnie. Nous allons donc créer une fonction getAdopters(), qui renvoie le tableau entier. Collez ce code après la fonction adopt() dans le fichier Adoption.sol.
// Retrieving the adopters
function getAdopters() public view returns (address[16] memory) {
return adopters;
}

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• function getAdopters() public view returns (address[16] memory) {} : L’explication de la déclaration de fonction est similaire à l’étape 4. Le mot-clé view indique que la fonction ne changera pas l’état du contrat. la mémoire spécifie l’emplacement des données de la variable.
• return adopters : Puisque nous avons déjà déclaré la variable adopters à l’étape 3. Nous pouvons le retourner.

Étape 6 : Voici notre code de solidité complet

// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.4.0 <0.9.0;

contract Adoption {
address[16] public adopters;

// Adopting a pet
function adopt(uint256 petId) public returns (uint256) {
require(petId >= 0 && petId <= 15);
adopters[petId] = msg.sender;
return petId;
}

// Retrieving the adopters
function getAdopters() public view returns (address[16] memory) {
return adopters;
}
}
Maintenant, notre contrat intelligent est créé avec succès. L’étape suivante consiste à compiler le contrat intelligent.
Compilation de contrats intelligents
Dans cette section, nous allons compiler notre contrat intelligent. Puisque Solidity est un langage compilé. Par conséquent, nous devons le compiler en bytecode avant que l’EVM puisse l’exécuter. Pour compiler le contrat intelligent, suivez ce guide étape par étape.

• Étape 1 : Accédez au dossier VS Code pet-shop-tutorial. Maintenant, faites un clic droit dessus et cliquez sur Ouvrir dans le terminal intégré.
• Étape 2 : Collez cette commande sur le terminal. Cette commande compilera tous les contrats dans le répertoire des contrats.

truffle compile

Après avoir exécuté la commande ci-dessus, nous verrons la sortie comme indiqué dans l’image ci-dessous.

Maintenant, notre contrat intelligent est compilé avec succès. L’étape suivante consiste à migrer le contrat intelligent.

Migration du contrat intelligent

Dans cette section, nous allons migrer notre contrat intelligent. Les migrations sont des fichiers JavaScript qui aident à déployer des contrats sur le réseau Ethereum. Pour migrer le contrat intelligent, suivez ce guide étape par étape.

Étape 1: Accédez au répertoire des migrations dans le dossier pet-shop-tutorial.

Nous verrons qu’un fichier JavaScript est déjà présent, c’est-à-dire 1 migration initiale.js. Ce fichier gère le déploiement du contrat intelligent Migrations.sol. Nous avons besoin d’un fichier similaire pour notre contrat Adoption.sol. Nous allons créer un nouveau fichier, c’est-à-dire 2_deploy_contracts.js, similaire à notre 1_initial_migration.js. La partie codage sera similaire dans les deux fichiers. Les seules modifications seront les fonctions require() et deploy(). Ici, nous allons écrire Adoption à la place des migrations. Collez ce code dans le fichier 2_deploy_contracts.js.
var Adoption = artifacts.require(« Adoption »);

module.exports = function(deployer) {
de

Étape 2: Il est maintenant temps d’exécuter Ganache.

Nous devons avoir une blockchain opérationnelle avant de migrer notre contrat intelligent vers celle-ci. Comme indiqué ci-dessus, nous utiliserons Ganache CLI. Aussi maintenant, nous aurons besoin de deux terminaux. Le premier sera pour les commandes de ganache, et le second sera pour les commandes de truffe. Nous devons donc ouvrir nos terminaux intégrés deux fois. Pour démarrer Ganache, collez cette commande sur le terminal.
ganache

Cette commande créera une blockchain qui fonctionnera localement sur le port 8545.

Étape 3: Maintenant, nous allons changer le numéro de port

La principale différence entre l’interface graphique Ganache et l’interface de ligne de commande est que l’interface graphique Ganache s’exécute sur le port 7545, mais l’interface de ligne de commande Ganache s’exécute sur le port 8545. Nous allons donc maintenant changer le numéro de port dans le fichier truffle-config.js, qui est présent au bas du dossier pet-shop-tutorial.

Étape 4: Maintenant, il est temps de migrer le contrat intelligent vers la blockchain

Collez cette commande sur le terminal. Cette commande migrera tous les contrats du répertoire des migrations.
truffle migrate

Après avoir exécuté la commande ci-dessus, nous verrons la sortie comme indiqué dans l’image ci-dessous.

Maintenant, si nous revenons à Ganache, nous pouvons voir que l’état de la blockchain a changé. La blockchain affiche maintenant le bloc numéro 4. Auparavant, c’était 0.

Maintenant, notre contrat intelligent a migré avec succès. L’étape suivante consiste à tester le contrat intelligent.

Test du contrat intelligent

Dans cette section, nous allons tester notre contrat intelligent. Tester un contrat intelligent est essentiel car un bug peut coûter des millions de dollars. Pour tester le contrat intelligent, suivez ce guide étape par étape.

Étape 1: Accédez au répertoire de test dans le dossier pet-shop-tutorial

Ce répertoire contiendra du code écrit en solidité pour les tests de contrats intelligents. Maintenant, créez un nouveau fichier TestAdoption.sol. Collez ce code dans le fichier TestAdoption.sol.
// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.4.0 <0.9.0;

import « truffle/Assert.sol »;
import « truffle/DeployedAddresses.sol »;
import « ../contracts/Adoption.sol »;

contract TestAdoption {
Adoption adoption = Adoption(DeployedAddresses.Adoption());

uint expectedPetId = 8;

address expectedAdopter = address(this);
}

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• importer « truffe/Assert.sol »; : Nous importons Assert.sol à partir du répertoire mondial de truffes. Il nous donne divers contrôles d’assertion à utiliser dans nos tests.
• importer « truffle/DeployedAddresses.sol »; : Nous importons DeployedAddresses.sol à partir du répertoire global truffle. Truffle déploiera une nouvelle instance du contrat testé sur la blockchain lors de l’exécution des tests. Ce fichier obtient l’adresse du contrat déployé.
• importer « .. /contracts/Adoption.sol »; : Nous importons Adoption.sol à partir du répertoire des contrats car il s’agit du contrat intelligent sur lequel nous voulons effectuer des tests.
• Adoption adoption = Adoption(DeployedAddresses.Adoption()); : Ce code contient l’adresse du contrat intelligent à tester, c’est-à-dire le contrat d’adoption.
• uint expectedPetId = 8; : Cette variable contient l’ID d’animal attendu, que le contrat TestAdoption utilisera pour les tests.
• adresse attendueAdopter = adresse(ceci); : Nous définissons l’adresse de l’adoptant attendu sur celle-ci, qui récupère l’adresse du contrat actuel car le contrat TestAdoption enverra la transaction au contrat Adoption.

Étape 2: Maintenant, nous allons tester la fonction adopt()

Collez ce code après la déclaration de expectedPetId dans le fichier TestAdoption.sol.

// Testing the adopt() function
function testUserCanAdoptPet() public {
uint returnedId = adoption.adopt(expectedPetId);

Assert.equal(returnedId, expectedPetId, « Adoption of the expected pet should match what is returned. »);
}

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• uint returnedId = adoption.adopt(expectedPetId); : Nous appelons le contrat intelligent précédemment déclaré, c’est-à-dire le contrat d’adoption avec l’ID attenduPetId.
• Assert.equal(returnedId, expectedPetId, « L’adoption de l’animal attendu doit correspondre à ce qui est retourné. »); : Nous passons la valeur réelle, c’est-à-dire returnedId, la valeur attendue, c’est-à-dire expectedPetId et un message d’échec qui est imprimé si le test échoue à la fonction Assert.equal().

Étape 3: Maintenant, nous allons tester la récupération du propriétaire d’un seul animal de compagnie

Collez ce code après la fonction testUserCanAdoptPet() dans le fichier TestAdoption.sol.

// Testing retrieval of a single pet’s owner
function testGetAdopterAddressByPetId() public {
address adopter = adoption.adopters(expectedPetId);

Assert.equal(adopter, expectedAdopter, « Owner of the expected pet should be this contract »);
}

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• adresse adopter = adoption.adopters(expectedPetId); Nous obtenons l’adresse de l’adoptant stockée par le contrat d’adoption après avoir passé attenduPetId.
• Assert.equal(adoptant, expectedAdopter, « Le propriétaire de l’animal attendu devrait être ce contrat »); Nous transmettons la valeur réelle, la valeur attendue et un message d’échec qui est imprimé si le test entraîne l’échec de la fonction Assert.equal().

Étape 4: Maintenant, nous allons tester la récupération de tous les propriétaires d’animaux de compagnie

Collez ce code après la fonction testGetAdopterAddressByPetId() dans le fichier TestAdoption.sol.

// Testing retrieval of all pet owners
function testGetAdopterAddressByPetIdInArray() public {
address[16] memory adopters = adoption.getAdopters();

Assert.equal(adopters[expectedPetId], expectedAdopter, « Owner of the expected pet should be this contract »);
}

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• address[16] memory adopters = adoption.getAdopters(); : Nous stockons les adoptants en mémoire plutôt que dans le stockage contractuel.
• Assert.equal(adopters[expectedPetId], expectedAdopter, « Le propriétaire de l’animal attendu devrait être ce contrat »); : Nous transmettons la valeur réelle, la valeur attendue et un message d’échec qui est imprimé si le test entraîne l’échec de la fonction Assert.equal().

Étape 5 : Voici notre code de solidité complet

// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.4.0 <0.9.0;

import « truffle/Assert.sol »;
import « truffle/DeployedAddresses.sol »;
import « ../contracts/Adoption.sol »;

contract TestAdoption {
// The address of the adoption contract to be tested
Adoption adoption = Adoption(DeployedAddresses.Adoption());

// The id of the pet that will be used for testing
uint256 expectedPetId = 8;

// Testing the adopt() function
function testUserCanAdoptPet() public {
uint256 returnedId = adoption.adopt(expectedPetId);

Assert.equal(returnedId, expectedPetId, « Adoption of the expected pet should match what is returned. »);
}

// Testing retrieval of a single pet’s owner
function testGetAdopterAddressByPetId() public {
address adopter = adoption.adopters(expectedPetId);

Assert.equal(adopter, expectedAdopter, « Owner of the expected pet should be this contract »);
}

// Testing retrieval of all pet owners
function testGetAdopterAddressByPetIdInArray() public {
// Store adopters in memory rather than contract’s storage
address[16] memory adopters = adoption.getAdopters();

Assert.equal(adopters[expectedPetId], expectedAdopter, « Owner of the expected pet should be this contract »
);
}

// The expected owner of adopted pet is this contract
address expectedAdopter = address(this);
}

Étape 6: Maintenant, il est temps de tester le contrat intelligent

Collez cette commande sur le terminal.

truffle test

Après avoir exécuté la commande ci-dessus, nous verrons la sortie comme indiqué dans l’image ci-dessous.

Maintenant, notre contrat intelligent est testé avec succès. L’étape suivante consiste à créer une interface frontale pour notre DApp.

Création d’une interface utilisateur pour Smart Contract

Dans cette section, nous allons créer une interface utilisateur. Le code du front-end de la DApp se trouve également dans la Truffle Box de l’animalerie. Il est présent à l’intérieur dans le répertoire src. Nous n’ajouterons que les fonctions qui sont uniques à Ethereum. Pour créer une interface utilisateur pour le contrat intelligent, suivez ce guide étape par étape.

Étape 1 : Instanciation de web3

Accédez au fichier app.js dans le répertoire de test du dossier pet-shop-tutorial. Maintenant, supprimez le commentaire multiligne de la fonction initWeb3() et collez le code ci-dessous.
// {Part 1}
if (window.ethereum) {
App.web3Provider = window.ethereum;
try {
// Request account access
await window.ethereum.request({ method: « eth_requestAccounts » });;
} catch (error) {
// User denied account access…
console.error(« User denied account access »)
}
}
// {Part 2}
else if (window.web3) {
App.web3Provider = window.web3.currentProvider;
}
// {Part 3}
else {
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:8545’);
}
web3 = new Web3(App.web3Provider);

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• Partie 1, c’est-à-dire si condition : Nous vérifions si nous utilisons des navigateurs DApp où un fournisseur ethereum est injecté dans l’objet window. Nous l’utilisons pour créer notre objet web3, mais nous devons également demander l’accès aux comptes explicitement avec ethereum.enable().
• Partie 2 c’est-à-dire sinon si condition : Si l’objet ethereum n’existe pas, nous vérifions une instance web3 injectée. S’il existe, cela indique que nous utilisons un navigateur DApp plus ancien. Nous obtenons donc son fournisseur et l’utilisons pour créer notre objet web3.
• Partie 3, c’est-à-dire autre condition : S’il n’y a pas d’instance web3 injectée, nous créons notre objet web3 en utilisant notre fournisseur local.

Étape 2 : Instanciation du contrat

Nous devons instancier notre contrat intelligent, afin que web3 comprenne où le trouver et comment il fonctionne. Maintenant, supprimez le commentaire multiligne de la fonction initContract() et collez le code ci-dessous.
$.getJSON(‘Adoption.json’, function(data) {
// Get the necessary contract artifact file and instantiate it with @truffle/contract
var AdoptionArtifact = data;
App.contracts.Adoption = TruffleContract(AdoptionArtifact);

// Set the provider for our contract
App.contracts.Adoption.setProvider(App.web3Provider);

// Use our contract to retrieve and mark the adopted pets
return App.markAdopted();
});

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• var AdoptionArtifact = données; : Nous récupérons le fichier Artifact pour notre contrat intelligent.
• App.contracts.Adoption = TruffleContract(AdoptionArtifact); : Nous allons maintenant passer le fichier Artifact à TruffleContract(), qui crée une instance du contrat avec laquelle interagir.
• App.contracts.Adoption.setProvider(App.web3Provider); : Nous définirons le fournisseur web3 du contrat à l’aide de la valeur App.web3Provider que nous avons stockée précédemment lors de la configuration de web3.
• retourner App.markAdopted(); : Nous appellerons la fonction markAdopted() si les animaux de compagnie sont déjà adoptés lors d’une visite précédente.

Étape 3: Obtenir les animaux de compagnie adoptés et mise à jour de l’interface utilisateur

Maintenant, supprimez le commentaire multiligne de la fonction markAdopted() et collez le code ci-dessous.

// Part 1
var adoptionInstance;

App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;

return adoptionInstance.getAdopters.call();

// Part 2
}).then(function(adopters) {
for (i = 0; i < adopters.length; i++) {
if (adopters[i] !== ‘0x0000000000000000000000000000000000000000’) {
$(‘.panel-pet’).eq(i).find(‘button’).text(‘Success’).attr(‘disabled’, true);
}
}
}).catch(function(err) {
console.log(err.message);
});

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• Partie 1 : Nous déclarerons la variable adoptionInstance en dehors des appels de contrat intelligent pour accéder facilement à l’instance après l’avoir récupérée pour la première fois. Après cela, nous utiliserons la fonction call(), qui nous permet de lire les données de la blockchain sans transaction.
• Partie 2: Après avoir appelé la fonction getAdopters(), nous utiliserons la boucle for pour vérifier si une adresse est stockée pour chaque animal. Enfin, nous vérifions toutes les erreurs possibles.

Étape 4 : Gestion de la fonction adopt()

Maintenant, supprimez le commentaire multiligne de la fonction handleAdopt et collez le code ci-dessous.

// Part 1
var adoptionInstance;

web3.eth.getAccounts(function(error, accounts) {
if (error) {
console.log(error);
}

var account = accounts[0];

App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;

// Execute adopt as a transaction by sending account
return adoptionInstance.adopt(petId, {from: account});
}).then(function(result) {

// Part 2
return App.markAdopted();
}).catch(function(err) {
console.log(err.message);
});
});

Maintenant, nous allons comprendre la signification du code écrit ci-dessus.

• Partie 1 : Nous utiliserons web3 pour récupérer les comptes utilisateurs. Après la vérification des erreurs, nous sélectionnons ensuite le premier compte dans le rappel. Après cela, nous obtiendrons le contrat déployé et stockerons l’instance dans adoptionInstance. Ensuite, nous enverrons une transaction au lieu d’un appel. Les transactions nécessitent une adresse de départ et ont un coût associé. Nous envoyons la transaction en exécutant la fonction adopt() avec petID et un objet contenant l’adresse du compte, c’est-à-dire le compte.
• Partie 2 : L’objet transaction est le résultat de l’envoi d’une transaction. Si aucun problème ne se produit, nous exécutons notre fonction markAdopted() pour synchroniser l’interface utilisateur avec nos données fraîchement stockées.

Étape 5 : Voici le code complet du fichier .js application

App = {
web3Provider: null,
contracts: {},

init: async function() {
// Load pets.
$.getJSON(‘../pets.json’, function(data) {
var petsRow = $(‘#petsRow’);
var petTemplate = $(‘#petTemplate’);

for (i = 0; i < data.length; i ++) {
petTemplate.find(‘.panel-title’).text(data[i].name);
petTemplate.find(‘img’).attr(‘src’, data[i].picture);
petTemplate.find(‘.pet-breed’).text(data[i].breed);
petTemplate.find(‘.pet-age’).text(data[i].age);
petTemplate.find(‘.pet-location’).text(data[i].location);
petTemplate.find(‘.btn-adopt’).attr(‘data-id’, data[i].id);

petsRow.append(petTemplate.html());
}
});

return await App.initWeb3();
},

initWeb3: async function() {
// Modern dapp browsers…
if (window.ethereum) {
App.web3Provider = window.ethereum;
try {
// Request account access
await window.ethereum.request({ method: « eth_requestAccounts » });;
} catch (error) {
// User denied account access…
console.error(« User denied account access »)
}
}
// Legacy dapp browsers…
else if (window.web3) {
App.web3Provider = window.web3.currentProvider;
}
// If no injected web3 instance is detected, fall back to Ganache
else {
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:7545’);
}
web3 = new Web3(App.web3Provider);

return App.initContract();
},

initContract: function() {
$.getJSON(‘Adoption.json’, function(data) {
// Get the necessary contract artifact file and instantiate it with @truffle/contract
var AdoptionArtifact = data;
App.contracts.Adoption = TruffleContract(AdoptionArtifact);

// Set the provider for our contract
App.contracts.Adoption.setProvider(App.web3Provider);

// Use our contract to retrieve and mark the adopted pets
return App.markAdopted();
});

return App.bindEvents();
},

bindEvents: function() {
$(document).on(‘click’, ‘.btn-adopt’, App.handleAdopt);
},

markAdopted: function() {
var adoptionInstance;

App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;

return adoptionInstance.getAdopters.call();
}).then(function(adopters) {
for (i = 0; i < adopters.length; i++) {
if (adopters[i] !== ‘0x0000000000000000000000000000000000000000’) {
$(‘.panel-pet’).eq(i).find(‘button’).text(‘Success’).attr(‘disabled’, true);
}
}
}).catch(function(err) {
console.log(err.message);
});

},

handleAdopt: function(event) {
event.preventDefault();

var petId = parseInt($(event.target).data(‘id’));

var adoptionInstance;

web3.eth.getAccounts(function(error, accounts) {
if (error) {
console.log(error);
}

var account = accounts[0];

App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;

// Execute adopt as a transaction by sending account
return adoptionInstance.adopt(petId, {from: account});
}).then(function(result) {
return App.markAdopted();
}).catch(function(err) {
console.log(err.message);
});
});

}

};

$(function() {
$(window).load(function() {
App.init();
});
});
Maintenant, notre interface utilisateur est créée avec succès. L’étape suivante consiste à interagir avec DApp.

Interaction avec DApp

C’est la dernière étape. Dans cette section, nous allons interagir avec DApp. Pour interagir avec le DApp, suivez ce guide étape par étape.

Étape 1 : Installation de MetaMask

MetaMask est un portefeuille crypto et une passerelle Web3 vers les DApps blockchain. Il est actuellement disponible en tant qu’extension de navigateur et application mobile sur les appareils Android et iOS. Pour télécharger MetaMask, suivez ce guide étape par étape.

Étape 2: Ajout de Ganache à MetaMask

Maintenant, nous allons connecter MetaMask à la blockchain créée par Ganache CLI. Cliquez sur l’icône qui montre Ethereum Mainnet. Ensuite, nous verrons une option pour ajouter un réseau. Cliquez sur ajouter un bouton réseau.

Maintenant, nous allons ajouter les paramètres suivants donnés ci-dessous et cliquer sur Enregistrer.

• Nom: Ganache
• RPC-URL : http://127.0.0.1:8545
• Numéro de chaîne : 1337

Après l’enregistrement, nous verrons cet écran comme indiqué ci-dessous. Chaque compte créé par Ganache CLI reçoit 1000 éthers. Nous remarquerons moins d’éther car du gaz a été utilisé lorsque nous avons déployé le contrat et effectué les tests.

Étape 3 : Exécution du DApp

Il est maintenant temps d’exécuter notre DApp. Nous irons au deuxième terminal. Cette commande lancera un nouveau serveur Web local et ouvrira un nouvel onglet de navigateur avec notre DApp. Collez cette commande sur le terminal.
npm run dev

Après avoir exécuté la commande ci-dessus, nous verrons la sortie comme indiqué dans l’image ci-dessous.

Étape 4 : Utilisation du DApp

• Maintenant, il est temps d’utiliser notre DApp. Nous allons adopter Gina. Cliquez sur le bouton Adopter.
• Une notification Metamask apparaîtra et verra une transaction. Maintenant, cliquez sur confirmer.
• Nous verrons une nouvelle notification pour la transaction confirmée.
• Maintenant, si nous revenons à la section d’activité du portefeuille MetaMask, nous pouvons voir une transaction.
• Si nous revenons à notre DApp. Nous pouvons voir que le bouton d’adoption est maintenant changé en succès.

Conclusion

Nous avons essayé de tout expliquer à partir de zéro de manière étape par étape. Nous avons donné des explications et des raisonnements pour chaque étape. Nous sommes heureux pour tous ceux qui ont lu cet article et ont créé ce DApp à partir de zéro sans expérience préalable de développement DApp. Nous allons créer un nouveau DApp passionnant à partir de zéro dans le prochain tutoriel. Tous les crédits de code utilisés appartiennent à Truffle Documentation.

Questions fréquemment posées

Quels sont les DApps célèbres?

CryptoMines, Bomb Crypto, Splinterlands et Axie Infinity sont des DApps populaires sur le marché.

Comment DApp gagne-t-il de l’argent?

Les DApps peuvent gagner de l’argent grâce à un lancement d’ICO, des publicités, des frais de transaction, des abonnements, etc., et bien plus encore.

DApps a-t-il un avenir ?

DApps continuera à se développer à un rythme exponentiel à l’avenir. Bien que ce processus prenne du temps, 2022 devrait voir des améliorations significatives et la propagation de la technologie blockchain et de ses applications.

Pourquoi Web3 est-il l’avenir ?

La protection de la vie privée est la plus grande préoccupation des utilisateurs réguliers en 2022. Dans Web3, les utilisateurs auront la propriété complète de leurs actifs. Contrairement à aujourd’hui, où les géants de la technologie contrôlent la plupart des plates-formes.

Où pouvons-nous trouver des DApps?

Nous pouvons trouver tous les DApps populaires sur DApp Radar. C’est l’un des meilleurs magasins DApp disponibles sur le marché.