So erstellen Sie eine DApp auf TomoChain

Anleitung zum Entwickeln eines einfachen, in Solidity geschriebenen Smart Contract und zum Bereitstellen auf TomoChain testnet

In diesem Artikel erfahren Sie, wie Sie eine grundlegende DApp für TomoChain erstellen - ein Adoptions-Tracking-System für eine Zoohandlung!

In diesem Leitfaden werden wir behandeln:

  • Einrichten von Truffle, dem beliebtesten Entwicklungsframework für Ethereum, das auch für TomoChain perfekt funktioniert
  • Truffle-Projekt erstellen
  • TomoChain-Brieftasche erstellen
  • Kostenlose Token mit dem TomoChain-Wasserhahn anfordern
  • Schreiben Sie einen intelligenten Vertrag
  • Kompilieren und Migrieren des Smart-Vertrags zu TomoChain
  • Anschließen der Metamask an TomoChain testnet
  • Erstellen einer Benutzeroberfläche für die Interaktion mit dem Smart Contract

Was ist TomoChain?

TomoChain ist eine innovative Lösung für das Skalierbarkeitsproblem mit der Ethereum-Blockchain und anderen Blockchain-Plattformen. Die TomoChain POSV-Masterknotenarchitektur bietet eine Transaktionsgebühr von nahezu null und eine sofortige Transaktionsbestätigung. Sicherheit, Stabilität und Endgültigkeit der Kette werden durch neuartige Techniken wie Doppelvalidierung und einheitliche Randomisierung garantiert.

TomoChain unterstützt alle EVM-kompatiblen Smart Contracts, Protokolle und atomaren kettenübergreifenden Token-Übertragungen. Skalierungstechniken wie Sharding, EVM-Parallelisierung, Private-Chain-Generierung und Hardware-Integration werden kontinuierlich erforscht und in TomoChain integriert, das zu einer idealen skalierbaren öffentlichen Smart-Contract-Blockchain für dezentrale Apps, Token-Ausgabe und Token-Integration für kleine und große Unternehmen wird.

Jede DApp, die auf Ethereum ausgeführt wird, kann problemlos auf TomoChain portiert werden

Warum sollten Entwickler DApps auf TomoChain erstellen?

Erinnerst du dich an CryptoKitties 2017? Eine einzelne DApp brachte die gesamte Ethereum-Blockchain auf die Knie. Das Netzwerk war überlastet, mit endlosen Wartezeiten auf Transaktionsbestätigung und hohen Transaktionsgebühren. Eine Portierung auf TomoChain scheint für die niedlichen Kätzchen eine gute Idee zu sein.

Das TomoChain-Hauptnetz kann 2'000 TPS verarbeiten, was 100x schneller ist als die Ethereum-Blockchain, und das zu einem Bruchteil der Kosten. Sollte dies nicht ausreichen, arbeitet das in Vietnam ansässige Unternehmen an seiner Sharding-Lösung, die bis zum 2. Quartal 2019 20'000–30'000 TPS liefern soll.

In diesem Tutorial erfahren Sie, wie Sie eine DApp mit Solidity erstellen und dann in der TomoChain-Blockchain bereitstellen.

Hinweis: Da die Bereitstellung eines intelligenten Vertrags im Mainnet Testnet sehr ähnlich ist, handelt es sich bei den Unterschieden lediglich um Konfigurationsinformationen. In diesem Dokument werden die Unterschiede nach Möglichkeit explizit erwähnt

0. Voraussetzungen

Um mit der Erstellung Ihrer DApp zu beginnen, müssen Sie einige Programme installieren:

  • Installieren Sie Node.js & npm ("Node.js Package Manager")
  • Installieren Sie Git

Um zu überprüfen, ob der Knoten ordnungsgemäß installiert ist, öffnen Sie eine Konsole (Admin PowerShell unter Windows) und geben Sie den Knoten -v ein. Dies sollte eine Versionsnummer wie v10.15.0 ausgeben.

Um npm zu testen, geben Sie npm -v ein und Sie sollten die Versionsnummer sehen, wie z. B. 6.4.1.

1. Erste Schritte: Installation

