2023 International Conference on Computer Communication and Informatics (ICCCI ), Jan.

23 – 25, 2023, Coimbatore, INDIA

Development and Integration of dApp with

blockchain smart contract
Truffle Framework for user interactive applications
2023 International Conference on Computer Communication and Informatics (ICCCI) | 979-8-3503-4821-7/23/$31.00 ©2023 IEEE | DOI: 10.1109/ICCCI56745.2023.10128406

Dhanvardini R, Martina PA, Vijay R, Amirtharajan R, Padmapriya Pravinkumar., Member, IEEE

1
Student, 2Faculty, Department of Electronics and Communication Engineering, School of Electrical and Electronics
Engineering, SASTRA Deemed University, Thanjavur –INDIA. 613401.
[email protected]

Abstract—Websites and Web apps have become increasingly because centralised markets risk compromising and selling user
crucial over the past decade to daily life. Over the last ten years, data. Consequently, a blockchain-based dApp that serves as a
websites have increased from three million to over 1.7 billion. conduit between intelligent agents, blockchains, and market-
Modern centralised digital marketplaces and enterprises provide related systems has been developed.
consumers with an alternative method of selling and purchasing
items conveniently. However, disadvantages among A peer-to-peer (P2P) network uses a completely replicated
the marketplaces include the platform’s potential to arbitrarily data structure called a blockchain, which consists of blocks
block merchants, the fees associated with listing and selling connected by hash references. Each block of the chain has a
products on the site, and the lack of user data privacy. In this, we “hash,” or a digital fingerprint, and holds a collection of
propose and demonstrate a decentralised application that takes transactions. Any modification to a block’s transactions also
advantage of the Ethereum blockchain to address all these issues. modifies the block’s hash, rendering the block invalid and all
The Truffle development framework was employed in the succeeding blocks in the chain useless. Additionally, the peer-
creation of the application. An Ethereum smart contract later to-peer network needs to run a consensus process each time a
migrated to the Ethereum network comprised the application’s new block is added to the chain. Whether a peer in the network
features. The web3.js API (Application Program Interface) was is permitted to add a new block to the chain or not is decided
used to send the user’s input to the Ethereum network after by this technique. All network peers are alerted, and the new
being received through a web interface. The users involved will block is broadcast to them if a new block is added to the chain.
be able to do transactions with the help of an interactive user
Considering this, it is said that Blockchain technology is
interface. The interfacing is done using the Truffle framework,
and the transactions are made through MetaMask, where ETH
impervious to tampering and censorship because no single
tokens are used. The dApp is created using JavaScript and React institution or centralised authority has the power to alter
JS library. Thus, the integration of the blockchain and with transaction history or forbid transactions from occurring. These
front-end application by interfacing it with web 3.0 helps create a characteristics of the Blockchain make it an extremely
secured, immutable, trusted, and easy-to-use e-commerce intriguing technology for various domains.
website. Decentralised applications have experienced significant
growth since blockchain platforms started utilising smart
Keywords-component; Blockchain; dAPP; ETH; web3; Truffle;
Meta mask
contracts. Through a GUI, dApps allow users to interact with
the blockchain in many ways, such as trading and transaction
of tokens. dApps are becoming increasingly well-liked in the
I. INTRODUCTION market. In June 2020, the yearly transaction volume of ETH
Blockchain, an intrinsic aspect of the era of Industry 4.0, is DeFidApps reached USD 5.7 billion, accounting for 97.5% of
crucially important for knowledge engineering applications. As the total volume of dApps on the Ethereum network [1]. A
an intelligent agent that offers privacy to sensitive data, decentralised application has smart contracts as its back end
blockchain is becoming more and more prominent across all and web pages as its front end. Testing dApps requires both
high-tech industries. Blockchain is employed as a platform to user behaviour on the front end and the logic of smart
create completely decentralised apps without a single point of contracts. dApp has embraced browser/blockchain architecture
failure and without hierarchical management of user data. This in place of the conventional browser/server design. It
has important benefits for data ownership, security, and incorporates back-end logic by linking smart contracts and
privacy, with the ability to significantly lower middleman putting all durable data in the blockchain. Nowadays, Solidity,
expenses. These innovations could have a big impact on the an object-oriented programming language for creating smart
world of online markets. Due to the expenses traditional contracts, is typically used to build the back end of dApps. The
marketplaces impose on their services, both customers and user interface of dApps is also built using front-end languages
sellers suffer. While offering users more control over their data like JavaScript. dApps also use Truffle to configure a testing
and information, a decentralised application on a blockchain environment and environment for development.
would lower the expenses associated with using the platform. Additionally, the application binary interface (ABI) is
Blockchain is an ideal platform to build such a marketplace typically used by smart contracts as a front-end interactive

