본문으로 건너뛰기

스마트 컨트랙트 상호작용

프론트엔드는 내장된 Discovery API를 사용하여 다양한 블록체인과 상호 작용할 수 있습니다. NEAR 스마트 컨트랙트에서 인사말을 읽고 저장하는 애플리케이션을 만드는 방법에 대해 알아보겠습니다.

widgets 사용자가 로그인했을 때 Hello Near 앱 보기

정보

near.social 코드 페이지에서 완성된 코드를 확인하세요.


The Contract

Hello.near=example.near의 NEAR 네트워크에 Hello World 스마트 컨트랙트를 구축했습니다. The contract exposes two methods:

  • set_greeting(greeting: string): void: 인사말을 받아 컨트랙트 상태 내에 저장합니다.
  • get_greeting(): string: 저장된 인사말을 반환합니다.

인사말 반환

NEAR 네트워크와 상호 작용하기를 원하므로 Discovery API의 Near 객체를 사용합니다.

const contract = "hello.near-examples.near";
const greeting = Near.view(contract, "get_greeting", {});

return <div>{greeting} World</div>;

컨트랙트에 "Hello"가 저장되어 있다고 가정하면 다음과 같은 간단한 정보가 제공됩니다:

Hello World

인사말 변경

인사말을 수정하려면 Near.call을 사용하여 set_greeting 메서드를 호출하기만 하면 됩니다. 그러나 이를 위해서는 사용자가 새 인사말을 입력할 수 있는 프론트엔드가 필요합니다.

다음 두 단계를 통해 생성합니다:

  1. 렌더링할 HTML 작성
  2. Add the logic to handle the function call

1. HTML 컴포넌트

다음 코드를 사용하여 제목, 인사말을 변경하는 입력 양식 및 변경사항을 제출하는 버튼로 구성된 간단한 프론트엔드를 만듭니다.

const contract = "hello.near-examples.near";
const greeting = Near.view(contract, "get_greeting", {});

// Define components
const greetingForm = (
<>
<div className="border border-black p-3">
<label>Update greeting</label>
<input placeholder="Howdy" onChange={onInputChange} />
<button className="btn btn-primary mt-2" onClick={onBtnClick}>
Save
</button>
</div>
</>
);

const notLoggedInWarning = <p> Login to change the greeting </p>;

// Render
return (
<>
<div className="container border border-info p-3">
<h3 className="text-center">
The contract says:
<span className="text-decoration-underline"> {greeting} </span>
</h3>

<p className="text-center py-2">
Look at that! A greeting stored on the NEAR blockchain.
</p>

{context.accountId ? greetingForm : notLoggedInWarning}
</div>
</>
);
:::info 관련 HTML
  1. onChange & onClick: 우리는 어떤 일이 발생했을 때 행동할 수 있도록 우리의 <input><button>을 준비했습니다. 특히, 우리는 두 가지 메서드를 만들 것입니다: 하나는 입력이 바뀔 때, 하나는 버튼을 눌렀을 때.

  2. 이를 통해 사용자가 NEAR 계정을 사용하여 로그인했는지 여부를 알 수 있으므로 NEAR 컨트랙트와 상호 작용할 수 있습니다.


2. 사용자 입력 처리

컴포넌트의 보기를 준비했으므로 이제 사용자가 새 인사말을 입력하고 Submit 버튼을 누를 때의 로직을 정의해야 합니다. 즉, onInputChangeonBtnClick 메서드를 정의해야 합니다.

onInputChange

사용자가 새 인사말을 입력할 때 Submit 버튼을 누를 때까지 어딘가에 저장하려고 합니다.

Discovery에서는 State.init를 통해 상태가 초기화되고 State.update로 업데이트되며 state 변수를 통해 액세스됩니다(소문자 구분). 새 인사말을 앱의 상태로 저장합니다:

State.init({ new_greeting: "" });

const onInputChange = ({ target }) => {
State.update({ new_greeting: target.value });
};

onBtnClick

이제 사용자가 Submit 버튼을 클릭할 때 처리해야 합니다. 우리가 원하는 것은 사용자가 인사말을 변경했는지 확인하고 컨트랙트에 제출하는 것입니다.

const onBtnClick = () => {
if (!state.new_greeting) {
return;
}

Near.call(contract, "set_greeting", {
greeting: state.new_greeting,
});
};

완전한 예제

이 예제의 전체 버전을 NEAR 블록체인에 배포했으므로 코드를 확인하고 사용할 수 있습니다.

Was this page helpful?