Wie erstelle ich eine DApp auf Ethereum mit Solidity?

Web3 ist seit Anfang 2022 im Trend, ähnlich wie NFTs im letzten Jahr explodierten. Dennoch war die Idee, dezentrale Apps für Mainstream-Anwendungsfälle wie Facebook, Instagram und Google zu entwickeln, ein langes Ziel der Krypto-Community. Während jedoch einige Blockchain-Unternehmen bereits einige DApps entwickelt haben, hat die Web3-Branche erst vor kurzem an Popularität gewonnen. In diesem Artikel werden wir ein Adoptions-Tracking-System für einen Pet Shop auf Ethereum von Grund auf neu erstellen.

Zusammenfassung (TL;DR)

• Web3 ist seit Anfang 2022 im Trend, ähnlich wie NFTs im letzten Jahr explodierten.
• Vorkenntnisse in Solidity- und Blockchain-Entwicklungstools wie Ganache, Truffle usw. sind nicht erforderlich.
• Eine DApp ist eine Softwareanwendung, die in einem verteilten Netzwerk betrieben wird.
• Wir müssen VS Code, NodeJS, Git, Truffle und Ganache installieren.
• Danach richten wir unsere Entwicklungsumgebung mit der Truffle Box, also der Zoohandlung, ein.
• Der nächste Schritt besteht darin, einen intelligenten Vertrag mit Solidität zu erstellen.
• Wir kompilieren den Smart Contract mit dem Befehl truffle compile und migrieren ihn dann mit dem Befehl truffle migrate.
• Wir erstellen eine TestAdoption.sol-Datei, um unseren Smart Contract zusammen mit dem Trüffeltestbefehl zu testen.
• Wir werden eine Benutzeroberfläche mit Web3.js und etwas vorhandenem Code in der Trüffelbox erstellen.
• Schließlich werden wir mit unserer DApp über MetaMask und Ganache interagieren.

Problemstellung

Nehmen wir das Beispiel von Pete. Pete ist Besitzer einer Zoohandlung in Neu-Delhi, Indien.

Wie wir sehen können, gewinnen Blockchain-Technologie und Kryptowährung an Mainstream-Akzeptanz. Am 1. Februar 2022 kündigte Finanzministerin Nirmala Sitharaman an, dass die Reserve Bank of India ab 2022-23 eine digitale Rupie mit Blockchain-Technologie ausgeben werde. Dies ist ein positiver Schritt in Richtung Krypto-Adoption. Jetzt hat Indien die Blockchain-Technologie anerkannt.

Pete ist also auch daran interessiert, die Blockchain-Technologie zu nutzen. Er will die Blockchain-Technologie für seinen Shop nutzen. Nachdem er auf eigene Faust recherchiert hat, ist Pete fasziniert von Ethereum Blockchain und der Idee von Smart Contracts. Er ist daran interessiert, es zu verwenden, um Haustieradoptionen effizienter zu verwalten. Sein Geschäft bietet Platz für bis zu 16 Haustiere zu einem bestimmten Zeitpunkt. Er hat bereits eine Haustierdatenbank parat. Pete möchte, dass jemand eine DApp für ihn erstellt.

Das Ziel der DApp ist es, eine Ethereum-Adresse mit einem haustier zu verbinden, das adoptiert werden soll.

Dies ist ein Beispiel dafür, wie eine typische Problemstellung in einem Blockchain-Geschäft aussieht. Lassen Sie uns nun zum nächsten Schritt übergehen.

Voraussetzungen

Dieser Artikel richtet sich an Personen, die ein grundlegendes Verständnis von Ethereum und Smart Contracts haben. Wenn Sie keine Vorkenntnisse über Ethereum haben, beginnen Sie von hier aus.

Einige Programmiererfahrungen mit HTML und JavaScript helfen beim einfachen Verständnis der Codierungslogik. Wenn jemand neu bei DApps ist oder seine Webentwicklungsreise beginnt, kann er diesem Artikel leicht folgen. Vorkenntnisse in Solidity- und Blockchain-Entwicklungstools wie Ganache, Truffle usw. sind nicht erforderlich. Wir werden jedoch jeden Schritt erklären, wenn wir vorankommen.

Dieser Artikel wird für jeden Neuling hilfreich sein, und wir werden Schritt für Schritt eine DApp erstellen. Lassen Sie uns nun zum nächsten Schritt übergehen und verstehen, was eine DApp ist.

Was ist eine DApp?

