Tác giả: Figo, IOSG Ventures
Farcaster là mạng Decentralized Social , cung cấp giải pháp thay thế cho các nền tảng truyền thống như Twitter và Reddit. Người dùng có thể tạo hồ sơ, đăng “diễn viên” và theo dõi người khác trong khi vẫn duy trì quyền sở hữu tài khoản và kết nối của họ. Cách tiếp cận phi tập trung này cho phép người dùng di chuyển giữa các ứng dụng khác nhau mà không làm mất dữ liệu hoặc kết nối, ưu tiên quyền tự chủ, quyền riêng tư và khả năng tương tác của người dùng.
Khung là gì?
Khung là một tính năng độc đáo của Farcaster cho phép người dùng nhúng trải nghiệm tương tác trực tiếp vào Cast của họ. Điều này biến các bài đăng tĩnh thành nội dung động, nâng cao trải nghiệm người dùng. Khung có thể bao gồm các thành phần như cuộc thăm dò ý kiến, cập nhật trực tiếp hoặc toàn bộ ứng dụng, cung cấp nhiều cách khác nhau để thu hút người dùng.
Cách thức hoạt động của khung
Từ góc độ kỹ thuật, Farcaster Frames sử dụng cả khả năng on-chain và Ngoài chuỗi . Chúng là những ứng dụng web nhẹ được nhúng trong Casts. Thông số khung nêu ra các yêu cầu và tiêu chuẩn kỹ thuật để tạo các Khung tương thích, đảm bảo chúng hoạt động trên toàn hệ sinh thái Farcaster.
Các khung mở rộng tiêu chuẩn Đồ thị mở, chuyển đổi các nội dung nhúng tĩnh thành trải nghiệm tương tác. Nhà phát triển bắt đầu bằng cách chọn hình ảnh Open Graph rồi thêm các nút tương tác. Khi một nút được nhấp vào, lệnh gọi lại sẽ được kích hoạt, cập nhật Khung bằng nội dung hoặc hành động mới. Sự tương tác này được quản lý bởi người dùng và nhà phát triển, thúc đẩy cách tiếp cận phi tập trung.
Warpcast, một trong những khách hàng chính của Farcaster, hỗ trợ các Khung tương tác này, cho phép người dùng tạo nội dung động trên nền tảng. Sơ đồ bên dưới minh họa sự khác biệt giữa nhúng Open Graph (OG) tiêu chuẩn và Frame OG bên trong Warpcast.
Ví dụ về Khung
Các ứng dụng của Farcaster Frames rất đa dạng, phục vụ cho cả người dùng và nhà phát triển. Dưới đây là một số ví dụ:
- Cuộc thăm dò tương tác : Người dùng có thể nhúng các cuộc thăm dò trực tiếp trong Diễn viên của họ, cho phép những người theo dõi bỏ phiếu và xem kết quả theo thời gian thực. Điều này giúp tăng cường sự tham gia của người dùng và thúc đẩy sự tương tác của cộng đồng.
- Trưng bày NFT : Nhà phát triển có thể tạo Khung cho phép người dùng Mint và hiển thị NFT trực tiếp trong Cast của họ. Điều này thu hẹp khoảng cách giữa phương tiện truyền thông xã hội và thế giới NFT, tạo điều kiện cho các hình thức thể hiện sáng tạo mới.
- Nguồn cấp dữ liệu trực tiếp và Phòng trưng bày : Khung có thể được sử dụng để tạo nguồn cấp dữ liệu trực tiếp hoặc phòng trưng bày tương tác, cung cấp một cách năng động và hấp dẫn để chia sẻ nội dung trên Farcaster.
Bằng cách kích hoạt những trải nghiệm tương tác này, Farcaster Frames đang thay đổi cách tạo, chia sẻ và tương tác nội dung trên mạng xã hội. Họ cung cấp một khuôn khổ cho các nhà phát triển để xây dựng các ứng dụng đổi mới tích hợp liền mạch với mạng Farcaster, mở ra những khả năng mới cho cả việc quản lý nội dung và mức độ tương tác của người dùng.
Ếch là gì và tại sao?
Frog , được phát triển bởi Paradigm và Wevm, là một khung được thiết kế để tạo Khung Farcaster. Nó đơn giản hóa quy trình, cho phép các nhà phát triển xây dựng các khung tương tác và hiệu suất cao một cách dễ dàng. Frog bao gồm trình gỡ lỗi tích hợp, tải lại trực tiếp và các tùy chọn triển khai liền mạch.
Những thách thức hiện tại trong việc xây dựng khung Farcaster
Phát triển trên một khuôn khổ mới có thể đặt ra những thách thức như:
- Quản lý trạng thái phức tạp : Xử lý phản ứng và trạng thái phía khách hàng một cách hiệu quả.
- Các ràng buộc về kích thước và hành vi : Điều hướng các giới hạn về kích thước và chức năng của thẻ khung.
- Mối quan tâm về bảo mật : Đảm bảo xác minh tin nhắn an toàn và tính toàn vẹn khung.
- Tối ưu hóa hiệu suất : Quản lý hiệu suất tải và giảm thiểu nội dung HTML không cần thiết.
Ếch giải quyết những thách thức này như thế nào
Frog giải quyết những vấn đề này bằng cách giới thiệu các tính năng giúp đơn giản hóa việc Phát triển Khung:
- Trình gỡ lỗi cục bộ với tính năng Tải lại trực tiếp : Cung cấp phản hồi tức thì, tăng tốc độ phát triển.
- Quản lý trạng thái đơn giản hóa : Sử dụng nguồn gốc trạng thái để xử lý trạng thái dễ dàng.
- Bảo mật nâng cao : Cung cấp các công cụ xác minh tích hợp để phát triển khung an toàn.
- Hiệu suất được tối ưu hóa : Cho phép tạo các khung được tối ưu hóa cao để có thời gian tải nhanh.
- Triển khai linh hoạt : Cho phép triển khai vào bất kỳ thời gian chạy JavaScript nào, tránh sự ràng buộc của nhà cung cấp và mang lại sự linh hoạt hơn.
Sử dụng Frog không chỉ đơn giản hóa quá trình phát triển mà còn nâng cao trải nghiệm của nhà phát triển bằng cách giúp việc tạo các khung tương tác an toàn, hiệu quả và dễ tiếp cận hơn. Điều này mở ra khả năng đổi mới vô tận trên Farcaster.
Hướng dẫn dự án: MarketCapOf Frame
Chúng tôi sẽ xây dựng Khung Farcaster lấy cảm hứng từ MarketCapOf. Công cụ này cho phép chúng ta hình dung giá của một loại tiền điện tử (A) sẽ như thế nào nếu nó có vốn hóa thị trường của một loại tiền điện tử khác (B). Đây là một công cụ hữu ích để hiểu rõ hơn về thị trường tiền điện tử.
Dưới đây là bản xem trước nhanh về những gì chúng tôi sẽ tạo:
Đến cuối hướng dẫn này, bạn sẽ:
- Xây dựng Khung Farcaster có khả năng tính toán và hiển thị linh hoạt giá của một loại tiền điện tử dựa trên vốn hóa thị trường của một loại tiền điện tử khác.
- Xác thực và kiểm tra Khung của bạn trên Warpcast, đảm bảo nó hoạt động trơn tru trong hệ sinh thái Farcaster.
Bắt đầu nào!
Điều kiện tiên quyết
Trước khi chúng ta bắt đầu, hãy đảm bảo bạn có những điều sau:
- npm Installed : Đảm bảo bạn đã cài đặt Trình quản lý gói Node (npm) trên máy của mình. Nếu bạn chưa có nó, bạn có thể tải xuống và cài đặt nó từ đây.
- Tài khoản Farcaster : Tạo tài khoản Farcaster nếu bạn chưa có. Bạn có thể đăng ký tại Farcaster.
Lưu ý : Hướng dẫn này giả định rằng bạn cảm thấy thoải mái và có hiểu biết cơ bản về JavaScript.
Thiết lập dự án của bạn
Đầu tiên, hãy mở terminal của bạn và khởi tạo dự án của bạn với Frog:
npm init ếch -- -t tiếp theo
Bạn sẽ thấy lời nhắc thiết lập như thế này:
Làm theo hướng dẫn để đặt tên cho dự án của bạn.
Sau khi dự án được khởi tạo,
- Điều hướng vào thư mục dự án: cd project-name
- Tôi khuyên bạn nên mở thư mục dự án trong IDE ưa thích của mình. Ví dụ: nếu bạn đang sử dụng VS Code, bạn có thể thực hiện việc này bằng: code .
- Bây giờ trong thư mục dự án, hãy cài đặt các phụ thuộc cần thiết: npm install
- Bắt đầu máy chủ phát triển! npm chạy dev
Khi máy chủ đang chạy, hãy truy cập https://localhost:3000/api/dev trong trình duyệt của bạn.
Một trong những tính năng tốt nhất của Frog là nó đi kèm với giao diện người dùng thử nghiệm Khung được tích hợp sẵn. Công cụ này cung cấp một cách trực quan để xem những thay đổi được thực hiện trong mã của bạn được phản ánh một cách trực quan, giúp quá trình phát triển nhanh hơn và hiệu quả hơn.
Mẫu mặc định là một khung demo đơn giản cho phép bạn chọn một mục và xem lựa chọn của mình. Mặc dù đây là điểm khởi đầu hữu ích nhưng vẫn còn một số việc cần làm để chuyển nó thành Khung MarketCapOf của chúng tôi.
Xây dựng ứng dụng của chúng tôi
Hãy đi sâu vào việc xây dựng ứng dụng của chúng tôi. Bắt đầu bằng cách điều hướng đến app/api/[[...routes]]/route.tsx . Tệp này là trung tâm của ứng dụng của chúng tôi và là nơi đặt các điểm cuối của khung. Bạn sẽ thấy ứng dụng Frog được khởi tạo bằng cách gọi lớp Frog.
Chúng tôi sẽ sửa đổi điều này để thiết lập ứng dụng của chúng tôi. Hãy bắt đầu bằng cách thêm một tiêu đề:
ứng dụng const = Ếch mới ({
Đường dẫn nội dung: "/",
basePath: "/api",
title: "Frame Market Cap", // thêm tiêu đề
// Cung cấp Hub để kích hoạt xác minh khung.
// trung tâm: neynar({ apiKey: 'NEYNAR_FROG_FM' })
});Khung Farcaster bao gồm hai thành phần giao diện người dùng chính: Hình ảnh và tập hợp Ý định. Chúng ta có thể chỉ định các thành phần này trong API Frog thông qua các thuộc tính hình ảnh và ý định của phản hồi khung được trả về.
Trong cùng tệp này, bạn cũng sẽ thấy việc trả lại hình ảnh về giao diện người dùng dễ dàng như thế nào. Bằng cách viết mã JSX và áp dụng kiểu dáng, Frog sẽ tự động chuyển đổi nó thành hình ảnh.
app.frame('/', (c) => {
const { nútValue, inputText, trạng thái } = c
const quả = inputText || nútGiá trị
trả về c.res({
hình ảnh: (
<div>
{/* Mã JSX ở đây được tự động chuyển đổi thành hình ảnh */}
</div>
),
ý định: [
...
],
})
})Thiết kế luồng ứng dụng của chúng tôi
Ý tưởng chính của ứng dụng của chúng tôi rất đơn giản. Đây là cách nó sẽ hoạt động:
- Bắt đầu từ / root, hình ảnh trang đầu tiên sẽ mô tả chức năng của ứng dụng của chúng tôi và nhắc người dùng nhập thông tin.
- Người dùng sẽ nhập một cặp token (Token A và Token B). Người dùng nhấn Gửi.
- Chúng tôi chuyển thông tin đầu vào này sang khung /so sánh mới, sau đó chúng tôi sẽ tìm nạp dữ liệu cho các mã thông báo được yêu cầu từ API CoinMarketCap (CMC).
Thuộc tính ý định sẽ chứa một loạt các mục có thể thực hiện được. Trong trường hợp của chúng tôi, chúng tôi sẽ chỉ giữ một TextInput cho cặp Token (được định dạng là tokenA,tokenB) và nút gửi.
Chúng tôi cũng cần chỉ định một hành động để xác định nơi người dùng sẽ được đưa đến sau khi gửi. Hãy thực hiện hành động này hướng người dùng đến điểm cuối /compare .
Chúng ta cũng hãy loại bỏ đoạn mã không cần thiết phía trên kết quả trả về của biến c . Chúng tôi sẽ sớm thảo luận thêm về điều này.
Sau khi thực hiện những cập nhật này, chúng ta sẽ có:
app.frame("/", (c) => {
trả về c.res({
hành động: "/so sánh",
hình ảnh: (
<div
phong cách={{
AlignItems: "center", nền: "black", display: "flex", flexDirection: "column",
flexWrap: "nowwrap", chiều cao: "100%",justContent: "center", textAlign: "center", chiều rộng: "100%",
}}
>
<div
phong cách={{
màu: "trắng", cỡ chữ: 60, kiểu phông chữ: "bình thường", khoảng trắng: "bọc trước",
}}
>
{"Kiểm tra giá của A\n với vốn hóa thị trường của B!"}
</div>
</div>
),
ý định: [<TextInput placeholder="TOKENA,TOKENB" />, <Button value="mine">Kiểm tra ngay!</Button>],
});
});Với những thay đổi này, root / frame mới của chúng tôi đã được thiết lập và sẵn sàng hoạt động! Bây giờ, hãy làm mới Giao diện người dùng Frog để xem khung được cập nhật với các trường nhập và mô tả mới.
Tuy nhiên, nếu bạn nhập mã thông báo (giả sử ETH, BTC ) và nhấn “Kiểm tra ngay!” thì sẽ không có gì xảy ra. Điều này là do chúng tôi chưa tạo điểm cuối /compare ! Hãy làm điều đó ngay bây giờ.
Truyền ngữ cảnh
Trong cùng một tệp Route.tsx , hãy tạo một tuyến khung mới. Chúng ta có thể bắt đầu bằng cách sao chép những gì chúng ta có cho tuyến /. Tuy nhiên, trước khi thực hiện bất kỳ thay đổi nào, chúng ta hãy xem xét kỹ hơn tham số c thực sự là gì bằng cách ghi lại giá trị của nó. Hiện tại, trước tiên chúng ta có thể xóa các thuộc tính hành động và ý định của khung mới này.
app.frame("/so sánh", (c) => {
console.log({ c })
trả về c.res({
hình ảnh: (
<div
phong cách={{
AlignItems: "center", nền: "black", display: "flex", flexDirection: "column",
flexWrap: "nowwrap", chiều cao: "100%",justContent: "center", textAlign: "center", chiều rộng: "100%",
}}
>
<div
phong cách={{
màu: "trắng", cỡ chữ: 60, kiểu phông chữ: "bình thường", khoảng trắng: "bọc trước",
}}
>
{"Kiểm tra giá của A\n với vốn hóa thị trường của B!"}
</div>
</div>
)
});
});Làm mới giao diện người dùng khung, nhập thông tin đầu vào và nhấp vào “Kiểm tra ngay!”. Chúng ta hãy xem giá trị của c được ghi lại:
Từ nhật ký này, chúng ta thấy rằng c thực sự là đối tượng bối cảnh khung. Nó lưu trữ thông tin hữu ích như inputText được gửi từ khung cuối cùng. Tham số c này chứa các thuộc tính khác về khung và ngữ cảnh trước đó, chẳng hạn như:
- Dữ liệu khung (trustedData/untrustedData)
- Chỉ số/giá trị của nút hoặc giá trị đầu vào đã được tương tác với
- Một hàm để lấy và thiết lập trạng thái
- Đường dẫn ban đầu/bắt đầu của khung
- URL hiện tại của khung
- Và hơn thế nữa
Đây là cách chúng tôi chuyển bối cảnh và đầu vào của người dùng từ khung này sang khung tiếp theo. Chúng tôi có thể sử dụng bối cảnh này để trích xuất thông tin cặp Token thông báo do người dùng gửi. Hiện tại, chúng ta có thể bỏ qua frameData vì chúng ta chưa xác thực khung. Điều này sẽ được đề cập khi chúng tôi thiết lập xác minh khung trong phần sau. Hiện tại, chúng tôi sẽ sử dụng c.inputText để lấy cặp Token do người dùng nhập và xử lý cặp mã thông báo đó theo tuyến /compare của chúng tôi.
Thiết lập khung “/so sánh” của chúng tôi
Sau khi truy xuất các mã thông báo được yêu cầu (Token A và Token B), dữ liệu cần thiết từ CoinMarketCap sẽ bao gồm giá hiện tại và Định giá pha loãng hoàn toàn (FDV) của mỗi Token. Hiện tại, hãy thiết lập cấu trúc cơ bản bằng cách sử dụng dữ liệu mô phỏng tĩnh và tạo bố cục giao diện người dùng đơn giản để hiển thị kết quả.
Đây là mã được cập nhật cho khung /compare :
app.frame("/so sánh", (c) => {
const { inputText = "" } = c;
const tokenA = inputText.split(",")[0].toUpperCase(); // ETH
const tokenB = inputText.split(",")[1].toUpperCase(); // BTC
// Dữ liệu giả cho Token A và Token B
giá cố địnhA = 3000;
const marketCapA = 360000000;
giá cố địnhB = 57000;
const marketCapB = 1100000000;
// Tính giá của Token A nếu nó có vốn hóa thị trường của Token B
hệ số const = marketCapB / marketCapA;
const tính Giá = số nhân * giáA;
trả về c.res({
hình ảnh: (
<div
phong cách={{
căn chỉnhItems: "center", nền: "đen", hiển thị: "flex", flexDirection: "cột", chiều cao: "100%",
justContent: "center", textAlign: "center", width: "100%", color: "white", whiteSpace: "pre-wrap"
}}
>
<div
style={{ fontSize: 40, lềBottom: 20 }}
>
{`${tokenA} với vốn hóa thị trường là ${tokenB}`}
</div>
<div
style={{ fontSize: 80, lềBottom: 30 }}
>
{`$${tínhPrice.toFixed(2)} (${multiplier.toFixed(2)}x)`}
</div>
<div
style={{ fontSize: 30 }}
>
{`${tokenA} Vốn hóa thị trường: $${marketCapA.toFixed(2)}\n${tokenB} Vốn hóa thị trường: $${marketCapB.toFixed(2)}`}
</div>
</div>
),
});
});Bây giờ, hãy quay lại giao diện người dùng khung và kiểm tra bằng cách nhập ETH, BTC làm đầu vào.
Tuyệt vời! Bây giờ chúng ta có thể thấy rằng logic công thức đã hoạt động và bố cục của chúng ta cũng trông ổn. Tiếp theo, chúng ta cần thiết lập việc truy xuất dữ liệu thực tế.
Tạo các chức năng tiện ích
Tại thư mục gốc của dự án của bạn, tạo một thư mục utils mới và khởi tạo tệp index.tsx bên trong thư mục này. Đây là nơi chúng ta sẽ lưu trữ các hàm tiện ích của mình.
Ứng dụng của chúng tôi phụ thuộc vào khả năng truy xuất dữ liệu giá động. Để làm điều này, chúng tôi sẽ sử dụng API CoinMarketCap. Bạn có thể nhận khóa API miễn phí tại đây .
Đầu tiên, tạo tệp .env.local trong thư mục gốc của dự án của bạn. Đây là nơi chúng tôi sẽ lưu trữ CMC_API_KEY .
// .env.local
CMC_API_KEY=<khóa api giới hạn thị trường tiền xu của bạn>
Bạn có thể cần phải khởi động lại chương trình trong thiết bị đầu cuối để đọc tệp môi trường.
Tiếp theo, thêm mã sau vào tệp index.tsx trong thư mục utils :
xuất const getTokenData = async (tokenSymbols: string) => {
phản hồi const = đang chờ tìm nạp(`https://pro-api.coinmarketcap.com/v2/cryptocurrency/quotes/latest?symbol=${tokenSymbols}`, {
tiêu đề: {
"X-CMC_PRO_API_KEY": process.env.CMC_API_KEY dưới dạng chuỗi,
},
});
nếu (!response.ok) {
ném Lỗi mới(`Không thể tìm nạp dữ liệu: ${response.statusText}`);
}
trả về phản hồi.json();
};
xuất const getTokenPrice = async (tokenSymbol: string) => {
thử {
const tokenData = đang chờ tìm nạpTokenData(tokenSymbol);
const tokenArray = tokenData.data[tokenSymbol.toUpperCase()];
if (!tokenArray || tokenArray.length === 0) {
ném Lỗi mới (`Không tìm thấy dữ liệu cho ${tokenSymbol}`);
}
const tokeninfo = tokenArray[0];
const usdQuote = tokeninfo.quote && tokeninfo.quote.USD;
nếu (!usdQuote) {
đưa ra Lỗi mới(`Không có báo giá USD cho ${tokenSymbol}`);
}
trở lại {
giá: usdQuote.price,
vốn hóa thị trường: usdQuote.market_cap,
};
} bắt (lỗi: bất kỳ) {
console.error(`Lỗi lấy giá Token cho ${tokenSymbol}:`, error.message);
trở lại {
giá: vô giá trị,
vốn hóa thị trường: null,
lỗi: error.message,
};
}
};Trong cùng một tệp, hãy thêm hàm formatNumber mà chúng ta có thể sử dụng để định dạng số chính xác trong ứng dụng của mình:
xuất định dạng constNumber = (num: number) => {
hãy định dạngNum = num.toFixed(2);
return formattedNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};Với các chức năng tiện ích này, giờ đây chúng tôi có thể tìm nạp dữ liệu Token từ CoinMarketCap và định dạng số để hiển thị.
Kết thúc “/so sánh”
Bây giờ hãy cập nhật khung /compare của chúng tôi với các hàm tiện ích mà chúng tôi đã viết. Vì việc tìm nạp giá Token mất thời gian nên hãy nhớ thêm chờ đợi vào đầu hàm và khai báo hàm async .
Đầu tiên, cập nhật khung /compare để sử dụng các chức năng tiện ích:
nhập { getTokenprice, formatNumber } từ './utils';
app.frame("/compare", async (c) => {
const { inputText = "" } = c;
const tokenA = inputText.split(",")[0].toUpperCase();
const tokenB = inputText.split(",")[1].toUpperCase();
const { price: priceA, marketCap: marketCapA, error: errorA } = đang chờ getTokenPrice(tokenA);
const { price: priceB, marketCap: marketCapB, error: errorB } = đang chờ getTokenPrice(tokenB);
// ...
});Tiếp theo, thêm một nút để cho phép người dùng quay lại khung gốc và nhập một cặp khác. Để thực hiện việc này, chúng tôi chỉ cần thêm một nút có hành động điều hướng quay lại / .
trả về c.res({
hoạt động: "/",
hình ảnh: (
// ...
),
ý định: [<Button>Thử một cặp khác</Button>],
});Cuối cùng, chúng ta hãy thêm một số xử lý lỗi và hoàn tất khung /so sánh đã sẵn sàng!
app.frame("/compare", async (c) => {
const { inputText = "" } = c;
thử {
mã thông báo const = inputText.split(",");
if (tokens.length < 2) {
ném Lỗi mới ("Đầu vào không hợp lệ. Vui lòng cung cấp hai mã thông báo cách nhau bằng dấu phẩy.");
}
const tokenA = token[0].toUpperCase();
const tokenB = token[1].toUpperCase();
const { price: priceA, marketCap: marketCapA, error: errorA } = đang chờ getTokenPrice(tokenA);
const { price: priceB, marketCap: marketCapB, error: errorB } = đang chờ getTokenPrice(tokenB);
if (errorA || errorB) {
ném Lỗi mới (errorA || errorB);
}
hệ số const = marketCapB / marketCapA;
const tính Giá = số nhân * giáA;
trả về c.res({
hoạt động: "/",
hình ảnh: (
<div
phong cách={{
căn chỉnhItems: "center", nền: "đen", hiển thị: "flex", flexDirection: "cột", chiều cao: "100%",
justContent: "center", textAlign: "center", width: "100%", color: "white", whiteSpace: "pre-wrap"
}}
>
<div
style={{ fontSize: 40, lềBottom: 20 }}
>
{`${tokenA} với vốn hóa thị trường là ${tokenB}`}
</div>
<div
style={{ fontSize: 80, lềBottom: 30 }}
>
{`$${formatNumber(tínhPrice)} (${formatNumber(multiplier)}x)`}
</div>
<div
style={{ fontSize: 30 }}
>
{`${tokenA} Vốn hóa thị trường: $${formatNumber(marketCapA)}\n${tokenB} Vốn hóa thị trường: $${formatNumber(marketCapB)}`}
</div>
</div>
),
ý định: [<Button action="/">Thử một cặp khác</Button>],
});
} bắt (lỗi: bất kỳ) {
console.error("Đã xảy ra lỗi:", error.message);
trả về c.res({
hoạt động: "/",
hình ảnh: (
<div
phong cách={{
căn chỉnhItems: "center", nền: "đen", hiển thị: "flex", flexDirection: "cột", chiều cao: "100%",
justContent: "center", textAlign: "center", width: "100%", color: "white", whiteSpace: "pre-wrap"
}}
>
<div
style={{ fontSize: 40, lềBottom: 20 }}
>
{`Đã xảy ra lỗi :(`}
</div>
</div>
),
ý định: [<Button action="/">Quay lại và thử lại</Button>],
});
}
});Hãy thử một lần! Giờ đây, ứng dụng của bạn có thể truy xuất dữ liệu giá động từ CoinMarketCap và hiển thị phép tính được định dạng chính xác trong giao diện người dùng. Ứng dụng của chúng tôi đã hoàn tất! 🎉
Xác nhận và kiểm tra
Xác thực khung
Việc xác minh và xác nhận các khung là rất quan trọng trước khi đưa chúng vào sản xuất. Nếu không xác minh, đầu vào có thể bị giả mạo, ảnh hưởng đến tính toàn vẹn của dữ liệu. Chúng tôi muốn người dùng được xác minh và đăng nhập vào Farcaster thông qua ứng dụng khách Warpcast, đảm bảo rằng các tương tác với khung là chân thực.
Đối với các trường hợp sử dụng như thu thập phiếu bầu hoặc các tương tác quan trọng khác, việc xác minh là điều cần thiết. Tuy nhiên, đối với các ứng dụng đơn giản hơn, như ví dụ hiện tại của chúng tôi, nó có thể không quan trọng bằng.
Frog làm cho quá trình xác minh trở nên đơn giản bằng cách kích hoạt một trung tâm. Hai hub được sử dụng phổ biến nhất là Neynar và Pinata. Trong mẫu mã của chúng tôi, chúng tôi có thể bỏ ghi chú mã cho Neynar để kích hoạt xác minh cho khung của chúng tôi.
Đây là cách bạn có thể kích hoạt Neynar:
// nhập khẩu khác..
nhập { neynar } từ "ếch/trung tâm";
ứng dụng const = Ếch mới ({
đường dẫn nội dung: "/",
basePath: "/api",
tiêu đề: "Giới hạn thị trường khung",
trung tâm: neynar({ apiKey: "NEYNAR_FROG_FM" }),
});
Sau khi được bật, khung của bạn sẽ yêu cầu xác minh. Tuy nhiên, điều này có nghĩa là việc chạy ứng dụng trên localhost sẽ dẫn đến lỗi chữ ký không hợp lệ do localhost chưa đăng nhập vào Farcaster.
Bây giờ, chúng ta cần khám phá các cách để kiểm tra khung của mình trong cài đặt trực tuyến, được kết nối với máy khách Farcaster.
Kiểm tra trực tuyến
Để kiểm tra Khung Farcaster của bạn đúng cách, bạn cần đăng nhập vào tài khoản Farcaster. Điều này có thể được thực hiện theo hai cách:
- Đăng nhập qua Giao diện người dùng thử nghiệm Frog : Nhấp vào nút đăng nhập trên cùng bên phải trong Giao diện người dùng thử nghiệm Frog để đăng nhập.
- Trình xác thực khung Warpcast : Sử dụng Trình xác thực khung Warpcast.
Đối với phương pháp thứ hai, bạn cần làm cho localhost của mình có thể truy cập được internet. Tôi thực sự khuyên bạn nên sử dụng ngrok. Nếu bạn đang sử dụng máy Mac, bạn có thể cài đặt nó bằng cách chạy brew install ngrok/ngrok/ngrok trong terminal của mình. Sau khi cài đặt, chỉ cần nhập ngrok http 3000 để truy cập localhost của bạn thông qua URL công khai.
Sau đó, đi tới Trình xác thực khung Warpcast và nhập URL ngrok của bạn. Ví dụ: https://7a32-193-142-202-2.ngrok-free.app/api
Tuy nhiên, cá nhân tôi thích phương pháp đầu tiên hơn vì nó nhanh hơn và dễ dàng hơn. Bạn chỉ cần quét mã QR đăng nhập và bạn sẽ được kết nối sau chưa đầy một phút!
Sau khi đăng nhập, hãy thử xem lại giá trị của c tại điểm cuối /so sánh :
Chúng ta có thể thấy rằng trường được xác minh hiện hiển thị true . Với điều này, giờ đây chúng ta cũng có thể lấy inputText từ frameData , điều này an toàn hơn vì nó đã được xác minh.
Cập nhật khung /compare của bạn để sử dụng frameData để trích xuất inputText :
app.frame("/compare", async (c) => {
console.log({ c });
// const { inputText = "" } = c;
// thay vào đó hãy sử dụng cái này khi xác minh được bật
const { frameData, đã xác minh } = c
const { inputText = ""} = frameData || {}
// ...
});Bằng cách đảm bảo các khung của bạn được xác minh, bạn nâng cao tính bảo mật và độ tin cậy, đảm bảo rằng các tương tác của người dùng là hợp pháp và được bảo vệ.
Phần thưởng: Triển khai!
Là một phần thưởng, bạn cũng có thể triển khai ứng dụng của mình lên Vercel bằng Vercel CLI. Điều này sẽ cho phép bạn chia sẻ Khung Farcaster của mình với người khác và xem nó trực tiếp trên web. Để triển khai, chỉ cần làm theo các bước sau:
- Cài đặt Vercel CLI: npm install -g vercel
- Đăng nhập vào Vercel: đăng nhập vercel
- Để triển khai ứng dụng của bạn, từ thư mục gốc của dự án, hãy chạy: npm run triển khai
Để biết hướng dẫn chi tiết hơn, bạn có thể tham khảo tài liệu Frog này về việc triển khai lên Vercel.
Bước tiếp theo
Chúc mừng bạn đã xây dựng được Khung Farcaster đầu tiên của mình! Bây giờ bạn đã nắm được những điều cơ bản về cách dễ dàng xây dựng và kiểm tra khung của mình bằng Frog. Với Frames, bạn đang bước vào một thế giới đầy khả năng tương tác trên Farcaster. Điều này chỉ là khởi đầu; còn rất nhiều điều nữa để khám phá và sáng tạo trong không gian sáng tạo, thú vị này. Tiềm năng sáng tạo và gắn kết là vô hạn.
Một số hướng bạn có thể cân nhắc là khám phá các tương tác Khung nâng cao hơn, chẳng hạn như:
- Khung giao dịch : Phát triển các khung tương tác với hợp đồng thông minh, cho phép giao dịch on-chain trực tiếp trong Farcaster.
- Khung tích hợp xã hội : Tận dụng dữ liệu xã hội gốc của Farcaster để tạo ra các ứng dụng phong phú, có tính nhận thức xã hội.
- Tương tác nâng cao : Thiết kế các khung hướng dẫn người dùng qua các quy trình chi tiết để tăng cường mức độ tương tác.
Để khám phá thêm về Frames, vui lòng xem trang web Trung tâm nhà phát triển iOSG beta của chúng tôi, nơi bạn sẽ tìm thấy kho lưu trữ GitHub cho hướng dẫn này và các blog, tài liệu nghiên cứu, sự kiện và các tài nguyên khác lấy nhà phát triển làm trung tâm trong tương lai. Bạn cũng có thể tham gia Cộng đồng nhà phát triển iOSG của chúng tôi trên Telegram để được hỗ trợ và thảo luận về mọi vấn đề kỹ thuật!
Nếu bạn thấy hướng dẫn này hữu ích, hãy chia sẻ và vỗ tay. Cảm ơn một lần nữa, và hãy theo dõi để biết thêm! Hãy tiếp tục khám phá và xây dựng!
Tài nguyên
Khung Farcaster : https://docs.farcaster.xyz/learn/what-is-farcaster/frames
Ếch : https://www. Paradigm.xyz/2024/02/frames
Khung Farcaster: Xây dựng khung hình đầu tiên của bạn bằng ếch ban đầu được xuất bản trên IOSG Ventures trên Trung bình, nơi mọi người đang tiếp tục cuộc trò chuyện bằng cách nêu bật và phản hồi câu chuyện này.