Truffle Framework ist ein großartiges Tool für die Entwicklung von DApps. Mit Truffle können Sie Ihre intelligenten Verträge für TomoChain bereitstellen.

Wir brauchen nur diesen einen Befehl, um Truffle, das beliebte Entwicklungsframework für Ethereum, zu installieren.

npm install -g Trüffel

Sie können überprüfen, ob Truffle korrekt installiert ist, indem Sie die Trüffelversion eingeben.

2. Erstellen eines Truffle-Projekts

Truffle wird im aktuellen Verzeichnis initialisiert. Erstellen Sie daher zunächst ein Verzeichnis in einem Entwicklungsordner Ihrer Wahl und verschieben Sie es anschließend in diesen Ordner.

mkdir Pet-Shop-Tutorial
cd pet-shop-tutorial

Lassen Sie uns sehen, wie Sie ein Truffle-Projekt erstellen. Es gibt zwei Möglichkeiten. Sie können ein völlig neues Projekt von Grund auf ohne Smart-Verträge erstellen. Die andere Option für Anfänger sind Trüffelboxen, bei denen es sich um Beispielanwendungen und Projektvorlagen handelt.

Pet Shop Truffe Box

Für dieses Tutorial gibt es eine spezielle Trüffel-Box namens Pet-Shop, die die grundlegende Projektstruktur sowie den Code für die Benutzeroberfläche enthält. Verwenden Sie den Befehl truffle unbox, um diese Truffle Box auszupacken:

Trüffel Unbox Zoohandlung

Die Standard-Truffle-Verzeichnisstruktur enthält eine Reihe von Ordnern und Dateien. Wenn Sie mehr wissen möchten, lesen Sie bitte die Trüffeltutorials.

Hinweis: Dieses Tutorial konzentriert sich auf den gesamten Prozess zum Erstellen einer DApp auf TomoChain, sodass wir nicht auf alle Details eingehen.

3. Erstellen einer TOMO-Brieftasche

Sie benötigen eine Brieftaschenadresse und einige Token. Wir zeigen Ihnen, wie dies sowohl in TomoChain Testnet als auch in Mainnet funktioniert.

3.1 Erstellen Sie eine TOMO-Brieftasche und speichern Sie Ihre Mnemonik

Mit der TomoWallet-App für Android oder iOS können Sie eine neue TOMO-Brieftasche erstellen. Unter Einstellungen gehen Sie zu Erweiterte Einstellungen, hier können Sie Netzwerk auswählen und TomoChain TestNet oder TomoChain [mainnet] auswählen.

Gehen Sie zum Menü Einstellungen, wählen Sie Brieftasche sichern und dann Weiter. Hier sehen Sie den privaten Schlüssel Ihrer Brieftasche und den 12-Wörter-Wiederherstellungssatz. Notieren Sie sich die 12-Wörter-Wiederherstellungsphrase.

TomoWallet

Sie können auch eine neue TomoChain-Brieftasche mit MetaMask, MyEtherWallet oder TrustWallet erstellen. Zum Beispiel können Sie für mainnet zu MyEtherWallet gehen und TOMO (tomochain.com) in der oberen rechten Ecke auswählen. Geben Sie ein Passwort ein und erstellen Sie eine neue Brieftasche. Notieren Sie sich Ihren Wiederherstellungssatz.

In diesem Tutorial lautet meine Brieftaschenadresse (testnet):

0xc9b694877acd4e2e100e095788a591249c38b9c5

Meine Wiederherstellungsphrase (12-Wort-Mnemonik) lautet:

Mythos voran Spin Horn Minute Tag Geist bitte Evangelium Baby Clog Kamera

Schreib sie auf. Dies wird später benötigt. Beachten Sie, dass sich Ihre Brieftaschenadresse (öffentlicher Schlüssel) und Ihr Wiederherstellungssatz von meiner unterscheiden.

Wichtig! Halten Sie Ihren privaten Schlüssel und Ihre Wiederherstellungsphrase immer geheim!

3.2 Holen Sie sich einige TOMO-Mittel

Token werden für verschiedene Angelegenheiten benötigt, beispielsweise für die Bereitstellung intelligenter Verträge oder für die Verwendung in DApps.

