Developing Ethereum DApps with Truffle

What Is the Truffle Suite?

Truffle Suite is a DApp development ecosystem that is divided into three sections. Truffle, Ganache, and Drizzle are the three components. This is a well-known ecosystem that a large number of developers rely on. Furthermore, the purpose of Truffle Suite is to make the development process more approachable. 

Let's take a closer look at the components of the Truffle Suite:

• Truffle — Truffle is a development environment that runs on top of the Ethereum Virtual Machine (EVM). Truffle's slogan is "Smart Contracts Made Sweeter," implying that the ecosystem focuses on smart contract development. This environment has a variety of useful features that benefit DApp developers greatly.
• Ganache — Ganache is a tool for creating your own private Ethereum blockchain, which you may use to build and test smart contracts and decentralized applications (DApps) before releasing them on a public chain. As a result, Ganache allows developers to save money on gas during the development process.
• Drizzle — Drizzle is a set of frontend libraries built around a Redux store. Frontend development may become much more predictable and manageable using Drizzle.

The above explanations were an overview of each tool. So, let's take a closer look at the Truffle Suite ecosystem and see what we can accomplish with each tool and what features they have. 

Now, let's get started with the features of Truffle.

What Are the Features of Truffle?

Truffle has a variety of features:

Automated Contract Testing

Truffle also offers automated contract testing, which is a really useful tool. This means you can use your programming skills to bring your contracts into the twenty-first century and create automated testing for them. The biggest advantage is, you can speed up the smart contract development process if you find the need to.

Smart Contract Management

Truffle helps manage the artifacts of all smart contracts used in your DApps, which is known as smart contract management. You can concentrate on other aspects of the development process while Truffle handles this for you. Moreover, Truffle supports library linking, custom deployments, and more complicated Ethereum DApps.

Immersive Console

You might already know that Truffle has an interactive console that allows you to access all of the Truffle commands and contracts you've created.

Scriptable Deployment

Truffle allows you to design deployment scripts that account for the fact that your DApps will evolve. This implies you'll be able to keep your smart contracts up to date for a long time.

Network Management

Truffle assists you in taking care of your network by managing your artifacts, allowing you to focus on other responsibilities.

What Is MetaMask?

MetaMask is a compact cryptocurrency wallet. Developers can use MetaMask to test and analyze DApp transactions. MetaMask connects to a developer's machine's local blockchain with ease. Simply copy your localhost port from your Truffle console and put it into the browser extension's custom RPC. Truffle accounts may then be readily imported into MetaMask.

MetaMask is a popular and strong enhancement to the Ethereum ecosystem. Switching between blockchains is simple for developers. When a user browses a DApp, MetaMask acts as a blockchain mediator. MetaMask's graphical user interface is therefore very user-friendly. It easily links a user to the blockchain. A user is prompted by MetaMask to approve a transaction. This transaction can be as simple as a fee paid in cryptocurrency by a user to interact with the blockchain.

How to Install Truffle Ethereum?

As we discussed earlier, it is not that difficult to install Truffle Ethereum.

To begin, open your command prompt and then type these three commands below:

1. npm install -g truffle
2. truffle init
3. truffle unbox Jcoin

The first command creates the TruffleFolder directory. The second command makes our new folder the working directory. On executing the third command, a Truffle box will be used to develop a project. 

On the official website, you may find a variety of Truffle boxes. They provide boilerplate code as well as all of the essential configurations for quickly constructing and launching projects. 

Truffle is now ready to go. We can see three more folders inside our TruffleFolder, namely Contracts, Migrations, and Tests. Before diving into the details of these folders, it's worth reviewing the Truffle project's structure.

The Structure of a Truffle Project

After you execute the above-provided commands, the structure of the Truffle folder will look something like this:

contracts

• ConvertLib.sol
• Jcoin.sol
• Migrations.sol

migrations

• initial_migration.js
• deploy_contracts.js

test

• TestJcoin.sol
• Jcoin.js

truffle-config.js

•  truffle.js

So, this was the structure of a Truffle project. Now, let’s discuss in-depth the folders in the Truffle project.

Contracts Folder 

All the smart contracts are stored in the contracts folder. As we can see that the file names finish in.sol extension, indicating that they are Solidity smart contracts. Solidity is the name of the programming language that aids in the creation of smart contracts, as previously mentioned.

Migrations Folder

Migrations can change the status of DApps. As a result, the migration.sol file is useful for keeping track of these changes. Smart contracts can be migrated to the blockchain with the help of migrations. The "truffle migrate" command can be used to do migrations. This command can also transfer smart contracts to a blockchain called Ganache, which is a pseudo-Ethereum.

Test Folder

We can test our smart contracts after compiling and migrating them. The files to be tested are kept in the test folder. It's as easy as entering the Truffle test command to run a test. Truffle currently only supports the following file types: js,.ts,.es,.es6.jsx, and.sol.

If you develop your tests in Solidity, you must use the Solidity import directive to import the Smart Contracts into the tests, as seen below:

import “../contracts/Jcoin.sol”;

If you're developing tests in JavaScript, you'll need to use the artifacts to import them.

