Creación de una aplicación descentralizada simple (DApp) en Tron
¡Bienvenidos a la Lección 3! En esta lección, aprenderemos sobre la estructura y funcionalidad de una aplicación descentralizada (DApp) de Tron básica. Adoptaremos un enfoque práctico creando una DApp simple que interactúe con el contrato inteligente que desarrollamos en la lección anterior. Al final de esta lección, tendrá su DApp ejecutándose en Nile Testnet.
Diseño de la estructura y funcionalidad de una DApp Tron básica
Una DApp es una combinación de una interfaz, escrita en un lenguaje que puede realizar llamadas web3.js, y un backend, que son básicamente contratos inteligentes. Nuestra DApp tendrá una interfaz sencilla con dos funcionalidades principales: almacenar un número y recuperarlo del contrato inteligente. Usaremos HTML para nuestra estructura frontend y JavaScript con la biblioteca TronWeb para interactuar con la red Tron.
Desarrollo e implementación de los contratos inteligentes necesarios para la DApp
¡Ya hemos realizado este paso en la Lección 2! Nuestro contrato inteligente, 'Almacenamiento', ya está implementado en Nile Testnet.
Implementación de interfaces de usuario y componentes front-end para la DApp utilizando tecnologías web
Comencemos a codificar nuestra DApp simple. Crear un archivo HTML (index.html) con el siguiente código:
HTML
htmlCopiar código
<!DOCTYPE html><html><body><h2>DApp de almacenamiento simple</h2><input id="storageValue" type="number"><button id="storeButton">Tienda</ botón><button id="retrieveButton">Recuperar</button><p id="displayValue"></button></p><!-- Cargar TronWeb --><script src="https://cdn.jsdelivr.net /npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>
Preguntas frecuentes
- ¿Dónde debería crear esos archivos?
Debe crear estos dos archivos (index.html y app.js) en una nueva carpeta en su máquina local. Aquí tienes una guía paso a paso:
Paso 1: crea una nueva carpeta en tu computadora. Puedes nombrarlo como quieras. Por ejemplo, podrías llamarlo TronDApp.
Paso 2: Dentro de esta carpeta TronDApp, cree un nuevo archivo y asígnele el nombre index.html. Este será el archivo HTML donde escribiremos la estructura de nuestra página web.
Paso 3: En la misma carpeta TronDApp, cree otro archivo nuevo y asígnele el nombre app.js. Este será el archivo JavaScript donde escribiremos el código para interactuar con la cadena de bloques de Tron.
Paso 4: Ahora abra estos archivos en un editor de texto de su elección (por ejemplo, Bloc de notas, Sublime Text, Visual Studio Code, etc.) y pegue el código respectivo que proporcioné en la Lección 3.3.
Recuerde reemplazar "YOUR_CONTRACT_ADDRESS" y 'YOUR_PRIVATE_KEY' en el archivo app.js con la dirección de su propio contrato y su clave privada.
Paso 5: Para ver su DApp, abra el archivo index.html en un navegador web (como Google Chrome, Firefox, etc.).
Recuerde que estos archivos siempre deben mantenerse en la misma carpeta porque están vinculados (el archivo index.html está vinculado al archivo app.js a través del <script src="app.js"></script> línea en el código HTML). Si mueve un archivo sin el otro, el enlace se romperá y su DApp no funcionará correctamente.
Esto crea una página web simple con un campo de entrada, dos botones (uno para almacenar un número y el otro para recuperarlo) y un párrafo para mostrar el número recuperado.
Luego, cree un archivo JavaScript (app.js) con el siguiente código:
JavaScript
javascriptCopiar código
const contractAddress = "YOUR_CONTRACT_ADDRESS"; // reemplazar con su dirección de contrato// configurar TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// obtener la función de instancia de sincronización del contrato getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// configurar oyentes para botonesdocument.getElementById('storeButton').addEventListener( 'hacer clic', asíncrono () => {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
});
document.getElementById('retrieveButton').addEventListener('hacer clic', asíncrono () => {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
});
En este script, reemplace "YOUR_CONTRACT_ADDRESS" y 'YOUR_PRIVATE_KEY' con la dirección de su contrato y su clave privada. Este archivo JavaScript configura TronWeb, se conecta a nuestro contrato e interactúa con el contrato cuando se hace clic en los botones.
Para obtener la clave privada simplemente exporte su billetera haciendo clic en Exportar cuenta y haga clic en Clave privada de la siguiente manera:
Nota: En una DApp del mundo real, nunca debes exponer tu clave privada de esta manera. Lo hacemos aquí por simplicidad. Para una DApp de producción, debes utilizar una forma segura de firmar transacciones, como TronLink.
Prueba e implementación de Tron DApp en Nile Testnet
Puede probar su DApp abriendo el archivo index.html en su navegador. Recuerde utilizar un navegador en el que haya instalado la extensión TronLink y la haya conectado a Nile Testnet (como Chrome o Brave Browser). Ingrese un número en el campo de entrada y haga clic en "Tienda". Una vez confirmada la transacción, haga clic en "Recuperar" y se mostrará el número que almacenó.
¡Esto completa la Lección 3! ¡Felicitaciones por crear e implementar su primera aplicación descentralizada en Tron! En la próxima lección, mejoraremos nuestra DApp con funciones más avanzadas.
Creación de una aplicación descentralizada simple (DApp) en Tron
¡Bienvenidos a la Lección 3! En esta lección, aprenderemos sobre la estructura y funcionalidad de una aplicación descentralizada (DApp) de Tron básica. Adoptaremos un enfoque práctico creando una DApp simple que interactúe con el contrato inteligente que desarrollamos en la lección anterior. Al final de esta lección, tendrá su DApp ejecutándose en Nile Testnet.
Diseño de la estructura y funcionalidad de una DApp Tron básica
Una DApp es una combinación de una interfaz, escrita en un lenguaje que puede realizar llamadas web3.js, y un backend, que son básicamente contratos inteligentes. Nuestra DApp tendrá una interfaz sencilla con dos funcionalidades principales: almacenar un número y recuperarlo del contrato inteligente. Usaremos HTML para nuestra estructura frontend y JavaScript con la biblioteca TronWeb para interactuar con la red Tron.
Desarrollo e implementación de los contratos inteligentes necesarios para la DApp
¡Ya hemos realizado este paso en la Lección 2! Nuestro contrato inteligente, 'Almacenamiento', ya está implementado en Nile Testnet.
Implementación de interfaces de usuario y componentes front-end para la DApp utilizando tecnologías web
Comencemos a codificar nuestra DApp simple. Crear un archivo HTML (index.html) con el siguiente código:
HTML
htmlCopiar código
<!DOCTYPE html><html><body><h2>DApp de almacenamiento simple</h2><input id="storageValue" type="number"><button id="storeButton">Tienda</ botón><button id="retrieveButton">Recuperar</button><p id="displayValue"></button></p><!-- Cargar TronWeb --><script src="https://cdn.jsdelivr.net /npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>
Preguntas frecuentes
- ¿Dónde debería crear esos archivos?
Debe crear estos dos archivos (index.html y app.js) en una nueva carpeta en su máquina local. Aquí tienes una guía paso a paso:
Paso 1: crea una nueva carpeta en tu computadora. Puedes nombrarlo como quieras. Por ejemplo, podrías llamarlo TronDApp.
Paso 2: Dentro de esta carpeta TronDApp, cree un nuevo archivo y asígnele el nombre index.html. Este será el archivo HTML donde escribiremos la estructura de nuestra página web.
Paso 3: En la misma carpeta TronDApp, cree otro archivo nuevo y asígnele el nombre app.js. Este será el archivo JavaScript donde escribiremos el código para interactuar con la cadena de bloques de Tron.
Paso 4: Ahora abra estos archivos en un editor de texto de su elección (por ejemplo, Bloc de notas, Sublime Text, Visual Studio Code, etc.) y pegue el código respectivo que proporcioné en la Lección 3.3.
Recuerde reemplazar "YOUR_CONTRACT_ADDRESS" y 'YOUR_PRIVATE_KEY' en el archivo app.js con la dirección de su propio contrato y su clave privada.
Paso 5: Para ver su DApp, abra el archivo index.html en un navegador web (como Google Chrome, Firefox, etc.).
Recuerde que estos archivos siempre deben mantenerse en la misma carpeta porque están vinculados (el archivo index.html está vinculado al archivo app.js a través del <script src="app.js"></script> línea en el código HTML). Si mueve un archivo sin el otro, el enlace se romperá y su DApp no funcionará correctamente.
Esto crea una página web simple con un campo de entrada, dos botones (uno para almacenar un número y el otro para recuperarlo) y un párrafo para mostrar el número recuperado.
Luego, cree un archivo JavaScript (app.js) con el siguiente código:
JavaScript
javascriptCopiar código
const contractAddress = "YOUR_CONTRACT_ADDRESS"; // reemplazar con su dirección de contrato// configurar TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// obtener la función de instancia de sincronización del contrato getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// configurar oyentes para botonesdocument.getElementById('storeButton').addEventListener( 'hacer clic', asíncrono () => {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
});
document.getElementById('retrieveButton').addEventListener('hacer clic', asíncrono () => {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
});
En este script, reemplace "YOUR_CONTRACT_ADDRESS" y 'YOUR_PRIVATE_KEY' con la dirección de su contrato y su clave privada. Este archivo JavaScript configura TronWeb, se conecta a nuestro contrato e interactúa con el contrato cuando se hace clic en los botones.
Para obtener la clave privada simplemente exporte su billetera haciendo clic en Exportar cuenta y haga clic en Clave privada de la siguiente manera:
Nota: En una DApp del mundo real, nunca debes exponer tu clave privada de esta manera. Lo hacemos aquí por simplicidad. Para una DApp de producción, debes utilizar una forma segura de firmar transacciones, como TronLink.
Prueba e implementación de Tron DApp en Nile Testnet
Puede probar su DApp abriendo el archivo index.html en su navegador. Recuerde utilizar un navegador en el que haya instalado la extensión TronLink y la haya conectado a Nile Testnet (como Chrome o Brave Browser). Ingrese un número en el campo de entrada y haga clic en "Tienda". Una vez confirmada la transacción, haga clic en "Recuperar" y se mostrará el número que almacenó.
¡Esto completa la Lección 3! ¡Felicitaciones por crear e implementar su primera aplicación descentralizada en Tron! En la próxima lección, mejoraremos nuestra DApp con funciones más avanzadas.