EOS dApps Development – Beginners Tutorial

Overview

This article is an EOS tutorial for any developer who wants to build fully workable EOS dApps.

Our end goal is to get you familiar with the process that follows after smart contract implementation. To do that we will get a templated TodoManager dApp. We will walk you through it step-by-step and try to explain how you could build EOS dApps on your own.

The minimal requirements for a full workable dApp, in our view, include the following components:

1. Smart Contract

• Implementation
• Unit tests
• Deployment script

2. Web framework

• Some design
• Services for interactions with the EOS blockchain
• Additional business logic

Our main focus on this EOS dApps tutorial will be on the services used for interactions between the front-end and the EOS blockchain.

TodoManager React dApp

For our tutorial, we are going to use a prepared templated TodoManager dApp.
We need to get the code on our local computer to start exploring it. To do that we will install eoslime.

eoslime is a development and testing framework with a good CLI support for EOS development.

The above command will fetch for you a ready to use TodoManager dApp.

Note: You need to have a running blockchain for playing with the EOS dApp and for running contract unit tests

Nodeos will create some folders and files it will use to keep blockchain state in the directory you are starting it

• config
• data
• nodeos.log

Smart contract component

Smart contract component includes

• Contract implementation
• Unit tests
• Deployment script

Contract implementation

In the ./contracts folder, we have all the contracts we need for TodoManager dApp.
TodoManager contract includes functionality like

1. Create a new Todo
2. Move an existing Todo from state to state
3. Remove an existing Todo

The code covers the basic operations you will use in most of the development of your contract.

Compile the contract to be ready for testing and deployment

Unit tests

In the ./tests folder, you have TodoManager contract unit tests.
They use eoslime library and mocha framework to test the contract’s behavior.

Deployment script

Before we start the dApp we need to deploy the TodoManager contract.

Deployment script will do several things

• Will create 2 random blockchain accounts. The first one will be used to broadcast transactions to the contract. The second one will be the account the contract will be deployed on
• Will deploy contract code on contract account
• Will create a .config file with accounts data which will be used in the front-end later on

Web component

Web component includes all front-end parts TodoManager dApp needs.
The main code and actually what we are going to explore is located in ./web/src/components folder.
There are 2 components – todos and messages. The second one is used for handling errors/infos pop-ups. It is not a big deal.

dApp Flow

./renders folder contains all the logic for front-end visualization.

./services folder contains all the logic for interactions between the front-end and the EOS blockchain. There is also some additional business logic on top of the contract’s one.

./index.js is used to connect front-end visualization**(renders)** with the blockchain**(services).** So for example, if you click “Add new Todo” button in the visualization, it will trigger a transaction to be broadcasted to the contract in the blockchain

Let’s see how the flow works exactly. To explain to you that easily I will simplify 3 kinds of files so we could get a better idea of the picture above.

Render

Connector

Blockchain service

Now, when you know how the flow happens we will dig deeper into the blockchain service

Blockchain service

Let’s split the todo-manager.js file by functionality so it will be more readable

• Constructor
• addTodo
• moveTodo
• removeTodo

Constructor

addTodo

moveTodo

removeTodo

Conclusion

Welcome! We have one more developer onboarded on EOS.
You already have the structure, flow, and knowledge. You already know how to build EOS dApps. What is left is just to give it a try on your own, man, it’s easy just follow the EOS dApps tutorial steps. Come on, I want to see your great dApp!

If you need help, with EOS dApp development, we’ll be happy to help. Tell us more about your dApp at hi@limechain.tech