Eine dezentrale Anwendung ist eine Softwareanwendung, die in einem verteilten Netzwerk betrieben wird. Es wird nicht auf einem zentralisierten Server gehostet, sondern in einem dezentralen Peer-to-Peer-Netzwerk wie IPFS. Um eine DApp bereitzustellen oder mit ihr zu interagieren, müssen Sie keine reale Identifizierung preisgeben.

DApp = FrontEnd + Smart Contract BackEnd

BackEnd Code ist hauptsächlich in Solidity (oder Vyper) geschrieben. Es gibt jedoch keine spezifische Sprache für FrontEnd-Code. Lassen Sie uns nun zum nächsten Schritt übergehen und verstehen, wie DApps funktionieren.

Wie funktionieren DApps?

Im folgenden Diagramm können wir sehen, wie eine typische DApp funktioniert. Lassen Sie uns nun tief in dieses Diagramm eintauchen, um es besser zu verstehen.

1. Client-Browser: Es ist ein normaler Browser, der in HTML, CSS und JS geschrieben ist.
2. Web3.js: Es ist eine Sammlung von Bibliotheken, die es uns ermöglichen, mit einem lokalen oder entfernten Ethereum-Knoten über HTTP, IPC oder WebSocket zu interagieren.
3. Web3 Anbieter: Das Ethereum-Netzwerk enthält Knoten, und alle Knoten teilen sich die identische Kopie der Daten. Das Festlegen eines Web3-Anbieters in web3.js teilt unserem Code mit, von welchem Knoten wir Daten lesen und schreiben werden. Wir verwenden Metamask in unserer DApp, um seinen Web3-Provider in den Browser zu injizieren.
4. Ethereum Virtuelle Maschine (EVM): Jeder Ethereum-Knoten im Netzwerk hat seine EVM-Implementierung und ist dafür verantwortlich, die gleichen Smart Contract-Anweisungen über das Netzwerk auszuführen.

Installation von Abhängigkeiten

Es gibt ein paar technische Anforderungen, bevor wir mit der Erstellung von DApp beginnen. In diesem Abschnitt installieren wir alle erforderlichen Abhängigkeiten.

1. Installation von VS Code

Erstens brauchen wir eine IDE, d.h. eine integrierte Entwicklungsumgebung. Eine IDE ermöglicht es Programmierern, den Prozess der Erstellung eines Computerprogramms zu vereinfachen. Es steigert die Produktivität eines Programmierers, indem es typische Softwareentwicklungsaufgaben wie das Bearbeiten von Quellcode, das Erstellen von ausführbaren Dateien und das Debuggen an einem einzigen Ort zusammenführt.

Wir werden Visual Studio Code in unserem Artikel verwenden. Es ist ein leichtgewichtiger Quellcode-Editor, ideal für den täglichen Gebrauch mit Funktionen wie Syntaxhervorhebung, Klammerabgleich, automatischer Einrückung, Box-Auswahl, Snippets usw. Es verbindet die Benutzerfreundlichkeit eines Quellcode-Editors mit erweiterten Entwicklerfeatures wie IntelliSense-Codevervollständigung und Debuggen. Es ist für macOS, Linux und Windows verfügbar.

Um VS Code herunterzuladen, folgen Sie der Schritt-für-Schritt-Anleitung, indem Sie hier klicken.

2. Installation von NodeJS und npm

Zweitens brauchen wir eine Laufzeitumgebung. Wir werden NodeJS und npm verwenden. npm wird mit NodeJS geliefert.

Node.js ist eine JavaScript-Laufzeitumgebung, die Open Source und plattformübergreifend ist. Es ist ein weit verbreitetes Werkzeug für fast jedes Projekt. Es ist eine leichtgewichtige, skalierbare und Open-Source-Sprachplattform, die es einfach macht, Apps auf Unternehmensebene zu erstellen. Npm enthält Pakete, die wir in unseren Apps verwenden, um den Entwicklungsprozess zu beschleunigen und zu verbessern.

3. Installation von Git

Drittens brauchen wir Git. Es ist ein kostenloses und Open-Source-verteiltes Versionskontrollsystem, das entwickelt wurde, um alles mit Geschwindigkeit und Effizienz zu verwalten. Es behält die Änderungen bei, die wir an Dateien vornehmen, so dass wir eine Aufzeichnung darüber haben, was getan wurde.

4. Installation von Trüffel

Viertens brauchen wir Trüffel. Es ist eine erstklassige Entwicklungsumgebung, ein Test-Framework und eine Asset-Pipeline für Blockchains, die auf der Ethereum Virtual Machine (EVM) basieren.

Um Truffle herunterzuladen, folgen Sie dieser Schritt-für-Schritt-Anleitung.

