以太坊 - 什么是Farcaster？Farcaster框架创建的全面指南 - Quicknode

  • QuickNode
  • 发布于 2025-01-30 11:33
  • 阅读 13

这篇指南详细介绍了如何在以太坊上构建和开发开源社交网络Farcaster，特别是如何创建Farcaster Frames，通过互动方式计算用户钱包的借贷能力。文章结构清晰，层次分明，包含了技术介绍、具体步骤和代码示例，适合有一定编程基础的开发者阅读和实践。

概述

Farcaster 是一个基于以太坊构建的开源社交网络，旨在实现去中心化，允许用户创建个人资料、发布帖子（称为 Cast）、回复和组织社区（称为 Channels）。任何人都可以在 Farcaster 上创建账户，这是一个替代其他社交网络的选项，如 X（即 Twitter）和 Threads（由 Meta 提供）。

本指南将向你展示如何快速开始在 Farcaster 上开发，具体来说，你将完成以下任务：

你将要做的事情

  • 了解 Farcaster 及其作为开源去中心化社交网络的运作方式
  • 了解 Farcaster Frames 及其技术规范
  • 运行 Hubble 节点（免费但需最小硬件 规范）或获取 Neynar API（付费）以读取/写入 Farcaster 网络
  • 使用 TypeScript 和 Express.js 构建一个 Farcaster Frame；更具体地说，当点击按钮时，该 Frame 将计算一个 Farcaster 用户的钱包地址对借贷协议（即 Compound.finance）的借用能力

你将需要的条件

依赖项 版本
node.js 18.14>
cors ^2.8.5
ethers ^6.11.1
express ^4.17.1

什么是 Farcaster？

让我们深入了解 Farcaster 社交协议的功能。Farcaster 在链上存储用户身份，而像帖子和回复这样的数据则存储在链外。链上存储的主要数据包括 - 账户创建、发布数据（帖子、回复等）和将其他账户密钥添加到应用程序（稍后我们会讨论）。Farcaster 的链外架构使用被称为 “Hubs” 的节点，允许用户/开发者从 Farcaster 读取/写入。大多数 Farcaster 数据存储在这个网络上。任何人都可以运行 Hubble 节点，但你需要符合最低硬件 要求。以下是一个图示架构的图示：

Farcaster architecture

来源: https://docs.farcaster.xyz/learn/architecture/overview

当前的注册步骤需要一个以太坊钱包来注册你的账户，并支付 "租金"（以进行 Cast、回复等）。撰写时的租金费用为 7 美元，有效期为一年。有关限制的更多信息，请参阅 here。

Farcaster 的主要组成部分包括：

  • Accounts：在 Farcaster 上的账户允许你发布（即 Cast）、回复并设置你的个人资料。账户通过 Farcaster 的三个主要合约（目前部署在 Optimism 主网）创建和管理： Id Registry、Storage Registry 和 Key Registry。
  • Messages：当账户使用其 Key（由 KeyRegistry 合约管理）签署时，在 Farcaster 上发布消息。
  • Usernames：在 Farcaster 上使用 ENS（以太坊域服务）设置的用户名，这是其他用户提及你时所引用的内容。有两类用户名：链外 ENS 名称，创建免费并由 Farcaster 控制（可被撤销）（例如，@alice）。然后是链上名称，创建需付费并由创建者控制（不能被 Farcaster 撤销）。
  • Apps：有两种类型的应用：钱包应用和连接应用。账应用用于创建 Farcaster 账户并进行互动。你使用的钱包应用可以访问你的连接以太坊地址，并且可以代表你进行钱包操作。连接应用只能在用户授权时使用，并只能够执行链外操作。
  • Frames：允许你将你的 Casts（帖子）变成交互式应用。一些已经构建的流行框架有 @cookie，它简化了饼干购买过程，并允许你通过加密货币支付（通过 Coinbase commerce）。现在，还有一个很长的优秀框架 资源。
  • Clients：如 Warpcast 允许用户通过 UI 与 Farcaster 进行交互。用户可以选择多个客户端，但当前 Warpcast 是最受欢迎的。

