在Tron上构建简单的去中心化应用（DApp）
欢迎来到第三课！在本课中，我们将学习一个基本的Tron去中心化应用（DApp）的结构和功能。我们将通过实践，创建一个简单的DApp，与我们在上一课中开发的智能合约进行交互。本节结束后，您将在Nile测试网上运行您的DApp。
设计基本的Tron DApp的结构和功能
DApp是前端和后端的组合，前端使用可以进行web3.js调用的语言编写，后端基本上是智能合约。我们的DApp将采用简单直观的界面，提供两个主要功能：存储数字和从智能合约中检索数字。我们将使用超文本标记语言（HTML）来构建前端结构，并使用带有TronWeb库的JavaScript与Tron网络进行交互。
开发和部署DApp所需的智能合约
我们已经在第2课中完成了这一步！我们的智能合约“Storage”已经部署在Nile测试网上。
使用Web技术实现用户界面和前端组件
使用以下代码创建一个名为index.html的HTML文件：
HTML
htmlCopy code
<!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>
FAQ
- 我应该在哪里创建这些文件？
您应该在本地计算机上的新文件夹中创建index.html和app.js这两个文件。具体请参考以下步骤：
第一步：在电脑上创建一个新文件夹并自行命名。例如，我们将其命名为TronDApp。
第二步：在TronDApp文件夹中，创建一个新文件并命名为index.html。这将是我们编写网页结构的HTML文件。
第三步：在TronDApp文件夹中，继续创建一个新文件并命名为app.js。这将是我们编写与Tron区块链进行交互的代码的JavaScript文件。
第四步：在任意文本编辑器（如Notepad、Sublime Text、Visual Studio Code等）中打开上述文件，并将第3.3课中提供的相应代码粘贴进去。
请记得用您自己的合约地址和私钥分别替换app.js文件中的"YOUR_CONTRACT_ADDRESS"和"YOUR_PRIVATE_KEY"。
第五步：要查看您的DApp，请在浏览器（如Chrome、Firefox等）中打开index.html文件。
请记住，这些文件应始终保存在同一文件夹中，因为它们是互相关联的（index.html文件通过HTML代码中的<script src="app.js"></script>行与app.js文件关联）。如果您移动了其中一个文件而不移动另一个文件，链接将断开，您的DApp将无法正常工作。
以上步骤将创建一个简单的网页，其中包含一个输入字段、两个按钮（一个用于存储数字，另一个用于检索数字）和一个用于显示检索到的数字的段落。
接下来，使用以下代码创建一个名为app.js的JavaScript文件：
JavaScript
javascriptCopy code
const contractAddress = "YOUR_CONTRACT_ADDRESS"; // replace with your contract address// setup TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// get contract instanceasync function getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// setup listeners for buttonsdocument.getElementById('storeButton').addEventListener('click', async () => {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
});
document.getElementById('retrieveButton').addEventListener('click', async () => {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
});
在此脚本中，将"YOUR_CONTRACT_ADDRESS"和'YOUR_PRIVATE_KEY'分别替换为您的合约地址和私钥。此JavaScript文件设置了TronWeb并与我们的合约相连，在单击按钮后会与合约交互。
要获取私钥，只需点击“Export Account”并选择“Private Key”，如下所示：
注意：在真实的DApp中，您绝不应该像这样暴露自己的私钥。在这里，我们只是为了方便您理解而举例说明。对于生产级别的DApp，您应该使用安全的方式签署交易，如TronLink。
Tron DApp测试与部署
您可以通过在浏览器中打开index.html文件来测试您的DApp。请务必使用安装了TronLink扩展程序并与Nile测试网连接的浏览器（如Chrome或Brave浏览器）。在输入框中输入一个数字并点击“Store”。交易确认后，点击“Retrieve”，您所存储的数字将作为输出显示出来。
以上便是第3课的所有内容！恭喜您在Tron上创建并部署了您的第一个去中心化应用！在下一课中，我们将为此DApp添加高级功能。
在Tron上构建简单的去中心化应用（DApp）
欢迎来到第三课！在本课中，我们将学习一个基本的Tron去中心化应用（DApp）的结构和功能。我们将通过实践，创建一个简单的DApp，与我们在上一课中开发的智能合约进行交互。本节结束后，您将在Nile测试网上运行您的DApp。
设计基本的Tron DApp的结构和功能
DApp是前端和后端的组合，前端使用可以进行web3.js调用的语言编写，后端基本上是智能合约。我们的DApp将采用简单直观的界面，提供两个主要功能：存储数字和从智能合约中检索数字。我们将使用超文本标记语言（HTML）来构建前端结构，并使用带有TronWeb库的JavaScript与Tron网络进行交互。
开发和部署DApp所需的智能合约
我们已经在第2课中完成了这一步！我们的智能合约“Storage”已经部署在Nile测试网上。
使用Web技术实现用户界面和前端组件
使用以下代码创建一个名为index.html的HTML文件：
HTML
htmlCopy code
<!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>
FAQ
- 我应该在哪里创建这些文件？
您应该在本地计算机上的新文件夹中创建index.html和app.js这两个文件。具体请参考以下步骤：
第一步：在电脑上创建一个新文件夹并自行命名。例如，我们将其命名为TronDApp。
第二步：在TronDApp文件夹中，创建一个新文件并命名为index.html。这将是我们编写网页结构的HTML文件。
第三步：在TronDApp文件夹中，继续创建一个新文件并命名为app.js。这将是我们编写与Tron区块链进行交互的代码的JavaScript文件。
第四步：在任意文本编辑器（如Notepad、Sublime Text、Visual Studio Code等）中打开上述文件，并将第3.3课中提供的相应代码粘贴进去。
请记得用您自己的合约地址和私钥分别替换app.js文件中的"YOUR_CONTRACT_ADDRESS"和"YOUR_PRIVATE_KEY"。
第五步：要查看您的DApp，请在浏览器（如Chrome、Firefox等）中打开index.html文件。
请记住，这些文件应始终保存在同一文件夹中，因为它们是互相关联的（index.html文件通过HTML代码中的<script src="app.js"></script>行与app.js文件关联）。如果您移动了其中一个文件而不移动另一个文件，链接将断开，您的DApp将无法正常工作。
以上步骤将创建一个简单的网页，其中包含一个输入字段、两个按钮（一个用于存储数字，另一个用于检索数字）和一个用于显示检索到的数字的段落。
接下来，使用以下代码创建一个名为app.js的JavaScript文件：
JavaScript
javascriptCopy code
const contractAddress = "YOUR_CONTRACT_ADDRESS"; // replace with your contract address// setup TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// get contract instanceasync function getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// setup listeners for buttonsdocument.getElementById('storeButton').addEventListener('click', async () => {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
});
document.getElementById('retrieveButton').addEventListener('click', async () => {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
});
在此脚本中，将"YOUR_CONTRACT_ADDRESS"和'YOUR_PRIVATE_KEY'分别替换为您的合约地址和私钥。此JavaScript文件设置了TronWeb并与我们的合约相连，在单击按钮后会与合约交互。
要获取私钥，只需点击“Export Account”并选择“Private Key”，如下所示：
注意：在真实的DApp中，您绝不应该像这样暴露自己的私钥。在这里，我们只是为了方便您理解而举例说明。对于生产级别的DApp，您应该使用安全的方式签署交易，如TronLink。
Tron DApp测试与部署
您可以通过在浏览器中打开index.html文件来测试您的DApp。请务必使用安装了TronLink扩展程序并与Nile测试网连接的浏览器（如Chrome或Brave浏览器）。在输入框中输入一个数字并点击“Store”。交易确认后，点击“Retrieve”，您所存储的数字将作为输出显示出来。
以上便是第3课的所有内容！恭喜您在Tron上创建并部署了您的第一个去中心化应用！在下一课中，我们将为此DApp添加高级功能。