Next.js, TypeScript 및 Solidity를 사용하여 분산형 자선 플랫폼을 구축하는 방법

무엇을 만들 것인지는 Bitfinity 테스트 네트워크와 git repo 의 라이브 데모를 참조하세요.

소개

Next.js, Solidity 및 TypeScript를 사용하여 Web3 분산형 자선 플랫폼을 구축하는 포괄적인 가이드에 오신 것을 환영합니다. 이 튜토리얼을 마치면 다음 사항을 명확하게 이해하게 될 것입니다.

• Next.js로 동적 인터페이스 구축
• Solidity를 사용하여 Ethereum 스마트 계약 작성
• TypeScript를 사용하여 정적 유형 검사 통합
• 스마트 계약 배포 및 상호 작용
• 블록체인 기반 자선 플랫폼의 기본 이해

이 튜토리얼에 참여하면 보너스로 수요가 많은 Solidity 개발자가 되는 방법에 대한 권위 있는 책의 사본을 쉽게 얻을 수 있습니다. 이 제안은 선착순 300명 에게 무료입니다. 당첨 방법에 대한 지침은 아래의 짧은 동영상을 시청하세요.

전제조건

나와 함께 빌드하려면 다음 도구를 설치해야 합니다.

• Node.js
• 실
• 힘내 배쉬
• 메타마스크
• Next.js
• 견고
• Redux 툴킷
• 순풍 CSS

이 튜토리얼을 위해 MetaMask를 설정하려면 아래 지침 비디오를 시청하십시오.

설정을 완료하시면 저희 책의 무료 사본을 받으실 수 있습니다. 도서를 신청하려면 양식을 작성하여 작업 증명서를 제출해 주세요 .

다음 교육 비디오를 시청하여 최대 3개월 동안 무료 프리미엄 강좌를 받아보세요.

다음을 포함한 Dapp 멘토 아카데미:

• 풀스택 NFT 채굴 과정
• 풀스택 NFT 마켓플레이스 과정
• 풀스택 블록체인 강좌
• 등.

오늘 Bitfinity와 함께 여행을 시작해 보세요. 첫 번째 자선 기부 추적 dApp을 구축하면서 빠르고 간단하며 번거롭지 않은 개발 프로세스를 경험해 보세요. 스마트 계약을 Bitfinity 네트워크에 배포하고 긍정적인 영향을 미치세요.

이제 튜토리얼로 넘어가서 프로젝트를 설정해 보겠습니다.

설정

준비된 프런트엔드 저장소를 복제하고 환경 변수를 설정하는 것부터 시작하겠습니다. 다음 명령을 실행하십시오.

 git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain

다음으로, 프로젝트 루트에 .env 파일을 만들고 다음 키를 포함합니다.

 NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545 NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID> NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID> NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somereallysecretsecret

<YOUR_ALCHEMY_PROJECT_ID> 및 <WALLET_CONNECT_PROJECT_ID> 해당 프로젝트 ID로 바꿉니다.

YOUR_ALCHEMY_PROJECT_ID : 여기에서 키 가져오기 WALLET_CONNECT_PROJECT_ID : 여기에서 키 가져오기

마지막으로 yarn dev 실행하여 프로젝트를 시작합니다.

이 프로젝트의 프런트엔드는 견고하고 일부 스마트 계약 통합을 위한 준비가 되어 있지만 공유 데이터 공간을 활성화하려면 애플리케이션을 Reduxify해야 합니다.

Redux 스토어 구축

위 이미지는 Redux 스토어의 구조를 나타내며, 지나치게 복잡한 프로젝트를 생성하지 않으므로 간단합니다.

애플리케이션의 전역 상태를 관리하기 위해 Redux를 설정하겠습니다. 다음과 같이하세요:

1. 프로젝트 루트에 store 폴더를 만듭니다.
2. store 내부에 actions 와 states 두 개의 폴더를 만듭니다.
3. states 내부에서 globalStates.ts 파일을 생성합니다.

4. actions 내부에서 globalActions.ts 파일을 생성합니다.

5. store 폴더 내에 globalSlices.ts 파일을 만듭니다.

6. store 폴더 안에 index.ts 파일을 생성하세요.

7. Redux 공급자로 pages/_app.ts 파일을 업데이트합니다.

우리 애플리케이션은 Redux 툴킷으로 래핑되었으며 백엔드와 프런트엔드를 통합할 때 Redux를 다시 방문할 것입니다.

스마트 계약 개발

다음으로 우리 플랫폼을 위한 스마트 계약을 개발하겠습니다.

1. 프로젝트 루트에 contracts 폴더를 만듭니다.
2. contracts 내부에 DappFund.sol 파일을 생성하고 아래 컨트랙트 코드를 추가합니다.

DappFund 계약은 자선단체에 대한 생성, 업데이트 및 기부뿐만 아니라 자선세 변경 및 자선단체 금지와 같은 관리 기능도 촉진합니다.

기능별 분석은 다음과 같습니다.

