Bagian 1: Pengenalan Blockchain Indexer
๐ฏ Tujuan Bagian Iniโ
Setelah menyelesaikan bagian ini, Anda akan:
- โ Memahami apa itu blockchain indexer dan use case-nya
- โ Mengerti masalah tanpa indexer (dengan cerita menarik!)
- โ Tau kenapa aplikasi Web3 populer WAJIB pakai indexer
- โ Mengenal framework Ponder dan keunggulannya
- โ Siap untuk mulai membangun indexer sendiri
๐ Cerita: Bayangkan Anda Seorang Detektifโ
๐ Kasus: "Analitik DEX yang Lambat"โ
Skenario:
Bos Anda bilang: "Buat dashboard analytics untuk SimpleDEX! Tampilkan volume 24h, total swaps, dan history semua swap dalam 6 bulan terakhir!"
โ CARA 1: Tanpa Indexer (Query Langsung ke Blockchain)โ
// Anda harus melakukan ini:
// Langkah 1: Dapatkan nomor block 6 bulan lalu
const currentBlock = await provider.getBlockNumber(); // Block 1,000,000
const blocksIn6Months = 6 * 30 * 24 * 60 * 5; // ~1,296,000 blocks
const startBlock = currentBlock - blocksIn6Months; // Block 0
// Langkah 2: Loop SETIAP block untuk cari Swap events (1 juta+ blocks!) ๐ฑ
const swaps = [];
for (let i = startBlock; i <= currentBlock; i++) {
// Query Swap events dari setiap block
const logs = await dexContract.queryFilter('Swap', i, i);
swaps.push(...logs);
// Juga perlu query reserves untuk hitung price & TVL
const reserves = await dexContract.getReserves(); // RPC call lagi!
// Kena rate limit RPC? Tunggu dulu...
await sleep(100); // Perlambat untuk hindari rate limit
}
// Langkah 3: Hitung volume 24h (scan lagi!)
const oneDayAgo = currentBlock - (24 * 60 * 5); // 24 jam = ~7200 blocks
let volume24h = 0;
for (let i = oneDayAgo; i <= currentBlock; i++) {
const logs = await dexContract.queryFilter('Swap', i, i);
logs.forEach(log => {
volume24h += parseFloat(log.args.amountBOut || log.args.amountBIn);
});
}
console.log(`Ditemukan ${swaps.length} swaps!`);
console.log(`Volume 24h: ${volume24h} USDC`);
Hasil:
โฑ๏ธ Waktu: 36 JAM (1 juta blocks ร 0.13 detik/block)
๐ธ Biaya: ~$500 kredit RPC (atau kena ban karena rate limit)
๐ญ Status: Timeout, error, frustrasi!
๐ฅ Laptop: Panas kayak kompor
Quote Developer:
"Ini gila! Gak mungkin aplikasi production pakai cara ini. Users bakal kabur duluan sebelum data load!" - Setiap Web3 Developer
โ CARA 2: Dengan Indexer (Menggunakan Ponder)โ
// Ponder sudah index semua data DEX di background!
// Anda tinggal query database:
// Query 1: Pool Statistics (instant!)
const { poolState } = await client.query({
query: gql`
query GetPoolStats {
poolState(id: "POOL") {
tvl
totalSwaps
totalVolume
volume24h
price
}
}
`
});
// Query 2: Recent Swaps (instant!)
const { swapEvents } = await client.query({
query: gql`
query GetRecentSwaps {
swapEvents(
orderBy: "timestamp"
orderDirection: "desc"
limit: 100
) {
items {
user
amountAIn
amountBOut
priceImpact
timestamp
}
totalCount
}
}
`
});
console.log(`TVL: $${poolState.tvl} USDC`);
console.log(`Volume 24h: $${poolState.volume24h} USDC`);
console.log(`Total Swaps: ${poolState.totalSwaps}`);
console.log(`Recent Swaps: ${swapEvents.totalCount}`);
Hasil:
โฑ๏ธ Waktu: 50 MILIDETIK! โก
๐ธ Biaya: $0 (query ke database lokal/cloud)
๐ Status: Lancar & instant
โจ Users: Senang & terkesan!
Quote Developer:
"WOW! Ini seperti sulap! Data langsung muncul tanpa loading!" - Anda, setelah pakai Ponder
๐ค Apa Itu Blockchain Indexer?โ
Definisi Sederhana:โ
Blockchain Indexer adalah sistem yang:
- Listen ke blockchain 24/7 untuk event baru
- Transform raw blockchain data menjadi format yang mudah di-query
- Store data tersebut di database (biasanya Postgres)
- Serve data via API (GraphQL/REST) untuk aplikasi Anda
Analogi: Google untuk Blockchainโ
| Konsep | Tanpa Indexer | Dengan Indexer |
|---|---|---|
| Mencari Web | Buka setiap website satu-satu | Ketik di Google โ hasil instant |
| Cari Buku | Cek setiap rak perpustakaan | Cari di katalog digital |
| Belanja | Ke setiap toko fisik | Buka Tokopedia/Shopee |
| Data Blockchain | Query setiap block satu-satu ๐ | Query indexer โ instant! โก |
Indexer = Google-nya Data Blockchain!
๐ก Masalah Tanpa Indexer: 5 Pain Pointsโ
1. โฐ LAMBAT BANGET!โ
Contoh Kasus Real:
Tugas: Tampilkan top 100 pemegang token
Tanpa Indexer:
- Scan SEMUA event Transfer (bisa jutaan+)
- Kalkulasi balance satu-satu
- Sort berdasarkan balance
โฑ๏ธ Waktu: 10-30 MENIT (atau timeout!)
Dengan Indexer:
- Query database: "SELECT * FROM accounts ORDER BY balance DESC LIMIT 100"
โฑ๏ธ Waktu: 10 MILIDETIK!
2. ๐ธ MAHAL!โ
Breakdown Biaya RPC:
Alchemy Free Tier: 300 juta compute units/bulan
1 panggilan getLogs: ~250 compute units
Cari data 6 bulan tanpa indexer:
- 1 juta blocks ร 250 CU = 250 JUTA CU
- Gratis tier? Habis dalam 1 hari!
- Paket berbayar: $199/bulan untuk 600 juta CU
- 1 query = $80+! ๐ฑ
Dengan Indexer:
- Setup: 1 kali index (pakai tier gratis)
- Query: UNLIMITED, GRATIS! ๐
3. ๐ซ TIDAK SCALABLEโ
Skenario:
Aplikasi Anda punya 1000 user bersamaan:
Tanpa Indexer:
- 1000 users ร 1000 panggilan RPC masing-masing
- = 1 JUTA panggilan RPC
- Hasil: Rate limited, app down! โ
Dengan Indexer:
- 1000 users ร query ke database ANDA
- Database handle ribuan query/detik
- Hasil: App berjalan lancar! โ
4. ๐ต KOMPLEKS & RAWAN ERRORโ
Kompleksitas Kode:
// Tanpa Indexer: Anda harus handle SEMUANYA
- Reorganisasi block (chain reorg)
- Missing data / request gagal
- Rate limiting & backoff
- Pagination & manajemen memori
- Konsistensi data
- Optimasi fetching paralel
= 500+ baris kode yang rawan error ๐
// Dengan Indexer (Ponder): Framework handle semuanya!
ponder.on("Token:Transfer", async ({ event, context }) => {
// Cukup handle logika bisnis
await context.db.insert(transfers).values({
from: event.args.from,
to: event.args.to,
amount: event.args.value,
});
});
= Clean, simple, maintainable! ๐
5. ๐ DATA TIDAK TERSTRUKTURโ
Data Blockchain Mentah:
// Event: Transfer
event Transfer(address indexed from, address indexed to, uint256 value);
// Di blockchain tersimpan sebagai:
{
topics: [
"0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef",
"0x000000000000000000000000a1b2c3...", // from
"0x000000000000000000000000d4e5f6...", // to
],
data: "0x000000000000000000000000000000000000000000000000000000003b9aca00" // value
}
// ๐ต Sulit dibaca & tidak ada konteks!
Dengan Indexer (Data Terstruktur):
// Data tersimpan di database dengan schema jelas:
{
id: "transfer-123",
from: "0xa1b2c3...",
to: "0xd4e5f6...",
amount: "1000000000", // 1 USDC
amountFormatted: "1.00", // Mudah dibaca manusia
timestamp: "2025-01-15T10:30:00Z",
blockNumber: 1234567,
transactionHash: "0xabc123...",
token: {
name: "USD Coin",
symbol: "USDC",
decimals: 6
}
}
// โจ Terstruktur, mudah dibaca, siap ditampilkan!
๐ Use Cases Real di Industriโ
1. Analitik Uniswap ๐โ
Tanpa Indexer:
- Mustahil track semua swap, liquidity, volume real-time
- Data terlalu banyak (ribuan swap per menit)
- Query reserves untuk setiap request = lambat & mahal
Dengan Indexer (Subgraph Uniswap v3):
- Track SEMUA pool, swap, position real-time
- Kalkulasi TVL, volume, fees otomatis
- Dukung dashboard seperti info.uniswap.org
- Ini yang akan kita bangun untuk SimpleDEX!
Tech: The Graph (pendahulu Ponder) โ Kita pakai Ponder untuk SimpleDEX!
2. Marketplace NFT OpenSea ๐ผ๏ธโ
Tanpa Indexer:
- Load setiap metadata NFT satu-satu? Impossible!
- Pencarian & filter? Nightmare!
Dengan Indexer:
- Index semua NFT listings, bids, sales
- Pencarian cepat berdasarkan koleksi, traits, harga
- Sort berdasarkan rarity, floor price, volume
Impact: UX yang lancar, users senang, penjualan meningkat!
3. Protokol Lending Aave ๐ฐโ
Use Case:
- Track deposit, borrow, liquidasi user
- Kalkulasi health factor real-time
- Notifikasi user sebelum liquidation
Dengan Indexer:
query UserPositions($user: String!) {
deposits: deposits(where: { user: $user }) {
asset
amount
apy
}
borrows: borrows(where: { user: $user }) {
asset
amount
healthFactor # <-- CRITICAL!
}
}
Hasil: Users bisa monitoring posisi & hindari liquidation!
4. Explorer Domain ENS ๐โ
Tantangan:
- Track semua registrasi domain .eth
- Monitor expiration & renewal
- Pencarian berdasarkan domain atau owner
Solusi (dengan Indexer):
- Index event
NameRegistered,NameRenewed,Transfer - Simpan data terstruktur: domain, owner, expiry, price
- Dukung UI seperti ens.domains
๐ Kenapa Ponder? (vs The Graph & Alternatif Lain)โ
Perbandingan Lengkap:โ
Ponder ๐โ
Kelebihan:
- โก 10x lebih cepat dari The Graph (benchmark terbukti!)
- ๐ฅ Hot reload - Feedback instant saat development
- ๐ป Full TypeScript - Type-safe dari ujung ke ujung
- ๐๏ธ Akses Postgres langsung - Fleksibilitas query maksimal
- ๐ Self-hosted - Tanpa vendor lock-in, deploy dimana saja
- ๐ฆ Database lebih kecil - 35x lebih kecil dibanding The Graph!
- ๐ Gratis - Tanpa biaya hosting
Kekurangan:
- ๐ Lebih baru (tapi didukung tim yang kuat)
- ๐ Komunitas lebih kecil (tapi bertumbuh cepat!)
Cocok Untuk:
- Aplikasi dApp production yang butuh performa
- Proyek yang butuh kustomisasi
- Developer yang familiar TypeScript
- Infrastruktur self-hosted
The Graph ๐โ
Kelebihan:
- ๐ Standar industri (digunakan Uniswap, Aave, dll)
- ๐ Network terdesentralisasi (hosted service + network)
- ๐ Ekosistem matang & komunitas besar
- ๐ Dokumentasi ekstensif
Kekurangan:
- ๐ Sync lebih lambat (6 menit vs 37 detik untuk ERC-20)
- ๐๏ธ Database bloat (1.1 GB vs 31 MB untuk ERC-20)
- ๐ฐ Biaya hosting ($$$)
- ๐ง Tanpa hot reload (harus deploy untuk test)
- ๐ Kurang type-safe (butuh codegen)
Cocok Untuk:
- Proyek yang butuh desentralisasi
- Prototype cepat (hosted service)
- Mengikuti standar industri
Indexer Custom (DIY) ๐ ๏ธโ
Kelebihan:
- ๐จ Fleksibilitas ultimate
- ๐ง Kontrol penuh
Kekurangan:
- โฐ Waktu development: Minggu/bulan
- ๐ Banyak edge case yang harus di-handle
- ๐ฐ Biaya maintenance tinggi
- ๐ฅ Ciptakan ulang roda
Cocok Untuk:
- Requirements unik yang framework lain tidak support
- Tim dengan resources & expertise
Matrix Keputusan:โ
| Kebutuhan | Ponder | The Graph | Custom |
|---|---|---|---|
| Waktu sync cepat | โ โ โ | โ ๏ธ | ๐คท |
| Biaya rendah | โ | โ | โ ๏ธ |
| Type safety | โ | โ ๏ธ | ๐คท |
| Development cepat | โ | โ | โ |
| Terdesentralisasi | โ | โ | โ |
| Kustomisasi | โ | โ ๏ธ | โ |
| Development aktif | โ | โ | ๐คท |
Rekomendasi untuk Workshop:
โ
Ponder - Sempurna untuk belajar, development cepat, dan production-ready!
๐๏ธ Arsitektur Ponder: Cara Kerjanyaโ
Arsitektur High-Level:โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ BLOCKCHAIN (Lisk Sepolia) โ
โ Smart Contracts โ Events โ Data Transaksi โ
โโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โ Koneksi RPC
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ FRAMEWORK PONDER โ
โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ 1. SYNC ENGINE (Pendengar Event) โ โ
โ โ - Dengarkan blockchain 24/7 โ โ
โ โ - Fetch logs & transaksi โ โ
โ โ - Handle reorgs & finality โ โ
โ โโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ โ
โ โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ 2. FUNGSI INDEXING (Kode Anda!) โ โ
โ โ - ponder.on("Event", handler) โ โ
โ โ - Transform data blockchain โ โ
โ โ - Logika bisnis โ โ
โ โโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ โ
โ โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ 3. LAYER DATABASE (Postgres) โ โ
โ โ - Simpan data ter-index โ โ
โ โ - Migrasi otomatis โ โ
โ โ - Query yang dioptimasi โ โ
โ โโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ โ
โโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ 4. API SERVER (Auto-Generated) โ
โ - GraphQL API (port default: 42069) โ
โ - SQL over HTTP (opsional) โ
โ - Custom API routes (opsional) โ
โโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โ HTTP/GraphQL
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ FRONTEND (Next.js / React) โ
โ Query data โ Tampilkan ke users โ ๐ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Alur Data Contoh (Event Transfer):โ
1. USER TRANSFER TOKEN
โ Transaksi di Lisk Sepolia
2. PONDER DETEKSI EVENT
โ Sync engine tangkap event Transfer
3. KODE ANDA PROSES
ponder.on("Token:Transfer", async ({ event, context }) => {
// Update balance pengirim
await context.db.update(accounts)
.set({ balance: balance - amount })
.where({ address: event.args.from });
// Update balance penerima
await context.db.update(accounts)
.set({ balance: balance + amount })
.where({ address: event.args.to });
// Simpan record transfer
await context.db.insert(transfers).values({
from: event.args.from,
to: event.args.to,
amount: event.args.value,
timestamp: event.block.timestamp,
});
});
4. DATA TERSIMPAN DI POSTGRES
โ Tersedia langsung via GraphQL!
5. FRONTEND QUERY DATA
โ User lihat balance ter-update instant! โจ
๐ Konsep Kunci di Ponderโ
1. Konfigurasi Contracts (ponder.config.ts)โ
Definisikan smart contract yang mau di-index:
import { createConfig } from "ponder";
import { http } from "viem";
import { ERC20Abi } from "./abis/ERC20Abi";
export default createConfig({
// Definisikan network blockchain
chains: {
mainnet: {
id: 1,
rpc: http(process.env.PONDER_RPC_URL_1),
},
},
// Definisikan contracts yang akan di-index
contracts: {
Token: {
chain: "mainnet",
address: process.env.USDC_TOKEN_ADDRESS as `0x${string}`,
abi: ERC20Abi,
startBlock: 13142655,
},
},
});
2. Schema (ponder.schema.ts)โ
Definisikan struktur data:
import { onchainTable } from "ponder";
export const accounts = onchainTable("accounts", (t) => ({
address: t.hex().primaryKey(),
balance: t.bigint().notNull(),
transactionCount: t.integer().notNull().default(0),
}));
export const transfers = onchainTable("transfers", (t) => ({
id: t.text().primaryKey(),
from: t.hex().notNull(),
to: t.hex().notNull(),
amount: t.bigint().notNull(),
timestamp: t.integer().notNull(),
blockNumber: t.integer().notNull(),
}));
3. Fungsi Indexing (src/index.ts)โ
Transform event menjadi data:
import { ponder } from "ponder:registry";
import { accounts, transfers } from "ponder:schema";
ponder.on("MyToken:Transfer", async ({ event, context }) => {
// Logika bisnis Anda di sini!
// context.db = Akses database
// event = Data event blockchain
});
4. GraphQL API (Ter-generate otomatis!)โ
Query data yang sudah di-index:
query {
accounts(orderBy: "balance", orderDirection: "desc", limit: 10) {
items {
address
balance
transactionCount
}
}
}
๐ช Kenapa Harus Belajar Indexer?โ
1. Skill yang Dicari Industri ๐ผโ
Lowongan Kerja di Web3:
- "Pengalaman dengan The Graph atau solusi indexing sejenis"
- "Pengetahuan infrastruktur data blockchain"
- "Familiar dengan GraphQL API untuk data blockchain"
โ Skill indexer = Keunggulan kompetitif! ๐
2. Bangun dApps Lebih Baik ๐๏ธโ
Tanpa Indexer:
- Loading lambat
- UX buruk
- Users frustrasi
โ App gagal โ
Dengan Indexer:
- Data instant
- UX lancar
- Users senang
โ App sukses! โ
3. Peluang Karir ๐โ
Peran yang butuh pengetahuan indexer:
- Full-stack Web3 Developer
- Blockchain Data Engineer
- Developer dApp
- Protocol Developer
- Web3 Infrastructure Engineer
Range gaji: $80k - $200k+ ๐ฐ
4. Skill Future-Proof ๐ฎโ
Pertumbuhan Web3 โ Lebih banyak dApps โ Lebih banyak data โ Lebih banyak indexers!
Market cap The Graph: $2.6 miliar
Ponder: Leader yang sedang berkembang
โ Peluang besar! ๐
๐ฏ Kuis: Test Pemahaman Anda!โ
Pertanyaan 1:โ
Apa masalah UTAMA tanpa menggunakan indexer?
A) Blockchain tidak bisa diakses
B) Smart contract tidak bisa di-deploy
C) Query data lambat dan mahal ๐ก
D) Tidak bisa membuat frontend
Lihat Jawaban
Jawaban: C
Tanpa indexer, setiap query harus scan blockchain secara langsung yang sangat lambat (bisa menit/jam) dan mahal (biaya RPC). Indexer mengatasi ini dengan pre-processing data dan menyimpan ke database yang cepat di-query!
Pertanyaan 2:โ
Kenapa Ponder lebih cepat dari The Graph?
A) Ponder pakai bahasa pemrograman yang lebih cepat
B) Arsitektur lebih efisien & database lebih kecil ๐ก
C) Ponder tidak index semua data
D) The Graph sengaja dibuat lambat
Lihat Jawaban
Jawaban: B
Arsitektur Ponder lebih modern dan efisien. Database footprint 35x lebih kecil (31 MB vs 1.1 GB) dan waktu sync 10x lebih cepat (37s vs 5m 28s) untuk contract ERC-20 yang sama!
Pertanyaan 3:โ
Aplikasi Web3 mana yang WAJIB pakai indexer?
A) UI transfer token sederhana
B) DEX dengan trading charts & analytics ๐ก
C) Website faucet
D) Generator wallet
Lihat Jawaban
Jawaban: B
DEX dengan analytics (seperti Uniswap) butuh track ribuan swap, kalkulasi volume, TVL, dan price charts real-time. Mustahil tanpa indexer! Opsi lain bisa bekerja tanpa indexer karena kebutuhan data lebih sederhana.
โ Checklist: Apakah Anda Siap Lanjut?โ
Sebelum lanjut ke Bagian 2, pastikan Anda sudah:
- Memahami masalah tanpa indexer (lambat, mahal, tidak scalable)
- Tau apa itu blockchain indexer (sistem yang listen, transform, store, serve data)
- Memahami use cases indexer (Uniswap, OpenSea, Aave, dll)
- Tau kenapa Ponder (10x lebih cepat, type-safe, gratis, self-hosted)
- Memahami arsitektur Ponder (sync engine โ kode Anda โ database โ API)
- Excited untuk membangun! ๐
Jika semua sudah โ , mari lanjut setup Ponder!
๐ Langkah Selanjutnyaโ
Sekarang Anda sudah paham KENAPA indexer itu penting dan BAGAIMANA Ponder bekerja.
Selanjutnya, kita akan:
- Install framework Ponder
- Setup environment pengembangan
- Konfigurasi network Lisk Sepolia
- Buat proyek pertama Anda!
๐ Bagian 2: Setup & Konfigurasi Ponder โ
๐ Sumber Daya Tambahanโ
Untuk Dibaca:
- Dokumentasi Resmi Ponder - Panduan memulai
- Kenapa Ponder? - Filosofi & perbandingan
- Benchmark Ponder - Bukti performa
- The Graph untuk Perbandingan - Standar industri
Video (Opsional):
- Cari di YouTube: "Ponder blockchain indexer tutorial"
- Lihat: Talks ETHGlobal tentang indexing
Komunitas:
- Telegram Ponder - Komunitas aktif
- GitHub Discussions - Tanya jawab
Sampai jumpa di Bagian 2! Selamat belajar! ๐