Använd Web3.js JavaScript-biblioteket för att skapa ett sömlöst gränssnitt för interaktion med Ethereum blockchain.
Smarta kontrakt är de primära byggstenarna för Web3-applikationer. För att möjliggöra funktioner i Web3-applikationer är det viktigt att bekvämt kunna interagera med de funktioner som anges i ett smart kontrakt. Du kan använda ett populärt språk som JavaScript och det välkända Web3.js-biblioteket för att etablera denna kommunikation.
Introduktion till Web3.js-biblioteket
Web3.js är ett JavaScript-bibliotek som erbjuder ett gränssnitt för interaktion med Ethereum blockchain. Det förenklar byggprocessen decentraliserade applikationer (DApps) genom att tillhandahålla metoder och verktyg för att ansluta till Ethereum-noder, skicka transaktioner, läsa smarta kontraktsdata och hantera händelser.
Web3.js överbryggar traditionell utveckling och blockchain-teknik, vilket gör att du kan skapa decentraliserade och säkra applikationer med hjälp av bekant JavaScript-syntax och funktionalitet.
Hur man importerar Web3.js till ett JavaScript-projekt
För att använda Web3.js i ditt Node-projekt måste du först installera biblioteket som ett projektberoende.
Installera biblioteket genom att köra det här kommandot i ditt projekt:
npm install web3or
yarn add web3
Efter installation av Web3.js kan du nu importera biblioteket i ditt Node-projekt som en ES-modul:
const Web3 = require('web3');
Interagera med implementerade smarta kontrakt
För att korrekt demonstrera hur du kan interagera med ett distribuerat smart kontrakt på Ethereum-nätverket med hjälp av Web3.js, kommer du att skapa en webbapplikation som fungerar med distribuerat smart kontrakt. Syftet med webbappen kommer att vara en enkel omröstning där en plånbok kan avge röster på en kandidat och få dessa röster registrerade.
För att börja, skapa en ny katalog för ditt projekt och initiera den som ett Node.js-projekt:
npm init
Installera Web3.js i projektet som ett beroende och skapa enkelt index.html och styles.css filer i projektets rot.
Importera följande kod i index.html fil:
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>
Inuti styles.css fil, importera följande kod:
/* 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;
}
Nedan är det resulterande gränssnittet:
Nu när du har ett grundläggande gränssnitt för att komma igång, skapa ett avtal mapp i ditt projekts rot för att innehålla koden för ditt smarta kontrakt.
Remix IDE ger ett enkelt sätt att skriva, distribuera och testa smarta kontrakt. Du kommer att använda Remix för att distribuera ditt kontrakt till Ethereum-nätverket.
Navigera till remix.ethereum.org och skapa en ny fil under kontrakt mapp. Du kan namnge filen test_contract.sol.
De .sol tillägget indikerar att detta är en Solidity-fil. Soliditet är ett av de mest populära språken för att skriva moderna smarta kontrakt.
Inuti denna fil, skriv och kompilera din Solidity-kod:
// 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];
};
};
När Remix kompilerar Solidity-kod skapar den också ett ABI (Application Binary Interface) i ett JSON-format. ABI definierar gränssnittet mellan ett smart kontrakt och en klientapplikation.
Det skulle specificera följande:
- Namnen och typerna av funktioner och händelser som exponeras av det smarta kontraktet.
- Argumentens ordning för varje funktion.
- Returvärdena för varje funktion.
- Dataformatet för varje händelse.
För att få ABI, kopiera den från Remix IDE. Skapa en contract.abi.json fil inuti avtal i ditt projekts rot och klistra in ABI i filen.
Du bör gå vidare och distribuera ditt kontrakt till ett testnätverk med hjälp av ett verktyg som Ganache.
Kommunicera med ditt implementerade smarta kontrakt med Web3.js
Ditt kontrakt har nu distribuerats till ett Ethereum-testnätverk. Du kan börja arbeta med att interagera med det distribuerade kontraktet från ditt gränssnitt. Skapa en main.js fil i ditt projekts rot. Du kommer att importera både Web3.js och din sparade ABI-fil till main.js. Den här filen kommer att prata med ditt smarta kontrakt och kommer att ansvara för att läsa data från kontraktet, anropa dess funktioner och hantera transaktioner.
Nedan är hur din main.js filen ska se ut:
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);
});
});
Kodblocket ovan använder Web3.js för att prata med dina smarta kontraktsfunktioner från ditt webbgränssnitt. I huvudsak använder du JavaScript-funktioner för att anropa Solidity-funktioner från main.js.
Byt ut i koden 'CONTRACT_ADDRESS' med den faktiska utplacerade kontraktsadressen. Remix IDE kommer att förse dig med detta vid driftsättning.
Här är vad som händer i koden:
- Uppdatera urvalet av DOM-element baserat på din HTML-struktur. I detta exempel antar det att varje kandidatelement har en data-kandidat attribut som motsvarar kandidatens namn.
- Ett exempel på Web3 klass skapas sedan med den injicerade leverantören från window.ethereum objekt.
- De röstningskontrakt variabel skapar en kontraktsinstans med hjälp av kontraktsadressen och ABI.
- De rösta funktion hanterar röstningsprocessen. Den kallar rösta funktion av det smarta kontraktet som använder votingContract.methods.vote (candidate).send(). Den skickar en transaktion till kontraktet och registrerar användarens röst. De röstAntal variabeln anropar sedan getVoteCount funktion för det smarta kontraktet för att hämta det aktuella röstantalet för en specifik kandidat. Den kommer sedan att uppdatera rösträkningen i användargränssnittet för att matcha de hämtade rösterna.
Kom ihåg att inkludera detta main.js fil i din HTML-fil med en tag.
Se till att kontraktsadressen och ABI är korrekta och att du har korrekt felhantering på plats.
JavaScripts roll i att bygga DApps
JavaScript har förmågan att interagera med smarta kontrakt som används i decentraliserade applikationer. Detta sammanför Web3-världen med ett primärt programmeringsspråk som används för att bygga Web2-appar, vilket hjälper till att underlätta införandet av Web3. Med Web3.js kan Web2-utvecklare gå över till att bygga appar som en Web3-plattform för sociala medier.
