什麼是 Farcaster？Farcaster 框架製作全面指南

閱讀時間 18 分鐘

概覽

Farcaster 是一個基於以太坊（Ethereum）的開源社交網路平台，旨在實現去中心化，並允許使用者建立個人檔案、發文（稱為「Cast」）、回覆貼文，以及組織社群（稱為「頻道」）。任何人都可以於 Farcaster 上建立帳號，它可視為 X（即 Twitter）和 Threads（由 Meta 開發）等其他社交網路平台的替代選擇。

本指南將向您說明如何快速上手 Farcaster 的開發工作；更具體而言，您將完成以下任務：

您將負責的工作內容

了解 Farcaster，以及它作為一個開源、去中心化的社交網路是如何運作的
了解 Farcaster Frames 及其技術規格
請運行一個 Farcaster 節點，或取得 Neynar API 的存取權限（付費服務），以便對 Farcaster 網路進行讀寫操作
使用 TypeScript 和 Express.js 建置一個 Farcaster 框架；更具體地說，當使用者點擊按鈕時，該框架將根據某個借貸協議（例如 Compound.finance）來計算 Farcaster 使用者錢包地址的借款能力

您需要準備的物品

具備 JavaScript 或 TypeScript 的程式設計經驗
一個已啟用Token API的以太坊主網節點端點（點此註冊）＋ Optimism 主網節點端點（Hubble 節點必備）
已安裝Node.js
運行一個 Farcaster 節點，或取得Neynar API 金鑰
Farcaster上的帳號
程式碼編輯器（例如 VSCode）

依賴關係	版本
node.js	18.14>
cors	^2.8.5
以太	^6.11.1
快遞	^4.17.1

什麼是 Farcaster？

讓我們深入探討 Farcaster 社交協議的運作方式。Farcaster 將使用者身分存儲於鏈上，而貼文和回覆等資料則存儲於鏈下。存儲於鏈上的主要資料包括：帳號建立、發佈資料（貼文、回覆等），以及將額外的帳號金鑰新增至應用程式（這部分我們稍後會詳細說明）。Farcaster 的鏈下架構利用節點，讓使用者／開發者能夠對 Farcaster 進行讀寫操作。 Farcaster 的大部分資料皆儲存於此網路中。如需更多詳細資訊，請參閱最新的 Farcaster架構概覽。以下是直觀展示該架構的示意圖：

Farcaster 架構

來源：https://docs.farcaster.xyz/learn/architecture/overview

目前的註冊步驟需要使用以太坊錢包來註冊帳戶，並支付「租金」（以便進行投票、回覆等操作）。截至本文撰寫時，這筆租金為 7 美元，有效期為 1 年。有關限制的更多資訊，請參閱此處。

Farcaster 的主要組件包括：

Farcaster 上的帳戶可讓您發文（即「Cast」）、回覆以及設定個人檔案。帳戶是透過 Farcaster 的三個主要合約（目前部署於 Optimism 主網）來建立與管理的：身分登記處、儲存登記處和金鑰登記處。
當帳戶使用其金鑰（由 KeyRegistry 合約管理）對 Farcaster 上的訊息進行簽署時，該訊息即會發布。
Farcaster 上的使用者名稱是透過 ENS（以太坊網域名稱服務）設定的，其他使用者在提及您時會引用此名稱。使用者名稱分為兩種類型：鏈下 ENS 名稱，此類名稱可免費建立，並由 Farcaster 控制（可被撤銷），例如 @alice；另一種則是鏈上名稱，建立此類名稱需支付費用，且由建立者自行控制（Farcaster 無法撤銷）。
應用程式：應用程式分為兩種類型：錢包應用程式與連線應用程式。若要在 Farcaster 上建立帳戶並進行互動，必須使用錢包應用程式。您所使用的錢包應用程式可存取您已連線的以太坊地址，並能代表您從錢包中執行操作。連線應用程式僅在用戶授予權限後方可使用，且僅能執行鏈下操作。
透過 Frames，您可以將您的 Casts（貼文）轉化為互動式應用程式。一些已建置的熱門 Frames 包括@cookie，它簡化了購買餅乾的流程，並讓您能透過加密貨幣（經由 Coinbase Commerce）付款。如今，已有大量精彩的 Frames資源可供選擇。
像Warpcast 這樣的客戶端，讓使用者能透過使用者介面與 Farcaster 進行互動。使用者可以選擇多種客戶端，但目前 Warpcast 是最受歡迎的。

