Klaytn Docs Archive VN
  • Tài liệu của Klaytn
  • -
    • Tổng quan về Klaytn
      • Tại sao nên chọn Klaytn
      • Thiết kế của Klaytn
        • Cơ chế đồng thuận
        • Tài khoản
        • Giao dịch
          • Cơ bản
          • Ủy thác phí
          • Ủy thác phí một phần
          • Ethereum
        • Tính toán
          • Hợp đồng thông mình Klaytn
          • Mô hình thực thi
          • Chi phí tính toán
            • Chi phí tính toán (Các tài liệu trước)
          • Máy ảo Klaytn
            • Máy ảo Klaytn (Các tài liệu trước)
        • Lưu trữ
        • Phí giao dịch
          • Phí giao dịch (Các tài liệu trước)
        • Đồng tiền mặc định của Klaytn - KLAY
        • Nền kinh tế token
        • Quản trị
        • Đa kênh
        • KNI
      • Các giải pháp mở rộng
    • Bắt đầu
      • Triển khai hợp đồng thông minh bằng Foundry
      • Triển khai hợp đồng thông minh bằng Hardhat
      • Triển khai hợp đồng thông minh bằng KEN
        • Khởi chạy nút điểm cuối
        • Nạp tiền vào tài khoản
        • Cài đặt các công cụ phát triển
        • Triển khai hợp đồng thông minh
        • Kiểm tra quy trình triển khai
        • Quản lý tài khoản
          • Tạo tài khoản
          • Quản lý tài khoản
      • Môi trường phát triển
      • Nhận KLAY
    • Hợp đồng thông minh
      • Solidity - Ngôn ngữ của hợp đồng thông minh
      • Hợp đồng đã lập trước
        • Hợp đồng đã lập trước (Các tài liệu trước)
      • IDE và công cụ
        • Truffle
      • Hợp đồng mẫu
        • KlaytnGreeter
        • ERC-20
          • 1. Soạn hợp đồng thông minh ERC-20
          • 2. Triển khai hợp đồng thông minh
          • 3. Tương tác với token ERC-20 từ Ví Klaytn
        • ERC-721
          • 1. Soạn hợp đồng thông minh ERC-721
          • 2. Triển khai hợp đồng thông minh
      • Hướng dẫn kiểm thử
      • Hướng dẫn triển khai
      • Token tương thích Klaytn
      • Di chuyển hợp đồng Ethereum
    • Chạy một Node
      • Triển khai
        • Nút điểm cuối
          • Yêu cầu hệ thống
          • Hướng dẫn cài đặt
            • Tải xuống
            • Hướng dẫn cài đặt
            • Cấu hình
            • Khởi động EN
            • Thử việc cài đặt
          • các lệnh CLI ken
          • API JSON-RPC
        • Core Cell
          • Yêu cầu hệ thống
          • Cấu hình mạng
          • Hướng dẫn cài đặt
            • Tải xuống
            • Trước khi cài đặt
            • Thiết lập nút đồng thuận
              • Hướng dẫn cài đặt
              • Cấu hình
              • Khởi động CN
            • Thiết lập nút proxy
              • Hướng dẫn cài đặt
              • Cấu hình
              • Khởi động PN
            • Kiểm tra Core Cell
          • Giám sát thiết lập
          • Thiết lập H/A
        • Chuỗi dịch vụ
          • Bắt đầu
            • Thiết lập chuỗi dịch vụ 4 nút
            • Kết nối với Baobab
            • Chuyển giá trị chuỗi chéo
            • HA (Tính sẵn sàng cao) dành cho Chuỗi dịch vụ
            • Chuỗi dịch vụ lồng nhau
            • Chuyển giá trị giữa các chuỗi dịch vụ kết nối
          • Hướng dẫn sử dụng tham chiếu
            • Yêu cầu hệ thống
            • Tải xuống
            • Hướng dẫn sử dụng SCN
              • Cài đặt
              • Cấu hình
              • Bắt đầu/dừng SCN
              • Kiểm tra trạng thái nút
              • các lệnh kscn
              • các lệnh homi
            • Hướng dẫn sử dụng SPN/SEN
              • Cài đặt
              • Cấu hình
              • Bắt đầu/dừng nút
              • Kiểm tra trạng thái nút
            • Cấu hình cầu nối
            • Neo
            • Neo KAS
            • Chuyển giá trị
            • Tập tin cấu hình
            • Tập tin bản ghi
            • Genesis JSON
            • Nâng cấp & Nâng cấp căn bản
          • Hướng dẫn sử dụng
        • Tải Về Các Gói Dịch Vụ
          • v1.11.1
          • v1.11.0
          • v1.10.2
          • v1.10.1
          • v1.10.0
          • v1.9.1
          • v1.9.0
          • v1.8.4
          • v1.8.3
          • v1.8.2
          • v1.8.1
          • v1.8.0
          • v1.7.3
          • v1.7.2
          • v1.7.1
          • v1.7.0
          • v1.6.4
          • v1.6.3
          • v1.6.2
          • v1.6.1
          • v1.6.0
          • v1.5.3
          • v1.5.2
          • v1.5.1
          • v1.5.0
          • v1.4.2
          • v1.4.1
          • v1.4.0
          • v1.3.0
          • v1.2.0
          • v1.1.1
          • v1.0.0
          • v0.9.6
          • v0.8.2
    • Hướng dẫn hoạt động
      • Cấu hình
      • Nhật ký nút
      • Ghi bản ghi hoạt động
      • Lỗi & xử lý sự cố
      • Lệnh Klaytn
      • Thay đổi dữ liệu chuỗi
      • Di chuyển dữ liệu chuỗi
    • dApp Developers
      • API JSON-RPC
        • Tham chiếu API
          • eth
            • Cảnh báo
            • Tài khoản
            • Khối
            • Giao dịch
            • Cấu hình
            • Bộ lọc
            • Gas
            • Khác
          • klay
            • Tài khoản
            • Khối
            • Giao dịch
              • Làm việc với các loại giao dịch của Klaytn
            • Cấu hình
            • Bộ lọc
            • Gas
            • Khác
          • net
          • gỡ lỗi
            • Ghi bản ghi
            • Tạo hồ sơ
            • Theo dõi thời gian chạy
            • Gỡ lỗi thời gian chạy
            • Theo dõi VM
            • Theo dõi tiêu chuẩn VM
            • Kiểm tra chuỗi khối
          • quản trị viên
          • cá nhân
          • txpool
          • quản trị
        • Tham chiếu API chuỗi dịch vụ
          • cầu nối chính
          • cầu nối phụ
        • Mã lỗi giao dịch
      • Nhà cung cấp dịch vụ RPC
        • Điểm cuối công khai
      • SDK & thư viện để tương tác với Nút Klaytn
        • caver-js
          • Bắt đầu
          • Gửi giao dịch mẫu
          • Tham chiếu API
            • caver.tài khoản
            • caver.wallet
              • caver.wallet.keyring
            • caver.transaction
              • Cơ bản
              • Ủy thác phí
              • Ủy thác phí một phần
            • caver.rpc
              • caver.rpc.klay
              • caver.rpc.net
              • caver.rpc.governance
            • caver.contract
            • caver.abi
            • caver.kct
              • caver.kct.kip7
              • caver.kct.kip17
              • caver.kct.kip37
            • caver.validator
            • caver.utils
            • caver.ipfs
          • caver-js ~v1.4.1
            • Bắt đầu (~v1.4.1)
            • Tham chiếu API
              • caver.klay
                • Tài khoản
                • Khối
                • Giao dịch
                  • Cũ
                  • Chuyển giá trị
                  • Ghi chú về chuyển giá trị
                  • Cập nhật tài khoản
                  • Triển khai hợp đồng thông minh
                  • Thực thi hợp đồng thông minh
                  • Cancel
                • Cấu hình
                • Bộ lọc
                • Khác
              • caver.klay.net
              • caver.klay.tài khoảns
              • caver.klay.Contract
              • caver.klay.KIP7
              • caver.klay.KIP17
              • caver.klay.abi
              • caver.utils (~v1.4.1)
            • Di chuyển từ web3.js
        • caver-java
          • Bắt đầu
          • Tham chiếu API
          • caver-java ~v1.4.0
            • Bắt đầu (~v1.4.0)
            • Di chuyển từ web3j
        • ethers.js
        • web3.js
      • Hướng dẫn
        • Bộ công cụ trực tuyến của Klaytn
        • Ví dụ về ủy thác phí
        • Count DApp
          • 1. Thiết lập môi trường
          • 2. Sao chép Count DApp
          • 3. Cấu trúc thư mục
          • 4. Soạn hợp đồng thông minh
          • 5. Tổng quan về mã Frontend
            • 5-1. Thành phần số khối
            • 5-2. Thành phần xác thực
            • 5-3. Thành phần đếm
          • 6. Triển khai hợp đồng
          • 7. Chạy ứng dụng
        • Klaystagram
          • 1. Thiết lập môi trường
          • 2. Sao chép Klaystagram DApp
          • 3. Cấu trúc thư mục
          • 4. Soạn hợp đồng thông minh Klaystagram
          • 5. Triển khai hợp đồng
          • 6. Tổng quan về mã Frontend
          • 7. Trang thông tin
            • 7-1. Kết nối hợp đồng với Frontend
            • 7-2. Thành phần UploadPhoto
            • 7-3. Thành phần nguồn cấp dữ liệu
            • 7-4. Thành phần TransferOwnership
          • 8. Chạy ứng dụng
        • Building a Buy Me a Coffee dApp
          • 1. Project Setup
          • 2. Creating a BMC Smart Contract
          • 3. Testing the contract using scripts
          • 4. Deploying BMC Smart contract
          • 5. Building the BMC Frontend with React and Web3Onboard
          • 6. Deploying Frontend code on IPFS using Fleek
          • 7. Conclusion
        • Migrating Ethereum App to Klaytn
        • Connecting MetaMask
        • Connecting Remix
        • Verifying Smart Contracts Using Block Explorers
      • Công cụ dành cho nhà phát triển
        • Ví
          • Kaikas
          • Ví Klaytn
          • Két Klaytn
            • Thiết kế két Klaytn
            • Tạo két
            • Thêm tài sản
            • Gửi tài sản
            • Tương tác hợp đồng
            • Trình xây dựng giao dịch
            • Các điểm đến nút
            • Câu hỏi thường gặp
          • Thư Viện Ví
            • Web3Auth
            • Web3Modal
            • Web3-Onboard
        • Oracle
          • Hệ Thống Orakl
          • Witnet
          • SupraOracles
        • Trình duyệt khối
          • Klaytnscope
          • Klaytnfinder
        • Klaytn Contracts Wizard
    • Glossary
  • ---
    • Lịch sử nâng cấp căn bản của Klaytn
    • Klaytn 2.0
      • Gói Metaverse
      • Tính hoàn thiện và cải tiến
      • Tương thích với Ethereum
      • Quản trị phi tập trung
      • Quỹ sinh thái lớn
    • Câu hỏi thường gặp
    • Mã nguồn mở
    • Điều khoản sử dụng
    • Ngôn ngữ
  • ℹ️Latest Klaytn Docs
