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
  • Mục lục
  • Môi trường thử nghiệm
  • Giới thiệu
  • Đối tượng mục tiêu
  1. -
  2. dApp Developers
  3. Hướng dẫn

Klaystagram

Previous7. Chạy ứng dụngNext1. Thiết lập môi trường

Last updated 1 year ago

Mục lục

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

DApp Klaystagram đượ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

Giới thiệu

Trong hướng dẫn này, ta sẽ tìm hiểu cách tạo Klaystagram, ứng dụng cấp phép ảnh NFT dựa trên Klaytn. Ứng dụng web đơn giản này yêu cầu kiến thức cơ bản về Solidity, JavaScript và React.

Trong Klaystagram, mỗi token đều đại diện cho những bức ảnh duy nhất của người dùng. Khi người dùng tải ảnh lên, một token duy nhất sẽ được tạo ra, token này chứa dữ liệu ảnh cùng quyền sở hữu kèm theo. Tất cả giao dịch được ghi vào blockchain. Vì vậy, ngay cả nhà cung cấp dịch vụ cũng không thể kiểm soát những ảnh được tải lên. Khi xem xét mục đích của hướng dẫn này, sẽ chỉ có những chức năng chính được triển khai. Sau khi xem xong hướng dẫn này, hãy thử bổ sung một số tính năng thú vị hơn và tạo ra dịch vụ sáng tạo của riêng bạn.

Có ba tính năng chính.

  1. Photo upload Người dùng có thể tải ảnh kèm mô tả lên blockchain Klaytn. Ảnh sẽ được token hóa.

  2. Feed Người dùng có thể xem tất cả ảnh được tải lên trên blockchain.

  3. Transfer ownership Chủ sở hữu ảnh có thể chuyển quyền sở hữu ảnh cho một người dùng khác, đồng thời giao dịch sẽ hiển thị trong phần lịch sử quyền sở hữu.

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

Chúng ta sẽ xây dựng một ứng dụng web tương tác với các hợp đồng thông minh. Để hiểu trọn vẹn hướng dẫn này, người xem phải làm quen với các khái niệm sau.

NFT là non-fungible token (token không thể thay thế), một loại token đặc biệt đại diện cho một tài sản duy nhất. Như ý nghĩa của cái tên non-fungible (không thể thay thế), mỗi token đều là duy nhất. Tính duy nhất này của NFT mở ra những chân trời mới cho quá trình số hóa tài sản. Ví dụ: NFT có thể dùng để đại diện cho tác phẩm nghệ thuật số, vật phẩm trò chơi hoặc bất cứ loại tài sản duy nhất nào và cho phép mọi người giao dịch. Để biết thêm thông tin, hãy tham khảo này.

Source Code Mã nguồn hoàn chỉnh có ở GitHub, tại đây

Chúng tôi sẽ xem như bạn đã có kiến thức cơ bản về và . Khóa học này không dành cho những người mới bắt đầu.

Bạn nên có kiến thức và kinh nghiệm cơ bản về phát triển . Tuy nhiên, một nhà phát triển SW có kinh nghiệm cũng có thể hoàn thành tác vụ nếu làm theo chỉ dẫn từng bước trong hướng dẫn này.

Bất cứ ai quan tâm đến .

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
bài viết
https://github.com/klaytn/klaystagram
React
Redux
Solidity
Token ERC-721
Video giới thiệu về Klaystagram