For example, require() helper function is utilized like this:

artifacts.require("/Jcoin.sol"); var Jcoin = artifacts.require("/Jcoin.sol");

Configuration File

The default configuration file is Truffle-config.js. You can use this file to configure your Truffle project. It comes pre-installed with several standard network configurations and functions including migrations, compilation, and testing. Uncomment the ones you require or change them as needed to fit your project.

Installing MetaMask on Google Chrome

Following are the steps to install the MetaMask browser plugin:

1. Go to the official site of MetaMask.
2. Click on the “GET CHROME EXTENSION” button. It will open a new tab.
3. Now, click on the “Add to Chrome” button, and after that click on “Add Extension“.
4. On the Top-right corner of your browser, you will be able to see the MetaMask icon. 
5. Accept the Terms and Conditions. 

After following these steps, the MetaMask wallet will be successfully installed on your Google Chrome browser.

Building an Ethereum DApp

Let's get started with the tutorial now that you've learned about Ethereum DApps.

We are going to utilize the Truffle Framework, which comes with a set of tools and boilerplate code for building Ethereum DApps. Let's go through some major points before we get started.

Is there a user interface for the DApp? 

Ethereum DApps generally have a user interface (UI) component, such as a web or mobile app, because they are frequently used by people to interact with smart contracts or the Ethereum network. If your DApp is meant to be used on a browser, you'll create your user interface with Javascript, much like a traditional Single Page App. We'll choose React because it's one of the most popular SPA frameworks.

Truffle provides truffle-react, a boilerplate (called boxes) developed from the create-react-app boilerplate code generator.

Do you have a Smart Contract in mind? 

The smart contracts are the pieces that run within the Ethereum virtual machine and determine the rules and transitions for your DApp. Avoid including irrelevant logic in your Smart Contracts, as the gas required to conduct the computation might be quite costly. We'll start with SimpleStorage, a simple smart contract from the truffle. It has a setter and getter that stores an unsigned integer storedData.

How about the testing environment? 

As any written transaction on an Ethereum contract costs gas, a test network is required to avoid this. Truffle Framework provides a local test environment, whereas Ethereum provides official test networks.

After you sort out these things, it is now time to get started with building a simple Ethereum DApp.

Step-By-Step Instructions of Building an Ethereum DAPP

1. Install Truffle Framework

npm install -g truffle npm 

The -g parameter is used here so that we can continue to use the framework in subsequent projects.

2. Produce boilerplate code

truffle unbox react

Boilerplate boxes are referred to as boilerplates in many frameworks. The react boilerplate is inspired by Facebook's create-react-app boilerplate. This should result in a collection of files and directories.

There are only a few folders to keep an eye on.

• The react code is kept in the src/ subdirectory.
• The smart contracts built in Solidity are saved in the contracts/ subdirectory. Take note of the SimpleStorage.sol file from earlier.
• migrations/ are scripts that help in contract deployment on the Ethereum network.
• The index.html file in the public/ directory is where the react app is inserted.

3. Begin Creating the Development Environment

truffles sprout

This is the beginning of two things. To begin, open the Ethereum Node emulator at http://127.0.0.1:9545 and establish 10 test accounts with 100 ether each. The truffle command line prompt is then launched.

4. Gather the Contracts

At the command prompt for truffle development, type:

compile

This will convert your Solidity contracts to JSON artifacts, which will include the Ethereum Virtual Machine (=EVM) bytecode. The compiled contracts can be found in the build/contracts folder.

5. Deploy the Contracts

At the command prompt for truffle development, type:

migrate

The contracts will be deployed to the simulated Ethereum network as a result of this. (Note that by altering the truffle-config.js file, you can subsequently deploy to a real Ethereum network.)

You can now include interactive elements in the DApp, such as editing the App.js file.

6. Start the DApp Program.

You may now use your browser to launch the DApp:

start npm run

However, it has very little connection with Ethereum yet. As a result, we'll include some here.

First and foremost, we must establish a connection to an Ethereum network by grabbing a hold of the Web3 object and selecting a provider.

7. Change the DApp Code

In the React componentWillMount() life cycle method in App.js, we receive a reference to the web3 object and save it in the local state. A local version of the contract is also created.

That's all there is to our simple DApp.The set method of the simpleStorage contract is triggered by simpleStorageInstance.set.

Check out Truffle's contract library, which is a wrapper for Web3js, for more information on how this works.

8. Use Our Simple DApp to Test It Out.

start npm run

You should be able to set a smart contract's storageValue, which will then be stored on the Ethereum blockchain.

Decipher the global craze surrounding Blockchain, Bitcoin and cryptocurrencies with the Blockchain Certification. Check out the course preview now!

Conclusion

So, this is how you can use the Truffle framework to create and test Ethereum DApps. DApps are just one of the Ethereum Network's many features. Thanks to decentralized blockchain technology, Ethereum has a lot more to offer. 

Simplilearn can assist you in learning everything there is to know about blockchain. Check out Simplilearn’s Blockchain Certification training by IIT Kanpur if you want to learn how to create smart contracts and DApps and pursue a career in blockchain.