[4주차] NFT 블록체인 마켓 앱 만들기 with 그라운드X

 <BApp 개발/배포 프로세스>

1. 서비스 설계

     스마트 컨트랙트

     프론트엔드

     (서버)

2. 노드 운영 유무

3. 수수료

4. 유저 상호 작용

     유저의 지갑(개인키) 사용 방식

    트랜잭션 생성 후 결과 확인

 

스마트 컨트랙트

1. 업그레이드 어려움

2. read, write

3. 컨트랙트 연동

4. event

5. 테스트

6. security // 코드 검사해주는 업체들이 있음

 

노드 운영

1. 블록체인 노드 관련된 api를 얼마나 이용 할 것 인가

2. 스마트 컨트랙트 관련 api

3. 노드 운영/유지비 vs KAS

 

수수료

1. Bapp 서비스는 원래 유저가 수수료를 지불하는 구조

2. 유저가 수수료를 안 내게 하고 싶다면?

3. 스마트 컨트랙트의 수수료

 

유저 상호작용

1. 개인키(지갑)를 어떻게 사용하게 할 것인가

2. 특정 액션 이후의 결과값 확인

   결과 확인은 어떻게?

   거래가 성공? 실패? 내역

 

<Market BApp 설계>

1. 기능

 KLAY 지갑 주소 가져오기

 KLAY 잔고 조회

 NFT 조회(유저, 마켓)

 NFT 발행

 NFT 판매(마켓에 올리는 것)

 NFT 구매

 

2. 상호작용 설계

 KLAY 지갑 주소 가져오기 : Klip API

 KLAY 잔고 조회 : a에서 가져온 주소로 caver.js(getbalance)

 NFT 조회(유저, 마켓) : caver.js (특정 주소의 NFT id, uri)

 NFT 발행 : Klip API

 NFT 판매(마켓에 올리는 것) :  Klip API

 NFT 구매 :  Klip API

 브라우져에서는 QR, 모바일에서는 바로 klip 지갑 앱으로 연동

 

 

<Market : 잔고 조회>

이번 시간에는 Klip_API를 이용해서 Klip Wallet 주소를 가져와서 잔고를 조회하는 기능을 만들 것이다.

 

<Market : NFT 조회>

 

<Market : NFT 발행>

 

<Market : NFT 판매/구매>

 

<CleanUp (Klip API 정리)>

모든 기능은 저번시간까지해서 다 끝났고, 나머지 ui관련 css 작업도 하고, 모달도 사용해보고, 앱의 시작과 끝 라이프사이클을 살짝 적용해보는 시간을 가져보겠다.

브라우져에서는 qr코드가 뜨고, 모바일에서는 바로 앱으로 연결 될 수 있도록 설정해보겠다.

 

//useKlip에서 화면의 사이즈로 모바일인지 아닌지를 간단하게 판별해 보겠다.
const isMoblie = window.screen.width >= 1280 ? false : true;


//qr코드나 안드로이드인지 ios인지 링크 가져올 때 방법이나 메소드가 각각 다른데 우리는 klipaccess라는 urㅣ을 가져오는 방식을 이용해 보겠다.
const getKlipAcessUrl = (method, request_key) => {
//method가 qr인 경우
if (method === 'QR') {
return `https://klipwallet.com/?target=/a2a?request_key=${request_key}`;
}
// 나머지인 경우 바로 앱으로 연결됨(딥링크?기술)
return `kakaotalk://klipwallet/open?url=https://klipwallet.com/?target=/a2a?request_key=${request_key}`;
};

//const qrcode를 지우고, 모바일인경우 adroid를 아닌경우 QR을 리턴해준다.
if (isMobile) {
	window.location.href = getKlipAcessUrl("android", request_key);
} else {
			setQrvalue(getKlipAcessUrl("QR", request_key));
		}

 

useEffect라는 함수가 있어서 앱이 처음 켜졌을 때 바로 어떤 일을 실행할지 정할 수 있음.

 

useEffect(() => {
		//앱 시작하자마자 앱 연동하게 하고
		getUserData();
		//마켓에 있는 카드들 가져오게
		fectchMarketNFTs();
	}, [])

 

그 다음은 모달을 만들어 보겠다.

앱 시작했을 때 주소 연동하도록 유도하는게 자연스러울 것 같다.

// Modal
const {showModal, setShowModal} = useState(false);
const {modalProps, setModalProps} = useState({
title : "MODAL",
onConfirm : () => {},
})

 

TypeError: Cannot read property 'title' of undefined

 

fortawesome 라이브러리

<추가기능 소개>

SDK로 개발도 가능

api 온라인으로도 할 수 있음

 

<웹/메인넷 배포>

로컬이 아닌 누구나 접속할 수 있게 url을 가진 형태로 만들어보겠다.

netlify라는 서비스를 이용하면 쉽게 배포할 수 있다.

https://www.netlify.com/

Netlify: Develop & deploy the best web experiences in record time

 

Build setting 부분이 잘 되지 않는다면

build command 부분에 `Cl= `를 써주면 된다.(띄어쓰기포함)

 

 

<전체 리뷰>

1. 설계 구현 환인

2. 어떤 걸 더 공부해야 할까요?

• Klaytn
  • node - 한번쯤 설치해서 실행해보는 것도 추천
  • blockchain - node를 설치해보고 실행해보면서 blockchain과 관련된 지식들도 습득할 수 있음.
• Solidity
  • test, security - 업그레이드와 보안이 어렵기 때문에 test 코드를 작성하는 법을 익히고, 코드안에서 security를 어떻게 지켜야 할 지(버그가 없는) 공부
  • event - 웹이나 앱과 상호작용할 때 중요한 사건들을 알 수 있다.

3. 진짜 블루오션!!

완성도 높은 서비스들이 많지도 않고, 우리가 만든 market bapp만해도 사실 완성도도 높고, 수준도 높은 bapp이다.