REPORT
Team member
• Boricha Tarun - 201901080
• Makwana Vivek - 201901087
• Prajapati Kapil - 201901109
• Shubh Jhawar – 201901204
How we built a To-Do List Web Application
Using Blockchain Technology
Here, we'll create a to-do list application that will save data to the
blockchain. This application's blockchain component can alternatively
be viewed as a database. We'll start with a smart contract and then
move on to the web application. Bloc will be the name of the
programme, but first, let's go over the components.
Bloc Application Components
• A local Ethereum blockchain called Ganache.
• Web3 JS is required for the application to interface with the
blockchain.
• For the application's front-end, use Bootstrap.
• Solidity is a smart contract compilation platform.
• JQuery is a DOM manipulation library.
So, what exactly is a smart contract?
We'll need to develop a smart contract to communicate with
blockchain. A smart contract is also known as a backend software that
communicates with the blockchain. Our to-do list chores will be
stored in the blockchain thanks to the smart contract.
The REMIX IDE will be used to write and build the smart contract.
Make sure you're using the Http site rather than the Https site. Our
smart contract will be deployed in our local blockchain using the Http
site.
To make a bloc.sol file, click the + symbol.
To create our smart contract, the first line must declare the solidity
version. To do so, we'll write the following-
pragma solidity ^0.5.1;
We'll use a contract block to tell the compiler about our smart
contract. A contract is similar to an OOP class in that it contains all of
the fields and methods:
pragma solidity ^0.5.1;
contract Bloc{
}
We must complete the following to save the task:
1. Create a struct for your task: A struct is a datatype that can be
created by the user. It will have a task that is a string and a boolean
that indicates whether or not the task has been performed.
pragma solidity ^0.5.1;
contract Bloc{ struct Task{ string task; bool isDone; } }
2. Make a mapping to associate our task array with a user address:
Mapping is similar to a Hash Table in that the key is an address and
the value is an array of task structs. For the access modifier, make this
mapping private. The address is a solidity data type that emphasises
the account address.
pragma solidity ^0.5.1;
contract Bloc{
struct Task{
string task;
bool isDone;
}
mapping (address => Task[]) private Users;
}
Methods to alter our contract task:
1. Task Creation: This method creates a task.
• A string is passed as an argument to the addTask function.
• The data location for the string parameter is set by calldata.
• When using web3js, external makes the function available, and
msg.sender provides us the address of the user calling the
method.
• To add the job to the mapping, use the push method.
2. Read Task: This method aids in reading the task's value.
• Line 2 is required to return Task struct from the getTask
function.
• The task index is passed to the getTask function, which returns
the task.
• The data location for Task to be returned is memory.
• The view indicates that the function does not change the state of
the blockchain.
3. Update Task: This method updates the Task's values.
• This method toggles the task's status between checked and
unchecked.
• The task index and the status to update will be passed to the
updateStatus method.
• We'll be able to access the task struct thanks to the taskIndex, so
we'll set the isDone to the status passed.
4. Delete Task: Just like in C, the deleteTask method takes the task
index and deletes the element from the array.
5. Get Task Count: The task array length can be used to retrieve the
task count.
After adding all of the above methods to deal with a task, the whole
solidity programme looks like this: programme link is provided,
Under the Solidity left navigation bar option, click the Compile
button.
In their deploy, click Deploy and Run Transaction, and all the
methods will appear inside the deployed contract.
We've completed the creation of a simple smart contract. This smart
contract will be used to communicate with a web application in the
future article. Now we'll build a web application that communicates
with the smart contract we developed before.
We'll need the Ethereum blockchain, which will contain the smart
contract and data for our web application, before we can start creating
it. We'll go ahead and download and install it using Ganache.
After that, open Ganache and click on quick start Ethereum, then take
note of the RPC Server address (it should be something like
http://127.0.0.1:7545).
config.js
• Make sure you have the bloc.sol file from the last step in
Remix IDE (Make sure to sure HTTP site, not https).
• Click the compile bloc.sol button in the left panel of the
Solidity compiler. You'll see a button with a copy icon
and the text ABI if you scroll down. Line 1 of js/config.js
should have it.
let contractABI = COPIED TEXT;
The copied text will be enclosed in [].
• Select Web3 Provider from the environment drop-down menu
when deploying and running transactions.
• Copy and paste the address you copied from Ganache, then click
OK.
• A deploy button will now appear; click it.
• The Deployed Contracts label will now include a copy icon
button. Click on it.
• And then paste line 2 into js/config.js.
app.js
The application is now fully functional.
THANK YOU!
