Build a Buy-Me-A-Coffee DApp
목차
- 1. 프로젝트 설정
- 2. 커피 구매 스마트 컨트랙트 생성하기
- 3. 스크립트를 사용하여 컨트랙트 기능 테스트하기
- 4. 카이아 테스트넷에 BMC 스마트 컨트랙트 배포하기
- 5. 리액트와 Web3Onbaord로 BMC 프론트엔드 구축하기
- 6. Fleek을 사용하여 IPFS에 프론트엔드 코드 배포하기
- 7. 결론
소개
Buy Me a Coffee(BMC)는 크리에이터가 팬이나 시청자로부터 금전적 지원과 기부를 받을 수 있는 플랫폼입니다. 이 플랫폼의 도움으로 팬은 크리에이터의 성공 스토리에 중요한 역할을 할 수 있고, 시청자는 크리에이터가 성취한 작업에 감사를 표할 수 있으며, 크리에이터는 자신의 작업으로 수익을 창출할 수 있습니다.
크게 보면, Buy-me-a-Coffee는 크리에이터의 결제 수락 프로세스를 간소화하고 크리에이터와 시청자 간의 상호작용을 강화합니다. 이 외에도 BMC 플랫폼의 흥미로운 기능 중 일부는 다음과 같습니다. 긍정적인 측 면에서 이 플랫폼을 블록체인에 적용한다고 상상해 보세요. 이제 크리에이터는 다음과 같은 더 많은 혜택을 누릴 수 있습니다:
- 크리에이터가 받은 후원금에 대해 5%의 수수료를 부과하는 기존 BMC와 달리 완전한 결제가 가능합니다.
- 모든 거래가 블록체인에 기록되므로 투명성이 보장됩니다.
- 중개자 없이 팬으로부터 직접 후원금을 받을 수 있습니다.
- 탈중앙화, 즉 플랫폼을 통제하는 중앙 기관이 없습니다.
In this tutorial. 이 튜토리얼에서는 탈중앙화된 버전의 Buy Me a Coffee(BMC) 플랫폼(프런트엔드 + 스마트 컨트랙트)을 구축하게 됩니다. 이 플랫폼은 서포터가 팁을 줄 수 있는 기존 BMC 플랫폼을 최소한으로 구현한 것으로, 여러분은 컨트랙트의 소유자로서 BMC 스마트 컨트랙트로 전달된 팁을 인출할 수 있습니다. 서포터들은 이 사이트를 사용하여 커피 거래에서 테스트 KAIA와 러블리 메시지를 함께 보낼 수 있습니다.
이 가이드가 끝날 때까지 다음을 사용하여 이 dApp을 만들 수 있습니다:
- Solidity: BMC 스마트 컨트랙트를 작성하기 위해
- NextJs와 Tailwind: BMC dApp을 위한 프론트엔드 웹사이트 구축용
- Web3Onboard: 카이아 테스트넷 Kairos에 여러 지갑을 연결할 수 있도록 합니다.
- Fleek: Fleek을 사용하면 IPFS에서 BMC dApp을 호스팅할 수 있습니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
- Node.js
- 후크 등과 같은 JavaScript 및 React 기본 사항에 익숙해야 합니다.
- Coinbase Wallet, MetaMask 월렛 등 필요한 월렛 설치
- Test KAIA from Faucet.
- RPC Endpoint: you can obtain this from one of the supported endpoint providers.
- Fleek에서 계정을 생성합니다.
1. 프로젝트 설정
이 섹션에서는 프로젝트 폴더를 초기화하겠습니다. 이 폴더에는 두 개의 별도 폴더가 포함됩니다:
- frontend 폴더 - dApp의 프론트엔드 구현을 위한 코드가 들어 있습니다.
- smart-contract 폴더 - BMC dApp의 스마트 컨트랙트 코드가 들어 있습니다.
프로젝트 폴더를 만들려면 터미널에 다음 코드를 붙여넣으세요.
mkdir BuyMeACoffeecd BuyMeACoffee