Popularitas teknologi blockchain terus meningkat dari waktu ke waktu, terutama dengan munculnya Web3 yang menjanjikan desentralisasi dan transparansi. Bagi developer web, JavaScript menjadi salah satu bahasa pemrograman untuk berinteraksi dengan blockchain. Artikel ini akan membahas secara rinci bagaimana JavaScript dapat berinteraksi dengan blockchain melalui Web3, dan contoh implementasi sederhana menggunakan library ethers.js. Sebelum itu, kita akan membahas pengertian dari Web3 serta alasan mengapa JavaScript menjadi pilihan utama untuk mengimplementasikan Web3.
Apa itu Web3?
Web3, atau yang sering disebut sebagai "internet terdesentralisasi," merupakan visi masa depan internet yang dibangun di atas teknologi blockchain. Blockchain seperti Ethereum, Binance Smart Chain, atau Polygon menjadi fondasi Web3. Konsep ini pertama kali dipopulerkan oleh Gavin Wood, salah satu co-founder Ethereum, pada tahun 2014. Web3 menjanjikan internet yang memberikan kontrol penuh kepada pengguna atas data, identitas, dan aset digital mereka.
Berbeda dengan Web 2.0 di mana platform besar seperti Google, Facebook, dan Amazon mendominasi dan mengontrol data pengguna, Web3 mengusung prinsip desentralisasi.
Kenapa JavaScript Menjadi Pilihan Utama untuk Implementasi Web3?
JavaScript telah menjadi bahasa pemrograman utama dalam pengembangan aplikasi terdesentralisasi (DApps). Hal ini bukan terjadi secara kebetulan, melainkan karena berbagai faktor strategis dan teknis yang menjadikannya pilihan utama bagi para developer Web3. Berikut alasannya:
- Ekosistem JavaScript
JavaScript sudah menjadi bahasa standard dalam web development selama lebih dari dua dekade. Saat Web3 hadir sebagai evolusi dari Web 2.0, para developer tidak perlu memulai semuanya dari awal. Ekosistem JavaScript yang matang dengan jutaan package atau library di npm, framework yang stabil, serta tooling yang canggih menjadi fondasi kuat untuk membangun aplikasi Web3.
- Integrasi Langsung Antara Browser Dengan Wallet
Salah satu alasan yang membuat JavaScroipt benar-benar unggul karena kemampuannya berintegrasi langsung dengan browser extensions seperti MetaMask. Di Web3, pengguna sering berinteraksi dengan blockchain melalui wallet mereka, dan JavaScript memungkinkan "injection" provider melalui objek window.ethereum. Ini berarti dApp yang dibangun dapat meminta persetujuan transaksi secara real-time tanpa perlu server perantara, sehingga sesuai dengan prinsip dari Web3 yaitu desentralisasi.
- Asynchronous Programming Model
Pengembangan Web3 sangat mengandalkan proses asynchronous seperti berkomunikasi dengan blockchain, menunggu konfirmasi transaksi, hingga berinteraksi dengan smart contract. JavaScript, dengan model event-driven dan pemrograman berbasis promise, menjadi pilihan yang tepat untuk menangani proses-proses tersebut.
- Event-Driven Artchitecture
Blockchain termasuk sistem event-driven, yaitu mekanisme di mana alur program berjalan berdasarkan kejadian (event) tertentu. Dalam konteks blockchain, smart contract dapat memicu (emit) event, setiap transaksi menghasilkan log, dan perubahan state harus dipantau secara real-time. Karena sifat JavaScript yang juga event-driven dengan penggunaan callback dan pola asynchronous, bahasa ini menjadi sangat cocok dengan paradigma tersebut.
Konsep Dasar Blockchain
Sebelum menyelam lebih dalam, kita akan memahmai konsep dasar dari blockchain:
- Blockchain: Rantai blok data yang terdesentralisasi, aman, dan immutable (tidak bisa diubah). Setiap blok berisi transaksi yang divalidasi oleh node jaringan.
- Smart Contracts: Kode program yang berjalan otomatis di blockchain, seperti kontrak pintar di Ethereum yang ditulis dalam Solidity.
- Wallet: Alat untuk menyimpan aset crypto dan berinteraksi dengan blockchain, misalnya wallet MetaMask yang mendukung JavaScript injection.
- Node Provider: Layanan seperti Infura atau Alchemy yang menyediakan API untuk terhubung ke blockchain tanpa menjalankan node sendiri.
Persiapan
Sebelum kita memulai implementasi, ada beberapa tools yang perlu kita siapkan:
- VS Code
- Chrome Browser
- Browser Sudah Terinstal Extensi Metamask
- JavaScript
Create Scaffolding Project
Pertama, kita perlu membuat scaffolding project dengan perintah npm create seperti dibawah ini.
npm create vite@latest js-web3-dapp -- --template vanilla
Install ethers.js
Masuk kedalam folder js-web3-app yang telah kita buat, lalu pastekan perintah dibawah ini untuk melakukan installasi pada library.
npm install ethers
Implementasi
Kode pada file index.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interact Web3 with Javascript</title>
</head>
<body>
<h1>Simple Web3 App</h1>
<button id="connectButton">Connect MetaMask</button>
<button id="checkBalanceButton" disabled>Check Balance</button>
<p id="walletAddress"></p>
<p id="balance"></p>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Setelah itu, buka file main.js lalu pastekan kode dibawah ini.
import { ethers } from 'ethers';
let walletState = { provider: null, signer: null, address: null };
async function connectWallet() {
if (window.ethereum) {
try {
const provider = new ethers.BrowserProvider(window.ethereum);
await provider.send("eth_requestAccounts", []);
const signer = await provider.getSigner();
const address = await signer.getAddress();
console.log("Connected wallet:", address);
document.getElementById("walletAddress").innerText = `Connected Wallet Address: ${address}`;
document.getElementById("checkBalanceButton").disabled = false;
walletState = { provider, signer, address };
return walletState;
} catch (error) {
console.error("Error connecting wallet:", error);
document.getElementById("balance").innerText = `Error: ${error.message}`;
}
} else {
console.error("MetaMask not installed");
document.getElementById("balance").innerText = "Error: Please install MetaMask";
}
return {};
}
async function checkBalance(provider, address) {
try {
const balance = await provider.getBalance(address);
const balanceInEth = ethers.formatEther(balance);
document.getElementById("balance").innerText = `Balance: ${balanceInEth} ETH`;
} catch (error) {
console.error("Error checking balance:", error);
document.getElementById("balance").innerText = `Error: ${error.message}`;
document.getElementById("balance").className = "error";
}
}
document.getElementById("connectButton").addEventListener("click", async () => {
const { signer } = await connectWallet() || {};
if (signer) {
const address = await signer.getAddress();
document.getElementById("walletAddress").innerText = `Connected Wallet Address: ${address}`;
}
});
document.getElementById("checkBalanceButton").addEventListener("click", async () => {
if (walletState.provider && walletState.address) {
await checkBalance(walletState.provider, walletState.address);
}
});
Pengujian
Buka terminal baru, lalu ketikkan perintah dibawah ini untuk menjalankas server lokal.
npm run dev
Setelah itu, buka browser dengan host yang telah disediakan http://localhost:5173/.
Klik tombol "Connect MetaMask" setelah itu akan muncul pop up dari wallet MetaMask, klik tombol connect pada popup extension.
NOTE: Jika sebelumnnya belum memiliki membuat akun MetaMask, maka akan diarahkan untuk membuat wallet MetaMask terlebih dahulu.
Wallet MetaMask pun berhasil terkoneksi dengan aplikasi kita.
Setelah itu, kita coba klik tombol "Check Balance", yang dimana akan melakukan cek saldo dari blockchain Etherium.
Kesimpulan
JavaScript memudahkan developer untuk melakukan interaksi dengan teknologi Blockchain. Dengan bantuan library seperti ethers.js, membaca data hingga menjalankan transaksi jadi jauh lebih sederhana. Jika tertarik, kamu bisa mulai dari setup yang ringan lalu berlatih langsung di testnet untuk memahami alurnya.
Terimakasih.