話雖如此，讓我們更深入地探討一下 Farcaster 的其中一個客戶端——Warpcast。

什麼是 Warpcast？

Warpcast是一款專為執行 Farcaster 等應用程式和網路而設計的客戶端。它純粹是 Farcaster 所運行的平台。使用者起初可能會將兩者混淆，但 Warpcast 僅是一款用於執行 Farcaster 的客戶端（它沒有其他功能）。此外還有其他替代客戶端，例如Supercast等。

什麼是 Farcaster Frames？

「Frame」讓「Cast」（亦稱「貼文」）能夠成為獨立的互動式應用程式。Frame 由一個託管於特定 URL（例如 myapp.com）的 HTML 網頁應用程式所組成。Frame 規格擴展了Open Graph 協定標準，使您的 Frame 與使用者之間能夠進行互動操作。讓我們從高層次來探討它們的組成結構以及運作方式。

幀由以下部分組成： <head> 以及 <body> 標籤，並可包含如 <button> 以便使用者能與您的 Frame 進行互動。Frame 會利用 OpenGraph 標籤來渲染不同的視圖。OpenGraph 標籤其實就是用來控制您的 URL 顯示方式的元資料。例如，以下標籤會渲染一個帶有圖片的 Frame（圖片透過 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 的圖片。這是針對不支援框架的客戶端所提供的備用方案。

其他一些一般性建議：

透過「傳送」（即發佈）您框架所託管的網址（例如：https://yourappurl.com），即可將框架渲染為一則貼文。您正在建置的框架無需透過 Farcaster 進行「傳送」，即可使用Warpcast Frame Tools 預覽。
點擊「幀」按鈕會傳送一個 POST 向幀伺服器發出請求，該伺服器可重新渲染新幀並執行其他任意邏輯。
若要透過 Farcaster 進行讀寫操作，您需要與 Farcaster 節點或 API 提供者進行互動，並使用 Casts、Fids、Storage、On Chain 及 Events 等 API。關於當前的查詢範例，請參閱 Farcaster 文件中關於擷取 Casts 的說明。
在撰寫本指南之際，當您的 Frame 發出 POST 請求時，必須在 5 秒內做出回應（否則將返回 400 錯誤代碼）。其中一個解決方案是在介面中加入「重新整理」按鈕，以防您的 Frame 回應時間超過 5 秒。

既然您已經對 Frames 有更深入的了解，讓我們來設定開發環境，並開始進行開發吧。

以下是組裝框架的下一步驟：

透過 Quicknode 取得以太坊主網節點端點；此外，若您打算運行 Hubble 節點，還需要一個 Optimism 主網端點
建立一個包含兩個按鈕的框架（例如， 計算借力值 以及 原始碼)，一個是用來觸發我們的 Frame 伺服器邏輯，另一個則是用來連結至我們的原始碼（即本指南）
點擊該按鈕時，系統將根據傳入的資料，擷取使用者的以太坊錢包地址 fID)，然後向以太坊主網節點端點發出 JSON-RPC 請求，透過 Quicknode 的 Token API 擷取使用者的錢包餘額（使用 qn_getWalletTokenBalance 方法)
我們將再次向 Coingecko API 發出 API 呼叫，以擷取用戶錢包中代幣的當前市場價格（這些代幣亦符合在 Compound.finance 上作為借款抵押品的資格）
最後，我們將根據用戶的代幣餘額、其美元價值以及 Compound.finance 上的抵押率，計算出借款能力。最後，我們會渲染一個新的 Frame 視圖，顯示計算結果（即總借款能力）。

專案先決條件：建立以太坊與 Optimism 節點端點

資訊

如果您計劃自行運行 Farcaster 節點，則需要建立以太坊主網和 Optimism 主網的節點端點。否則，如果您打算使用付費 API 來存取 Farcaster 資料（例如Neynar），則只需建立以太坊主網的節點端點即可。

您可以使用公共以太坊節點，或部署並管理自己的基礎設施來完成本指南；不過，如果您希望響應時間提升 8 倍，不妨將繁重的工作交給我們處理。請在此註冊 Quicknode 帳戶。