既然如此，让我们稍微深入了解一个 Farcaster 客户端，Warpcast。

什么是 Warpcast？

Warpcast 是一个旨在运行类似 Farcaster 的应用和网络的客户端。它只是 Farcaster 运行的应用。用户最初可能会混淆二者，但 Warpcast 只是一个用于运行 Farcaster 的客户端（没有其他功能）。还有其他替代客户端，如 Supercast 等。

什么是 Farcaster Frames？

Frame 允许 Cast（即帖子）具备成为独立交互式应用的能力。Frame 由一个托管在 URL（例如，myapp.com）上的 HTML Web 应用组成。Frame 规范扩展了 Open Graph protocol 标准，允许你的 Frame 与用户之间进行交互操作。 让我们从高层次了解它们是如何构成的以及如何运作。

Frames 由 <head> 和 <body> 标签构成，并可以包含如 <button> 的 HTML 标签，以便用户可以与你的 Frame 进行交互。Frame 利用 OpenGraph 标签来渲染不同的视图。OpenGraph 标签只是控制你的 URL 显示方式的元数据。例如，下面的标签渲染一个带有图像（通过 fc:frame:image 属性指定）和四个按钮（通过 fc:frame:button: 属性标识的）的框架。

<html lang="en">
  <head>
    <meta property="fc:frame" content="vNext" />
    <meta property="fc:frame:image:aspect_ratio" content="1.91:1" />
    <meta property="fc:frame:image" content="http://...image-question.png" />
    <meta property="og:image" content="http://...image-question.png" />
    <meta property="fc:frame:button:1" content="Green" />
    <meta property="fc:frame:button:2" content="Purple" />
    <meta property="fc:frame:button:3" content="Red" />
    <meta property="fc:frame:button:4" content="Blue" />
  </head>
</html>

框架所需的属性包括：

  • fc:frame：有效版本字符串或 vNext 元数据属性（指版本控制）。目前，这是唯一有效的标签版本。
  • fc:frame:image：应具有 1.91:1 或 1:1 的图像长宽比。
  • og:image：应具有 1.91:1 的图像长宽比。这是一个对于不支持框架的客户端的后备方案。

一些其他一般性提示：

  • 将你 Frame 所在的 URL（例如， https://yourappurl.com）进行字符转换（即张贴）为帖子，是 Frames 作为发布内容渲染的方式。你正在构建的 Frame 可以通过 Warpcast Frame Tools 预览，而无需在 Farcaster 上进行发送。
  • 点击 Frame 按钮会向 Frame 服务器发送一个 POST 请求，该请求可以重新渲染新框架并执行其他任意逻辑。
  • 为了从 Farcaster 读取/写入，你需要与 “Hub”（Hubble 网络上的节点）进行交互，并使用他们的 API（gRPC, HTTP），如 Info API、Casts API、Fids API、Storage API、On Chain API、Events API 等 更多。
  • 在撰写本指南时，当你的 Frame 发出 POST 请求时，必须在 5 秒内响应（否则将返回 400 错误代码）。一个选项是在你的 Frame 花费超过 5 秒响应时，包括一个刷新按钮。

现在你对 Frames 有了更多的了解，让我们准备开发环境并开始开发。

接下来构建 Frame 的步骤如下：

  1. 获取与 QuickNode 的以太坊主网节点终端的访问权限 + 如果你将运行 Hubble 节点，你还需要一个 Optimism 主网的终端
  2. 创建一个包含两个按钮的 Frame（例如，Calculate Borrow Power 和 Source Code），一个用于触发我们的 Frame 服务器逻辑，另一个链接到我们的源代码（即本指南）
  3. 当点击按钮时，它将检索用户的以太坊钱包地址（基于传入的 fID），并然后对以太坊主网节点终端发出 JSON-RPC 请求，以通过 QuickNode 的 Token API 获取用户的钱包余额（使用 qn_getWalletTokenBalance 方法）
  4. 我们将进行另一个 API 调用，使用 Coingecko API 获取用户钱包中找到的Token的当前市场价格（这些Token在 Compound.finance 上也可以被借用）
  5. 最后，结合用户的Token余额、其美元价值和 Compound.finance 的抵押率，我们将计算借用能力。最后，我们将渲染一个包含结果的新 Frame 视图（即总借用能力）

