Ir para o conteúdo
Buscar

WEB3DEV

Cover image for Construir um Aplicativo Web3 - Blockchain Tron
Panegali
Panegali

Posted on

Construir um Aplicativo Web3 - Blockchain Tron

#web3 #tron #dapp

Este artigo aborda todo o processo de desenvolvimento de um DApp (Aplicativo Descentralizado) a partir do zero, desde a redação do contrato até a implantação e lançamento. Ao aprender como construir uma biblioteca descentralizada, os desenvolvedores podem facilmente compreender o processo de implantação de seus próprios aplicativos descentralizados na rede TRON.

Preparativos

Instalar

Nodej v10+ 

# node -v
v10.24.1
Enter fullscreen mode Exit fullscreen mode

TronLink

Instalar a extensão Chrome da Tronlink.

O que estamos fazendo

Estamos construindo uma biblioteca descentralizada que contém as seguintes funções:

  • Empréstimo de livros
  • Navegação nos livros
  • Adição de livros

Baixe o código completo do projeto aqui, e execute npm install para instalar as dependências.

Estrutura de dados

Normalmente, os mutuários estão preocupados com o título, conteúdo, disponibilidade e preço do livro. Com base nisso, projetamos uma estrutura no contrato chamada Book, que compreende as seguintes propriedades:

struct Book {
       string name;
       string description;
       bool valid;      // falso se foi emprestado
       uint256 price;   // TRX por dia
       address owner;   // dono do livro
}
Enter fullscreen mode Exit fullscreen mode

Esperamos que a biblioteca seja capaz de ter uma maneira fácil de encontrar todos os livros. Para fazer isso, construímos um atributo BookIde uma relação de mapeamento entre BookId e Book, chamado books.

uint256 public bookId;

mapping (uint256 => Book) public books;
Enter fullscreen mode Exit fullscreen mode

Além disso, devemos acompanhar as informações de aluguel de cada livro, incluindo o mutuário e as datas de início e término.

Uma vez com o Book, construa uma estrutura chamada Trackingpara acompanhar esses dados. Esta estrutura possui os seguintes campos:

struct Tracking {
       uint256 bookId;
       uint256 startTime; // hora de início, em carimbo de data/hora
       uint256 endTime; // tempo final, em carimbo de data/hora
       address borrower; // endereço do tomador
}
Enter fullscreen mode Exit fullscreen mode

Da mesma forma, uma relação de mapeamento deve ser estabelecida para gerenciar cada registro de aluguel:

uint256 public trackingId;

mapping(uint256 => Tracking) public trackings;
Enter fullscreen mode Exit fullscreen mode

Funções e Eventos

Estamos adicionando funções fundamentais à nossa biblioteca, incluindo:

  • Adicionar um livro à biblioteca - addBook
  • Pegar um livro emprestado - borrowBook
  • Remover um livro da biblioteca - deleteBook

addBook 

/**
* @dev Adiciona um livro com "nome", "descrição" e "preço"   
* pré-definidos à biblioteca.
*
* Retorna um valor booleano indicando se a operação foi bem sucedida.
*
* Emite um evento {NewBook}.
*/
function addBook(string memory name, string memory description, uint256 price) public returns (bool) {
       Book memory book = Book(name, description, true, price, _msgSender());

       books[bookId] = book;

       emit NewBook(bookId++);

       return true;
}

/**
* @dev Emitido quando um novo livro é adicionado à biblioteca.
* Nota bookId começa em 0.
*/
event NewBook(uint256 bookId);
Enter fullscreen mode Exit fullscreen mode

borrowBook 

/**
* @dev Pedir emprestado um livro `_bookId`. O período de aluguel    * começa a partir de `startTime` e termina com `endTime`.
*
* Retorna um valor booleano indicando se a operação foi bem-sucedida.
*
* Emite um evento `NewRental`.
*/
function borrowBook(uint256 _bookId, uint256 startTime, uint256 endTime) public payable returns(bool) {
       Book storage book = books[_bookId];

       require(book.valid == true, "O livro está atualmente emprestado");

       require(_msgValue() == book.price * _days(startTime, endTime), "Fundo incorreto enviado.");

       _sendTRX(book.owner, _msgValue());

       _createTracking(_bookId, startTime, endTime);

       emit NewRental(_bookId, trackingId++);
}
Enter fullscreen mode Exit fullscreen mode

deleteBook 