Testnet: Erhalten Sie 15 kostenlose Testnet-TOMO-Token mit TomoChains Wasserhahn.

Mainnet: Sie benötigen echte TOMO-Token von Börsen.

Zum Wasserhahn gehen und 30 TOMO einsammeln. Jetzt hat Ihr Portemonnaie genug Guthaben, um alles in diesem Tutorial zu erledigen. Lassen Sie uns fortfahren!

3.3 Der Block Explorer

Mit TomoScan können Sie den Kontostand einer Brieftaschenadresse überprüfen.

Testnet: https://scan.testnet.tomochain.com/

Mainnet: https://scan.tomochain.com/

4. Schreiben Sie den Smart-Vertrag

Wir beginnen unsere DApp mit dem Schreiben des intelligenten Vertrags, der als Back-End-Logik und Speicher fungiert.

  1. Erstellen Sie eine neue Datei mit dem Namen Adoption.sol im Verzeichnis "Verträge /".
  2. Kopieren Sie den folgenden Code:
Pragma Solidität ^ 0,5,0;
Vertragsannahme {
  Adresse [16] öffentliche Adoptierer;
  // Ein Haustier adoptieren
  Funktion adopt (uint petId) public returns (uint) {
    // überprüfe, ob petId in Reichweite unseres Adopters-Arrays ist
    require (petId> = 0 && petId <= 15);
    // füge die Adresse, die diese Funktion aufgerufen hat, zu unserem Adopter-Array hinzu
    adopters [petId] = msg.sender;
    // Die angegebene petId als Bestätigung zurückgeben
    return petId;
  }
  // Abrufen der Adopters
  Funktion getAdopters () public view liefert (Adresse [16] Speicher) {
    Rückkehrer;
  }
}
Hinweis: Code aus dem Pet-Shop-Tutorial von Truffle - Wenn Sie sich den Solidity-Code genauer ansehen möchten, gehen Sie langsam durch den Truffle-Link und erläutern die Details.

5. Kompilieren

Solidity ist eine kompilierte Sprache, dh wir müssen Solidity to Bytecode kompilieren, damit die Ethereum Virtual Machine (EVM) ausgeführt werden kann. Stellen Sie sich das vor, als würden Sie unsere von Menschen lesbare Solidität in etwas übersetzen, das der EVM versteht.

TomoChain ist EVM-kompatibel, was bedeutet, dass jeder in Ethereum geschriebene Vertrag ohne Aufwand nahtlos auf TomoChain portiert werden kann

Stellen Sie in einem Terminal sicher, dass Sie sich im Stammverzeichnis des Verzeichnisses befinden, das die DApp enthält, und geben Sie Folgendes ein:

Trüffel zusammenstellen

Sie sollten eine Ausgabe ähnlich der folgenden sehen:

Kompilieren ./contracts/Migrations.sol ...
Kompilieren ./contracts/Adoption.sol ...
Schreiben von Artefakten an ./build/contracts

6. Migration - Bereitstellung

Nach der erfolgreichen Kompilierung ist es an der Zeit, Ihre intelligenten Verträge auf die Blockchain von TomoChain zu migrieren!

Eine Migration ist ein Bereitstellungsskript, mit dem der Status der Verträge Ihrer Anwendung geändert und von einem Status in den nächsten verschoben werden soll. (Weitere Informationen zu Migrationen finden Sie in der Truffle-Dokumentation.)

6.1 Erstellen Sie die Migrationsskripte

Öffnen Sie das Verzeichnis migrations / und Sie sehen eine JavaScript-Datei: 1_initial_migration_js. Dadurch wird die Bereitstellung des Migrations.sol-Vertrags für die Überwachung nachfolgender Smart-Contract-Migrationen abgewickelt und sichergestellt, dass in Zukunft keine unveränderten Verträge doppelt migriert werden.

Jetzt können wir unser eigenes Migrationsskript erstellen.

  1. Erstellen Sie eine neue Datei mit dem Namen 2_deploy_contracts.js im Verzeichnis migrations /.
  2. Fügen Sie der Datei 2_deploy_contracts.js den folgenden Inhalt hinzu:
var Adoption = artifacts.require ("Annahme");
module.exports = function (deployer) {
  deployer.deploy (Annahme);
};

6.2 Konfigurieren Sie die Migrationsnetzwerke in truffle.js

Jetzt sind wir fast bereit, TomoChain bereitzustellen. Lassen Sie uns sehen, wie Sie Ihren Smart Contract bei einem benutzerdefinierten Anbieter, einer beliebigen Blockchain wie TomoChain, bereitstellen.

Bevor Sie mit der Migration beginnen, müssen Sie die Blockchain angeben, in der Sie unsere intelligenten Verträge implementieren möchten, die Adresse angeben, die implementiert werden soll - die soeben erstellte Brieftasche und optional das Gas, den Gaspreis usw.

1. Installieren Sie Truffles HDWalletProvider, ein separates npm-Paket zum Suchen und Signieren von Transaktionen für Adressen, die von einer 12-Wort-Mnemonik abgeleitet sind - in einer bestimmten Blockchain. (Lesen Sie mehr über HDWalletProvider.)

npm installiere truffle-hdwallet-provider

2. Öffnen Sie die Datei truffle.js (truffle-config.js unter Windows). Hier können Sie die Migrationseinstellungen bearbeiten: Netzwerke, Ketten-IDs, Gas ... In der aktuellen Datei ist nur ein einziges Netzwerk definiert, Sie können mehrere definieren. Wir werden drei Netzwerke hinzufügen, um unsere DApp zu migrieren: development, tomotestnet und tomomainnet.

Die offizielle TomoChain-Dokumentation - Networks ist sehr praktisch. Dort werden sowohl die Testnet- als auch die Mainnet-Netzwerkkonfiguration beschrieben. Wir benötigen den RPC-Endpunkt, die Ketten-ID und den HD-Ableitungspfad.

Ersetzen Sie die Datei truffle.js durch diesen neuen Inhalt:

"Verwenden Sie strenge"
var HDWalletProvider = require ("truffle-hdwallet-provider");
var mnemonic = '';
module.exports = {
  Netzwerke: {
    Entwicklung: {
      Anbieter: () => neuer HDWalletProvider (
        Gedächtnisstütze,
        "http://127.0.0.1:8545",
      ),
      Host: "127.0.0.1",
      Port: "8545",
      network_id: "*", // Entspricht einer beliebigen Netzwerk-ID
    },
    tomotestnet: {
      Anbieter: () => neuer HDWalletProvider (
        Gedächtnisstütze,
        "https://testnet.tomochain.com",
        0,
        1,
        wahr,
        "m / 44 '/ 889' / 0 '/ 0 /",
      ),
      network_id: "89",
      Gas: 2000000,
      gasPreis: 10000000000000,
    },
    Tomomainnet: {
      Anbieter: () => neuer HDWalletProvider (
        Gedächtnisstütze,
        "https://rpc.tomochain.com",
        0,
        1,
        wahr,
        "m / 44 '/ 889' / 0 '/ 0 /",
      ),
      network_id: "88",
      Gas: 2000000,
      gasPreis: 10000000000000,
    }
  }
};

3. Denken Sie daran, die Datei truffle.js mit Ihrer eigenen Wallet-Wiederherstellungsphrase zu aktualisieren. Kopieren Sie die 12 zuvor erhaltenen Wörter und fügen Sie sie als Wert der mnemonischen Variablen ein.

var mnemonic = '';

Getan. Bitte beachten Sie, dass das tomotestnet-Netzwerk zur Bereitstellung unseres Smart Contract verwendet wird. Wir haben auch das Tomomainnet-Netzwerk hinzugefügt, falls Sie es für TomoChain Mainnet bereitstellen möchten. Wenn Sie jedoch mit Ganache vertraut sind, können Sie das Entwicklungsnetzwerk verwenden, um auch den lokalen Test durchzuführen, wenn Sie möchten. Ganache ist eine lokal ausgeführte persönliche Blockchain für die Ethereum-Entwicklung, mit der Sie Verträge bereitstellen, Anwendungen entwickeln und Tests ausführen können.

