3. Cấu trúc thư mục

|-- contracts
|-- migrations
|-- truffle.js
|-- static
|-- src
    |-- klaytn
      |-- caver.js
      |-- KlaystagramContract.js
    |-- redux
    |-- pages
      |-- AuthPage.js
      |-- FeedPage.js
    |-- components
      |-- UploadPhoto.js
      |-- Feed.js
      |-- TransferOwnership.js
      |-- ...
    |-- styles
    |-- utils
    |-- index.js
    |-- App.js

contracts/: Chứa tập tin hợp đồng Solidity.

migrations/: Chứa tập tin JavaScript xử lý việc triển khai hợp đồng thông minh.

truffle.js: Chứa cấu hình Truffle.

static/: Chứa tập tin tĩnh như hình ảnh và phông chữ.

src/index.js: Tập tin index của ứng dụng. ReactDOM.render logic nằm ở đây.

src/App.js: Tập tin thành phần gốc của ứng dụng.

src/styles: Định nghĩa kiểu dáng tổng thể liên quan đến stylesheet.

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 tiếp theo.

src/klaytn: Chứa các tập tin hỗ trợ tương tác với Klaytn.

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

  cf) caver-js là thư viện cuộc gọi RPC tạo kết nối với nút Klaytn, tương tác với nút và 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 của 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/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: Đọc dữ liệu ảnh từ hợp đồng và hiển thị đến người dùng. Ngoài ra, người dùng có thể tải lên hình ảnh của họ trong FeedPage.

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.