Pengenalan Web3: Masa Depan Internet Terdesentralisasi & Cara Membuat Website dengan Integrasi Block

Membuat website dengan integrasi blockchain adalah langkah pertama menuju pembangunan aplikasi terdesentralisasi (dApps) dan eksplorasi dunia Web3. Ini memungkinkan website-mu berinteraksi langsung dengan blockchain, membaca data dari sana, atau bahkan memicu transaksi. Proses ini melibatkan penggunaan library JavaScript khusus untuk berkomunikasi dengan jaringan blockchain.

Mari kita selami cara membuat website sederhana dengan integrasi blockchain. Kita akan fokus pada contoh menggunakan Ethereum dan library ethers.js atau web3.js, yang merupakan pilihan populer dan powerful.

Baca Juga : Peran IPFS (InterPlanetary File System) dalam Web3

1. Memahami Konsep Dasar

Sebelum memulai, pahami beberapa konsep kunci:

Blockchain: Jaringan terdistribusi yang menyimpan data dalam blok yang saling terhubung dan diamankan secara kriptografis. Contoh: Ethereum, Binance Smart Chain, Polygon.
Smart Contract: Kode yang dieksekusi secara otomatis di blockchain. Ini adalah "logika" dari dApps-mu.
Node Blockchain: Komputer yang menyimpan salinan blockchain dan memvalidasi transaksi. Untuk berinteraksi dengan blockchain, website-mu perlu terhubung ke sebuah node.
Penyedia (Provider): Antarmuka yang memungkinkan website-mu terhubung ke node blockchain. Contoh: MetaMask, Infura, Alchemy.
Dompet Kripto (Wallet): Aplikasi (seperti MetaMask) yang menyimpan kunci pribadi pengguna dan memungkinkan mereka untuk menandatangani transaksi. Ini juga berfungsi sebagai provider di sisi client.
Library JavaScript (ethers.js/web3.js): Kumpulan fungsi yang mempermudah interaksi antara website (JavaScript) dan blockchain.

Baca Juga : 10 Library JavaScript Terbaik untuk Animasi

2. Persiapan Awal

A. Lingkungan Pengembangan

Kamu hanya membutuhkan editor teks (VS Code direkomendasikan), browser (Chrome dengan ekstensi MetaMask), dan Node.js yang terinstal untuk menjalankan perintah.

B. Siapkan Smart Contract (Opsional, tapi Direkomendasikan)

Untuk interaksi yang lebih menarik, kamu bisa mulai dengan membuat smart contract sederhana. Jika tidak, kamu bisa berinteraksi dengan smart contract yang sudah ada.

Contoh Smart Contract Sederhana (Solidity):

Misalnya, kontrak yang menyimpan pesan:

Solidity

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

contract SimpleMessage {
    string public message;

    event MessageUpdated(string oldMessage, string newMessage);

    constructor(string memory _initialMessage) {
        message = _initialMessage;
    }

    function updateMessage(string memory _newMessage) public {
        string memory oldMessage = message;
        message = _newMessage;
        emit MessageUpdated(oldMessage, newMessage);
    }

    function getMessage() public view returns (string memory) {
        return message;
    }
}

Deploy Kontrak: Deploy kontrak ini ke jaringan testnet Ethereum (misalnya Sepolia, Goerli) menggunakan tool seperti Remix IDE atau Hardhat/Truffle. Setelah deploy, catat alamat kontrak (contract address) dan ABI (Application Binary Interface)-nya. ABI adalah interface yang memberi tahu website bagaimana cara berinteraksi dengan fungsi-fungsi di smart contract.

C. Instal MetaMask

Pastikan kamu memiliki ekstensi MetaMask di browser-mu dan terhubung ke jaringan testnet yang sama dengan tempat smart contract-mu di-deploy (misalnya Sepolia Test Network). Isi dengan sedikit test Ether (ETH) dari faucet testnet.