Wir haben die Migrationskonfiguration hinzugefügt, damit wir sie jetzt für öffentliche Blockchains wie TomoChain (sowohl für Testnet als auch für Mainnet) bereitstellen können.

Warnung: In der Produktion wird dringend empfohlen, die Mnemonik in einer anderen geheimen Datei (geladen von Umgebungsvariablen oder einem sicheren geheimen Verwaltungssystem) zu speichern, um das Risiko zu verringern, dass die Mnemonik bekannt wird. Wenn jemand Ihre Mnemonik kennt, hat er alle Ihre Adressen und privaten Schlüssel!

Willst du es versuchen? Mit dem npm-Paket dotenv können Sie eine Umgebungsvariable aus einer .env-Datei laden und anschließend Ihre truffle.js aktualisieren, um diese geheime Mnemonik zu verwenden.

6.3 Starten Sie die Migration

Sie sollten Ihren Smart-Vertrag bereits erstellt haben. Ansonsten ist es jetzt ein guter Zeitpunkt, dies mit Trüffel-Kompilierung zu tun.

Migrieren Sie zurück in unserem Terminal den Vertrag zu TomoChain testnet network:

Trüffelmigration - Netzwerk tomotestnet

Die Migrationen beginnen ...

Migrationen starten ...
=====================
> Netzwerkname: 'tomotestnet'
> Netzwerk-ID: 89
> Blockgaslimit: 84000000
1_initial_migration.js
=====================
Bereitstellen von "Migrationen"
   ----------------------
   > Transaktions-Hash: 0x77d9cdf0fb810fd6cec8a5616a3519e7fa5d42ad07506802f0b6bc10fa9e8619
   > Blöcke: 2 Sekunden: 4
   > Vertragsadresse: 0xA3919059C38b1783Ac41C336AAc6438ac5fd639d
   > account: 0xc9b694877AcD4e2E100e095788A591249c38b9c5
   > Saldo: 27,15156
   > verwendetes Gas: 284844
   > Gaspreis: 10000 gwei
   > Wert gesendet: 0 ETH
   > Gesamtkosten: 2.84844 ETH
> Speichern der Migration in die Kette.
   > Speichern von Artefakten
   -------------------------------------
   > Gesamtkosten: 2.84844 ETH
2_deploy_contracts.js
====================
Bereitstellung von "Adoption"
   --------------------
   > Transaktions-Hash: 0x1c48f603520147f8eebc984fadc944aa300ceab125cf40f77b1bb748460db272
   > Blöcke: 2 Sekunden: 4
   > Vertragsadresse: 0xB4Bb4FebdA9ec02427767FFC86FfbC6C05Da2A73
   > account: 0xc9b694877AcD4e2E100e095788A591249c38b9c5
   > Saldo: 24,19238
   > verwendetes Gas: 253884
   > Gaspreis: 10000 gwei
   > Wert gesendet: 0 ETH
   > Gesamtkosten: 2.53884 ETH
> Speichern der Migration in die Kette.
   > Speichern von Artefakten
   -------------------------------------
   > Gesamtkosten: 2.53884 ETH
Zusammenfassung
=======
> Gesamtbereitstellungen: 2
> Endgültige Kosten: 5.38728 ETH

Die Transaktions-ID lautet:

0x1c48f603520147f8eebc984fadc944aa300ceab125cf40f77b1bb748460db272

Die Vertragsadresse lautet:

0xB4Bb4FebdA9ec02427767FFC86FfbC6C05Da2A73

Herzliche Glückwünsche! Sie haben Ihren Smart-Vertrag bereits für TomoChain bereitgestellt. Das alles in nur 8 Sekunden. Wir haben mit 30 TOMO begonnen und die Bereitstellung hat 5,38 TOMO an Gasgebühren gekostet.

Hinweis: Der Befehl zum Bereitstellen im TomoChain-Hauptnetz ist sehr ähnlich:
Trüffel migrieren - Netzwerk Tomomainnet

