Aptos에서 종단 간 Dapp 구축

새로운 프레임워크나 프로그래밍 언어를 배우는 일반적인 방법은 간단한 할 일 목록을 만드는 것입니다. 이 튜토리얼에서는 스마트 컨트랙트 측면부터 프론트엔드 측면까지, 마지막으로 두 가지와 상호작용하기 위한 지갑 사용까지 포함하여 종단 간 할 일 목록 dapp을 구축하는 방법을 배우겠습니다.

완성된 코드는 source-code에서 확인하세요.

아래 설명된 전제 조건을 충족하고 설정을 완료한 후, 이 순서로 튜토리얼을 따라하게 됩니다:

1. 스마트 컨트랙트 생성
2. 프론트엔드 설정
3. 체인에서 데이터 가져오기
4. 체인에 데이터 제출
5. 작업 처리

다음이 필요합니다:

• node와 npm

일부 React 결정사항을 설명하겠지만, React가 어떻게 작동하는지 깊이 다루지는 않을 것이므로, React에 대한 이전 경험이 있다고 가정합니다.

이 섹션에서는 클라이언트 측 코드(React 기반)와 Move 코드(우리의 스마트 컨트랙트) 모두를 담을 프로젝트 파일을 보관할 my-first-dapp 디렉토리를 만들 것입니다.

이를 위해 create-aptos-dapp을 사용하여 프로젝트를 생성하겠습니다.

1. 터미널을 열고 프로젝트를 위해 원하는 디렉토리(예: Desktop 디렉토리)로 이동하세요.
2. npx create-aptos-dapp@latest를 실행하여 프로젝트를 생성하세요.

npx create-aptos-dapp@latest

3. 지시사항을 따라 프로젝트를 생성하세요.

• 프로젝트 이름을 선택하세요. 예: my-first-dapp.
• Full-stack project 옵션을 선택하세요.
• Boilerplate Template 옵션을 선택하세요.
• 단순화를 위해 Surf를 사용하지 않도록 선택하세요.
• Vite app 프레임워크 옵션을 선택하세요.
• Devnet 네트워크 옵션을 선택하세요.

이 도구는 프로젝트와 같은 이름의 디렉토리에 프로젝트를 생성하고 필요한 종속성을 설치합니다.

Next Steps 지시사항을 따르세요.

이제 스마트 컨트랙트를 생성해보겠습니다.