How to deploy and Run Dapp on Tron Network

Advanced

How to deploy and Run Dapp on Tron Network

Welcome to this tutorial on how to deploy and run a Dapp on the Tron network. In this tutorial, we will guide you through the steps necessary to compile and deploy a contract using TronIDE, and then connect the user interface to TronLink in order to interact with the smart contract. We will also cover the functions and events that are necessary for a decentralized library Dapp, including adding a book, browsing available books, and borrowing a book. By the end of this tutorial, you will have a fully functional Dapp on the Tron network. Let’s get started!

We compile and deploy contracts using TronIDE. For easier testing, it is advised that the initial deployment utilize TRON’s Nile test network.

TRX must be staked or burned to pay for energy in the deployment contract. Here you can obtain some test coins, and each address is only valid once.

The logged-in TronLink will automatically connect to TronIDE; however, please ensure that the correct network is selected:

Tezos blockchain – The first self-amending blockchain

If this is your first time using TronIDE, you must first enable two modules: Solidity Compiler and DEPLOYMENT.

Following activation, the leftmost menu bar should appear as follows:

Create a new contract file, Library.sol, in which you will paste the entire contract code.

The sample contract contained in this article must be compiled by selecting 0.8.0+commit7c2e641 from the Compiler drop-down menu.

The contract that has been successfully compiled is now ready for deployment. To ensure proper deployment, you must enter the relevant feelimit in the location indicated in the figure. Here, enter 1000000000 as the feelimit. Please refer to this page for additional details on feelimit.

Click Accept in the pop-up window to sign for this deployment.

When the contract is successfully deployed, the position indicated in the figure will indicate the methods that this contract is capable of calling.

Build the DApp

To begin, copy the contract address that was previously deployed into the libraryContractAddress variable in utils.js.

Link the UI to TronLink

The following step is to link the UI to the TronLink Chrome wallet. TronLink injects the TronWeb object into each browser page, allowing the DApp to communicate with the TRON network.

Functions

After connecting our user interface to TronLink, we need to analyze how the user interface interacts with smart contracts. As a result, a contract object must be created to represent the decentralized library smart contract.

Create the following code in dapp-ui/plugins/utils.js to retrieve the smart contract object and save it to the global variable. Then you can directly interact with the contract via the global variable.

JavaScript

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

The library should have three fundamental functions：

Add a book
Browse available books
Borrow a book

In index.vue, call setLibraryContract() to initialize the contract object.

JavaScript

async mounted() {
   // init contract object
   await setLibraryContract();
   // fetch all books
   const books = await fetchAllBooks();
   this.posts = books;
 },

Add a Book

To begin, construct an add book form for users to submit information about book rentals. On the back end, it will communicate with the library contract’s addBook function.

Add the following code to dapp-ui/components/postAd() bookForm.vue’s function:

JavaScript

postAd() {
     // convert price from TRX to SUN
     postBookInfo(this.title,this.description,tronWeb.toSun(this.price));
 }

Add the following code to postBookInfo() of dapp-ui/plugins/utils.js:

JavaScript

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

Browse All Available Books

The fetchAllBooks() function returns the book list, which contains a list of all available books.

Add the following code to dapp-ui/plugins/fetchAllBooks() utils.js’s function:

JavaScript

const books = [];

 const bookId  = await bookRentContract.bookId().call();
 //iterate from 0 till bookId
 for (let i = 0; i < bookId; i++){
   const book = await bookRentContract.books(i).call()
   if(book.name!="") // filter the deleted books
   {
     books.push(
       {id: i,name: book.name,description: book.description,price: tronWeb.fromSun(book.price)}
     )
   } 
 }
return books

In index.vue, call fetchAllBooks() to retrieve book information and show it on the homepage.

Borrow a Book

The user may borrow the book after viewing the book’s information.
In the book() function of dapp-ui/components/detailsModal.vue, add the following code:

JavaScript