项目先决条件：创建以太坊和 Optimism 节点终端

信息

如果你打算运行自己的 Hubble 节点，你需要创建一个以太坊主网和 Optimism 主网节点终端。否则，如果你计划使用付费 API 获取 Farcaster 数据（如 Neynar），只需创建一个以太坊主网节点终端即可。

你可以使用公共以太坊节点或部署和管理自己的基础结构来完成本指南；但是，如果你想要 8 倍的响应时间，可以让我们处理繁重的工作。在这里 注册一个免费账户以获得 QuickNode 账户。

登录 QuickNode 后，点击 创建一个终端 按钮，然后选择 以太坊 链和 主网 网络。创建终端后，复制 HTTP 提供程序 URL 链接并妥善保存，因为你将在编程部分中需要它。你还需要在你的终端上启用 Token and NFT API v2 bundle 附加组件。

Mainnet QuickNode Endpoint

请妥善保存 URL，因为你在开发过程中将需要它。

项目先决条件：运行 Hubble 节点或获取 Neynar 的访问权限

Hubble 节点

运行 Hubble 节点是免费的，但需要最低硬件 规范 并访问以太坊和 Optimism 的 RPC。我个人使用的是一个 DigitalOcean 的 droplet（配置为 16 GB 内存 / 4 个 AMD vCPUs / 200 GB 硬盘；这一部分不是免费的）来运行 Hubble 节点，然后通过 ngrok 提供 Farcaster HTTP API（2281 端口）。

确保你安装并运行 Docker，然后运行此 cURL 命令来安装 Hubble：

curl -sSL https://download.thehubble.xyz/bootstrap.sh | bash

按照提示输入你的 RPC 端点和 Farcaster 用户名，你将最终看到 Hub 的 docker 镜像正在运行并下载数据。从我的经验来看，数据同步大约需要 1 小时，加上设置 VPS 环境（例如，安装并运行 Docker）的一些时间。

Hubble 节点默认在 2281 端口提供 HTTP API，因此我们可以通过运行以下测试 cURL 命令来测试它：

curl http://127.0.0.1:2281/v1/castsByFid?fid=2

你应该看到类似以下的响应：

