WebI für einfache Smart Contracts

Lassen Sie uns ein Web-Frontend für einen Smart Contract erstellen! Dies ist eine Fortsetzung meines vorherigen Beitrags über die Erstellung eines einfachen Smart Contracts mit Solidity und Hardhat. Bei den Anweisungen hier wird davon ausgegangen, dass Sie mit demselben Vertrag beginnen, den wir gerade in unserer Hardhat-Umgebung bereitgestellt haben.

Im letzten Beitrag haben wir einen Vertrag erstellt und getestet, der einen in einer Zustandsvariablen gespeicherten Zähler erhöht. Mit der Hardhat-Konsole haben wir die Funktionen incrementCount() und getCount() aufgerufen. In der realen Welt erfolgt die Anbindung an einen Vertrag nicht über eine Entwicklungskonsole. Eine Möglichkeit, eine Anwendung zu erstellen, die diese Funktionen aufruft, ist die Verwendung von Javascript (über die Bibliothek ethers.js) auf einer Webseite – eine Web3-Anwendung!

Wie im vorherigen Beitrag erwähnt, erfordert die Interaktion mit Web3-Anwendungen einen Browser mit integrierter Wallet. In diesem einfachen Beispiel verwenden wir Metamask. Metmask ist für Etherium und möglicherweise einige andere EVM-basierte Blockchains vorkonfiguriert, jedoch nicht für unsere simulierte Blockchain in der Hardhat-Umgebung. Um das alles zum Laufen zu bringen, richten wir zunächst Metmask ein und erstellen dann das HTML/Javascript, das zum Aufrufen unseres Vertrags erforderlich ist.

Metamask / Web3-Browser

1. Installieren Sie Metamask. Ich verwende die hier gefundene Chrome-Erweiterung. Wenn Sie ein Chrome-Benutzer sind, können Sie jetzt Web3-Inhalte anzeigen und mit ihnen interagieren.

   Ich werde Sie nicht durch die Ersteinrichtung führen, aber Sie werden wahrscheinlich aufgefordert, einen vorhandenen privaten Schlüssel zu importieren oder einen neuen zu generieren und die Wiederherstellungsphrase aufzuschreiben. Tun Sie das.

2. Als nächstes fügen wir das Hardhat-Netzwerk zu Metamask hinzu. Metamask unterstützt jedes gewünschte EVM, muss jedoch dafür konfiguriert werden. Normalerweise ist dies nur eine Frage des Hinzufügens der Ketten-ID und der RPC-URL. In Metamask (möglicherweise müssen Sie es starten, indem Sie auf Ihre Chrome-Plugins klicken und es auswählen) sollte oben in der Mitte Ihre öffentliche Adresse angezeigt werden. Links neben Ihrer Adresse befindet sich ein Dropdown-Menü, das das aktuelle Netzwerk anzeigt. Klicken Sie darauf, um zu sehen, welche anderen Netzwerke verfügbar sind:

   

   Klicken Sie auf „Benutzerdefiniertes Netzwerk hinzufügen“. Geben Sie den Netzwerknamen mit etwas wie „Hardhat“ ein, die Netzwerk-RPC-URL mit der IP-Adresse und dem Port Ihres Hardhat-Knotens, wahrscheinlich etwa so, wenn Sie ihn lokal ausführen:
   http://127.0.0.1:8545/

   Geben Sie die Ketten-ID 1337 ein und das Symbol kann vorerst nur ETH sein. Beachten Sie, dass wir es nicht mit echter ETH im echten Ethereum-Netzwerk zu tun haben, aber seien Sie sehr vorsichtig, in unserem Hardhat-Netzwerk zu bleiben, wenn Sie echte ETH in Ihrer Brieftasche haben.

   Wechseln Sie nun zum Hardhat Network, das wir gerade im Metamask-Plugin hinzugefügt haben. In Ihrem Terminal, das Ihren laufenden Hardhat-Knoten überwacht, sollten Sie eine Aktivität sehen, während Ihr Wallet eine Verbindung herstellt.

