Skorzystaj z biblioteki JavaScript Web3.js, aby stworzyć bezproblemowy interfejs do interakcji z blockchainem Ethereum.
Inteligentne kontrakty to podstawowe elementy składowe aplikacji Web3. Aby umożliwić działanie funkcjonalności w aplikacjach Web3, ważna jest możliwość wygodnej interakcji z funkcjami określonymi w smart kontrakcie. Do nawiązania tej komunikacji można użyć popularnego języka, takiego jak JavaScript i dobrze znanej biblioteki Web3.js.
Wprowadzenie do biblioteki Web3.js
Web3.js to biblioteka JavaScript, która oferuje interfejs do interakcji z blockchainem Ethereum. Upraszcza proces budowy aplikacje zdecentralizowane (DApps) dostarczając metody i narzędzia do łączenia się z węzłami Ethereum, wysyłania transakcji, odczytywania danych smart kontraktów i obsługi zdarzeń.
Web3.js łączy tradycyjną technologię programistyczną i blockchain, umożliwiając tworzenie zdecentralizowanych i bezpiecznych aplikacji przy użyciu znanej składni i funkcjonalności JavaScript.
Jak zaimportować Web3.js do projektu JavaScript
Aby używać Web3.js w swoim projekcie Node, musisz najpierw zainstalować bibliotekę jako zależność projektu.
Zainstaluj bibliotekę, uruchamiając to polecenie w swoim projekcie:
npm install web3or
yarn add web3
Po zainstalowaniu Web3.js możesz teraz zaimportować bibliotekę do swojego projektu Node jako moduł ES:
const Web3 = require('web3');
Interakcja z wdrożonymi inteligentnymi kontraktami
Aby właściwie zademonstrować, w jaki sposób możesz wchodzić w interakcje z wdrożoną inteligentną umową w sieci Ethereum za pomocą Web3.js, utworzysz aplikację internetową, która będzie działać z wdrożoną inteligentną umową. Celem aplikacji internetowej będzie prosta karta do głosowania, w której portfel może oddawać głosy na kandydata i rejestrować te głosy.
Aby rozpocząć, utwórz nowy katalog dla swojego projektu i zainicjuj go jako projekt Node.js:
npm init
Zainstaluj Web3.js w projekcie jako zależność i utwórz proste indeks.html I style.css pliki w katalogu głównym projektu.
Zaimportuj następujący kod w pliku indeks.html plik:
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>
W środku style.css plik, zaimportuj następujący 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;
}
Poniżej znajduje się wynikowy interfejs:
Teraz, gdy masz już podstawowy interfejs, aby rozpocząć, utwórz plik kontrakt folder w katalogu głównym projektu, aby zawierał kod inteligentnej umowy.
Remix IDE zapewnia prosty sposób pisania, wdrażania i testowania inteligentnych kontraktów. Będziesz używać Remix do wdrożenia swojego kontraktu w sieci Ethereum.
Nawigować do remix.ethereum.org i utwórz nowy plik pod umowy teczka. Możesz nazwać plik umowa_testowa.sol.
The .sol rozszerzenie wskazuje, że jest to plik Solidity. Solidity to jeden z najpopularniejszych języków do pisania nowoczesnych inteligentnych kontraktów.
Wewnątrz tego pliku napisz i skompiluj swój kod 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];
};
};
Kiedy Remix kompiluje kod Solidity, tworzy również ABI (Application Binary Interface) w formacie JSON. ABI definiuje interfejs między inteligentną umową a aplikacją kliencką.
Określiłoby to, co następuje:
- Nazwy i typy funkcji i zdarzeń, które są udostępniane przez inteligentną umowę.
- Kolejność argumentów każdej funkcji.
- Zwracane wartości każdej funkcji.
- Format danych każdego zdarzenia.
Aby uzyskać ABI, skopiuj go z Remix IDE. Stwórz kontrakt.abi.json plik w środku kontrakt w katalogu głównym projektu i wklej ABI do pliku.
Powinieneś śmiało wdrożyć swój kontrakt w sieci testowej za pomocą narzędzia takiego jak Ganache.
Komunikacja z wdrożoną inteligentną umową za pomocą Web3.js
Twoja umowa została wdrożona w sieci testowej Ethereum. Możesz rozpocząć pracę nad interakcją z wdrożoną umową z interfejsu użytkownika. Stwórz main.js plik w katalogu głównym twojego projektu. Zaimportujesz zarówno plik Web3.js, jak i zapisany plik ABI main.js. Ten plik będzie rozmawiał z Twoją inteligentną umową i będzie odpowiedzialny za odczyt danych z umowy, wywoływanie jej funkcji i obsługę transakcji.
Poniżej masz jak main.js plik powinien wyglądać:
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);
});
});
Powyższy blok kodu wykorzystuje Web3.js do komunikowania się z funkcjami inteligentnej umowy z poziomu interfejsu internetowego. Zasadniczo używasz funkcji JavaScript do wywoływania funkcji Solidity main.js.
W kodzie zamień „ADRES KONTRAKTU” z faktycznie wdrożonym adresem umowy. Remix IDE zapewni Ci to podczas wdrażania.
Oto, co dzieje się w kodzie:
- Zaktualizuj wybór elementów DOM na podstawie struktury HTML. W tym przykładzie zakłada się, że każdy element kandydujący ma a kandydat do danych atrybut odpowiadający nazwisku kandydata.
- Przykład z Web3 klasa jest następnie tworzona przy użyciu wstrzykniętego dostawcy z okno.ethereum obiekt.
- The głosowanieUmowa zmienna tworzy instancję kontraktu przy użyciu adresu kontraktu i ABI.
- The głosować funkcja obsługuje proces głosowania. Nazywa się głosować funkcja inteligentnego kontraktu za pomocą votingContract.methods.vote (kandydat).send(). Wysyła transakcję do kontraktu, rejestrując głos użytkownika. The Liczba głosów zmienna następnie wywołuje pobierz liczbę głosów funkcja inteligentnego kontraktu do pobierania aktualnej liczby głosów na konkretnego kandydata. Następnie zaktualizuje liczbę głosów w interfejsie użytkownika, aby odpowiadała pobranym głosom.
Pamiętaj, aby to uwzględnić main.js plik w pliku HTML za pomocą pliku tag.
Dodatkowo upewnij się, że adres umowy i ABI są poprawne oraz że masz odpowiednie obsługa błędów na miejscu.
Rola JavaScript w tworzeniu DApps
JavaScript ma możliwość interakcji z inteligentnymi kontraktami używanymi w zdecentralizowanych aplikacjach. Łączy to świat Web3 z podstawowym językiem programowania używanym do tworzenia aplikacji Web2, co ułatwia przyjęcie Web3. Dzięki Web3.js programiści Web2 mogą przejść do tworzenia aplikacji, takich jak platforma mediów społecznościowych Web3.
