Panduan komprehensif membangun pemantau event frontend untuk smart contract blockchain, memungkinkan pemantauan perubahan status kontrak secara real-time. Pelajari cara mengintegrasikan Web3.js atau ethers.js, mendekode data event, dan memperbarui UI aplikasi Anda.
Pemantau Event Smart Contract Blockchain Frontend: Pemantauan Status Kontrak
Aplikasi terdesentralisasi (DApps) seringkali memerlukan pembaruan real-time untuk mencerminkan perubahan status pada smart contract yang mendasarinya. Di sinilah pemantau event berperan. Dengan memantau event yang dikeluarkan oleh smart contract, aplikasi frontend dapat bereaksi terhadap transisi status dan memberikan informasi terkini kepada pengguna. Panduan ini memberikan gambaran komprehensif tentang cara membangun pemantau event frontend untuk smart contract blockchain, dengan fokus pada implementasi praktis dan praktik terbaik.
Apa itu Event Smart Contract?
Smart contract, yang ditulis dalam bahasa seperti Solidity, dapat mengeluarkan (emit) event ketika tindakan tertentu terjadi di dalam kontrak. Event ini berfungsi sebagai mekanisme notifikasi, memberi sinyal kepada aplikasi eksternal bahwa perubahan status telah terjadi. Anggap saja ini sebagai entri log yang dicatat secara permanen di blockchain. Event berisi informasi tentang perubahan tersebut, memungkinkan aplikasi untuk bereaksi sesuai dengannya.
Sebagai contoh, pertimbangkan kontrak token sederhana. Kontrak tersebut mungkin mengeluarkan event saat token ditransfer antar akun. Event ini biasanya akan menyertakan alamat pengirim, alamat penerima, dan jumlah yang ditransfer. Aplikasi frontend dapat memantau event ini dan memperbarui saldo pengguna secara real-time.
Mengapa Menggunakan Pemantau Event?
Melakukan polling pada blockchain untuk perubahan status tidaklah efisien dan boros sumber daya. Pemantau event memberikan solusi yang lebih elegan dan efisien dengan memungkinkan aplikasi menunggu notifikasi secara pasif. Hal ini mengurangi beban pada blockchain dan meningkatkan responsivitas DApp.
Manfaat utama menggunakan pemantau event meliputi:
- Pembaruan Real-Time: Memberikan umpan balik langsung kepada pengguna tentang perubahan status kontrak.
- Peningkatan Efisiensi: Mengurangi kebutuhan untuk polling blockchain secara konstan.
- Pengalaman Pengguna yang Ditingkatkan: Menciptakan aplikasi yang lebih dinamis dan responsif.
- Mengurangi Biaya Gas: Menghindari operasi baca yang tidak perlu pada blockchain.
Alat dan Teknologi
Beberapa alat dan pustaka dapat digunakan untuk membangun pemantau event frontend. Opsi paling populer meliputi:
- Web3.js: Pustaka JavaScript yang memungkinkan Anda berinteraksi dengan node Ethereum dan smart contract. Ini menyediakan API komprehensif untuk mengakses data blockchain, mengirim transaksi, dan memantau event.
- Ethers.js: Pustaka JavaScript populer lainnya untuk berinteraksi dengan Ethereum. Dikenal karena kesederhanaan, keamanan, dan kinerjanya.
- Infura/Alchemy: Penyedia infrastruktur yang menawarkan akses andal ke jaringan Ethereum. Mereka menyediakan API untuk membaca data blockchain dan mengirim transaksi, menghilangkan kebutuhan untuk menjalankan node Ethereum Anda sendiri.
- WebSockets: Protokol komunikasi yang memungkinkan komunikasi dua arah secara real-time antara klien dan server. WebSockets sering digunakan untuk mengirimkan notifikasi event ke frontend.
Membangun Pemantau Event Frontend: Panduan Langkah-demi-Langkah
Bagian ini menguraikan langkah-langkah yang terlibat dalam membangun pemantau event frontend menggunakan Web3.js atau ethers.js.
Langkah 1: Menyiapkan Lingkungan Pengembangan Anda
Sebelum memulai, pastikan Anda telah menginstal yang berikut:
- Node.js: Lingkungan runtime JavaScript.
- npm (Node Package Manager) atau yarn: Manajer paket untuk menginstal dependensi.
- Editor kode: Visual Studio Code, Sublime Text, atau editor lain yang Anda sukai.
Buat direktori proyek baru dan inisialisasi dengan npm atau yarn:
mkdir my-dapp
cd my-dapp
npm init -y
Atau menggunakan yarn:
mkdir my-dapp
cd my-dapp
yarn init -y
Langkah 2: Menginstal Dependensi
Instal Web3.js atau ethers.js, bersama dengan dependensi lain yang diperlukan. Misalnya, Anda mungkin memerlukan pustaka untuk menangani variabel lingkungan.
Menggunakan npm:
npm install web3 dotenv
Menggunakan yarn:
yarn add web3 dotenv
Atau untuk ethers.js:
Menggunakan npm:
npm install ethers dotenv
Menggunakan yarn:
yarn add ethers dotenv
Langkah 3: Mengonfigurasi Provider Web3 Anda
Anda perlu mengonfigurasi provider Web3 untuk terhubung ke jaringan Ethereum. Ini dapat dilakukan menggunakan Infura, Alchemy, atau node Ethereum lokal (seperti Ganache).
Buat file `.env` di direktori proyek Anda dan tambahkan kunci API Infura atau Alchemy Anda:
INFURA_API_KEY=KUNCI_API_INFURA_ANDA
Kemudian, di file JavaScript Anda, konfigurasikan provider Web3:
Menggunakan Web3.js:
require('dotenv').config();
const Web3 = require('web3');
const infuraApiKey = process.env.INFURA_API_KEY;
const web3 = new Web3(new Web3.providers.WebsocketProvider(`wss://mainnet.infura.io/ws/v3/${infuraApiKey}`));
Menggunakan ethers.js:
require('dotenv').config();
const { ethers } = require('ethers');
const infuraApiKey = process.env.INFURA_API_KEY;
const provider = new ethers.providers.WebSocketProvider(`wss://mainnet.infura.io/ws/v3/${infuraApiKey}`);
Catatan: Ganti `mainnet` dengan jaringan yang sesuai (misalnya, `ropsten`, `rinkeby`, `goerli`) jika Anda menggunakan jaringan uji.
Langkah 4: Mendapatkan ABI dan Alamat Kontrak
Untuk berinteraksi dengan smart contract Anda, Anda memerlukan Application Binary Interface (ABI) dan alamatnya. ABI adalah file JSON yang mendeskripsikan fungsi dan event kontrak. Alamat adalah lokasi kontrak di blockchain.
Anda bisa mendapatkan ABI dari output kompiler Solidity Anda. Alamat akan ditampilkan setelah Anda mendeploy kontrak.
Simpan ABI dalam file JSON (misalnya, `MyContract.json`) dan alamat di file `.env` Anda:
CONTRACT_ADDRESS=0xAlamatKontrakAnda...
Langkah 5: Membuat Instansiasi Kontrak
Dengan menggunakan ABI dan alamat, buat instansiasi kontrak di file JavaScript Anda:
Menggunakan Web3.js:
const contractAddress = process.env.CONTRACT_ADDRESS;
const contractABI = require('./MyContract.json').abi;
const myContract = new web3.eth.Contract(contractABI, contractAddress);
Menggunakan ethers.js:
const contractAddress = process.env.CONTRACT_ADDRESS;
const contractABI = require('./MyContract.json').abi;
const myContract = new ethers.Contract(contractAddress, contractABI, provider);
Langkah 6: Memantau Event
Sekarang, Anda dapat mulai memantau event yang dikeluarkan oleh smart contract Anda. Gunakan properti `events` dari instansiasi kontrak Anda untuk berlangganan event.
Menggunakan Web3.js:
myContract.events.MyEvent({
filter: {myIndexedParam: [20,23]}, // Filter opsional menggunakan parameter terindeks.
fromBlock: 'latest' // Mulai memantau dari blok terbaru.
}, function(error, event){
if(!error)
{console.log(event);}
else
{console.log(error);}
})
.on('data', function(event){
console.log(event);
})
.on('changed', function(event){
// hapus event dari database lokal
})
.on('error', console.error);
Atau, menggunakan async/await:
myContract.events.MyEvent({
filter: {myIndexedParam: [20,23]}, // Filter opsional menggunakan parameter terindeks.
fromBlock: 'latest' // Mulai memantau dari blok terbaru.
})
.on('data', async function(event){
console.log(event);
// Proses data event di sini, mis., perbarui UI
try {
// Contoh: Berinteraksi dengan bagian lain dari DApp Anda.
// await someOtherFunction(event.returnValues);
} catch (error) {
console.error("Error processing event:", error);
}
})
.on('changed', function(event){
// hapus event dari database lokal
})
.on('error', console.error);
Menggunakan ethers.js:
myContract.on("MyEvent", (param1, param2, event) => {
console.log("Event MyEvent dikeluarkan!");
console.log("Param1:", param1);
console.log("Param2:", param2);
console.log("Data Event:", event);
// Proses data event di sini, mis., perbarui UI
});
Di kedua contoh, ganti `MyEvent` dengan nama event yang ingin Anda pantau. Fungsi callback akan dieksekusi setiap kali event dikeluarkan. Anda dapat mengakses data event melalui objek `event`.
Langkah 7: Menangani Data Event
Objek `event` berisi informasi tentang event tersebut, termasuk argumen yang diteruskan kepadanya, nomor blok, dan hash transaksi. Anda dapat menggunakan data ini untuk memperbarui UI aplikasi Anda atau melakukan tindakan lain.
Misalnya, jika event Anda menyertakan saldo pengguna, Anda dapat memperbarui tampilan saldo di frontend:
// Di dalam handler event
const balance = event.returnValues.balance; // Web3.js
// Atau
// const balance = param1; // ethers.js, dengan asumsi param1 adalah saldo
document.getElementById('balance').textContent = balance;
Teknik Pemantau Event Tingkat Lanjut
Bagian ini membahas beberapa teknik tingkat lanjut untuk membangun pemantau event yang lebih canggih.
Memfilter Event
Anda dapat memfilter event berdasarkan kriteria tertentu, seperti nilai parameter terindeks. Ini dapat membantu Anda mempersempit event yang Anda minati dan mengurangi jumlah data yang perlu Anda proses.
Di Web3.js, Anda dapat menggunakan opsi `filter` saat berlangganan event:
myContract.events.MyEvent({
filter: {myIndexedParam: [20, 23]}, // Hanya pantau event di mana myIndexedParam adalah 20 atau 23.
fromBlock: 'latest'
}, function(error, event){
console.log(event);
})
Di ethers.js, Anda dapat menentukan filter saat membuat instansiasi kontrak atau saat melampirkan pemantau event:
// Filter berdasarkan nama event dan argumen terindeks
const filter = myContract.filters.MyEvent(arg1, arg2);
myContract.on(filter, (arg1, arg2, event) => {
console.log("Event MyEvent dikeluarkan dengan argumen spesifik!");
console.log("Arg1:", arg1);
console.log("Arg2:", arg2);
console.log("Data Event:", event);
});
Memantau Event Lampau
Anda dapat mengambil event lampau yang terjadi sebelum pemantau event Anda aktif. Ini bisa berguna untuk menginisialisasi status aplikasi Anda atau untuk tujuan audit.
Di Web3.js, Anda dapat menggunakan metode `getPastEvents`:
myContract.getPastEvents('MyEvent', {
fromBlock: 0,
toBlock: 'latest'
}, function(error, events){
console.log(events);
});
Di ethers.js, Anda dapat melakukan query pada log event menggunakan metode `getLogs` dari provider:
const blockNumber = await provider.getBlockNumber();
const filter = myContract.filters.MyEvent(arg1, arg2);
const logs = await provider.getLogs({
address: myContract.address,
fromBlock: blockNumber - 1000, // 1000 blok terakhir
toBlock: blockNumber,
topics: filter.topics // filter topik
});
for (const log of logs) {
const parsedLog = myContract.interface.parseLog(log);
console.log(parsedLog);
}
Menangani Transaksi yang Dibatalkan (Reverted)
Transaksi terkadang bisa dibatalkan (revert) karena kesalahan atau gas yang tidak mencukupi. Ketika transaksi dibatalkan, event yang terkait dengan transaksi tersebut tidak dikeluarkan. Penting untuk menangani transaksi yang dibatalkan dengan baik untuk menghindari perilaku tak terduga dalam aplikasi Anda.
Salah satu cara untuk menangani transaksi yang dibatalkan adalah dengan memantau resi transaksi. Resi tersebut berisi informasi tentang transaksi, termasuk statusnya (berhasil atau gagal). Jika statusnya `0x0`, transaksi tersebut dibatalkan.
Anda dapat menggunakan metode `web3.eth.getTransactionReceipt` (Web3.js) atau `provider.getTransactionReceipt` (ethers.js) untuk mengambil resi transaksi.
Menggunakan WebSocket untuk Pembaruan Real-Time
WebSocket menyediakan koneksi persisten antara klien dan server, memungkinkan komunikasi dua arah secara real-time. Ini ideal untuk mengirimkan notifikasi event ke frontend.
Baik Web3.js maupun ethers.js mendukung WebSocket. Untuk menggunakan WebSocket, konfigurasikan provider Web3 Anda dengan endpoint WebSocket (seperti yang ditunjukkan pada contoh penyiapan di atas).
Pertimbangan Keamanan
Saat membangun pemantau event frontend, penting untuk mempertimbangkan aspek keamanan berikut:
- Validasi Data: Selalu validasi data event sebelum menggunakannya di aplikasi Anda. Jangan secara membabi buta mempercayai data yang diterima dari blockchain.
- Penanganan Kesalahan: Terapkan penanganan kesalahan yang kuat untuk mencegah perilaku tak terduga dan potensi kerentanan keamanan.
- Pembatasan Laju (Rate Limiting): Terapkan pembatasan laju untuk mencegah penyalahgunaan dan melindungi aplikasi Anda dari serangan denial-of-service.
- Manajemen Dependensi: Jaga agar dependensi Anda tetap terbaru untuk menambal kerentanan keamanan.
- Sanitasi Input Pengguna: Jika Anda menampilkan data event kepada pengguna, sanitasi data tersebut untuk mencegah serangan cross-site scripting (XSS).
Praktik Terbaik
Ikuti praktik terbaik ini untuk membangun pemantau event frontend yang kuat dan dapat dipelihara:
- Gunakan arsitektur modular: Pecah aplikasi Anda menjadi komponen yang lebih kecil dan dapat digunakan kembali.
- Tulis tes unit: Uji pemantau event Anda secara menyeluruh untuk memastikan mereka berfungsi dengan benar.
- Gunakan kerangka kerja logging: Catat event dan kesalahan penting untuk membantu Anda men-debug aplikasi Anda.
- Dokumentasikan kode Anda: Dokumentasikan kode Anda dengan jelas agar lebih mudah dipahami dan dipelihara.
- Ikuti konvensi pengkodean: Patuhi konvensi pengkodean yang konsisten untuk meningkatkan keterbacaan dan kemudahan pemeliharaan.
- Pantau aplikasi Anda: Pantau kinerja dan penggunaan sumber daya aplikasi Anda untuk mengidentifikasi potensi hambatan.
Skenario Contoh: Memantau Transfer Token
Mari kita pertimbangkan contoh praktis: memantau transfer token dalam kontrak token ERC-20 sederhana.
Standar ERC-20 menyertakan event `Transfer` yang dikeluarkan setiap kali token ditransfer antar akun. Event ini mencakup alamat pengirim, alamat penerima, dan jumlah yang ditransfer.
Berikut cara Anda dapat memantau event `Transfer` di aplikasi frontend Anda:
Menggunakan Web3.js:
myContract.events.Transfer({
fromBlock: 'latest'
}, function(error, event){
if(!error)
{
console.log("Transfer Event:", event);
const from = event.returnValues.from;
const to = event.returnValues.to;
const value = event.returnValues.value;
// Perbarui UI atau lakukan tindakan lain
console.log(`Token ditransfer dari ${from} ke ${to}: ${value}`);
}
else
{console.error(error);}
});
Menggunakan ethers.js:
myContract.on("Transfer", (from, to, value, event) => {
console.log("Event Transfer dikeluarkan!");
console.log("Dari:", from);
console.log("Ke:", to);
console.log("Nilai:", value.toString()); // Value adalah BigNumber di ethers.js
console.log("Data Event:", event);
// Perbarui UI atau lakukan tindakan lain
console.log(`Token ditransfer dari ${from} ke ${to}: ${value.toString()}`);
});
Cuplikan kode ini memantau event `Transfer` dan mencatat alamat pengirim, alamat penerima, dan jumlah yang ditransfer ke konsol. Anda kemudian dapat menggunakan informasi ini untuk memperbarui UI aplikasi Anda, menampilkan riwayat transaksi, atau melakukan tindakan lain.
Kesimpulan
Pemantau event smart contract blockchain di frontend adalah alat yang ampuh untuk membangun DApps yang real-time dan responsif. Dengan memantau event yang dikeluarkan oleh smart contract, Anda dapat memberikan informasi terkini kepada pengguna dan meningkatkan pengalaman pengguna secara keseluruhan. Panduan ini telah membahas konsep dasar, alat, dan teknik untuk membangun pemantau event, bersama dengan topik lanjutan seperti memfilter event, menangani transaksi yang dibatalkan, dan menggunakan WebSocket untuk pembaruan real-time. Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat membangun pemantau event yang kuat dan aman yang akan meningkatkan fungsionalitas dan pengalaman pengguna DApps Anda.