ホームページ >テクノロジー周辺機器 >IT業界 >Ethereum Dapps：DAO契約のためにWeb3 UIの構築
Ethereum Dapps：DAO契約のためにWeb3 UIの構築
- Joseph Gordon-Levittオリジナル
- 2025-02-16 08:59:10203ブラウズ
このチュートリアルは、イーサリアムブロックチェーン上の分散型アプリケーション（DAPPS）を構築する旅を続けています。 パート6は、DAOのコア機能（投票、ブラックリスト、配当分布）を締めくくり、この最後のパートは、インタラクションのためのユーザーインターフェイスの作成に焦点を当てています。
重要な概念：
- 簡単なHTMLとJavaScriptのフロントエンドは、Ethereum Smart Contractsに接続します。 手の込んだ設計よりもコア機能の優先順位付け。
- トリュフの移動は、展開中にトークン転送を自動化し、テストを合理化します。
- Web3.jsは、フロントエンドとイーサリアムブロックチェーンの間の通信を容易にし、ウォレット管理にメタマスクを必要とします。
- ユーザーステータス（ログイン/アウト）、トークンバランス、およびWeb3.jsの非同期機能を使用してトランザクション履歴を動的に表示します。 リアルタイムイベントリスニング（トークン転送、投票結果）はユーザーエクスペリエンスを向上させます。
- 提案の提出と投票のためのユーザーインターフェイスは、コミュニティへの参加を促進します。 メインのイーサリアムネットワークに展開する前に、徹底的なローカルテストは重要です。
- トークン転送の自動：
）がDAOへのトークン転送を自動化します。 この約束ベースのコードは、トークンとDAOを順次展開し、総トークンの供給と所有権をDAOの住所に転送します。 この移行を実行します。
フロントエンド（index.html）：4_configure_relationship.js
<code class="language-javascript">var Migrations = artifacts.require("./Migrations.sol");
var StoryDao = artifacts.require("./StoryDao.sol");
var TNSToken = artifacts.require("./TNSToken.sol");
var storyInstance, tokenInstance;
module.exports = function (deployer, network, accounts) {
deployer.then(function () {
return TNSToken.deployed();
}).then(function (tIns) {
tokenInstance = tIns;
return StoryDao.deployed();
}).then(function (sIns) {
storyInstance = sIns;
return balance = tokenInstance.totalSupply();
}).then(function (bal) {
return tokenInstance.transfer(storyInstance.address, bal);
})
.then(function (something) {
return tokenInstance.transferOwnership(storyInstance.address);
});
}</code>埋め込みJavaScriptを備えた基本的なHTML構造は、ブロックチェーンの相互作用を処理します：
truffle migrate --reset
javaScript interaction（app.js and main.js）：
JavaScriptコードは、メタマスクがインストールされていると仮定して、ブロックチェーンと対話するためにWeb3.jsをレバレッジします。 アカウント情報、イベントリスニング、およびトランザクションの提出を処理します。 （簡潔にするために詳細なJavaScriptコードは省略されていますが、重要な概念を以下に説明します）。
<code class="language-html"><!DOCTYPE html>
<title>The Neverending Story</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The Neverending Story is an community curated and moderated Ethereum dapp-story">
<link rel="stylesheet" href="assets/css/main.css">
<div class="grid-container">
<!-- ... (HTML structure for the DApp UI) ... -->
</div>
</code>アカウント情報：
DAPPは、メタマスクログインステータスに基づいてアカウント情報を動的に表示します。 ユーザーのアバターは、Blockiesライブラリを使用して生成されます。 コードは、トークンのバランス、提出カウント、およびホワイトリスト/ブラックリストのステータスを取得して表示します。非同期呼び出しは、ブロックチェーンの相互作用を処理するために使用されます イベントリスニング：
Whitelisted
UIには、ストーリーに新しいエントリを送信するためのフォームが含まれています。 JavaScriptコードは送信を処理し、テキストを16進形式に変換してから、ブロックチェーンにトランザクションを送信します。 ガス制限は、トランザクションの実行を成功させるために設定されています
結論とさらなる開発：
このセクションは、基本的なDAPPフロントエンドの基盤を提供します。 本格的なフロントエンドフレームワーク（Vue.jsやReactなど）を統合し、UIの強化、より洗練された機能の追加など、さらなる開発が奨励されます。 このチュートリアルは、イーサリアムDAPP開発のさまざまな側面をカバーする提案された改善とFAQのリストで締めくくります。 次の部分では、ライブ環境への展開をカバーします。
以上がEthereum Dapps：DAO契約のためにWeb3 UIの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。