• Schritt 1: Öffnen Sie VS Code.
• Schritt 2: Klicken Sie auf Terminal.
• Schritt 3: Klicken Sie auf Neues Terminal.
• Schritt 4: Fügen Sie diesen Befehl auf dem Terminal ein.

npm install -g truffle

• Schritt 5: Um zu überprüfen, ob Truffle ordnungsgemäß installiert ist, fügen Sie diesen Befehl in das Terminal ein.

truffle version

5. Installation von Ganache

Schließlich brauchen wir Ganache. Es ist eine lokale Blockchain für die schnelle Entwicklung von Ethereum- und Corda-Anwendungen. Wir können Ganache über den gesamten Entwicklungszyklus hinweg einsetzen: Entwicklung, Bereitstellung und Testen von DApps in einer sicheren Umgebung. Alle Versionen von Ganache sind für Windows, Mac und Linux verfügbar.

Ganache ist in zwei Modi verfügbar: GUI und CLI. Ganache UI ist eine Desktop-Anwendung, die sowohl Ethereum als auch Corda unterstützt. Ganache CLI ist nur für die Ethereum-Entwicklung verfügbar.

In diesem Artikel werden wir Ganache CLI verwenden, da es einfach und leicht zu bedienen ist. Um Ganache CLI herunterzuladen, folgen Sie dieser Schritt-für-Schritt-Anleitung.

• Schritt 1: Öffnen Sie VS Code.
• Schritt 2: Klicken Sie auf Terminal.
• Schritt 3: Klicken Sie auf Neues Terminal.

• Schritt 4: Fügen Sie diesen Befehl auf dem Terminal ein.

npm install ganache –global

• Schritt 5: Um Ganache zu starten, fügen Sie diesen Befehl auf dem Terminal ein.

ganache
Jetzt haben wir alle Abhängigkeiten installiert. Der nächste Schritt ist die Einrichtung und Optimierung unserer Entwicklungsumgebung.

Einrichten der Entwicklungsumgebung

In diesem Abschnitt richten wir unsere Entwicklungsumgebung ein. Befolgen Sie diese Schritt-für-Schritt-Anleitung, um die Entwicklungsumgebung einzurichten.

• Schritt 1: Gehen Sie zu VS Code und erstellen Sie einen Ordner Haustier-Shop-Tutorial.
• Schritt 2: Klicken Sie jetzt mit der rechten Maustaste auf pet-shop-tutorial und klicken Sie auf Öffnen im integrierten Terminal.

Das Trüffelteam hat Trüffelboxen entwickelt. Dies sind die Boilerplates, die hilfreiche Module, Soliditätsverträge und Bibliotheken, Frontend-Ansichten und vieles mehr enthalten.

• Schritt 3: In diesem Artikel verwenden wir eine Trüffelbox, d.h. eine Zoohandlung, die die grundlegende Projektstruktur und den Code für die Benutzeroberfläche enthält. Fügen Sie diesen Befehl auf dem Terminal ein.

truffle unbox pet-shop

Nachdem Sie den obigen Befehl ausgeführt haben, lädt der Befehl die Dateien herunter, die wir im obigen Bild sehen können.

• Alternative Methode für Schritt 3: Wenn jemand die Benutzeroberfläche von Grund auf neu erstellen möchte, aber einen Trüffel-Boilerplate möchte. Fügen Sie diesen Befehl auf dem Terminal ein.

truffle init

• Schritt 4: Wir werden die VS Code-Erweiterung Solidity von Juan Blanco installieren, um Solidity-Code in VS Code zu schreiben. Öffnen Sie VS Code und gehen Sie zu Erweiterungen in der rechten Seitenleiste und klicken Sie darauf. Suchen Sie nach Solidity und klicken Sie auf Extension, deren Autor Juan Blanco ist. Klicken Sie auf Installieren.

Jetzt ist unsere Entwicklungsumgebung erfolgreich geschaffen. Der nächste Schritt besteht darin, einen Smart Contract zu erstellen.
Erstellung von Smart Contract
In diesem Abschnitt erstellen wir einen Smart Contract für unsere DApp. Diese Logik fungiert als Backend und Speicher für unsere DApp. Um einen Smart Contract zu erstellen, folgen Sie dieser Schritt-für-Schritt-Anleitung.

Schritt 1: Gehen Sie zum Vertragsverzeichnis im Pet-Shop-Tutorial-Ordner

Dieses Verzeichnis enthält unseren intelligenten Vertragscode, der in Solidität geschrieben ist. Erstellen Sie nun eine neue Datei Adoption.sol.

Schritt 2: Jetzt beginnen wir mit dem Schreiben unseres Soliditätscodes