{"messages":[{"data":{"type":"MESSAGE_TYPE_USER_DATA_ADD","fid":2,"timestamp":70245646,"network":"FARCASTER_NETWORK_MAINNET","userDataBody":{"type":"USER_DATA_TYPE_PFP","value":"https://i.seadn.io/gae/sYAr036bd0bRpj7OX6B-F-MqLGznVkK3--DSneL_BT5GX4NZJ3Zu91PgjpD9-xuVJtHq0qirJfPZeMKrahz8Us2Tj_X8qdNPYC-imqs?w=500&auto=format"}},"hash":"0xa4c14683abdba1ec07862e96dac3e70f119d18a6","hashScheme":"HASH_SCHEME_BLAKE3","signature":"HPgTmDbeh1pRM2n4jlvfVegVuQrSULq/C0bPwfTXOTK8H0FmGyAXfodsUgslbSpJ1gKARvTi5HzkS8vUEOXsAQ==","signatureScheme":"SIGNATURE_SCHEME_ED25519","signer":"0x78ff9a768cf1fbb13caaf5159a9623dd2499b01592a0ee672eca647b6d62558c"},{"data":{"type":"MESSAGE_TYPE_USER_DATA_ADD","fid":2,"timestamp":85794966,"network":"FARCASTER_NETWORK_MAINNET","userDataBody":{"type":"USER_DATA_TYPE_USERNAME","value":"v"}},"hash":"0xfba4c9de4962a1b157a6887159102d3f8ef35f50","hashScheme":"HASH_SCHEME_BLAKE3","signature":"CnTMeHaaj2/4gM+3MI4TlNRvonycLx4XKgJ3TQHQj1VZc6Ene3hp9dZDPLOCBV/T9kmp4KIlAzwaypTof0naDw==","signatureScheme":"SIGNATURE_SCHEME_ED25519","signer":"0x78ff9a768cf1fbb13caaf5159a9623dd2499b01592a0ee672eca647b6d62558c"},{"data":{"type":"MESSAGE_TYPE_USER_DATA_ADD","fid":2,"timestamp":90565002,"network":"FARCASTER_NETWORK_MAINNET","userDataBody":{"type":"USER_DATA_TYPE_DISPLAY","value":"Varun Srinivasan"}},"hash":"0x22fd1ae248d955ae981c139ff76b9931084a62a5","hashScheme":"HASH_SCHEME_BLAKE3","signature":"K21PqA7rUZBCNrXQyQZblo5yU/22YRJjcoaAuqU83FV7EOjC4brUa1083PpDGu0hwNLkzq64NAsu05N0gsd1Bw==","signatureScheme":"SIGNATURE_SCHEME_ED25519","signer":"0x78ff9a768cf1fbb13caaf5159a9623dd2499b01592a0ee672eca647b6d62558c"},{"data":{"type":"MESSAGE_TYPE_USER_DATA_ADD","fid":2,"timestamp":90565002,"network":"FARCASTER_NETWORK_MAINNET","userDataBody":{"type":"USER_DATA_TYPE_BIO","value":"Technowatermelon. Elder Millenial. Building Farcaster. \n\nnf.td/varun"}},"hash":"0x2e5f2025b81b95edad8cc770d13941f6267dcb8b","hashScheme":"HASH_SCHEME_BLAKE3","signature":"oIPPjX2aohL0q4IBUOpPuraHq2RiGrVZuNR3Rdibg/OiHwawSRxXMMp4vcw697JY/3fz4S5oCG5fsk3L21ZlDA==","signatureScheme":"SIGNATURE_SCHEME_ED25519","signer":"0x78ff9a768cf1fbb13caaf5159a9623dd2499b01592a0ee672eca647b6d62558c"}],"nextPageToken":""}%

接下来，你可以通过以下命令通过 ngrok 提供你的 API：

ngrok http 2281

注意：如果使用 VPS，你可能需要设置防火墙并启用对2281端口的传入请求（使用 ufw 等工具）

理想情况下，你应该能够对 ngrok 转发 URL 进行相同的 cURL 请求（例如，curl ' https://7f38-174-138-84-0.ngrok-free.app/v1/castsByFid?fid=2')。

接下来，如果你不想运行自己的 Hubble 节点，我们将显示通过 Neynar 进行的步骤，一种付费 API 服务，可以读取/写入 Farcaster。

Neynar API

本节记录如何访问 Neynar API 的步骤，假设你不运行自己的 Hubble 节点。

在 这里 注册 Neynar。撰写时，没有免费版本。

创建账户后，请妥善保存 API 密钥，因为你将在接下来的部分中构建 Frames 项目时使用它。此时，你应该已经实现上述两个选项之一（Hubble 节点或付费 API），以便访问 Farcaster 用户数据。接下来，我们将进入 Frames 开发。

如何构建一个 Farcaster Frame

在本节中，你将构建一个 Farcaster frame，以获取钱包的 ERC-20 代币余额，然后计算其根据 Compound.finance 抵押率获得的总借用能力。我们将使用 TypeScript 和 Express.js（以及一些其他 SDK，如 Ethers.js 和 dotenv）来构建我们的 Frames 项目。

我们项目中的主要技术包括：

  • Express.js: 用于构建 RESTful API 的框架
  • QuickNode Token API: 快速获取 ERC-20 代币余额，而无需构建和管理自己的脚本
  • Coingecko API: 获取 ERC-20 代币的当前市场价格（以 USD 计）
  • 运行 Hubble 节点的 HTTP API 或使用 Neynar API Key，以便在有人与 Frame 交互时获取 Farcaster 上的用户数据

