Folosiți biblioteca JavaScript Web3.js pentru a stabili o interfață perfectă pentru a interacționa cu blockchain-ul Ethereum.
Contractele inteligente sunt elementele de bază ale aplicațiilor Web3. Pentru a activa funcționalitățile în aplicațiile Web3, este important să poți interacționa convenabil cu funcțiile specificate într-un contract inteligent. Puteți folosi un limbaj popular precum JavaScript și binecunoscuta bibliotecă Web3.js pentru a stabili această comunicare.
Introducere în Biblioteca Web3.js
Web3.js este o bibliotecă JavaScript care oferă o interfață pentru interacțiunea cu blockchain-ul Ethereum. Simplifică procesul de construire aplicații descentralizate (DApps) prin furnizarea de metode și instrumente pentru a se conecta la nodurile Ethereum, a trimite tranzacții, a citi datele contractelor inteligente și a gestiona evenimente.
Web3.js face legătura între dezvoltarea tradițională și tehnologia blockchain, permițându-vă să creați aplicații descentralizate și securizate folosind sintaxa și funcționalitatea JavaScript familiară.
Cum se importă Web3.js într-un proiect JavaScript
Pentru a utiliza Web3.js în proiectul dvs. Node, mai întâi trebuie să instalați biblioteca ca dependență de proiect.
Instalați biblioteca rulând această comandă în proiectul dvs.:
npm install web3or
yarn add web3
După instalarea Web3.js, acum puteți importa biblioteca în proiectul dvs. Node ca modul ES:
const Web3 = require('web3');
Interacțiunea cu contractele inteligente implementate
Pentru a demonstra în mod corespunzător cum puteți interacționa cu un contract inteligent implementat în rețeaua Ethereum folosind Web3.js, veți crea o aplicație web care funcționează cu un contract inteligent implementat. Scopul aplicației web va fi un simplu buletin de vot în care un portofel poate vota pentru un candidat și poate avea acele voturi înregistrate.
Pentru a începe, creați un director nou pentru proiectul dvs. și inițializați-l ca proiect Node.js:
npm init
Instalați Web3.js în proiect ca o dependență și creați simplu index.html și stiluri.css fișiere din rădăcina proiectului.
Importați următorul cod în fișierul index.html fişier:
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>
În interiorul stiluri.css fișier, importați următorul cod:
/* 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;
}
Mai jos este interfața rezultată:
Acum că aveți o interfață de bază pentru a începe, creați un contracta folderul din rădăcina proiectului pentru a conține codul pentru contractul inteligent.
Remix IDE oferă o modalitate simplă de a scrie, implementa și testa contracte inteligente. Veți folosi Remix pentru a vă implementa contractul în rețeaua Ethereum.
Navigheaza catre remix.ethereum.org și creați un fișier nou sub contracte pliant. Puteți denumi fișierul test_contract.sol.
The .sol extensia indică faptul că acesta este un fișier Solidity. Soliditatea este una dintre cele mai populare limbi pentru scrierea unor contracte inteligente moderne.
În interiorul acestui fișier, scrieți și compilați codul Solidity:
// 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];
};
};
Când Remix compilează codul Solidity, creează și o interfață ABI (Application Binary Interface) în format JSON. ABI definește interfața dintre un contract inteligent și o aplicație client.
Acesta ar specifica următoarele:
- Numele și tipurile de funcții și evenimente care sunt expuse prin contractul inteligent.
- Ordinea argumentelor pentru fiecare funcție.
- Valorile returnate ale fiecărei funcții.
- Formatul de date al fiecărui eveniment.
Pentru a obține ABI, copiați-l din interiorul Remix IDE. Creeaza o contract.abi.json dosar înăuntru contracta în rădăcina proiectului și inserați ABI-ul în fișier.
Ar trebui să mergeți mai departe și să vă implementați contractul într-o rețea de testare folosind un instrument precum Ganache.
Comunicarea cu contractul inteligent implementat utilizând Web3.js
Contractul dvs. a fost acum implementat într-o rețea de testare Ethereum. Puteți începe să lucrați la interacțiunea cu contractul implementat din interfața UI. Creeaza o main.js fișier în rădăcina proiectului dvs. Veți importa atât Web3.js, cât și fișierul dvs. ABI salvat în main.js. Acest fișier va vorbi cu contractul dvs. inteligent și va fi responsabil pentru citirea datelor din contract, apelarea funcțiilor acestuia și gestionarea tranzacțiilor.
Mai jos este cum dvs main.js fișierul ar trebui să arate:
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);
});
});
Blocul de cod de mai sus utilizează Web3.js pentru a vorbi cu funcțiile dvs. de contract inteligent din interfața dvs. web. În esență, utilizați funcții JavaScript pentru a apela funcțiile Solidity main.js.
În cod, înlocuiți „CONTRACT_ADDRESS” cu adresa reală a contractului implementat. Remix IDE vă va oferi acest lucru la implementare.
Iată ce se întâmplă în cod:
- Actualizați selecția elementelor DOM pe baza structurii dvs. HTML. În acest exemplu, se presupune că fiecare element candidat are a date-candidat atribut care corespunde numelui candidatului.
- O instanță a Web3 clasa este apoi creată folosind furnizorul injectat din fereastra.ethereum obiect.
- The contract de vot variabila creează o instanță de contract folosind adresa contractului și ABI.
- The vot funcția se ocupă de procesul de vot. Se numeste vot funcția de utilizare a contractului inteligent votingContract.methods.vote (candidat).send(). Trimite o tranzacție la contract, înregistrând votul utilizatorului. The votul numără variabila apoi apelează getVoteCount funcția contractului inteligent de a prelua numărul curent de voturi pentru un anumit candidat. Apoi va actualiza numărul de voturi în UI pentru a se potrivi cu voturile recuperate.
Nu uitați să includeți acest lucru main.js fișier în fișierul HTML folosind un eticheta.
În plus, asigurați-vă că adresa contractului și ABI sunt corecte și că aveți gestionarea erorilor în loc.
Rolul JavaScript în construirea DApps
JavaScript are capacitatea de a interacționa cu contractele inteligente utilizate în aplicațiile descentralizate. Aceasta reunește lumea Web3 cu un limbaj de programare principal utilizat în construirea de aplicații Web2, ceea ce ajută la facilitarea adoptării Web3. Cu Web3.js, dezvoltatorii Web2 pot trece la crearea de aplicații precum o platformă de social media Web3.