Fügen Sie diesen Code in die Datei Adoption.sol ein.

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

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• SPDX-License-Identifier: GPL-3.0 : Solidity Version 0.6.8 hat SPDX-Lizenz-Identifier eingeführt, mit denen Entwickler die Lizenz definieren können, die der Vertrag verwendet. Entwickler sollten dies oben hinzufügen. Wenn dies in der Vertragsdatei fehlt, zeigt der Compiler eine Warnung an. Wenn die Vertragsdatei mehrere Lizenz-IDs hat, zeigt der Compiler einen Fehler an.
• Pragma-Solidität >=0,4,0 <0,9,0; : Dieser Befehl teilt dem Compiler mit, dass der Quellcode für die Solidity-Versionen 0.4.0 bis 0.9.0 geschrieben wurde. Das Pragma-Schlüsselwort wird verwendet, um Compilerfunktionen und -prüfungen zu aktivieren.
• contract Adoption {} : Dieser Befehl gibt die Sammlung von Code und Daten an einer bestimmten Adresse in der Ethereum-Blockchain an.

Schritt 3: Jetzt deklarieren wir eine Variable für unseren Smart Contract

Fügen Sie diesen Code nach dem Vertrag Adoption { in die Datei Adoption.sol ein.

address[16] public adopters;

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• address[16] : Diese Anweisung ist ein Array von Ethereum-Adressen. Arrays enthalten einen Typ und können eine feste oder variable Länge haben. In diesem Fall ist der Typ address, und die Länge ist 16.
• public : Öffentliche Funktionen sind Teil der Vertragsschnittstelle und können extern oder intern aufgerufen werden. Für öffentliche Zustandsvariablen wird eine automatische Getterfunktion generiert.
• adopters : Diese Anweisung ist eine Variable, die ein Container zum Speichern von Werten ist.

Schritt 4: Jetzt fügen wir die adopt()-Funktion zu unserem Smart Contract hinzu

Wir brauchen eine Funktion, mit der Benutzer ihre Adoptionsanfragen stellen können. Also erstellen wir eine adopt()-Funktion. Fügen Sie diesen Code nach der Variablendeklaration in die Datei Adoption.sol ein.
// Adopting a pet
function adopt(uint256 petId) public returns (uint256) {
require(petId >= 0 && petId <= 15);
adopters[petId] = msg.sender;
return petId;
}

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• function adopt(uint256 petId) public returns (uint256) {} : Wir müssen die Funktionsparameter und Ausgabetypen in Solidity angeben. In diesem Fall nehmen wir die petId-Eingabe als Ganzzahl und geben sie als Ganzzahl zurück. Um mehr über Funktionen in Solidity zu erfahren, klicken Sie hier.
• require(petId >= 0 && petId <= 15); : Wir verwenden die funktion require(), um zu überprüfen, ob petID innerhalb des Bereichs liegt. Da Arrays in Solidity von 0 indiziert werden, nehmen wir den petID-Wert zwischen 0 und 15.
• adopters[petId] = msg.sender; : Wenn die ID in den Bereich fällt, fügt die Funktion die Adresse hinzu, die den Aufruf an das Adopters-Array gesendet hat. msg.sender bezeichnet die Adresse der Person oder des Smart Contracts, die bzw. der diese Funktion aufgerufen hat.
• return petId; : Wir geben die petId als Ausgabe zurück.

Schritt 5: Jetzt fügen wir die getAdopters()-Funktion zu unserem Smart Contract hinzu

Wir brauchen eine Funktion, um die Adopter abzurufen. Diese Funktion sollte alle Status der Haustieradoption aktualisieren. Also erstellen wir eine getAdopters()-Funktion, die das gesamte Array zurückgibt. Fügen Sie diesen Code nach der Adopt()-Funktion in die Datei Adoption.sol ein.
// Retrieving the adopters
function getAdopters() public view returns (address[16] memory) {
return adopters;
}

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• function getAdopters() public view returns (address[16] memory) {} : Die Erklärung der Funktionsdeklaration ähnelt Schritt 4. Das View-Schlüsselwort gibt an, dass die Funktion den Status des Vertrags nicht ändert. memory gibt den Speicherort der Variablen an.
• return adopters : Da wir die Adopters-Variable bereits in Schritt 3 deklariert haben. Wir können es zurückgeben.

Schritt 6: Hier ist unser vollständiger Solidity Code

// 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;
}
}
Jetzt ist unser Smart Contract erfolgreich erstellt. Der nächste Schritt besteht darin, den Smart Contract zu kompilieren.
Kompilierung von Smart Contract
In diesem Abschnitt stellen wir unseren Smart Contract zusammen. Da Solidity eine kompilierte Sprache ist. Daher müssen wir es in Bytecode kompilieren, bevor das EVM es ausführen kann. Um den Smart Contract zu kompilieren, folgen Sie dieser Schritt-für-Schritt-Anleitung.