*** Fehlerbehebung ***

  • Fehler: Die Kosten für die Erstellung intelligenter Verträge werden nicht berücksichtigt. Warum? Die Erhöhung der Transaktionsgebühren für die intelligente Vertragserstellung ist eine der Möglichkeiten, die TomoChain bietet, um sich vor Spam-Angriffen zu schützen. Lösung: Bearbeiten Sie die Datei "truffle.js" und fügen Sie mehr Gas / gasPrice für die Bereitstellung hinzu.
  • Fehler: unzureichende Mittel für Gas * Preis + Wert. Warum? Sie haben nicht genug Jetons in Ihrer Brieftasche, um Gasgebühren zu bezahlen. Lösung: Sie benötigen mehr Geld in Ihrem Portemonnaie, um es einzusetzen, zum Wasserhahn zu gehen und mehr Token zu erhalten.

6.4 Überprüfen Sie die Bereitstellungstransaktion

Wenn Sie überprüfen möchten, ob Ihr Vertrag erfolgreich bereitgestellt wurde, können Sie TomoScan testnet (oder mainnet) aktivieren. Geben Sie im Suchfeld die Transaktions-ID für Ihren neuen Vertrag ein.

Sie sollten Details zur Transaktion sehen, einschließlich der Blocknummer, unter der die Transaktion gesichert wurde.

TomoScan-Transaktion

Sie können Ihre Brieftaschenadresse auch in die TomoScan-Suchleiste eingeben. Sie finden 4 Transaktionen heraus. Ihr Vertrag wurde erfolgreich für TomoChain bereitgestellt.

Herzliche Glückwünsche! Sie haben Ihren Vertrag mit Truffle für TomoChain bereitgestellt. Sie haben Ihren ersten intelligenten Vertrag geschrieben und in einer öffentlichen Blockchain bereitgestellt. Es ist Zeit, mit unserem intelligenten Vertrag zu interagieren, um sicherzustellen, dass er das tut, was wir wollen.

7. Testen des Smart-Vertrags

Es ist eine gute Idee, Ihre intelligenten Verträge zu testen. Sie können einige Tests in das Verzeichnis test / schreiben und mit dem Trüffeltest ausführen. Weitere Informationen finden Sie im Truffle's Pet Shop-Tutorial.

8. Erstellen einer Benutzeroberfläche für die Interaktion mit dem Smart Contract

Jetzt haben wir den Smart-Vertrag erstellt und in der TomoChain-Blockchain (testnet) bereitgestellt. Es ist Zeit, eine Benutzeroberfläche zu erstellen, damit die Benutzer den Shop nutzen können.

In der Truffle Box des Zoofachgeschäfts war ein Code für das Front-End der App enthalten. Dieser Code befindet sich im Verzeichnis src /.

Das Front-End verwendet kein Build-System (Webpack, Grunzen usw.), um den Einstieg so einfach wie möglich zu gestalten. Die Struktur der App ist bereits vorhanden; Wir werden die Funktionen von Ethereum erweitern.

1. Öffnen Sie /src/js/app.js in einem Texteditor.

2. Untersuchen Sie die Datei. Beachten Sie, dass es ein globales App-Objekt gibt, mit dem Sie unsere Anwendung verwalten, die Haustierdaten in init () laden und dann die Funktion initWeb3 () aufrufen können. Die web3-JavaScript-Bibliothek interagiert mit der Ethereum-Blockchain. Es kann Benutzerkonten abrufen, Transaktionen senden, mit intelligenten Verträgen interagieren und vieles mehr.

3. Die aktuelle Datei enthält einige unvollständige Funktionen, die Sie ausfüllen müssen. Ersetzen Sie den alten Code und fügen Sie diesen neuen Code ein:

