본문 바로가기
블록체인교육/Web3(DApp)

[NFT] Moralis활용한 NFT 마켓플레이스 제작

by Danny_Kim 2022. 5. 23.

* Moralis를 활용한 NFT 플랫폼 제작 실습과정입니다.

 

아래 글에서 NFT 컨트랙트 제작 후 ropsten에 배포된 상태에서 진행되는 실습입니다.

https://kimsfamily.kr/498

 

[NFT] 이더리움 NFT(ERC721) 발행

* Dapp NFT 플랫폼을 만들기 위한 사전 ERC721 발행관련 실습 1. IPFS 서비스 중 Pinata 서비스에 이미지 업로드 (https://www.pinata.cloud/) - 가입 후 이메일 승인 후 로그인 하면 아래의 페이지가 뜸. - IPFS..

kimsfamily.kr

 

1. NFT marketplace0boilerplate 다운 및 상세 가이드라인 참고

https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-boilerplate

 

GitHub - ethereum-boilerplate/ethereum-nft-marketplace-boilerplate

Contribute to ethereum-boilerplate/ethereum-nft-marketplace-boilerplate development by creating an account on GitHub.

github.com

 

2. Yarn 설치(NPM)

 

(MAC) sudo npm install –global yarn
설치 확인

4. 다운 받은 소스파일에서 env.example 를 .env로 rename

 

5. Moralis.io 회원가입 및 ETH(Ropsten선택) [https://moralis.io/]

6. Moralis에서 서버 url 및 Application ID 가져온 후, .env에 붙여넣기

 - moralis에서 확인 후

 - .env에 붙여넣기

 

7. marketplaceBoilerplate.solropstendeploy하여 Contract Address, ABI 가져옴.

 -marketplaceBoilerplate.sol 을 remix에서 deploy

- 생성된 Contract를 아래 MoralisDappProvider.js에 붙여넣기.

- Contract Address 붙여넣는 과정 (deploy후 CA확인)

- MoralisDappProvider.js에 컨트랙트 주소 넣기.

 

- ABI도 복사하여 붙여넣기. (remix에서 ABI가져와서 MoralisDappProvider.js에 붙여넣기)

* ABI 복사 시 아래 툴 활용하면 코드를 줄일 수 있음 (https://www.textfixer.com/tools/remove-line-breaks.php)

 

8. Moralis에서 서버 동기화 (Sync And Watch Contract Events)

- (*) 이벤트에서 주소만 Topic 에 복사

- (*) ABI에서 MarketItemCreated 부분만 복사.

- 정상적으로 싱크되면 아래와 같은 메세지 뜸.

 

9. Chains.jsx에서 Ropsten 주석 해제

10. 이미지 정보 설정 관련.

 - opensea에서 해당 컨트랙트 정보 확인 가능.

 - ropsten(ox3)에 관련 이미지 주소, 이름, 컨트랙트 정보 업데이트(**)

- 아래 부분을 기존에 발행했던 NFT 컨트랙트 주소 및 이미지 정보로 업데이트 필요(**)

 

11. Yarn start 및 확인.

- yarn start

- 웹페이지 확인

- 판매 및 구매 테스트 진행

 

- Moralis 에서 MarketItems 확인

 

 

 

12. netlify 홈페이지에 업로드 하기.(React 프로젝트 NETLIFY로 배포하기)

(아래 링크 참고하여 홈페이지 업로드)

 

 

React 프로젝트 Netlify로 배포하기

Create-react-app으로 React 프로젝트를 완성했다면? 완성한 프로젝트를 배포해볼 차례다. 아래의 링크로 들어가보면 https://create-react-app.dev/docs/deployment/ Deployment | Create React App npm run bui..

fe-paradise.tistory.com

 

반응형

댓글0