Web3 & DApp Development Fundamentals · Pelajaran

Menghubungkan ke Provider

RPC dan dompet

Menghubungkan ke Provider adalah pelajaran Web3 & DApp Development Fundamentals gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web3 & DApp Development Fundamentals, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web3 & DApp Development Fundamentals mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Talking to a Blockchain

To interact with Ethereum from JavaScript you need a provider — an object that connects to a node and lets you read chain data and send transactions.

Libraries like ethers.js and web3.js wrap the JSON-RPC protocol nodes speak.

Providers vs Signers

Two key abstractions:

Provider — read-only connection to the chain (balances, blocks, view calls).
Signer — holds a private key and can sign and send transactions.

You read with a provider and write with a signer.

A JSON-RPC Provider

The most common provider connects to an RPC endpoint such as Infura, Alchemy, or a local node:

const { ethers } = require("ethers");
const provider = new ethers.JsonRpcProvider(
  "https://mainnet.example-rpc.io/KEY"
);

With it you can immediately query public chain data.

const { ethers } = require("ethers");
const provider = new ethers.JsonRpcProvider(
  "https://mainnet.example-rpc.io/KEY"
);

Reading Network Info

Once connected, query basic network state:

const network = await provider.getNetwork();
console.log(network.chainId);

const block = await provider.getBlockNumber();
console.log("Latest block:", block);

The chainId identifies which network you are on (1 = mainnet).

const network = await provider.getNetwork();
console.log(network.chainId);

const block = await provider.getBlockNumber();
console.log("Latest block:", block);

Checking a Balance

Get an account's ETH balance through the provider:

const balance = await provider.getBalance("0xAbc...");
console.log(ethers.formatEther(balance), "ETH");

The raw value is in wei (a BigInt); formatEther converts it to a human-readable ETH string.

const balance = await provider.getBalance("0xAbc...");
console.log(ethers.formatEther(balance), "ETH");

Browser Wallets

In a browser dApp, the wallet (like MetaMask) injects a provider at window.ethereum. Wrap it with a BrowserProvider:

const provider = new ethers.BrowserProvider(window.ethereum);
await provider.send("eth_requestAccounts", []);

The eth_requestAccounts call prompts the user to connect.

const provider = new ethers.BrowserProvider(window.ethereum);
await provider.send("eth_requestAccounts", []);

Getting a Signer

From a browser provider, obtain the connected account's signer:

const signer = await provider.getSigner();
console.log("Connected as:", await signer.getAddress());

This signer can now send transactions approved by the user in their wallet.

const signer = await provider.getSigner();
console.log("Connected as:", await signer.getAddress());

Wallet from a Private Key

On a backend you can create a signer from a private key. Connect it to a provider so it can broadcast:

const wallet = new ethers.Wallet(
  process.env.PRIVATE_KEY,
  provider
);

Never hardcode private keys — load them from environment variables.

const wallet = new ethers.Wallet(
  process.env.PRIVATE_KEY,
  provider
);

web3.js Comparison

web3.js is the older alternative. Its connection looks like:

const { Web3 } = require("web3");
const web3 = new Web3("https://mainnet.example-rpc.io/KEY");
const block = await web3.eth.getBlockNumber();

Concepts map closely, but ethers.js separates providers and signers more cleanly.

const { Web3 } = require("web3");
const web3 = new Web3("https://mainnet.example-rpc.io/KEY");
const block = await web3.eth.getBlockNumber();

Keeping Secrets Safe

RPC keys and private keys are sensitive:

Store them in .env, never in source control.
Use read-only providers in front-end code.
Private keys belong only on secure backends or in the user's own wallet.

Default and Fallback Providers

ethers can combine several backends for reliability. A fallback provider queries multiple endpoints and agrees on a result:

const provider = ethers.getDefaultProvider("mainnet", {
  alchemy: process.env.ALCHEMY_KEY,
  infura: process.env.INFURA_KEY,
});

If one backend is down, others keep your app working.

const provider = ethers.getDefaultProvider("mainnet", {
  alchemy: process.env.ALCHEMY_KEY,
  infura: process.env.INFURA_KEY,
});

Quick Check

Test your understanding of providers and signers.

Recap

You learned to connect to a blockchain.

A provider reads chain data; a signer sends transactions.
JsonRpcProvider connects to an RPC URL; BrowserProvider wraps wallet injections.
getSigner returns the connected account; new Wallet(key, provider) signs on a backend.
Values are in wei; use formatEther to display them.
Keep RPC and private keys in .env, never in code.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menghubungkan ke Provider” gratis?

Ya — teks lengkap “Menghubungkan ke Provider” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web3 & DApp Development Fundamentals, upgrade ke CoddyKit PRO. Kursus Web3 & DApp Development Fundamentals mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menghubungkan ke Provider”?

RPC dan dompet Kamu berlatih Web3 & DApp Development Fundamentals dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Web3 & DApp Development Fundamentals?

Tidak diperlukan pengalaman sebelumnya. Web3 & DApp Development Fundamentals di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Menghubungkan ke Provider” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Web3 & DApp Development Fundamentals ini?

Ya. Setiap pelajaran Web3 & DApp Development Fundamentals menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Web3 & DApp Development Fundamentals