-
[컨퍼런스 리뷰 / if(kakao) 2021] 한 줄로 구현하는 블록체인 어플리케이션Record/review 2021. 11. 18. 12:00반응형
이 세션에서는 Klaytn에 트랜잭션을 전송할 때 Klip API를 사용하는 것에 대해 설명하고 있다.
Klip API는 외부 서비스에서 API를 통해 Klip에 있는 KLAY 및 대체 가능한 토큰(FT)을 전송하거나 Klip에서 카드(NFT)를 발행, 조회, 전송 또는 삭제하는 기능을 제공한다.
그 중 App2App API는 BApp 개발자가 별도 가입 절차없이 Klip 사용자를 인증하고 해당 사용자의 토큰 및 카드를 전송하기 위한 API이다. 또한 직접 개발한 스마트 컨트랙트 실행을 Klip 사용자에게 요청할 수 있다.
Prepare
BApp에서 어떤 작업을 실행하고 싶은지 정의하는 단계입니다. "인증"을 제외한 나머지는 Klaytn에 트랜잭션을 전송하는 작업입니다. 트랜잭션 전송을 위해 Prepare 단계에서는 트랜잭션 객체를 생성합니다. 실행 가능한 작업은 다음과 같습니다.
- 인증, KLAY 전송, 토큰 전송, 카드 전송, 스마트컨트랙트 실행
Request
위 단계에서 정의한 작업을 실제로 실행하도록 요청합니다.
"인증"은 BApp 회원의 Klip 지갑 주소(EOA)를 BApp으로 받아오는 작업이며 그 외에 나머지 작업은 위 트랜잭션에 서명(Signature)를 받는 작업입니다. 이 단계에서는 이들 트랜잭션에 Klaytn 계정 키로 서명(Signature)한 다음 Klaytn에 트랜잭션 전송 요청을 하고, 전송합니다.
Result
마지막으로 Result 단계는 Request 단계에서 요청한 작업을 실행했을 때 결과 또는 응답값을 얻는 단계입니다.
API는 형태에 따라서 두 가지로 구분할 수 있습니다. 먼저 Prepare와 Result 스텝은 Klip Backend 서버로 요청을 날리는 REST API 형태이고, Request 스텝은 Klip을 띄워서 처리하기 위한 Deep Link 형태입니다. 앞선 두 가지와 별개로 필요 시 사용자의 카드 소유 정보를 얻기위한 REST API 형태의 요청이 있습니다.
[KLAY 후원 App] 모바일용 klip-sdk 사용 코드 요약
import { prepare, request, getResult } from 'klip-sdk' const bappName = ‘후원하기 앱’ const to = '0xD8b1dC332...후원 받을 지갑 주소' const amount = '1' const res = await prepare.sendKLAY({ bappName, to, amount }) let requestKey // 🔥Step1. Prepare if (res.err) { // 에러 처리 } else if (res.request_key) { // request_key 보관 requestKey = res.request_key } // 🔥Step2. Request request(requestKey) // 🔥Step3. Result const id = setInterval(async () => { const res = await getResult(requestKey) if (res.status === 'completed') { clearTimeout(id) // 결과 처리 } }, 1000);
[후원 메시지 기록 App] 스마트 컨트랙트 코드
//solidity contract DonateMessage { string userMessage; function writeMessage (string memory message) public { userMessage = message; } function getMessage() public view returns (string memory) { return userMessage; } }
- solidity로 contract 작성
- Cypress 메인넷에 contract 배포
- 배포된 주소 및 ABI 복사해두기
- App에서 contract 연동 및 실행
[후원 메시지 기록 App] 모바일용 klip-sdk 사용 코드 요약
import { prepare, request, getResult } from 'klip-sdk' const bappName = ‘후원하기 앱’ const to = '0x1ab32...배포한 컨트랙트 주소' const value = '0' const abi = JSON.stringify({ "constant": false, "inputs": [ { "name": "message", "type": "string" } ], "name": "writeMessage", "outputs": [], "payable": false, "stateMutability": "nonpayable", "type": "function" }) const params = `[\\"${message}\\"]` // 🔥Step1. Prepare const res = await prepare.executeContract({ bappName, to, value, abi, params }) // 🔥Step2. Request request(requestKey) // 🔥Step3. Result const id = setInterval(async () => { const res = await getResult(requestKey) if (res.status === 'completed') { clearTimeout(id) // 결과 처리 } }, 1000);
출처: https://if.kakao.com/session/90
참고: https://docs.klipwallet.com/
React 샘플 깃허브 저장소: https://github.com/elliothan/simple-donation-app
(위 샘플은 모바일에서만 작동하므로, 피시와 모바일 모두 커버하려면 App2App REST API 를 사용해야한다.)
반응형'Record > review' 카테고리의 다른 글
[세션 리뷰 / 힙개비] 힙한 크립토, Dev에게 물어봐 (0) 2022.01.28 [세션 리뷰 / 힙서비] Web3토크 X NFT뱅크 PO 김정현님 (0) 2022.01.27 [컨퍼런스 리뷰 / if(kakao) 2021] NFT, 크리에이터와 팬을 연결하다 (1) 2021.11.16 [세미나 리뷰 / 원티드] 누구에게나 처음은 있었다 : 웹 개발자 (2) 2021.07.23 [책 리뷰] 인문학도, 개발자되다 (0) 2019.07.26