파케스터(Farcaster) 캐스트 액션: 간단한 캐스트 액션 만들기
🖊️ 브라이언 도일
캐스트 액션이란?
캐스트 액션은 사용자가 Farcaster 클라이언트에서 설치하고 버튼을 클릭해서 액션을 트리거할 수 있는 기능이다. 이 튜토리얼에서는 OnchainKit을 사용해서 간단한 캐스트 액션을 만드는 방법을 다룬다. 이 액션은 사용자에게 메시지를 반환하는 것이 목표이다.
주의 캐스트 액션은 새롭게 추가된 기능이고, 이를 만드는 도구들은 빠르게 발전하고 있어. 캐스트 액션 문서와 OnchainKit 변경 로그를 꼭 확인해야함!
목표
이 튜토리얼을 끝내면 다음을 수행할 수 있음:
-
사용자가 트리거할 때 메시지를 반환하는 Farcaster 캐스트 액션 만들기
-
캐스트에 새기능을 추가할 위치 식별하는 것
-
사용자가 캐스트 액션을 설치하는 것
전제 조건
Vercel
앱을 Vercel에 배포하는 데 익숙하거나 다른 솔루션을 직접 사용할 수 있어야 함. Vercel 배포 튜토리얼을 확인해보기 ㅇㅅㅇ!
Farcaster
지갑이 연결된 Farcaster 계정이 있어야 하며 Base 채널을 확인해서 이런 튜토리얼이 나올 때마다 소식을 받아보자!
설정
-
a-frame-in-100-lines의 사본을 만들기. 이 템플릿을 사용해서 새 사본을 쉽게 만들 수 있다. 기존 사본을 사용 중이라면 최신 버전의 OnchainKit이 있는지 확인하기! -
yarn install을 실행하기. -
캐스트 액션을 작동하려면 서버에 배포해야 하니까 CI/CD로 레포를 Vercel에 연결하기. 이를 통해 테스트 및 재배포가 더 쉬워지지만, 라이브 캐스트 액션을 망가뜨릴 가능성도 커지기 마련임.
-
app/config.ts를 열어서NEXT_PUBLIC_URL을 새 배포 URL로 업데이트하기.*a-frame-in-100-lines
간단한 캐스트 액션 만들기
캐스트 액션은 프레임이 API 엔드포인트를 호출하는 방식과 비슷하게 작동한다. 그래서 프레임을 기대하는 엔드포인트 코드를 캐스트 액션을 관리하도록 빠르게 수정할 수 있음!
1. api 폴더에 action이라는 새 폴더를 만들고 route.ts 파일을 생성해서 앱에 새 라우트를 생성하기. OnchainKit과 Next.js에서 디펜던시를 가져오기:
import { FrameRequest, getFrameMessage } from '@coinbase/onchainkit/frame';
import { NextRequest, NextResponse } from 'next/server';
2. 프레임을 반환하지 않으니까 getFrameHtmlResponse는 필요 없음.
3. POST 핸들러와 응답 함수를 스텁(Stub):
async function getResponse(req: NextRequest): Promise<NextResponse> {
// TODO
}
export async function POST(req: NextRequest): Promise<Response> {
console.log('POST');
return getResponse(req);
}
export async function GET(req: NextRequest): Promise<Response> {
console.log('GET');
return getResponse(req);
}
export const dynamic = 'force-dynamic';
4. 요청을 프레임과 동일하게 파싱하고 검증하기
const body: FrameRequest = await req.json();
const { isValid, message } = await getFrameMessage(body, { neynarApiKey: 'NEYNAR_ONCHAIN_KIT' });
if (!isValid) {
return new NextResponse('Message not valid', { status: 500 });
}
5. 프레임 대신 문자열 message와 200 상태 코드를 가진 json NextResponse를 반환하기
return NextResponse.json({ message: 'Hello from the frame route' }, { status: 200 });
캐스트 액션 테스트하기
작업을 커밋해서 Vercel에서 배포를 트리거하면 캐스트 액션 플레이그라운드에서 캐스트 액션을 테스트할 수 있다. 링크를 클릭해서 직접 테스트해보자. URL을 자신의 것으로 바꾼 후 액션을 제출하면 라우트에서 메시지가 반환되는 걸 볼 수 있다.
캐스트 액션에서 작업 수행하기
응답을 보내기 전에 원하는 작업을 수행해서 캐스트 액션에 기능을 추가할 수 있다. 가능성은 다음과 같다:
-
요청에서 캐스트 해시 또는 캐스터 FID를 추출해서 사용하기
-
데이터베이스 또는 스마트 계약에서 읽거나 쓰기
-
사용자 대신 API 호출을 사용하는 기타 모든 작업
지금은 현재 시간을 사용자에게 알리는 간단한 추가 기능을 추가할 수 있어:
// Get the current date and time
const now = new Date();
const date = now.toLocaleDateString();
const time = now.toLocaleTimeString();
// Format them as a string
const dateTime = `${date} ${time} UTC`;
return NextResponse.json({ message: dateTime }, { status: 200 });
캐스트 액션 설치하기
캐스트 액션을 설치하려면 Cast Actions 문서 하단의 Octicon 중 하나를 선택해야 해. 또한 액션의 이름을 결정해야 해. 이를 사용해서 사용자가 액션을 설치하도록 워프캐스트로 딥링크를 만들어. 현재는 기존 액션을 대체하지만, 곧 다중 액션 기능이 추가될 예정이야.
예시:
https://warpcast.com/~/add-cast-action?actionType=post&name=Current+Time&icon=clock&postUrl=https%3A%2F%2Ftest-cast-actions.vercel.app%2Fapi%2Faction
캐스트 액션 플레이그라운드에는 이 링크를 만들기 위한 도구가 준비되어 있다.
웹 페이지에서
웹 페이지에서 사용자가 액션을 설치할 수 있도록 하려면 링크를 포함해. 사이트 루트를 업데이트해서 링크를 포함해:
export default function Page() {
return (
<>
<div>
<a href="https://warpcast.com/~/add-cast-action?actionType=post&name=Current+Time&icon=clock&postUrl=https%3A%2F%2Ftest-cast-actions.vercel.app%2Fapi%2Faction">
Click here to install the Current Time action on Warpcast.
</a>
</div>
</>
);
}
프레임에서
마지막으로, 루트 페이지의 프레임도 설치 링크를 포함하도록 업데이트하:
const frameMetadata = getFrameMetadata({
buttons: [
{
action: 'link',
label: 'Add Current Time Action',
target:
'https://warpcast.com/~/add-cast-action?actionType=post&name=Current+Time&icon=clock&postUrl=https%3A%2F%2Ftest-cast-actions.vercel.app%2Fapi%2Faction',
},
],
image: {
src: `${NEXT_PUBLIC_URL}/park-3.png`,
aspectRatio: '1:1',
},
});
결론
이 튜토리얼에서는 사용자가 캐스트에서 현재 날짜와 시간을 받도록 하는 Farcaster 캐스트 액션을 알아보았다. 또한 액션에 추가 기능을 추가할 위치와 방법을 습득했다. 마지막으로 사용자가 캐스트 액션을 설치할 수 있도록 링크와 프레임도 생성 완료
새로운 개발에 대한 최신 정보를 얻으려면 Base 채널을 참고하기!
评论 (0)