La technologie doit être au service de l'humanité. La technologie Blockchain, qui a déjà révolutionné de nombreux secteurs, peut également transformer le domaine agricole. Pour que cette technologie décentralisée devienne une tendance d'adoption générale, nous devons la simplifier pour atteindre le grand public afin de pouvoir atteindre un plus grand nombre d'utilisateurs, augmentant ainsi les cas d'utilisation. Dans ce tutoriel, nous allons créer une application décentralisée (dApp) qui permet aux utilisateurs d'acheter et de vendre des produits agricoles sur le réseau blockchain Rootstock (RSK). L'objectif principal est de créer une dApp qui fonctionne sur le réseau blockchain. Tout type d'utilisateur peut ajouter facilement des produits pour gagner de l'argent en vendant ses produits agricoles sans intervention humaine excessive. Au départ, l'application a été testée sur le réseau de test de Rootstock et elle est presque prête pour la production (il ne lui reste plus qu'à effectuer quelques ajustements mineurs pour passer au réseau principal de Rootstock). Le projet est déjà téléchargé sur GitHub, vous pouvez donc simplement cloner le dépôt pour le tester par vous-même. Pour cela, je préfère sur . Mais, dans ce tutoriel, nous essayons de guider en profondeur afin que tout type d'utilisateur puisse créer sa dApp avec la facilité de comprendre le tutoriel étape par étape. Nous pouvons vous proposer de télécharger le code Frontend à partir du référentiel GitHub et de l'ajouter au répertoire approprié. Nous couvrirons tout, de la configuration du projet au déploiement de contrats intelligents et à la création d'un Frontend interactif avec des fonctionnalités en temps réel. Readme.md GitHub Avant de commencer, nous souhaitons créer une dApp nommée AgriMarket qui devrait avoir les fonctionnalités suivantes : Permet aux utilisateurs d'accéder aux fonctionnalités Web3 via des portefeuilles pris en charge (MetaMask dans notre cas). Permet aux utilisateurs d'ajouter leurs produits agricoles avec leurs prix en connectant leurs portefeuilles à la dApp. L'application confirme les appels de contrats intelligents en interagissant avec MetaMask. Les utilisateurs peuvent ajouter des produits dans le panier et dApp est capable d'initier des transactions même s'il y a plusieurs produits dans le panier. Les utilisateurs peuvent recevoir des notifications en temps réel, des reçus de transaction et des fonctionnalités de suppression de produits à partir des paniers ainsi que de la page de liste de produits. 📥Prérequis – Avant de commencer, assurez-vous que les éléments suivants sont installés sur votre machine : Node.js (v14 ou supérieur) npm ou fil Truffe ou Hardhat pour le développement de contrats intelligents Extension MetaMask configurée pour le testnet RSK Git pour le contrôle de version Un IDE comme VSCode 📥Configuration du projet 👉Créer le répertoire du projet Assurez-vous de privilégier le répertoire de ce projet principal tout au long de notre processus de développement et de test. 👉Initialiser le répertoire du projet Créez un nouveau répertoire pour votre projet en exécutant les commandes suivantes dans le terminal : mkdir rsk-agri-marketplace cd rsk-agri-marketplace 👉Initialiser un nouveau projet npm : npm init -y 👉Initialiser le projet Truffe Nous utilisons Truffle pour compiler et développer le contrat intelligent, donc initialisez-le via le répertoire racine : truffle init Cela crée la structure de base : • - • - • - • - contracts/ Contient les contrats Solidity migrations/ Scripts de déploiement test/ Tests pour vos contrats truffle-config.js Fichier de configuration Truffle 📥Configurer les variables d'environnement Les informations sensibles telles que les clés privées, la clé API Pimata, etc. doivent être stockées dans un fichier .env. 👉Installer dotenv npm install dotenv 👉Créer un fichier .env Dans le répertoire racine, créez un fichier .env avec la structure suivante : REACT_APP_PINATA_API_KEY=Your API Key REACT_APP_PINATA_SECRET_API_KEY=Secret API Key MNEMONIC=12 words mnemonic key RSK_TESTNET_URL=https://public-node.testnet.rsk.co REACT_APP_CONTRACT_ADDRESS=Contract Address Veuillez créer le fichier sans espaces supplémentaires ni incompatibilités de caractères, sinon vous rencontrerez des difficultés plus tard. Veuillez vous souvenir de cette car vous mettrez à jour le contrat intelligent plus tard. Obtenez l'API Pinata à partir . .env étape d'ici 📥Connexion au réseau de test RSK 👉Mettre à jour truffle-config.js Vous pouvez voir le truffle-config.js déjà créé dans le répertoire de votre projet. Il suffit de mettre à jour le code pour que nous puissions interagir avec le réseau de test RSK via celui-ci. require('dotenv').config(); const HDWalletProvider = require('@truffle/hdwallet-provider'); module.exports = { networks: { development: { host: "127.0.0.1", port: 8545, network_id: "*", }, rskTestnet: { provider: () => new HDWalletProvider({ mnemonic: { phrase: process.env.MNEMONIC, }, providerOrUrl: `https://public-node.testnet.rsk.co`, chainId: 31, // RSK Testnet ID pollingInterval: 15000, }), network_id: 31, gas: 2500000, gasPrice: 60000000, confirmations: 2, timeoutBlocks: 60000, skipDryRun: true, }, }, compilers: { solc: { version: "0.8.20", }, }, db: { enabled: false, }, }; 👉Installer HDWalletProvider npm install @truffle/hdwallet-provider 📥Développement de contrats intelligents Nous allons créer un contrat de marché. 👉Installer les contrats OpenZeppelin Nous utilisons des contrats OpenZeppelin pour améliorer la sécurité et le bon fonctionnement de notre contrat intelligent, alors installez-le en exécutant la commande suivante dans le terminal : npm install @openzeppelin/contracts 👉Créez dans le répertoire : Marketplace.sol contracts/ // SPDX-License-Identifier: MIT pragma solidity ^0.8.0; import "@openzeppelin/contracts/utils/ReentrancyGuard.sol"; import "@openzeppelin/contracts/utils/Pausable.sol"; contract Marketplace is ReentrancyGuard, Pausable { uint public productCount = 0; struct Product { uint id; address payable seller; string name; string description; string imageHash; // IPFS hash uint price; // Price in tRBTC bool active; } mapping(uint => Product) public products; event ProductCreated( uint id, address seller, string name, string description, string imageHash, uint price, bool active ); event ProductPurchased( uint id, address seller, address buyer, uint price ); event ProductRemoved(uint id, address seller); function createProduct( string memory _name, string memory _description, string memory _imageHash, uint _price ) public whenNotPaused { require(bytes(_name).length > 0, "Name is required"); require(_price > 0, "Price must be positive"); // Price is expected in tRBTC productCount++; products[productCount] = Product( productCount, payable(msg.sender), _name, _description, _imageHash, _price, true ); emit ProductCreated( productCount, msg.sender, _name, _description, _imageHash, _price, true ); } function purchaseProducts(uint[] memory _ids) public payable nonReentrant whenNotPaused { uint totalCost = 0; for (uint i = 0; i < _ids.length; i++) { Product storage _product = products[_ids[i]]; require(_product.id > 0 && _product.id <= productCount, "Invalid product ID"); require(_product.active, "Product is not active"); require(_product.seller != msg.sender, "Seller cannot buy their own product"); totalCost += _product.price; } require(msg.value >= totalCost, "Insufficient funds"); for (uint i = 0; i < _ids.length; i++) { Product storage _product = products[_ids[i]]; (bool success, ) = _product.seller.call{value: _product.price}(""); require(success, "Transfer failed to the seller"); // Emit purchase event (product can be bought again) emit ProductPurchased( _product.id, _product.seller, msg.sender, _product.price ); } } function removeProduct(uint _id) public { Product storage _product = products[_id]; require(_product.id > 0 && _product.id <= productCount, "Invalid product ID"); require(_product.seller == msg.sender, "Only the seller can remove the product"); _product.active = false; // Mark the product as inactive emit ProductRemoved(_id, msg.sender); } function getProduct(uint _id) public view returns (Product memory) { require(_id > 0 && _id <= productCount, "Invalid product ID"); Product memory product = products[_id]; require(product.active, "Product is not available"); return product; } function pause() public { _pause(); } function unpause() public { _unpause(); } } 👉Écrire un script de migration dans migrations/2_deploy_contracts.js const Marketplace = artifacts.require("Marketplace"); module.exports = function (deployer) { deployer.deploy(Marketplace); }; 👉Compiler et déployer des contrats Exécutez le code suivant pour compiler le contrat via le terminal : truffle compile Si tout se passe correctement, vous pouvez voir quelque chose comme ceci dans le terminal : Exécutez la commande suivante dans le terminal pour déployer sur le réseau de test de Rootstock. Marketplace.sol truffle migrate --network rskTestnet Vous avez besoin d'un certain montant de tRBTC dans le portefeuille avant de déployer votre contrat. Obtenez-le à partir du robinet RSK . ici Une fois le processus réussi, vous verrez le message dans le terminal suivant : Vous trouverez le fichier dans rappelez-vous, vous copierez ce fichier dans un autre répertoire. Marketplace.json \build\contracts\Marketplace.json Développement front-end pour la dApp du marché Maintenant que nous avons déployé les contrats intelligents, nous allons créer une interface attrayante pour la place de marché qui permettra aux utilisateurs d'interagir avec elle. L'interface comportera des fonctionnalités telles que les listes de produits, l'ajout de produits, l'achat, l'ajout/la suppression de produits dans le panier, le suivi des transactions et la fourniture de commentaires en temps réel comme des notifications et une barre de progression. 📥Développement Front-End 👉Initialiser l'application React Nous utiliserons React pour le frontend. Initialisez une nouvelle application React dans le répertoire du projet. npx create-react-app client Accédez au répertoire client. cd client Installer Web3 et Bootstrap pour l'interface utilisateur npm install web3 bootstrap 👉Structure du projet Vous aurez besoin de la structure du frontend comme indiqué dans la Figure 1. 👉Configuration Web3 dans src/utils/Marketplace.json Pour interagir avec le contrat intelligent, nous allons importer l'ABI (Application Binary Interface). Copiez l'ABI de votre répertoire Truffle dans le dossier comme mentionné à . Marketplace.json build/contracts client/src/utils/ l'étape La configuration de Web3 se trouve dans le fichier Téléchargez-le depuis et placez-le dans le répertoire approprié comme indiqué dans la Figure 1. App.js GitHub 👉 Notifications en temps réel et barres de progression Pour les notifications en temps réel, nous intégrerons une bibliothèque de type . Vous pouvez également utiliser pour les barres de progression. react-toastify react-bootstrap Installer React Toastify dans le répertoire client npm install react-toastify 👉Installez Axios pour les requêtes HTTP (vers l'API de Pinata) : npm install axios Très bien, téléchargez maintenant tous les composants Frontend du dossier client (y compris le dossier + les fichiers) du . Et placez-les dans le répertoire approprié. référentiel GitHub 📥Touches finales et interaction avec votre application 👉Vous pouvez désormais interagir avec votre dApp. Vous pouvez exécuter votre application React en utilisant la commande suivante dans le terminal : npm start Le navigateur par défaut s'ouvrira automatiquement. Assurez-vous que l'extension de navigateur MetMask est installée et que le réseau de test RSK est correctement configuré (vous pouvez suivre le guide du projet pour sélectionner le bon réseau ). ici Maintenant, l'application React appelle l'extension de portefeuille MetaMask, veuillez confirmer l'appel. Elle affichera ensuite le portefeuille connecté dans l'interface principale comme indiqué dans la figure suivante. Le frontend vous offre de nombreuses fonctionnalités. Vous pouvez ajouter/supprimer des produits. A chaque fois, il vous sera demandé de confirmer l'appel dans l'extension du portefeuille MetaMask. Regardez le gif suivant : Eh bien, vous pouvez maintenant tester si la dApp traite correctement les transactions ajoutées au panier ou non. Vous pouvez voir un historique détaillé des transactions dans la section « Historique des transactions » avec tous les détails techniques. Une fois l'achat terminé, les fonds sont envoyés au propriétaire qui a ajouté les produits à la dApp. Testons l'application ensemble : Félicitations ! Nous avons développé et testé avec succès l'application décentralisée dans le réseau de test RSK. Vous pouvez la basculer vers le réseau principal RSK en ajoutant les fonctionnalités souhaitées. Ajustez simplement les codes partout où le réseau de test est mentionné et consultez également la ici si vous vous précipitez pour créer l'application prête pour la production. documentation du projet 📥Défis potentiels et avenir : Il s'agira d'une nouvelle approche pour lancer le marché agricole, qui comprend plusieurs processus tels que la livraison des produits, le ramassage, etc. Sans connaître en détail les acheteurs et les vendeurs, cela pourrait créer des problèmes de confiance. Un autre défi est qu'il s'agit encore d'une phase expérimentale et nous ne savons pas comment les consommateurs se comportent face à cette technologie en constante évolution. L’éducation et la formation sont donc essentielles pour que les agriculteurs et les consommateurs puissent adopter de nouvelles technologies. De plus, des collaborations suffisantes sont des facteurs clés pour développer un marché décentralisé et durable pour les produits agricoles. Conclusion: Nous avons réussi à créer une place de marché agricole décentralisée sur le réseau de test Rootstock (RSK). La sécurité a été considérée comme une priorité, c'est pourquoi plusieurs mesures sont prises pour protéger le code des contrats intelligents en utilisant des contrats OpenZeppelin. La dApp testée comprend presque toutes les fonctionnalités nécessaires qu'une simple place de marché décentralisée devrait avoir, mais vous pouvez l'améliorer avec plus de fonctionnalités si vous prévoyez de lancer une application sur le réseau principal de Rootstock. Gardez également la sécurité à l'esprit pour vous assurer que tout fonctionne comme prévu et sans problème. Nous avons tenté d'utiliser les fonctionnalités de traitement rapide des transactions de Rootstock avec des frais de transaction faibles pour procéder à toutes les transactions, ce qui résoudra le problème notoire de congestion de Bitcoin. Bien sûr, ces types de marchés décentralisés doivent faire face à de nombreux problèmes, mais comme nous recherchons naturellement la liberté, nous pouvons espérer trouver un marché plus décentralisé à l'avenir.