// get Start date
     const startDay = this.getDayOfYear(this.startDate)
     // get End date
     const endDay = this.getDayOfYear(this.endDate)
     // price calculation
     const totalPrice =tronWeb.toSun(this.propData.price) * (endDay - startDay)
     // call metamask.bookProperty
     borrowBook(this.propData.id, startDay, endDay, totalPrice)

dapp-ui/plugins/utils.js, add the following code to the borrowBook() function:

JavaScript

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

The development of the library Dapp is done.

Run the DApp

Ascertain that tronLink is logged in before running the following command to start the service:

Shell

npm run dev

To view the front-end page, type localhost:3000 into the browser’s address bar.

Build the DApp

To begin, copy the contract address that was previously deployed into the libraryContractAddress variable in utils.js.

Link the UI to TronLink

The following step is to link the UI to the TronLink Chrome wallet. TronLink injects the TronWeb object into each browser page, allowing the DApp to communicate with the TRON network.

Functions

After connecting our user interface to TronLink, we need to analyze how the user interface interacts with smart contracts. As a result, a contract object must be created to represent the decentralized library smart contract.

Create the following code in dapp-ui/plugins/utils.js to retrieve the smart contract object and save it to the global variable. Then you can directly interact with the contract via the global variable.

JavaScript

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

The library should have three fundamental functions：

Add a book
Browse available books
Borrow a book

In index.vue, call setLibraryContract() to initialize the contract object.

JavaScript

async mounted() {
   // init contract object
   await setLibraryContract();
   // fetch all books
   const books = await fetchAllBooks();
   this.posts = books;
 },

Add a Book

To begin, construct an add book form for users to submit information about book rentals. On the back end, it will communicate with the library contract’s addBook function.

Add the following code to dapp-ui/components/postAd() bookForm.vue’s function:

JavaScript

postAd() {
     // convert price from TRX to SUN
     postBookInfo(this.title,this.description,tronWeb.toSun(this.price));
 }

Add the following code to postBookInfo() of dapp-ui/plugins/utils.js:

JavaScript

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

Browse All Available Books

The fetchAllBooks() function returns the book list, which contains a list of all available books.

Add the following code to dapp-ui/plugins/fetchAllBooks() utils.js’s function:

JavaScript

const books = [];

 const bookId  = await bookRentContract.bookId().call();
 //iterate from 0 till bookId
 for (let i = 0; i < bookId; i++){
   const book = await bookRentContract.books(i).call()
   if(book.name!="") // filter the deleted books
   {
     books.push(
       {id: i,name: book.name,description: book.description,price: tronWeb.fromSun(book.price)}
     )
   } 
 }
return books

In index.vue, call fetchAllBooks() to retrieve book information and show it on the homepage.

Borrow a Book

The user may borrow the book after viewing the book’s information.
In the book() function of dapp-ui/components/detailsModal.vue, add the following code:

JavaScript

// get Start date
     const startDay = this.getDayOfYear(this.startDate)
     // get End date
     const endDay = this.getDayOfYear(this.endDate)
     // price calculation
     const totalPrice =tronWeb.toSun(this.propData.price) * (endDay - startDay)
     // call metamask.bookProperty
     borrowBook(this.propData.id, startDay, endDay, totalPrice)

dapp-ui/plugins/utils.js, add the following code to the borrowBook() function:

JavaScript

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

The development of the library Dapp is done.

Run the DApp

Ascertain that tronLink is logged in before running the following command to start the service:

Shell

npm run dev

To view the front-end page, type localhost:3000 into the browser’s address bar.

To post book rental information, click the “Rent Your Books” button in the upper right corner. The title of the book, a brief description of the book, and the cost of the book for one day are all included in the material.

After you’ve completed the form, click the “Submit” button. The information will be passed to the library contract’s addBook function, which will generate a transaction that triggers the contract. Then, as illustrated below, a TronLink pop-up box will open, requesting confirmation and signature:

After successfully connecting the transaction to the chain, the following leasing information will be displayed on the page:

Click “View” to view the book’s comprehensive details and to select the rental period. To initiate a lease request, click “Lent Now”, then the library contract’s borrowBook function will be called. Additionally, the leasing transaction must be signed and broadcasted to finish it.

Tron