Home
Courses
Programmierung auf Tron: Dezentrale Anwendungen mit Solidität erstellen
Erstellen einer einfachen dezentralen Anwendung (DApp) auf Tron
Lektion 3

Erstellen einer einfachen dezentralen Anwendung (DApp) auf Tron

Willkommen zu Lektion 3! In dieser Lektion lernen wir die Struktur und Funktionalität einer grundlegenden Tron Decentralized Application (DApp) kennen. Wir verfolgen einen praktischen Ansatz, indem wir eine einfache DApp erstellen, die mit dem Smart Contract interagiert, den wir in der vorherigen Lektion entwickelt haben. Am Ende dieser Lektion wird Ihre DApp im Nile Testnet ausgeführt.

Entwerfen der Struktur und Funktionalität einer einfachen Tron-DApp

Eine DApp ist eine Kombination aus einem Frontend, das in einer Sprache geschrieben ist, die web3.js-Aufrufe durchführen kann, und einem Backend, bei dem es sich im Wesentlichen um die Smart Contracts handelt. Unsere DApp verfügt über eine einfache Schnittstelle mit zwei Hauptfunktionen: Speichern einer Nummer und Abrufen aus dem Smart Contract. Wir verwenden HTML für unsere Frontend-Struktur und JavaScript mit der TronWeb-Bibliothek für die Interaktion mit dem Tron-Netzwerk.

Entwicklung und Bereitstellung der notwendigen Smart Contracts für die DApp

Diesen Schritt haben wir bereits in Lektion 2 gemacht! Unser Smart Contract „Storage“ ist bereits im Nile Testnet im Einsatz.

Implementierung von Benutzeroberflächen und Front-End-Komponenten für die DApp mithilfe von Webtechnologien

Beginnen wir mit dem Codieren unserer einfachen DApp. Erstellen Sie eine HTML-Datei (index.html) mit folgendem Code:

HTML 
 htmlCode kopieren 
 <!DOCTYPE html><html><body><h2>Simple Storage DApp</h2><input id="storageValue" type="number"><button id="storeButton">Store</button><button id="retrieveButton">Retrieve</button><p id="displayValue"></p><!-- Load TronWeb --><script src="https://cdn.jsdelivr.net /npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>

FAQ

  • Wo soll ich diese Dateien erstellen?
Sie sollten diese beiden Dateien (index.html und app.js) in einem neuen Ordner auf Ihrem lokalen Computer erstellen. Hier ist eine Schritt-für-Schritt-Anleitung: 
 Schritt 1: Erstellen Sie einen neuen Ordner auf Ihrem Computer. Sie können es beliebig benennen. Sie könnten es beispielsweise TronDApp nennen.
Schritt 2: Erstellen Sie in diesem TronDApp-Ordner eine neue Datei und nennen Sie sie index.html. Dies ist die HTML-Datei, in die wir die Struktur unserer Webseite schreiben.
Schritt 3: Erstellen Sie im selben TronDApp-Ordner eine weitere neue Datei und nennen Sie sie app.js. Dies ist die JavaScript-Datei, in die wir den Code für die Interaktion mit der Tron-Blockchain schreiben.
Schritt 4: Öffnen Sie nun diese Dateien in einem Texteditor Ihrer Wahl (z. B. Notepad, Sublime Text, Visual Studio Code usw.) und fügen Sie den entsprechenden Code ein, den ich in Lektion 3.3 bereitgestellt habe.
Denken Sie daran, „YOUR_CONTRACT_ADDRESS“ und „YOUR_PRIVATE_KEY“ in der app.js-Datei durch die Adresse Ihres eigenen Vertrags und Ihren privaten Schlüssel zu ersetzen.
Schritt 5: Um Ihre DApp anzuzeigen, öffnen Sie die Datei index.html in einem Webbrowser (z. B. Google Chrome, Firefox usw.).
Denken Sie daran, dass diese Dateien immer im selben Ordner aufbewahrt werden sollten, da sie verknüpft sind (die Datei index.html ist über <script src="app.js"></script> mit der Datei app.js verknüpft). Zeile im HTML-Code). Wenn Sie eine Datei ohne die andere verschieben, wird die Verknüpfung unterbrochen und Ihre DApp funktioniert nicht richtig.

