저자: Figo, 아이오에스지 벤처스(IOSG Ventures)
Farcaster는 Twitter 및 Reddit과 같은 기존 플랫폼에 대한 대안을 제공하는 데소(Decentralized Social) 네트워크입니다. 사용자는 계정과 연결의 소유권을 유지하면서 프로필을 만들고, "캐스트"를 게시하고, 다른 사람을 팔로우할 수 있습니다. 이러한 분산형 접근 방식을 통해 사용자는 데이터나 연결을 잃지 않고 여러 앱 간에 이동할 수 있으며 사용자 자율성, 개인 정보 보호 및 상호 운용성을 우선시할 수 있습니다.
프레임이란 무엇입니까?
프레임은 사용자가 Cast에 직접 대화형 경험을 삽입할 수 있게 해주는 Farcaster의 고유한 기능입니다. 이는 정적 게시물을 동적 콘텐츠로 전환하여 사용자 경험을 향상시킵니다. 프레임에는 설문 조사, 실시간 업데이트 또는 전체 애플리케이션과 같은 요소가 포함될 수 있으며 사용자 참여를 위한 다양한 방법을 제공합니다.
프레임 작동 방식
기술적 관점에서 Farcaster 프레임은 온체인 및 오프체인 기능을 모두 사용합니다. Cast에 내장된 경량 웹 애플리케이션입니다. 프레임 사양은 호환 가능한 프레임을 생성하기 위한 기술 요구 사항 및 표준을 간략하게 설명하여 Farcaster 생태계 전반에서 작동하도록 보장합니다.
프레임은 오픈 그래프 표준을 확장하여 정적 임베드를 대화형 경험으로 변환합니다. 개발자는 먼저 오픈 그래프 이미지를 선택한 다음 대화형 버튼을 추가합니다. 버튼을 클릭하면 콜백이 트리거되어 새로운 콘텐츠나 작업으로 프레임을 업데이트합니다. 이러한 상호 작용은 사용자와 개발자가 관리하여 분산형 접근 방식을 조성합니다.
Farcaster의 주요 클라이언트 중 하나인 Warpcast는 이러한 대화형 프레임을 지원하여 사용자가 플랫폼에서 동적 콘텐츠를 만들 수 있도록 합니다. 아래 다이어그램은 표준 Open Graph(OG) 삽입과 Warpcast 내부의 프레임 OG 간의 차이점을 보여줍니다.
프레임의 예
Farcaster Frames의 애플리케이션은 다양하여 사용자와 개발자 모두에게 적합합니다. 여기 몇 가지 예가 있어요.
- 대화형 설문조사 : 사용자는 Cast에 실시간 설문조사를 삽입하여 팔로어가 투표하고 실시간 결과를 볼 수 있습니다. 이를 통해 사용자 참여가 향상되고 커뮤니티 상호 작용이 촉진됩니다.
- NFT 쇼케이스 : 개발자는 사용자가 캐스트 내에서 직접 NFT를 민트(Mint) 하고 표시할 수 있는 프레임을 생성할 수 있습니다. 이는 소셜 미디어와 NFT 세계 사이의 격차를 해소하여 새로운 형태의 창의적인 표현을 가능하게 합니다.
- 라이브 피드 및 갤러리 : 프레임을 사용하여 라이브 피드나 대화형 갤러리를 만들 수 있으며 Farcaster에서 콘텐츠를 공유하는 역동적이고 매력적인 방법을 제공합니다.
이러한 대화형 경험을 가능하게 함으로써 Farcaster Frames는 소셜 미디어에서 콘텐츠가 생성, 공유 및 상호 작용하는 방식을 변화시키고 있습니다. 이는 개발자가 Farcaster 네트워크와 원활하게 통합되는 혁신적인 애플리케이션을 구축할 수 있는 프레임워크를 제공하여 콘텐츠 큐레이션과 사용자 참여 모두에 대한 새로운 가능성을 열어줍니다.
개구리는 무엇이며 왜?
패러다임 과 Wevm이 개발한 Frog는 Farcaster 프레임을 생성하기 위해 설계된 프레임워크입니다. 이는 프로세스를 단순화하여 개발자가 대화형의 고성능 프레임을 쉽게 구축할 수 있게 해줍니다. Frog에는 내장된 디버거, 라이브 다시 로드 및 원활한 배포 옵션이 포함되어 있습니다.
Farcaster 프레임 구축의 현재 과제
새로운 프레임워크를 개발하면 다음과 같은 과제가 발생할 수 있습니다.
- 복잡한 상태 관리 : 클라이언트 측 반응성과 상태를 효율적으로 처리합니다.
- 크기 및 동작 제약 조건 : 프레임 태그의 크기 및 기능에 대한 제한 사항을 탐색합니다.
- 보안 문제 : 보안 메시지 확인 및 프레임 무결성을 보장합니다.
- 성능 최적화 : 로드 성능을 관리하고 불필요한 HTML 콘텐츠를 최소화합니다.
개구리가 이러한 문제를 해결하는 방법
Frog는 프레임 개발을 단순화하는 기능을 도입하여 이러한 문제를 해결합니다.
- 라이브 리로딩 기능이 있는 로컬 디버거 : 즉각적인 피드백을 제공하여 개발 속도를 높입니다.
- 단순화된 상태 관리 : 손쉬운 상태 처리를 위해 상태 파생을 활용합니다.
- 강화된 보안 : 안전한 프레임 개발을 위한 내장 검증 도구를 제공합니다.
- 최적화된 성능 : 빠른 로드 시간을 위해 고도로 최적화된 프레임을 생성할 수 있습니다.
- 유연한 배포 : 벤더 종속을 피하고 더 많은 유연성을 제공하여 모든 JavaScript 런타임에 배포할 수 있습니다.
Frog를 사용하면 개발 프로세스가 단순화될 뿐만 아니라 안전하고 효율적이며 대화형 프레임을 보다 쉽게 생성할 수 있어 개발자 경험이 향상됩니다. 이는 Farcaster의 혁신을 위한 무한한 가능성을 열어줍니다.
프로젝트 튜토리얼: MarketCapOf Frame
우리는 MarketCapOf에서 영감을 받아 Farcaster Frame을 구축할 것입니다. 이 도구를 사용하면 한 암호화폐(A)가 다른 암호화폐(B)의 시가총액을 가지고 있다면 그 가격이 얼마인지 시각화할 수 있습니다. 암호화폐 시장에 대한 통찰력을 얻는 데 유용한 도구입니다.
다음은 우리가 만들 내용에 대한 간략한 미리보기입니다.
이 튜토리얼을 마치면 다음을 수행하게 됩니다.
- 다른 암호화폐의 시가총액을 기준으로 한 암호화폐의 가격을 동적으로 계산하고 표시할 수 있는 Farcaster 프레임을 구축하세요.
- Warpcast에서 프레임을 검증하고 테스트하여 Farcaster 생태계 내에서 원활하게 작동하는지 확인하세요.
시작하자!
사전 요구 사항
시작하기 전에 다음 사항이 있는지 확인하세요.
- npm 설치됨 : 컴퓨터에 노드 패키지 관리자(npm)가 설치되어 있는지 확인하세요. 아직 갖고 있지 않다면 여기에서 다운로드하여 설치할 수 있습니다.
- Farcaster 계정 : 아직 Farcaster 계정이 없다면 생성하세요. Farcaster에서 가입하실 수 있습니다.
참고 : 이 튜토리얼에서는 귀하가 JavaScript에 익숙하고 기본적인 이해가 있다고 가정합니다.
프로젝트 설정
먼저 터미널을 열고 Frog를 사용하여 프로젝트를 초기화합니다.
npm initfrog -- -t 다음
다음과 같은 설정 프롬프트가 표시됩니다.
지침에 따라 프로젝트 이름을 지정하세요.
프로젝트가 초기화되면,
- 프로젝트 디렉터리로 이동합니다: cd project-name
- 선호하는 IDE에서 프로젝트 폴더를 여는 것이 좋습니다. 예를 들어 VS Code를 사용하는 경우 다음을 사용하여 이 작업을 수행할 수 있습니다.
- 이제 프로젝트 폴더 내에 필요한 종속 항목을 설치합니다. npm install
- 개발서버를 시작해보세요! npm 실행 개발자
서버가 실행되면 브라우저에서 https://localhost:3000/api/dev로 이동합니다.
Frog의 가장 뛰어난 기능 중 하나는 프레임 테스터 UI가 내장되어 있다는 것입니다. 이 도구는 시각적으로 반영된 코드 변경 사항을 확인할 수 있는 직관적인 방법을 제공하여 개발을 더 빠르고 효율적으로 만듭니다.
기본 템플릿은 항목을 선택하고 선택 항목을 볼 수 있는 간단한 데모 프레임입니다. 이것이 유용한 출발점이기는 하지만 이를 MarketCapOf Frame으로 변환하기 위한 몇 가지 작업이 아직 남아 있습니다.
앱 구축
앱 구축에 대해 자세히 살펴보겠습니다. app/api/[[...routes]]/route.tsx 로 이동하여 시작하세요. 이 파일은 우리 애플리케이션의 핵심이자 프레임 끝점이 가는 곳입니다. Frog 클래스를 호출하여 Frog 애플리케이션이 인스턴스화되는 것을 볼 수 있습니다.
이를 수정하여 앱을 설정하겠습니다. 제목을 추가하는 것부터 시작해 보겠습니다.
const 앱 = 새 개구리({
자산 경로: "/",
기본 경로: "/api",
title: "Frame Market Cap", // 제목 추가
// 프레임 검증을 활성화하기 위해 허브를 제공합니다.
// 허브: neynar({ apiKey: 'NEYNAR_FROG_FM' })
});Farcaster 프레임은 이미지와 인텐트 세트라는 두 가지 주요 UI 구성 요소로 구성됩니다. 반환된 프레임 응답의 이미지 및 인텐트 속성을 통해 Frog API에서 이러한 구성 요소를 지정할 수 있습니다.
동일한 파일에서 이미지를 UI에 반환하는 것이 얼마나 쉬운지 확인할 수도 있습니다. JSX 코드를 작성하고 스타일을 적용하면 Frog는 자동으로 이를 이미지로 변환합니다.
app.frame('/', (c) => {
const {buttonValue,inputText,status } = c
const 과일 = inputText || 버튼값
반환 c.res({
이미지: (
<div>
{/* 여기의 JSX 코드는 자동으로 이미지로 변환됩니다 */}
</div>
),
의도: [
...
],
})
})앱 흐름 설계
우리 앱의 주요 아이디어는 간단합니다. 작동 방식은 다음과 같습니다.
- / 루트에서 시작하는 첫 번째 페이지 이미지는 앱이 수행하는 작업을 설명하고 사용자에게 입력하라는 메시지를 표시합니다.
- 사용자는 토큰 쌍(토큰 A와 토큰 B)을 입력합니다. 사용자가 제출을 클릭합니다.
- 이 입력을 새로운 /compare 프레임에 전달한 다음 CoinMarketCap(CMC) API에서 요청된 토큰에 대한 데이터를 가져옵니다.
인텐트 속성 은 실행 가능한 항목의 배열을 보유합니다. 우리의 경우 토큰 쌍(tokenA,tokenB 형식)과 제출 버튼에 대해 하나의 TextInput만 유지합니다.
또한 제출 시 사용자가 이동할 위치를 결정하는 작업을 지정해야 합니다. 이 작업을 통해 사용자가 /compare 엔드포인트로 연결되도록 하겠습니다.
c 변수와 관련된 return 위의 불필요한 코드도 제거해 보겠습니다. 이에 대해서는 곧 더 자세히 논의하겠습니다.
이러한 업데이트를 수행한 후에는 다음을 수행하게 됩니다.
app.frame("/", (c) => {
반환 c.res({
작업: "/비교",
이미지: (
<div
스타일={{
alignItems: "center", 배경: "black", 디스플레이: "flex", flexDirection: "column",
flexWrap: "nowrap", 높이: "100%", justifyContent: "center", textAlign: "center", width: "100%",
}}
>
<div
스타일={{
색상: "흰색", 글꼴 크기: 60, 글꼴 스타일: "일반", 공백: "사전 포장",
}}
>
{"B의 시가총액으로 A의 가격\n을 확인하세요!"}
</div>
</div>
),
의도: [<TextInput placeholder="TOKENA,TOKENB" />, <Button value="mine">지금 확인하세요!</Button>],
});
});이러한 변경으로 인해 새로운 루트 / 프레임이 설정되고 사용할 준비가 되었습니다! 이제 Frog UI를 새로 고쳐 새 설명과 입력 필드가 포함된 업데이트된 프레임을 확인하세요.
그러나 토큰( 이더리움(ETH), 비트코인(BTC) 등)을 입력하고 "지금 확인!"을 누르면 아무 일도 일어나지 않습니다. 이는 아직 /compare 엔드포인트를 생성하지 않았기 때문입니다! 지금 해보자.
컨텍스트 전달
동일한 Route.tsx 파일에서 새 프레임 경로를 생성해 보겠습니다. / 경로에 대해 가지고 있는 것을 복사하는 것부터 시작할 수 있습니다. 그러나 변경하기 전에 해당 값을 기록하여 c 매개변수가 실제로 무엇인지 자세히 살펴보겠습니다. 지금은 먼저 이 새 프레임의 작업 및 의도 속성을 삭제할 수 있습니다.
app.frame("/비교", (c) => {
console.log({c })
반환 c.res({
이미지: (
<div
스타일={{
alignItems: "center", 배경: "black", 디스플레이: "flex", flexDirection: "column",
flexWrap: "nowrap", 높이: "100%", justifyContent: "center", textAlign: "center", width: "100%",
}}
>
<div
스타일={{
색상: "흰색", 글꼴 크기: 60, 글꼴 스타일: "일반", 공백: "사전 포장",
}}
>
{"B의 시가총액으로 A의 가격\n을 확인하세요!"}
</div>
</div>
)
});
});프레임 UI를 새로 고치고 입력한 후 “지금 확인!”을 클릭하세요. 기록되는 c 값을 살펴보겠습니다.
이 로그에서 우리는 c가 실제로 프레임 컨텍스트 개체임을 알 수 있습니다. 마지막 프레임에서 제출된 inputText 와 같은 유용한 정보를 저장합니다. 이 c 매개변수에는 다음과 같이 프레임 및 이전 컨텍스트에 대한 다른 속성이 포함되어 있습니다.
- 프레임 데이터(trustedData/untrustedData)
- 상호작용한 버튼 인덱스/값 또는 입력 값
- 상태를 도출하고 설정하는 함수
- 프레임의 초기/시작 경로
- 프레임의 현재 URL
- 그리고 더
이것이 한 프레임에서 다음 프레임으로 컨텍스트와 사용자 입력을 전달하는 방법입니다. 이 컨텍스트는 사용자가 제출한 토큰 쌍 정보를 추출하는 데 사용될 수 있습니다. 지금은 아직 프레임의 유효성을 검사하지 않으므로 FrameData를 무시할 수 있습니다. 이에 대해서는 이후 섹션에서 프레임 확인을 설정할 때 다루겠습니다. 지금은 c.inputText를 사용하여 사용자가 입력한 토큰 쌍을 가져오고 이에 따라 /compare 경로에서 처리하겠습니다.
"/비교" 프레임 설정
요청된 토큰(토큰 A 및 토큰 B)을 검색한 후 CoinMarketCap에서 필요한 데이터에는 각 토큰의 현재 가격과 완전 희석 가치(FDV)가 포함됩니다. 지금은 정적 모의 데이터를 사용하여 기본 구조를 설정하고 결과를 표시하는 간단한 UI 레이아웃을 만들어 보겠습니다.
/compare 프레임에 대한 업데이트된 코드는 다음과 같습니다.
app.frame("/비교", (c) => {
const { inputText = "" } = c;
const tokenA = inputText.split(",")[0].toUpperCase(); // 이더리움(ETH)
const tokenB = inputText.split(",")[1].toUpperCase(); // 비트코인(BTC)
// 토큰 A와 토큰 B에 대한 모의 데이터
const 가격A = 3000;
const marketCapA = 360000000;
const 가격B = 57000;
const marketCapB = 1100000000;
// 토큰 B의 시가총액이 있는 경우 토큰 A의 가격을 계산합니다.
const 승수 = marketCapB / marketCapA;
const 계산가격 = 승수 * 가격A;
c.res({
이미지: (
<div
스타일={{
alignItems: "center", 배경: "black", 디스플레이: "flex", flexDirection: "column", height: "100%",
justifyContent: "center", textAlign: "center", width: "100%", color: "white", whiteSpace: "pre-wrap"
}}
>
<div
스타일={{ 글꼴 크기: 40, marginBottom: 20 }}
>
{`${tokenA}, 시가총액 ${tokenB}`}
</div>
<div
스타일={{ 글꼴 크기: 80, marginBottom: 30 }}
>
{`$${calculatedPrice.toFixed(2)} (${multiplier.toFixed(2)}x)`}
</div>
<div
스타일={{ 글꼴 크기: 30 }}
>
{`${tokenA} 시가총액: $${marketCapA.toFixed(2)}\n${tokenB} 시가총액: $${marketCapB.toFixed(2)}`}
</div>
</div>
),
});
});이제 프레임 UI로 돌아가서 이더리움(ETH), 비트코인(BTC) 입력으로 입력하여 테스트합니다.
환상적입니다! 이제 수식 논리가 작동하고 레이아웃도 좋아 보이는 것을 볼 수 있습니다. 다음으로 실제 데이터 검색을 설정해야 합니다.
유틸리티 기능 생성
프로젝트의 루트 디렉터리에서 새 utils 폴더를 만들고 이 폴더 안에 index.tsx 파일을 초기화합니다. 여기에 유틸리티 함수를 저장할 것입니다.
우리 앱은 동적 가격 데이터를 검색할 수 있는지 여부에 달려 있습니다. 이를 위해 CoinMarketCap API를 사용합니다. 여기에서 무료 API 키를 얻을 수 있습니다.
먼저 프로젝트의 루트 디렉터리에 .env.local 파일을 만듭니다. 여기에 CMC_API_KEY 를 저장합니다.
// .env.local
CMC_API_KEY=<귀하의 코인 시가총액 API 키>
환경 파일을 읽으려면 터미널에서 프로그램을 다시 시작해야 할 수도 있습니다.
그런 다음 utils 폴더의 index.tsx 파일에 다음 코드를 추가합니다.
내보내기 const fetchTokenData = async (tokenSymbols: string) => {
const 응답 = 가져오기 대기(`https://pro-api.coinmarketcap.com/v2/cryptocurrency/quotes/latest?symbol=${tokenSymbols}`, {
헤더: {
"X-CMC_PRO_API_KEY": process.env.CMC_API_KEY(문자열),
},
});
if (!response.ok) {
새로운 오류 발생(`데이터를 가져오지 못했습니다: ${response.statusText}`);
}
response.json()을 반환합니다.
};
내보내기 const getTokenPrice = async (tokenSymbol: string) => {
노력하다 {
const tokenData = fetchTokenData(tokenSymbol)를 기다립니다.
const tokenArray = tokenData.data[tokenSymbol.toUpperCase()];
if (!tokenArray || tokenArray.length === 0) {
새로운 오류 발생(`${tokenSymbol}에 대한 데이터를 찾을 수 없습니다`);
}
const tokenInfo = tokenArray[0];
const usdQuote = tokenInfo.quote && tokenInfo.quote.USD;
if (!usdQuote) {
새로운 오류 발생(`${tokenSymbol}에는 USD 시세를 사용할 수 없습니다`);
}
반품 {
가격: usdQuote.price,
시가총액: usdQuote.market_cap,
};
} 잡기 (오류: 모두) {
console.error(`${tokenSymbol}에 대한 토큰 가격을 가져오는 중 오류가 발생했습니다:`, error.message);
반품 {
가격: null,
시가총액: null,
오류: error.message,
};
}
};동일한 파일에 앱 전체에서 숫자 형식을 올바르게 지정하는 데 사용할 수 있는 formatNumber 함수도 추가해 보겠습니다.
const formatNumber = (num: number) => { 내보내기
formattedNum = num.toFixed(2)를 허용합니다.
return formattedNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};이러한 유틸리티 기능을 사용하면 이제 CoinMarketCap에서 토큰 데이터를 가져오고 표시할 형식 번호를 가져올 수 있습니다.
"/비교" 끝
이제 우리가 작성한 유틸리티 함수로 /compare 프레임을 업데이트해 보겠습니다. 토큰 가격을 가져오는 데 시간이 걸리므로 함수 시작 부분에 wait 를 추가하고 함수 선언을 async 로 만드는 것을 기억하세요.
먼저 유틸리티 기능을 사용하도록 /compare 프레임을 업데이트합니다.
import { getTokenPrice, formatNumber } from './utils';
app.frame("/비교", async (c) => {
const { inputText = "" } = c;
const tokenA = inputText.split(",")[0].toUpperCase();
const tokenB = inputText.split(",")[1].toUpperCase();
const { 가격: 가격A, marketCap: marketCapA, 오류: errorA } = wait getTokenPrice(tokenA);
const { 가격: 가격B, marketCap: marketCapB, error: errorB } = wait getTokenPrice(tokenB);
// ...
});다음으로, 사용자가 루트 프레임으로 돌아가서 다른 쌍을 입력할 수 있도록 하는 버튼을 추가합니다. 이를 위해 / 로 다시 이동하는 작업이 포함된 버튼을 추가하기만 하면 됩니다.
c.res({
행동: "/",
이미지: (
// ...
),
의도: [<Button>다른 쌍 시도</Button>],
});마지막으로 오류 처리를 추가하고 /compare 프레임이 준비되었습니다!
app.frame("/비교", async (c) => {
const { inputText = "" } = c;
노력하다 {
const 토큰 = inputText.split(",");
if (tokens.length < 2) {
throw new Error("잘못된 입력입니다. 쉼표로 구분된 두 개의 토큰을 제공하십시오.");
}
const tokenA = 토큰[0].toUpperCase();
const tokenB = 토큰[1].toUpperCase();
const { 가격: 가격A, marketCap: marketCapA, error: errorA } = wait getTokenPrice(tokenA);
const { 가격: 가격B, marketCap: marketCapB, error: errorB } = wait getTokenPrice(tokenB);
if (오류A || 오류B) {
새로운 오류 발생(errorA || errorB);
}
const 승수 = marketCapB / marketCapA;
const 계산 가격 = 승수 * 가격A;
반환 c.res({
행동: "/",
이미지: (
<div
스타일={{
alignItems: "center", 배경: "black", 디스플레이: "flex", flexDirection: "column", height: "100%",
justifyContent: "center", textAlign: "center", width: "100%", color: "white", whiteSpace: "pre-wrap"
}}
>
<div
스타일={{ 글꼴 크기: 40, marginBottom: 20 }}
>
{`${tokenA}, 시가총액 ${tokenB}`}
</div>
<div
스타일={{ 글꼴 크기: 80, marginBottom: 30 }}
>
{`$${formatNumber(calculatedPrice)} (${formatNumber(multiplier)}x)`}
</div>
<div
스타일={{ 글꼴 크기: 30 }}
>
{`${tokenA} 시가총액: $${formatNumber(marketCapA)}\n${tokenB} 시가총액: $${formatNumber(marketCapB)}`}
</div>
</div>
),
의도: [<Button action="/">다른 쌍을 사용해 보세요</Button>],
});
} 잡기(오류: 모두) {
console.error("오류가 발생했습니다:", error.message);
반환 c.res({
행동: "/",
이미지: (
<div
스타일={{
alignItems: "center", 배경: "black", 디스플레이: "flex", flexDirection: "column", height: "100%",
justifyContent: "center", textAlign: "center", width: "100%", color: "white", whiteSpace: "pre-wrap"
}}
>
<div
스타일={{ 글꼴 크기: 40, marginBottom: 20 }}
>
{`오류가 발생했습니다 :(`}
</div>
</div>
),
의도: [<Button action="/">돌아가서 다시 시도</Button>],
});
}
});시도 해봐! 이제 앱은 CoinMarketCap에서 동적 가격 데이터를 검색하고 UI에 올바른 형식의 계산을 표시할 수 있습니다. 우리 앱이 완성되었습니다! 🎉
검증 및 테스트
프레임 검증
프레임을 프로덕션에 적용하기 전에 프레임을 확인하고 검증하는 것이 중요합니다. 확인하지 않으면 입력이 스푸핑되어 데이터 무결성이 손상될 수 있습니다. 우리는 사용자가 Warpcast 클라이언트를 통해 Farcaster에 인증되고 로그인되어 프레임과의 상호 작용이 진짜인지 확인하기를 원합니다.
투표 수집 또는 기타 중요한 상호 작용과 같은 사용 사례의 경우 검증이 필수적입니다. 그러나 현재 예와 같이 더 간단한 애플리케이션의 경우 그다지 중요하지 않을 수 있습니다.
Frog는 허브를 활성화하여 확인 프로세스를 간단하게 만듭니다. 가장 일반적으로 사용되는 두 가지 허브는 Neynar와 Pinata입니다. 코드 템플릿에서 Neynar 코드의 주석 처리를 제거하여 프레임 확인을 활성화할 수 있습니다.
Neynar를 활성화하는 방법은 다음과 같습니다.
// 기타 수입품..
"frog/hubs"에서 {neynar }를 가져옵니다.
const 앱 = 새 개구리({
자산 경로: "/",
기본 경로: "/api",
title: "프레임 시가총액",
허브: neynar({ apiKey: "NEYNAR_FROG_FM" }),
});
활성화되면 이제 프레임 확인이 필요합니다. 그러나 이는 localhost가 Farcaster에 로그인되어 있지 않기 때문에 localhost에서 앱을 실행하면 잘못된 서명 오류가 발생한다는 것을 의미합니다.
이제 Farcaster 클라이언트에 연결된 온라인 설정에서 프레임을 테스트하는 방법을 모색해야 합니다.
온라인 테스트
Farcaster 프레임을 제대로 테스트하려면 Farcaster 계정에 로그인해야 합니다. 이 작업은 두 가지 방법으로 수행할 수 있습니다.
- 개구리 테스트 UI를 통해 로그인 : 개구리 테스트 UI 오른쪽 상단 로그인 버튼을 클릭해 로그인합니다.
- 워프캐스트 프레임 검사기 : 워프캐스트 프레임 검사기를 사용하세요.
두 번째 방법의 경우 로컬 호스트를 인터넷에 액세스할 수 있도록 해야 합니다. ngrok을 사용하는 것이 좋습니다. Mac을 사용하는 경우 터미널에서 Brew install ngrok/ngrok/ngrok를 실행하여 설치할 수 있습니다. 설치한 후 ngrok http 3000을 입력하면 공개 URL을 통해 로컬 호스트에 액세스할 수 있습니다.
그런 다음 Warpcast Frame Validator로 이동하여 ngrok URL을 입력하세요. 예: https://7a32-193-142-202-2.ngrok-free.app/api
하지만 저는 개인적으로 첫 번째 방법이 더 빠르고 쉽기 때문에 선호합니다. 로그인 QR코드를 스캔하시면 1분 안에 연결됩니다!
로그인한 후 /compare 엔드포인트에서 c 값을 다시 살펴보겠습니다.
이제 확인된 필드가 true 로 표시되는 것을 볼 수 있습니다. 이를 통해 이제 inputText를 FrameData 에서 가져올 수도 있습니다. 이는 검증되었으므로 더욱 안전합니다.
inputText 추출을 위해 frameData를 사용하도록 /compare 프레임을 업데이트하세요.
app.frame("/비교", async (c) => {
console.log({c });
// const { inputText = "" } = c;
// 검증이 활성화된 경우 대신 이것을 사용하십시오.
const { 프레임데이터, 확인됨 } = c
const { inputText = ""} = 프레임데이터 || {}
// ...
});프레임이 검증되면 보안과 신뢰가 향상되어 사용자 상호 작용이 합법적이고 보호됩니다.
보너스: 배포 중!
보너스로 Vercel CLI를 사용하여 Vercel에 앱을 배포할 수도 있습니다. 이를 통해 Farcaster Frame을 다른 사람들과 공유하고 웹에서 실시간으로 볼 수 있습니다. 배포하려면 다음 단계를 따르세요.
- Vercel CLI 설치: npm install -g vercel
- Vercel에 로그인: vercel 로그인
- 앱을 배포하려면 프로젝트의 루트 디렉터리에서 다음을 실행하세요.
자세한 지침은 Vercel 배포에 대한 이 Frog 문서를 참조하세요.
다음 단계
첫 번째 Farcaster 프레임 제작을 축하합니다! 이제 Frog를 사용하여 프레임을 쉽게 구축하고 테스트하는 방법의 기본 사항을 파악했습니다. 프레임을 사용하면 Farcaster에서 상호작용 가능성의 세계로 들어서게 됩니다. 이것은 시작에 불과합니다. 이 흥미롭고 혁신적인 공간에는 탐구하고 창조할 수 있는 것들이 훨씬 더 많이 있습니다. 창의성과 참여의 잠재력은 무한합니다.
고려할 수 있는 몇 가지 방향은 다음과 같은 고급 프레임 상호 작용을 탐색하는 것입니다.
- 트랜잭션 프레임 : 스마트 계약과 상호 작용하는 프레임을 개발하여 Farcaster 내에서 직접 온체인 트랜잭션을 가능하게 합니다.
- 사회적으로 통합된 프레임 : Farcaster의 기본 소셜 데이터를 활용하여 풍부하고 사회적으로 인식되는 애플리케이션을 만듭니다.
- 고급 상호 작용 : 참여도를 높이기 위한 세부 프로세스를 통해 사용자를 안내하는 프레임을 디자인합니다.
프레임을 더 자세히 살펴보려면 베타 IOSG 개발자 허브 사이트를 확인하세요. 여기에서 이 튜토리얼과 향후 블로그, 연구 자료, 이벤트 및 기타 개발자 중심 리소스에 대한 GitHub 저장소를 찾을 수 있습니다. 텔레그램의 IOSG 개발자 커뮤니티에 가입하여 기술적인 모든 것에 대한 지원과 토론을 할 수도 있습니다!
이 튜토리얼이 도움이 되었다면 공유하고 박수를 보내주세요. 다시 한 번 감사드리며, 앞으로도 계속 지켜봐 주시기 바랍니다! 계속 탐색하고 구축해 보세요!
자원
Farcaster 프레임 : https://docs.farcaster.xyz/learn/what-is-farcaster/frames
개구리 : https://www. 패러다임 .xyz/2024/02/frames
Farcaster Frames: Building Your First Frame Using Frog는 원래 미디엄(Medium) 의 아이오에스지 벤처스(IOSG Ventures) 에 게시되었으며, 여기서 사람들은 이 이야기를 강조하고 응답하여 대화를 계속하고 있습니다.