979-8-3503-4821-7/23/$31.00 ©2023 IEEE

Authorized licensed use limited to: Lovely Professional University - Phagwara. Downloaded on October 16,2024 at 04:00:27 UTC from IEEE Xplore. Restrictions apply.
 2023 International Conference on Computer Communication and Informatics (ICCCI ), Jan. 23 – 25, 2023, Coimbatore, INDIA

protocol. ABI, as opposed to application programming framework. Ganache creates 10 default Ethereum addresses,
interface (API), enables unaltered execution of compiled object replete with private keys, and pre-funds, each one with 100
code in ABI-compatible systems. This paper outlines the imaginary Ethers. A tool for building a local, private Ethereum
general overview of the entire architecture and key features of blockchain for development is called Ganache. With Ganache,
the front-end integration of the Ethereum blockchain and smart users can “conduct tests, execute commands, and examine state
contracts for many applications currently in trend. while managing how the chain runs” according to Ganache’s
developers. For example, developers can evaluate the
II. BACK GROUND AND RELATED WORK functionality of smart contracts on a test network using
Ganache. It can also be used as a tool for analysis to aid
A. NODE PACKAGE MANAGER: comprehension and advancement.
NPM is a package manager for runtime environments that
use JavaScript. It has a huge registry with thousands of publicly E. METAMASK:
and privately funded packages. The registry can be accessed The MetaMask is a software cryptocurrency wallet used to
through the client, and the packages can be found on the NPM interact with the blockchain network. Users can access their
website. It also provides a command line interface through Ethereum wallet using a mobile app or browser extension to
which the packages can be directly installed with the help of connect with decentralised applications. Within a single user
the required commands. It hosts web applications on a local account, a user can have multiple wallet accounts. The majority
system, which helps prototype testing. of blockchains, NFTs, and all ERC-20 tokens are supported.
MetaMask functions as a bridge to enable web applications to
B. Node.js: communicate with the Ethereum network. MetaMask
is employed as a single sign-on solution to browse and
Setting up the requirements for creating smart contracts, communicate with other dApps and is a cryptocurrency wallet.
Node Package Manager is included with Node.js, which is the Users can stay anonymous when communicating or conducting
first dependency. JavaScript was used to create and use business with dApps using MetaMask because it does not
Node.js, an open-source server-side environment. Node has require the personal information to create an account.
transformed JavaScript code. This is because JavaScript was Developers can also connect to their local private blockchain
solely utilised on the client side. When Node did arrive, using MetaMask. By doing so, one can simulate the results in a
programmers could now create backend servers using secure test environment at no additional cost than transactions
JavaScript. For example, the front-end user interface of a dApp on the main Ethereum network.
should be implemented as a NodeJS application that
communicates with an Ethereum node operating locally on the
same server as the NodeJS application using the Web3 F. Web3.js:
JavaScript library. Because distinct apps do not have to trust A JavaScript framework called web3.js includes several
any specific remote Ethereum node, the NodeJS application’s libraries that let programmers communicate with the local
communication with a locally operating Ethereum node blockchain or the main Ethereum blockchain network. It can be
reduces centralisation. viewed as the binding agent between the local blockchain, the
Solidity smart contracts, and the React front end. This
C. TRUFFLE: simplifies validating deployed smart contracts in the local
blockchain, supported by Ganache, and smart contracts written
The Truffle Suite is a testing framework, asset pipeline, and in Solidity. Furthermore, developers can read and write
ecosystem for Web3 development that enables the creation of information from the blockchain more easily with web3.js.
smart contracts and decentralised applications. It enables Through JSON RPC, web3.js can communicate with the
contract deployment and compilation using the RPC client of blockchain. JavaScript Object Notation Remote procedure call
the user’s choice. Both network and package management are is known as JSON RPC. RPC is the software’s process of
supported. Using the Ethereum Virtual Machine, Truffle is a running remotely on a different computer or node. JSON RPC
development environment for creating and implementing smart can be used to send requests to a single Ethereum node. This
contracts for blockchains. As a result, rapid testing and protocol is comparable to interacting with a web server using
development are feasible. Developers can use the smart React and a JSON API.
contract by submitting the Solidity code that Truffle compiles
to the Ethereum network. A fresh compilation and deployment
are needed to implement modifications made to smart contracts G. REACT JS:
in a local blockchain environment like Ganache or other test React was utilised to construct the user interface connecting
networks. Redeploying a smart contract indicates that a brand- to smart contracts to develop the front-end for the dApp. React
new contract is put in the place of the network’s current smart is an open-source JavaScript library for the front end that
contract code. supports UI components. Every time React renders, it enables
updated data to be transmitted to the front-end and hot
D. GANACHE: reloaded. Development is best done with hot reloads because
changes are visible right away.
Ganache is a private blockchain enabling the efficient
implementation of Ethereum distributed applications. Ganache
is utilised throughout the development cycle, allowing users to
create, distribute, and test dApps in a secure and consistent