Dadurch wird eine einfache Webseite mit einem Eingabefeld, zwei Schaltflächen (eine zum Speichern einer Nummer und die andere zum Abrufen) und einem Absatz zur Anzeige der abgerufenen Nummer erstellt.

Erstellen Sie dann eine JavaScript-Datei (app.js) mit dem folgenden Code:

JavaScript 
 JavascriptCopy Code 
 consttractAddress = "YOUR_CONTRACT_ADDRESS"; // durch Ihre Vertragsadresse ersetzen// TronWebconst einrichten tronWeb = new TronWeb({
    fullHost: 'https://api.nile.trongrid.io',
    privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
}) 

 // Vertragsinstanzasync-Funktion abrufen getContract() {
    const contract = await tronWeb.contract().at(contractAddress);
    return contract;
}

// Listener für Buttons einrichtendocument.getElementById('storeButton').addEventListener( 'klicken', async () => {
    const num = document.getElementById('storageValue').value;
    const contract = await getContract();
    await contract.store(num).send();
}); 

 document.getElementById('retrieveButton').addEventListener('click', async () => {
    const contract = await getContract();
    const response = await contract.retrieve().call();
    document.getElementById('displayValue').innerText = response;
});

Ersetzen Sie in diesem Skript "YOUR_CONTRACT_ADDRESS" und 'YOUR_PRIVATE_KEY' durch die Adresse Ihres Vertrags und Ihren privaten Schlüssel. Diese JavaScript-Datei richtet TronWeb ein, stellt eine Verbindung zu unserem Vertrag her und interagiert mit dem Vertrag, wenn auf Schaltflächen geklickt wird.

Um den privaten Schlüssel zu erhalten, exportieren Sie einfach Ihr Wallet, indem Sie auf „Konto exportieren“ klicken und wie folgt auf „Privater Schlüssel“ klicken:

Hinweis: In einer realen DApp sollten Sie Ihren privaten Schlüssel niemals auf diese Weise preisgeben. Wir machen es hier der Einfachheit halber. Für eine Produktions-DApp sollten Sie eine sichere Methode zum Signieren von Transaktionen verwenden, wie z. B. TronLink.

Testen und Bereitstellen der Tron DApp im Nile Testnet

Sie können Ihre DApp testen, indem Sie die Datei index.html in Ihrem Browser öffnen. Denken Sie daran, einen Browser zu verwenden, in dem Sie die TronLink-Erweiterung installiert und mit dem Nile Testnet verbunden haben (wie Chrome oder Brave Browser). Geben Sie eine Zahl in das Eingabefeld ein und klicken Sie auf „Speichern“. Nachdem die Transaktion bestätigt wurde, klicken Sie auf „Abrufen“ und die von Ihnen gespeicherte Nummer sollte angezeigt werden.

Damit ist Lektion 3 abgeschlossen! Herzlichen Glückwunsch zur Erstellung und Bereitstellung Ihrer ersten dezentralen Anwendung auf Tron! In der nächsten Lektion werden wir unsere DApp mit erweiterten Funktionen erweitern.

Haftungsausschluss
* Kryptoinvestitionen sind mit erheblichen Risiken verbunden. Bitte lassen Sie Vorsicht walten. Der Kurs ist nicht als Anlageberatung gedacht.
* Der Kurs wird von dem Autor erstellt, der Gate Learn beigetreten ist. Vom Autor geteilte Meinungen spiegeln nicht zwangsläufig die Meinung von Gate Learn wider.
Katalog

Lektion 1:Einführung in die Tron-Blockchain

45 eingeschrieben

Lektion 2:Solidity Smart Contract-Grundlagen

