实现一个包括前端与后端的 AO-based 计数器。

作者：李大狗

审阅：outprog

来源：内容公会 - 新闻

AO-Counter | AO 极速入门（一）

本文实现关于 AO 的第一个案例，一个基于 AO 的计数器，每点击一次按键计数器 +1，同时点击者的地址被记录在 AO Process 中的列表中。

参考自：

https://github.com/iamgamelover/ao-twitter

Repo:

https://github.com/rootMUD/ao-counter

Vercel version:

https://ao-counter.vercel.app/

Arweave version:

https://arweave.net/bleZF-gxe_vv0RYMNhHABsvq6wvhvmBBnQ5lfzwJJKQ

Process on

ao.link

:

https://www.ao.link/#/entity/Rijbx6FduUMdCZM0tJ4PPxXljUNy1m0u_kmMIFGFM5c

0x01 什么是 AO？

💡参考资料 ——

AO：构建一个去中心化的 Erlang： https://permadao.com/permadao/AO-Erlang-ae1c8ab020b24e379457d92014e3d09e

技术详解 ao 超并行计算机:

https://permadao.com/permadao/ao-9e58170a1c9c41628b1732eb13098209

当我们提到程序，我们可以把其抽象为两样东西 —— 「计算」和 「存储」。

以太坊从分布式计算出发，先着重智能合约，然后走向存储，所以我们可以看到

ETH

Storage

。

Arweave 从分布式存储出发，先完成了存储层，然后走向计算，所以我们可以看到

AO

。

AO 继承自 Erlang 哲学。

所以 Erlang 与 AO 以及我们构建的一切深深地交织在一起，这不仅仅是架构，也是一种哲学甚至几乎是美学的交融。虽然我们不再做那种八十年代的电话呼叫的事情，但还是非常接近。并且，我们甚至为它被称为超级光束设计了 Logo。

—— AO：构建一个去中心化的 Erlang

Erlang 哲学的核心就是轻量级的 Process 的设计原则与 Process 间的消息传递机制：

所以，我们可以把 AO 理解成无数个 Process 构建的 Perma Decentralized Process Network，其中的关键点是 Process 相互隔离 ，不同的 Process 并不共享内存池。

这是一个高度抽象的模型，将其落实到应用场景里，会有很多迷人的可能性。

例如，用于构建

Autonomous AI Agent Network

：

Ref: https://bodhi.wtf/space/5/15063

更多关于 Erlang 哲学的内容可查看：

面对软件错误构建可靠的分布式系统 ——

https://bodhi.wtf/space/5/15083

0x02 Lua Process 的实现与部署

我们首先通过 Lua 来实现轻量级 Process。

2.1 极简 CLI 操作指南

如何安装客户端请查看：

https://cookbook_ao.arweave.dev/tutorials/begin/preparations.html

我们通过 aos 启动一个 aos CLI：

$ aos

通过

ao.id

我们可以查看当前 process 的 id：

aos> ao.id

在

ao.link

上我们可以看到和这个 process 相关的信息：

https://www.ao.link/#/entity/Rijbx6FduUMdCZM0tJ4PPxXljUNy1m0u_kmMIFGFM5c

然后我们通过：

aos> .load counter.lua

即可将代码加载到

process

里。

2.2 Process 核心代码解析

在最开始我们定义了一个列表

Players

和一个整型 counter：

核心 Handler ——

"AddNew" 是 Handler 的名字，

Handlers.utils.hasMatchingTag("Action", "AddNew"

)

表示 msg 的操作符是 "AddNew"，则触发这个 Handler。

在触发的时候执行匿名函数，匿名函数进行两个操作：

向列表插入一个新的

item

，值为 msg.Data。

将 counter 更新为

Players

列表的长度。

Handlers.utils.reply("bizz buzz")(msg)

：函数返回值为 bizz buzz。

第二个 Handler 的核心作用是将其他的源代码作为返回值，这样我们通过一种 tricky 的方式实现了代码开源:)。

在

ao.link

中点击 Fetch * 查看 Info：

2.3 CLI 的更多操作

在加载完

.lua

文件后，我们在 CLI 中可以实践更多操作。

  • Players

输入变量查看值。

💡也可以直接运行 lua 代码。

  • Send({ Target = ao.id, Data = "0x0", Action = "AddNew" })

向 Process 发送信息。

0x03 React 前端的实现与部署

Lua Process 相当于传统程序的后端，在实现 Lua Process 之后，我们再开发一下前端，实现对 Lua Process 的调用，就可以完成我们的程序了。

3.1 前端核心代码

见：

https://github.com/rootMUD/ao_counter/tree/main/dapp

3.1.1 环境变量

在

dapp/src/app/util/consts.ts

配置 Process 的 Unique ID，在这里是 AO_COUNTER：

3.1.2 Process 的变量调用

dapp/src/app/pages/SitePage.tsx :

通过调用封装的

getDataFromAO

方法拿到 Process 中的变量。

3.1.3 Process 的函数调用

在

button

被点击时，调用 handleClick 函数，进而调用 messageToAO 方法，给 process 传递信息。

3.1.4 钱包连接模块

调用

ArConnect

钱包，拿到 Wallet Address。

3.2 部署到 Vercel 上

我们在

dapp

中安装了 vercel插件，所以可以通过一行命令部署到 vercel 托管平台上：

在部署完成后，我们就可以对其访问了：

https://ao-counter.vercel.app/

3.3 Unstoppable Program — 部署到 Arweave 上

我们也可以选择将前端程序也托管到

Arweave

上，实现彻底的去中心化。

💡Guide Video：

https://www.youtube.com/watch?v=Va5B4SE8Zu8

以 ArDrive 为例：

1/ 通过

yarn build

生成静态页面

2/ 将文件夹上传到 ArDrive

3/ 为网站生成

manifest

4/ 复制

manifest

id 以访问：

通过：

https://arweave.net/{数据交易 id}

就可以访问你部署的应用了！

5/ 配置传统域名

  • 以这个仓库为模板创建新仓库：

https://github.com/NonceGeek/scaffold-wabi-sabi

  • 修改 index.html：

  • 修改 desktopURL 和 mobileURL：

  • 在 vercel 上导入跳转页面：

  • 配置域名（在此不做赘述）：

然后就可以通过自定义域名访问了！

https://ao-counter.rootmud.xyz/

 🏆 “捉虫”有奖：在本文发现错字、病句、描述有误，点我报告，可得激励。

免责声明：本文内容仅供参考，不构成任何投资建议。

🔗 关于 PermaDAO：Website | Twitter | Telegram | Discord | Medium | Youtube