Используйте библиотеку 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 и стили.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>
Внутри стили.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;
}
Ниже приведен получившийся интерфейс:
Теперь, когда у вас есть базовый интерфейс для начала работы, создайте договор папку в корне вашего проекта, чтобы содержать код вашего смарт-контракта.
Remix IDE предоставляет простой способ написания, развертывания и тестирования смарт-контрактов. Вы будете использовать Remix для развертывания своего контракта в сети Ethereum.
Перейдите к remix.ethereum.org и создайте новый файл под контракты папка. Вы можете назвать файл test_contract.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. Создать контракт.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.
В коде заменить 'КОНТРАКТ_АДРЕС' с фактическим развернутым адресом контракта. Remix IDE предоставит вам это при развертывании.
Вот что происходит в коде:
- Обновите выбор элементов DOM на основе вашей структуры HTML. В этом примере предполагается, что каждый элемент-кандидат имеет кандидат данных атрибут, соответствующий имени кандидата.
- Экземпляр Веб3 Затем создается класс с использованием внедренного провайдера из окно.эфириум объект.
- голосованиеКонтракт переменная создает экземпляр контракта, используя адрес контракта и ABI.
- голосование Функция обрабатывает процесс голосования. Он называет голосование функция смарт-контракта с использованием voiceContract.methods.vote (кандидат).send(). Он отправляет транзакцию в контракт, записывая голос пользователя. количество голосов Затем переменная вызывает getVoteCount функция смарт-контракта для получения текущего количества голосов за конкретного кандидата. Затем он обновит количество голосов в пользовательском интерфейсе, чтобы оно соответствовало полученным голосам.
Не забудьте включить это main.js файл в вашем HTML-файле с помощью .
Кроме того, убедитесь, что адрес контракта и ABI указаны правильно, а обработка ошибок на месте.
Роль JavaScript в создании DApps
JavaScript может взаимодействовать со смарт-контрактами, используемыми в децентрализованных приложениях. Это объединяет мир Web3 с основным языком программирования, используемым при создании приложений Web2, что помогает облегчить внедрение Web3. С Web3.js разработчики Web2 могут перейти к созданию приложений, таких как платформа социальных сетей Web3.