3. Da Ihr Metamask-Wallet derzeit keine (gefälschte) ETH hat, schicken wir ihm welche. Holen Sie sich Ihre öffentliche Adresse von Metamask (klicken Sie oben im Metamask-Fenster unter dem Namen der Brieftasche auf die Schaltfläche „Kopieren“). Gehen Sie in Ihrem Terminalfenster, in dem die Hardhat-Konsole ausgeführt wird, wie folgt vor:
   

   const [owner,  feeCollector, operator] = await 
   ethers.getSigners();
   await owner.sendTransaction({ to: "PasteYourMetamaskAddressHere", value: ethers.parseEther("0.1") });
   

   Wenn Sie zu Metamask zurückkehren, sollten Sie sehen, dass Sie jetzt etwas ETH in Ihrem Hardhat-Wallet haben! Jetzt sind wir bereit, einige Web3-Transaktionen in unserem Hardhat-Netzwerk durchzuführen.

Erstellen Sie eine Web3-Webseite

1. Lassen Sie uns eine einfache Webseite erstellen, um unseren Zähler anzuzeigen und zu erhöhen. Ich werde keine schweren Frameworks verwenden, sondern nur altes HTML, Javascript und die Bibliothek ethers.js. Allerdings können Sie den Browser nicht einfach auf ein .htm-Dokument verweisen, sondern Sie müssen irgendwo einen Webserver ausführen, damit das Metamask-Plugin funktioniert. Abhängig von Ihrem Betriebssystem können Sie möglicherweise einen einfachen Server wie einen http-Server oder etwas Lokales verwenden.

   Wir benötigen ein paar Dinge aus der Zeit, als wir unseren Vertrag im vorherigen Beitrag umgesetzt haben. Sehen Sie sich noch einmal den letzten Beitrag an und holen Sie sich die Vertragsadresse und das JSON-Array ABI des Vertrags aus dem Artefaktverzeichnis. Wir benötigen nicht den Rest des JSON aus dieser Datei, sondern nur das, was in der Eigenschaft „abi“ steht. Es sollte mit einem [ beginnen und mit einem ] enden und etwas aussehen so:
   

   [
       {
         "inputs": [],
         "stateMutability": "nonpayable",
         "type": "constructor"
       },
       {
         "inputs": [],
         "name": "getCount",
         "outputs": [
           {
             "internalType": "uint256",
             "name": "",
             "type": "uint256"
           }
         ],
         "stateMutability": "view",
         "type": "function"
       },
       {
         "inputs": [],
         "name": "incrementCount",
         "outputs": [],
         "stateMutability": "nonpayable",
         "type": "function"
       }
     ]
   

2. Lassen Sie uns dies in etwas HTML und Javascript einfügen:
   

   <html>
       <head>
               <script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/5.2.0/ethers.umd.min.js" type="application/javascript"></script>
       </head>
   
       <body>
               <h2>The counter is at: <span>
   
   </li>
   <li>
   <p>We should now be able to view our HTML document in a web browser with the Metamask plugin installed. I won't go through the Javascript, but if you are familiar with JavaScript and following the concepts and what we did in the Hardhat terminal previously, what is happening in the code should be fairly straight-forward. Metamask should prompt you that you are connecting to the site and you'll need to select the Hardnet network that we set up earlier. You should see something like this in the browser:</p>
   
   <p><img src="https://img.php.cn/upload/article/000/000/000/173282167151033.jpg" alt="WebI For Simple Smart Contract" /></p>
   </li>
   <li><p>If all went well, you can click on the "Increment" button. Metamask will let you know that you are about to make a transaction and inform you of the gas fee. You can Confirm this transaction in Metamask and see the count increment on both the website and in the terminal where you have the hardhat node running!</p></li>
   <li><p>Congratulations, we are interacting with our contract through a web UI!</p></li>
   </ol>
   
   <p>A few notes as you dive deeper into Hardhat and Metamask for development:</p>
   
   <ul>
   <li><p>Each transaction has an nonce. When you reset your hardhat node, that nonce gets reset and you might loose sync with what Metamask thinks is a unique nonce. When that happens, Metmask has an option to set a custom nonce with the transaction, or you can reset Metamask's nonces in Settings->Advanced->Clear Activity Tab data. 

3. You'll need to redeploy your smart contract every time you restart your Hardhat node.

4. If you are writing contracts that will keep track of users by their public address and want to experiment in the Hardhat console with transactions form different users, you can impersonate different addresses in the console that were displayed when you first started the Hardhat node with something like this before you connect to the contract:
   

   const signers = await ethers.getSigners();
   const newSigner = signers[1]; // Change the 1 to a different number that corolates with one of the pre-generated testing addresses
   const newMain = await main.connect(newSigner);
   
   newMain.setContractAddress("test","0xYourContractAddress");
   

Das obige ist der detaillierte Inhalt vonWebI für einfache Smart Contracts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!