Menyiapkan web3.js untuk menggunakan rantai blok Ethereum di JavaScript

Dalam tutorial ini, kita akan melihat cara memulai web3.js (opens in a new tab) untuk berinteraksi dengan rantai blok Ethereum. Web3.js dapat digunakan baik di frontend maupun backend untuk membaca data dari rantai blok atau melakukan transaksi dan bahkan menyebarkan kontrak pintar.

Langkah pertama adalah menyertakan web3.js ke dalam proyek Anda. Untuk menggunakannya di halaman web, Anda dapat mengimpor pustaka tersebut secara langsung menggunakan CDN seperti JSDeliver.

<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 --save

Kemudian untuk mengimpor Web3.js ke dalam skrip Node.js atau proyek frontend Browserify, Anda dapat menggunakan baris JavaScript berikut:

const Web3 = require("web3")

Sekarang setelah kita menyertakan pustaka di dalam proyek, kita perlu menginisialisasinya. Proyek Anda harus dapat berkomunikasi dengan rantai blok. 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), tampilannya akan seperti ini:

const web3 = new Web3("http://localhost:8545")

Jika Anda ingin mengakses node yang dihosting secara langsung, Anda dapat menemukan opsinya di node sebagai layanan.

const 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.

var Web3 = require("web3")
const web3 = new Web3("https://cloudflare-eth.com")

web3.eth.getBlockNumber(function (error, result) {
  console.log(result)
})

Jika Anda mengeksekusi program ini, program ini hanya akan mencetak nomor blok terbaru: bagian teratas dari rantai blok. Anda juga dapat menggunakan panggilan fungsi await/async untuk menghindari callback bersarang di dalam kode Anda:

async function getBlockNumber() {
  const latestBlockNumber = await web3.eth.getBlockNumber()
  console.log(latestBlockNumber)
  return latestBlockNumber
}

getBlockNumber()

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 rantai blok Ethereum:

if (window.ethereum != null) {
  state.web3 = new Web3(window.ethereum)
  try {
    // Meminta akses akun jika diperlukan
    await window.ethereum.enable()
    // Akun sekarang terekspos
  } catch (error) {
    // Pengguna menolak akses akun...
  }
}

Alternatif untuk web3.js seperti Ethers.js (opens in a new tab) memang ada dan juga umum digunakan. Pada tutorial berikutnya, kita akan melihat cara mendengarkan blok baru yang masuk di rantai blok dengan mudah dan melihat apa isinya (opens in a new tab).