Migrating Ethereum App to Klaytn

Mục lục

1. Giới thiệu

Mục đích của hướng dẫn này là nhằm cung cấp chỉ dẫn để di chuyển ứng dụng Ethereum sang Klaytn. Với Klaytn, bạn không cần có kinh nghiệm từ trước. Một ứng dụng blockchain đơn giản sẽ được dùng làm mẫu để minh họa cách di chuyển ứng dụng Ethereum sang Klaytn.

Chúng ta sẽ chỉ tập trung vào việc thay đổi mã cần thiết để di chuyển ứng dụng Ethereum sang Klaytn. Nếu bạn cần thêm thông tin về cách tạo dApp Klaytn, vui lòng tham khảo Hướng dẫn CountDApp.

Source Code Mã nguồn hoàn chỉnh có trên GitHub tại https://github.com/klaytn/countbapp

Đối tượng mục tiêu

Chúng tôi coi như bạn đã có kiến thức cơ bản về React. Mã mẫu được tạo bằng React.
Bạn cần có kinh nghiệm và kiến thức cơ bản về ứng dụng blockchain, nhưng không cần có kinh nghiệm có kinh nghiệm từ trước với Klaytn.

Môi trường thử nghiệm

CountDApp được thử nghiệm trong môi trường sau đây.

MacOS Mojave 10.14.5
Nút 10.16.0 (LTS)
npm 6.9.0
Python 2.7.10

2. Klaytn có tính tương thích với Ethereum

Môi trường hoạt động của Klaytn tương thích với Máy ảo Ethereum và thực thi các hợp đồng thông minh được viết trong Solidity. API RPC của Klaytn và các thư viện khách hàng khác duy trì hầu hết các thông số API giống với thông số của Ethereum nếu có. Do đó, việc chuyển các ứng dụng Ethereum sang Klaytn khá đơn giản. Điều này giúp các nhà phát triển dễ dàng chuyển sang nền tảng blockchain mới.

3. Thay đổi kết nối nút từ Ethereum sang Klaytn

Đầu tiên, bạn cần thay đổi thư viện tạo kết nối với nút. Sau đó, bạn sẽ xác định URL của nút trong "rpcURL". (thông tin cho bạn biết) Testnet Ropsten trong Ethereum sẽ dừng hoạt động vào quý 4 năm 2022. )

Ethereum
- Thư viện web3 kết nối và giao tiếp với nút Ethereum.
- URL của testnet Ropsten được gán cho "rpcURL" .
Klaytn
- Thư viện caver-js dùng để kết nối và giao tiếp với nút Klaytn.
- URL của testnet Baobab được gán cho "rpcURL".

src/klaytn/caver.js

// import Web3 from 'web3'
import Caver from 'caver-js'

// const ROPSTEN_TESTNET_RPC_URL = 'https://ropsten.infura.io/'
const BAOBAB_TESTNET_RPC_URL = 'https://public-en-baobab.klaytn.net/'

// const rpcURL = ROPSTEN_TESTNET_RPC_URL
const rpcURL = BAOBAB_TESTNET_RPC_URL

// const web3 = new Web3(rpcURL)
const caver = new Caver(rpcURL)

// export default web3
export default caver

4. Tương tác với nút Klaytn: Thành phần `BlockNumber`

Thành phần số khối lấy số khối hiện tại trên từng giây (1000ms).

Chỉ cần thay thế thư viện web3 bằng caver-js, bạn có thể đồng bộ hóa BlockNumber của Klaytn theo thời gian thực thay vì BlockNumber của Ethereum.

Ethereum: web3.eth.getBlockNumber() Klaytn: caver.klay.getBlockNumber()

// import web3 from 'ethereum/web3'
import caver from 'klaytn/caver'

class BlockNumber extends Component {
  state = { currentBlockNumber: '...loading' }

  getBlockNumber = async () => {
    // const blockNumber = await web3.eth.getBlockNumber()
    const blockNumber = await caver.klay.getBlockNumber()

    this.setState({ currentBlockNumber: blockNumber })
  }
  // ...
}

export default BlockNumber

Để biết thêm chi tiết về thành phần BlockNumber, hãy tham khảo Hướng dẫn về CountDApp - Thành phần Blocknumber.

5. Tương tác với hợp đồng: Thành phần `Đếm`

Để tương tác với hợp đồng, chúng ta cần tạo một phiên bản của hợp đồng đã được triển khai. Với phiên bản đó, chúng ta có thể đọc và viết dữ liệu của hợp đồng.

Hãy tìm hiểu từng bước về cách chuyển CountDApp từ Ethereum sang Klaytn!

5-1. Triển khai hợp đồng Count trên Klaytn
5-2. Tạo một phiên bản hợp đồng
5-3. Tương tác với hợp đồng

5-1. Triển khai hợp đồng `Count` trên Klaytn

Bước đầu tiên là triển khai hợp đồng Count trên Klaytn và lấy địa chỉ hợp đồng. Trong hầu hết trường hợp, bạn có thể dùng hợp đồng Ethereum trên Klaytn mà không cần sửa đổi. Tham khảo Di chuyển hợp đồng Ethereum. Trong hướng dẫn này, chúng tôi sẽ sử dụng Truffle để triển khai hợp đồng.

