This article is an EOS tutorial for any EOS developer who wants to build a fully workable dApp.
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 an EOS dApp on your own.
The minimal requirements for a full workable dApp, in our view, include the following components:
- Smart Contract
- Unit tests
- Deployment script
- Web framework
- Some design
- Services for interactions with the EOS blockchain
- Additional business logic
Our main focus on this EOS dApp 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
Smart contract component
Smart contract component includes
- Contract implementation
- Unit tests
- Deployment script
In the ./contracts folder, we have all the contracts we need for TodoManager dApp.
TodoManager contract includes functionality like
- Create a new Todo
- Move an existing Todo from state to state
- 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
In the ./tests folder, you have TodoManager contract unit tests.
They use eoslime library and mocha framework to test the contract’s behavior.
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 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.
./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.
Now, when you know how the flow happens we will dig deeper into the blockchain service
Let’s split the todo-manager.js file by functionality so it will be more readable
Welcome! We have one more developer onboarded on EOS.
You already have the structure, flow, and knowledge. You already know how to build a dApp on EOS. What is left is just to give it a try on your own, man, it’s easy just follow the EOS dApp tutorial steps. Come on, I want to see your great dApp!