18 Minuten Lesezeit

Übersicht

Farcaster is an open-source social network built on Ethereum that aims to be decentralized and allows users to create profiles, post (this is called Cast), reply to, and organize communities (referred to as Channels). Anyone can create an account on Farcaster and it's an alternative to other social networks like X (aka Twitter) and Threads (by Meta).

Dieser Leitfaden zeigt Ihnen, wie Sie schnell mit der Entwicklung auf Farcaster beginnen können. Konkret werden Sie die folgenden Aufgaben erledigen:

Ihre Aufgaben

• Erfahren Sie mehr über Farcaster und wie es als dezentrales Open-Source-Soziales Netzwerk funktioniert
• Erfahren Sie mehr über Farcaster-Rahmen und deren technische Daten
• Betreiben Sie einen Farcaster-Knoten oder erwerben Sie Zugang zur Neynar-API (kostenpflichtig), um im Farcaster-Netzwerk lesen und schreiben zu können.
• Entwickeln Sie ein Farcaster-Framework mit TypeScript und Express.js; genauer gesagt berechnet das Framework auf einen Knopfdruck hin die Kreditwürdigkeit der Wallet-Adresse eines Farcaster-Nutzers gegenüber einem Kreditprotokoll (z. B. Compound.finance).

Was Sie benötigen

• Vorkenntnisse in der Programmierung mit JavaScript oder TypeScript
• An Ethereum mainnet node endpoint (sign up here) with the Token API enabled + Optimism mainnet node endpoint (required for Hubble node)
• Node.js ist installiert
• Betreiben Sie einen Farcaster-Knoten oder verschaffen Sie sich Zugriff auf einen Neynar-API-Schlüssel
• Ein Konto bei Farcaster
• Ein Code-Editor (z. B. VSCode)

Abhängigkeit	Version
node.js	18.14>
Korsen	^2.8.5
Ether	^6.11.1
ausdrücklich	^4.17.1

Was ist Farcaster?

Schauen wir uns einmal genauer an, wie das Farcaster-Social-Protokoll funktioniert. Farcaster speichert die Identität der Nutzer on-chain und Daten wie Beiträge und Antworten off-chain. Die wichtigsten on-chain gespeicherten Daten sind: die Kontoerstellung, Veröffentlichungsdaten (Beiträge, Antworten usw.) sowie das Hinzufügen zusätzlicher Kontoschlüssel zu Apps (darauf werden wir noch näher eingehen). Die Off-Chain-Architektur von Farcaster nutzt Knoten, über die Nutzer und Entwickler Daten aus Farcaster lesen und schreiben können. Der Großteil der Farcaster-Daten wird in diesem Netzwerk gespeichert. Weitere Details finden Sie in der aktuellen Übersicht über die Farcaster-Architektur. Hier ist ein Diagramm, das die Architektur veranschaulicht:

Quelle: https://docs.farcaster.xyz/learn/architecture/overview

The current registration steps require an Ethereum wallet to register your account and paying "rent" (in order to cast, reply, etc.). This rent cost of the time of this writing is $7 USD and is for 1-year. More information on limitations can be found here.

Zu den Hauptkomponenten von Farcaster gehören:

