图片


Farcaster ist ein Protokoll zum Aufbau ausreichend dezentraler sozialer Netzwerke.

Farcaster hat kürzlich das Konzept der „Frames“ eingeführt, mit denen Sie jeden Beitrag oder jede „Besetzung“ in eine interaktive Anwendung umwandeln können.

In diesem Tutorial wird beschrieben, wie Sie das Farcaster-Framework vollständig in der Kette erstellen und hosten. Dies ist auch ein Beispiel für die Erstellung eines dezentralen Servers.

Durch das Hosten Ihres Frameworks in der Kette erschließen Sie die folgenden Anwendungsfälle:

  • Das Framework kann von einer dezentralen autonomen Organisation (DAO) verwaltet werden;

  • Die Ersteller des Frameworks erhalten das volle Eigentum und sind nicht durch zentralisierte Server eingeschränkt.

Lernprogramm

In diesem Tutorial wird das ExpressJS-Framework verwendet, um eine REST-API zu erstellen und diese über das Internet Computer Protocol (ICP) bereitzustellen.

Schritt 1: DFX herunterladen

dfx ist die Befehlszeilenschnittstelle für das IC SDK, das von DFINITY für die Verwaltung von ICP-Container-Smart-Contracts entwickelt wurde.

Führen Sie den folgenden Befehl aus, um DFX herunterzuladen:

图片

Schritt 2: Azle herunterladen

Azle ist eine Bibliothek zum Erstellen intelligenter ICP-Container-Verträge mithilfe von Typescript und Javascript.

Genauer gesagt handelt es sich um einen Adapter, der vom Container Development Kit (CDK) oder IC SDK verwendet wird, um Typescript und Javascript mit allen Funktionen bereitzustellen, die zum Erstellen und Verwalten von Container-Smart-Contracts erforderlich sind.

Führen Sie den folgenden Befehl aus, um Azle herunterzuladen:

图片

Bitte beachten Sie, dass Sie je nach Gerät möglicherweise zusätzliche Abhängigkeiten herunterladen müssen. Alle Abhängigkeitsanforderungen finden Sie in den folgenden Ressourcen:

demergent-labs.github.io/azle/get_started.html

Wenn Sie beispielsweise einen Mac verwenden, führen Sie den folgenden Befehl aus:

图片

Schritt 3: Erstellen Sie ein neues Azle-Projekt

Führen Sie den folgenden Befehl aus, um mit Azle ein neues Projekt zu erstellen:

图片

Schritt 4: Erstellen Sie den Rahmen

Frames werden mit Farcaster-spezifischen OpenGraph-Tags erstellt, auf die in diesem Dokument verwiesen wird.

Hier ist ein Beispiel für einen Frame, der ein Bild, vier Schaltflächen und einen URL-Link enthält:

图片

Speichern Sie es zur späteren Verwendung in diesem Tutorial in einer Textdatei.

Schritt 5: Richten Sie den Express-Server in src/index.ts ein

Azle stellt eine Server-Methode bereit, mit der Sie eine Rückruffunktion übergeben können, die eine httpServer-Knoteninstanz zurückgeben muss.

图片

Gibt eine Knoten-httpServer-Instanz mit ExpressJS zurück. Dies ist ein Beispiel für einen mit ExpressJS erstellten httpServer.

图片

Durch die Kombination dieser beiden Ergebnisse ergeben sich folgende Ergebnisse:

图片

Schritt 6: Geben Sie das Farcaster-Framework für den REST-API-Aufruf zurück

Der Frame aus Schritt 4 gibt den Farcaster-Frame für den REST-API-Aufruf zurück und enthält ein Bild, vier Schaltflächen und eine URL.

Dieses Beispiel übergibt den Bildlink, den Schaltflächentext und den Inhalt des URL-Links, übergibt den Frame und sendet den gesamten erstellten Frame als API-Antwort:

图片

Schritt 7: Aktualisieren Sie src/index.ts mit dem vollständigen Code aus den Schritten 5 und 6

Aktualisieren Sie src/index.ts mit dem folgenden Code:

图片图片

Schritt 8: Stellen Sie die Anwendung bereit

