Panduan Lengkap Web3 dApp Development dengan ethers.js dan Hardhat

Konfigurasi File Config

Buka file konfigurasi dan pastikan pengaturannya sudah benar. Berikut contoh yang mencakup testnet Sepolia:

import { HardhatUserConfig } from "hardhat/config";
import "@nomicfoundation/hardhat-toolbox";

const config: HardhatUserConfig = {
  solidity: "0.8.24",
  networks: {
    sepolia: {
      url: process.env.SEPOLIA_RPC_URL || "",
      accounts: process.env.PRIVATE_KEY ? [process.env.PRIVATE_KEY] : [],
    },
  },
  etherscan: {
    apiKey: process.env.ETHERSCAN_API_KEY,
  },
};

export default config;

Simpan kredensial rahasia di file .env, bukan di config. Gunakan dotenv untuk memuat environment variables saat runtime.

Buat file baru bernama SimpleStorage.sol di folder contracts. Kontrak ini menyimpan dan mengambil angka sederhana — cukup untuk memahami siklus kerja development blockchain.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;

contract SimpleStorage {
    uint256 private storedValue;

    event ValueChanged(uint256 newValue);

    function store(uint256 _value) public {
        storedValue = _value;
        emit ValueChanged(_value);
    }

    function retrieve() public view returns (uint256) {
        return storedValue;
    }
}

Kontrak di atas mendefinisikan dua fungsi: store untuk menyimpan angka dan retrieve untuk membaca nilainya. Event ValueChanged memungkinkan frontend memantau setiap perubahan data.

Kompilasi Kontrak

Jalankan perintah berikut untuk mengkompilasi kontrak ke bytecode yang bisa dieksekusi EVM:

npx hardhat compile

Tool ini akan menghasilkan artifact di folder artifacts/ yang berisi ABI (Application Binary Interface) dan bytecode. ABI diperlukan oleh library ethers.js untuk berinteraksi dengan kontrak.

Testing dan Deploy ke Frontend

Jaringan lokal menyediakan environment Ethereum untuk pengembangan dan testing. Tidak perlu menghabiskan ETH testnet selama proses iterasi kode.

Contoh Unit Test

Buat file SimpleStorage.test.js di folder test. Gunakan Chai untuk assertions dan ethers extension untuk mendapatkan signers.

import { expect } from "chai";
import hre from "hardhat";

describe("SimpleStorage", function () {
  it("Harus menyimpan dan mengambil nilai", async function () {
    const SimpleStorage = await hre.ethers.getContractFactory("SimpleStorage");
    const contract = await SimpleStorage.deploy();

    await contract.store(42);
    expect(await contract.retrieve()).to.equal(42);
  });

  it("Harus emit event saat store dipanggil", async function () {
    const SimpleStorage = await hre.ethers.getContractFactory("SimpleStorage");
    const contract = await SimpleStorage.deploy();

    await expect(contract.store(100))
      .to.emit(contract, "ValueChanged")
      .withArgs(100);
  });
});

Jalankan test dengan perintah:

npx hardhat test

Jaringan lokal menjalankan test di isolated environment dengan block time instan. Satu test selesai dalam hitungan milidetik, jadi pengembang bisa menulis ratusan test tanpa menunggu.

Setelah kontrak terdeploy, frontend perlu menghubungkannya ke dompet pengguna. ethers.js menyediakan BrowserProvider untuk berinteraksi dengan MetaMask atau wallet browser lainnya.

Inisialisasi Koneksi

import { BrowserProvider, Contract } from "ethers";

// ABI dari artifact kontrak
import SimpleStorageABI from "./abis/SimpleStorage.json";

const CONTRACT_ADDRESS = "0x...alamat kontrak setelah deploy";

async function connectWallet() {
  if (!window.ethereum) {
    alert("Pasang MetaMask terlebih dahulu");
    return;
  }

  const provider = new BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  
  console.log("Dompet terhubung:", await signer.getAddress());
  return signer;
}

