# 7-1. Kết nối hợp đồng với Frontend

1. `src/klaytn`
   * caver.js
   * KlaystagramContract.js
2. `src/redux`

## 1) `src/klaytn` <a href="#id-1-src-klaytn" id="id-1-src-klaytn"></a>

`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 này

### `caver.js` <a href="#caver-js" id="caver-js"></a>

```javascript
/**
 * thư viện caver-js giúp tạo kết nối với nút Klaytn.
 * Bạn có thể kết nối với một nút Klaytn cụ thể bằng cách cài đặt giá trị 'rpcURL'.
 * rpcURL mặc định là 'https://public-en-baobab.klaytn.net'.
 */
import Caver from 'caver-js'

export const config = {
  rpcURL: 'https://public-en-baobab.klaytn.net'
}

export const cav = new Caver(config.rpcURL)

export default cav
```

Sau khi tạo kết nối, bạn có thể gọi phương pháp trên hợp đồng thông minh bằng caver.

### `KlaystagramContract.js` <a href="#klaystagramcontract-js" id="klaystagramcontract-js"></a>

```javascript
// klaytn/KlaystagramContract.js

import { cav } from "klaytn/caver"

/**
 * 1. Tạo phiên bản hợp đồng
 * ex:) cav.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS) mới
 * Bạn có thể gọi phương pháp hợp đồng thông qua phiên bản này.
 */

const KlaystagramContract = DEPLOYED_ABI
  && DEPLOYED_ADDRESS
  && new cav.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)

export default KlaystagramContract
```

Để tương tác với hợp đồng, ta cần một phiên bản hợp đồng.

`KlaystagramContract` tạo một phiên bản hợp đồng để tương tác với hợp đồng Klaystagram bằng cách cung cấp `DEPLOYED_ABI`(giao diện nhị phân ứng dụng) và `DEPLOYED_ADDRESS` cho API `cav.klay.Contract`.

Khi lập & triển khai hợp đồng `Klaystagram.sol` ([5. Triển khai hợp đồng](/content/dapp/tutorials/klaystagram/5.-deploy-contract.md)), ta đã tạo các tập tin `deployedABI` và `deployedAddress`. Các tập tin này chứa ABI của hợp đồng Klaystagram và địa chỉ hợp đồng đã triển khai.

Nhờ có cấu hình của webpack, chúng ta có thể truy cập dưới dạng một biến.(`DEPLOYED_ADDRESS`, `DEPLOYED_ABI`)

* `DEPLOYED_ADDRESS` trả về địa chỉ đã triển khai
* `DEPLOYED_ABI` trả về ABI hợp đồng Klaystagram

**cf) `ABI hợp đồng`(giao diện nhị phân ứng dụng)**\
`ABI hợp đồng` là giao diện để gọi các phương pháp hợp đồng. Với giao diện này, ta có thể gọi các phương pháp hợp đồng sau đây

* `contractInstance.methods.methodName().call()`
* `contractInstance.methods.methodName().send({ ... })`

**Giờ chúng ta đã sẵn sàng để tương tác với hợp đồng trong ứng dụng.**\
\&#xNAN;*cf. Để biết thêm thông tin, hãy tham chiếu* [*caver.klay.Contract*](/content/dapp/sdk/caver-js/v1.4.1/api-references/caver.klay.contract.md)*.*

## 2) `src/redux` <a href="#id-2-src-redux" id="id-2-src-redux"></a>

Chúng ta sẽ tạo các hàm API với phiên bản Klaystagram. Sau khi gọi các hàm API, chúng ta dùng cửa hàng redux để kiểm soát tất cả các luồng dữ liệu.

1. Nhập phiên bản hợp đồng

   Bằng cách sử dụng phiên bản `KlaystagramContract`, chúng ta có thể gọi phương pháp hợp đồng khi các thành phần cần tương tác với hợp đồng.
2. Gọi phương pháp hợp đồng
3. Lưu trữ dữ liệu từ hợp đồng

   Nếu giao dịch của bạn thành công, chúng ta sẽ gọi hành động redux để lưu thông tin từ hợp đồng vào cửa hàng redux.

```javascript
// src/redux/actions/photos.js

// 1. Nhập phiên bản hợp đồng
import KlaystagramContract from 'klaytn/KlaystagramContract'

const setFeed = (feed) => ({
  type: SET_FEED,
  payload: { feed },
})

const updateFeed = (tokenId) => (dispatch, getState) => {

  // 2. Gọi phương pháp hợp đồng (GỌI): getPhoto()
  KlaystagramContract.methods.getPhoto(tokenId).call()
    .then((newPhoto) => {
      const { photos: { feed } } = getState()
      const newFeed = [feedParser(newPhoto), ...feed]

      // 3. Lưu trữ dữ liệu từ hợp đồng
      dispatch(setFeed(newFeed))
    })
}
```

Cửa hàng redux kiểm soát tất cả dữ liệu ở giao diện


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://archive-vn.docs.klaytn.foundation/content/dapp/tutorials/klaystagram/7.-feedpage/7-1.-connect-contract-to-frontend.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.