lokal

Stellen Sie es lokal bereit, um die Anwendung zu testen. Führen Sie den folgenden Befehl aus, um es lokal bereitzustellen:

图片

Nach der Ausführung dieses Befehls wird in der Shell eine ähnliche Erfolgsmeldung angezeigt.

图片

Beachten Sie, dass sich die Container-ID und die ID, die während der Bereitstellung im Link zur Candid-Schnittstelle des Back-End-Containers bereitgestellt werden, von dem hier gezeigten Beispiel unterscheiden.

Wenn das Beispiel-Repository geforkt wurde, löschen Sie canister_ids.json vor der Bereitstellung.

Die aufgelisteten Backend-Container-Candid-Schnittstellenlinks sind Benutzeroberflächen zum Testen der Backend-Funktionalität und werden im folgenden Format bereitgestellt:

图片

API-Endpunkte sind eine Ableitung dieses Formats und sollten der folgenden Struktur folgen:

图片

Wenn die Bereitstellung also einen Back-End-Container-Candid-Schnittstellenlink bereitstellt, zum Beispiel:

图片

Greifen Sie über diesen grundlegenden Endpunkt auf Ihre API zu:

图片

Mainnet (Produktion)

Um eine funktionsfähige Anwendung im Mainnet oder in der Produktion bereitzustellen, lesen Sie diesen Leitfaden oder werfen Sie Jennifertran auf Farcaster.

Führen Sie den folgenden Befehl aus, um die Anwendung im Internet-Computer-Mainnet bereitzustellen.

图片

Nach der Ausführung dieses Befehls wird in der Shell eine Erfolgsmeldung ähnlich der folgenden angezeigt:

图片

Beachten Sie, dass sich die Container-ID und die ID, die während der Bereitstellung im Link zur Candid-Schnittstelle des Back-End-Containers bereitgestellt werden, von dem hier gezeigten Beispiel unterscheiden.

Wenn das Beispiel-Repository geforkt wurde, löschen Sie canister_ids.json vor der Bereitstellung.

Die aufgelisteten Backend-Container-Candid-Schnittstellenlinks sind Benutzeroberflächen zum Testen der Backend-Funktionalität und werden im folgenden Format bereitgestellt:

图片

API-Endpunkte sind eine Ableitung dieses Formats und sollten der folgenden Struktur folgen:

图片

Wenn die Bereitstellung also einen Back-End-Container-Candid-Schnittstellenlink bereitstellt, zum Beispiel:

图片

Greifen Sie über diesen grundlegenden Endpunkt auf Ihre API zu:

图片

Schritt 9: Vorschau des Farcaster-Frameworks mit dem Framework-Validator

Sie können Farcaster Frame mit dem Frame Validator-Tool in der Vorschau anzeigen.

Bitte beachten Sie, dass nur Mainnet-Produktionsendpunkte unterstützt werden, lokale Endpunkte können nicht verwendet werden.

Geben Sie den Endpunkt ein, den Sie in Schritt 8 erhalten haben, und klicken Sie auf „Laden“. Wenn Ihr Endpunkt beispielsweise https://swua7-kqaaa-aaaao-a3fna-cai.raw.icp0.io/ ist, sollte die Vorschau so aussehen:

图片

Ressource

Vollständiger Beispielcode:

  • github.com/Gekctek/farcaster-frame-azle

Beispiel für den Aufbau eines On-Chain-ExpressJS-Servers mit Azle:

  • github.com/demergent-labs/azle/tree/main/examples/express


Erstellen Sie Container-Smart-Contracts auf ICP mit Azle und Typescript:

  • demergent-labs.github.io/azle/the_azle_book.html


Vielen Dank an Gekctek für seinen Beitrag zu diesem Beispiel und Jordan Last für seinen Beitrag zu Azle.

图片

#内容挖矿 #ICP #DFINITY


IC-Inhalte, die Ihnen wichtig sind

Technologiefortschritt |. Projektinformationen |

Sammeln und folgen Sie dem IC Binance Channel

Bleiben Sie mit den neuesten Informationen auf dem Laufenden