Siapkan web3.js untuk menggunakan blockchain Ethereum di JavaScript
Dalam tutorial ini, kita akan melihat cara memulai dengan web3.js (opens in a new tab) untuk berinteraksi dengan blockchain Ethereum. Web3.js dapat digunakan baik di frontend maupun backend untuk membaca data dari blockchain atau melakukan transaksi dan bahkan menerapkan kontrak pintar.
Langkah pertama adalah menyertakan web3.js dalam proyek Anda. Untuk menggunakannya di halaman web, Anda dapat mengimpor pustaka secara langsung menggunakan CDN seperti JSDeliver.
1<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>Jika Anda lebih suka menginstal pustaka untuk digunakan di backend atau proyek frontend yang menggunakan build, Anda dapat menginstalnya menggunakan npm:
npm install web3 --saveKemudian untuk mengimpor Web3.js ke dalam skrip Node.js atau proyek frontend Browserify, Anda dapat menggunakan baris JavaScript berikut:
1const Web3 = require("web3")Sekarang setelah kita menyertakan pustaka dalam proyek, kita perlu menginisialisasinya. Proyek Anda harus dapat berkomunikasi dengan blockchain. Sebagian besar pustaka Ethereum berkomunikasi dengan sebuah node melalui panggilan RPC. Untuk memulai penyedia Web3 kita, kita akan membuat instansiasi Web3 dengan meneruskan URL penyedia sebagai konstruktor. Jika Anda memiliki node atau instansiasi ganache yang berjalan di komputer Anda (opens in a new tab), itu akan terlihat seperti ini:
1const web3 = new Web3("http://localhost:8545")Jika Anda ingin mengakses node yang di-host secara langsung, Anda dapat menemukan opsi di node sebagai layanan.
1const web3 = new Web3("https://cloudflare-eth.com")Untuk menguji bahwa kita telah mengonfigurasi instansiasi Web3 kita dengan benar, kita akan mencoba mengambil nomor blok terbaru menggunakan fungsi getBlockNumber. Fungsi ini menerima callback sebagai parameter dan mengembalikan nomor blok sebagai bilangan bulat.
1var Web3 = require("web3")2const web3 = new Web3("https://cloudflare-eth.com")34web3.eth.getBlockNumber(function (error, result) {5 console.log(result)6})Jika Anda mengeksekusi program ini, program ini hanya akan mencetak nomor blok terbaru: bagian atas dari blockchain. Anda juga dapat menggunakan panggilan fungsi await/async untuk menghindari callback bersarang dalam kode Anda:
1async function getBlockNumber() {2 const latestBlockNumber = await web3.eth.getBlockNumber()3 console.log(latestBlockNumber)4 return latestBlockNumber5}67getBlockNumber()Anda dapat melihat semua fungsi yang tersedia pada instansiasi Web3 di dokumentasi resmi web3.js (opens in a new tab).
Sebagian besar pustaka Web3 bersifat asinkron karena di latar belakang pustaka tersebut melakukan panggilan JSON-RPC ke node yang mengirimkan kembali hasilnya.
Jika Anda bekerja di peramban, beberapa dompet secara langsung menyuntikkan instansiasi Web3 dan Anda harus mencoba menggunakannya kapan pun memungkinkan, terutama jika Anda berencana untuk berinteraksi dengan alamat Ethereum pengguna untuk melakukan transaksi.
Berikut adalah cuplikan untuk mendeteksi apakah dompet MetaMask tersedia dan mencoba mengaktifkannya jika ada. Ini nantinya akan memungkinkan Anda untuk membaca saldo pengguna dan memungkinkan mereka untuk memvalidasi transaksi yang Anda ingin mereka lakukan di blockchain Ethereum:
1if (window.ethereum != null) {2 state.web3 = new Web3(window.ethereum)3 try {4 // Request account access if needed // Minta akses akun jika diperlukan5 await window.ethereum.enable()6 // Accounts now exposed // Akun sekarang terekspos7 } catch (error) {8 // User denied account access... // Pengguna menolak akses akun...9 }10}Tampilkan semuaAlternatif untuk web3.js seperti Ethers.js (opens in a new tab) memang ada dan juga umum digunakan. Dalam tutorial berikutnya kita akan melihat cara mudah mendengarkan blok masuk baru di blockchain dan melihat apa isinya (opens in a new tab).
Pembaruan terakhir halaman: 21 Agustus 2025
