Построение простого децентрализованного приложения (DApp) на Tron
Добро пожаловать в Урок 3! В этом уроке мы познакомимся со структурой и функциональностью базового децентрализованного приложения Tron (DApp). Мы воспользуемся практическим подходом, создав простой DApp, который взаимодействует со смарт-контрактом, разработанным нами в предыдущем уроке. К концу этого урока у Вас будет свой DApp, работающий в Nile Testnet.
Проектирование структуры и функциональности базового Tron DApp
DApp - это комбинация фронтенда, написанного на языке, который может выполнять вызовы web3.js, и бэкенда, который в основном представляет собой смарт-контракты. Наш DApp будет иметь простой интерфейс с двумя основными функциями: хранение числа и его извлечение из смарт-контракта. Мы будем использовать HTML для структуры фронтенда и JavaScript с библиотекой TronWeb для взаимодействия с сетью Tron.
Разработка и развертывание необходимых смарт-контрактов для DApp
Мы уже выполнили этот шаг в Уроке 2! Наш смарт-контракт, 'Storage', уже развернут на Nile Testnet.
Реализация пользовательских интерфейсов и Front-end компонентов для DApp с использованием веб-технологий
Давайте начнем кодировать наш простой DApp. Создайте HTML-файл(index.html) со следующим кодом:
HTML
htmlКопирование кода
< ! <><html><body><h2>Simple Storage DApp</h2>< input id="storageValue" type="number"> < button id="storeButton"> Store</button>< button id="retrieveButton"> Retrieve</button></p><!-- < p id="displayValue"> xm Загрузить 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
javascriptКопировать код
const contractAddress = "YOUR_CONTRACT_ADDRESS"; // замените на адрес Вашего контракта// setup TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// получаем экземпляр контрактаasync function getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// настраиваем слушателей для кнопокdocument.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, подключается к нашему контракту и взаимодействует с контрактом при нажатии кнопок.
Чтобы получить Закрытый ключ, просто экспортируйте свой кошелек, нажав на Экспорт счета и щелкнув на Закрытый ключ, как показано ниже:
Примечание: В реальном DApp Вы никогда не должны раскрывать свой закрытый ключ подобным образом. Мы делаем это здесь для простоты. Для производственного DApp Вам следует использовать безопасный способ подписания транзакций, например, TronLink.
Тестирование и развертывание Tron DApp в Nile Testnet
Вы можете протестировать свой DApp, открыв файл index.html в браузере. Не забудьте использовать браузер, в котором Вы установили расширение TronLink и подключили его к Nile Testnet (например, Chrome или Brave Browser). Введите число в поле ввода и нажмите 'Store'. После подтверждения транзакции нажмите 'Retrieve', и на экране должен появиться сохраненный Вами номер.
На этом Урок 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.
Реализация пользовательских интерфейсов и Front-end компонентов для DApp с использованием веб-технологий
Давайте начнем кодировать наш простой DApp. Создайте HTML-файл(index.html) со следующим кодом:
HTML
htmlКопирование кода
< ! <><html><body><h2>Simple Storage DApp</h2>< input id="storageValue" type="number"> < button id="storeButton"> Store</button>< button id="retrieveButton"> Retrieve</button></p><!-- < p id="displayValue"> xm Загрузить 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
javascriptКопировать код
const contractAddress = "YOUR_CONTRACT_ADDRESS"; // замените на адрес Вашего контракта// setup TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// получаем экземпляр контрактаasync function getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// настраиваем слушателей для кнопокdocument.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, подключается к нашему контракту и взаимодействует с контрактом при нажатии кнопок.
Чтобы получить Закрытый ключ, просто экспортируйте свой кошелек, нажав на Экспорт счета и щелкнув на Закрытый ключ, как показано ниже:
Примечание: В реальном DApp Вы никогда не должны раскрывать свой закрытый ключ подобным образом. Мы делаем это здесь для простоты. Для производственного DApp Вам следует использовать безопасный способ подписания транзакций, например, TronLink.
Тестирование и развертывание Tron DApp в Nile Testnet
Вы можете протестировать свой DApp, открыв файл index.html в браузере. Не забудьте использовать браузер, в котором Вы установили расширение TronLink и подключили его к Nile Testnet (например, Chrome или Brave Browser). Введите число в поле ввода и нажмите 'Store'. После подтверждения транзакции нажмите 'Retrieve', и на экране должен появиться сохраненный Вами номер.
На этом Урок 3 завершен! Поздравляем Вас с созданием и развертыванием Вашего первого децентрализованного приложения на Tron! В следующем уроке мы усовершенствуем наш DApp более продвинутыми функциями.