async function storeValue(value) {
  const signer = await connectWallet();
  const contract = new Contract(
    CONTRACT_ADDRESS,
    SimpleStorageABI,
    signer
  );

  const tx = await contract.store(value);
  console.log("Transaksi dikirim:", tx.hash);
  
  await tx.wait();
  console.log("Transaksi terkonfirmasi!");
}

Perhatikan perubahan dari ethers.js v5 ke v6. BrowserProvider menggantikan Web3Provider, dan Contract constructor menerima parameter runner (signer) sebagai argumen ketiga, bukan sebagai property.

Deploy Menggunakan Ignition

Ignition adalah deployment framework declarative yang menggantikan deployment scripts manual. Dengan framework ini, pengembang mendefinisikan deployment sebagai module yang bisa di-reproduce.

// ignition/modules/SimpleStorage.js
import { buildModule } from "@nomicfoundation/hardhat-ignition/modules";

const SimpleStorageModule = buildModule("SimpleStorageModule", (m) => {
  const contract = m.contract("SimpleStorage");
  return { contract };
});

export default SimpleStorageModule;

Jalankan deployment ke testnet:

npx hardhat ignition deploy ignition/modules/SimpleStorage.js --network sepolia

Ignition melacak state deployment dan hanya menjalankan bagian yang belum ter-deploy. Jika deployment terputus di tengah jalan, jalankan ulang perintah yang sama — Ignition akan melanjutkan dari titik terakhir.

Alur Produksi hingga Mainnet

Setiap project dApp mature mengikuti alur yang konsisten. Berikut langkah-langkah yang harus ditempuh sebelum kontrak sampai ke mainnet:

• Kompilasi — Pastikan kontrak kompile tanpa error dengan compiler Solidity versi stabil
• Testing — Jalankan unit test dan coverage test untuk memverifikasi semua code path
• Deploy lokal — Uji deployment di jaringan lokal sebelum ke testnet
• Deploy testnet — Deploy ke Sepolia atau Holesky untuk uji coba dengan ETH testnet
• Verifikasi — Verifikasi source code di Etherscan agar pengguna bisa meninjau kode
• Audit keamanan — Minta audit dari pihak ketiga sebelum deploy ke mainnet
• Deploy mainnet — Deploy ke Ethereum mainnet atau chain target lainnya

Setiap tahap punya exit criteria sendiri. Jangan pernah skip testing untuk menghemat waktu — bug di smart contract tidak bisa diperbaiki setelah deploy ke mainnet.

Plugin Ekosistem dan Best Practices

Salah satu kekuatan utama Hardhat adalah ekosistem plugin yang luas. Berikut plugin yang wajib dipasang di setiap project:

Gas-reporter sangat berguna untuk mengidentifikasi fungsi yang menghabiskan terlalu banyak gas. Dengan data ini, pengembang bisa mengoptimalkan kode sebelum deployment.

Membuat dApp yang berjalan di testnet berbeda jauh dengan dApp yang melayani pengguna nyata. Berikut praktik terbaik yang harus diterapkan:

Keamanan

Gunakan pattern akses kontrol dari OpenZeppelin seperti Ownable dan AccessControl. Jangan pernah menaruh private key di repository — gunakan environment variables atau hardware wallet untuk deployment. Selalu verifikasi kontrak di Etherscan agar pengguna bisa meninjau kode sebelum berinteraksi.

Optimasi Gas

Gunakan tipe data yang tepat. uint256 lebih hemat gas dibanding uint8 di storage karena EVM membaca dalam slot 32 byte. Kumpulkan operasi write ke storage — setiap operasi SSTORE menghabiskan 20.000 gas untuk slot baru. Pertimbangkan menggunakan events untuk data yang tidak perlu di-query on-chain.

Error Handling

Gunakan require() dengan pesan error yang informatif. Custom errors di Solidity 0.8 lebih hemat gas dibanding string messages — gunakan untuk error yang sering terjadi. Selalu handle transaksi gagal di frontend dengan mencatat error dan menampilkan pesan yang jelas kepada pengguna.

Monitoring