Powered by GitBook
On this page
  • 1) Tổng quan
  • 2) App.js
  • 3) src/pages
  • 4) Chúng ta sẽ tìm hiểu gì?
  1. -
  2. dApp Developers
  3. Hướng dẫn
  4. Klaystagram

6. Tổng quan về mã Frontend

  1. Tổng quan

  2. src/App.js

  3. src/pages

  4. Chúng ta sẽ tìm hiểu gì?

1) Tổng quan

Trong phần này, chúng ta sẽ xây dựng front-end. Mục đích chính của hướng dẫn này là tìm hiểu cách kết nối hợp đồng với mã front-end. Do đó, chúng tôi sẽ giải thích ngắn gọn mã React và tập trung vào các hàm API tương tác với hợp đồng được triển khai trên Klaytn.

|-- src
    |-- klaytn
      |-- caver.js
      |-- KlaystagramContract.js
    |-- redux
      |-- auth.js
      |-- photos.js
    |-- pages
      |-- AuthPage.js
      |-- FeedPage.js
    |-- components
      |-- UploadPhoto.js
      |-- Feed.js
      |-- TransferOwnership.js
      |-- ...
    |-- App.js

src/klaytn: Chứa các tập tin giúp tương tác với chuỗi khối Klaytn.

  • src/klaytn/caver.js: Khởi tạo caver trong cài đặt đã định cấu hình.

    cf) caver-js là thư viện RPC tạo kết nối với nút Klaytn, tương tác với nút hoặc hợp đồng thông minh được triển khai trên klaytn.

  • src/klaytn/Klaystagram.js: Tạo một phiên bản hợp đồng bằng cách sử dụng API caver-js. Bạn có thể tương tác với hợp đồng thông qua phiên bản.

