Nutzen Sie die JavaScript-Bibliothek Web3.js, um eine nahtlose Schnittstelle für die Interaktion mit der Ethereum-Blockchain einzurichten.
Intelligente Verträge sind die Hauptbausteine für Web3-Anwendungen. Um Funktionalitäten in Web3-Anwendungen zu ermöglichen, ist es wichtig, bequem mit den in einem Smart Contract spezifizierten Funktionen interagieren zu können. Sie könnten eine beliebte Sprache wie JavaScript und die bekannte Web3.js-Bibliothek verwenden, um diese Kommunikation herzustellen.
Einführung in die Web3.js-Bibliothek
Web3.js ist eine JavaScript-Bibliothek, die eine Schnittstelle für die Interaktion mit der Ethereum-Blockchain bietet. Es vereinfacht den Bauprozess dezentrale Anwendungen (DApps) durch die Bereitstellung von Methoden und Tools zum Herstellen einer Verbindung zu Ethereum-Knoten, zum Senden von Transaktionen, zum Lesen intelligenter Vertragsdaten und zum Behandeln von Ereignissen.
Web3.js verbindet traditionelle Entwicklung und Blockchain-Technologie und ermöglicht Ihnen die Erstellung dezentraler und sicherer Anwendungen mit vertrauter JavaScript-Syntax und -Funktionalität.
So importieren Sie Web3.js in ein JavaScript-Projekt
Um Web3.js in Ihrem Node-Projekt verwenden zu können, müssen Sie zunächst die Bibliothek als Projektabhängigkeit installieren.
Installieren Sie die Bibliothek, indem Sie diesen Befehl in Ihrem Projekt ausführen:
npm install web3or
yarn add web3
Nach der Installation von Web3.js können Sie die Bibliothek nun als ES-Modul in Ihr Node-Projekt importieren:
const Web3 = require('web3');
Interaktion mit bereitgestellten Smart Contracts
Um richtig zu demonstrieren, wie Sie mithilfe von Web3.js mit einem bereitgestellten Smart Contract im Ethereum-Netzwerk interagieren können, erstellen Sie eine Webanwendung, die mit dem bereitgestellten Smart Contract funktioniert. Der Zweck der Web-App wird ein einfacher Stimmzettel sein, bei dem eine Wallet Stimmen für einen Kandidaten abgeben und diese Stimmen protokollieren lassen kann.
Erstellen Sie zunächst ein neues Verzeichnis für Ihr Projekt und initialisieren Sie es als Node.js-Projekt:
npm init
Installieren Sie Web3.js als Abhängigkeit im Projekt und erstellen Sie einfach index.html Und Styles.css Dateien im Stammverzeichnis des Projekts.
Importieren Sie den folgenden Code in die index.html Datei:
html>
<html>
<head>
<title>Voting Apptitle>
<linkrel="stylesheet"href="styles.css" />
head>
<body>
<h1>Voting Apph1><divclass="candidates">
<divclass="candidate">
<spanclass="name">Candidate Aspan>
<buttonclass="vote-btn"data-candidate="A">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
<divclass="candidate">
<spanclass="name">Candidate Bspan>
<buttonclass="vote-btn"data-candidate="B">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
<divclass="candidate">
<spanclass="name">Candidate Cspan>
<buttonclass="vote-btn"data-candidate="C">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
div>
<scriptsrc="main.js">script>
body>
html>
Im Inneren Styles.css Datei importieren Sie den folgenden Code:
/* styles.css */
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 30px;
}
.candidates {
display: flex;
justify-content: center;
margin-top: 50px;
}
.candidate {
margin: 20px;
}
.name {
font-weight: bold;
}
.vote-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.vote-count {
margin-top: 5px;
}
Unten ist die resultierende Schnittstelle:
Nachdem Sie nun über eine grundlegende Benutzeroberfläche verfügen, erstellen Sie eine Vertrag Ordner im Stammverzeichnis Ihres Projekts, der den Code für Ihren Smart Contract enthält.
Die Remix-IDE bietet eine einfache Möglichkeit, Smart Contracts zu schreiben, bereitzustellen und zu testen. Sie werden Remix verwenden, um Ihren Vertrag im Ethereum-Netzwerk bereitzustellen.
Navigieren Sie zu remix.ethereum.org und erstellen Sie eine neue Datei unter Verträge Ordner. Sie können die Datei benennen test_contract.sol.
Der .Sol Die Erweiterung gibt an, dass es sich um eine Solidity-Datei handelt. Solidität ist eine der beliebtesten Sprachen zum Schreiben moderner Smart Contracts.
In dieser Datei befindet sich Schreiben und kompilieren Sie Ihren Solidity-Code:
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract Voting {
mapping(string => uint256) private voteCounts;
functionvote(string memory candidate) public{
voteCounts[candidate]++;
};
functiongetVoteCount(string memory candidate) publicviewreturns (uint256){
return voteCounts[candidate];
};
};
Wenn Remix Solidity-Code kompiliert, erstellt es auch ein ABI (Application Binary Interface) im JSON-Format. Der ABI definiert die Schnittstelle zwischen einem Smart Contract und einer Client-Anwendung.
Es würde Folgendes spezifizieren:
- Die Namen und Typen von Funktionen und Ereignissen, die vom Smart Contract offengelegt werden.
- Die Reihenfolge der Argumente für jede Funktion.
- Die Rückgabewerte jeder Funktion.
- Das Datenformat jedes Ereignisses.
Um das ABI zu erhalten, kopieren Sie es aus der Remix-IDE. Ein... kreieren Contract.abi.json Datei darin Vertrag im Stammverzeichnis Ihres Projekts und fügen Sie die ABI in die Datei ein.
Sie sollten Ihren Vertrag mit einem Tool wie Ganache in einem Testnetzwerk bereitstellen.
Kommunikation mit Ihrem bereitgestellten Smart Contract mithilfe von Web3.js
Ihr Vertrag wurde jetzt in einem Ethereum-Testnetzwerk bereitgestellt. Sie können über Ihre Benutzeroberfläche mit der Interaktion mit dem bereitgestellten Vertrag beginnen. Ein... kreieren main.js Datei im Stammverzeichnis Ihres Projekts. Sie importieren sowohl Web3.js als auch Ihre gespeicherte ABI-Datei in main.js. Diese Datei kommuniziert mit Ihrem Smart-Vertrag und ist dafür verantwortlich, Daten aus dem Vertrag zu lesen, seine Funktionen aufzurufen und Transaktionen abzuwickeln.
Unten erfahren Sie, wie Sie main.js Die Datei sollte wie folgt aussehen:
const Web3 = require('web3');
const contractAddress = "CONTRACT_ADDRESS"; // Replace with the actual deployed contract address
import contractAbi from'../contract/contract.abi.json'// Create an instance of web3 using the injected provider (e.g., MetaMask)
const web3 = new Web3(window.ethereum);// Create a contract instance using the contract address and ABI
const votingContract = new web3.eth.Contract(contractAbi, contractAddress);// Retrieve the candidate elements from the DOM
const candidates = document.querySelectorAll('.candidate');// Function to handle voting for a candidate
asyncfunctionvote(candidate) {
try {
// Call the 'vote' function of the smart contract
await votingContract.methods.vote(candidate).send({ from: web3.eth.defaultAccount });// Update the vote count in the UI
const voteCount = await votingContract.methods.getVoteCount(candidate).call();
const voteCountElement = document.querySelector(`[data-candidate="${candidate}"] .vote-count`);
voteCountElement.textContent = `${voteCount} votes`;
} catch (error) {
console.error(error);
// Handle error cases, such as invalid transactions or network issues
}
}
// Add click event listeners to the vote buttons
candidates.forEach(candidate => {
const candidateName = candidate.getAttribute('data-candidate');
const voteBtn = candidate.querySelector('.vote-btn');
voteBtn.addEventListener('click', () => {
vote(candidateName);
});
});
Der obige Codeblock verwendet Web3.js, um über Ihre Weboberfläche mit Ihren Smart-Contract-Funktionen zu kommunizieren. Im Wesentlichen verwenden Sie JavaScript-Funktionen, um Solidity-Funktionen aufzurufen main.js.
Ersetzen Sie im Code 'CONTRACT_ADDRESS' mit der tatsächlich eingesetzten Vertragsadresse. Die Remix-IDE stellt Ihnen dies bei der Bereitstellung zur Verfügung.
Folgendes passiert im Code:
- Aktualisieren Sie die Auswahl der DOM-Elemente basierend auf Ihrer HTML-Struktur. In diesem Beispiel wird davon ausgegangen, dass jedes Kandidatenelement ein hat Datenkandidat Attribut, das dem Namen des Kandidaten entspricht.
- Eine Instanz des Web3 Die Klasse wird dann mit dem injizierten Anbieter aus erstellt window.ethereum Objekt.
- Der Abstimmungsvertrag Variable erstellt eine Vertragsinstanz unter Verwendung der Vertragsadresse und des ABI.
- Der Abstimmung Die Funktion übernimmt den Abstimmungsprozess. Es nennt die Abstimmung Funktion des Smart Contracts mit VotingContract.methods.vote (Kandidat).send(). Es sendet eine Transaktion an den Vertrag und zeichnet die Abstimmung des Benutzers auf. Der voteCount Die Variable ruft dann die auf getVoteCount Funktion des Smart Contracts, um die aktuelle Stimmenzahl für einen bestimmten Kandidaten abzurufen. Anschließend wird die Stimmenzahl in der Benutzeroberfläche aktualisiert, um sie an die abgerufenen Stimmen anzupassen.
Denken Sie daran, dies anzugeben main.js Datei in Ihrer HTML-Datei mit a Tag.
Stellen Sie außerdem sicher, dass die Vertragsadresse und die ABI korrekt sind und dass Sie ordnungsgemäß sind Fehlerbehandlung vorhanden.
Die Rolle von JavaScript beim Erstellen von DApps
JavaScript kann mit Smart Contracts interagieren, die in dezentralen Anwendungen verwendet werden. Dies vereint die Web3-Welt mit einer primären Programmiersprache, die beim Erstellen von Web2-Apps verwendet wird, was die Einführung von Web3 erleichtert. Mit Web3.js können Web2-Entwickler dazu übergehen, Apps wie eine Web3-Social-Media-Plattform zu erstellen.