1. constructor() : 이 함수는 계약이 배포될 때 초기 자선세를 설정합니다. 계약 배포 중에 한 번만 실행됩니다.
2. createCharity() : 이 함수를 사용하면 사용자가 새로운 자선 단체를 만들 수 있습니다. 이름, 설명, 이미지, 프로필, 자선단체 금액 등 여러 매개변수가 필요합니다. 이러한 매개변수가 유효한지 확인한 다음 새 CharityStruct 생성하고 이를 charities 매핑에 추가합니다.
3. updateCharity() : 이 함수를 사용하면 자선 단체의 소유자가 세부 정보를 업데이트할 수 있습니다. 자선 단체의 세부 정보를 업데이트하기 전에 자선 단체가 존재하는지, 보낸 사람이 자선 단체의 소유자인지 확인합니다.
4. deleteCharity() : 이 함수를 사용하면 자선 단체의 소유자가 자선 단체를 삭제된 것으로 표시할 수 있습니다. 삭제된 것으로 표시하기 전에 자선 단체가 존재하는지, 보낸 사람이 자선 단체의 소유자인지 확인합니다.
5. toggleBan() : 이 함수를 사용하면 계약 소유자가 자선단체를 금지하거나 금지를 해제할 수 있습니다. 금지 상태를 전환하기 전에 자선 단체가 존재하는지 확인합니다.
6. donate() : 이 함수를 사용하면 사용자가 자선단체에 기부할 수 있습니다. 자선 단체가 존재하는지, 금지되지 않았는지, 아직 모금 목표에 도달하지 않았는지 확인합니다. 그런 다음 총 기부 횟수를 늘리고 새 SupportStruct 생성하여 supportersOf 매핑에 추가합니다. 또한 자선 단체의 모금 금액과 기부 횟수도 업데이트됩니다.
7. changeTax() : 이 함수를 사용하면 계약 소유자가 자선세를 변경할 수 있습니다. 세금을 업데이트하기 전에 새 세금 비율이 유효한지 확인합니다.
8. getCharity() : 이 함수를 사용하면 누구나 자선단체의 세부정보를 얻을 수 있습니다. 지정된 ID와 연결된 CharityStruct 반환합니다.
9. getCharities() : 이 함수를 사용하면 누구나 활동 중인 모든 자선단체의 세부정보를 얻을 수 있습니다. CharityStruct 객체의 배열을 반환합니다.
10. getMyCharities() : 이 함수를 사용하면 사용자는 활동 중인 모든 자선 단체에 대한 세부 정보를 얻을 수 있습니다. CharityStruct 객체의 배열을 반환합니다.
11. getSupports() : 이 함수를 사용하면 누구나 특정 자선단체의 모든 후원자의 세부정보를 얻을 수 있습니다. SupportStruct 객체의 배열을 반환합니다.
12. payTo() : 자금 이체에 사용되는 내부 함수입니다. 지정된 주소로 지정된 양의 Ether를 보냅니다.
13. currentTime() : 이 내부 함수는 Unix Epoch 이후의 현재 시간을 초 단위로 반환합니다. 기부 및 자선 활동에 대한 타임스탬프를 표시하는 데 사용됩니다.

계약 배포 및 시딩

이제 스마트 계약을 배포하고 이를 더미 데이터로 채워 보겠습니다.

1. 프로젝트 루트에 scripts 폴더를 만듭니다.
2. scripts 내부에 deploy.js 와 seed.js 파일을 생성하고 다음 코드를 추가합니다.

스크립트 배포

시드 스크립트

3. 다음 명령을 실행하여 계약을 배포하고 데이터를 시드합니다.

    yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2

올바르게 수행했다면 아래와 같은 유사한 출력이 표시됩니다.

이 시점에서 우리는 스마트 계약을 프런트엔드에 통합하기 시작할 수 있습니다.

프런트엔드 통합

먼저 프로젝트 루트에 services 폴더를 생성하고, 그 안에 blockchain.tsx 파일을 생성합니다. 이 파일에는 스마트 계약과 상호 작용하는 기능이 포함되어 있습니다.

제공된 코드는 스마트 계약과 상호 작용하기 위한 블록체인 서비스의 TypeScript 구현입니다. 이 서비스를 통해 사용자는 자선 단체 창설 및 업데이트, 기부 등을 포함하여 자선 플랫폼에서 작업을 수행할 수 있습니다.

다음은 기능별 분석입니다.

1. getEthereumContracts() : 이 함수는 서비스가 상호 작용할 Ethereum 계약 인스턴스를 가져옵니다. 사용자가 연결된 이더리움 계정이 있는지 확인하고 이를 사용하여 계약과 상호 작용합니다. 그렇지 않으면 무작위로 생성된 지갑을 사용합니다.
2. getAdmin() : 이 함수는 계약의 소유자를 반환합니다.
3. getCharities() , getMyCharities() , getCharity() : 이 함수는 각각 모든 자선단체, 현재 사용자가 만든 자선단체, 특정 자선단체를 ID별로 가져옵니다.
4. getSupporters() : 이 함수는 특정 자선단체의 후원자를 해당 ID로 가져옵니다.
5. createCharity() , updateCharity() : 이 함수를 통해 사용자는 각각 새로운 자선 단체를 생성하거나 기존 자선 단체를 업데이트할 수 있습니다.
6. makeDonation() : 이 함수를 사용하면 사용자가 특정 자선단체에 기부할 수 있습니다.
7. deleteCharity() : 이 함수를 사용하면 자선 단체의 소유자가 자선 단체를 삭제할 수 있습니다.
8. banCharity() : 이 함수를 사용하면 계약 소유자가 자선 단체를 금지할 수 있습니다.
9. structuredCharities() , structuredSupporters() : 이는 계약에서 반환된 데이터를 보다 사용하기 쉬운 형식으로 구조화하는 도우미 함수입니다.