Authorized licensed use limited to: Lovely Professional University - Phagwara. Downloaded on October 16,2024 at 04:00:27 UTC from IEEE Xplore. Restrictions apply.
 2023 International Conference on Computer Communication and Informatics (ICCCI ), Jan. 23 – 25, 2023, Coimbatore, INDIA

Figure 1. Architecture diagram of the Framework

Figure 2. Interaction with the dApp

manage operations like log in or sign-up credentials, user

III. METHODOLOGY navigation through the menus, transactions, and other activities
A decentralised application shown in Fig 1.-an interactive transparently because they frequently entail complicated
user interface is developed to facilitate user interaction and message exchange across the platform’s components. It makes
information accessibility. Here, the user input data is stored use of component and data patterns which helps to make the
securely via the Blockchain. To enable P2P application and dApp more readable and maintainable. The options offered are
user information access, the interactive UI/UX closely clearly stated and written using basic grammar, making it
resembles an e-commerce website or business website, simple and convenient for participants to use, thus making it
according to the application. It is designed using React JS, a user-friendly. To further its efficacy, packages like web3.js is
JavaScript library and Bootstrap, a CSS framework. These imported and used. This decentralised application offers Web3.
front-end tech stacks include a variety of user-interactive and This has now been integrated with the backend, which heavily
user-responsive interfaces and packages. What browser users relies on the Truffle framework.
view is handled by the front-end component. It is, therefore By abstracting the numerous intricacies of Web3 and
responsible for managing all communications between users Ethereum during the development of blockchain apps, Truffle
and the backend blockchain platform. The Frontend should seeks to simplify it. This makes creating dApp programmes

Authorized licensed use limited to: Lovely Professional University - Phagwara. Downloaded on October 16,2024 at 04:00:27 UTC from IEEE Xplore. Restrictions apply.
 2023 International Conference on Computer Communication and Informatics (ICCCI ), Jan. 23 – 25, 2023, Coimbatore, INDIA