36 eingeschrieben

Lektion 3:Erstellen einer einfachen dezentralen Anwendung (DApp) auf Tron

30 eingeschrieben

Lektion 4:Fertigstellen Ihrer Tron-DApp und Verstehen der nächsten Schritte

23 eingeschrieben
Katalog
Lektion 3

Erstellen einer einfachen dezentralen Anwendung (DApp) auf Tron

Willkommen zu Lektion 3! In dieser Lektion lernen wir die Struktur und Funktionalität einer grundlegenden Tron Decentralized Application (DApp) kennen. Wir verfolgen einen praktischen Ansatz, indem wir eine einfache DApp erstellen, die mit dem Smart Contract interagiert, den wir in der vorherigen Lektion entwickelt haben. Am Ende dieser Lektion wird Ihre DApp im Nile Testnet ausgeführt.

Entwerfen der Struktur und Funktionalität einer einfachen Tron-DApp

Eine DApp ist eine Kombination aus einem Frontend, das in einer Sprache geschrieben ist, die web3.js-Aufrufe durchführen kann, und einem Backend, bei dem es sich im Wesentlichen um die Smart Contracts handelt. Unsere DApp verfügt über eine einfache Schnittstelle mit zwei Hauptfunktionen: Speichern einer Nummer und Abrufen aus dem Smart Contract. Wir verwenden HTML für unsere Frontend-Struktur und JavaScript mit der TronWeb-Bibliothek für die Interaktion mit dem Tron-Netzwerk.

Entwicklung und Bereitstellung der notwendigen Smart Contracts für die DApp

Diesen Schritt haben wir bereits in Lektion 2 gemacht! Unser Smart Contract „Storage“ ist bereits im Nile Testnet im Einsatz.

Implementierung von Benutzeroberflächen und Front-End-Komponenten für die DApp mithilfe von Webtechnologien

Beginnen wir mit dem Codieren unserer einfachen DApp. Erstellen Sie eine HTML-Datei (index.html) mit folgendem Code:

HTML 
 htmlCode kopieren 
 <!DOCTYPE html><html><body><h2>Simple Storage DApp</h2><input id="storageValue" type="number"><button id="storeButton">Store</button><button id="retrieveButton">Retrieve</button><p id="displayValue"></p><!-- Load TronWeb --><script src="https://cdn.jsdelivr.net /npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>

FAQ

  • Wo soll ich diese Dateien erstellen?
Sie sollten diese beiden Dateien (index.html und app.js) in einem neuen Ordner auf Ihrem lokalen Computer erstellen. Hier ist eine Schritt-für-Schritt-Anleitung: 
 Schritt 1: Erstellen Sie einen neuen Ordner auf Ihrem Computer. Sie können es beliebig benennen. Sie könnten es beispielsweise TronDApp nennen.
Schritt 2: Erstellen Sie in diesem TronDApp-Ordner eine neue Datei und nennen Sie sie index.html. Dies ist die HTML-Datei, in die wir die Struktur unserer Webseite schreiben.
Schritt 3: Erstellen Sie im selben TronDApp-Ordner eine weitere neue Datei und nennen Sie sie app.js. Dies ist die JavaScript-Datei, in die wir den Code für die Interaktion mit der Tron-Blockchain schreiben.
Schritt 4: Öffnen Sie nun diese Dateien in einem Texteditor Ihrer Wahl (z. B. Notepad, Sublime Text, Visual Studio Code usw.) und fügen Sie den entsprechenden Code ein, den ich in Lektion 3.3 bereitgestellt habe.
Denken Sie daran, „YOUR_CONTRACT_ADDRESS“ und „YOUR_PRIVATE_KEY“ in der app.js-Datei durch die Adresse Ihres eigenen Vertrags und Ihren privaten Schlüssel zu ersetzen.
Schritt 5: Um Ihre DApp anzuzeigen, öffnen Sie die Datei index.html in einem Webbrowser (z. B. Google Chrome, Firefox usw.).
Denken Sie daran, dass diese Dateien immer im selben Ordner aufbewahrt werden sollten, da sie verknüpft sind (die Datei index.html ist über <script src="app.js"></script> mit der Datei app.js verknüpft). Zeile im HTML-Code). Wenn Sie eine Datei ohne die andere verschieben, wird die Verknüpfung unterbrochen und Ihre DApp funktioniert nicht richtig.

