Tron上でのシンプルな分散型アプリケーション(DApp)の構築
レッスン 3 へようこそ!このレッスンでは、基本的なTron分散型アプリケーション(DApp)の構造と機能について学びます。 ここでは、前のレッスンで開発したスマートコントラクトと相互作用するシンプルなDAppを作成することで、実践的なアプローチを取ります。 このレッスンを終えると、DAppがNileテストネット上で動作するようになります。
基本的なTron DAppの構造と機能の設計
DAppは、web3.js呼び出しを行うことができる言語で記述されたフロントエンドと、基本的にスマートコントラクトであるバックエンドの組み合わせです。 私たちのDAppは、数値の保存とスマートコントラクトからの取得という2つの主要な機能を備えたシンプルなインターフェースを備えています。 フロントエンド構造にはHTMLを使用し、Tronネットワークとの対話にはTronWebライブラリを備えたJavaScriptを使用します。
DAppに必要なスマートコントラクトの開発と展開
このステップはレッスン 2 で既に完了しています。私たちのスマートコントラクト「Storage」は、すでにNileテストネットにデプロイされています。
Web技術を用いたDAppのユーザーインターフェースとフロントエンドコンポーネントの実装
簡単なDAppのコーディングを始めましょう。 HTML ファイルを作成する ()index.htmlを次のコードで置き換えます。
HTMLの
htmlCopy コード
<!DOCTYPE html><html><body><h2>Simple Storage DApp</h2><input id="storageValue" type="number"><button id="storeButton">Store</button><button id="retrieveButton">Retrieve</button><p id="displayValue"></p><!-- Load TronWeb --><script src="https://cdn.jsdelivr.net/npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>
よくある質問
- これらのファイルはどこに作成すればよいですか?
これら 2 つのファイル (index.html と app.js) は、ローカル コンピューターの新しいフォルダーに作成する必要があります。 ステップバイステップガイドは次のとおりです。
ステップ1:コンピューターに新しいフォルダーを作成します。 好きな名前を付けることができます。 たとえば、TronDAppという名前を付けることができます。ステップ2:このTronDAppフォルダ内に新しいファイルを作成し、index.htmlという名前を付けます。 これは、Webページの構造を記述するHTMLファイルになります。ステップ3:同じTronDAppフォルダに、別の新しいファイルを作成し、app.jsという名前を付けます。 これは、Tronブロックチェーンと対話するためのコードを記述するJavaScriptファイルになります。ステップ4:次に、選択したテキストエディタ(メモ帳、崇高なテキスト、Visual Studio Codeなど)でこれらのファイルを開き、レッスン3.3で提供したそれぞれのコードを貼り付けます。app.js ファイルの "YOUR_CONTRACT_ADDRESS" と "YOUR_PRIVATE_KEY" を、自分の契約のアドレスと秘密鍵に置き換えてください。ステップ5:DAppを表示するには、Webブラウザ(Google Chrome、Firefoxなど)でindex.htmlファイルを開きます。これらのファイルは、<script src="app.js"></script を介して app.js ファイルにリンクされている (index.html ファイルはリンクされているため、常に同じフォルダーに保持する必要があることに注意してください></script>行に記述します)。 一方のファイルをもう一方のファイルと一緒に移動すると、リンクが壊れ、DAppが正しく機能しなくなります。
これにより、入力フィールド、2 つのボタン (1 つは数値を格納し、もう 1 つは数値を取得するボタン)、および取得した数値を表示する段落を含む単純な Web ページが作成されます。
次に、次のコードを含む JavaScript ファイル ()app.js を作成します。
JavaScriptについて
javascriptコードをコピー
const contractAddress = "YOUR_CONTRACT_ADDRESS";契約アドレスに置き換えてください// セットアップ TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
get contract instanceasync 関数 getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
buttonsdocument.getElementById('storeButton').addEventListener('click', 非同期()= > {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
});
document.getElementById('retrieveButton').addEventListener('click', 非同期()= > {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
});
このスクリプトでは、 "YOUR_CONTRACT_ADDRESS" と をコントラクトのアドレスと 'YOUR_PRIVATE_KEY' 秘密鍵に置き換えます。 この JavaScript ファイルは、TronWeb を設定し、コントラクトに接続し、ボタンがクリックされたときにコントラクトと対話します。
秘密鍵を取得するには、アカウントのエクスポートをクリックしてウォレットをエクスポートし、次のように秘密鍵をクリックします。
注:実際のDAppでは、このような秘密鍵を公開してはいけません。 ここでは、簡単にするためにそれを行っています。 本番DAppの場合、TronLinkなどの安全なトランザクション署名方法を使用する必要があります。
Tron DAppのテストとNileテストネットへの展開
DAppをテストするには、 index.html ブラウザでファイルを開きます。 TronLink拡張機能をインストールし、Nileテストネットに接続したブラウザ(ChromeやBrave Browserなど)を使用することを忘れないでください。 入力欄に数字を入力し、「ストア」をクリックします。 トランザクションが確認されたら、「取得」をクリックすると、保存した番号が表示されます。
これでレッスン3は終了です。Tronで最初の分散型アプリケーションを作成してデプロイしたおめでとうございます! 次のレッスンでは、DAppをより高度な機能で強化します。
Tron上でのシンプルな分散型アプリケーション(DApp)の構築
レッスン 3 へようこそ!このレッスンでは、基本的なTron分散型アプリケーション(DApp)の構造と機能について学びます。 ここでは、前のレッスンで開発したスマートコントラクトと相互作用するシンプルなDAppを作成することで、実践的なアプローチを取ります。 このレッスンを終えると、DAppがNileテストネット上で動作するようになります。
基本的なTron DAppの構造と機能の設計
DAppは、web3.js呼び出しを行うことができる言語で記述されたフロントエンドと、基本的にスマートコントラクトであるバックエンドの組み合わせです。 私たちのDAppは、数値の保存とスマートコントラクトからの取得という2つの主要な機能を備えたシンプルなインターフェースを備えています。 フロントエンド構造にはHTMLを使用し、Tronネットワークとの対話にはTronWebライブラリを備えたJavaScriptを使用します。
DAppに必要なスマートコントラクトの開発と展開
このステップはレッスン 2 で既に完了しています。私たちのスマートコントラクト「Storage」は、すでにNileテストネットにデプロイされています。
Web技術を用いたDAppのユーザーインターフェースとフロントエンドコンポーネントの実装
簡単なDAppのコーディングを始めましょう。 HTML ファイルを作成する ()index.htmlを次のコードで置き換えます。
HTMLの
htmlCopy コード
<!DOCTYPE html><html><body><h2>Simple Storage DApp</h2><input id="storageValue" type="number"><button id="storeButton">Store</button><button id="retrieveButton">Retrieve</button><p id="displayValue"></p><!-- Load TronWeb --><script src="https://cdn.jsdelivr.net/npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>
よくある質問
- これらのファイルはどこに作成すればよいですか?
これら 2 つのファイル (index.html と app.js) は、ローカル コンピューターの新しいフォルダーに作成する必要があります。 ステップバイステップガイドは次のとおりです。
ステップ1:コンピューターに新しいフォルダーを作成します。 好きな名前を付けることができます。 たとえば、TronDAppという名前を付けることができます。ステップ2:このTronDAppフォルダ内に新しいファイルを作成し、index.htmlという名前を付けます。 これは、Webページの構造を記述するHTMLファイルになります。ステップ3:同じTronDAppフォルダに、別の新しいファイルを作成し、app.jsという名前を付けます。 これは、Tronブロックチェーンと対話するためのコードを記述するJavaScriptファイルになります。ステップ4:次に、選択したテキストエディタ(メモ帳、崇高なテキスト、Visual Studio Codeなど)でこれらのファイルを開き、レッスン3.3で提供したそれぞれのコードを貼り付けます。app.js ファイルの "YOUR_CONTRACT_ADDRESS" と "YOUR_PRIVATE_KEY" を、自分の契約のアドレスと秘密鍵に置き換えてください。ステップ5:DAppを表示するには、Webブラウザ(Google Chrome、Firefoxなど)でindex.htmlファイルを開きます。これらのファイルは、<script src="app.js"></script を介して app.js ファイルにリンクされている (index.html ファイルはリンクされているため、常に同じフォルダーに保持する必要があることに注意してください></script>行に記述します)。 一方のファイルをもう一方のファイルと一緒に移動すると、リンクが壊れ、DAppが正しく機能しなくなります。
これにより、入力フィールド、2 つのボタン (1 つは数値を格納し、もう 1 つは数値を取得するボタン)、および取得した数値を表示する段落を含む単純な Web ページが作成されます。
次に、次のコードを含む JavaScript ファイル ()app.js を作成します。
JavaScriptについて
javascriptコードをコピー
const contractAddress = "YOUR_CONTRACT_ADDRESS";契約アドレスに置き換えてください// セットアップ TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
get contract instanceasync 関数 getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
buttonsdocument.getElementById('storeButton').addEventListener('click', 非同期()= > {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
});
document.getElementById('retrieveButton').addEventListener('click', 非同期()= > {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
});
このスクリプトでは、 "YOUR_CONTRACT_ADDRESS" と をコントラクトのアドレスと 'YOUR_PRIVATE_KEY' 秘密鍵に置き換えます。 この JavaScript ファイルは、TronWeb を設定し、コントラクトに接続し、ボタンがクリックされたときにコントラクトと対話します。
秘密鍵を取得するには、アカウントのエクスポートをクリックしてウォレットをエクスポートし、次のように秘密鍵をクリックします。
注:実際のDAppでは、このような秘密鍵を公開してはいけません。 ここでは、簡単にするためにそれを行っています。 本番DAppの場合、TronLinkなどの安全なトランザクション署名方法を使用する必要があります。
Tron DAppのテストとNileテストネットへの展開
DAppをテストするには、 index.html ブラウザでファイルを開きます。 TronLink拡張機能をインストールし、Nileテストネットに接続したブラウザ(ChromeやBrave Browserなど)を使用することを忘れないでください。 入力欄に数字を入力し、「ストア」をクリックします。 トランザクションが確認されたら、「取得」をクリックすると、保存した番号が表示されます。
これでレッスン3は終了です。Tronで最初の分散型アプリケーションを作成してデプロイしたおめでとうございます! 次のレッスンでは、DAppをより高度な機能で強化します。