Manfaatkan perpustakaan JavaScript Web3.js untuk membangun antarmuka yang mulus untuk berinteraksi dengan blockchain Ethereum.
Kontrak pintar adalah blok bangunan utama untuk aplikasi Web3. Untuk mengaktifkan fungsionalitas dalam aplikasi Web3, penting untuk dapat berinteraksi dengan fungsi yang ditentukan dalam kontrak cerdas dengan nyaman. Anda dapat menggunakan bahasa populer seperti JavaScript dan pustaka Web3.js yang terkenal untuk menjalin komunikasi ini.
Pengantar Perpustakaan Web3.js
Web3.js adalah pustaka JavaScript yang menawarkan antarmuka untuk berinteraksi dengan blockchain Ethereum. Ini menyederhanakan proses pembangunan aplikasi terdesentralisasi (DApps) dengan menyediakan metode dan alat untuk terhubung ke node Ethereum, mengirim transaksi, membaca data kontrak cerdas, dan menangani peristiwa.
Web3.js menjembatani pengembangan tradisional dan teknologi blockchain, memungkinkan Anda membuat aplikasi yang terdesentralisasi dan aman menggunakan sintaks dan fungsionalitas JavaScript yang sudah dikenal.
Cara Mengimpor Web3.js Ke Proyek JavaScript
Untuk menggunakan Web3.js di proyek Node Anda, pertama-tama Anda harus menginstal perpustakaan sebagai ketergantungan proyek.
Instal perpustakaan dengan menjalankan perintah ini di dalam proyek Anda:
npm install web3or
yarn add web3
Setelah menginstal Web3.js, Anda sekarang dapat mengimpor perpustakaan dalam proyek Node Anda sebagai modul ES:
const Web3 = require('web3');
Berinteraksi Dengan Kontrak Cerdas yang Diterapkan
Untuk mendemonstrasikan dengan benar bagaimana Anda dapat berinteraksi dengan kontrak cerdas yang diterapkan di jaringan Ethereum menggunakan Web3.js, Anda akan membuat aplikasi web yang berfungsi dengan kontrak cerdas yang diterapkan. Tujuan dari aplikasi web akan menjadi pemungutan suara sederhana di mana dompet dapat memberikan suara untuk seorang kandidat dan mencatat suara tersebut.
Untuk memulai, buat direktori baru untuk proyek Anda dan inisialisasi sebagai proyek Node.js:
npm init
Instal Web3.js ke dalam proyek sebagai ketergantungan dan buat sederhana index.html Dan style.css file dalam root proyek.
Impor kode berikut di index.html mengajukan:
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>
Di dalam style.css file, impor kode berikut:
/* 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;
}
Di bawah ini adalah antarmuka yang dihasilkan:
Sekarang setelah Anda memiliki antarmuka dasar untuk memulai, buat kontrak folder di root proyek Anda untuk memuat kode untuk kontrak pintar Anda.
Remix IDE menyediakan cara sederhana untuk menulis, menyebarkan, dan menguji kontrak pintar. Anda akan menggunakan Remix untuk menyebarkan kontrak Anda ke jaringan Ethereum.
Navigasi ke remix.ethereum.org dan buat file baru di bawah kontrak map. Anda dapat menamai file tersebut test_contract.sol.
Itu .sol ekstensi menunjukkan bahwa ini adalah file Solidity. Soliditas adalah salah satu bahasa paling populer untuk menulis kontrak pintar modern.
Di dalam berkas ini, tulis dan kompilasi kode Soliditas Anda:
// 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];
};
};
Saat Remix mengkompilasi kode Solidity, Remix juga membuat ABI (Application Binary Interface) dalam format JSON. ABI mendefinisikan antarmuka antara smart contract dan aplikasi klien.
Itu akan menentukan yang berikut:
- Nama dan jenis fungsi dan peristiwa yang diekspos oleh smart contract.
- Urutan argumen untuk setiap fungsi.
- Nilai kembalian dari setiap fungsi.
- Format data dari setiap peristiwa.
Untuk mendapatkan ABI, salin dari dalam Remix IDE. Membuat contract.abi.json berkas di dalam kontrak dalam root proyek Anda dan rekatkan ABI di dalam file.
Anda harus melanjutkan dan menyebarkan kontrak Anda ke jaringan uji menggunakan alat seperti Ganache.
Berkomunikasi Dengan Kontrak Cerdas Anda yang Diterapkan Menggunakan Web3.js
Kontrak Anda sekarang telah diterapkan ke jaringan uji Ethereum. Anda dapat mulai berinteraksi dengan kontrak yang diterapkan dari antarmuka UI Anda. Membuat main.js file di root proyek Anda. Anda akan mengimpor Web3.js dan file ABI yang disimpan ke dalamnya main.js. File ini akan berkomunikasi dengan smart contract Anda dan akan bertanggung jawab untuk membaca data dari kontrak, memanggil fungsinya, dan menangani transaksi.
Di bawah ini adalah bagaimana Anda main.js file akan terlihat:
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);
});
});
Blok kode di atas menggunakan Web3.js untuk berbicara dengan fungsi smart contract Anda dari antarmuka web Anda. Pada dasarnya Anda menggunakan fungsi JavaScript untuk memanggil fungsi Solidity main.js.
Dalam kode, ganti 'CONTRACT_ADDRESS' dengan alamat kontrak yang sebenarnya dikerahkan. Remix IDE akan memberi Anda ini saat penerapan.
Inilah yang terjadi dalam kode:
- Perbarui pemilihan elemen DOM berdasarkan struktur HTML Anda. Dalam contoh ini, diasumsikan bahwa setiap elemen kandidat memiliki a kandidat data atribut yang sesuai dengan nama kandidat.
- Contoh dari Web3 kelas kemudian dibuat menggunakan penyedia yang disuntikkan dari jendela.ethereum obyek.
- Itu votingContract variabel membuat instance kontrak menggunakan alamat kontrak dan ABI.
- Itu Pilih fungsi menangani proses pemungutan suara. Ini memanggil Pilih fungsi kontrak pintar menggunakan votingContract.methods.vote (kandidat).kirim(). Ini mengirimkan transaksi ke kontrak, merekam suara pengguna. Itu jumlah suara variabel kemudian memanggil dapatkanVoteCount fungsi smart contract untuk mengambil penghitungan suara saat ini untuk kandidat tertentu. Ini kemudian akan memperbarui jumlah suara di UI agar sesuai dengan suara yang diambil.
Ingatlah untuk memasukkan ini main.js file dalam file HTML Anda menggunakan a .
Selain itu, pastikan alamat kontrak dan ABI sudah benar dan Anda memiliki penanganan kesalahan di tempat.
Peran JavaScript dalam Membangun DApps
JavaScript memiliki kemampuan untuk berinteraksi dengan smart contract yang digunakan dalam aplikasi terdesentralisasi. Ini menyatukan dunia Web3 dengan bahasa pemrograman utama yang digunakan dalam membangun aplikasi Web2, yang membantu memfasilitasi adopsi Web3. Dengan Web3.js, developer Web2 dapat bertransisi untuk membuat aplikasi seperti platform media sosial Web3.