Lição 3

在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添加高級功能。

Exclusão de responsabilidade

* O investimento em criptomoedas envolve riscos significativos. Prossiga com cuidado. O curso não pretende ser um conselho de investimento.

* O curso é criado pelo autor que se juntou ao Gate Learn. Qualquer opinião partilhada pelo autor não representa o Gate Learn.

Catálogo

Lição 1:Tron區塊鏈介紹

45 inscrito(s)

Lição 2:Solidity智能合約基礎

36 inscrito(s)

Lição 3:在Tron上構建簡單的去中心化應用（DApp）

30 inscrito(s)

Lição 4:Tron DApp開髮的最後一環

23 inscrito(s)