Construir uma Aplicação Descentralizada Simples (DApp) no Tron
Bem-vindo à Lição 3! Nesta lição, aprenderemos sobre a estrutura e a funcionalidade de uma aplicação descentralizada Tron (DApp) básica. Teremos uma abordagem prática criando um DAp simples que interage com o contrato inteligente que desenvolvemos na lição anterior. No final desta lição, terá o seu DApp a funcionar na Nile Testnet.
Projetar a estrutura e funcionalidade de um Tron dApp Básico
Um DApp é uma combinação de um frontend, escrito numa linguagem que pode fazer chamadas web3.js, e um back-end, que são basicamente os contratos inteligentes. O nosso dApp terá uma interface simples com duas funcionalidades principais: armazenar um número e recuperá-lo do contrato inteligente. Vamos usar HTML para a nossa estrutura de front-end e JavaScript com biblioteca TronWeb para interagir com a rede Tron.
Desenvolver e implementar os Contratos Inteligentes Necessários para o DApp
Já fizemos este passo na Lição 2! O nosso contrato inteligente, 'Armazenamento', já está implantado no Nile Testnet.
Implementação de Interfaces de Utilizador e Componentes Front-End para o DApp utilizando tecnologias web
Vamos começar a codificar o nosso DAp simples. Criar um ficheiro HTML (index.html) com o seguinte código:
HTML
Código HTMLCopy
<! DOCTYPE ><html><body><h2></h2></button></button></p>simples < dApp/h2 ID de entrada = > < " "Tipo de valor de armazenamento= " número ID do botão = StoreButton Store " > < /botão de botão " " > < > < id= " RetrieveButton " > < Recuperar/botão p id = DisplayValue > < /p " " > < > <!-- Carregar TRONWeb -->< script src= " https://cdn.jsdelivr.net/npm/tronweb@2/dist/tronweb.min.js /script script " > < > <</script> </script></body></html>src= " app.js " > < /guia/corpo/html > < > < >
Perguntas Frequentes
- Onde devo criar esses ficheiros?
Deve criar estes dois ficheiros (index.html e app.js) numa nova pasta na sua máquina local. Aqui está um guia passo a passo:
Passo 1: Crie uma nova pasta no seu computador. Pode nomeá-lo como quiser. Por exemplo, pode chamá-lo de TrondApp.
Passo 2: Dentro desta pasta TrondApp, crie um novo ficheiro e nomeia-o index.html. Este será o ficheiro HTML onde escreveremos a estrutura da nossa página web.
Passo 3: Na mesma pasta TrondApp, crie outro novo ficheiro e nomeia-o app.js. Este será o ficheiro JavaScript onde escreveremos o código para interagir com a cadeia de blocos Tron.
Passo 4: Agora abra estes ficheiros num editor de texto à sua escolha (por exemplo, Bloco de Notas, Sublime Text, Visual Studio Code, etc.) e cole o respetivo código que forneci na Lição 3.3.
Lembre-se de substituir " YOUR_CONTRACT_ADDRESS " e 'YOUR_PRIVATE_KEY' no ficheiro app.js pelo endereço do seu próprio contrato e pela sua chave privada.
Passo 5: Para ver o seu DApp, abra o ficheiro index.html num navegador da Web (como o Google Chrome, Firefox, etc.).
Lembre-se que estes ficheiros devem ser sempre mantidos na mesma pasta porque estão ligados (o ficheiro index.html está ligado ao ficheiro app.js através do < script src= " app.js /script " > < ></script> linha no código HTML). Se mover um ficheiro sem o outro, o link irá quebrar e o seu dApp não funcionará corretamente.
Isso cria uma página 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 ficheiro JavaScript (app.js) com o seguinte código:
JavaScript
JavaScriptCopiar código
const contractAddress = " YOUR_CONTRACT_ADDRESS";//substitua pelo seu endereço de contrato// setup TronWebConst TronWeb = new TronWeb (){
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
}
//obter a função assíncrona da instância do contrato getContract () {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
//configurar ouvintes para ButtonsDocument.getElementById ('storeButton') .AddEventListener ('click', 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 pela sua chave privada. Este ficheiro JavaScript configura o TronWeb, liga-se ao nosso contrato e interage com o contrato quando os botões são clicados.
Para obter a Chave Privada basta exportar a sua carteira clicando em Exportar Conta e clicar em Chave Privada da seguinte forma:
Nota: Num DApp do mundo real, nunca deve expor a sua chave privada assim. Estamos a fazer isso aqui por uma questão de simplicidade. Para uma DApp de produção, deve usar uma forma segura de assinar transações, como o TronLink.
Testar e implantar o Tron DApp na rede de teste do Nilo
Pode testar o seu dApp abrindo o ficheiro index.html no seu navegador. Lembre-se de usar um navegador onde instalou a extensão TronLink e a conectou ao Nile Testnet (como o Chrome ou o Brave Browser). Introduza um número no campo de entrada e clique em 'Armazenar'. Após a transação ter sido confirmada, clique em 'Recuperar', e o número que armazenou deverá ser apresentado.
Isto conclui a Lição 3! Parabéns por criar e implantar a sua primeira Aplicação Descentralizada no Tron! Na próxima lição, vamos melhorar o nosso DApp com funcionalidades mais avançadas.
Construir uma Aplicação Descentralizada Simples (DApp) no Tron
Bem-vindo à Lição 3! Nesta lição, aprenderemos sobre a estrutura e a funcionalidade de uma aplicação descentralizada Tron (DApp) básica. Teremos uma abordagem prática criando um DAp simples que interage com o contrato inteligente que desenvolvemos na lição anterior. No final desta lição, terá o seu DApp a funcionar na Nile Testnet.
Projetar a estrutura e funcionalidade de um Tron dApp Básico
Um DApp é uma combinação de um frontend, escrito numa linguagem que pode fazer chamadas web3.js, e um back-end, que são basicamente os contratos inteligentes. O nosso dApp terá uma interface simples com duas funcionalidades principais: armazenar um número e recuperá-lo do contrato inteligente. Vamos usar HTML para a nossa estrutura de front-end e JavaScript com biblioteca TronWeb para interagir com a rede Tron.
Desenvolver e implementar os Contratos Inteligentes Necessários para o DApp
Já fizemos este passo na Lição 2! O nosso contrato inteligente, 'Armazenamento', já está implantado no Nile Testnet.
Implementação de Interfaces de Utilizador e Componentes Front-End para o DApp utilizando tecnologias web
Vamos começar a codificar o nosso DAp simples. Criar um ficheiro HTML (index.html) com o seguinte código:
HTML
Código HTMLCopy
<! DOCTYPE ><html><body><h2></h2></button></button></p>simples < dApp/h2 ID de entrada = > < " "Tipo de valor de armazenamento= " número ID do botão = StoreButton Store " > < /botão de botão " " > < > < id= " RetrieveButton " > < Recuperar/botão p id = DisplayValue > < /p " " > < > <!-- Carregar TRONWeb -->< script src= " https://cdn.jsdelivr.net/npm/tronweb@2/dist/tronweb.min.js /script script " > < > <</script> </script></body></html>src= " app.js " > < /guia/corpo/html > < > < >
Perguntas Frequentes
- Onde devo criar esses ficheiros?
Deve criar estes dois ficheiros (index.html e app.js) numa nova pasta na sua máquina local. Aqui está um guia passo a passo:
Passo 1: Crie uma nova pasta no seu computador. Pode nomeá-lo como quiser. Por exemplo, pode chamá-lo de TrondApp.
Passo 2: Dentro desta pasta TrondApp, crie um novo ficheiro e nomeia-o index.html. Este será o ficheiro HTML onde escreveremos a estrutura da nossa página web.
Passo 3: Na mesma pasta TrondApp, crie outro novo ficheiro e nomeia-o app.js. Este será o ficheiro JavaScript onde escreveremos o código para interagir com a cadeia de blocos Tron.
Passo 4: Agora abra estes ficheiros num editor de texto à sua escolha (por exemplo, Bloco de Notas, Sublime Text, Visual Studio Code, etc.) e cole o respetivo código que forneci na Lição 3.3.
Lembre-se de substituir " YOUR_CONTRACT_ADDRESS " e 'YOUR_PRIVATE_KEY' no ficheiro app.js pelo endereço do seu próprio contrato e pela sua chave privada.
Passo 5: Para ver o seu DApp, abra o ficheiro index.html num navegador da Web (como o Google Chrome, Firefox, etc.).
Lembre-se que estes ficheiros devem ser sempre mantidos na mesma pasta porque estão ligados (o ficheiro index.html está ligado ao ficheiro app.js através do < script src= " app.js /script " > < ></script> linha no código HTML). Se mover um ficheiro sem o outro, o link irá quebrar e o seu dApp não funcionará corretamente.
Isso cria uma página 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 ficheiro JavaScript (app.js) com o seguinte código:
JavaScript
JavaScriptCopiar código
const contractAddress = " YOUR_CONTRACT_ADDRESS";//substitua pelo seu endereço de contrato// setup TronWebConst TronWeb = new TronWeb (){
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
}
//obter a função assíncrona da instância do contrato getContract () {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
//configurar ouvintes para ButtonsDocument.getElementById ('storeButton') .AddEventListener ('click', 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 pela sua chave privada. Este ficheiro JavaScript configura o TronWeb, liga-se ao nosso contrato e interage com o contrato quando os botões são clicados.
Para obter a Chave Privada basta exportar a sua carteira clicando em Exportar Conta e clicar em Chave Privada da seguinte forma:
Nota: Num DApp do mundo real, nunca deve expor a sua chave privada assim. Estamos a fazer isso aqui por uma questão de simplicidade. Para uma DApp de produção, deve usar uma forma segura de assinar transações, como o TronLink.
Testar e implantar o Tron DApp na rede de teste do Nilo
Pode testar o seu dApp abrindo o ficheiro index.html no seu navegador. Lembre-se de usar um navegador onde instalou a extensão TronLink e a conectou ao Nile Testnet (como o Chrome ou o Brave Browser). Introduza um número no campo de entrada e clique em 'Armazenar'. Após a transação ter sido confirmada, clique em 'Recuperar', e o número que armazenou deverá ser apresentado.
Isto conclui a Lição 3! Parabéns por criar e implantar a sua primeira Aplicação Descentralizada no Tron! Na próxima lição, vamos melhorar o nosso DApp com funcionalidades mais avançadas.