src/redux: Tạo các hàm API tương tác với hợp đồng và theo dõi dữ liệu sau đó.

  • redux/actions/auth.js

  • redux/actions/photos.js

src/pages: Chứa các tập tin hai trang soạn ra ứng dụng Klaystagram.

  • src/pages/AuthPage.js: Chứa mẫu đăng ký và đăng nhập. Bạn có thể tạo khóa riêng tư trong mẫu đăng ký và sử dụng nó để đăng nhập trên ứng dụng.

  • src/pages/FeedPage.js: Hiển thị ảnh đã đọc từ hợp đồng, hiển thị các ảnh đó đến người dùng và cung cấp tính năng tải lên.

src/components: Chứa các tập tin thành phần soạn ra trang.

  • src/components/Feed.js: Đọc dữ liệu từ hợp đồng và hiển thị ảnh.

  • src/components/UploadPhoto.js: Tải ảnh lên bằng cách gửi giao dịch đến hợp đồng.

  • src/components/TransferOwnership.js: Chuyển quyền sở hữu ảnh bằng cách gửi giao dịch.

src/App.js: Tập tin thành phần gốc của ứng dụng hướng dẫn dành cho các thành phần tổng thể.

2) App.js

'App.js' là tập tin thành phần gốc dành cho các thành phần tổng thể. Nó render hai trang tùy thuộc vào trạng thái đăng nhập của người dùng. Mỗi trang có các hàm tương tác với hợp đồng. Bạn phải thêm phiên bản ví vào caver để gửi giao dịch đến chuỗi khối. Hãy xem xét nhanh mã cho phần tổng quan.

