paint-brush
So erstellen Sie einen dezentralen Marktplatz für Agrarprodukte im RSK-Testnetzvon@induction
320 Lesungen
320 Lesungen

So erstellen Sie einen dezentralen Marktplatz für Agrarprodukte im RSK-Testnetz

von Vision NP13m2024/09/30
Read on Terminal Reader

Zu lang; Lesen

Die Technologie muss im Dienste der Menschheit stehen. Die Blockchain-Technologie, die bereits viele Sektoren revolutioniert hat, kann auch den Agrarbereich verändern. Um diese dezentrale Technologie in den Mainstream zu bringen, sollten wir sie vereinfachen, um sie der breiten Öffentlichkeit zugänglich zu machen, damit wir eine größere Nutzerschaft erreichen und letztlich die Anwendungsfälle erweitern können.
featured image - So erstellen Sie einen dezentralen Marktplatz für Agrarprodukte im RSK-Testnetz
Vision NP HackerNoon profile picture
0-item
1-item
2-item

Die Technologie muss im Dienste der Menschheit stehen. Die Blockchain-Technologie, die bereits viele Sektoren revolutioniert hat, kann auch den Agrarbereich verändern. Um diese dezentrale Technologie in den Mainstream zu bringen, sollten wir sie vereinfachen, um sie der breiten Öffentlichkeit zugänglich zu machen, damit wir eine größere Nutzerschaft erreichen und letztlich die Anwendungsfälle erweitern können.


In diesem Tutorial erstellen wir eine dezentrale Anwendung (dApp), mit der Benutzer landwirtschaftliche Produkte im Rootstock (RSK)-Blockchain-Netzwerk kaufen und verkaufen können. Das Hauptziel besteht darin, eine dApp zu erstellen, die im Blockchain-Netzwerk ausgeführt wird. Benutzer aller Art können problemlos Produkte hinzufügen, um durch den Verkauf ihrer landwirtschaftlichen Produkte ohne übermäßiges menschliches Eingreifen Geld zu verdienen.


Zunächst wurde die App im Testnetz von Rootstock getestet und ist fast produktionsbereit (es waren nur noch geringfügige Anpassungen erforderlich, um auf das Mainnet von Rootstock umzustellen). Das Projekt ist bereits auf GitHub hochgeladen, Sie können also einfach das Repository klonen, um es selbst zu testen.


Dafür bevorzuge ich Readme.md auf GitHub . Aber in diesem Tutorial versuchen wir, Sie ausführlich anzuleiten, damit jeder Benutzer seine dApp erstellen kann, indem er das Tutorial Schritt für Schritt versteht. Wir schlagen vor, dass Sie den Frontend-Code aus dem GitHub-Repository herunterladen und ihn dem entsprechenden Verzeichnis hinzufügen. Wir behandeln alles, vom Einrichten des Projekts über das Bereitstellen von Smart Contracts bis hin zum Erstellen eines interaktiven Frontends mit Echtzeitfunktionen.


Bevor wir beginnen, möchten wir eine dApp namens AgriMarket erstellen, die voraussichtlich über die folgenden Funktionen verfügt:

  • Ermöglicht Benutzern den Zugriff auf Web3-Funktionen über unterstützte Wallets (in unserem Fall MetaMask).
  • Ermöglicht Benutzern, ihre landwirtschaftlichen Produkte mit ihren Preisen hinzuzufügen, indem sie ihre Wallets mit der dApp verbinden.
  • Die App bestätigt die Smartcontract-Aufrufe durch Interaktion mit MetaMask.
  • Benutzer können Produkte in den Einkaufswagen legen und die dApp kann Transaktionen initiieren, auch wenn sich mehrere Produkte im Einkaufswagen befinden.
  • Benutzer können Echtzeitbenachrichtigungen, Transaktionsbelege und Funktionen zur Produktentfernung sowohl aus dem Einkaufswagen als auch von der Produktlistenseite erhalten.

📥Voraussetzungen – Bevor wir beginnen, stellen Sie sicher, dass Folgendes auf Ihrem Computer installiert ist:

  • Node.js (v14 oder höher)
  • npm oder Garn
  • Truffle oder Hardhat für die Entwicklung intelligenter Verträge
  • Für das RSK-Testnetz konfigurierte MetaMask-Erweiterung
  • Git zur Versionskontrolle
  • Eine IDE wie VSCode

📥Projekteinrichtung

👉Erstellen Sie das Projektverzeichnis


Bitte stellen Sie sicher, dass Sie während unseres gesamten Entwicklungs- und Testprozesses dieses Hauptprojektverzeichnis bevorzugen.


Abbildung 1.Projektverzeichnis


👉Initialisieren Sie das Projektverzeichnis

Erstellen Sie ein neues Verzeichnis für Ihr Projekt, indem Sie die folgenden Befehle im Terminal ausführen:

 mkdir rsk-agri-marketplace cd rsk-agri-marketplace


👉Initialisieren Sie ein neues npm-Projekt:

 npm init -y