• Schritt 1: Gehen Sie zum VS Code pet-shop-tutorial Ordner. Klicken Sie nun mit der rechten Maustaste darauf und klicken Sie auf Öffnen im integrierten Terminal.
• Schritt 2: Fügen Sie diesen Befehl auf dem Terminal ein. Mit diesem Befehl werden alle Verträge im Vertragsverzeichnis kompiliert.

truffle compile

Nachdem wir den obigen Befehl ausgeführt haben, sehen wir die Ausgabe wie in der folgenden Abbildung gezeigt.

Jetzt ist unser Smart Contract erfolgreich kompiliert. Der nächste Schritt besteht darin, den Smart Contract zu migrieren.

Migration von Smart Contract

In diesem Abschnitt migrieren wir unseren Smart Contract. Migrationen sind JavaScript-Dateien, die bei der Bereitstellung von Verträgen im Ethereum-Netzwerk helfen. Um den Smart Contract zu migrieren, folgen Sie dieser Schritt-für-Schritt-Anleitung.

Schritt 1: Gehen Sie zum Migrationsverzeichnis im Pet-Shop-Tutorial-Ordner.

Wir werden sehen, dass bereits eine JavaScript-Datei vorhanden ist, dh 1 erste Migration.js. Diese Datei behandelt die Bereitstellung des Migrations.sol Smart Contract. Wir benötigen eine ähnliche Datei für unseren Adoption.sol-Vertrag. Wir erstellen eine neue Datei, d.h. 2_deploy_contracts.js, ähnlich unserer 1_initial_migration.js. Der Codierungsteil ist in beiden Dateien ähnlich. Die einzigen Änderungen sind die Funktionen require() und deploy(). Hier werden wir Adoption anstelle von Migrationen schreiben. Fügen Sie diesen Code in die 2_deploy_contracts.js-Datei ein.
var Adoption = artifacts.require(„Adoption“);

module.exports = function(deployer) {
de

Schritt 2: Jetzt ist es an der Zeit, Ganache auszuführen.

Wir müssen eine Blockchain betriebsbereit haben, bevor wir unseren Smart Contract dorthin migrieren. Wie oben beschrieben, verwenden wir Ganache CLI. Auch jetzt brauchen wir zwei Terminals. Der erste wird für Ganache-Befehle und der zweite für Trüffelbefehle sein. Also müssen wir unsere integrierten Terminals zweimal öffnen. Um Ganache zu starten, fügen Sie diesen Befehl auf dem Terminal ein.
ganache

Dieser Befehl erstellt eine Blockchain, die lokal auf Port 8545 arbeitet.

Schritt 3: Jetzt ändern wir die Portnummer

Der Hauptunterschied zwischen Ganache GUI und CLI besteht darin, dass Ganache GUI auf Port 7545 läuft, aber Ganache CLI auf Port 8545. Jetzt ändern wir die Portnummer in der Datei truffle-config.js, die sich am unteren Rand des Pet-Shop-Tutorial-Ordners befindet.

Schritt 4: Jetzt ist es an der Zeit, den Smart Contract in die Blockchain zu migrieren

Fügen Sie diesen Befehl auf dem Terminal ein. Mit diesem Befehl werden alle Verträge im Migrationsverzeichnis migriert.
truffle migrate

Nachdem wir den obigen Befehl ausgeführt haben, sehen wir die Ausgabe wie in der folgenden Abbildung gezeigt.

Wenn wir nun zu Ganache zurückkehren, können wir sehen, dass sich der Zustand der Blockchain geändert hat. Die Blockchain zeigt nun Block Nummer 4 an. Zuvor war es 0.

Jetzt ist unser Smart Contract erfolgreich migriert. Der nächste Schritt besteht darin, den Smart Contract zu testen.

Testen des Smart Contracts

In diesem Abschnitt testen wir unseren Smart Contract. Das Testen eines intelligenten Vertrags ist unerlässlich, da ein Fehler Millionen von Dollar kosten kann. Um den Smart Contract zu testen, folgen Sie dieser Schritt-für-Schritt-Anleitung.

Schritt 1: Gehen Sie zum Testverzeichnis im Pet-Shop-Tutorial-Ordner

Dieses Verzeichnis enthält Code, der in Solidität für Smart Contract-Tests geschrieben wurde. Erstellen Sie nun eine neue Datei TestAdoption.sol. Fügen Sie diesen Code in die Datei TestAdoption.sol ein.
// 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);
}

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• Importieren Sie „truffle/Assert.sol“; : Wir importieren Assert.sol aus dem globalen Trüffelverzeichnis. Es gibt uns verschiedene Assertionsprüfungen, die wir in unseren Tests verwenden können.
• Importieren Sie „truffle/DeployedAddresses.sol“; : Wir importieren DeployedAddresses.sol aus dem globalen truffle-Verzeichnis. Truffle stellt beim Ausführen von Tests eine neue Instanz des zu testenden Vertrags in der Blockchain bereit. Diese Datei ruft die Adresse des bereitgestellten Vertrags ab.
• import „.. /contracts/Adoption.sol“; : Wir importieren Adoption.sol aus dem Vertragsverzeichnis, da dies der intelligente Vertrag ist, auf dem wir Tests durchführen möchten.
• Adoption adoption = Adoption(DeployedAddresses.Adoption()); : Dieser Code enthält die zu testende Adresse des Smart Contracts, d.h. Adoptionsvertrag.
• uint expectedPetId = 8; : Diese Variable enthält die erwartete haustier-ID, die der TestAdoption-Vertrag zum Testen verwendet.
• address expectedAdopter = Adresse(diese); : Wir legen die erwartete Adopteradresse darauf fest, die die Adresse des aktuellen Vertrags abruft, da der TestAdoption-Vertrag die Transaktion an den Adoptionsvertrag sendet.