3. Struktur Dasar Website (Frontend)

Buat folder proyek baru dan file-file dasar:

my-web3-app/
├── index.html
├── style.css
└── app.js

`index.html` (Struktur HTML Dasar)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web3 Saya</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Website Web3 Sederhana</h1>
        <button id="connectWallet">Hubungkan Dompet</button>
        <p id="walletAddress">Dompet Terhubung: Belum terhubung</p>

        <hr>

        <h2>Interaksi Kontrak</h2>
        <p>Pesan dari Kontrak: <span id="contractMessage">Memuat...</span></p>
        <input type="text" id="newMessage" placeholder="Pesan baru...">
        <button id="updateMessage">Perbarui Pesan</button>

        <p id="transactionStatus"></p>
    </div>

    <script src="https://cdn.ethers.io/lib/ethers-5.7.esm.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

`style.css` (CSS Sederhana)

CSS

body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}
.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 500px;
    width: 90%;
}
button {
    padding: 10px 20px;
    margin: 10px 5px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: 16px;
}
button:hover {
    background-color: #0056b3;
}
input[type="text"] {
    padding: 10px;
    margin: 10px 0;
    width: calc(100% - 22px);
    border: 1px solid #ccc;
    border-radius: 5px;
}
#walletAddress, #contractMessage, #transactionStatus {
    word-break: break-all;
    margin-top: 15px;
}

4. Logika Integrasi Blockchain (`app.js`)

Ini adalah bagian inti di mana kamu akan berinteraksi dengan blockchain.

JavaScript

// Konfigurasi Smart Contract Anda
const CONTRACT_ADDRESS = 'ALAMAT_CONTRACT_ANDA_DI_SINI'; // Ganti dengan alamat kontrak yang sudah Anda deploy
const CONTRACT_ABI = [
    // Tempelkan ABI JSON dari smart contract Anda di sini.
    // Contoh untuk SimpleMessage contract:
    {
        "inputs": [
            {
                "internalType": "string",
                "name": "_initialMessage",
                "type": "string"
            }
        ],
        "stateMutability": "nonpayable",
        "type": "constructor"
    },
    {
        "anonymous": false,
        "inputs": [
            {
                "indexed": false,
                "internalType": "string",
                "name": "oldMessage",
                "type": "string"
            },
            {
                "indexed": false,
                "internalType": "string",
                "name": "newMessage",
                "type": "string"
            }
        ],
        "name": "MessageUpdated",
        "type": "event"
    },
    {
        "inputs": [],
        "name": "getMessage",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "string",
                "name": "_newMessage",
                "type": "string"
            }
        ],
        "name": "updateMessage",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "message",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    }
];

// Elemen DOM
const connectWalletBtn = document.getElementById('connectWallet');
const walletAddressDisplay = document.getElementById('walletAddress');
const contractMessageDisplay = document.getElementById('contractMessage');
const newMessageInput = document.getElementById('newMessage');
const updateMessageBtn = document.getElementById('updateMessage');
const transactionStatusDisplay = document.getElementById('transactionStatus');

let provider; // Untuk membaca data dari blockchain
let signer;   // Untuk menandatangani transaksi (menulis ke blockchain)
let contract; // Instance smart contract

// --- Fungsi Utama ---