App = {
  web3Provider: null,
  Verträge: {},
  init: async function () {
    // Lade Haustiere.
    $ .getJSON ('../ pets.json', Funktion (Daten) {
      var petsRow = $ ('# petsRow');
      var petTemplate = $ ('# petTemplate');
      für (i = 0; i 
  initWeb3: async function () {
    // ----
    // Moderne Dapp Browser ...
    if (window.ethereum) {
      App.web3Provider = window.ethereum;
      Versuchen {
        // Kontozugriff anfordern
        warte auf window.ethereum.enable ();
      } catch (error) {
        // Benutzer hat Kontozugriff verweigert ...
        console.error ("Benutzer hat Kontozugriff verweigert")
      }
    }
    // Legacy-Dapp-Browser ...
    sonst wenn (window.web3) {
      App.web3Provider = window.web3.currentProvider;
    }
    // Wenn keine injizierte Web3-Instanz erkannt wird, greifen Sie auf Ganache zurück
    sonst {
      App.web3Provider = neuer Web3.providers.HttpProvider ('http: // localhost: 7545');
    }
    web3 = neues Web3 (App.web3Provider);
    // ----
    return App.initContract ();
  },
  initContract: function () {
    // ----
    $ .getJSON ('Adoption.json', Funktion (Daten) {
      // Holen Sie sich die erforderliche Vertragsartefaktdatei und instanziieren Sie sie mit dem Trüffelvertrag
      var AdoptionArtifact = data;
      App.contracts.Adoption = TruffleContract (AdoptionArtifact);
      // Setze den Provider für unseren Vertrag
      App.contracts.Adoption.setProvider (App.web3Provider);
      // Verwenden Sie unseren Vertrag, um die adoptierten Haustiere abzurufen und zu markieren
      return App.markAdopted ();
    });
    // ----
    return App.bindEvents ();
  },
  bindEvents: function () {
    $ (document) .on ('click', '.btn-adopt', App.handleAdopt);
  },
  markAdopted: function (adopters, account) {
    // ----
    var adoptionInstance;
    App.contracts.Adoption.deployed (). Then (Funktion (Instanz) {
      AnnahmeInstanz = Instanz;
      return adoptionInstance.getAdopters.call ();
    }). then (function (adopters) {
      für (i = 0; i 
  handleAdopt: function (event) {
    event.preventDefault ();
    var petId = parseInt ($ (event.target) .data ('id'));
    // ----
    var adoptionInstance;
    web3.eth.getAccounts (Funktion (Fehler, Konten) {
      if (Fehler) {
        console.log (Fehler);
      }
      var account = accounts [0];
      App.contracts.Adoption.deployed (). Then (Funktion (Instanz) {
        AnnahmeInstanz = Instanz;
        // Adoption als Transaktion ausführen, indem Konto gesendet wird
        return adoptionInstance.adopt (petId, {from: account});
      }). then (Funktion (Ergebnis) {
        return App.markAdopted ();
      }). catch (function (err) {
        console.log (err.message);
      });
    });
    // ---
  }
};
$ (function () {
  $ (window) .load (function () {
    App.init ();
  });
});

Das machen diese Funktionen:

initWeb3 () Überprüft, ob moderne DApp-Browser oder neuere Versionen von MetaMask verwendet werden.

initContract () Ruft die Artefaktdatei für unseren Smart-Vertrag ab. Bei Artefakten handelt es sich um Informationen zu unserem Vertrag, z. B. die bereitgestellte Adresse und das Application Binary Interface (ABI). Das ABI ist ein JavaScript-Objekt, das die Interaktion mit dem Vertrag einschließlich seiner Variablen, Funktionen und ihrer Parameter definiert. Wir rufen dann die Funktion markAdopted () der App auf, falls Haustiere bereits von einem früheren Besuch adoptiert wurden.

markAdopted () Nachdem wir getAdopters () aufgerufen haben, durchlaufen wir alle und prüfen, ob für jedes Haustier eine Adresse gespeichert ist. Ethereum initialisiert das Array mit 16 leeren Adressen. Aus diesem Grund suchen wir nach einer leeren Adresszeichenfolge anstelle von Null oder einem anderen falschen Wert. Sobald eine petId mit einer entsprechenden Adresse gefunden wurde, deaktivieren wir ihre Schaltfläche "Übernehmen" und ändern den Text der Schaltfläche in "Erfolgreich", damit der Benutzer eine Rückmeldung erhält.

handleAdopt () Wir erhalten den bereitgestellten Vertrag und speichern die Instanz in adoptionInstance. Wir senden eine Transaktion anstelle eines Anrufs, indem wir die adopt () - Funktion mit der ID des Haustiers und einem Objekt ausführen, das die Kontoadresse enthält. Anschließend rufen wir unsere Funktion markAdopted () auf, um die Benutzeroberfläche mit unseren neu gespeicherten Daten zu synchronisieren.

9. Interaktion mit der DApp in einem Browser

Jetzt können wir unsere DApp verwenden!

9.1 Installieren und konfigurieren Sie MetaMask

  1. Installieren Sie die MetaMask-Browsererweiterung in Chrome oder FireFox.
  2. Nach der Installation sehen Sie das MetaMask-Fox-Symbol neben Ihrer Adressleiste. Klicken Sie auf das Symbol und MetaMask wird geöffnet.
  3. Erstelle ein neues Passwort. Notieren Sie sich dann die geheime Sicherungsphrase und akzeptieren Sie die Bedingungen. Standardmäßig erstellt MetaMask eine neue Ethereum-Adresse für Sie.
Initiieren von MetaMask

4. Jetzt sind wir mit einer brandneuen Brieftasche mit der Nummer 0 ETH mit dem Ethereum-Netzwerk verbunden.

5. Verbinden Sie nun MetaMask mit TomoChain (testnet). Klicken Sie auf das Menü mit dem "Main Ethereum Network" und wählen Sie Custom RPC. Verwenden Sie die Netzwerkdaten von TomoChain (testnet) und klicken Sie auf Speichern.

Verbinden von MetaMask mit TomoChain (testnet)

6. Der Netzwerkname oben zeigt "TomoChain testnet" an. Jetzt, da wir im TomoChain-Netzwerk sind, können wir TomoChain-Brieftaschen importieren.

Wir könnten die zuvor erstellte TOMO-Brieftasche verwenden, aber erstellen Sie besser eine neue TOMO-Brieftasche und fügen Sie ein paar TOMO-Token hinzu - Sie wissen, wie es geht.

7. Nachdem Sie Ihre neue TOMO-Brieftasche erstellt haben, kopieren Sie den privaten Schlüssel. Klicken Sie in MetaMask oben rechts auf den Kreis und wählen Sie Konto importieren. Fügen Sie den privaten Schlüssel und voilà! Ihre TOMO-Brieftasche ist in MetaMask geladen.

Brieftasche importieren

9.2 Verwenden der DApp

Wir werden jetzt einen lokalen Webserver starten und mit der DApp interagieren. Wir verwenden den Lite-Server. Diese Lieferung erfolgt mit der Trüffelschachtel der Zoohandlung.

Die Einstellungen dafür befinden sich in den Dateien bs-config.json und package.json, wenn Sie einen Blick darauf werfen möchten. Diese weisen npm an, unsere lokale Installation von lite-server auszuführen, wenn npm run dev von der Konsole aus ausgeführt wird.

  1. Starten Sie den lokalen Webserver:
npm run dev

Der Entwickler-Server wird gestartet und öffnet automatisch eine neue Browser-Registerkarte mit Ihrer DApp.

Petes Tierhandlung

Normalerweise fordert eine MetaMask-Benachrichtigung automatisch eine Verbindung an.

2. Um die DApp zu verwenden, klicken Sie auf die Schaltfläche Adopt (Übernehmen) für das Haustier Ihrer Wahl.

3. Sie werden automatisch aufgefordert, die Transaktion von MetaMask zu bestätigen. Stellen Sie etwas Gas ein und klicken Sie auf Bestätigen, um die Transaktion zu genehmigen.

Überprüfung der Adoptionstransaktion

4. Sie sehen die Schaltfläche neben der Änderung des adoptierten Haustieres mit der Aufschrift "Erfolg" und werden deaktiviert, genau wie wir es angegeben haben, da das Haustier jetzt adoptiert wurde.

Adoptionserfolg

In MetaMask wird die Transaktion aufgelistet:

MetaMask-Transaktion

Herzliche Glückwünsche! Sie haben einen großen Schritt getan, um ein vollwertiger DApp-Entwickler zu werden. Sie haben alle Tools, die Sie benötigen, um fortschrittlichere DApps zu erstellen, und jetzt können Sie Ihre DApp für andere nutzen, um sie in TomoChain bereitzustellen, der effizientesten Blockchain für die Token-Wirtschaft!

Quellcode

Der Quellcode für dieses Tutorial ist auf Github verfügbar.