Build a To-do List Web Application Powered by Blockchain

Here, we are going to build a to-do list application that will save the data in the blockchain. The blockchain part of this application can also be understood as a database. First, we'll create a smart contract and subsequently the web application itself. We'll use Bloc as the application name but first, let's look at the components.

Components in Bloc Application

• Ganache- A local Ethereum blockchain.
• Web3 JS- For the application to be able to communicate to the blockchain.
• Bootstrap- For the application's front end.
• Solidity- For compilation smart contract.
• JQuery- For DOM manipulation.

What is a Smart Contract?

To be able to communicate with blockchain we'll need to write a smart contract. A smart contract can also use understood as a backend script that contacts the blockchain. The smart contract will allow us to store our to-do list tasks in the blockchain.

To write and develop the smart contract we will use the REMIX IDE. 

Note: Make sure you are using the Http site instead of HTTPS. The HTTP site will allow us to deploy our smart contract in our local blockchain.

Click on the plus icon to create a bloc.sol file.

👁 Create .sol file

The smart contract first line must declare the SPDX-License-Identifier and solidity version to compile our smart contract to do that we'll write the following:

// SPDX-License-Identifier: GPL-3.0 
pragma solidity >=0.8.0 <0.9.0; 

To tell the compiler about our smart contract we'll define a contract block.  A contract like a class in OOPs which contains all the fields and methods:

// SPDX-License-Identifier: GPL-3.0 
pragma solidity >=0.8.0 <0.9.0; 
contract Bloc{
} 

To store the task we need to do the following:

1. Create a struct for your task: Struct allows for creating a user-defined datatype. It will have a string as a task and a boolean to tell whether the task is completed or not.

// SPDX-License-Identifier: GPL-3.0 
pragma solidity >=0.8.0 <0.9.0; 
contract Bloc{
 struct Task{
 string task;
 bool isDone;
 } 
} 

2. Create a mapping to store our task array with an associated user address: Mapping is like a Hash Table here we are creating an address as a key and the value will be an array of task struct. Set this mapping as private for the access modifier. The address is a data type in solidity which stress the account address.

// SPDX-License-Identifier: GPL-3.0 
pragma solidity >=0.8.0 <0.9.0; 
 contract Bloc{ 
 struct Task{
 string task;
 bool isDone;
 }
 mapping (address => Task[]) private Users;
}

Methods to manipulate our task in the contract:

1. Create Task: This method will create a task.

• The addTask method takes in a string as an argument.
• calldata set the data location for the string argument.
• external makes the method available when called through web3js.
• msg.sender gives us the address of the user calling the method.
• The push method to add the task to the mapping.

// SPDX-License-Identifier: GPL-3.0 
pragma solidity >=0.8.0 <0.9.0;
/// @title A contract for demonstrate how to build a to-do list application
/// @notice For now, this contract just show how to add the task 
contract Bloc{ 
 struct Task{
 string task;
 bool isDone;
 }
 
 mapping (address => Task[]) private Users;
 
 function addTask(string calldata _task) external{
 Users[msg.sender].push(Task({
 task:_task,
 isDone:false
 }));
 } 
}

2. Read Task: This method helps to read the value in the task.

• To return Task struct from getTask method we need to add line 2.
• The getTask method takes in the task index and gives the task.
• memory is the data location for Task to be returned.
• view tells that the  function doesn't modifier state of the blockchain.

// SPDX-License-Identifier: GPL-3.0 
pragma solidity >=0.8.0 <0.9.0;
/// @title A contract for demonstrate how to build a to-do list application
/// @notice For now, this contract just show how to get the task
contract Bloc{ 
 struct Task{
 string task;
 bool isDone;
 }
 
 mapping (address => Task[]) private Users;
 
 function addTask(string calldata _task) external{
 Users[msg.sender].push(Task({
 task:_task,
 isDone:false
 }));
 }
 
 function getTask(uint _taskIndex) external view returns (Task memory){
 Task storage task = Users[msg.sender][_taskIndex];
 return task;
 } 
}

