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

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

 

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

https://kimsfamily.kr/498

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

 

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

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

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

 

2. Yarn 설치(NPM)

 

•(MAC) sudo npm install –global yarn

•설치 확인

 

3. Yarn Install

 - yarn install

 

* YARN 설치 오류시 (GIT 설치 필요)

https://git-scm.com/downloads

Git - Downloads

 

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

 

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

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

 - moralis에서 확인 후

 - .env에 붙여넣기

 

7. marketplaceBoilerplate.sol을 ropsten에 deploy하여 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로 배포하기