登入 Quicknode 後，點擊「建立端點」按鈕，然後選擇以太坊鏈和主網。建立端點後，請複製「HTTP 提供者 URL」連結並妥善保存，因為您在程式設計部分會需要用到它。您還需要擁有 Token 和 NFT API v2 套件 附加元件。

Quicknode 主網端點

請將這些網址備妥，因為在開發過程中您會需要它們。

專案先決條件：運行一個 Hubble 節點，或取得 Neynar 的存取權限

哈伯節點

運行 Farcaster 節點是免費的，但需要具備存取以太坊（Ethereum）和 Optimism 的 RPC 權限。我個人使用了一台 DigitalOcean Droplet（規格為 16 GB 記憶體／4 顆 AMD vCPU／200 GB 儲存空間；這並非免費服務）來運行節點，並透過 ngrok 提供 Farcaster HTTP API 服務。

要執行 Hubble 節點，請確保已安裝並運行 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 轉發網址發出相同的 cURL 請求（例如：curl'https://7f38-174-138-84-0.ngrok-free.app/v1/castsByFid?fid=2'）。

接下來，我們將透過 Neynar 示範操作步驟——這是一項付費 API 服務，可讀寫 Farcaster 資料，適用於不想自行運行 Hubble 節點的使用者。

Neynar API

本節說明存取 Neynar API 的步驟，假設您並未自行運行 Hubble 節點。

請在此註冊 Neynar。截至本文撰寫時，尚無免費版本。

建立帳戶後，請將 API 金鑰妥善保存，因為您將在接下來的章節中建立 Frames 專案時用到它。此時，您應已完成上述兩種選項（Hubble 節點或付費 API）中的其中一種，才能存取 Farcaster 用戶資料。接下來，我們將進入 Frames 開發階段。

如何製作「遠距傳送器」框架

在本節中，您將建置一個 Farcaster 框架，用以擷取錢包的 ERC-20 代幣餘額，並根據Compound.finance的抵押率計算其總借款能力。我們將使用 TypeScript 和 Express.js（以及其他一些 SDK，例如 Ethers.js 和 dotenv）來建置我們的 Frames 專案。

我們專案的主要技術包含：

Express.js：一個用於透過 Node.js 建置 RESTful API 的框架
Quicknode 代幣 API：無需自行建置與管理腳本，即可快速查詢 ERC-20 代幣餘額
Coingecko API：擷取 ERC-20 代幣的當前市場價格（以美元計價）
當有人與 Frame 互動時，需啟用具備 HTTP API 的 Hubble 節點，或持有Neynar API 金鑰，方能與 Farcaster 互動以擷取使用者資料

現在，進入技術編碼部分。請確保已準備好終端機視窗和程式編輯器（例如 VSCode）。

設定專案

首先，將以下儲存庫克隆到您選擇的目錄中：

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" # 若未執行提供 HTTP 服務的 HUBBLE 節點

在下一步中，我們將向您展示如何擷取該 NGROK_URL.

在專案的根目錄中啟動遠端 ngrok 伺服器（ethereum/farcaster-frames):

ngrok http 8080

以這個網址為例（例如： https://85e4-2601-589-4984-73d0.ngrok-example-url.app) 並將其加入您的 .env 檔案作為 NGROK_URL 變數值。請記得儲存檔案。

接著，在同一專案目錄中開啟另一個終端機視窗。要啟動本地伺服器，請執行 npm run dev 指令。這將啟動一個本地伺服器（例如， http://localhost:8080)，您可透過新增以下內容來存取 API 端點： /frame 直到最後。

畫面 2

讓我們逐一檢視所有重要的程式邏輯。

深入探索程式碼

我們將詳細探討src資料夾內所有程式碼的邏輯。

src/utils/ethers.ts - 擷取 ERC-20 代幣餘額

此檔案包含三個與以太坊互動相關的函式。

該 getWalletTokenBalances 此函式會透過 qn_getWalletTokenBalance 方法。此方法會回傳某個錢包中的 ERC-20 代幣，並可選擇性地篩選我們所使用的特定代幣。根據回傳的結果，我們將把所有符合條件的 ERC-20 代幣餘額整理成一個結構化清單。此清單包含諸如 名稱, 地址, 總餘額，以及 十進位 每個標記的精確度。

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(`Network response was not ok: ${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 fetching token price:', 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) {
    // Method 1: Using Hubble node with HTTP API
    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('Custody address not found in response');
        }
        return custodyAddress;
    } catch (error) {
        console.error('Error with Local API:', error);
        throw error;
    }
    // Method 2: Using 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 error! Status: ${response.status}`);
      }
  
      const userData = await response.json();
      const custodyAddress = userData?.result?.user?.custodyAddress;
  
      if (!custodyAddress) {
        throw new Error('Custody address not found in response');
      }
  
      return custodyAddress;
    } catch (error) {
      console.error('Error:', error);
      throw error;
    }
    */
}

