フロントエンドとバックエンドを含む AO ベースのカウンターを実装します。
著者:李大溝
によってレビューされました: outprog
出典:コンテンツ ギルド - ニュース
AO-カウンター AO クイックスタート (1)
この記事では、AO に関する最初のケース、AO に基づくカウンターを実装します。ボタンがクリックされるたびにカウンターが +1 され、クリッカーのアドレスが AO プロセスのリストに記録されます。
参照元:
https://github.com/iamgamelover/ao-twitter
リポジトリ:
https://github.com/rootMUD/ao-counter
ヴェルセルのバージョン:
https://ao-counter.vercel.app/
アルウィーヴのバージョン：
https://arweave.net/bleZF-gxe_vv0RYMNhHABsvq6wvhvmBBnQ5lfzwJJKQ
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
プログラムについて話すとき、「計算」と「ストレージ」という 2 つのことに抽象化できます。
https://permadao.com/permadao/ao-9e58170a1c9c41628b1732eb13098209
プログラムについて話すとき、「計算」と「ストレージ」という 2 つのことに抽象化できます。
イーサリアムは分散コンピューティングから始まり、最初はスマート コントラクトに焦点を当て、次にストレージに移行するため、 ETH Storage
Arweave は分散ストレージから始まり、最初にストレージ層を完成させ、次にコンピューティングに移行するため、 AO
AO は Erlang の哲学を継承しています。
そのため、Erlang は AO や私たちが構築するすべてのものと深く絡み合っており、それは単なるアーキテクチャではなく、哲学的であり、ほとんど美学的な交差点でもあります。 80年代のような電話はもうしませんが、それでもかなり近い状況です。そして、スーパービームという名前のロゴもデザインさせていただきました。
——AO: 分散型 Erlang の構築
Erlang の哲学の中核は、軽量プロセスの設計原則とプロセス間のメッセージ受け渡しメカニズムです。
したがって、AO は、無数のプロセスによって構築される永久分散プロセス ネットワークとして理解できます。重要な点は、プロセスが互いに分離されており、異なるプロセスがメモリ プールを共有しないということです。
これは高度に抽象化されたモデルであり、アプリケーション シナリオに実装すると、多くの魅力的な可能性が生まれます。
たとえば、建物の場合Autonomous AI Agent Network ：
参照: https://bodhi.wtf/space/5/15063
Erlang の哲学について詳しくは、以下をご覧ください。
ソフトウェアエラーに直面しても信頼性の高い分散システムを構築する——
https://bodhi.wtf/space/5/15083
0x02 Lua プロセスの実装とデプロイメント
まず、Lua を介して軽量プロセスを実装します。
2.1 ミニマリスト CLI 操作ガイド
クライアントのインストール方法については、以下を参照してください。
まず、Lua を介して軽量プロセスを実装します。
2.1 ミニマリスト CLI 操作ガイド
クライアントのインストール方法については、以下を参照してください。
https://cookbook_ao.arweave.dev/tutorials/begin/preparations.html
aos を通じて aos CLI を開始します。
$ aos
ao.idを通じて、現在のprocessの ID を表示できます。
aos> ao.id
存在するこのprocessao.link
https://www.ao.link/#/entity/Rijbx6FduUMdCZM0tJ4PPxXljUNy1m0u_kmMIFGFM5c
次に、次のように渡します。
aos> .load counter.lua
コードはprocess
2.2 プロセスコアコードの分析
最初に、リストPlayersと整数counterを定義しました。
コアハンドラー ——
「AddNew」はハンドラーの名前です。 Handlers.utils.hasMatchingTag("Action", "AddNew" )
匿名関数は、トリガーされると次の 2 つの操作を実行します。
値msg.Dataitem
値msg.Dataitem
カウンタをPlayers
Handlers.utils.reply("bizz buzz")(msg)bizz buzz
2 番目のハンドラーの中心となる機能は、他のソース コードを戻り値として使用することです。これにより、トリッキーな方法でコードをオープンソースにすることができます :)。
ao.linkFetch *
2.3 CLI を使用したその他の操作
.lua
-
Players
変数を入力して値を表示します。
💡lua コードを直接実行することもできます。
-
Send({ Target = ao.id, Data = "0x0", Action = "AddNew" })
情報をプロセスに送信します。
0x03 React フロントエンドの実装とデプロイメント
Lua プロセスは、従来のプログラムのバックエンドに相当します。Lua プロセスを実装した後、フロントエンドを開発し、Lua プロセスへの呼び出しを実装してプログラムを完成させることができます。
3.1 フロントエンドコアコード
見る：
3.1 フロントエンドコアコード
見る：
https://github.com/rootMUD/ao_counter/tree/main/dapp
3.1.1 環境変数
dapp/src/app/util/consts.tsでプロセスの一意の ID を構成します。ここではAO_COUNTERです。
3.1.2 プロセス変数の呼び出し
dapp/src/app/pages/SitePage.tsx :
カプセル化されたgetDataFromAOメソッドを呼び出して、プロセス内の変数を取得します。
3.1.3 処理関数呼び出し
buttonをクリックすると、 handleClick関数が呼び出され、次にmessageToAOメソッドが呼び出されて、プロセスに情報が渡されます。
3.1.4 ウォレット接続モジュール
3.1.4 ウォレット接続モジュール
ArConnectウォレットを呼び出してウォレット アドレスを取得します。
3.2 Vercel へのデプロイ
dappにvercelプラグインをインストールしたので、1 行のコマンドでvercelホスティング プラットフォームにデプロイできます。
デプロイメントが完了すると、アクセスできるようになります。
https://ao-counter.vercel.app/
3.3 止められないプログラム — Arweave に展開
完全な分散化を実現するために、 Arweave
💡ガイドビデオ:
https://www.youtube.com/watch?v=Va5B4SE8Zu8
ArDrive を例に挙げます。
1/パスyarn build
2/ フォルダーを ArDrive にアップロードします
3/ Web サイトのmanifest
4/ manifest
合格：
4/ manifest
合格：
https://arweave.net/{データ トランザクション ID}
これで、デプロイされたアプリケーションにアクセスできるようになりました。
5/ 従来のドメイン名の設定
- このウェアハウスをテンプレートとして使用して、新しいウェアハウスを作成します。
https://github.com/NonceGeek/scaffold-wabi-sabi
-
index.htmlを変更します。 -
desktopURLとmobileURL変更します。 - vercel にジャンプ ページをインポートします。
- ドメイン名を構成します (ここでは詳しく説明しません)。
その後、カスタム ドメイン名を介してアクセスできるようになります。
https://ao-counter.rootmud.xyz/
🏆 「バグを捕まえた」場合の賞品: この記事内でタイプミス、間違った文章、または間違った説明を見つけた場合は、 私をクリックして報告してください。インセンティブが与えられます。
免責事項: この記事の内容は参照のみを目的としており、投資アドバイスを構成するものではありません。
全てのコメント