// src/App.js

import React, { Component } từ 'react'
import { connect } từ 'react-redux'
import AuthPage từ 'pages/AuthPage'
import FeedPage từ 'pages/FeedPage'
import Nav từ 'components/Nav'
import Footer từ 'components/Footer'
import Modal từ 'components/Modal'
import Toast từ 'components/Toast'

import * as authActions from 'redux/actions/auth'

import'./App.scss'

class App extends Component {
  constructor(props) {
    super(props)
    /**
     * 1. Khởi tạo trạng thái `isLoggedIn`
     * cf) sessionStorage là đặc trưng của trình duyệt Internet
     * nơi lưu trữ dữ liệu cho đến khi đóng tab trình duyệt.
     */
    const walletFromSession = sessionStorage.getItem('walletInstance')
    const { integrateWallet, removeWallet } = this.props

    if (walletFromSession) {
      try {
        /**
         * 2-1. Tích hợp ví
         * Nếu giá trị 'walletInstance' tồn tại,
         * Phương thức intergrateWallet thêm phiên bản vào ví của caver và cửa hàng redux
         * cf) redux/actions/auth.js -> integrateWallet()
         */
        integrateWallet(JSON.parse(walletFromSession).privateKey)
      } catch (e) {
        /**
         * 2-2. Xóa bỏ ví        
 * Nếu giá trị trong sessionStorage là phiên bản ví không hợp lệ,
         * Phương thức removeWallet xóa bỏ phiên bản khỏi ví của caver và cửa hàng redux
         * cf) redux/actions/auth.js -> removeWallet()
         */
        removeWallet()
      }
    }
  }
  /**
   * 3. Render trang
   * Redux sẽ khởi tạo trạng thái isLoggedIn thành true hoặc false,
   * tùy thuộc vào việc walletInstance có tồn tại trong phần lưu trữ phiên không
   */
  render() {
    const { isLoggedIn } = this.props
    return (
      <div className="App">
        <Modal />
        <Toast />
        {isLoggedIn && <Nav />}
        {isLoggedIn ? <FeedPage /> : <AuthPage />}
        <Footer />
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  isLoggedIn: state.auth.isLoggedIn,
})

const mapDispatchToProps = (dispatch) => ({
  integrateWallet: (privateKey) => dispatch(authActions.integrateWallet(privateKey)),
  removeWallet: () => dispatch(authActions.removeWallet()),
})

export default connect(mapStateToProps, mapDispatchToProps)(App)

cf) Ta cần JSON.parse vì phần walletInstance được lưu trữ dưới dạng chuỗi JSON.

**1. Khởi chạy trạng thái isLoggedIn ** Để khởi chạy trạng thái isLoggedIn, chúng ta dùng phương pháp vòng đời constructor trên thành phần ứng dụng. Trạng thái này kiểm tra phiên walletInstance ở sessionStorage của trình duyệt trước khi thành phần được liên kết.