/**
* @dev Excluir um livro da biblioteca. Somente o proprietário do    * livro ou o proprietário da biblioteca está autorizado para esta   * operação.
* Retorna um valor booleano indicando se a operação foi bem         * sucedida.
* Emite um evento "DeleteBook".
*/
function deleteBook(uint256 _bookId) public returns(bool) {
       require(_msgSender() == books[_bookId].owner || isOwner(),
               "Você não está autorizado a deletar este livro.");


       delete books[_bookId];

       emit DeleteBook(_bookId);

       return true;
}
Enter fullscreen mode Exit fullscreen mode

Utilizamos dois métodos de ferramentas no método borrowBook: _sendTRX e _createTracking. Não desejamos que os usuários invoquem essas APIs. Como resultado, de acordo com os padrões do Solidity, nós os identificamos como internal, o que significa que eles podem ser acessados apenas dentro do contrato.

_sendTRX 

/**
* @dev Enviar TRX para o proprietário do livro.
*/
function _sendTRX(address receiver, uint256 value) internal {
       payable(address(uint160(receiver))).transfer(value);
}
Enter fullscreen mode Exit fullscreen mode

_createTracking 

/**
* @dev Criar um novo rastreamento de aluguel.
*/
function _createTracking(uint256 _bookId, uint256 startTime, uint256 endTime) internal {
         trackings[trackingId] = Tracking(_bookId, startTime, endTime, _msgSender());

         Book storage book = books[_bookId];

         book.valid = false;
 }
Enter fullscreen mode Exit fullscreen mode

O contrato está pronto, é hora de implementá-lo.

Implantação e teste

Compilamos e implantamos contratos usando o TronIDE. Para facilitar o teste, é aconselhável que a implantação inicial utilize a rede de teste Nile da TRON.

Rede de teste Nile

Nile é a rede de testes piloto da TRON. Nile será a primeira a lançar novos recursos que mais tarde serão lançados na rede principal. Por favor, visite o site oficial da Nile para obter mais informações.

TRX deve estar em stake ou ser queimado para pagar a energia no contrato de implantação. Aqui você pode obter algumas moedas de teste e cada endereço é válido apenas uma vez.

A TronLink logada irá se conectar automaticamente ao TronIDE; no entanto, verifique se a rede correta está selecionada:

1

Se esta for a primeira vez que você usa o TronIDE, você deve primeiro habilitar dois módulos: Solidity Compiler e DEPLOYMENT.

2

Após a ativação, a barra de menu mais à esquerda deve aparecer como se segue:

3

Crie um novo arquivo de contrato, Library.sol, no qual você colará todo o código do contrato.

4

O modelo do contrato contido neste artigo deve ser compilado selecionando 0.8.0+commit7c2e641 no menu suspenso Compiler (Compilador).

O contrato que foi compilado com sucesso está agora pronto para ser implantado. Para garantir uma implantação adequada, você deve digitar o feelimit correspondente no local indicado na figura. Aqui, digite 1000000000 como o feelimit. Consulte esta página para obter detalhes adicionais sobre o feelimit.

5

Clique em Accept na janela pop-up para assinar para esta implantação.

6

Quando o contrato for implantado com sucesso, a posição indicada na figura mostrará os métodos que esse contrato pode chamar.

7

Construir o DApp

Para começar, copie o endereço do contrato que foi implantado anteriormente na variável libraryContractAddressem utils.js.

Vincular a interface do usuário (UI) a TronLink

A próxima etapa é vincular a interface do usuário à carteira TronLink do Chrome. A TronLink introduz o objeto TronWeb em cada página do navegador, permitindo que o DApp se comunique com a rede TRON.

Funções

Depois de conectar nossa interface de usuário a TronLink, precisamos analisar como a interface do usuário interage com contratos inteligentes. Como resultado, um objeto de contrato deve ser criado para representar o contrato inteligente de biblioteca descentralizada.

Crie o código a seguir em dapp-ui/plugins/utils.js para recuperar o objeto de contrato inteligente e salvá-lo na variável global. Então, você pode interagir diretamente com o contrato através da variável global.

export async function setLibraryContract() {
     bookRentContract = await        
     window.tronWeb.contract().at('TMH1jAzAjCp2GdWm7hXSmhYyD3iKdpExoZ');
}
Enter fullscreen mode Exit fullscreen mode

A biblioteca deve ter três funções fundamentais:

  • Adicionar um livro
  • Procurar livros disponíveis
  • Pedir um livro emprestado

Em index.vue, chame setLibraryContract() para inicializar o objeto de contrato.

async mounted() {
   // init objeto do contrato
   await setLibraryContract();
   // buscar todos os livros
   const books = await fetchAllBooks();
   this.posts = books;
 },
