AO-Counter | AO 极速入门(一)
AO-Counter | AO 极速入门(一)
本文实现关于 AO 的第一个案例,一个基于 AO 的计数器,每点击一次按键计数器 +1,同时点击者的地址被记录在 AO Process 中的列表中。
参考自:
Repo:
Vercel version:
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
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:
更多关于 Erlang 哲学的内容可查看:
面对软件错误构建可靠的分布式系统 ——
0x02 Lua Process 的实现与部署
我们首先通过 Lua 来实现轻量级 Process。
2.1 极简 CLI 操作指南
如何安装客户端请查看:
https://cookbook_ao.arweave.dev/tutorials/begin/preparations.html
我们通过 aos 启动一个 aos CLI:
$ aos
!https://p.ipic.vip/nq4phl.png
通过ao.id我们可以查看当前 process 的 id:
aos> ao.id
!https://p.ipic.vip/xhjsfw.jpg
在 ao.link 上我们可以看到和这个 process相关的信息:
https://www.ao.link/#/entity/Rijbx6FduUMdCZM0tJ4PPxXljUNy1m0u_kmMIFGFM5c
然后我们通过:
aos> .load counter.lua
即可将代码加载到 process 里。
!https://p.ipic.vip/lskm5h.jpg
2.2 Process 核心代码解析
Players = Players or {} -- bizz buzz count = 0 -- .load counter.lua -- Send({ Target = ao.id, Action = "Click" }) Handlers.add( "AddNew", Handlers.utils.hasMatchingTag("Action", "AddNew"), function (msg) table.insert(Players, msg.Data) count = #Players Handlers.utils.reply("bizz buzz")(msg) end ) Handlers.add( "Info", Handlers.utils.hasMatchingTag("Action", "Info"), function (msg) -- TODO: impl the info with the source code of this snippet info = [[ Players = Players or {} -- bizz buzz count = 0 -- .load counter.lua -- Send({ Target = ao.id, Action = "Click" }) Handlers.add( "AddNew", Handlers.utils.hasMatchingTag("Action", "AddNew"), function (msg) table.insert(Players, msg.Data) count = #Players Handlers.utils.reply("bizz buzz")(msg) end ) ]] Handlers.utils.reply(info)(msg) end )
在最开始我们定义了一个列表 Players 和一个整型 counter:
Players = Players or {} count = 0
核心 Handler ——
Handlers.add( "AddNew", Handlers.utils.hasMatchingTag("Action", "AddNew"), function (msg) table.insert(Players, msg.Data) count = #Players Handlers.utils.reply("bizz buzz")(msg) end )
"AddNew" 是 Handler 的名字,Handlers.utils.hasMatchingTag("Action", "AddNew") 表示 msg 的操作符是 "AddNew",则触发这个 Handler。
在触发的时候执行匿名函数,匿名函数进行两个操作:
table.insert(Players, msg.Data) count = #Players
向列表插入一个新的 item,值为 msg.Data。
将 counter 更新为 Players 列表的长度。
Handlers.utils.reply("bizz buzz")(msg):函数返回值为bizz buzz。
Handlers.add( "Info", Handlers.utils.hasMatchingTag("Action", "Info"), function (msg) -- TODO: impl the info with the source code of this snippet info = [[ Players = Players or {} -- bizz buzz count = 0 -- .load counter.lua -- Send({ Target = ao.id, Action = "Click" }) Handlers.add( "AddNew", Handlers.utils.hasMatchingTag("Action", "AddNew"), function (msg) table.insert(Players, msg.Data) count = #Players Handlers.utils.reply("bizz buzz")(msg) end ) ]] Handlers.utils.reply(info)(msg) end )
第二个 Handler 的核心作用是将其他的源代码作为返回值,这样我们通过一种 tricky 的方式实现了代码开源:)。
在 ao.link 中点击 Fetch * 查看 Info:
2.3 CLI 的更多操作
在加载完.lua文件后,我们在 CLI 中可以实践更多操作。
Players
输入变量查看值。
!https://p.ipic.vip/74ev1n.jpg
💡也可以直接运行 lua 代码。
Send({ Target = ao.id, Data = "0x0", Action = "AddNew" })
向 Process 发送信息。
0x03 React 前端的实现与部署
Lua Process 相当于传统程序的后端,在实现 Lua Process 之后,我们再开发一下前端,实现对 Lua Process 的调用,就可以完成我们的程序了。
3.1 前端核心代码
见:
3.1.1 环境变量
在 dapp/src/app/util/consts.ts 配置 Process 的 Unique ID,在这里是 AO_COUNTER:
export const AO_COUNTER = "Rijbx6FduUMdCZM0tJ4PPxXljUNy1m0u_kmMIFGFM5c";
3.1.2 Process 的变量调用
dapp/src/app/pages/SitePage.tsx :
... import { getWalletAddress, getDataFromAO, connectWallet, messageToAO, shortAddr, } from "../util/util"; ... async getCount() { let replies = await getDataFromAO(AO_COUNTER, "GetCount"); console.log("get count:", replies); this.setState({ count: replies }); // Update state with the count } async start() { this.getCount(); } ...
通过调用封装的 getDataFromAO 方法拿到 Process 中的变量。
3.1.3 Process 的函数调用
... async addCount() { let response = await messageToAO(AO_COUNTER, this.state.address, "AddNew"); console.log("add count:", response); } ... handleClick = (e: { currentTarget: any }) => { console.log("Button clicked!"); const button = e.currentTarget; const ripple = document.createElement("span"); ripple.classList.add("ripple"); button.appendChild(ripple); // Remove the span after the animation is done setTimeout(() => { ripple.remove(); }, 600); this.addCount(); setTimeout(() => { this.getCount(); }, 1000); // Delay getCount by 1 second }; ... <div className="button-container"> <button onClick={this.handleClick}>+ 1</button> <p> {" "} ={">"} {this.state.count} </p> </div> ...
在 button 被点击时,调用 handleClick 函数,进而调用 messageToAO 方法,给 process 传递信息。
3.1.4 钱包连接模块
... async disconnectWallet() { this.setState({ message: "Disconnect..." }); Server.service.setIsLoggedIn(""); Server.service.setActiveAddress(""); localStorage.removeItem("id_token"); this.setState({ address: "", message: "" }); } async connect2ArConnect() { let connected = await connectWallet(); if (connected) { let address = await getWalletAddress(); this.setState({ address: address }); console.log("user address:", address); this.afterConnected(address); } } async afterConnected(address: string, othent?: any) { Server.service.setIsLoggedIn(address); Server.service.setActiveAddress(address); } ... {this.state.address ? ( <div> <div className="app-icon-button connect" onClick={() => this.disconnectWallet()} > {shortAddress} </div> </div> ) : ( <div className="app-icon-button connect" onClick={() => this.connect2ArConnect()} > <BsWallet2 size={20} /> ArConnect </div> )}
调用 ArConnect 钱包,拿到 Wallet Address。
3.2 部署到 Vercel 上
我们在 dapp 中安装了vercel插件,所以可以通过一行命令部署到 vercel 托管平台上:
$ yarn vercel --prod
在部署完成后,我们就可以对其访问了:
3.3 Unstoppable Program — 部署到 Arweave 上
我们也可以选择将前端程序也托管到 Arweave 上,实现彻底的去中心化。
💡Guide Video:
以 ArDrive 为例:
1/ 通过 yarn build 生成静态页面
!https://p.ipic.vip/nwj2mk.jpg
2/ 将文件夹上传到 ArDrive
3/ 为网站生成 manifest
4/ 复制 manifest id 以访问:
通过:
https://arweave.net/{数据交易 id}
就可以访问你部署的应用了!
5/ 配置传统域名
以这个仓库为模板创建新仓库:
!https://p.ipic.vip/daqyz6.jpg
修改 index.html:
修改 desktopURL 和 mobileURL:
在 vercel 上导入跳转页面:
!https://p.ipic.vip/a3aeke.jpg
配置域名(在此不做赘述):
然后就可以通过自定义域名访问了!
🏆 “捉虫”有奖:在本文发现错字、病句、描述有误,点我报告,可得激励。
免责声明:本文内容仅供参考,不构成任何投资建议。
🔗 关于 PermaDAO:Website | Twitter | Telegram | Discord | Medium | Youtube