[컨퍼런스 리뷰 / if(kakao) 2021] 한 줄로 구현하는 블록체인 어플리케이션

이 세션에서는 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;
 }
}

1. solidity로 contract 작성
2. Cypress 메인넷에 contract 배포
3. 배포된 주소 및 ABI 복사해두기
4. 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 를 사용해야한다.)