实现一个包括前端与后端的 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 的名字,
表示 msg 的操作符是 "AddNew",则触发这个 Handler。Handlers.utils.hasMatchingTag("Action", "AddNew"
)
在触发的时候执行匿名函数,匿名函数进行两个操作:
向列表插入一个新的
,值为 item
。msg.Data
将 counter 更新为
列表的长度。Players
:函数返回值为Handlers.utils.reply("bizz buzz")(msg)
。bizz buzz
第二个 Handler 的核心作用是将其他的源代码作为返回值,这样我们通过一种 tricky 的方式实现了代码开源:)。
在
中点击 ao.link
查看 Info:Fetch *
2.3 CLI 的更多操作
在加载完
文件后,我们在 CLI 中可以实践更多操作。.lua
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/ 复制
id 以访问:manifest
通过:
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
所有评论