Wie baue ich eine einfache DAPP über einen intelligenten Vertrag auf?

Richten Sie Trüffel, Ganache und Metamask ein, um einen einfachen Ethereum Dapp mit einem Smart -Vertrag zu erstellen und zu testen.

Jul 10, 2025 at 04:50 pm

Einrichten Ihrer Entwicklungsumgebung

Um einen einfachen DAPP über einen intelligenten Vertrag aufzubauen, müssen Sie zunächst eine ordnungsgemäße Entwicklungsumgebung festlegen. Eines der beliebtesten Tools für die Ethereum-basierte Entwicklung ist TRUFFL , das einen Rahmen für die Kompilierung, Bereitstellung und Testen intelligenter Verträge bietet.

• Installieren Sie Node.js und NPM , um JavaScript -Pakete zu verwalten
• Führen Sie npm install -g truffle aus, um die Trüffel -Suite weltweit zu installieren
• Verwenden Sie truffle init in Ihrem Projektverzeichnis, um ein neues Projekt zu sammeln

Sobald die Trüffel eingerichtet ist, benötigen Sie auch eine lokale Blockchain für Testzwecke. Ganache ist ein häufig verwendetes Tool, das das Ethereum -Netzwerk lokal simuliert. Laden Sie Ganache herunter und installieren Sie sie und starten Sie dann einen neuen Arbeitsbereich, um Testkonten und private Schlüssel zu generieren.

Schließen Sie Ihren Browser außerdem mit Metamask an die Blockchain an, eine Ethereum -Brieftasche, die die Interaktion mit dezentralen Anwendungen ermöglicht. Stellen Sie sicher, dass das von Ganache bereitgestellte lokale Netzwerk für nahtlose Tests zu Metamasking hinzugefügt wird.

Schreiben eines grundlegenden intelligenten Vertrags

Nachdem Ihre Umgebung fertig ist, ist es Zeit, einen grundlegenden intelligenten Vertrag zu schreiben. Solidität ist die primäre Sprache, die zum Schreiben von Ethereum Smart Contracts verwendet wird. Erstellen contracts eine neue .sol

Hier ist ein Beispielvertrag:

 pragma solidity ^0.8.0; Vertrag SimpleStorage {

uint storedData; function set(uint x) public { storedData = x; } function get() public view returns (uint) { return storedData; }
 }

Dieser Vertrag definiert eine variable storedData und zwei Funktionen: eine, um ihren Wert und einen anderen zu aktualisieren, um sie abzurufen. Stellen Sie sicher, dass die Solidity -Version dem in Ihrer TRUFFL -Konfiguration angegebenen entspricht .

Erstellen Sie nach dem Schreiben des Vertrags ein Migrationsskript im migrations . Dieses Skript gibt TRUFFL an, wie Sie Ihren Vertrag in der Blockchain bereitstellen.

Kompilieren und Bereitstellen des intelligenten Vertrags

Mit Ihrem geschriebenen Smart -Vertrag besteht der nächste Schritt darin, ihn zu kompilieren und bereitzustellen. Navigieren Sie in Ihrem Terminal zur Projektwurzel und rennen Sie:

• truffle compile - Dadurch wird Ihr Soliditätscode in Bytecode kompiliert, die von der Virtual Machine (EVM) von Ethereum Lesbar sind
• truffle migrate - Dadurch wird Ihr Vertrag für die von Ganache verwaltete lokale Blockchain bereitgestellt

Stellen Sie sicher, dass Ganache ausgeführt wird, bevor Sie den Befehl migration ausführen . Sie sollten Transaktionsprotokolle sehen, die eine erfolgreiche Bereitstellung anzeigen.

Beachten Sie nach der Bereitstellung die in der Konsole gedruckte Vertragsadresse. Diese Adresse wird später verwendet, wenn Ihre Frontend -Anwendung mit dem Smart -Vertrag verbindet.

Sie können die Bereitstellung auch überprüfen, indem Sie die Transaktionen in Ganache überprüfen oder die Trüffelkonsole mit truffle console verwenden und manuell mit dem bereitgestellten Vertrag interagieren.

Aufbau der Frontend -Schnittstelle

Mit dem Frontend Ihres DAPP können Benutzer mit dem Smart -Vertrag interagieren. Ein gemeinsamer Stapel zum Aufbau von DApps umfasst React.js für die UI und Web3.js oder Ethers.js für Blockchain -Interaktionen.