3. Update Task: This method will update the values in the Task.

• This method sets the task to be checked or unchecked.
• The updateStatus method will take task index and the status to update.
• By the taskIndex we will be able to access the task struct so we'll set the isDone to the status passed.

// SPDX-License-Identifier: GPL-3.0 
pragma solidity >=0.8.0 <0.9.0; 
/// @title A contract for demonstrate how to build a to-do list application
/// @notice For now, this contract just show how to update the task 
contract Bloc{ 
 struct Task{
 string task;
 bool isDone;
 }
 
 mapping (address => Task[]) private Users;
 
 function addTask(string calldata _task) external{
 Users[msg.sender].push(Task({
 task:_task,
 isDone:false
 }));
 }
 
 function getTask(uint _taskIndex) external view returns (Task memory){
 Task storage task = Users[msg.sender][_taskIndex];
 return task;
 }
 
 function updateStatus(uint256 _taskIndex,bool _status) external{
 Users[msg.sender][_taskIndex].isDone = _status;
 } 
}

4. Delete Task: deleteTask method will take the task index and then delete the element from the array just like in C.

// SPDX-License-Identifier: GPL-3.0 
pragma solidity >=0.8.0 <0.9.0; 
/// @title A contract for demonstrate how to build a to-do list application
/// @notice For now, this contract just show how to delete the task 
contract Bloc{ 
 struct Task{
 string task;
 bool isDone;
 }
 
 mapping (address => Task[]) private Users;
 
 function addTask(string calldata _task) external{
 Users[msg.sender].push(Task({
 task:_task,
 isDone:false
 }));
 }
 
 function getTask(uint _taskIndex) external view returns (Task memory){
 Task storage task = Users[msg.sender][_taskIndex];
 return task;
 }
 
 function updateStatus(uint256 _taskIndex,bool _status) external{
 Users[msg.sender][_taskIndex].isDone = _status;
 }
 
 function deleteTask(uint256 _taskIndex) external{
 delete Users[msg.sender][_taskIndex];
 } 
}

5. Get Task Count: The count of tasks can be retrieved as the task array length.

And the complete solidity program after adding all the above methods to deal with a task looks like this:

 
 
Click on the Compile button under the Solidity left navigation bar option after that Click on Deploy and Run Transaction in their deploy and inside the deployed contract you can find all the methods.

👁 Deploy contract

• With this, we are done creating a basic smart contract. This smart contract we will be using in the next article to communicate with a web application. Now, we'll create a web application that can communicate with the smart contract that we have created above.
• Before we start building the web application we'll need the Ethereum blockchain which will have the smart contract and the data of our application. We are going to use Ganache to go ahead download and install it.
• After installation, open Ganache and click on quick start Ethereum after that note the address labeled under RPC Server (should be something like this http://127.0.0.1:7545).

Now building the web application

 
 The webpage will look like this-

 

👁 Image

getAccount.js

config.js

• Go to Remix IDE and make sure you have the bloc.sol from the previous tutorial (Make sure to sure HTTP site, not https).
• Go to the solidity compiler located in the left panel and click on compile bloc.sol. Down you'll find a button with copy icon and text as ABI click on it. Paste it in js/config.js line 1.

let contractABI = COPIED TEXT;
The copied text will be enclosed in [].

• Go to deploy and run transactions under environment select Web3 Provider.
• Enter the address you copied from Ganache and paste it click on OK.
• Now a deploy button will be visible click on it.
• Down you'll find Deployed Contracts label now there will a copy icon button click on it.
• And paste in js/config.js line 2.

let contractAddress = 'COPIED text';
The copied text might look like this 0xF3017acEDd45526aC6153FBBCfcA8096173D245a.
The contractABI helps the web3js with our smart contract
The contractAddress tells the web3js about where on blockchain is our smart contract

app.js

Now the application is fully working.

👁 Image