Asas Pembangunan Web3 & DApp · Pelajaran

Menyambung kepada Ethereum (Web3.js/Ethers.js)

Pelajari cara menggunakan pustaka JavaScript seperti Web3.js atau Ethers.js untuk mewujudkan sambungan antara bahagian hadapan web dan rangkaian Ethereum.

Pelajaran 2 daripada 311 langkah

Menyambung kepada Ethereum (Web3.js/Ethers.js) ialah pelajaran Asas Pembangunan Web3 & DApp percuma di CoddyKit. Ini ialah pelajaran 2 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Asas Pembangunan Web3 & DApp, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Asas Pembangunan Web3 & DApp merangkumi sejumlah 3 pelajaran.

Sambungan Aplikasi Terdesentralisasi dengan Ethereum

Selamat datang ke pelajaran tentang penyambungan bahagian hadapan aplikasi terdesentralisasi anda kepada rangkaian Ethereum! Seperti aplikasi tradisional yang perlu berkomunikasi dengan pelayan, aplikasi terdesentralisasi perlu mempunyai cara untuk berkomunikasi dengan rantaian blok.

Komunikasi ini membolehkan aplikasi terdesentralisasi anda membaca data daripada rantaian blok, seperti baki akaun, dan menghantar transaksi, seperti memindahkan token atau memanggil fungsi kontrak pintar.

Pustaka Web3.js dan Ethers.js

Untuk merapatkan jurang antara bahagian hadapan web anda yang ditulis dalam JavaScript dengan rantaian blok Ethereum, kita menggunakan pustaka khusus.

  • Web3.js: Pustaka JavaScript asal untuk berinteraksi dengan Ethereum. Pustaka ini digunakan secara meluas dan teguh.
  • Ethers.js: Alternatif yang lebih moden, ringan dan sering menjadi pilihan, khususnya untuk pembangunan bahagian hadapan, serta terkenal dengan API yang jelas.

Kedua-dua pustaka mempunyai tujuan utama yang sama: memudahkan penghantaran dan penerimaan data daripada Ethereum.

Memahami Penyedia Ethereum

Sebelum aplikasi terdesentralisasi anda boleh berkomunikasi dengan rantaian blok, aplikasi itu memerlukan penyedia. Penyedia ialah lapisan abstraksi yang menyambungkan aplikasi terdesentralisasi anda kepada nod Ethereum.

  • Dompet pelayar (contohnya, MetaMask): Dompet ini menyuntik objek penyedia (window.ethereum) terus ke dalam persekitaran JavaScript pelayar anda.
  • Penyedia nod (contohnya, Infura, Alchemy): Ini ialah perkhidmatan yang menjalankan nod Ethereum dan menyediakan titik akhir API (URL) untuk disambungkan kepada aplikasi terdesentralisasi anda, biasanya bagi akses baca sahaja atau apabila pengguna tidak mempunyai dompet pelayar.

Penyedia mengendalikan komunikasi rangkaian peringkat rendah.

Persediaan dengan npm

Untuk menggunakan Web3.js atau Ethers.js dalam projek anda, biasanya anda memasangnya menggunakan pengurus pakej seperti npm (Pengurus Pakej Node).

Mula-mula, pastikan Node.js dan npm telah dipasang. Kemudian, dalam direktori projek anda, buka terminal dan jalankan salah satu arahan berikut:

  • Untuk Web3.js: npm install web3
  • Untuk Ethers.js: npm install ethers

Selepas dipasang, anda boleh mengimportnya ke dalam fail JavaScript anda.

Menyambung melalui MetaMask (Web3.js)

Apabila pengguna memasang MetaMask, MetaMask menyuntik window.ethereum. Anda boleh menggunakan objek ini untuk mencipta tika Web3.js dan meminta kebenaran pengguna untuk menyambungkan dompet mereka.

Berikut ialah cara anda biasanya memulakan Web3.js:

async function connectWeb3() {
  if (window.ethereum) {
    const web3 = new Web3(window.ethereum);
    try {
      // Request account access if needed
      await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log('Web3.js connected!');
      return web3;
    } catch (error) {
      console.error('User denied account access or error:', error);
    }
  } else {
    console.log('MetaMask not detected! Install it or use a different provider.');
  }
  return null;
}

// To run this in a browser, you'd call connectWeb3()
// For this runnable example, we'll simulate the connection.
async function main() {
  console.log('Simulating Web3.js connection...');
  const web3Instance = await connectWeb3(); // This would be called in a browser
  if (!web3Instance) {
    console.log('Failed to connect Web3.js (simulated).');
  } else {
    console.log('Web3.js connection successful (simulated)!');
  }
}

main();

Menyambung melalui MetaMask (Ethers.js)

Ethers.js juga menggunakan window.ethereum untuk menyambung kepada dompet pelayar. Ethers.js menggunakan konsep Web3Provider untuk membalut penyedia yang disuntik.

Pendekatan ini menyediakan cara yang kemas untuk berinteraksi dengan dompet pengguna dan rangkaian.