• Accounts on Farcaster lets you post (i.e., Cast), reply, and set up your profile. Accounts are created and managed via Farcaster's three main contracts (currently deployed on Optimism mainnet): Id Registry, Storage Registry and Key Registry.
• Nachrichten auf Farcaster werden veröffentlicht, wenn ein Konto sie mit seinem Schlüssel signiert (der vom KeyRegistry-Vertrag verwaltet wird).
• Usernames on Farcaster are set up with ENS (Ethereum Domain Service), which is what other users reference when mentioning you. There are two types of usernames: off-chain ENS Names, which are free to create and are controlled (can be revoked) by Farcaster (e.g., @alice). Then, on-chain names, which cost money to create and are controlled by the individual who created them (can't be revoked by Farcaster).
• Apps: There are two types of apps: Wallet apps and Connected apps. Wallet apps are needed in order to create an account on Farcaster and interact. The wallet app you use has access to your connected Ethereum address and can take actions from your wallet on your behalf. Connected apps allow use only when a user grants them and can only perform off-chain actions.
• Mit Frames kannst du deine Casts (Beiträge) in interaktive Apps verwandeln. Ein beliebtes, bereits fertiggestelltes Frame ist @cookie, das den Kaufprozess für Kekse vereinfacht und dir ermöglicht, mit Kryptowährung (über Coinbase Commerce) zu bezahlen. Mittlerweile gibt es eine lange Liste großartiger Frame-Ressourcen.
• Clients wie Warpcast ermöglichen es den Nutzern, über eine Benutzeroberfläche mit Farcaster zu interagieren. Es stehen mehrere Clients zur Auswahl, doch derzeit ist Warpcast der beliebteste.

Nachdem das nun gesagt ist, wollen wir uns etwas näher mit einem Client für Farcaster befassen: Warpcast.

Was ist Warpcast?

Warpcast ist ein Client, der entwickelt wurde, um Anwendungen und Netzwerke wie Farcaster auszuführen. Es handelt sich schlichtweg um die Anwendung, auf der Farcaster läuft. Nutzer könnten die beiden zunächst verwechseln, doch Warpcast ist lediglich ein Client, der dazu dient, Farcaster auszuführen (er verfügt über keine weiteren Funktionen). Es gibt alternative Clients wie beispielsweise Supercast und weitere.

Was ist „Farcaster Frames“?

Ein „Frame“ ermöglicht es einem „Cast“ (auch bekannt als „Post“), als eigenständige interaktive App zu fungieren. Ein „Frame“ besteht aus einer HTML-Webanwendung, die unter einer URL (z. B. myapp.com) gehostet wird. Die „Frame“-Spezifikation erweitert den Open-Graph-Protokollstandard und ermöglicht interaktive Aktionen zwischen Ihrem „Frame“ und den Nutzern. Lassen Sie uns einen allgemeinen Überblick darüber geben, woraus sie bestehen und wie sie funktionieren.

Frames bestehen aus <head> und <body> Tags und können HTML-Tags wie <button> damit Nutzer mit Ihrem Frame interagieren können. Ein Frame nutzt OpenGraph-Tags, um verschiedene Ansichten darzustellen. OpenGraph-Tags sind einfach Metadaten, die steuern, wie Ihre URL angezeigt wird. Die folgenden Tags stellen beispielsweise einen Frame mit einem Bild dar (das mit dem fc:frame:image Eigenschaft) sowie vier Schaltflächen (gekennzeichnet durch das fc:frame:button: Eigenschaft).

<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>

Zu den erforderlichen Eigenschaften eines Rahmens gehören:

• fc:frame: Eine gültige Versionszeichenfolge oder vNext Metadaten-Eigenschaft (bezieht sich auf die Versionsverwaltung). Derzeit ist dies die einzige gültige Version des Tags.
• fc:frame:image: Ein Bild, das ein Seitenverhältnis von 1,91:1 oder 1:1 haben sollte.
• og:image: Ein Bild, das ein Seitenverhältnis von 1,91:1 haben sollte. Es dient als Ausweichlösung für Clients, die keine Frames unterstützen.

Einige weitere allgemeine Hinweise:

• Durch das „Casting“ (d. h. das Posten) der URL (z. B. https://yourappurl.com), unter der Ihr Frame gehostet wird, werden Frames als Beitrag dargestellt. Mit den Warpcast Frame Tools können Sie eine Vorschau des von Ihnen erstellten Frames auf Farcaster anzeigen, ohne ein Casting durchführen zu müssen.
• Durch Klicken auf eine Frame-Schaltfläche wird ein BEITRAG Anfrage an den Frame-Server, der neue Frames neu rendern und andere beliebige Logik ausführen kann.
• Um Daten aus Farcaster zu lesen oder dort zu schreiben, müssen Sie mit einem Farcaster-Knoten oder einem API-Anbieter interagieren und APIs wie „Casts“, „Fids“, „Storage“, „On Chain“ und „Events“ nutzen. Ein aktuelles Beispiel für eine Abfrage finden Sie in der Farcaster-Dokumentation zum Abrufen von Casts.
• Zum Zeitpunkt der Erstellung dieses Leitfadens muss Ihr Frame, wenn er eine POST-Anfrage sendet, innerhalb von 5 Sekunden antworten (ansonsten wird ein 400-Fehlercode ausgegeben). Eine Möglichkeit besteht darin, eine Aktualisierungsschaltfläche einzubauen, falls Ihr Frame länger als 5 Sekunden für die Antwort benötigt.

Nachdem Sie nun mehr über Frames wissen, richten wir unsere Entwicklungsumgebung ein und beginnen mit der Entwicklung.

Die nächsten Schritte beim Bau des Rahmens sind folgende:

1. Get access to Ethereum mainnet node endpoint with Quicknode + if you're going to run a Hubble node, you need an Optimism mainnet endpoint as well
2. Erstellen Sie einen Rahmen mit zwei Schaltflächen (z. B. Kreditkapazität berechnen und Quellcode), eines zum Auslösen unserer Frame-Server-Logik und das andere als Link zu unserem Quellcode (d. h. dieser Anleitung)
3. When the button is clicked, it will retrieve the users Ethereum wallet address (based on the incoming fID) and then make a JSON-RPC request to an Ethereum mainnet node endpoint to fetch the wallet balances of a user using the Token API from Quicknode (with the qn_getWalletTokenBalance Methode)
4. Wir werden einen weiteren API-Aufruf an die Coingecko-API senden, um die aktuellen Marktpreise der Token abzurufen, die sich im Wallet des Nutzers befinden (und die auch als Sicherheit für Kredite auf Compound.finance dienen können).
5. Zuletzt berechnen wir die Kreditkapazität auf der Grundlage der Token-Guthaben der Nutzer, ihrer USD-Werte und der Sicherheitenquoten auf Compound.finance. Abschließend rendern wir eine neue Frame-Ansicht mit den Ergebnissen (d. h. der Gesamtkreditkapazität).

Project Prerequisite: Create an Ethereum and Optimism Node Endpoint

Info

If you are planning to run your own Farcaster node, you will need to create a Ethereum mainnet and Optimism mainnet node endpoint. Otherwise, if you plan to use a paid API to get access to Farcaster data (such as Neynar), you only need to create an Ethereum mainnet node endpoint.

You're welcome to use public Ethereum nodes or deploy and manage your own infrastructure to complete this guide; however, if you'd like 8x faster response times, you can leave the heavy lifting to us. Sign up for an account Quicknode account here.

Once logged into Quicknode, click the Create an endpoint button, then select the Ethereum chain and mainnet network. After creating your endpoint, copy the HTTP Provider URL link and keep it handy, as you'll need it in the programming section. You will also need to have the Token and NFT API v2 bundle add-on enabled on your endpoint.

Halten Sie die URL(s) griffbereit, da Sie sie während der Entwicklung benötigen werden.

Projektvoraussetzung: Einen Hubble-Knoten betreiben oder Zugriff auf Neynar erhalten

Hubble-Knoten

Running a Farcaster node is free but requires access to RPC for Ethereum and Optimism. I personally used a DigitalOcean droplet (spec'd at 16 GB Memory / 4 AMD vCPUs / 200 GB Disk; which wasn't free) to run a node and then served the Farcaster HTTP API via ngrok.

Um den Hubble-Knoten auszuführen, stellen Sie sicher, dass Docker installiert ist und läuft, und führen Sie anschließend diesen cURL-Befehl aus, um Hubble zu installieren:

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

Folgen Sie den Anweisungen, geben Sie Ihre RPC-Endpunkte und Ihren Farcaster-Benutzernamen ein, und schon bald werden Sie sehen, wie das Docker-Image für den Hub läuft und Daten herunterlädt. Meiner Erfahrung nach dauerte die Synchronisierung etwa eine Stunde, zuzüglich etwas Zeit für die Einrichtung Ihrer VPS-Umgebung (z. B. Installation und Inbetriebnahme von Docker).

Der Hubble-Knoten stellt standardmäßig eine HTTP-API auf Port 2281 bereit, sodass wir ihn mit dem folgenden cURL-Testbefehl testen können:

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

Sie sollten eine Antwort wie die folgende sehen:

{"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":""}%

Anschließend können Sie Ihre API mit dem folgenden Befehl über ngrok bereitstellen:

ngrok http 2281

HINWEIS: Wenn Sie einen VPS nutzen, müssen Sie möglicherweise Ihre Firewall konfigurieren und eingehende Anfragen an Ihren Port 2281 zulassen (mithilfe eines Tools wie ufw)

Im Idealfall sollten Sie dieselbe cURL-Anfrage an Ihre ngrok-Weiterleitungs-URL senden können (z. B. curl'https://7f38-174-138-84-0.ngrok-free.app/v1/castsByFid?fid=2').

Als Nächstes zeigen wir Ihnen die einzelnen Schritte mithilfe von Neynar, einem kostenpflichtigen API-Dienst zum Lesen und Schreiben in Farcaster, falls Sie keinen eigenen Hubble-Knoten betreiben möchten.

Neynar-API

In diesem Abschnitt werden die Schritte für den Zugriff auf die Neynar-API beschrieben, vorausgesetzt, Sie betreiben keinen eigenen Hubble-Knoten.

Registrieren Sie sich hier bei Neynar. Zum Zeitpunkt der Erstellung dieses Artikels gibt es keine kostenlose Version.

Sobald Ihr Konto erstellt ist, halten Sie den API-Schlüssel griffbereit, da Sie ihn im folgenden Abschnitt beim Erstellen Ihres Frames-Projekts benötigen. Zu diesem Zeitpunkt sollten Sie eine der beiden oben genannten Optionen (Hubble-Knoten oder kostenpflichtige API) abgeschlossen haben, um Zugriff auf die Farcaster-Nutzerdaten zu erhalten. Als Nächstes widmen wir uns der Frames-Entwicklung.

So baut man einen Farcaster-Rahmen

In diesem Abschnitt erstellen Sie ein Farcaster-Frame, das die ERC-20-Token-Guthaben einer Wallet abruft und anschließend die Gesamtkreditkapazität unter Berücksichtigung des Sicherheiten-Satzes von Compound.finance berechnet. Wir verwenden TypeScript und Express.js (zusammen mit einigen anderen SDKs wie Ethers.js und dotenv), um unser Frames-Projekt zu erstellen.

Die wichtigsten technischen Komponenten unseres Projekts sind:

• Express.js: Ein Framework zur Erstellung von RESTful-APIs mit Node.js
• Quicknode Token API: Quickly fetch ERC-20 token balances without having to build and manage your own scripts
• Coingecko-API: Den aktuellen Marktpreis eines ERC-20-Tokens in US-Dollar abrufen
• Hubble-Knoten mit laufender HTTP-API oder Neynar-API-Schlüssel, um Benutzerdaten auf Farcaster abzurufen, wenn jemand mit dem Frame interagiert

Nun zum technischen Teil der Programmierung. Halten Sie bitte ein Terminalfenster und einen Code-Editor (z. B. VSCode) bereit.

Das Projekt einrichten

Klonen Sie zunächst das folgende Repo in ein Verzeichnis Ihrer Wahl:

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

Wenn wir das Verzeichnis durchsehen, stellen wir fest, dass es wie folgt aufgebaut ist:

.
├── 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

Bevor Sie die folgenden Befehle zur Installation der Abhängigkeiten ausführen, stellen Sie sicher, dass Ihre Node.js-Version 18.18 oder höher ist:

npm i

Öffnen Sie als Nächstes einen Code-Editor und anschließend die Datei „.env.example“, um unsere Umgebungsvariablen zu konfigurieren. Benennen Sie diese Datei in „.env“ um und geben Sie Ihre Umgebungsvariablen entsprechend ein:

QUICKNODE_HTTP_ENDPOINT="https:/quiknode.pro/12345/"
HUBBLE_URL="https://7f38-174-138-84-0.ngrok-example-url.app" ## POINTS TO PORT 2281
NGROK_URL="https://85e4-2601-589-4984-73d0.ngrok-example-url.app" # POINTS TO PORT 8080
NEYNAR_API_KEY="API_KEY" # IF NOT RUNNING HUBBLE NODE SERVING HTTP

Im nächsten Schritt zeigen wir Ihnen, wie Sie die NGROK_URL.

Starten Sie den Remote-ngrok-Server im Stammverzeichnis Ihres Projekts (ethereum/farcaster-frames):

ngrok http 8080

Nimm diese URL (z. B. https://85e4-2601-589-4984-73d0.ngrok-example-url.app) und füge es zu deinem .env Datei als NGROK_URL Variablenwert. Denken Sie daran, die Datei zu speichern.

Öffnen Sie anschließend ein weiteres Terminalfenster im selben Projektverzeichnis. Um den lokalen Server zu starten, führen Sie den Befehl npm run dev Befehl. Dadurch wird ein lokaler Server gestartet (z. B. http://localhost:8080) and you can access the API endpoint by adding /frame bis zum Schluss.

Lassen Sie uns alle wichtigen Teile der Codelogik durchgehen.

Ein Blick in den Code

Wir werden die Logik des Codes im gesamten „src “-Ordner behandeln.

src/utils/ethers.ts – ERC-20-Token-Guthaben abrufen

This file contains three functions that is related to Ethereum interactions.

Die getWalletTokenBalances Die Funktion führt einen RPC-Aufruf an die Token-API über die qn_getWalletTokenBalance Methode. Diese gibt die ERC-20-Token einer Wallet zurück und ermöglicht optional das Filtern nach bestimmten Token, die wir verwenden. Anhand der Antwort ordnen wir die Guthaben aller gefundenen berechtigten ERC-20-Token in einer strukturierten Liste an. Diese Liste enthält Angaben wie beispielsweise die Name, Adresse, Gesamtsaldo, und dezimal Genauigkeit jedes Tokens.

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
}

Die getBorrowPower Die Funktion berechnet die Kreditaufnahmekapazität der berechtigten Token, die von der getWalletTokenBalances Funktion.

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;
}

Die getUserfromfId has two configurations. The first option is to call your local (or remote) Hubble node's HTTP API server and get a user's Ethereum address based on their fID (Farcaster user ID). Alternatively, you can use the Neynar API to fetch the same information. Note that the API endpoints are different, and you will need to keep one commented out in order to work.

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 generieren​

Diese Datei enthält die Logik zum Rendern der Frame-Metadaten (OpenGraph-Tags). Dies geschieht mithilfe von zwei Funktionen, generateFarcasterFrameMetaTag und frameGenerator.

Die generateFarcasterFrameMetaTag Die Funktion erstellt Meta-Tags auf der Grundlage der angegebenen Frame-Eigenschaften, darunter Bilder, URLs und interaktive Schaltflächen.

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;
}

Die frameGenerator Die Funktion wandelt die generierten Meta-Tags dynamisch in ein HTML-Format um.

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

Diese Datei enthält unsere GET und BEITRAG Routen mit Express, um Frames zu bedienen.

Die /frame GET endpoint generates a frame with preset content as specified in its IFrameProps, während die BEITRAG endpoint first retrieves and calculates borrowing power based on the user's Ethereum address using the functions we created in the utils/ethers.ts Datei und stellt diesen Inhalt anschließend bereit, indem er die Frame-Eigenschaften angibt und einen 200 (OK)-Status zurückgibt.

Die übrigen Dateien in diesem Projektverzeichnis sollten selbsterklärend sein; falls Sie jedoch weitere Erläuterungen wünschen oder Fragen haben, hinterlassen Sie bitte am Ende der Anleitung ein Feedback!

In die Produktion bereitstellen

Da Frames mit APIs erstellt werden, müssen Sie sie über einen Dienst wie Vercel bereitstellen. Stellen Sie in diesem Fall sicher, dass Sie im Stammverzeichnis Ihres Projekts ein Git-Repository (d. h. .git) anlegen und dass Ihre .env-Datei nicht in das Repository übernommen wird. Melden Sie sich anschließend an, importieren Sie Ihr Repository, konfigurieren Sie Ihre Umgebungsvariablen, indem Sie die .env-Datei in den entsprechenden Abschnitt einfügen, und führen Sie dann die Bereitstellung durch!

Mit Ihrer öffentlichen URL können Sie Ihren Frame erneut im „Developer Frames“-Testtool testen und die URL veröffentlichen, um Ihren Frame öffentlich zugänglich zu machen. Beachten Sie, dass Ihr Frames-Server so lange aktiv bleiben muss, wie Ihr Frame funktionieren soll.

Nächste Schritte

Dieser Leitfaden hat Ihnen die Möglichkeiten von Frames aufgezeigt. Wenn Sie auf diesem Frame aufbauen möchten, finden Sie hier einige Ideen:

• Fügen Sie ein Textfeld mit dem fc:frame:input:text Metadaten, damit Nutzer Adressen eingeben können, um ihre Kreditwürdigkeit zu prüfen
• Richten Sie eine Whitelist ein, um nur bestimmten Benutzern (z. B. Benutzern mit einem Guthaben von mehr als x) das Prägen eines NFT zu gestatten. Sie können selbst ein NFT bereitstellen, aus dem geprägt werden soll. Anschließend können Sie einen Webhook einrichten, um benachrichtigt zu werden, sobald ein NFT geprägt wurde.
• Fügen Sie weitere Kreditprotokolle hinzu (z. B. Aave), die möglicherweise mehr Token oder unterschiedliche Besicherungsquoten anbieten
• Nutzen Sie die Märkte Funktion im „Comptroller“-Smart-Contract von Compound.finance um die vollständige Liste der cToken-Assets abzurufen und deren Besicherungsquoten zu überprüfen
• Use additional blockchains (e.g., Optimism, Arbitrum, Polygon, etc.) and/or lending protocols (e.g., Aave) to get optimized borrowing values based on the current supply/demand for that asset on a specific chain

Bonus-Tipp: Die Frames.js -Bibliothek enthält ein nützliches Frame-Tool, mit dem du während der Entwicklung Fehler beheben kannst (mir hat es geholfen!).

Abschließende Gedanken

You have been red-pilled on Farcaster and how to build your own Farcaster frame. Share your custom Frames on X and tag us @Quicknode!

If you have questions, check out our Discord server or provide feedback using the form below for help. Stay up to date with the latest by following us on Twitter (@Quicknode) and our Telegram announcement channel.

Wir ❤️ Feedback!

Teilen Sie uns gerne mit, wenn Sie Feedback oder Vorschläge für neue Themen haben. Wir freuen uns auf Ihre Rückmeldung.