Створення простої децентралізованої програми (DApp) на Tron
Ласкаво просимо до уроку 3! У цьому уроці ми дізнаємося про структуру та функціональність базової децентралізованої програми Tron (DApp). Ми застосуємо практичний підхід, створивши просту програму DApp, яка взаємодіє зі смарт-контрактом, який ми розробили на попередньому уроці. До кінця цього уроку ваш DApp буде запущений у Nile Testnet.
Розробка структури та функціональності базового Tron DApp
DApp — це комбінація інтерфейсу, написаного мовою, яка може здійснювати виклики web3.js, і бекенда, який, по суті, є смарт-контрактами. Наш DApp матиме простий інтерфейс із двома основними функціями: збереження номера та його отримання зі смарт-контракту. Ми будемо використовувати HTML для нашої зовнішньої структури та JavaScript із бібліотекою TronWeb для взаємодії з мережею Tron.
Розробка та розгортання необхідних смарт-контрактів для DApp
Ми вже зробили цей крок в Уроці 2! Наш розумний контракт «Storage» уже розгорнуто в Nile Testnet.
Впровадження інтерфейсів користувача та зовнішніх компонентів для DApp за допомогою веб-технологій
Давайте почнемо кодувати наш простий DApp. Створіть файл HTML (index.html) з таким кодом:
HTML
htmlКопіювати код
<!DOCTYPE html><html><body><h2>Simple Storage DApp</h2><input id="storageValue" type="number"><button id="storeButton">Store</button><button id="retrieveButton">Отримати</button><p id="displayValue"></p><!-- Завантажити TronWeb --><script src="https://cdn.jsdelivr.net /npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>
Часті питання
- Де мені створити ці файли?
Вам слід створити ці два файли (index.html і app.js) у новій папці на вашому локальному комп’ютері. Ось покрокова інструкція:
Крок 1: Створіть нову папку на своєму комп’ютері. Ви можете назвати його як завгодно. Наприклад, ви можете назвати його TronDApp.
Крок 2: у цій папці TronDApp створіть новий файл і назвіть його index.html. Це буде файл HTML, де ми запишемо структуру нашої веб-сторінки.
Крок 3: у тій же папці TronDApp створіть ще один новий файл і назвіть його app.js. Це буде файл JavaScript, де ми напишемо код для взаємодії з блокчейном Tron.
Крок 4: Тепер відкрийте ці файли в текстовому редакторі за вашим вибором (наприклад, Notepad, Sublime Text, Visual Studio Code тощо) і вставте відповідний код, який я надав у Уроці 3.3.
Не забудьте замінити "YOUR_CONTRACT_ADDRESS" і "YOUR_PRIVATE_KEY" у файлі app.js адресою вашого власного контракту та вашим закритим ключем.
Крок 5. Щоб переглянути свою програму DApp, відкрийте файл index.html у веб-браузері (наприклад, Google Chrome, Firefox тощо).
Пам’ятайте, що ці файли завжди слід зберігати в одній папці, оскільки вони пов’язані (файл index.html пов’язано з файлом app.js через <script src="app.js"></script> рядок у коді HTML). Якщо ви перемістите один файл без іншого, посилання розірветься, і ваш DApp не працюватиме належним чином.
Це створює просту веб-сторінку з полем введення, двома кнопками (одна для збереження числа, а інша для його отримання) і абзацом для відображення отриманого номера.
Потім створіть файл JavaScript (app.js) із таким кодом:
JavaScript
javascriptCopy код
const contractAddress = "ВАШ_КОНТРАКТ_АДРЕСА"; // замініть адресою вашого контракту// налаштування TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// отримання функції синхронізації екземпляра контракту getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// налаштування слухачів для buttonsdocument.getElementById('storeButton').addEventListener( 'клік', 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, підключається до нашого контракту та взаємодіє з контрактом, коли натискаються кнопки.
Щоб отримати приватний ключ, просто експортуйте свій гаманець, натиснувши «Експортувати обліковий запис», а потім клацніть «Приватний ключ» таким чином:
Примітка: у реальній програмі DApp ви ніколи не повинні розкривати свій закритий ключ таким чином. Ми робимо це тут для простоти. Для робочого DApp вам слід використовувати безпечний спосіб підписання транзакцій, наприклад TronLink.
Тестування та розгортання Tron DApp у Nile Testnet
Ви можете перевірити свій DApp, відкривши файл index.html у своєму браузері. Не забувайте використовувати браузер, у якому ви встановили розширення TronLink і підключили його до Nile Testnet (наприклад, Chrome або Brave Browser). Введіть число в поле введення та натисніть «Зберегти». Після підтвердження транзакції натисніть «Отримати», і має відобразитися номер, який ви зберегли.
На цьому Урок 3 завершено! Вітаємо зі створенням і розгортанням вашої першої децентралізованої програми на Tron! У наступному уроці ми розширимо наш DApp більш розширеними функціями.
Створення простої децентралізованої програми (DApp) на Tron
Ласкаво просимо до уроку 3! У цьому уроці ми дізнаємося про структуру та функціональність базової децентралізованої програми Tron (DApp). Ми застосуємо практичний підхід, створивши просту програму DApp, яка взаємодіє зі смарт-контрактом, який ми розробили на попередньому уроці. До кінця цього уроку ваш DApp буде запущений у Nile Testnet.
Розробка структури та функціональності базового Tron DApp
DApp — це комбінація інтерфейсу, написаного мовою, яка може здійснювати виклики web3.js, і бекенда, який, по суті, є смарт-контрактами. Наш DApp матиме простий інтерфейс із двома основними функціями: збереження номера та його отримання зі смарт-контракту. Ми будемо використовувати HTML для нашої зовнішньої структури та JavaScript із бібліотекою TronWeb для взаємодії з мережею Tron.
Розробка та розгортання необхідних смарт-контрактів для DApp
Ми вже зробили цей крок в Уроці 2! Наш розумний контракт «Storage» уже розгорнуто в Nile Testnet.
Впровадження інтерфейсів користувача та зовнішніх компонентів для DApp за допомогою веб-технологій
Давайте почнемо кодувати наш простий DApp. Створіть файл HTML (index.html) з таким кодом:
HTML
htmlКопіювати код
<!DOCTYPE html><html><body><h2>Simple Storage DApp</h2><input id="storageValue" type="number"><button id="storeButton">Store</button><button id="retrieveButton">Отримати</button><p id="displayValue"></p><!-- Завантажити TronWeb --><script src="https://cdn.jsdelivr.net /npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>
Часті питання
- Де мені створити ці файли?
Вам слід створити ці два файли (index.html і app.js) у новій папці на вашому локальному комп’ютері. Ось покрокова інструкція:
Крок 1: Створіть нову папку на своєму комп’ютері. Ви можете назвати його як завгодно. Наприклад, ви можете назвати його TronDApp.
Крок 2: у цій папці TronDApp створіть новий файл і назвіть його index.html. Це буде файл HTML, де ми запишемо структуру нашої веб-сторінки.
Крок 3: у тій же папці TronDApp створіть ще один новий файл і назвіть його app.js. Це буде файл JavaScript, де ми напишемо код для взаємодії з блокчейном Tron.
Крок 4: Тепер відкрийте ці файли в текстовому редакторі за вашим вибором (наприклад, Notepad, Sublime Text, Visual Studio Code тощо) і вставте відповідний код, який я надав у Уроці 3.3.
Не забудьте замінити "YOUR_CONTRACT_ADDRESS" і "YOUR_PRIVATE_KEY" у файлі app.js адресою вашого власного контракту та вашим закритим ключем.
Крок 5. Щоб переглянути свою програму DApp, відкрийте файл index.html у веб-браузері (наприклад, Google Chrome, Firefox тощо).
Пам’ятайте, що ці файли завжди слід зберігати в одній папці, оскільки вони пов’язані (файл index.html пов’язано з файлом app.js через <script src="app.js"></script> рядок у коді HTML). Якщо ви перемістите один файл без іншого, посилання розірветься, і ваш DApp не працюватиме належним чином.
Це створює просту веб-сторінку з полем введення, двома кнопками (одна для збереження числа, а інша для його отримання) і абзацом для відображення отриманого номера.
Потім створіть файл JavaScript (app.js) із таким кодом:
JavaScript
javascriptCopy код
const contractAddress = "ВАШ_КОНТРАКТ_АДРЕСА"; // замініть адресою вашого контракту// налаштування TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// отримання функції синхронізації екземпляра контракту getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// налаштування слухачів для buttonsdocument.getElementById('storeButton').addEventListener( 'клік', 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, підключається до нашого контракту та взаємодіє з контрактом, коли натискаються кнопки.
Щоб отримати приватний ключ, просто експортуйте свій гаманець, натиснувши «Експортувати обліковий запис», а потім клацніть «Приватний ключ» таким чином:
Примітка: у реальній програмі DApp ви ніколи не повинні розкривати свій закритий ключ таким чином. Ми робимо це тут для простоти. Для робочого DApp вам слід використовувати безпечний спосіб підписання транзакцій, наприклад TronLink.
Тестування та розгортання Tron DApp у Nile Testnet
Ви можете перевірити свій DApp, відкривши файл index.html у своєму браузері. Не забувайте використовувати браузер, у якому ви встановили розширення TronLink і підключили його до Nile Testnet (наприклад, Chrome або Brave Browser). Введіть число в поле введення та натисніть «Зберегти». Після підтвердження транзакції натисніть «Отримати», і має відобразитися номер, який ви зберегли.
На цьому Урок 3 завершено! Вітаємо зі створенням і розгортанням вашої першої децентралізованої програми на Tron! У наступному уроці ми розширимо наш DApp більш розширеними функціями.