// Fungsi untuk menghubungkan dompet MetaMask
async function connectWallet() {
    if (typeof window.ethereum !== 'undefined') {
        try {
            // Minta akses ke akun pengguna
            const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
            const userAddress = accounts[0];
            walletAddressDisplay.textContent = `Dompet Terhubung: ${userAddress}`;

            // Inisialisasi Ethers.js provider dan signer
            provider = new ethers.providers.Web3Provider(window.ethereum);
            signer = provider.getSigner();

            // Inisialisasi instance kontrak
            contract = new ethers.Contract(CONTRACT_ADDRESS, CONTRACT_ABI, signer);

            console.log('Dompet terhubung:', userAddress);
            console.log('Contract instance:', contract);

            // Muat pesan awal dari kontrak
            await getContractMessage();

            // Tambahkan event listener untuk perubahan akun/jaringan MetaMask
            window.ethereum.on('accountsChanged', handleAccountsChanged);
            window.ethereum.on('chainChanged', handleChainChanged);

        } catch (error) {
            console.error('Error saat menghubungkan dompet:', error);
            walletAddressDisplay.textContent = 'Dompet Terhubung: Gagal terhubung';
            transactionStatusDisplay.textContent = `Error: ${error.message}`;
        }
    } else {
        alert('MetaMask tidak terdeteksi! Silakan instal MetaMask untuk menggunakan fitur ini.');
    }
}

// Fungsi untuk mendapatkan pesan dari smart contract (read-only)
async function getContractMessage() {
    if (contract) {
        try {
            const message = await contract.getMessage();
            contractMessageDisplay.textContent = message;
            console.log('Pesan dari kontrak:', message);
        } catch (error) {
            console.error('Error saat membaca pesan kontrak:', error);
            contractMessageDisplay.textContent = 'Gagal memuat pesan.';
        }
    } else {
        contractMessageDisplay.textContent = 'Hubungkan dompet untuk memuat pesan.';
    }
}

// Fungsi untuk memperbarui pesan di smart contract (write transaction)
async function updateContractMessage() {
    if (!signer) {
        alert('Silakan hubungkan dompet terlebih dahulu.');
        return;
    }
    const newMessage = newMessageInput.value;
    if (!newMessage) {
        alert('Silakan masukkan pesan baru.');
        return;
    }

    transactionStatusDisplay.textContent = 'Mengirim transaksi... Tunggu konfirmasi di MetaMask.';
    try {
        // Panggil fungsi updateMessage di smart contract
        const tx = await contract.updateMessage(newMessage);
        console.log('Transaksi dikirim:', tx.hash);
        transactionStatusDisplay.textContent = `Transaksi dikirim! Hash: ${tx.hash}. Menunggu konfirmasi...`;

        // Tunggu hingga transaksi dikonfirmasi di blockchain
        await tx.wait();
        console.log('Transaksi berhasil dikonfirmasi!');
        transactionStatusDisplay.textContent = `Transaksi berhasil dikonfirmasi! Pesan baru: ${newMessage}`;

        // Muat ulang pesan dari kontrak
        await getContractMessage();
        newMessageInput.value = ''; // Kosongkan input
    } catch (error) {
        console.error('Error saat memperbarui pesan:', error);
        transactionStatusDisplay.textContent = `Transaksi gagal: ${error.message}`;
    }
}

// --- Event Handlers untuk MetaMask ---

function handleAccountsChanged(accounts) {
    if (accounts.length === 0) {
        console.log('MetaMask terputus.');
        walletAddressDisplay.textContent = 'Dompet Terhubung: Belum terhubung';
        provider = null;
        signer = null;
        contract = null;
        contractMessageDisplay.textContent = 'Hubungkan dompet untuk memuat pesan.';
    } else {
        const userAddress = accounts[0];
        walletAddressDisplay.textContent = `Dompet Terhubung: ${userAddress}`;
        signer = provider.getSigner(userAddress); // Perbarui signer
        contract = new ethers.Contract(CONTRACT_ADDRESS, CONTRACT_ABI, signer); // Perbarui kontrak dengan signer baru
        getContractMessage(); // Muat ulang pesan
    }
}

function handleChainChanged(chainId) {
    // Refresh halaman atau tangani secara spesifik jika network berubah
    console.log('Jaringan berubah ke:', chainId);
    // Disarankan untuk memuat ulang halaman agar dApp terhubung ke jaringan yang benar
    window.location.reload();
}


// --- Event Listeners DOM ---

