Developers Forum for XinFin XDC Network

Cover image for How to Build a dApp on XDC Blockchain?
Lucas Chua
Lucas Chua

Posted on

How to Build a dApp on XDC Blockchain?

The XDC Network is a hybrid blockchain platform that has been designed to support global finance and trade. It’s highly interoperable and harnesses the power of cryptographic tokens to facilitate quick settlement of trade transactions, reducing dependence on complicated foreign exchange infrastructures. The XDC Network offers several key benefits to its users, including lower transaction fees, minimal energy consumption, faster confirmation time, double validation, and randomization for security guarantees.

XDC can help lay the foundation for a revolutionized digital economy and develop tokenized trade financing distribution standards. This, in turn, can offer organizations greater exposure to emerging markets.

What is a dApp?

Decentralized apps (dApps) are digital programs or applications that are built and run on a peer-to-peer network of computers. They are essentially a combination of a frontend user interface and a smart contract. DApps are not under the control or purview of any single authority and has a multitude of use cases in various industries including finance, gaming, and social media.

How to develop a dApp on the XDC network?

Deciding on the architecture of your dApp is the first step in dApp development. Depending on its intended architecture, you can choose a blockchain protocol for your dApp’s development.

Let’s now discuss the next steps you should take after you have completed the dApp architecture-

Protocol selection

To build a dApp, it’s important first to choose a blockchain protocol. You have the option to choose a private network, public network or hybrid ecosystem such as the XDC Network based on your needs.

Collecting data

Depending on which microservices the dApp intends to provide, both on-chain or off-chain data, from multiple sources including external sources, must be gathered onto the blockchain.

Data processing

Once the data has been gathered on the blockchain, it is time to process it and create an interface design that allows users to interact with the dApp and trust the data. After this, the structure of the dApp is focused on. A dApp’s architecture design involves two aspects-

Front-end Development

The front-end development of a decentralized application is focused on building an easily navigable interface for users. This includes optimizing web pages and visual aspects of the app, fixing bugs, and improving the overall user experience. Note that the front end allows users to interact with the dApp. Here is the technology stack you will need to develop a dApp on the XDC ecosystem.

  • AngularJS
  • BootStrap
  • jQuery
  • React
  • Backend development

Any dApp’s backend focuses primarily on smart contract development in addition to the following components-

User identity

User identity entails a set of basic decisions, such as whether the identity should be centralized or decentralized. This is an important factor that determines the success of the user interface.

Authorization and Roles

Authorization and roles must be considered to regulate user movements, determine where authorization can be saved, and ensure that roles are properly managed.

Notifications

Notifications send out alerts about actions occurring on and off the chain. They are off-chain in nature.

Business Logic

Business logic determines how to present business logic data to the public. This involves determining whether the data will be available off-chain or on-chain.

Storage

You have two choices for storage: either save your data to the cloud or allow the blockchain to save it. You can choose which storage option you want, depending on the needs of the dApp.

Smart contracts

Smart contracts control the entire blockchain and define its functionality. They also determine how external data sources and APIs interact with on-chain data via Oracles. It’s important to note here that-

Third-party integration and APIs are also required for dApp development. These help front-end programs communicate with smart contracts or the backend.

Connect the dApp with the wallet, smart contract, and XDC ecosystem for its decentralization.

How to create a smart contract for dApp development?

We now have a better understanding of the architecture of dApps, and how they are built. Let’s now discuss the technicalities of creating the smart contracts that regulate dApps.

1.Set up the dApp Environment

For facilitating dApp development on the XDC Network, it’s first important to create a dApp environment for both the front-end and backend of the app. The following are the requirements for creating a dApp environment-

A test network for testing the smart contract:

Smart contract deployment on the mainnet is a highly resource-intensive process. That is why developers should test their smart contracts on test networks to tune them and verify that they are ready to be deployed on the mainnet.

Wallet client:

Wallet-CLI, the command-line wallet of the XDC Network, is used by developers to post and deploy smart contracts and perform other operations on the network.

Developing the smart contract
Once you have set up your dApp environment, it is time for smart contract development. The smart contract will regulate the functions and operations of the dApp. Let’s talk about the process of compiling and debugging the contract and how to deploy it.

Initiating the private chain:

For determining if a log message stating “produce block successfully” appears, the private chain must be deployed successfully.

Develop the smart contract:

Pragma solidity ^0.4.0;

Contract DataStore {

mapping(uint256+>uint256) data;

function set(uint256 key,uint256 value) public {
}

function get(uint256 key) view public returns (uint256 value) {

value=data[key];
}

}
Enter fullscreen mode Exit fullscreen mode

Use SimpleWebCompiler to compile:

The XDC Compiler integrates with Remix. You should consider temporary methods of acquiring ABI or ByteCode, rather than getting them directly from Remix. To do this, copy the smart contract code and paste it into SimpleWebCompiler. Finally, click the compile button.

Deploy with Wallet-Cli:

To compile on Wallet-Cli, first, download it. Use the given code:

#Download source code

git clone

cd wallet-cli

#Compile

./gradlew build

cd buil/libs

Enter fullscreen mode Exit fullscreen mode

Then initiate Wallet — Cli with this code:

java-jar wallet-cli.jar
Enter fullscreen mode Exit fullscreen mode

After initiation, enter the given command into the portal. Import your private key and inquire about the balance

importwallet

<Enter your custom wallet password twice>

<Enter private key: da146374a75310b9666e834ee4ad0866d6f4035967bfc76217c5a495fff9f0d0>

login

<Enter your custom wallet password>

getbalance
Enter fullscreen mode Exit fullscreen mode

Contract deployment

Upon successful deployment of a smart contract, a message with the following text will be displayed: “Deploy the contract successfully.”

Access the dApp through XDCPay

Your dApp is now ready for end-users. Users must connect to an XDC dApp with a wallet in order to access it.

Once connected, users have access to the dApp and can navigate its features, perform transactions, and enjoy many other benefits.

As decentralized technology becomes more widely recognized for its potential for driving business growth, the number of dApps or decentralized applications built across industries continues to rise. The XDC network facilitates dApp development in its ecosystem by offering different SDKs as well as ecosystem tools such as XDCPay, XDC Origin, Network Stats, and XDC Explorer to developers. Besides, this hybrid EVM-compatible network maintains its momentum through timely feature launches and frequent updates of such features. So, XDC is undoubtedly an ideal platform for scalable dApp development you can bank upon.

Discussion (4)

Collapse
akhekade profile image
Atul Khekade • Edited on

e.g.

Pragma solidity ^0.4.0;

Contract DataStore {

mapping(uint256+>uint256) data;

function set(uint256 key,uint256 value) public {
}

function get(uint256 key) view public returns (uint256 value) {

value=data[key];
}

}
Enter fullscreen mode Exit fullscreen mode
Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
akhekade profile image
Atul Khekade • Edited on

Request to add code in code block
Use "~~~"

Currently its added as screenshot. Can you please replace it with code block?

Collapse
lucas_chua_ebd1d8d9e09f30 profile image
Lucas Chua Author

Thank you for your guidance

Article has been updated.