easier and more consistent and enables quick lightweight wallets, which always preserves the private key on the user’s
debugging and iteration. ‘Ganache’ is an Ethereum device, which is imported to connect the MetaMask
development tool that lets us emulate full client behaviour on transactions with the front end.
our PC by running a personal blockchain necessary to make
testing quicker and easier. It can process transactions far faster Since the Ethereum blockchain was chosen, it’s critical to
than public Ethereum test networks. Web3 provides an understand how it operates. The block time interval in
interface for executing transactions, generating contracts, and Ethereum lasts about 15 seconds, and each transaction that
seeking information about blockchain accounts between the modifies the state of the blockchain database should wait to be
application and the ganache provider. MetaMask acts as an mined. Accessing information from the blockchain can be
Ethereumcryptocurrency wallet for transactions. The immediate and cost-free action. Still, transactions that modify
Blockchain is integrated with Web 3.0 using the Truffle state imply a cost paid in gas, the Ethereum blockchain’s
framework. The Truffle suite enables front-end and back-end computation unit. An incentive for a transaction to be
interaction, which is crucial for building a full-stack accomplished is gas, a predetermined quantity of ether
decentralised application on the Ethereum network. With the delivered to the node performing the transaction that is
help of the truffle framework, a full-stack application with a proportionate to the computational difficulty of the
transaction[9].
blockchain backend is built. The client-side application is
connected to a single Ethereum node to access the Ethereum Due to this incentive scheme, contract creation time is
blockchain, and the Solidity-written smart contract drives the influenced by system load and contract complexity. The
backend. It generates a package with ready-to-use solidity number of concurrent transactions running throughout the
contracts, web3.js, and deployment scripts for the blockchain. entire system and the complexity of the application logic both
A cryptocurrency wallet for the Ethereum blockchain called influence transaction time. The app.js file contains the
MetaMask is used. It is a browser add-on that enables application logic. Since each operation has a predetermined gas
Ethereum transactions, as depicted in Fig 2. When an account cost, the total gas required to execute a transaction equals the
is created, MetaMask generates a wallet address; however, number of operations that must be performed for it to be
other wallet addresses can be imported if the private keys are completed.
accessible. Therefore, Ganache, a truffle suite component, The total cost of a transaction is defined as:
offers 10 free user accounts to assist in the deployment of the
testing network. Furthermore, the library, known as Ether.js, is Cost of Transaction = Gas Limit * Gas price
used to make it simpler to develop client-side JavaScript-based

Figure 3. System Integration Overview

Authorized licensed use limited to: Lovely Professional University - Phagwara. Downloaded on October 16,2024 at 04:00:27 UTC from IEEE Xplore. Restrictions apply.
 2023 International Conference on Computer Communication and Informatics (ICCCI ), Jan. 23 – 25, 2023, Coimbatore, INDIA

Any transaction has a parameter called “gas limit” that

specifies the maximum amount of gas the user is ready to
spend for that particular transaction. Gas price is the cost of gas
per unit, and this often affects how quickly a transaction is
included in the following block. Miners will then use these
criteria to choose which transactions to include in the following
block to maximise their transaction fee earnings. Since
Ganache is used to perform the simulation locally, the cost of
gas will be set at 2e10 Wei. Wei is the smallest possible unit of
Ether; one Wei is equal to 1e-18 Ether. Nevertheless, the cost
of a transaction to a contract depends on the code, the amount
of computing needed, and the size of the contract.

IV. RESULTS AND DISCUSSION Figure 6. Token balance in user 1 wallet after successful transaction

Developers can utilise “smart contracts” on Ethereum,

