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

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

by Danny_Kim 2022. 5. 23.

🔑 100배 수익 경험자의 노하우가 담긴 치트키 공개 🔑

  1. 네이버, 카카오 임직원들이 듣고 있는 비트코인 강의
  2. 아무도 알려주지 않은 비트코인, 이더리움의 리스크
  3. 블록체인 전문가들도 놓치기 쉬운 비트코인, 이더리움의 핵심 가치
  4. 천배 수익이 가능한 디파이(DeFi), 코인 생태계 지도
  5. 토큰 제작, 1억 연봉의 블록체인 개발자로 거듭나자!

* 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

 

🔑 100배 수익 경험자의 노하우가 담긴 치트키 공개 🔑

  1. 네이버, 카카오 임직원들이 듣고 있는 비트코인 강의
  2. 아무도 알려주지 않은 비트코인, 이더리움의 리스크
  3. 블록체인 전문가들도 놓치기 쉬운 비트코인, 이더리움의 핵심 가치
  4. 천배 수익이 가능한 디파이(DeFi), 코인 생태계 지도
  5. 토큰 제작, 1억 연봉의 블록체인 개발자로 거듭나자!

댓글