connectWalletBtn.addEventListener('click', connectWallet);
updateMessageBtn.addEventListener('click', updateContractMessage);

// Panggil getContractMessage saat halaman dimuat (jika ada provider pasif seperti Infura/Alchemy)
// Namun, untuk interaksi full dengan MetaMask, lebih baik dipanggil setelah connectWallet
// Untuk demo ini, kita biarkan hanya dipanggil setelah connectWallet

5. Menjalankan Website-mu

Simpan semua file (index.html, style.css, app.js) di folder my-web3-app.
Ganti ALAMAT_CONTRACT_ANDA_DI_SINI dengan alamat smart contract-mu yang sebenarnya.
Tempelkan seluruh ABI smart contract-mu di array CONTRACT_ABI.
Buka file index.html di browser Chrome (atau browser lain yang mendukung MetaMask).

Baca Juga : Bagaimana Blockchain Mengubah Industri Finansial

Cara Kerja Integrasi Blockchain Sederhana Ini:

Hubungkan Dompet: Tombol "Hubungkan Dompet" akan memicu permintaan ke MetaMask untuk mengizinkan website mengakses akun Ethereum pengguna.
Baca Data dari Blockchain: Setelah dompet terhubung, PWA menggunakan ethers.js (provider) untuk memanggil fungsi getMessage() dari smart contract. Karena ini adalah operasi "read" (view function), tidak ada biaya transaksi (gas) yang dikenakan, dan tidak perlu persetujuan MetaMask.
Tulis Data ke Blockchain (Transaksi): Saat tombol "Perbarui Pesan" diklik, PWA menggunakan ethers.js (signer) untuk memanggil fungsi updateMessage() dari smart contract. Ini adalah operasi "write" (nonpayable function), yang membutuhkan:
- Biaya Gas: Pengguna harus membayar biaya transaksi (dalam ETH) kepada penambang/validator.
- Konfirmasi MetaMask: MetaMask akan muncul untuk meminta pengguna mengonfirmasi dan menandatangani transaksi.
- Penantian Konfirmasi: Setelah transaksi dikirim, PWA akan menunggu konfirmasi di blockchain sebelum memperbarui tampilan.

Tips dan Langkah Selanjutnya:

Penyedia RPC: Untuk aplikasi produksi atau untuk membaca data tanpa interaksi dompet, kamu bisa menggunakan penyedia RPC (Remote Procedure Call) seperti Infura atau Alchemy. Mereka menyediakan node blockchain yang dapat diakses secara public atau dengan kunci API.
JavaScript
```
// Contoh provider Infura tanpa signer (hanya baca)
// const provider = new ethers.providers.InfuraProvider("sepolia", "INFURA_PROJECT_ID_ANDA");
```
Keamanan: Selalu berhati-hati saat menangani kunci pribadi. Jangan pernah menyimpan kunci pribadi di kode frontend. Pengguna harus selalu berinteraksi melalui dompet mereka (MetaMask).
Error Handling: Implementasikan error handling yang lebih robust untuk menangani skenario seperti pengguna menolak transaksi, jaringan sibuk, dll.
Dengarkan Event Contract: Untuk pengalaman real-time, kamu bisa membuat website-mu "mendengarkan" event yang dipancarkan oleh smart contract (seperti MessageUpdated dalam contoh). Ini akan secara otomatis memperbarui UI saat ada perubahan di blockchain tanpa perlu refresh.
State Management: Untuk aplikasi yang lebih kompleks, pertimbangkan menggunakan framework seperti React/Vue/Angular dengan state management library untuk mengelola data blockchain.
Testing: Selalu uji smart contract dan integrasi frontend-mu secara menyeluruh di jaringan testnet sebelum deploy ke mainnet.

Membuat website dengan integrasi blockchain membuka pintu ke berbagai kemungkinan menarik di Web3. Mulailah dari yang sederhana, pahami setiap langkah, dan teruslah bereksplorasi!