Enter fullscreen mode Exit fullscreen mode

Adicionar um livro

Para começar, construa um formulário de adição de livro para que os usuários enviem informações sobre aluguéis de livros. No back-end, ele se comunicará com a função addBook do contrato de biblioteca.

Adicione o seguinte código à função dapp-ui/components/postAd() bookForm.vue:

postAd() {
     // converte preço de TRX para SUN
     postBookInfo(this.title,this.description,tronWeb.toSun(this.price));
 }
Enter fullscreen mode Exit fullscreen mode

Adicione o seguinte código a postBookInfo() de dapp-ui/plugins/utils.js:

const result = await bookRentContract.addBook(name,description,price).send({
   feeLimit:100_000_000,
   callValue:0,
   shouldPollResponse:true
 });
Enter fullscreen mode Exit fullscreen mode

Procurar todos os livros disponíveis

A função fetchAllBooks()retorna a lista de livros, que contém uma lista de todos os livros disponíveis.

Adicione o seguinte código dapp-ui/plugins/fetchAllBooks() à função do utils.js :

const books = [];

 const bookId  = await bookRentContract.bookId().call();
 //iterar a partir do 0 até o livroId
 for (let i = 0; i < bookId; i++){
   const book = await bookRentContract.books(i).call()
   if(book.name!="") // filtrar os livros excluídos
   {
     books.push(
       {id: i,name: book.name,description: book.description,price: tronWeb.fromSun(book.price)}
     )
   } 
 }
return books
Enter fullscreen mode Exit fullscreen mode

Em index.vue, chame fetchAllBooks() para recuperar informações do livro e mostrá-las na página inicial.

Pedir um livro emprestado

O usuário pode emprestar o livro depois de visualizar as informações do livro.

Na função book() de dapp-ui/components/detailsModal.vue, adicione o seguinte código:

// obter a data de Início
     const startDay = this.getDayOfYear(this.startDate)
     // obter data Final
     const endDay = this.getDayOfYear(this.endDate)
     // cálculo do preço
     const totalPrice =tronWeb.toSun(this.propData.price) * (endDay - startDay)
     // chamar metamask.bookProperty
     borrowBook(this.propData.id, startDay, endDay, totalPrice)
Enter fullscreen mode Exit fullscreen mode

dapp-ui/plugins/utils.js, adicione o seguinte código à função borrowBook():

const result = await bookRentContract.borrowBook(spaceId,checkInDate,checkOutDate).send({
   feeLimit:100_000_000,
   callValue:totalPrice,
   shouldPollResponse:true
 });
Enter fullscreen mode Exit fullscreen mode

O desenvolvimento da biblioteca Dapp está pronto.

Execute o DApp

Verifique se a TronLink está conectada antes de executar o seguinte comando para iniciar o serviço:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Para exibir a página front-end, digite localhost:3000 na barra de endereços do navegador.

a

Para publicar informações de aluguel de livros, clique no botão "Rent Your Books" (Alugue seus Livros) no canto superior direito. O título do livro, uma breve descrição do livro e o custo do livro por um dia estão todos incluídos no material.

trew

Depois de preencher o formulário, clique no botão " Submit " (Enviar). As informações serão passadas para a função addBook do contrato da biblioteca, que gerará uma transação que acionará o contrato. Então, como ilustrado abaixo, uma caixa pop-up TronLink será aberta, solicitando confirmação e assinatura:

c

d

Após conectar com sucesso a transação à cadeia, as seguintes informações de locação serão exibidas na página:

gd

Clique em "View" (Visualizar) para ver os detalhes gerais do livro e selecionar o período de aluguel. Para iniciar uma solicitação de locação, clique em "Lent Now" (Emprestado agora), em seguida, a função borrowBookdo contrato de biblioteca será chamada. Além disso, a transação de locação deve ser assinada e transmitida para terminá-la.

t

Artigo original postado na Central do Desenvolvedor TRON e traduzido por Marcelo Panegali

Top comments (0)


Leia o próximo

cavazinf profile image

Geração que cria a sua própria economia.

Tiago Ferreira Cavazin -

cavazinf profile image

“Desafios no Tokenomics das Criptomoedas: Lições e Oportunidades

Tiago Ferreira Cavazin -

cavazinf profile image

Do Cypherpunk às Criptomoedas: Uma Revolução Ideológica e Tecnológica

Tiago Ferreira Cavazin -

cavazinf profile image

“Desmistificando Blockchains: O Impacto das Públicas e Privadas”

Tiago Ferreira Cavazin -