Thay đổi thuộc tính mạng lưới trong truffle-config.js để triển khai hợp đồng trên Klaytn.
Nạp tiền vào tài khoản của bạn bằng KLAY faucet.
Nhập $ truffle deploy --network baobab --reset
Hợp đồng Count sẽ được triển khai trên testnet Baobab, Klaytn.

truffle-config.js

// const HDWalletProvider = require("truffle-hdwallet-provider")
const HDWalletProvider = require("truffle-hdwallet-provider-klaytn")

// const NETWORK_ID = '3' // Ethereum, Ropsten testnet's network id
const NETWORK_ID = '1001' // Klaytn, Baobab testnet's network id

// const RPC_URL = 'https://ropsten.infura.io/'
const RPC_URL = 'https://public-en-baobab.klaytn.net'

// Đổi thành khóa riêng tư của riêng bạn với đủ KLAY để triển khai hợp đồng
const PRIVATE_KEY = '0x3de0c90ce7e440f19eff6439390c29389f611725422b79c95f9f48c856b58277'


module.exports = {
  networks: {
    /* ropsten: {
      provider: () => new HDWalletProvider(PRIVATE_KEY, RPC_URL),
      network_id: NETWORK_ID,
      gas: '8500000',
      gasPrice: null,
    }, */

    baobab: {
      provider: () => new HDWalletProvider(PRIVATE_KEY, RPC_URL),
      network_id: NETWORK_ID,
      gas: '8500000',
      gasPrice: null,
    },
  },
  compilers: {
    solc: {
      version: '0.5.6',
    },
  },
}

Để biết thêm thông tin về việc triển khai hợp đồng, hãy tham khảo Hướng dẫn về CountDapp - Triển khai hợp đồng.

5-2. Tạo một phiên bản hợp đồng

Bạn có thể tạo một phiên bản hợp đồng bằng API caver-js. Phiên bản hợp đồng này tạo một kết nối với hợp đồng Count. Bạn có thể gọi phương pháp hợp đồng thông qua phiên bản này.

Ethereum : web3.eth.Contract(ABI, address) Klaytn : caver.klay.Contract(ABI, address)

src/components/Count.js

// import web3 from 'ethereum/web3'
import caver from 'klaytn/caver'

class Count extends Component {
  constructor() {
    /* const CountContract = DEPLOYED_ABI
      && DEPLOYED_ADDRESS
      && new web3.eth.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS) */

    this.countContract = DEPLOYED_ABI
      && DEPLOYED_ADDRESS
      && new cav.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)
  }

  // ...
}
export default Count

5-3. Tương tác với hợp đồng

ABI (Giao diện nhị phân ứng dụng) dùng để tạo phiên bản hợp đồng Count cho phép caver-js gọi các phương pháp hợp đồng như sau. Bạn có thể tương tác với hợp đồng Count giống như với một đối tượng JavaScript.

Đọc dữ liệu (call) CountContract.methods.count().call()
Viết dữ liệu (send) CountContract.methods.plus().send({ ... }) CountContract.methods.minus().send({ ... })

Sau khi tạo một phiên bản hợp đồng trong bước trước, bạn không cần thay đổi bất cứ mã nào khi dùng phương pháp hợp đồng sau đó. Đã hoàn tất di chuyển dApp!

Mã đầy đủ: Thành phần `Đếm`

src/components/Count.js

import React, { Component } from 'react'
import cx from 'classnames'

import caver from 'klaytn/caver'

import './Count.scss'

