Xây dựng một ứng dụng phi tập trung đơn giản (DApp) trên Tron
Chào mừng đến với Bài học 3! Trong bài học này, chúng ta sẽ tìm hiểu về cấu trúc và chức năng của Ứng dụng phi tập trung Tron (DApp) cơ bản. Chúng ta sẽ thực hiện một cách tiếp cận thực tế bằng cách tạo một DApp đơn giản tương tác với hợp đồng thông minh mà chúng ta đã phát triển trong bài học trước. Đến cuối bài học này, bạn sẽ chạy DApp của mình trên Nile Testnet.
Thiết kế cấu trúc và chức năng của Tron DApp cơ bản
DApp là sự kết hợp giữa giao diện người dùng, được viết bằng ngôn ngữ có thể thực hiện lệnh gọi web3.js và phần phụ trợ, về cơ bản là hợp đồng thông minh. DApp của chúng tôi sẽ có giao diện đơn giản với hai chức năng chính: lưu trữ một số và truy xuất nó từ hợp đồng thông minh. Chúng tôi sẽ sử dụng HTML cho cấu trúc giao diện người dùng và JavaScript với thư viện TronWeb để tương tác với mạng Tron.
Phát triển và triển khai các hợp đồng thông minh cần thiết cho DApp
Chúng ta đã thực hiện bước này ở Bài 2 rồi! Hợp đồng thông minh của chúng tôi, 'Storage', đã được triển khai trên Nile Testnet.
Triển khai Giao diện người dùng và Thành phần giao diện người dùng cho DApp bằng công nghệ web
Hãy bắt đầu mã hóa DApp đơn giản của chúng tôi. Tạo một tệp HTML (index.html) với đoạn mã sau:
HTML
htmlSao chép mã
<!DOCTYPE html><html><body><h2>DApp lưu trữ đơn giản</h2><input id="storageValue" type="number"><button id="storeButton">Store</ nút><button id="retrieveButton">Truy xuất</button><p id="displayValue"></button></p><!-- Tải TronWeb --><script src="https://cdn.jsdelivr.net /npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>
Vấn đề thường gặp
- Tôi nên tạo những tập tin đó ở đâu?
Bạn nên tạo hai tệp này (index.html và app.js) trong một thư mục mới trên máy cục bộ của mình. Đây là hướng dẫn từng bước:
Bước 1: Tạo một thư mục mới trên máy tính của bạn. Bạn có thể đặt tên cho nó bất cứ điều gì bạn thích. Ví dụ: bạn có thể đặt tên nó là TronDApp.
Bước 2: Trong thư mục TronDApp này, tạo một tệp mới và đặt tên là index.html. Đây sẽ là tệp HTML nơi chúng tôi sẽ viết cấu trúc trang web của mình.
Bước 3: Trong cùng thư mục TronDApp, tạo một tệp mới khác và đặt tên là app.js. Đây sẽ là tệp JavaScript nơi chúng ta sẽ viết mã để tương tác với chuỗi khối Tron.
Bước 4: Bây giờ hãy mở các tệp này trong trình soạn thảo văn bản bạn chọn (ví dụ: Notepad, Sublime Text, Visual Studio Code, v.v.) và dán mã tương ứng mà tôi đã cung cấp trong Bài học 3.3.
Hãy nhớ thay thế "YOUR_CONTRACT_ADDRESS" và 'YOUR_PRIVATE_KEY' trong tệp app.js bằng địa chỉ hợp đồng và khóa riêng của bạn.
Bước 5: Để xem DApp của bạn, hãy mở tệp index.html trong trình duyệt web (chẳng hạn như Google Chrome, Firefox, v.v.).
Hãy nhớ rằng các tệp này phải luôn được giữ trong cùng một thư mục vì chúng được liên kết với nhau (tệp index.html được liên kết với tệp app.js thông qua <script src="app.js"></script> dòng trong mã HTML). Nếu bạn di chuyển một tệp mà không có tệp kia, liên kết sẽ bị hỏng và DApp của bạn sẽ không hoạt động bình thường.
Thao tác này sẽ tạo một trang web đơn giản với một trường nhập, hai nút (một để lưu số và nút còn lại để truy xuất số đó) và một đoạn để hiển thị số được truy xuất.
Sau đó, tạo một tệp JavaScript (app.js) với đoạn mã sau:
JavaScript
javascriptSao chép mã
const ContractAddress = "YOUR_CONTRACT_ADDRESS"; // thay thế bằng địa chỉ hợp đồng của bạn// setup TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// lấy instanceasync function getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// thiết lập trình nghe cho nútdocument.getElementById('storeButton').addEventListener( 'nhấp chuột', không đồng bộ () => {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
});
tài liệu.getElementById('retrieveButton').addEventListener('click', không đồng bộ () => {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
});
Trong tập lệnh này, hãy thay thế "YOUR_CONTRACT_ADDRESS" và 'YOUR_PRIVATE_KEY' bằng địa chỉ hợp đồng và khóa riêng của bạn. Tệp JavaScript này thiết lập TronWeb, kết nối với hợp đồng của chúng tôi và tương tác với hợp đồng khi các nút được nhấp vào.
Để lấy Khóa riêng, chỉ cần xuất ví của bạn bằng cách nhấp vào Xuất tài khoản và nhấp vào Khóa riêng như sau:
Lưu ý: Trong DApp trong thế giới thực, bạn không bao giờ nên để lộ khóa riêng của mình như thế này. Chúng tôi đang làm điều đó ở đây vì mục đích đơn giản. Đối với DApp sản xuất, bạn nên sử dụng cách ký giao dịch an toàn, chẳng hạn như TronLink.
Thử nghiệm và triển khai Tron DApp trên Nile Testnet
Bạn có thể kiểm tra DApp của mình bằng cách mở tệp index.html trong trình duyệt của mình. Hãy nhớ sử dụng trình duyệt mà bạn đã cài đặt tiện ích mở rộng TronLink và kết nối nó với Nile Testnet (Giống như Chrome hoặc Brave Browser). Nhập một số vào trường đầu vào và nhấp vào 'Cửa hàng'. Sau khi giao dịch được xác nhận, hãy nhấp vào 'Truy xuất' và số bạn đã lưu sẽ được hiển thị.
Điều này hoàn thành Bài học 3! Chúc mừng bạn đã tạo và triển khai Ứng dụng phi tập trung đầu tiên của mình trên Tron! Trong bài học tiếp theo, chúng tôi sẽ cải tiến DApp của mình với các tính năng nâng cao hơn.
Xây dựng một ứng dụng phi tập trung đơn giản (DApp) trên Tron
Chào mừng đến với Bài học 3! Trong bài học này, chúng ta sẽ tìm hiểu về cấu trúc và chức năng của Ứng dụng phi tập trung Tron (DApp) cơ bản. Chúng ta sẽ thực hiện một cách tiếp cận thực tế bằng cách tạo một DApp đơn giản tương tác với hợp đồng thông minh mà chúng ta đã phát triển trong bài học trước. Đến cuối bài học này, bạn sẽ chạy DApp của mình trên Nile Testnet.
Thiết kế cấu trúc và chức năng của Tron DApp cơ bản
DApp là sự kết hợp giữa giao diện người dùng, được viết bằng ngôn ngữ có thể thực hiện lệnh gọi web3.js và phần phụ trợ, về cơ bản là hợp đồng thông minh. DApp của chúng tôi sẽ có giao diện đơn giản với hai chức năng chính: lưu trữ một số và truy xuất nó từ hợp đồng thông minh. Chúng tôi sẽ sử dụng HTML cho cấu trúc giao diện người dùng và JavaScript với thư viện TronWeb để tương tác với mạng Tron.
Phát triển và triển khai các hợp đồng thông minh cần thiết cho DApp
Chúng ta đã thực hiện bước này ở Bài 2 rồi! Hợp đồng thông minh của chúng tôi, 'Storage', đã được triển khai trên Nile Testnet.
Triển khai Giao diện người dùng và Thành phần giao diện người dùng cho DApp bằng công nghệ web
Hãy bắt đầu mã hóa DApp đơn giản của chúng tôi. Tạo một tệp HTML (index.html) với đoạn mã sau:
HTML
htmlSao chép mã
<!DOCTYPE html><html><body><h2>DApp lưu trữ đơn giản</h2><input id="storageValue" type="number"><button id="storeButton">Store</ nút><button id="retrieveButton">Truy xuất</button><p id="displayValue"></button></p><!-- Tải TronWeb --><script src="https://cdn.jsdelivr.net /npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>
Vấn đề thường gặp
- Tôi nên tạo những tập tin đó ở đâu?
Bạn nên tạo hai tệp này (index.html và app.js) trong một thư mục mới trên máy cục bộ của mình. Đây là hướng dẫn từng bước:
Bước 1: Tạo một thư mục mới trên máy tính của bạn. Bạn có thể đặt tên cho nó bất cứ điều gì bạn thích. Ví dụ: bạn có thể đặt tên nó là TronDApp.
Bước 2: Trong thư mục TronDApp này, tạo một tệp mới và đặt tên là index.html. Đây sẽ là tệp HTML nơi chúng tôi sẽ viết cấu trúc trang web của mình.
Bước 3: Trong cùng thư mục TronDApp, tạo một tệp mới khác và đặt tên là app.js. Đây sẽ là tệp JavaScript nơi chúng ta sẽ viết mã để tương tác với chuỗi khối Tron.
Bước 4: Bây giờ hãy mở các tệp này trong trình soạn thảo văn bản bạn chọn (ví dụ: Notepad, Sublime Text, Visual Studio Code, v.v.) và dán mã tương ứng mà tôi đã cung cấp trong Bài học 3.3.
Hãy nhớ thay thế "YOUR_CONTRACT_ADDRESS" và 'YOUR_PRIVATE_KEY' trong tệp app.js bằng địa chỉ hợp đồng và khóa riêng của bạn.
Bước 5: Để xem DApp của bạn, hãy mở tệp index.html trong trình duyệt web (chẳng hạn như Google Chrome, Firefox, v.v.).
Hãy nhớ rằng các tệp này phải luôn được giữ trong cùng một thư mục vì chúng được liên kết với nhau (tệp index.html được liên kết với tệp app.js thông qua <script src="app.js"></script> dòng trong mã HTML). Nếu bạn di chuyển một tệp mà không có tệp kia, liên kết sẽ bị hỏng và DApp của bạn sẽ không hoạt động bình thường.
Thao tác này sẽ tạo một trang web đơn giản với một trường nhập, hai nút (một để lưu số và nút còn lại để truy xuất số đó) và một đoạn để hiển thị số được truy xuất.
Sau đó, tạo một tệp JavaScript (app.js) với đoạn mã sau:
JavaScript
javascriptSao chép mã
const ContractAddress = "YOUR_CONTRACT_ADDRESS"; // thay thế bằng địa chỉ hợp đồng của bạn// setup TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// lấy instanceasync function getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// thiết lập trình nghe cho nútdocument.getElementById('storeButton').addEventListener( 'nhấp chuột', không đồng bộ () => {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
});
tài liệu.getElementById('retrieveButton').addEventListener('click', không đồng bộ () => {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
});
Trong tập lệnh này, hãy thay thế "YOUR_CONTRACT_ADDRESS" và 'YOUR_PRIVATE_KEY' bằng địa chỉ hợp đồng và khóa riêng của bạn. Tệp JavaScript này thiết lập TronWeb, kết nối với hợp đồng của chúng tôi và tương tác với hợp đồng khi các nút được nhấp vào.
Để lấy Khóa riêng, chỉ cần xuất ví của bạn bằng cách nhấp vào Xuất tài khoản và nhấp vào Khóa riêng như sau:
Lưu ý: Trong DApp trong thế giới thực, bạn không bao giờ nên để lộ khóa riêng của mình như thế này. Chúng tôi đang làm điều đó ở đây vì mục đích đơn giản. Đối với DApp sản xuất, bạn nên sử dụng cách ký giao dịch an toàn, chẳng hạn như TronLink.
Thử nghiệm và triển khai Tron DApp trên Nile Testnet
Bạn có thể kiểm tra DApp của mình bằng cách mở tệp index.html trong trình duyệt của mình. Hãy nhớ sử dụng trình duyệt mà bạn đã cài đặt tiện ích mở rộng TronLink và kết nối nó với Nile Testnet (Giống như Chrome hoặc Brave Browser). Nhập một số vào trường đầu vào và nhấp vào 'Cửa hàng'. Sau khi giao dịch được xác nhận, hãy nhấp vào 'Truy xuất' và số bạn đã lưu sẽ được hiển thị.
Điều này hoàn thành Bài học 3! Chúc mừng bạn đã tạo và triển khai Ứng dụng phi tập trung đầu tiên của mình trên Tron! Trong bài học tiếp theo, chúng tôi sẽ cải tiến DApp của mình với các tính năng nâng cao hơn.