다음 코드를 사용하여 bitfinity 네트워크를 포함하도록 services 내부의 provider.tsx 파일을 업데이트합니다.

스마트 계약과 상호작용하는 페이지

다음으로, 블록체인 서비스의 기능을 프런트엔드의 해당 인터페이스에 연결합니다.

아니요 1: 모든 Charities Update pages/index.tsx 표시하여 getCharities() 함수에서 데이터를 가져옵니다.

화면에 표시되기 전에 Redux를 사용하여 블록체인 데이터를 저장하는 방법을 확인하세요.

2번: 사용자의 자선 단체 표시 현재 사용자의 자선 단체를 가져오기 위해 useEffect() 후크를 사용하도록 pages/projects.tsx 를 업데이트합니다.

현재 사용자의 자선 단체를 검색하기 위해 useEffect() 후크를 사용하고 Redux를 사용하여 여러 구성 요소에 걸쳐 블록체인의 데이터를 처리하고 표시하는 방법을 참고하세요. 이는 페이지와 구성 요소 전반에 걸쳐 반복되는 패턴입니다.

3번: 새 자선단체 만들기 pages/donations/create.tsx 업데이트하여 양식 제출에 createCharity() 함수를 사용하세요.

4번: 단일 자선 업데이트 pages/donations/[id].tsx 표시하여 getServerSideProps() , getCharity() 및 getSupporters() 함수를 사용하여 ID별로 자선 단체 및 후원자를 검색합니다.

5번: 기존 자선 단체 편집 pages/donations/edit/[id].tsx 업데이트하여 getCharity() 함수를 사용하여 ID별로 자선 단체를 검색하고 양식 필드를 채웁니다.

ID별로 자선 단체를 검색하는 데 getCharity() 함수가 어떻게 사용되었는지, 그리고 양식 필드를 채우는 데 어떻게 사용되었는지 보셨나요?

스마트 계약이 포함된 구성 요소

위 페이지에서 했던 것처럼 스마트 계약과 상호 작용하도록 다음 구성 요소를 업데이트해 보겠습니다.

아니요 1: 자선 금지 처리 핸들Banning handleBanning() 함수를 사용하여 banCharity() 함수를 호출하도록 components/Ban.tsx 업데이트합니다.

2번: 자선 삭제 처리 핸들 handleDelete() 및 deleteCharity() 함수를 사용하여 자선 목록 제거 절차를 실행하려면 components/Delete.tsx 파일을 업데이트하세요.

3번: 자선 단체에 기부 makeDonation handleSubmit() makeDonation() 를 사용하도록 components/Donor.tsx 파일을 업데이트합니다.

기타 구성요소

Redux가 통합되어 업데이트해야 하는 나머지 구성 요소는 다음과 같습니다.

NavBtn 구성 요소 사용자가 자선 단체 정보를 탐색, 삭제 및 편집할 수 있도록 하는 구성 요소를 검토하고 업데이트합니다. 클릭 시 삭제 모달을 트리거하려면 Redux를 활용하세요.

결제 구성요소 Redux의 구현을 검토하고 업데이트하여 해당 버튼을 클릭하면 기부, 지지자 및 금지 모달을 트리거합니다.

지원 구성요소는 닫기 버튼을 클릭할 때 지원자 모달을 닫도록 Redux 구현을 검토하고 업데이트합니다.

이러한 업데이트를 구현함으로써 이제 모든 구성 요소와 페이지가 스마트 계약에 연결되어 프로젝트가 완료되었음을 표시합니다.

그동안 Nextjs 서버가 다운된 경우, yarn dev 실행하여 다시 가동할 수 있습니다.

더 자세히 알아보려면 YouTube 채널 에서 이 빌드의 전체 동영상을 시청하는 것이 좋습니다.

결론

이 튜토리얼에서는 Next.js, Solidity 및 TypeScript를 사용하여 분산형 자선 플랫폼을 구축했습니다. 우리는 개발 환경을 설정하고, Redux 스토어를 구축하고, 스마트 계약을 블록체인에 배포했습니다. 스마트 계약을 프런트엔드와 통합하여 원활한 사용자 경험을 만들었습니다.

튜토리얼 전반에 걸쳐 Web3 애플리케이션 구축, 스마트 계약 작성, 정적 유형 검사 통합에 대한 귀중한 기술을 습득했습니다.

이제 자신만의 분산형 자선 플랫폼을 만들 준비가 되었습니다. 즐거운 코딩을 즐기시고 Web3 세계에서 혁신을 펼쳐보세요!