查看原文
其他

如何创建链上 Farcaster 框架

DFINITY Internet Computer 2024-04-02



Farcaster 是一种用于构建足够去中心化的社交网络的协议。
Farcaster 最近引入了“框架”的概念,它使您能够将任何帖子或 “cast” 变成交互式应用程序。
本教程概述了如何创建和托管完全在链上的 Farcaster 框架,这也是如何创建去中心化服务器的示例。
通过在链上托管框架,您可以解锁以下用例:
  • 框架可以由去中心化自治组织(DAO)管理;‍

  • 框架创建者获得完全的所有权,不受中心化服务器的限制。

教程
本教程使用 ExpressJS 框架创建 REST API 并将其部署在互联网计算机协议(ICP)上。
第 1 步:下载 DFX
dfx 是 IC SDK 的命令行界面,该 SDK 由 DFINITY 构建,用于管理 ICP 容器智能合约。
运行以下命令下载 DFX:


第 2 步:下载 Azle
Azle 是一个用 Typescript 和 Javascript 构建 ICP 容器智能合约的库。
更具体地说,它是一个容器开发套件(CDK)或 IC SDK 使用的适配器,为 Typescript 和 Javascript 提供创建和管理容器智能合约所需的所有功能。
运行以下命令下载 Azle:


请注意,根据您的设备,您可能需要下载其他依赖项,有关所有依赖项要求,请参阅以下资源:
demergent-labs.github.io/azle/get_started.html
例如,如果使用 Mac,请运行以下命令:


第 3 步:创建一个新的 Azle 项目
运行以下命令以使用 Azle 创建新项目:


第 4 步:创建框架
框架是使用本文档中引用的 Farcaster 特定 OpenGraph 标签创建的。
下面是一个包含图像、四个按钮和 URL 链接的框架示例:


将其保存在文本文件中,以供本教程稍后使用。
第 5 步:在 src/index.ts 中设置 Express 服务器
Azle 提供了一个 Server 方法,可让您传入必须返回节点 httpServer 实例的回调函数。

 利用 ExpressJS 返回节点 httpServer 实例,这是使用 ExpressJS 构建的 httpServer 的示例。


将这两个结果结合起来,结果如下:


第 6 步:返回 REST API 调用的 Farcaster 框架
返回 REST API 调用的 Farcaster 框架,步骤 4 中的框架有一个图像、四个按钮和一个 URL。
此示例传入图像链接、按钮文本和 URL 链接的内容,传入框架,并将整个构造的框架作为 API 响应发送:


第 7 步:使用步骤 5 和 6 中的完整代码更新 src/index.ts
使用以下代码更新 src/index.ts:


第 8 步:部署应用程序
本地
将其部署在本地以测试应用程序,执行以下命令进行本地部署:


运行此命令后,shell 中将出现与此类似的成功消息。


请注意,部署期间后端容器 Candid 接口链接中提供的容器 ID 和 ID 将与此处显示的示例不同。
如果示例存储库已分叉,请在部署之前删除 canister_ids.json。
列出的后端容器 Candid 界面链接是用于测试后端功能的 UI,并以以下格式提供:


API 端点是此格式的衍生形式,应遵循以下结构:


因此,如果部署提供了后端容器 Candid 接口链接,例如:


通过此基本端点访问您的 API:


主网(生产)
部署在主网或生产环境上以获得功能性应用程序,要获取在主网上部署的 Cycles 或 Gas,请查看本指南或在 Farcaster 上投放 jennifertran。
运行以下命令将应用程序部署到互联网计算机主网上。


运行此命令后,shell 中将出现类似于以下内容的成功消息:


请注意,部署期间后端容器 Candid 接口链接中提供的容器 ID 和 ID 将与此处显示的示例不同。
如果示例存储库已分叉,请在部署之前删除 canister_ids.json。
列出的后端容器 Candid 界面链接是用于测试后端功能的 UI,并以以下格式提供:


API 端点是此格式的衍生形式,应遵循以下结构:


因此,如果部署提供了后端容器 Candid 接口链接,例如:


通过此基本端点访问您的 API:


第 9 步:使用框架验证器预览 Farcaster 框架
您可以使用其 Frame Validator 工具预览 Farcaster Frame。
请注意,仅支持主网生产端点,无法使用本地端点。
输入您在步骤 8 中收到的端点,然后单击加载,例如,如果您的端点是 https://swua7-kqaaa-aaaao-a3fna-cai.raw.icp0.io/,则预览应如下所示:


资源
完整示例代码: 
  • github.com/Gekctek/farcaster-frame-azle

如何使用 Azle 构建链上 ExpressJS 服务器的示例:
  • github.com/demergent-labs/azle/tree/main/examples/express

使用 Typescript 通过 Azle 在 ICP 上构建容器智能合约:
  • demergent-labs.github.io/azle/the_azle_book.html

强烈感谢 Gekctek 对这个例子的贡献以及 Jordan Last 对 Azle 的贡献。


作者:Jennifer Tran翻译:Catherine

-              -


Dominic Williams 祝大家新年好

改善查询执行延迟

The ICP.Hubs of Asia





你关心的 IC 内容

技术进展 | 项目信息 | 全球活动



长按关注 IC 微信公众号

掌握最新资讯


*添加小助手微信 comiocn 进交流社群


继续滑动看下一个
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存