Schritt 2: Jetzt testen wir die funktion adopt()

Fügen Sie diesen Code nach der Deklaration von expectedPetId in die Datei TestAdoption.sol ein.

// 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.“);
}

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• uint returnedId = adoption.adopt(expectedPetId); : Wir nennen den zuvor deklarierten Smart Contract, also Adoptionsvertrag mit der ID expectedPetId.
• Assert.equal(returnedId, expectedPetId, „Adoption of the expected pet should match what is returned.“); : Wir übergeben den tatsächlichen Wert, d.h. returnedId, den erwarteten Wert, d.h. expectedPetId und eine Fehlermeldung, die ausgegeben wird, wenn der Test die Funktion Assert.equal() nicht erfüllt.

Schritt 3: Jetzt testen wir die Rückholung des Besitzers eines einzelnen Haustieres

Fügen Sie diesen Code nach der Funktion testUserCanAdoptPet() in die Datei TestAdoption.sol ein.

// 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“);
}

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• address adopter = adoption.adopters(expectedPetId); Wir erhalten die vom Adoptionsvertrag gespeicherte Adopteradresse, nachdem wir expectedPetId übergeben haben.
• Assert.equal(Adopter, expectedAdopter, „Besitzer des erwarteten Haustieres sollte dieser Vertrag sein“); Wir übergeben den tatsächlichen Wert, den erwarteten Wert und eine Fehlermeldung, die ausgegeben wird, wenn der Test zum Fehlschlagen der Funktion Assert.equal() führt.

Schritt 4: Jetzt testen wir den Abruf aller Tierhalter

Fügen Sie diesen Code nach der Funktion testGetAdopterAddressByPetId() in die Datei TestAdoption.sol ein.

// 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“);
}

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• address[16] memory adopters = adoption.getAdopters(); : Wir speichern Adopter im Speicher und nicht im Vertrag.
• Assert.equal(adopters[expectedPetId], expectedAdopter, „Besitzer des erwarteten Haustieres sollte dieser Vertrag sein“); : Wir übergeben den tatsächlichen Wert, den erwarteten Wert und eine Fehlermeldung, die ausgegeben wird, wenn der Test zum Fehlschlagen der Funktion Assert.equal() führt.

Schritt 5: Hier ist unser vollständiger Solidity Code

// 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);
}

Schritt 6: Jetzt ist es an der Zeit, den Smart Contract zu testen

Fügen Sie diesen Befehl auf dem Terminal ein.

truffle test

Nachdem wir den obigen Befehl ausgeführt haben, sehen wir die Ausgabe wie in der folgenden Abbildung gezeigt.

Jetzt ist unser Smart Contract erfolgreich getestet. Der nächste Schritt besteht darin, ein Frontend-Interface für unsere DApp zu erstellen.

Erstellung einer Benutzeroberfläche für Smart Contract

