Construindo um aplicativo descentralizado simples (DApp) no Tron
Bem-vindo à Lição 3! Nesta lição, aprenderemos sobre a estrutura e funcionalidade de um aplicativo descentralizado Tron (DApp) básico. Adotaremos uma abordagem prática criando um DApp simples que interage com o contrato inteligente que desenvolvemos na lição anterior. Ao final desta lição, você terá seu DApp em execução no Nile Testnet.
Projetando a estrutura e funcionalidade de um Tron DApp básico
Um DApp é uma combinação de um frontend, escrito em uma linguagem que pode fazer chamadas web3.js, e um backend, que são basicamente os contratos inteligentes. Nosso DApp terá uma interface simples com duas funcionalidades principais: armazenar um número e recuperá-lo do contrato inteligente. Estaremos usando HTML para nossa estrutura de frontend e JavaScript com biblioteca TronWeb para interagir com a rede Tron.
Desenvolvendo e implantando os contratos inteligentes necessários para o DApp
Já fizemos essa etapa na Lição 2! Nosso contrato inteligente, 'Armazenamento', já está implantado na Nile Testnet.
Implementando interfaces de usuário e componentes front-end para o DApp usando tecnologias web
Vamos começar a codificar nosso DApp simples. Crie um arquivo HTML (index.html) com o seguinte código:
HTML
htmlCopiar código
<!DOCTYPE html><html><body><h2>DApp de armazenamento simples</h2><input id="storageValue" type="number"><button id="storeButton">Loja</ botão><button id="retrieveButton">Recuperar</button><p id="displayValue"></button></p><!-- Carregar TronWeb --><script src="https://cdn.jsdelivr.net /npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>
Perguntas Frequentes
- Onde devo criar esses arquivos?
Você deve criar esses dois arquivos (index.html e app.js) em uma nova pasta na sua máquina local. Aqui está um guia passo a passo:
Passo 1: Crie uma nova pasta no seu computador. Você pode nomeá-lo como quiser. Por exemplo, você pode chamá-lo de TronDApp.
Passo 2: Dentro desta pasta TronDApp, crie um novo arquivo e nomeie-o como index.html. Este será o arquivo HTML onde escreveremos a estrutura da nossa página web.
Passo 3: Na mesma pasta TronDApp, crie outro novo arquivo e nomeie-o app.js. Este será o arquivo JavaScript onde escreveremos o código para interagir com o blockchain Tron.
Passo 4: Agora abra esses arquivos em um editor de texto de sua escolha (por exemplo, Notepad, Sublime Text, Visual Studio Code, etc.) e cole o respectivo código que forneci na Lição 3.3.
Lembre-se de substituir "YOUR_CONTRACT_ADDRESS" e 'YOUR_PRIVATE_KEY' no arquivo app.js pelo endereço do seu próprio contrato e sua chave privada.
Etapa 5: para visualizar seu DApp, abra o arquivo index.html em um navegador da web (como Google Chrome, Firefox, etc.).
Lembre-se que esses arquivos devem ser sempre mantidos na mesma pasta porque estão vinculados (o arquivo index.html está vinculado ao arquivo app.js através do <script src="app.js"></script> linha no código HTML). Se você mover um arquivo sem o outro, o link será quebrado e seu DApp não funcionará corretamente.
Isso cria uma página da Web simples com um campo de entrada, dois botões (um para armazenar um número e outro para recuperá-lo) e um parágrafo para exibir o número recuperado.
Em seguida, crie um arquivo JavaScript (app.js) com o seguinte código:
JavaScript
javascriptCopiar código
const contractAddress = "YOUR_CONTRACT_ADDRESS"; // substitua pelo endereço do seu contrato // configure TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// obtenha a função instanceasync do contrato getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// configure ouvintes para botõesdocument.getElementById('storeButton').addEventListener( 'clique', assíncrono() => {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
});
document.getElementById('retrieveButton').addEventListener('clique', assíncrono() => {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
});
Neste script, substitua "YOUR_CONTRACT_ADDRESS" e 'YOUR_PRIVATE_KEY' pelo endereço do seu contrato e sua chave privada. Este arquivo JavaScript configura o TronWeb, conecta-se ao nosso contrato e interage com o contrato quando os botões são clicados.
Para obter a Chave Privada basta exportar sua carteira clicando em Exportar Conta e clicar em Chave Privada da seguinte forma:
Nota: Em um DApp do mundo real, você nunca deve expor sua chave privada desta forma. Estamos fazendo isso aqui por uma questão de simplicidade. Para um DApp de produção, você deve usar uma forma segura de assinar transações, como o TronLink.
Testando e implantando o Tron DApp no Nile Testnet
Você pode testar seu DApp abrindo o arquivo index.html em seu navegador. Lembre-se de usar um navegador onde você instalou a extensão TronLink e conectou-a ao Nile Testnet (como Chrome ou Brave Browser). Insira um número no campo de entrada e clique em ‘Armazenar’. Após a confirmação da transação, clique em 'Recuperar' e o número que você armazenou deverá ser exibido.
Isso conclui a Lição 3! Parabéns por criar e implantar seu primeiro aplicativo descentralizado no Tron! Na próxima lição, aprimoraremos nosso DApp com recursos mais avançados.
Construindo um aplicativo descentralizado simples (DApp) no Tron
Bem-vindo à Lição 3! Nesta lição, aprenderemos sobre a estrutura e funcionalidade de um aplicativo descentralizado Tron (DApp) básico. Adotaremos uma abordagem prática criando um DApp simples que interage com o contrato inteligente que desenvolvemos na lição anterior. Ao final desta lição, você terá seu DApp em execução no Nile Testnet.
Projetando a estrutura e funcionalidade de um Tron DApp básico
Um DApp é uma combinação de um frontend, escrito em uma linguagem que pode fazer chamadas web3.js, e um backend, que são basicamente os contratos inteligentes. Nosso DApp terá uma interface simples com duas funcionalidades principais: armazenar um número e recuperá-lo do contrato inteligente. Estaremos usando HTML para nossa estrutura de frontend e JavaScript com biblioteca TronWeb para interagir com a rede Tron.
Desenvolvendo e implantando os contratos inteligentes necessários para o DApp
Já fizemos essa etapa na Lição 2! Nosso contrato inteligente, 'Armazenamento', já está implantado na Nile Testnet.
Implementando interfaces de usuário e componentes front-end para o DApp usando tecnologias web
Vamos começar a codificar nosso DApp simples. Crie um arquivo HTML (index.html) com o seguinte código:
HTML
htmlCopiar código
<!DOCTYPE html><html><body><h2>DApp de armazenamento simples</h2><input id="storageValue" type="number"><button id="storeButton">Loja</ botão><button id="retrieveButton">Recuperar</button><p id="displayValue"></button></p><!-- Carregar TronWeb --><script src="https://cdn.jsdelivr.net /npm/tronweb@2/dist/tronweb.min.js"></script><script src="app.js"></script></body></html>
Perguntas Frequentes
- Onde devo criar esses arquivos?
Você deve criar esses dois arquivos (index.html e app.js) em uma nova pasta na sua máquina local. Aqui está um guia passo a passo:
Passo 1: Crie uma nova pasta no seu computador. Você pode nomeá-lo como quiser. Por exemplo, você pode chamá-lo de TronDApp.
Passo 2: Dentro desta pasta TronDApp, crie um novo arquivo e nomeie-o como index.html. Este será o arquivo HTML onde escreveremos a estrutura da nossa página web.
Passo 3: Na mesma pasta TronDApp, crie outro novo arquivo e nomeie-o app.js. Este será o arquivo JavaScript onde escreveremos o código para interagir com o blockchain Tron.
Passo 4: Agora abra esses arquivos em um editor de texto de sua escolha (por exemplo, Notepad, Sublime Text, Visual Studio Code, etc.) e cole o respectivo código que forneci na Lição 3.3.
Lembre-se de substituir "YOUR_CONTRACT_ADDRESS" e 'YOUR_PRIVATE_KEY' no arquivo app.js pelo endereço do seu próprio contrato e sua chave privada.
Etapa 5: para visualizar seu DApp, abra o arquivo index.html em um navegador da web (como Google Chrome, Firefox, etc.).
Lembre-se que esses arquivos devem ser sempre mantidos na mesma pasta porque estão vinculados (o arquivo index.html está vinculado ao arquivo app.js através do <script src="app.js"></script> linha no código HTML). Se você mover um arquivo sem o outro, o link será quebrado e seu DApp não funcionará corretamente.
Isso cria uma página da Web simples com um campo de entrada, dois botões (um para armazenar um número e outro para recuperá-lo) e um parágrafo para exibir o número recuperado.
Em seguida, crie um arquivo JavaScript (app.js) com o seguinte código:
JavaScript
javascriptCopiar código
const contractAddress = "YOUR_CONTRACT_ADDRESS"; // substitua pelo endereço do seu contrato // configure TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// obtenha a função instanceasync do contrato getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// configure ouvintes para botõesdocument.getElementById('storeButton').addEventListener( 'clique', assíncrono() => {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
});
document.getElementById('retrieveButton').addEventListener('clique', assíncrono() => {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
});
Neste script, substitua "YOUR_CONTRACT_ADDRESS" e 'YOUR_PRIVATE_KEY' pelo endereço do seu contrato e sua chave privada. Este arquivo JavaScript configura o TronWeb, conecta-se ao nosso contrato e interage com o contrato quando os botões são clicados.
Para obter a Chave Privada basta exportar sua carteira clicando em Exportar Conta e clicar em Chave Privada da seguinte forma:
Nota: Em um DApp do mundo real, você nunca deve expor sua chave privada desta forma. Estamos fazendo isso aqui por uma questão de simplicidade. Para um DApp de produção, você deve usar uma forma segura de assinar transações, como o TronLink.
Testando e implantando o Tron DApp no Nile Testnet
Você pode testar seu DApp abrindo o arquivo index.html em seu navegador. Lembre-se de usar um navegador onde você instalou a extensão TronLink e conectou-a ao Nile Testnet (como Chrome ou Brave Browser). Insira um número no campo de entrada e clique em ‘Armazenar’. Após a confirmação da transação, clique em 'Recuperar' e o número que você armazenou deverá ser exibido.
Isso conclui a Lição 3! Parabéns por criar e implantar seu primeiro aplicativo descentralizado no Tron! Na próxima lição, aprimoraremos nosso DApp com recursos mais avançados.