现在进入技术编码部分。请确保准备好终端窗口和代码编辑器（例如 VSCode）。

设置项目

首先，将以下 repo 克隆到你选择的目录：

git clone git@github.com:quiknode-labs/qn-guide-examples.git
cd ethereum/farcaster-frames

浏览该目录，我们可以看到它的设置如下：

.
├── node_modules
├── package-lock.json
├── package.json
├── readme.md
├── .env.example
├── src
│   ├── config.ts
│   ├── index.ts
│   ├── types.ts
│   └── utils
│       ├── ethers.ts
│       └── frame.ts
└── tsconfig.json

在运行以下命令以安装依赖项之前，请确保你的 Node.js 版本为 18.18>：

npm i

接下来，打开代码编辑器，并打开 .env.example 文件以配置我们的环境变量。将此文件重命名为 .env 并相应输入你的环境变量：

QUICKNODE_HTTP_ENDPOINT="https:/quiknode.pro/12345/"
HUBBLE_URL="https://7f38-174-138-84-0.ngrok-example-url.app" ## 指向 2281 端口
NGROK_URL="https://85e4-2601-589-4984-73d0.ngrok-example-url.app" # 指向 8080 端口
NEYNAR_API_KEY="API_KEY" # 如果不运行 HUBBLE 节点提供 HTTP

在下一步中，我们将展示如何检索 NGROK_URL。

在项目根目录（ ethereum/farcaster-frames）内启动远程 ngrok 服务器：

ngrok http 8080

获取此 URL（例如， https://85e4-2601-589-4984-73d0.ngrok-example-url.app）并将其添加到 .env 文件中作为 NGROK_URL 变量值。记得保存文件。

接着，在相同项目目录中打开另一个终端窗口。要启动本地服务器，请运行 npm run dev 命令。这将启动一个本地服务器（例如， http://localhost:8080），你可以通过在末尾添加 /frame 来访问 API 端点。

Frame

Frame-2

让我们逐步分析所有重要的代码逻辑。

深入代码

我们将覆盖 src 文件夹中的代码逻辑。

src/utils/ethers.ts - 获取 ERC-20 代币余额

该文件包含三个与以太坊交互相关的函数。

getWalletTokenBalances 函数通过 qn_getWalletTokenBalance 方法发出 RPC 调用至 Token API。它返回钱包的 ERC-20 代币，允许指定代币进行筛选。根据响应，我们将每个符合条件的 ERC-20 代币的余额整理成一个结构化列表。该列表包括每个代币的 name、address、totalBalance 和 decimal 精度等详细信息。

export async function getWalletTokenBalances(walletAddress: string) {
    const tokenAddresses = Object.values(contractsInfo).map(info => info.address);
    const response = await fetch(providerURL, {
       method: 'POST',
       headers: {
          'Content-Type': 'application/json'
       },
       body: JSON.stringify({
          id: 1,
          jsonrpc: "2.0",
          method: "qn_getWalletTokenBalance",
          params: [{\
             wallet: walletAddress,\
             contracts: tokenAddresses\
          }]
       })
    });

    if (!response.ok) {
       throw new Error(`网络响应不正常: ${response.status}`);
    }
    const data = await response.json();
    const tokens = data?.result?.result ?? [];
    const tokenBalances: TokenBalance[] = tokens.map((token: any) => ({
       name: token.name,
       address: token.address,
       totalBalance: token.totalBalance,
       decimals: token.decimals,
    }));

    return tokenBalances
}

getBorrowPower 函数计算由 getWalletTokenBalances 函数返回的符合条件代币的借用能力。