👉Trüffelprojekt initialisieren


Wir verwenden Truffle zum Kompilieren und Entwickeln des Smart Contracts, also initialisieren wir ihn über das Stammverzeichnis:

 truffle init


Dadurch wird die Grundstruktur erstellt: • contracts/ - Enthält Solidity-Verträgemigrations/ - Bereitstellungsskriptetest/ - Tests für Ihre Verträgetruffle-config.js - Truffle-Konfigurationsdatei


📥Umgebungsvariablen konfigurieren

Vertrauliche Informationen wie private Schlüssel, Pimata-API-Schlüssel usw. sollten in einer .env-Datei gespeichert werden.


👉Dotenv installieren

 npm install dotenv


👉Erstellen Sie eine .env-Datei


Erstellen Sie im Stammverzeichnis eine .env-Datei mit der folgenden Struktur:

 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


Bitte erstellen Sie die .env Datei ohne zusätzliche Leerzeichen oder falsche Zeichen, sonst treten später Probleme auf. Bitte denken Sie an diesen Schritt , da Sie den Smart Contract später aktualisieren. Holen Sie sich die Pinata-API hier .

📥Verbindung zum RSK-Testnetz herstellen

👉Truffle-config.js aktualisieren


Sie können die bereits erstellte Datei truffle-config.js im Verzeichnis Ihres Projekts sehen. Aktualisieren Sie einfach den Code, damit wir darüber mit dem RSK-Testnetz interagieren können.

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


👉HDWalletProvider installieren

 npm install @truffle/hdwallet-provider

📥Smart Contract-Entwicklung

Wir erstellen einen Marktplatzvertrag.


👉Installieren Sie OpenZeppelin-Verträge

Wir verwenden OpenZeppelin-Verträge, um die Sicherheit und den reibungslosen Betrieb unseres Smart Contracts zu verbessern. Installieren Sie ihn daher, indem Sie den folgenden Befehl im Terminal ausführen:

 npm install @openzeppelin/contracts


👉Erstellen Sie Marketplace.sol im Verzeichnis 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(); } }


👉Migrationsskript in migrations/2_deploy_contracts.js schreiben

 const Marketplace = artifacts.require("Marketplace"); module.exports = function (deployer) { deployer.deploy(Marketplace); };


👉Verträge kompilieren und bereitstellen

Führen Sie den folgenden Code aus, um den Vertrag über das Terminal zu kompilieren:

 truffle compile


Wenn alles richtig läuft, können Sie im Terminal etwa Folgendes sehen:

Abbildung 2. Vertragserstellung mit Truffle


Führen Sie den folgenden Befehl im Terminal aus, um Marketplace.sol im Testnetz von Rootstock bereitzustellen.

 truffle migrate --network rskTestnet

Sie benötigen eine bestimmte Menge tRBTC in der Brieftasche, bevor Sie Ihren Vertrag bereitstellen. Holen Sie es sich hier vom RSK-Faucet.

Nach dem erfolgreichen Vorgang wird Dir im folgenden Terminal die Meldung angezeigt:

Abbildung 3. Im RSK-Testnetz bereitgestellter Vertrag

Sie finden die Datei Marketplace.json unter \build\contracts\Marketplace.json Denken Sie daran, Sie kopieren diese Datei in ein anderes Verzeichnis.


Frontend-Entwicklung für die Marketplace dApp


Nachdem wir die Smart Contracts bereitgestellt haben, werden wir ein attraktives Frontend für den Marktplatz erstellen, mit dem Benutzer interagieren können. Das Frontend verfügt über Funktionen wie Produktlisten, Hinzufügen von Produkten, Kaufen, Hinzufügen/Entfernen von Produkten im Warenkorb, Verfolgen von Transaktionen und Bereitstellung von Echtzeit-Feedback wie Benachrichtigungen und einem Fortschrittsbalken.

📥Frontend-Entwicklung

👉React-Anwendung initialisieren

Wir werden React für das Frontend verwenden.


Initialisieren Sie eine neue React-App im Projektverzeichnis.

 npx create-react-app client


Navigieren Sie zum Clientverzeichnis.

 cd client


Installieren Sie Web3 und Bootstrap für die Benutzeroberfläche

 npm install web3 bootstrap


👉Projektstruktur

Sie benötigen für das Frontend die Struktur wie in Abbildung 1 dargestellt.


👉Web3-Setup in src/utils/Marketplace.json

Um mit dem Smart Contract zu interagieren, importieren wir die ABI (Application Binary Interface).

  • Kopieren Sie die Marketplace.json ABI aus Ihrem Truffle-Verzeichnis build/contracts in den Ordner client/src/utils/ wie in Schritt beschrieben.


  • Das Web3-Setup befindet sich in der Datei App.js Laden Sie sie von GitHub herunter und platzieren Sie sie im entsprechenden Verzeichnis, wie in Abbildung 1 gezeigt.


👉 Echtzeitbenachrichtigungen und Fortschrittsbalken

