Използвайте JavaScript библиотеката Web3.js, за да създадете безпроблемен интерфейс за взаимодействие с блокчейна на Ethereum.
Интелигентните договори са основните градивни елементи за Web3 приложения. За да се активират функционалности в Web3 приложения, е важно да можете да взаимодействате удобно с функциите, посочени в интелигентен договор. Можете да използвате популярен език като JavaScript и добре познатата библиотека Web3.js, за да установите тази комуникация.
Въведение в библиотеката Web3.js
Web3.js е JavaScript библиотека, която предлага интерфейс за взаимодействие с блокчейна Ethereum. Опростява процеса на изграждане децентрализирани приложения (DApps) чрез предоставяне на методи и инструменти за свързване с възли на Ethereum, изпращане на транзакции, четене на данни от интелигентни договори и обработка на събития.
Web3.js свързва традиционното развитие и блокчейн технологията, като ви позволява да създавате децентрализирани и защитени приложения, като използвате познатия синтаксис и функционалност на JavaScript.
Как да импортирате Web3.js в JavaScript проект
За да използвате Web3.js във вашия проект Node, първо трябва да инсталирате библиотеката като зависимост от проекта.
Инсталирайте библиотеката, като изпълните тази команда във вашия проект:
npm install web3or
yarn add web3
След като инсталирате Web3.js, вече можете да импортирате библиотеката във вашия проект Node като ES модул:
const Web3 = require('web3');
Взаимодействие с внедрени интелигентни договори
За да демонстрирате правилно как можете да взаимодействате с внедрен интелигентен договор в мрежата на Ethereum с помощта на Web3.js, ще създадете уеб приложение, което функционира с внедрен интелигентен договор. Целта на уеб приложението ще бъде проста бюлетина за гласуване, където портфейлът може да гласува за кандидат и тези гласове да бъдат записани.
За да започнете, създайте нова директория за вашия проект и я инициализирайте като Node.js проект:
npm init
Инсталирайте Web3.js в проекта като зависимост и създайте просто index.html и styles.css файлове в корена на проекта.
Импортирайте следния код в index.html файл:
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>
Вътре в styles.css файл, импортирайте следния код:
/* 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;
}
По-долу е полученият интерфейс:
Сега, когато имате основен интерфейс, за да започнете, създайте a договор папка в корена на вашия проект, за да съдържа кода за вашия интелигентен договор.
Remix IDE предоставя лесен начин за писане, внедряване и тестване на интелигентни договори. Ще използвате Remix, за да внедрите договора си в мрежата Ethereum.
Навигирайте до remix.ethereum.org и създайте нов файл под договори папка. Можете да дадете име на файла test_contract.sol.
The .sol разширение показва, че това е Solidity файл. Solidity е един от най-популярните езици за писане на съвременни интелигентни договори.
Вътре в този файл, напишете и компилирайте своя 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];
};
};
Когато Remix компилира код на Solidity, той също така създава ABI (двоичен интерфейс на приложението) във формат JSON. ABI дефинира интерфейса между интелигентен договор и клиентско приложение.
Той ще уточни следното:
- Имената и типовете функции и събития, които са изложени от интелигентния договор.
- Редът на аргументите за всяка функция.
- Върнатите стойности на всяка функция.
- Форматът на данните за всяко събитие.
За да получите ABI, копирайте го от Remix IDE. Създавам contract.abi.json файл вътре договор в корена на вашия проект и поставете ABI във файла.
Трябва да продължите напред и да разгърнете договора си в тестова мрежа с помощта на инструмент като Ganache.
Комуникация с вашия внедрен интелигентен договор с помощта на Web3.js
Вашият договор вече е разгърнат в тестова мрежа на Ethereum. Можете да започнете да работите по взаимодействието с разгърнатия договор от вашия потребителски интерфейс. Създавам main.js файл в корена на вашия проект. Ще импортирате както Web3.js, така и вашия записан ABI файл в main.js. Този файл ще общува с вашия интелигентен договор и ще отговаря за четенето на данни от договора, извикването на неговите функции и обработката на транзакциите.
По-долу е как вашият main.js файлът трябва да изглежда:
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);
});
});
Кодовият блок по-горе използва Web3.js, за да общува с вашите интелигентни договорни функции от вашия уеб интерфейс. По същество вие използвате функции на JavaScript, за да извиквате функциите на Solidity main.js.
В кода заменете „CONTRACT_ADDRESS“ с действително разгърнатия адрес на договора. Remix IDE ще ви предостави това при внедряване.
Ето какво се случва в кода:
- Актуализирайте селекцията на DOM елементи въз основа на вашата HTML структура. В този пример се приема, че всеки кандидат елемент има a данни-кандидат атрибут, който съответства на името на кандидата.
- Един екземпляр на Web3 след това се създава клас с помощта на инжектирания доставчик от прозорец.ethereum обект.
- The договор за гласуване променлива създава екземпляр на договор, използвайки адреса на договора и ABI.
- The гласуване функция управлява процеса на гласуване. Извиква гласуване функция на използването на интелигентния договор votingContract.methods.vote (кандидат).send(). Той изпраща транзакция към договора, като записва вота на потребителя. The voteCount променлива след това извиква getVoteCount функция на интелигентния договор за извличане на текущия брой гласове за конкретен кандидат. След това ще актуализира броя на гласовете в потребителския интерфейс, за да съответства на извлечените гласове.
Не забравяйте да включите това main.js файл във вашия HTML файл с помощта на a етикет.
Освен това се уверете, че адресът на договора и ABI са правилни и че имате подходящ обработка на грешки на място.
Ролята на JavaScript в изграждането на DApps
JavaScript има способността да взаимодейства с интелигентни договори, използвани в децентрализирани приложения. Това обединява света на Web3 с основен език за програмиране, използван при изграждането на Web2 приложения, което спомага за улесняването на приемането на Web3. С Web3.js разработчиците на Web2 могат да преминат към изграждане на приложения като платформа за социални медии Web3.