export async function getBorrowPower(tokenArray: TokenBalance[]): Promise<number> {
    let totalBorrowPower = 0;

    const borrowPowerPromises = tokenArray.map(async (token) => {
      const tokenInfo = tokensAvailabletoBorrow[token.name as keyof typeof tokensAvailabletoBorrow];
      if (!tokenInfo) return 0;

      try {
        const tokenBalance = await ethers.formatUnits(token.totalBalance, ethers.toNumber(token.decimals));
        const response = await fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${tokenInfo.id}&vs_currencies=usd`);
        const data = await response.json();
        const tokenPrice = data[tokenInfo.id].usd || 1;
        const borrowPower = ((parseFloat(tokenBalance) * tokenPrice) * tokenInfo.collateralFactor);
        return borrowPower;
      } catch (error) {
        console.error('获取代币价格时出错:', error);
        return 0;
      }
    });

    const results = await Promise.all(borrowPowerPromises);
    totalBorrowPower = results.reduce((acc, curr) => acc + curr, 0);

    return totalBorrowPower;
}

getUserfromfId 有两个配置选项。第一种选择是调用本地（或远程）Hubble 节点的 HTTP API 服务器，并根据他们的 fID（Farcaster 用户 ID）获取用户的以太坊地址。或者，你可以使用 Neynar API 获取相同的信息。请注意，API 端点不同，你需要将其中一个注释掉以便正常工作。

export async function getUserfromfId(fid: number) {
    // 方法 1: 使用带有 HTTP API 的 Hubble 节点
    const hubbleHTTPapi = process.env.HUBBLE_URL as string;
    try {
        const userDataByFid = await fetch(`${hubbleHTTPapi}/v1/userDataByFid?fid=${fid}&user_data_type=6`, {
            method: 'GET',
        });
        const fetchUser = await userDataByFid.json();
        const username = fetchUser.data.userDataBody.value;
        const userDataByName = await fetch(`${hubbleHTTPapi}/v1/userNameProofByName?name=${username}&user_data_type=6`, {
            method: 'GET',
        });
        const fetchAddress = await userDataByName.json()
        let custodyAddress = fetchAddress?.owner;
        if (!custodyAddress) {
            custodyAddress = "0x0"
            console.log('在响应中未找到保管地址');
        }
        return custodyAddress;
    } catch (error) {
        console.error('本地 API 出现错误:', error);
        throw error;
    }
    // 方法 2: 使用 Neynar API
    /*
    const url = 'https://api.neynar.com/v1/farcaster/user';
    const apiKey = process.env.NEYNAR_API_KEY as string;
    try {
      const response = await fetch(`${url}?fid=${fid}`, {
        method: 'GET',
        headers: {
          'accept': 'application/json',
          'api_key': apiKey,
        },
      });

      if (!response.ok) {
        throw new Error(`HTTP错误! 状态: ${response.status}`);
      }

      const userData = await response.json();
      const custodyAddress = userData?.result?.user?.custodyAddress;

      if (!custodyAddress) {
        throw new Error('在响应中未找到保管地址');
      }

      return custodyAddress;
    } catch (error) {
      console.error('错误:', error);
      throw error;
    }
    */
}

src/utils/frame.ts - 生成 Farcaster Frames

该文件包含渲染 Frame 元数据（OpenGraph 标签）的逻辑。它通过两个函数 generateFarcasterFrameMetaTag 和 frameGenerator 实现。

generateFarcasterFrameMetaTag 函数根据提供的 Frame 属性创建元标签，包括图像、网址和交互按钮。

export function generateFarcasterFrameMetaTag({ frame, imageUrl, postUrl, buttons, aspectRatio, action, target }: IFrameProps): string {
    let metaTag = `<meta property="fc:frame" content="${frame || "vNext"}" />\n`;
    metaTag += `<meta property="og:image:image:aspect_ratio" content="${aspectRatio || "1.91:1"}" />\n`;
    metaTag += `<meta property="og:image" content="${imageUrl}" />\n`;
    metaTag += `<meta property="fc:frame:image:aspect_ratio" content="${aspectRatio || "1.91:1"}" />\n`;
    metaTag += `<meta property="fc:frame:image" content="${imageUrl}" />\n`;

    if (postUrl) {
        metaTag += `<meta property="fc:frame:post_url" content="${postUrl}" />\n`;
    }

    if (buttons) {
        buttons.forEach((button, index) => {
            metaTag += `<meta property="fc:frame:button:${index + 1}" content="${button}" />\n`;
            if (action && target && index === 1) {
                metaTag += `<meta property="fc:frame:button:${index + 1}:action" content="${action}" />\n`;
                metaTag += `<meta property="fc:frame:button:${index + 1}:target" content="${target}" />\n`;
            }
        });
    }

    return metaTag;
}

frameGenerator 函数将生成的元标签动态包装成 HTML 格式。

export function frameGenerator(frameProps: IFrameProps): string {
    const metaTag = generateFarcasterFrameMetaTag(frameProps);

    return `<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>${frameProps.frame}</title>
            ${metaTag}
        </head>
    </html>`;
}

src/index.ts - Express.js API 路由

该文件包含我们的 GET 和 POST 路由，使用 Express 来提供 Frames。

/frame 的 GET 端点使用预设内容生成一个框架，如其 IFrameProps 所指定，而 POST 端点首先根据用户的以太坊地址使用我们在 utils/ethers.ts 文件中创建的函数检索并计算借用能力，然后通过指定帧属性并返回 200（好）响应来提供此内容。

该项目目录中的其他文件应该是自解释的；但是，如果你希望进一步解释或有任何问题，请在本指南结束时留下反馈！

部署到生产环境

由于 Frames 是使用 API 构建的，你需要在某个地方提供它们，例如 Vercel。如果你这样做，请确保在项目根文件夹中初始化 git 倉庫（即 .git），并确保你的 .env 文件未提交到你的仓库中。然后，登录，导入你的仓库，配置你的环境变量，将 .env 文件粘贴到适当的部分，然后部署！

通过你的公共 URL，你将能够再次在开发者 Frames 测试工具上测试你的 Frame，并发布（cast）该 URL 以使你的 Frame 公共可用。请记住，你的 Frames 服务器需要保持在线，直到你想让你的 Frame 停止工作。

下一步

本指南向你展示了 Frames 的可能性。如果你想在这个 Frame 的基础上构建，以下是一些建议：

  • 添加一个文本字段，使用 fc:frame:input:text 元数据，让用户可以粘贴地址以检查他们的借用能力
  • 启用一个白名单，以仅允许某些用户（例如，余额超过 x 的用户）铸造 NFT。你可以自己部署 NFT 进行铸造，或使用 NFT Mint API by Crossmint。之后，你可以创建一个 QuickAlert 以在 NFT 被铸造时接收通知
  • 添加其他借贷协议（例如，Aave），这些协议可能提供更多代币或不同的抵押率
  • 利用 Compound.finance 的 Comptroller 智能合约的 markets 函数来检索 cToken 资产的完整列表并检查其抵押率
  • 使用额外的区块链（例如，Optimism、Arbitrum、Polygon 等）和/或借贷协议（例如，Aave）来获取基于特定链上当前供需情况的优化借用值

奖励提示： Frames.js 库有一个有用的 Frame 工具，你可以在构建时用来进行调试（这对我有所帮助！）

最后想法

你已深入了解 Farcaster 及其如何构建你自己的 Farcaster frame。请在 X 上分享你的自定义 Frames，并标记我们 @QuickNode！

如果你有问题，请查看我们的 Discord 服务器，或者使用下面的表单提供反馈以获得帮助。通过关注我们的 Twitter（@QuickNode）和我们 Telegram 公告频道 来保持更新。

我们 ❤️ 反馈！

让我们知道 如果你有任何反馈或对新主题的请求。我们很想听到你的意见。

  • 原文链接： quicknode.com/guides/soc...
  • 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～
点赞 0
收藏 0
分享
本文参与登链社区写作激励计划 ，好文好收益，欢迎正在阅读的你也加入。

0 条评论

请先 登录 后评论
QuickNode
QuickNode
江湖只有他的大名，没有他的介绍。

QuickNode

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！