const { ethers } = require('ethers'); // In browser, ethers is global

async function connectEthers() {
  if (window.ethereum) {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    try {
      // Request account access
      await provider.send('eth_requestAccounts', []);
      console.log('Ethers.js connected!');
      return provider;
    } catch (error) {
      console.error('User denied account access or error:', error);
    }
  } else {
    console.log('MetaMask not detected! Install it or use a different provider.');
  }
  return null;
}

// To run this in a browser, you'd call connectEthers()
// For this runnable example, we'll simulate the connection.
async function main() {
  console.log('Simulating Ethers.js connection...');
  const ethersProvider = await connectEthers(); // This would be called in a browser
  if (!ethersProvider) {
    console.log('Failed to connect Ethers.js (simulated).');
  } else {
    console.log('Ethers.js connection successful (simulated)!');
  }
}

main();

Membaca Data: Mendapatkan Nombor Blok

Selepas disambungkan, anda boleh membaca maklumat daripada rantaian blok dengan mudah. Langkah pertama yang biasa dilakukan ialah mendapatkan nombor blok semasa. Ini ialah operasi baca sahaja, yang bermaksud operasi ini tidak memerlukan transaksi atau gas.

Kedua-dua Web3.js dan Ethers.js menyediakan kaedah yang mudah untuk melakukannya.

Mendapatkan Nombor Blok (Contoh Web3.js)

Berikut ialah cara mendapatkan nombor blok terkini menggunakan Web3.js selepas sambungan diwujudkan:

// This simulates interaction with a Web3 provider.
// In a real DApp, 'web3' would be an instance connected
// to MetaMask or another Ethereum node.

const web3 = {
  eth: {
    getBlockNumber: async () => {
      // Simulate network call delay
      await new Promise(resolve => setTimeout(resolve, 500));
      return 12345678; // Example block number
    }
  }
};

async function main() {
  console.log("Attempting to get block number with Web3.js...");
  const blockNumber = await web3.eth.getBlockNumber();
  console.log("Current Block Number (Web3.js):", blockNumber);
}

main();

Mendapatkan Nombor Blok (Contoh Ethers.js)

Berikut pula ialah operasi yang setara menggunakan Ethers.js:

// This simulates interaction with an Ethers.js provider.
// In a real DApp, 'provider' would be connected to
// MetaMask or another Ethereum node.

const provider = {
  getBlockNumber: async () => {
    // Simulate network call delay
    await new Promise(resolve => setTimeout(resolve, 500));
    return 12345679; // Example block number
  }
};

async function main() {
  console.log("Attempting to get block number with Ethers.js...");
  const blockNumber = await provider.getBlockNumber();
  console.log("Current Block Number (Ethers.js):", blockNumber);
}

main();

Semakan Pantas: Peranan Penyedia

Apakah peranan utama penyedia Ethereum, seperti MetaMask atau Infura, dalam seni bina aplikasi terdesentralisasi?

Ulang Kaji: Menyambungkan Aplikasi Terdesentralisasi

Syabas! Dalam pelajaran ini, anda telah mempelajari cara aplikasi terdesentralisasi bersambung kepada rangkaian Ethereum.

  • Kita meneroka Web3.js dan Ethers.js sebagai pustaka JavaScript utama untuk interaksi ini.
  • Kita memahami konsep penyedia Ethereum, seperti MetaMask dan Infura, sebagai penghubung penting kepada rantaian blok.
  • Anda telah melihat cara menyediakan dan memulakan pustaka ini secara konsep untuk membaca data asas rantaian blok seperti nombor blok semasa.

Seterusnya, kita akan mendalami pembinaan aplikasi terdesentralisasi yang lengkap!

Percuma untuk bermula

Pelajari Asas Pembangunan Web3 & DApp dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
29
Pelajaran
105

Soalan Lazim

Adakah pelajaran “Menyambung kepada Ethereum (Web3.js/Ethers.js)” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Asas Pembangunan Web3 & DApp, termasuk “Menyambung kepada Ethereum (Web3.js/Ethers.js)”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Asas Pembangunan Web3 & DApp merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Menyambung kepada Ethereum (Web3.js/Ethers.js)”?

Pelajari cara menggunakan pustaka JavaScript seperti Web3.js atau Ethers.js untuk mewujudkan sambungan antara bahagian hadapan web dan rangkaian Ethereum. Anda berlatih Asas Pembangunan Web3 & DApp menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Asas Pembangunan Web3 & DApp?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Asas Pembangunan Web3 & DApp di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 3.

Berapa lamakah pelajaran “Menyambung kepada Ethereum (Web3.js/Ethers.js)” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Asas Pembangunan Web3 & DApp ini?

Ya. Setiap pelajaran Asas Pembangunan Web3 & DApp menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Bahagian Hadapan dan Belakang dalam Web3
  2. Menyambung kepada Ethereum (Web3.js/Ethers.js)
  3. Contoh DApp Asas
← Kembali ke Asas Pembangunan Web3 & DApp