Erstellen Sie zunächst eine React -App:

• Führen Sie npx create-react-app my-dapp aus, um ein neues React-Projekt zu sammeln
• Navigieren Sie in das Projektverzeichnis und installieren Sie die Web3 -Bibliothek über npm install web3 oder npm install ethers

Integrieren Sie als Nächstes die Smart Contract ABI (Anwendung Binary Interface) und die Adresse in Ihr Frontend. Der ABI wird automatisch während der Zusammenstellung generiert und kann im Verzeichnis build/contracts gefunden werden.

Importieren Sie in Ihrer React -Komponente Web3 und instanziieren Sie eine Verbindung zur Brieftasche des Benutzers (z. B. Metamask):

 import Web3 from 'web3'; const web3 = new Web3 (Fenster.Thereum);
 erwarten window.ethereum.enable ();

Verwenden Sie dann die ABI- und Vertragsadresse, um eine Vertragsinstanz zu erstellen:

 const contractInstance = new web3.eth.Contract(abi, contractAddress);

Mit diesem Setup können Sie jetzt das set aufrufen und Funktionen von Ihrem intelligenten Vertrag in Schaltflächenhandlern get und Ergebnisse auf dem Bildschirm anzeigen.

Verbinden Sie die Frontend mit dem intelligenten Vertrag

Sobald die Vertragsinstanz erstellt wurde, können Sie Funktionen implementieren, mit denen Benutzer direkt über den Browser interagieren können.

Zum Beispiel, um die get -Funktion aufzurufen:

 contractInstance.methods.get().call()
 .then(result => console.log(result));

So senden Sie eine Transaktion mit der set Funktion:

 contractInstance.methods.set(42).send({ from: accountAddress })
 .on('transactionHash', hash => console.log(hash));

Stellen Sie sicher, dass die Metamaske vor der Durchführung einer Transaktion verbunden und entsperrt ist . Behandeln Sie auch Fehler anmutig, um die Benutzererfahrung zu verbessern.

Aktualisieren Sie Ihre UI -Komponenten, um aktuelle Werte, die auf der Blockchain gespeichert sind, zu reflektieren, und ermöglichen Sie Eingabefelder für die Einstellung neuer Werte. Dadurch wird eine voll funktionsfähige Schnittstelle für Ihr DAPP erstellt.

Testen Sie den gesamten Fluss, indem Sie die React -App mit npm start ausführen und mit den Schaltflächen interagieren, während Sie Änderungen in Ganache und der Browserkonsole beobachten.

Häufig gestellte Fragen

Was ist der Unterschied zwischen einer DAPP und einer regulären Web -App?

Eine DAPP (dezentrale Anwendung) arbeitet in einem Blockchain -Netzwerk und verwendet intelligente Verträge für die Backend -Logik, während eine reguläre Web -App auf zentralisierte Server beruht. Dapps bieten aufgrund ihrer dezentralen Natur Transparenz, Unveränderlichkeit und Zensurresistenz .

Muss ich bei der Bereitstellung eines intelligenten Vertrags vor Ort Gasgebühren bezahlen?

Nein, wenn eine lokale Blockchain wie Ganache verwendet wird, werden die Gasgebühren simuliert und benötigen keinen echten Äther . Transaktionen werden sofort ohne tatsächliche Kosten verarbeitet, wodurch es ideal zum Testen ist.

Kann ich neben der Reaktion für die Frontend eines DAPP andere Frameworks verwenden?

Ja, Sie können jedes Frontend -Framework wie Vue.js, Angular oder sogar einfache HTML/CSS/JavaScript verwenden. Der Schlüssel ist die Integration des Web3 -Anbieters und die korrekte Interaktion mit dem Smart -Vertrag .

Ist es möglich, eine DAPP anstelle einer lokalen Blockchain für ein TestNetz bereitzustellen?

Ja, Sie können für ein breiteres Test in Netzwerken wie Rinkeby, Ropsten oder Goerli bereitstellen. Sie benötigen einen Testether, der aus Wasserhähne, die diesen Netzwerken zugeordnet sind, erhalten werden können. Stellen Sie sicher, dass Ihre Trüffelkonfiguration die richtigen Netzwerkeinstellungen und die Mnemonik enthält .