In diesem Abschnitt erstellen wir eine Benutzeroberfläche. Der Code für das Frontend der DApp befindet sich ebenfalls in der Trüffelbox der Zoohandlung. Es ist im src-Verzeichnis vorhanden. Wir werden nur die Funktionen hinzufügen, die für Ethereum einzigartig sind. Um eine Benutzeroberfläche für Smart Contract zu erstellen, folgen Sie dieser Schritt-für-Schritt-Anleitung.

Schritt 1: Instanziierung von web3

Gehen Sie zu app.js Datei im Testverzeichnis des Pet-Shop-Tutorial-Ordners. Entfernen Sie nun den mehrzeiligen Kommentar aus der funktion initWeb3() und fügen Sie den folgenden Code ein.
// {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);

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• Teil 1, dh wenn Bedingung: Wir prüfen, ob wir DApp-Browser verwenden, in denen ein Ethereum-Anbieter in das Fensterobjekt injiziert wird. Wir verwenden es, um unser web3-Objekt zu erstellen, aber wir müssen auch den Zugriff auf die Konten explizit mit ethereum.enable() anfordern.
• Teil 2, dh else if bedingung: Wenn das Ethereum-Objekt nicht existiert, suchen wir nach einer injizierten web3-Instanz. Wenn es existiert, zeigt dies an, dass wir einen älteren DApp-Browser verwenden. Also holen wir uns seinen Provider und verwenden ihn, um unser web3-Objekt zu erstellen.
• Teil 3, d.h. andere Bedingung: Wenn keine injizierte Web3-Instanz vorhanden ist, erstellen wir unser web3-Objekt mit unserem lokalen Provider.

Schritt 2: Instanziierung des Vertrags

Wir müssen unseren Smart Contract instanziieren, damit web3 versteht, wo er zu finden ist und wie er funktioniert. Entfernen Sie nun den mehrzeiligen Kommentar aus der Funktion initContract() und fügen Sie den folgenden Code ein.
$.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();
});

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• var AdoptionArtifact = Daten; : Wir rufen die Artifact-Datei für unseren Smart Contract ab.
• App.contracts.Adoption = TruffleContract(AdoptionArtifact); : Wir übergeben nun die Artifact-Datei an TruffleContract(), wodurch eine Instanz des Vertrags erstellt wird, mit der interagiert werden soll.
• App.contracts.Adoption.setProvider(App.web3Provider); : Wir legen den web3-Provider des Vertrags mithilfe des App.web3Provider-Werts fest, den wir zuvor bei der Einrichtung von web3 gespeichert haben.
• return App.markAdopted(); : Wir rufen die Funktion markAdopted() auf, wenn Haustiere bereits von einem früheren Besuch adoptiert wurden.

Schritt 3: Abrufen der adoptierten Haustiere und Aktualisierung der Benutzeroberfläche

Entfernen Sie nun den mehrzeiligen Kommentar aus der MarkAdopted()-Funktion und fügen Sie den folgenden Code ein.

// 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);
});

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• Teil 1: Wir deklarieren die Variable adoptionInstance außerhalb der Smart-Contract-Aufrufe, um nach dem ersten Abrufen einfach auf die Instance zugreifen zu können. Danach verwenden wir die Funktion call(), mit der wir Daten aus der Blockchain ohne Transaktion lesen können.
• Teil 2: Nach dem Aufruf der getAdopters() -Funktion verwenden wir die for-Schleife, um zu überprüfen, ob für jedes Haustier eine Adresse gespeichert ist. Schließlich prüfen wir auf alle möglichen Fehler.

Schritt 4: Umgang mit der funktion adopt()

Entfernen Sie nun den mehrzeiligen Kommentar aus der handleAdopt-Funktion und fügen Sie den folgenden Code ein.

// 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);
});
});

Jetzt werden wir die Bedeutung des oben geschriebenen Codes verstehen.

• Teil 1: Wir verwenden web3, um die Benutzerkonten abzurufen. Nach der Fehlerprüfung wählen wir dann das erste Konto im Rückruf aus. Danach erhalten wir den bereitgestellten Vertrag und speichern die Instanz in adoptionInstance. Dann senden wir eine Transaktion anstelle eines Anrufs. Transaktionen erfordern eine Absenderadresse und sind mit Kosten verbunden. Wir senden die Transaktion, indem wir die adopt()-Funktion mit petID und einem Objekt, das die Kontoadresse, d.h. das Konto, enthält, ausführen.
• Teil 2: Das Transaktionsobjekt ist das Ergebnis des Sendens einer Transaktion. Wenn keine Probleme auftreten, führen wir unsere MarkAdopted()-Funktion aus, um das UI mit unseren frisch gespeicherten Daten zu synchronisieren.

