본문으로 건너뛰기

방명록

이 방명록 예제는 두 가지 주요 구성 요소로 이루어진 간단한 앱입니다.

  1. 사용자의 메시지를 저장하고 돈을 첨부할 수 있는 스마트 컨트랙트
  2. 게시된 마지막 10개의 메시지를 표시하는 간단한 웹 기반 프론트엔드

img


프로젝트 시작

프로젝트 사용을 시작하는 데는 두 가지 옵션이 있습니다. 첫 번째 권장 사항은 웹 기반 대화형 환경을 여는 Gitpod를 통해 앱을 사용하는 것입니다. 두 번째 옵션은 레퍼지토리를 로컬로 복제하는 것으로 모든 필수 구성 요소를 설치해야 합니다.

Gitpod로컬로 복제
Open in Gitpod🌐 https://github.com/near-examples/guest-book-js

Gitpod를 선택하면 새 브라우저 창이 코드와 함께 자동으로 열리고, 잠시 기다리면 프론트엔드가 팝업됩니다(팝업 창이 차단되지 않았는지 확인).

앱을 로컬에서 실행하는 경우, 앱을 복제한 디렉터리를 입력하고 yarn으로 의존성(dependency)을 설치한 뒤 yarn start를 입력하여 시작합니다.

cd guest-book
yarn
yarn deploy
yarn start

그러면 컨트랙트가 컴파일되어 testnet 네트워크의 계정배포됩니다. 완료되면 브라우저 창이 열립니다.


방명록과 상호 작용

img 방명록 앱의 프론트엔드

NEAR 계정으로 로그인하세요. 계정이 없는 경우 즉시 만들 수 있습니다. 로그인하면 방명록에 메시지에 서명할 수 있습니다. 메시지와 함께 돈을 더 보낼 수 있고, 0.01Ⓝ 이상 첨부하면 메시지가 "프리미엄"으로 표시됩니다.


dApp의 구조

이제 dApp이 무엇을 하는지 이해했으므로 그 구조를 자세히 살펴보겠습니다.

  1. 프론트엔드 코드는 /frontend 폴더에 있습니다.
  2. 스마트 컨트랙트 코드는 /contract 폴더에 있습니다.

컨트랙트

컨트랙트는 add_messageget_message 두 가지 메서드가 있습니다.

contract/src/contract.ts
loading...

프론트엔드

프론트엔드는 하나의 HTML 파일(/index.html)로 구성되며, REACT를 사용합니다. 구성 요소가 화면에 표시되는 방식을 이해하려면, /App.js/index.js를 확인하세요.

다음 코드에서 /assets/js/index.js를 확인할 수 있습니다.

frontend/index.js
loading...

필요한 변수를 설정하고 앱을 시작합니다.


테스트

스마트 컨트랙트를 작성할 때, 모든 방법을 철저하게 테스트하는 것이 매우 중요합니다. 이 프로젝트에는 단위(unit) 및 통합(integration)이라는 두 가지 유형의 테스트가 있습니다. 이를 자세히 알아보기 전에 yarn test 명령을 통해 dApp에 있는 테스트를 수행하세요.

단위 테스트

단위 테스트는 스마트 컨트랙트의 개별 함수를 확인합니다. 현재 Rust에서만 단위 테스트가 구현되어 있습니다.

contract/src/lib.rs
loading...
integration-tests/src/main.ava.ts
loading...