class Count extends Component {
  constructor() {
    super()
    // ** 1. Tạo phiên bản hợp đồng **
    // ex:) new caver.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)
    // Bạn có thể gọi phương pháp hợp đồng qua phiên bản này.
    // Hiện giờ bạn có thể truy cập vào phiên bản bằng biến `this.countContract`.
    this.countContract = DEPLOYED_ABI
      && DEPLOYED_ADDRESS
      && new caver.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)
    this.state = {
      count: '',
      lastParticipant: '',
      isSetting: false,
    }
  }

  intervalId = null

  getCount = async () => {
    // ** 2. Gọi phương pháp hợp đồng (CALL) **
    // ex:) this.countContract.methods.methodName(arguments).call()
    // Bạn có thể gọi phương pháp hợp đồng (CALL) như ở trên.
    // Ví dụ: Hợp đồng của bạn có phương pháp tên là `count`.
    // Bạn có thể gọi như dưới đây:
    // ex:) this.countContract.methods.count().call()
    // Lệnh trả về promise nên bạn có thể truy cập bằng .then() hoặc sử dụng async-await.
    const count = await this.countContract.methods.count().call()
    const lastParticipant = await this.countContract.methods.lastParticipant().call()
    this.setState({
      count,
      lastParticipant,
    })
  }

  setPlus = () => {
    const walletInstance = caver.klay.tài khoảns.wallet && caver.klay.tài khoảns.wallet[0]

    // Cần tích hợp ví để gọi phương pháp hợp đồng.
    if (!walletInstance) return

    this.setState({ settingDirection: 'plus' })

    // 3. ** Gọi phương pháp hợp đồng (SEND) **
    // ex:) this.countContract.methods.methodName(arguments).send(txObject)
    // Bạn có thể gọi phương pháp hợp đồng (SEND) như trên.
    // Ví dụ: Hợp đồng của bạn có phương pháp tên là `plus`.
    // Bạn có thể gọi phương pháp đó như sau:
    // ex:) this.countContract.methods.plus().send({
    //   from: '0x952A8dD075fdc0876d48fC26a389b53331C34585', // ĐIỀN ĐỊA CHỈ CỦA BẠN
    //   gas: '200000',
    // })
    this.countContract.methods.plus().send({
      from: walletInstance.address,
      gas: '200000',
    })
      .once('transactionHash', (txHash) => {
        console.log(`
          Đang gửi giao dịch... (Gọi hàm 'plus' của hợp đồng)
          txHash: ${txHash}
          `
        )
      })
      .once('receipt', (receipt) => {
        console.log(`
          Đã nhận biên lai! Điều này nghĩa là giao dịch của bạn (gọi hàm plus)
           ở trong khối klaytn(#${receipt.blockNumber})
        `, receipt)
        this.setState({
          settingDirection: null,
          txHash: receipt.transactionHash,
        })
      })
      .once('error', (error) => {
        alert(error.message)
        this.setState({ settingDirection: null })
      })
  }

  setMinus = () => {
    const walletInstance = caver.klay.tài khoảns.wallet && caver.klay.tài khoảns.wallet[0]

    // Cần tích hợp ví để gọi phương pháp hợp đồng.
    if (!walletInstance) return

    this.setState({ settingDirection: 'minus' })

    // 3. ** Gọi phương pháp hợp đồng (SEND) **
    // ex:) this.countContract.methods.methodName(arguments).send(txObject)
    // Bạn có thể gọi phương pháp hợp đồng (SEND) như trên.
    // Ví dụ: Hợp đồng của bạn có phương pháp tên là `minus`.
    // Bạn có thể gọi phương pháp đó như sau:
    // ex:) this.countContract.methods.minus().send({
    //   from: '0x952A8dD075fdc0876d48fC26a389b53331C34585', // ĐIỀN ĐỊA CHỈ CỦA BẠN
    //   gas: '200000',
    // })

    // Phương thức sẽ trả về EventEmitter, nên bạn có thể nghe được sự kiện sau khi gửi.
    // Sử dụng sự kiện .on('transactionHash'),
    // : nếu bạn muốn xử lý logic sau khi gửi giao dịch.
    // Sử dụng sự kiện .once('receipt'),
    // :  nếu bạn muốn xử lý logic sau khi giao dịch của mình đã được đặt vào khối.
    // ex:) .once('receipt', (data) => {
    //   console.log(data)
    // })
    this.countContract.methods.minus().send({
      from: walletInstance.address,
      gas: '200000',
    })
      .once('transactionHash', (txHash) => {
        console.log(`
          Đang gửi giao dịch... (Gọi hàm 'minus' của hợp đồng)
          txHash: ${txHash}
          `
        )
      })
      .once('receipt', (receipt) => {
        console.log(`
          Đã nhận biên lai nghĩa là giao dịch của bạn(gọi hàm minus)
          đang ở trong khối Klaytn(#${receipt.blockNumber})
        `, receipt)
        this.setState({
          settingDirection: null,
          txHash: receipt.transactionHash,
        })
      })
      .once('error', (error) => {
        alert(error.message)
        this.setState({ settingDirection: null })
      })
  }

  componentDidMount() {
    this.intervalId = setInterval(this.getCount, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.intervalId)
  }

  render() {
    const { lastParticipant, count, settingDirection, txHash } = this.state
    return (
      <div className="Count">
        {Number(lastParticipant) !== 0 && (
          <div className="Count__lastParticipant">
            người tham gia gần đây nhất: {lastParticipant}
          </div>
        )}
        <div className="Count__count">COUNT: {count}</div>
        <button
          onClick={this.setPlus}
          className={cx('Count__button', {
            'Count__button--setting': settingDirection === 'plus',
          })}
        >
          +
        </button>
        <button
          onClick={this.setMinus}
          className={cx('Count__button', {
            'Count__button--setting': settingDirection === 'minus',
          })}
        >
          -
        </button>
        {txHash && (
          <div className="Count__lastTransaction">
            <p className="Count__lastTransactionMessage">
              Bạn có thể xem giao dịch gần nhất của mình trong klaytnscope:
            </p>
            <a
              target="_blank"
              href={`https://scope.klaytn.com/transaction/${txHash}`}
              className="Count__lastTransactionLink"
            >
              {txHash}
            </a>
          </div>
        )}
      </div>
    )
  }
}

export default Count

Previous7. Conclusion NextConnecting MetaMask

Last updated 1 year ago