Schritt 5: Hier ist der vollständige Code der App.js Datei

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();
});
});
Nun ist unsere Benutzeroberfläche erfolgreich erstellt. Der nächste Schritt ist die Interaktion mit DApp.

Interaktion mit DApp

Dies ist der letzte Schritt. In diesem Abschnitt werden wir mit DApp interagieren. Um mit der DApp zu interagieren, folgen Sie dieser Schritt-für-Schritt-Anleitung.

Schritt 1: Installation von MetaMask

MetaMask ist eine Krypto-Wallet und ein Web3-Gateway zu Blockchain-DApps. Es ist derzeit als Browsererweiterung und mobile App auf Android- und iOS-Geräten verfügbar. Um MetaMask herunterzuladen, folgen Sie dieser Schritt-für-Schritt-Anleitung.

Schritt 2: Hinzufügen von Ganache zu MetaMask

Jetzt verbinden wir MetaMask mit der von Ganache CLI erstellten Blockchain. Klicken Sie auf das Symbol, das Ethereum Mainnet anzeigt. Dann sehen wir eine Option zum Hinzufügen von Netzwerk. Klicken Sie auf die Schaltfläche Netzwerk hinzufügen.

Jetzt fügen wir die folgenden unten angegebenen Parameter hinzu und klicken auf Speichern.

• Vorname: Ganache
• RPC-URL: http://127.0.0.1:8545
• Ketten-ID: 1337

Nach dem Speichern sehen wir diesen Bildschirm wie unten gezeigt. Jedes von Ganache CLI erstellte Konto erhält 1000 Ether. Wir werden weniger Ether bemerken, da etwas Gas verwendet wurde, als wir den Vertrag einsetzten und die Tests durchführten.

Schritt 3: Ausführen der DApp

Jetzt ist es an der Zeit, unsere DApp auszuführen. Wir werden zum zweiten Terminal gehen. Dieser Befehl startet einen neuen lokalen Webserver und öffnet einen neuen Browser-Tab mit unserer DApp. Fügen Sie diesen Befehl auf dem Terminal ein.
npm run dev

Nachdem wir den obigen Befehl ausgeführt haben, sehen wir die Ausgabe wie in der folgenden Abbildung gezeigt.

Schritt 4: Verwenden der DApp

• Jetzt ist es an der Zeit, unsere DApp zu verwenden. Wir werden Gina adoptieren. Klicken Sie auf die Schaltfläche Übernehmen.
• Eine Metamask-Benachrichtigung wird angezeigt und zeigt eine Transaktion an. Klicken Sie nun auf Bestätigen.
• Wir sehen eine neue Benachrichtigung für bestätigte Transaktion.
• Wenn wir nun zum Aktivitätsbereich der MetaMask-Brieftasche zurückkehren, können wir eine Transaktion sehen.
• Wenn wir zu unserer DApp zurückkehren. Wir können sehen, dass der Adopt-Button jetzt auf Erfolg geändert wurde.

Schlussfolgerung

Wir haben versucht, alles Schritt für Schritt von Grund auf neu zu erklären. Wir haben Erklärungen und Begründungen für jeden einzelnen Schritt gegeben. Wir freuen uns für alle, die diesen Artikel gelesen und diese DApp von Grund auf ohne vorherige DApp-Entwicklungserfahrung erstellt haben. Im nächsten Tutorial werden wir eine neue aufregende DApp von Grund auf neu erstellen. Alle Credits des verwendeten Codes gehören zur Trüffeldokumentation.

Frequently gestellte Fragen

Was sind einige berühmte DApps?

CryptoMines, Bomb Crypto, Splinterlands und Axie Infinity sind einige beliebte DApps auf dem Markt.

Wie verdient DApp Geld?

DApps können durch einen ICO-Start, Werbung, Transaktionsgebühren, Abonnements usw. und vieles mehr Geld verdienen.

Haben DApps eine Zukunft?

DApps werden auch in Zukunft exponentiell wachsen. Obwohl dieser Prozess einige Zeit in Anspruch nehmen wird, wird für 2022 voraussichtlich erhebliche Verbesserungen und die Verbreitung der Blockchain-Technologie und ihrer Anwendungen erwartet.

Warum ist Web3 die Zukunft?

Die Privatsphäre ist die größte Sorge für regelmäßige Nutzer im Jahr 2022. In Web3 haben Benutzer das vollständige Eigentum an ihren Assets. Anders als jetzt, wo Tech-Giganten die meisten Plattformen kontrollieren.

Wo finden wir DApps?

Wir können alle gängigen DApps auf DApp Radar finden. Es ist einer der besten DApp-Stores auf dem Markt.