Integrasikan service monitoring seperti Tenderly atau Etherscan alerts untuk memantau transaksi abnormal. Set threshold untuk gas usage dan failure rate. Log semua transaksi ke sistem observasi untuk debugging di kemudian hari.

Banyak tutorial di internet masih menggunakan ethers.js v5. Berikut ringkasan perubahan utama yang harus diperhatikan:

Bagian paling sering menyebabkan error adalah perubahan BigNumber ke BigInt. Seluruh operasi matematika sekarang menggunakan operator native JavaScript (>, <, +, -, *, /) tanpa method .add() atau .mul().

Sumber Referensi

• Hardhat Official Documentation — https://hardhat.org/tutorial
• Hardhat 3 What's New — https://hardhat.org/docs/hardhat3/whats-new
• ethers.js v6 Migration Guide — https://docs.ethers.org/v6/migrating/
• QuickNode: How to Build Your DApp — https://www.quicknode.com/guides/ethereum-development/dapps/how-to-build-your-dapp-using-the-modern-ethereum-tech-stack-hardhat-and-ethersjs
• Nadcab Architecture: dApp Explained — https://www.nadcab.com/blog/dapp-architecture-explained

Pertanyaan Umum

Perbedaan Hardhat dengan Truffle?

Solusi ini menggunakan JavaScript/TypeScript sebagai bahasa utama, sementara Truffle berbasis JavaScript dengan dukungan Solidity testing terintegrasi. Performa kompilasi lebih cepat dan ekosistem plugin lebih aktif. Truffle sudah tidak dikembangkan secara aktif sejak ConsenSys mengurangi timnya di 2023.

Apakah ethers.js wajib dipakai bersama Hardhat?

Tidak wajib. Hardhat 3 mendukung viem sebagai alternatif. Namun solusi ini tetap populer karena dokumentasi yang lengkap dan komunitas besar. Pilihan tergantung preferensi tim — viem lebih ringan, ethers.js lebih banyak contoh implementasi.

Bagaimana cara mendapatkan ETH testnet untuk deploy?

Gunakan faucet testnet seperti Sepolia Faucet (sepoliafaucet.com) atau Alchemy Faucet. Beberapa faucet membutuhkan akun Alchemy atau Infura. Prosesnya gratis dan ETH testnet tidak punya nilai finansial.

Berapa biaya gas deploy smart contract ke mainnet?

Biaya bervariasi tergantung ukuran kontrak dan kondisi jaringan. Deploy kontrak sederhana seperti ERC-20 token menghabiskan sekitar 1-3 juta gas. Pada gas price 20 Gwei, total biaya sekitar 0,02-0,06 ETH (sekitar Rp 500.000 - Rp 1.500.000 per Juli 2026).

Bisa untuk chain selain Ethereum?

Bisa. Versi terbaru mendukung multichain secara native. Konfigurasi bisa menargetkan Polygon, Arbitrum, Optimism, BNB Chain, atau chain EVM-compatible lainnya. Cukup tambahkan network config dengan RPC URL dan chain ID yang sesuai.

Penutup

Dunia Web3 menawarkan peluang besar bagi pengembang yang ingin membangun aplikasi tanpa otoritas terpusat. Kombinasi tool development ini memberikan fondasi yang solid untuk memulai perjalanan. Mulai dari kontrak sederhana, kuasai testing, lalu tingkatkan ke arsitektur yang lebih kompleks.

Jika tertarik mempelajari lebih lanjut tentang teknologi yang mendasari Web3, baca juga artikel tentang pola caching Redis untuk aplikasi scalable yang menjelaskan performa backend secara mendalam. Untuk pemahaman arsitektur microservices yang relevan dengan dApp backend, kunjungi panduan tentang Apache Kafka untuk microservices.

Image Attribution

• Photo by Shubham Dhage on Unsplash - Unsplash
• Photo by Kanchanara on Unsplash - Unsplash
• Photo by Mariia Shalabaieva on Unsplash - Unsplash
• Photo by Deng Xiang on Unsplash - Unsplash