Dadurch wird eine einfache Webseite mit einem Eingabefeld, zwei Schaltflächen (eine zum Speichern einer Nummer und die andere zum Abrufen) und einem Absatz zur Anzeige der abgerufenen Nummer erstellt.

Erstellen Sie dann eine JavaScript-Datei (app.js) mit dem folgenden Code:

JavaScript 
 JavascriptCopy Code 
 consttractAddress = "YOUR_CONTRACT_ADDRESS"; // durch Ihre Vertragsadresse ersetzen// TronWebconst einrichten tronWeb = new TronWeb({
    fullHost: 'https://api.nile.trongrid.io',
    privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
}) 

 // Vertragsinstanzasync-Funktion abrufen getContract() {
    const contract = await tronWeb.contract().at(contractAddress);
    return contract;
}

// Listener für Buttons einrichtendocument.getElementById('storeButton').addEventListener( 'klicken', async () => {
    const num = document.getElementById('storageValue').value;
    const contract = await getContract();
    await contract.store(num).send();
}); 

 document.getElementById('retrieveButton').addEventListener('click', async () => {
    const contract = await getContract();
    const response = await contract.retrieve().call();
    document.getElementById('displayValue').innerText = response;
});

Ersetzen Sie in diesem Skript "YOUR_CONTRACT_ADDRESS" und 'YOUR_PRIVATE_KEY' durch die Adresse Ihres Vertrags und Ihren privaten Schlüssel. Diese JavaScript-Datei richtet TronWeb ein, stellt eine Verbindung zu unserem Vertrag her und interagiert mit dem Vertrag, wenn auf Schaltflächen geklickt wird.

Um den privaten Schlüssel zu erhalten, exportieren Sie einfach Ihr Wallet, indem Sie auf „Konto exportieren“ klicken und wie folgt auf „Privater Schlüssel“ klicken:

Hinweis: In einer realen DApp sollten Sie Ihren privaten Schlüssel niemals auf diese Weise preisgeben. Wir machen es hier der Einfachheit halber. Für eine Produktions-DApp sollten Sie eine sichere Methode zum Signieren von Transaktionen verwenden, wie z. B. TronLink.

Testen und Bereitstellen der Tron DApp im Nile Testnet

Sie können Ihre DApp testen, indem Sie die Datei index.html in Ihrem Browser öffnen. Denken Sie daran, einen Browser zu verwenden, in dem Sie die TronLink-Erweiterung installiert und mit dem Nile Testnet verbunden haben (wie Chrome oder Brave Browser). Geben Sie eine Zahl in das Eingabefeld ein und klicken Sie auf „Speichern“. Nachdem die Transaktion bestätigt wurde, klicken Sie auf „Abrufen“ und die von Ihnen gespeicherte Nummer sollte angezeigt werden.

Damit ist Lektion 3 abgeschlossen! Herzlichen Glückwunsch zur Erstellung und Bereitstellung Ihrer ersten dezentralen Anwendung auf Tron! In der nächsten Lektion werden wir unsere DApp mit erweiterten Funktionen erweitern.

Haftungsausschluss
* Kryptoinvestitionen sind mit erheblichen Risiken verbunden. Bitte lassen Sie Vorsicht walten. Der Kurs ist nicht als Anlageberatung gedacht.
* Der Kurs wird von dem Autor erstellt, der Gate Learn beigetreten ist. Vom Autor geteilte Meinungen spiegeln nicht zwangsläufig die Meinung von Gate Learn wider.