Für Echtzeitbenachrichtigungen integrieren wir eine Bibliothek wie react-toastify . Sie können react-bootstrap auch für Fortschrittsbalken verwenden.


Installieren Sie React Toastify im client -Verzeichnis

 npm install react-toastify


👉Installieren Sie Axios für HTTP-Anfragen (an die API von Pinata):

 npm install axios


Gut, jetzt lade bitte alle Frontend-Komponenten aus dem Client-Ordner (inkl. Ordner+Dateien) des GitHub-Repositorys herunter und platziere sie im entsprechenden Verzeichnis.

📥Letzter Schliff und Interaktion mit Ihrer App

👉Jetzt können Sie mit Ihrer dApp interagieren. Sie können Ihre React-App mit dem folgenden Befehl im Terminal ausführen:

 npm start


Es wird automatisch der Standardbrowser geöffnet. Bitte stellen Sie sicher, dass Sie die MetMask-Browsererweiterung installiert und das RSK-Testnetz richtig konfiguriert haben (Sie können der Anleitung des Projekts folgen, um hier das richtige Netzwerk auszuwählen).


Nun ruft die React-App die MetaMask-Wallet-Erweiterung auf. Bitte bestätigen Sie den Aufruf. Anschließend wird das verbundene Wallet in der Hauptoberfläche angezeigt, wie in der folgenden Abbildung dargestellt.

Abbildung 4. Haupt-UI des Frontends



Das Frontend bietet Ihnen zahlreiche Funktionen. Sie können Produkte hinzufügen/entfernen. Jedes Mal werden Sie aufgefordert, den Anruf in der MetaMask-Wallet-Erweiterung zu bestätigen. Sehen Sie sich das folgende GIF an:


Gif 1. Prozess zum Hinzufügen von Produkten im Frontend der dApp


Nun können Sie testen, ob die dApp die zum Warenkorb hinzugefügten Transaktionen ordnungsgemäß verarbeitet oder nicht. Im Abschnitt „Transaktionsverlauf“ können Sie einen detaillierten Transaktionsverlauf mit allen technischen Details sehen. Sobald der Kauf abgeschlossen ist, wird das Geld an den Eigentümer gesendet, der die Produkte zur dApp hinzugefügt hat.


Lassen Sie uns die App gemeinsam testen:

Gif 2. Voll funktionsfähige dApp zur Abwicklung von Transaktionen aus dem Warenkorb


Glückwunsch! Wir haben die dApp erfolgreich im RSK-Testnetz entwickelt und getestet. Sie können sie ins RSK-Mainnet übertragen, indem Sie die gewünschten Funktionen hinzufügen. Passen Sie einfach die Codes an, wo immer „Testnetz“ erwähnt wird, und lesen Sie hier auch die Projektdokumentation , wenn Sie es eilig haben, die produktionsreife App zu erstellen.

📥Potenzielle Herausforderungen und Zukunft:

Dies wird der neue Ansatz zur Einführung eines Agrarmarktplatzes sein, der mehrere Prozesse wie Produktlieferung, Abholung usw. umfasst. Wenn Käufer und Verkäufer nicht genau bekannt sind, kann dies zu Vertrauensproblemen führen. Eine weitere Herausforderung besteht darin, dass es sich noch in der experimentellen Phase befindet und wir nicht wissen, wie die Verbraucher auf diese sich entwickelnde Technologie reagieren.


Daher sind Bildung und Ausbildung sowohl für Landwirte als auch für Verbraucher von entscheidender Bedeutung, um neue Technologien zu übernehmen. Darüber hinaus sind ausreichende Kooperationen die Schlüsselfaktoren für die Entwicklung eines nachhaltigen dezentralen Marktplatzes für landwirtschaftliche Produkte.

Abschluss:

Wir haben erfolgreich einen dezentralen Agrarmarktplatz im Rootstock (RSK)-Testnetz aufgebaut. Sicherheit hat oberste Priorität, deshalb werden mehrere Maßnahmen ergriffen, um den Smartcontract-Code mithilfe von OpenZeppelin-Verträgen zu schützen. Die getestete dApp enthält fast alle notwendigen Funktionen, die ein einfacher dezentraler Marktplatz haben sollte, aber Sie können sie mit weiteren Funktionen erweitern, wenn Sie planen, die App im Rootstock-Hauptnetz zu starten. Denken Sie auch an die Sicherheit, um sicherzustellen, dass alles wie vorgesehen und reibungslos funktioniert.


Wir haben versucht, die schnellen Transaktionsverarbeitungsfunktionen von Rootstock mit niedrigen Transaktionsgebühren zu nutzen, um alle Transaktionen durchzuführen und so das berüchtigte Überlastungsproblem von Bitcoin zu lösen. Natürlich sind diese Art von dezentralen Marktplätzen mit vielen Problemen konfrontiert, aber da wir natürlich nach Freiheit streben, können wir hoffen, dass wir in Zukunft einen dezentraleren Marktplatz finden werden.