2. Tích hợp/Xóa ví Nếu bạn chưa từng đăng nhập trước đây, phiên walletInstance có thể không tồn tại. Nếu bạn từng đăng nhập, phần walletInstance có thể tồn tại dưới dạng chuỗi JSON ở sessionStorage.

  1. Tích hợp - Nếu phiên bản ví tồn tại trong sessionStorage, hãy thử thêm phiên bản ví vào caver và cửa hàng redux.

  2. Xóa - Nếu phiên bản ví trong sessionStorage không hợp lệ, hãy xóa ví khỏi ví của caver và cửa hàng redux.

// redux/actions/auth.js

// 1. Tích hợp ví
export const integrateWallet = (privateKey) => (dispatch) => {
  // Tạo phiên bản ví với API privateKeyToAccount của caver
  const walletInstance = cav.klay.tài khoảns.privateKeyToAccount(privateKey)

  // Để gửi giao dịch, hãy thêm phiên bản ví vào caver
  cav.klay.tài khoảns.wallet.add(walletInstance)

  // Để duy trì trạng thái đăng nhập, hãy lưu trữ walletInstance trong sessionStorage
  sessionStorage.setItem('walletInstance', JSON.stringify(walletInstance))

  // Để truy cập thông tin walletInstance xuyên suốt toàn bộ ứng dụng, hãy lưu vào cửa hàng redux
  return dispatch({
    type: INTEGRATE_WALLET,
    payload: {
      privateKey,
      address: walletInstance.address,
    },
  })
}

// 2. Xóa ví
export const removeWallet = () => (dispatch) => {
  cav.klay.tài khoảns.wallet.clear()
  sessionStorage.removeItem('walletInstance')
  return dispatch({
    type: REMOVE_WALLET,
  })
}

cf. Để biết thêm thông tin về API privateKeyToAccount của caver, hãy xem [caver.klay.tài khoảns.privateKeyToAccount](https://docs.klaytn.foundation/dapp/sdk/caver-js/v1.4.1/api-references/caver.klay.tài khoảns#privatekeytotài khoản).

3. Kết xuất trang Redux sẽ khởi chạy trạng thái isLoggedIn thành true hoặc false, tùy thuộc vào việc walletInstance có tồn tại trong phần lưu trữ phiên hay không

3) src/pages

  • AuthPage.js: Chứa biểu mẫu đăng nhập và đăng ký. Bạn có thể tạo khóa riêng tư trong biểu mẫu đăng ký và dùng khóa này để đăng nhập trên ứng dụng.

  • src/pages/FeedPage.js: Đọc dữ liệu ảnh từ hợp đồng và hiển thị đến người dùng. Người dùng cũng có thể tải ảnh của họ lên.

4) Chúng ta sẽ tìm hiểu gì?

Trong ứng dụng dựa trên blockchain, có hai cách để tương tác với hợp đồng.

1) Reading dữ liệu từ hợp đồng. 2) Writing dữ liệu vào hợp đồng.

Việc đọc dữ liệu từ hợp đồng không mất phí. Tuy nhiên, bạn sẽ phải trả phí để viết dữ liệu vào hợp đồng (Gửi giao dịch). Vì vậy, nếu muốn viết dữ liệu, bạn phải dùng tài khoản Klaytn có KLAY để trả phí.

Trong AuthPage, SignupForm giúp bạn tạo tài khoản Klaytn (khóa riêng tư). Sau đó, bạn có thể đăng nhập bằng khóa riêng tư và thanh toán phí giao dịch.

Trong hướng dẫn này, chúng ta sẽ tập trung vào FeedPage, rồi từ đó tìm hiểu cách ứng dụng này reads and writes data từ hợp đồng/vào hợp đồng.

Previous5. Triển khai hợp đồngNext7. Trang thông tin

Last updated 1 year ago

cf. caver-js(or cav in the code) là một thư viện để tương tác với mã Klaytn blockchain. Chúng ta sẽ tìm hiểu chi tiết trong chương tiếp theo -

Như chúng ta đã mô tả ở , src/pages chứa các tập tin hai trang. Một trong những tập tin hai trang này sẽ được kết xuất trên ứng dụng, tùy thuộc vào việc người dùng đã đăng nhập hay chưa.

Nếu bạn muốn tìm hiểu thêm về hai phương pháp đăng nhập khác nhau (khóa riêng tư / lưu trữ khóa), vui lòng tham chiếu .

7-1. Kết nối hợp đồng đến Frontend
5.2. Trang Auth Component
above