src/utils/frame.ts- 產生 Farcaster框架

此檔案包含渲染 Frame 元資料（OpenGraph 標籤）的邏輯。它透過兩個函式來實現此功能， generateFarcasterFrameMetaTag 以及 frameGenerator.

該 generateFarcasterFrameMetaTag 此函式會根據提供的框架屬性（包括圖片、網址及互動式按鈕）來建立 meta 標籤。

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 該函式會將生成的 meta 標籤動態地封裝成 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 endpoint 首先會根據使用者的以太坊地址，利用我們在 utils/ethers.ts 檔案，接著透過指定 frame 屬性並回傳 200（OK）狀態碼來提供此內容。

此專案目錄中的其他檔案應不言自明；不過，若您希望對某些內容有更詳細的說明，或有任何疑問，請在指南結尾處留下回饋！

部署至生產環境

由於 Frames 是透過 API 建置的，您需要將其部署至某個平台（例如 Vercel）。若要這麼做，請務必在專案根目錄中建立一個 Git 儲存庫（即.git），並確保您的.env檔案未被提交至儲存庫。接著，登入系統、匯入您的儲存庫、將.env檔案貼到適當的區段中以設定環境變數，然後即可進行部署！

透過您的公開網址，您將能夠在「Developer Frames」測試工具上再次測試您的 Frame，並將該網址發佈（post）以將您的 Frame 設為公開。請注意，只要您希望該 Frame 持續運作，您的 Frames 伺服器就必須保持線上狀態。

後續步驟

本指南已向您展示了 Frames 的各種可能性。如果您想在此 Frame 的基礎上進一步開發，以下是一些建議：

新增一個文字欄位，其中包含 fc:frame:input:text 元資料，讓使用者能貼上地址以查詢其貸款能力
啟用白名單功能，僅允許特定使用者（例如：餘額超過x 的使用者）鑄造 NFT。您可以自行部署一個 NFT 作為鑄造來源。之後，您可以建立一個 Webhook，以便在 NFT 被鑄造時收到通知
新增其他借貸協議（例如 Aave），這些協議可能提供更多代幣或不同的抵押品比率
善用 市場 來自「Comptroller」智慧合約的函式 Compound.finance 以檢索完整的 cToken 資產清單，並檢查其抵押率
利用其他區塊鏈（例如：Optimism、Arbitrum、Polygon 等）和／或借貸協議（例如：Aave），根據特定鏈上該資產的當前供需狀況，獲得最優的借款條件

額外提示：Frames.js函式庫提供了一個實用的「Frame」工具，您可以在建置過程中用它來除錯（這對我很有幫助！）

結語

您已經在 Farcaster 上「醒悟」，並學會了如何打造專屬的 Farcaster 框架。請在 X 上分享您的自訂框架，並標記我們 @Quicknode！

如有任何疑問，歡迎前往我們的Discord伺服器，或透過下方表單提供回饋以獲取協助。請追蹤我們的Twitter帳號 (@Quicknode) 以及Telegram 公告頻道，掌握最新動態。

我們 ❤️ 您的回饋！

如果您有任何意見回饋或對新主題的建議，請告訴我們。我們非常樂意聽取您的意見。

什麼是 Farcaster？Farcaster 框架製作全方位指南

概覽​

您將負責的工作內容​

您需要準備的物品​

什麼是 Farcaster？​

什麼是 Warpcast？​

什麼是 Farcaster Frames？​

專案先決條件：建立以太坊與 Optimism 節點端點​

專案先決條件：運行一個 Hubble 節點，或取得 Neynar 的存取權限​

哈伯節點​

Neynar API​

如何製作「遠距傳送器」框架​

設定專案​

深入探索程式碼​

src/utils/ethers.ts - 擷取 ERC-20 代幣餘額​

src/utils/frame.ts- 產生 Farcaster框架​

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

部署至生產環境​

後續步驟​

結語​