which are pieces of code that run when an event occurs. The
Ethereum web3.js API then interprets these events and uses
them to modify a website, as displayed in Fig 3. MetaMask is a
Chrome extension that can communicate with an Ethereum
wallet and enables users to interact with the Ethereum network.
Users can communicate with the app and buy or sell products if
they have a cryptocurrency wallet and the MetaMask plugin
installed on their browsers. This opens the prospect of
blockchain programming. Browsers will likely add more
features to support decentralised apps as they become more
prevalent, boosting their accessibility to the broader public Fig
4 -7.

Figure 7. Token balance in user 2 wallet after successful transaction

V. CONCLUSION
Although there isn’t a well-developed application for a
decentralised marketplace today, this domain will grow
significantly over the next two years as several firms are
already developing comparable solutions. It is currently
impossible to determine which decentralised marketplace will
experience widespread adoption first but building a rival dApp
on the potential Ethereum platform with a streamlined user
interface is promising both for the technological experience it
has gained and its propensity to thrive in a recently emerging
market. Furthermore, the Ethereum framework ensures the
confidentiality of user data by ensuring that no user can access
Figure 4. List of user addresses in Ganache Workspace
the data of another user.

ACKNOWLEDGEMENT
The work was conducted as a part of the grant financed by
the Science and Engineering Research Board (SERB),
Department of Science & Technology (DST), India
(EEQ/2019/000565) and for the infrastructural support
provided by FIRST TBI, SASTRA.

Figure 5. Transaction through MetaMask wallet

Authorized licensed use limited to: Lovely Professional University - Phagwara. Downloaded on October 16,2024 at 04:00:27 UTC from IEEE Xplore. Restrictions apply.
 2023 International Conference on Computer Communication and Informatics (ICCCI ), Jan. 23 – 25, 2023, Coimbatore, INDIA

REFERENCES [6] Moti, M. M. M. A., Uddin, R. S., Hai, M. A., Saleh, T. B., Alam, M. G.
R., Hassan, M. M., & Hassan, M. R. (2022). Blockchain Based Smart
[1] 2020 Q2 dApp Market Report https://www.dapp.com/article/q2-2020-
dapp-market-report [7] Grid Stackelberg Model for Electricity Trading and Price Forecasting
Using Reinforcement Learning. Applied Sciences, 12(10), 5144.
[2] Ranganthan, V. P., Dantu, R., Paul, A., Mears, P., & Morozov, K. (2018,
October). A decentralised marketplace application on the ethereum [8] SAI NIKHIL, A., ROHITH, V., & SOUGATH, B. (2022). Decentralised
Content Management Service Application Using Blockchain.
blockchain. In 2018 IEEE 4th International Conference on Collaboration
and Internet Computing (CIC) (pp. 90-97). IEEE. [9] Rupa, C., MidhunChakkarvarthy, D., Patan, R., Prakash, A. B., &
[3] Pustišek, M., & Kos, A. (2018). Approaches to front-end IoT application Pradeep, G. G. (2022). Knowledge engineering–based DApp using
development for the ethereum blockchain. Procedia Computer blockchain technology for protract medical certificates privacy. IET
Science, 129, 410-419. Communications.
[10] Devi T, Deepa N, Karthikeyan R, Bharath Sundararaman J , “Towards
[4] Thakurdesai, A., Nistor, M. S., Bein, D., Pickl, S., &Bein, W. (2022).
applying FCM with DBSCAN for Detecting DDoS Attack in Cloud
Single Sign-On (SSO) Fingerprint Authentication Using Blockchain.
Infrastructure to Improve Data Transmission Rate”, International Journal
In ITNG 2022 19th International Conference on Information
Technology-New Generations (pp. 195-202). Springer, Cham. Of Computer Communication And Informatics, volume-4, issue-1, 43-
54, 2022
[5] Song, Y., & Shen, Y. (2022). System design for online foreign language
education based on blockchain technology. Computational Intelligence
and Neuroscience, 2022.

Authorized licensed use limited to: Lovely Professional University - Phagwara. Downloaded on October 16,2024 at 04:00:27 UTC from IEEE Xplore. Restrictions apply.