develop

Build Your First Blockchain App Using Ethereum Smart Contracts and Solidity



Sharing buttons:

everybody this is Gregory from DAP

university so today I'm gonna show you

how to write your first blockchain

application I'll show you how to create

a to-do list that's powered by aetherium

smart contracts I'll show you how to

create your first

etherium smart contract with a solidity

programming language or like tests

against the smart contract deploy it to

a blockchain it will also create a

client-side application for the to-do

list so if you're new around here be

sure to subscribe to this channel and

click the like button down below and

also you can download my courses for

free on my website over at dap

university comm forward slash free

download i've got a link to that down in

the description below and also on my

website you can find a full length

article to accompany this video you can

actually follow that step-by-step as

you're following this tutorial and i've

also got a link to that in the video

description so before we start actually

building the application let's get a

high-level overview of how a blockchain

application powered by smart contracts

actually works so how does a blockchain

work and how does a blockchain

application work well I've chosen a to

do list for this tutorial because that's

a really common way to learn any new

technology and I want to use that to

show you how a blockchain application

works so first let's look at how it to

do this would work as a web application

and then I'll show you how it work as a

blockchain application so I'll put my

whiteboard up here to demonstrate so

normally whenever you access a web

application like a to do list for

example you use a web browser and you

connect to a web server over the

Internet and you access you know all the

code and all the data from this web

server so like this you basically

connect from your web browser to the

server and on the server it contains all

the you know client-side files like HTML

CSS and JavaScript it you know contains

all of the backend code for the server

right and the business logic you might

write and any data that's stored your

application is stored in a database

right and pretty much any other to-do

list tutorial that's out there is gonna

show you how to write you know

client-side application and HTML and CSS

and JavaScript and then it's gonna show

you how to basically do some business

logic on a web back-end that you know

creates reads rights updates to do

and it puts them inside of a database

like this right and all that's you know

on a central server and that's how you

build a to-do list on a web application

so how would you build it to-do list on

a blockchain well it would work a little

bit differently so instead of connecting

directly to a server you know we're

going to access our to-do list via a

browser and we're gonna you know connect

to a client-side application that we

will build and this will just be a

simple client-side application on a web

server but this client-side application

isn't gonna talk to a web back-end in a

database instead it's gonna actually

talk directly to the blockchain and on

the blockchain we're gonna have code

that's gonna be written with etherium

smart contracts that will contain all of

the business logic for our to-do list

and all the to-do items are gonna be

stored on the blockchain itself and

that's fundamentally how a blockchain

application would work and how it's

different from a traditional web

application

so that might bring up a lot of

questions like well how do we connect to

a blockchain and how does the blockchain

work what even is a blockchain

well I'll pause here and tell you a

little bit more about that

so what even is a blockchain right our

client-side application is actually

talking to a blockchain right here so

it's actually a separate network okay

and a blockchain is a peer-to-peer

network of nodes that all talk to one

another it's a distributed network so

there's actually different computers or

machines that talk to one another and we

can connect to an individual node on the

blockchain in order to use it that's

what our web applications doing here so

all of the nodes on the network

participate in running the network they

all contain a copy of the code on the

blockchain and all of the data on the

blockchain and all of the data on the

blockchain is contained in bundles of

Records called blocks which are chained

together to make up the blockchain and

all the nodes on the network also

participate in ensuring that the data on

the blockchain the public ledger is

secure and unchangeable and that's what

makes the blockchain so powerful and so

what about the code on the blockchain

well all the code on the blockchain is

contained in smart contracts so smart

contracts are basically just programs

that run on the blockchain and they're

gonna be the building blocks of

blockchain applications and that's it

we're gonna build our to-do list out of

we're gonna write a smart contract that

will contain all the tasks in the to-do

list and allow us you know add new ones

and complete them and things like that

so smart contracts are written in a

programming language called solidity and

all the code and the smart contract is

immutable which that means it's

unchangeable whenever we deployed to the

blockchain we won't be able to update

that code and that's important

understand because that's what makes the

blockchain so secure whenever we put

code in the blockchain we know we can

trust it at that point it's called trust

list for a reason whenever it's on the

blockchain we know that no one will

change it and therefore we know that

to-do lists will behave the same way

every time and sometimes I actually

think about smart contracts kind of like

micro services on the web

they're on the blockchain and they read

and write data from the blockchain and

they do stuff with it you know they

execute business logic all right now go

back to the drawing board and kind of

give you a refresher about how our

applications gonna work again we're

gonna connect to the application with a

web browser and we're gonna build a

client-side application in HTML CSS and

JavaScript and that client-side

application is going to talk directly to

the blockchain and that's we're gonna

put our smart contract will create the

to-do list with an aetherium smart

contract written in solidity and we'll

compile it and deploy it to the

blockchain it will also connect to the

blockchain network with our personal

account with an etherium wallet in our

browser and I'll show you how to get

that set up in this tutorial as well so

now we've seen how a blockchain works

and now we can build our to-do list

application on the blockchain so let's

jump in and start programming here's a

preview of the application that will

develop in this tutorial this will be a

to-do list powered by an aetherium smart

contract where we'll be able to add new

to-do items and we'll be able to check

items off of the to-do list and before

you get started you need to make sure

you have no js' already installed in a

computer you can see if you have node

installed by going into your terminal

and typing node - V you can install node

with a package manager like homebrew or

you can download it directly from the

node.js website the first item in the

blockchain developer toolkit is a

personal blockchain we're going to use

ganache as our personal blockchain for

this tutorial you can head over to

truffle Framework com4 slash ganache to

download it you can click this download

link and whenever you've downloaded it

makes you install it and when you open

it you've got a local blockchain running

so what is ganache you know what is a

personal blockchain well a personal

blockchain is like a real blockchain

Network

you know that's connected to the public

where anyone can connect to it but it

runs on our computer it's you know a

closed Network and ganache basically you

know as a process that runs on a

computer that spins up this blockchain

and runs on a server so we can use this

to develop smart contracts we can run

tests against it we can run scripts

against the network develop applications

and actually talk to this blockchain

it's really helpful it's an invaluable

tool and the blockchain developer

toolkit so if you open ganach you'll see

you know ten accounts listed here these

are the

addresses to each account on the side

and you'll see you know these balances

you'll see a hundred ether and this is

the etherium cryptocurrency that each

account has and it's you know required

to you know pay gas fees and the network

and stuff like that all right so that's

an overview of the ganache personal

blockchain network and we're gonna leave

ganache here set up in our project

because we're going to need it running

in order to develop our project the next

dependency is the truffle Framework

we're going to use the truffle framework

to develop aetherium smart contracts

with the solidity programming language

you can install truffle by going to your

terminal and typing npm install - gee

truffle at 5.0 - and it's important that

you use this exact version in order to

follow along with this tutorial

so truffle is a suite of tools that

allows us to you know develop smart

contracts write tests against smart

contracts deploy smart contracts to the

blockchain it gives us development

console and that also allows us to

develop client-side applications inside

of our project so it does a lot and I'm

going to show off all those features in

this tutorial the next dependency is the

meta mask extension for google chrome

remember that the etherium blockchain is

a network and we need a special browser

extension in order to connect to that

Network and that's where meta mask comes

into play metal mask will allow us to

connect to the blockchain with our

personal account and actually interact

with the smart contract that will

develop in this tutorial you can install

meta mask by going to the Google Chrome

Web Store and searching for meta mask

and clicking install and once you've

installed it just make sure that you

enable it inside of your chrome

extensions like this you can also see

the little fox icon and your extensions

tab

now let's create the project I'll start

by creating a directory for our project

like this

ETH just stands for aetherium so I'll

enter into that newly created directory

and now once we're inside of here we'll

actually create a new truffle project

but before we do that I just want to

make sure that you're using the correct

truffle version you can check your

truffle version like this truffle

version and you want to ensure that your

version is the same as mine which is

5.0.2 so it's not go ahead and check out

the dependencies section this video to

see how to install the specific version

of truffle so now we'll initialize new

truffle project like this will just say

truffle and knit alright and now we've

successfully unboxed in your travele

project and now I'm going to actually

create a package.json file in order to

you know pull in some development

dependencies for the project so I'll say

touch package.json alright and now I'm

going to open this project inside of

sublime text that's the text editor I'm

using so let's go to the package.json

file we can actually see the project

directory over here and we can see the

newly created package JSON file and it's

empty I'm going to paste in the contents

of this file that we'll use for this

tutorial and you can actually get this

package that JSON file by cloning this

repository on the github link in the

description down below alright so here's

the dependencies for the project just go

ahead and say this like I said I just

pasted these in here and you can see we

have a few dependencies like the

bootstrap framework we'll use this for

building out the client-side application

we've got some dependencies for testing

the smart contracts a server for running

the client-side application and you know

some other truffle specific development

dependencies and I've locked these

versions so that you can keep following

this tutorial in the future so make sure

that all these versions match what I

have here so now I'm actually going to

install the dependencies for the project

like this so just say npm install all

right so now they're installed now let's

go back into our project and actually

create the smart contract file that

we'll use to build the to-do list we'll

do that by going to the contracts

directory and you can see there's a

smart contract that exists inside of

here this is actually a smart contract

that comes bundled with truffle that

manages migrations to the net

and I'll explain that here a little bit

and now I'll create a new file inside

this directory called to-do lists that's

sole so we can see that do list is

capitalized to-do lists and it's in the

same project directory here so now let's

actually create the smart contract that

will manage the to-do list for the

application the first thing we want to

do inside this file is actually declare

their version of the solidity

programming language that we want to use

we'll do that like this will say pragma

solidity we use a carrot I must say

version 0.5 0 and we'll end this line

with a semicolon alright now the next

thing we do is actually declare the

smart contract do that with the contract

keyword is a contract and we want to

call this contract to do list does the

say name is the file say to do list and

we followed that with some opening and

closing curly braces and inside of here

is we're actually write all of the code

for the smart contract now go ahead and

bump the font up so you all can see this

a little better so the first thing that

we'll do inside of here is just keep

track of a number of tasks that are in

the to-do list and we'll store this

value inside the smart contract as a way

to kind of get started and just make

sure that everything is set up properly

in our project we'll deploy this simple

smart contract to the blockchain and

actually see if we can connect to it

before we you know do anything any more

complicated than that

so first we'll keep track of the number

of to-do lists inside of the smart

contract with the variable and it'll be

a special kind of variable in solidity

called a state variable and we can

declare a state variable like this we'll

say you nth task count so state

variables inside of solidity are

actually written to the blockchain and

that's what they're called state

variables they actually represent the

state of this smart contract on the

blockchain and the state of this smart

contract is going to change any time

this task account changes and these are

a lot like you know class variables and

an object-oriented context where you

know the scope of the variable belongs

to the entire smart contract and not

necessarily like a function or something

like that we'll see that more as we

continue on through this tutorial but

initially we can

set this value to zero like this alright

we just say equals zero and we can also

create a way to read this value from the

smart contract with a keyword called

public alright and what that does is

actually provide some function for us

that allows us to read the value task

count from the to-do list and the

solidity kind of just magically gives us

a function whenever we use this public

key word all right that's all we'll do

for our basic smart contract in order to

set this project up and actually deploy

this to the blockchain and make sure

that you know everything's set up

correctly we'll come back and you know

build this out throughout this tutorial

but for now we just want to do a simple

check to make sure everything works

properly now let's actually compile this

smart contract before it goes to the

blockchain and make sure that we read

all our code correctly we'll go to the

terminal and type truffle compile

and we can see that it actually created

some new files here I'll show you that

in the project if you go to the build

directory and then contracts will see

migrations and to-do list JSON so this

is actually a JSON representation of the

smart contract that's created by truffle

and it contains some information that's

useful to us this is the smart contract

ABI

just the abstract binary interface will

actually use this later in the tutorial

when we talk to our smart contract in

JavaScript we can see the byte code that

was created by the smart contract this

is actually the byte code that gets run

on the etherium virtual machine and yeah

there's a lot more useful information

inside of here but I just wanted to show

you that initially now in order to

actually put this smart contract on the

blockchain we want to create a few more

files and I'll kind of give you a tour

of the rest of the project structure

here as we do that in order to connect

to the blockchain we'll actually need to

update this truffle - config file

alright and I'm actually gonna just

paste some code inside of here again you

can get this code from the repository

for this project the github repo that

I've got down in the description below

you just check out that link alright

just gonna save this and I'll explain

what's going on here basically inside of

this configuration file we have the

network's key inside of this object

right so what that does is allows to

specify several different networks but

here we have a development network

that's actually connecting to ganache so

this is localhost and this is the port

the ganache is running on so while we're

here let's go ahead and actually make

sure that ganache is running so you can

open ganache find wherever you installed

it make sure it's open and we can see

that the port is 75 45 right and we can

see it's localhost 127.0.0.1 475 45 so

now that we have this filled out this is

actually talking to the local blockchain

now let's create a migration file in

order to get the smart contract onto the

blockchain so if you go to your

migrations directory you'll see a file

inside of here

it's called initial migrations so make

sure to copy the contents of this and

actually put a new file in the same

directory and I'll call it two

we'll say deploy contracts is okay

what's inside of this directory well

these are migrations I'm just gonna

paste this code in here so what is a

migration well if you've come from

another development background where

you've used a database you might have

had to change the state of that database

by adding new tables or adding columns

to the tables and that's because you're

changing the state of the database the

structure right the schema that's

essentially what you're doing in this

project right here with a migration

whenever you're deploying a smart

contract to the blockchain you're

actually changing the blockchain state

remember the blockchain basically is

just a big database in one sense and

whenever you put the smart contract on

the blockchain you're updating the state

and thereby you need a migration in

order to do that okay and you'll see

these migration files over here are

numbered and that tells truffle what

order they need to be run in so make

sure your starts with number two and

inside of here but we'll do is actually

change this change migrations to be

to-do lists so to-do list from artifacts

require truffle creates an artifact out

of this to-do list JSON that we saw a

second ago and that's gonna be just a an

abstraction of the smart contract that

it understands order to put it on the

blockchain now let's actually run the

migration and deploy the smart contract

to the blockchain so first again make

sure that ganache is running make sure

that you've you know configure this

correctly and we'll run the migration

like this what it's a truffle migrate

all right it looks like it was

successful so what we've done is

actually deployed the smart contract to

the blockchain and if you open ganache

you'll see that something has changed

you know with this first account we'll

see that the balance of ether you know

the etherium cryptocurrency balance has

actually gone down by a little bit

that's because deploying smart contracts

to the blockchain actually costs ether

it cost gas and we can see that this

account has done that it's actually paid

the gas fee in order to deploy the smart

contract to the blockchain and shuffle

by default uses the first account inside

this wallet in order to pay those fees

now let's open the truffle console

in order to check the smart contract

that we deployed the blockchain will do

that like this I'll say truffle console

now will retrieve the smart contract

from the blockchain like this will say

it's a new list equals a wait to-do list

dot deployed so to-do list is the name

of the smart contract that we created in

the migration and go back to project and

see you know this to-do list right we've

actually retrieved the smart contract a

deployed copy of it from the blockchain

and assigned it to this variable to-do

list and you'll see this a weight

keyword here so let me explain that we

must interact with the blockchain in an

asynchronous fashion and if you ever

developed other JavaScript applications

you would know that there's a lot of

different strategies for handling

asynchronous actions right you can use

promises there's a lots of different

ways to do it but with truffle version

five we actually been able to use the

async await pattern inside the console

which is really nice you can just do

things in a simple one line like this

basically this is just saying you know

wait for this finished result and

whatever the result is assigned to this

variable so we can actually look at that

we can say to-do lists all right you can

actually see the result is the smart

contract here and I'll just pull this up

so you can see

let's actually get the address the

contract will say it to-do lists address

all right and we can see this is the

address of the smart contracts is

deployed the blockchain this is just

where it's located and now we can

actually see the count of tasks that we

created in the smart contractor so we'll

say to-do lists dot count like this

there's our tasks account I think is

what we called it

all right we can see that zero and now

truffle actually stores that as a big

number whenever we retrieve it we could

convert it to a number like this we

could just say task account sign it to a

variable and say a wait all right

okay say task count to number and I see

that it's zero all right so that's a

good check to see that everything is set

up properly if you've been able to

complete all this so far

you know you've been able to create a

smart contract create a new truffle

project you know connect it to a

blockchain and actually to put the smart

contract on the blockchain and talk to

it if you have any trouble just you know

rewind the video and try to see where

you might have gone wrong what we want

to do now is actually pause and commit

some of these changes I'm gonna create a

new git repository I'll say git init and

inside of here I'm actually going to

create a git ignore file you don't

necessarily have to follow along with

all these steps but I'm just going to do

them so that you all can see what I'm

gonna do inside of here is create this

get ignore file that ignores the node

modules directory so that we don't

commit all the node modules to source

all right I'm going to say git and I'm

not sure what all these errors are sorry

I'm gonna get commit I'll say project

setup

all right so that's it for the first

part of this tutorial we've actually set

the project up in the next section we're

actually going to list out the tasks in

the to-do list

now let's list out the tasks inside of

this to-do list I'll show you the steps

that we'll follow first we'll list the

tasks and the smart contract and then

we'll do that in the console and next

we'll actually wire up the client-side

application and list the tasks there and

finally we'll write some tests that make

sure that the smart contract is listing

the tasks correctly so first we'll go to

our smart contract they've been working

on the to-do lists and will actually

write the code to list out the tasks in

the to-do list here so first we'll need

a way to actually model the tasks we'll

do that with something called a struct

solidity allows us to define our own

data types and struts and we can create

a new struck like this we can just say

struct tasks follow us with curly braces

unless you give this some more

attributes in a second let me pause and

explain some more features of solidity

right solidity is a statically typed

language in fact you can see the data

types listed here you know you int this

is an unsigned integer which basically

just means that it's an integer that

can't be negative right so integers can

be positive or negative with a minus

sign you know a sign in front of it or a

positive sign and solidity allows us to

define this struct task here and we can

give it some attributes like this we can

say you nth ID this will be the ID of

the task this is going to be an unsigned

integer which basically just means an

integer that can't be negative right if

it was a negative integer we have a sign

in front of it that'd be a signed

integer but this is unsigned and the

next thing will be a string and we'll

say the content this will just be you

know the text and next will be a boolean

and that will be completed and that'll

represent the checkbox state of the

to-do list you know whether the item has

been checked off or not all right so

that's how we'll actually model a task

on us to do lists with this data

structure and now we need a place to put

these tasks so where will they go well

we effectively want to put these in

storage on the blockchain so how do we

do that how do we access the storage we

need to create a new state variable like

we did here with tasks account remember

count is getting written to storage the

state variable its representing the

state of the smart contract which is

written to the blockchain the actual

data storage and we'll actually want to

create a state variable called tasks

here but we don't want it to be you know

an unsigned integer we want a different

data type we want something called a

mapping and this is going to take a key

value pair like this it'll say you int

it's a task

okay now a mapping in solidity is a lot

like an associative array or a hash and

other programming languages where you

store a key value pair right and when we

declare this mapping here we declare the

datatype for the key which is an

unsigned integer and the task which is

you know this struct that we defined

here and essentially this is going to be

kind of like a database for us

it'll have au int an unsigned integer

that will be the ID essentially of the

task that will store here so we can look

for tasks you know 1 2 3 and it'll

return the tasks ok and we also want to

make this public just like we did with a

task account and that will give us a

reader function for free provided by

solidity that will allow us to access

the items out of this mapping all right

now we have a way to create new tasks

and actually put them in the you know

database or the blockchain in this case

you'll be able to use this task ID

reference here and store the task like

this so now I need a way to actually put

this task struct inside of this mapping

to do that we'll create a function call

create task say function create task

and inside of here we'll provide a

single argument which will just be the

content of the task itself so it's a

string memory say content

let's be public

all right now inside of this we're gonna

write some code that puts this task

inside of this mapping so the first

thing we'll do is determine the ID of

the task we're gonna create right so

that's why we're using task counter and

you see that each task struct has an ID

and we want to increment this task count

value anytime we're creating a new task

to put inside of this mapping so do that

like this we'll just say task count and

we'll just use the increment operator

you might find this to be similar to

other programming languages where you're

basically just changing this value by

one all right

so once we've done that we'll have a new

task count which if this is zero and the

first time you call this it'll change to

one and that means the first task that

you put inside of this mapping whenever

we call this create task function will

be one and the next time it'll be to the

next time it'd be three so now let's

actually put inside the mapping do do

that like this we'll say tasks

that will reference the mapping and

we'll say task account we can actually

reference it by you know the key which

would be the unsigned integer here and

we'll just say equals and we'll create a

new task we'll do that like this we just

say you know task you just copy this and

we say task count we just provide the

arguments for the struck so the ID the

content and completed so the task count

is the new ID the content is the content

being passed in oops from the function

and it's a new task so it's not

completed yet so we'll just say false

alright now we have a way to actually

put tasks inside the to-do list which

we'll need as a prerequisite in order to

list tasks you know we'll need some

tasks inside of the to-do list in order

to show them and the next thing we won't

actually do is you know go ahead and

populate our to-do list so that when we

you know call it up on the client side

it's already got some to-do items inside

of it for us okay and what we can do is

basically just add some tasks to this

list whenever this smart contract is

deployed so how do we do that well we do

that with something called the

constructor function for the smart

contract so if you've ever used another

programming language that has like an

initialize function inside of a class or

some sort of object you know may be in

it or new something like that you've

seen a constructor before so basically

this is just going to be a function

that's called whenever the smart

contract is run for the first time which

in this case is upon deployment alright

so inside of this constructor function

we can actually add a default task to

the to-do list all right so we do that

like this we'll just say create task

task

and what we'll just pass in check out

DAP University calm all right put a

semicolon here

so now whenever we access the smart

contract for the first time it will have

a default task inside of it so whenever

we list the task out there will be

something there for us to see and that

way we'll know that this work properly

whenever we look at this in the console

and connect our clients that application

and write tests and things like that all

right now let's actually compile a smart

contract to make sure it worked we could

just say truffle pile I'm a syntax

errors or something like that and we'll

see all right it worked so now let's

actually open the console to see if it

worked will say truffle console well

actually first before we do that let's

make sure we have ganache running

I don't so let's pull it up

all right so ganache is running and now

we actually need to migrate our smart

contracts will say truffle migrate I'm

just gonna pass in the reset flag just

be safe here in case you had ganache

already running so what does the reset

flag do well that would deploy a new

copy of the smart contract the

blockchain if an existing one is already

there so I could go you know we change

our smart contract code here so if you

added new functions or something like

that you could migrate with the reset

flag to deploy a new copy so I'm gonna

do that just in case you had ganache

running already

all right now let's open the truffle

console so I'll do that like this

truffle and console and what we'll do is

actually lists out the to-do items so

first I will get a copy of the to-do

list will say to-do list equals a weight

to do list deployed

all right let's make sure the address is

there say it to do this to address

oops misspelled that

okay now let's actually list out the

items

now let me explain something I was

mapping we want to call this tasks

function that's provided by solidity to

list out the tasks in the to-do list and

remember we declare this public so

solidity gave us a tasks function for

free to reference this mapping but

whenever we call this function it won't

just return all the tasks in the list

and that's because solidity doesn't do

that for us this mapping is a dynamic

size there's no way you know in natively

to know how big it is inside the smart

contract and so you can't iterate over

it and you can't just return the entire

thing you actually have to reference the

items out one by one and that's why

we're using the tasks account counter

cache here so if we know that this task

count is one that means there's only one

task and the to-do list and we would

just have to call this function one time

to get that task and we would pass in

the ID which would be one in this case

and it would return the task if it were

10 we would have to do this 10 times we

would call this function once with one

and I would return task number one we'd

call it the second time with two and

that would return task number 2 etc etc

until we get 10 which Kasich will return

task number 10 so that's how we would do

that and if you were doing that on the

client side we would use a for loop or

something like that which we'll get to

whenever we reach that section so for

now inside the console we can just

reference you know the only to-do item

inside of here the only task is this one

so we can say task equals a wait to-do

lists dot tasks

you'll say one all right let's see the

task she bumped this up

all right there you go so there's the

task we can see the content check out

DAP University comm we can see that's

completed as false we can see the ID is

one it's a big number but we can

actually do that so inside here we could

say task ID to number

right it's one task content sorry is

that a function it's just an attribute

all right so now we've actually migrated

this smart contract to the blockchain

and we've been able to list tasks inside

the console now let's create the client

side application and actually list out

the tasks there so in order to do that

we'll need to create some new files

first we'll create a directory to store

the client side files will just say this

say source so we see a new directory you

came up here and we'll create a new file

inside of here called

index dot HTML

that's re-say touch source index.html

and we'll create an app dot JS file to

draw the JavaScript code so they touch

source app that J s okay

stepping over the project and see we

have an empty app dot JS file and an

empty index.html file and another file

we actually want to create is BS config

file so BS config sends for browsersync

configuration and browser sink is

something that we use as a part of light

server so if you go to your package JSON

file you'll see this light server

dependency so this is the web server

that we're going to use in order to run

the client-side application we need to

configure the server to know about a few

different directories inside of our

project we want to tell it where the

source directory is for the you know

clients have files we want to tell it

where these contract the smart contract

JSON files are we also want to tell it

where our node modules are to pull out

some dependencies for building out the

front-end so did that like this will

actually create a new file say touch yes

- config dot JSON ok so inside of this

file I'm actually going to paste in some

code and you can actually get this

configuration from the project from

github down in the description below let

paste this inside of here and don't

worry too much about this this is all

this proprietary browsersync

configuration space we're just saying

the server configuration is this and

we're pulling the files in from the

source directory and also the build

contracts directory so basically it's

saying expose all of these directories

to our web server root and then also

we're going to mask vendor with node

modules so any node modules that exist

inside our pride

we can reference those at the vendor

route all right there's our server

configuration and now we actually want

to fill in the index.html file now

likewise inside of here I don't wanna

spend a bunch of time writing HTML and

CSS so I'm going to just paste in the

code from the application and again you

can just pull this source code from the

github link down below just gonna paste

this in like this will do is actually

build out the JavaScript part but I

don't want spend too much time writing

the HTML all right so I'm gonna paste

this in here

I'm explain you know what's going on

basically you know we're pulling in the

Twitter bootstrap framework to write the

front-end so we don't have to write open

to CSS and UI elements ourself you know

we can see this vendor bootstrap that

was what I showed you a second ago and

Bs config that's how I got this vendor

here and we can see some basic CSS

that's just written inside the head tag

and yeah we got some markup essentially

we have a simple loader to show whatever

the application is loading a form that

allows us to create a new to-do item and

we will actually have a way to list out

the tasks here so for now I'm going to

just comment out this form I think I

think it'll run otherwise all right

and let's actually just see if we can

start the server

so I'll start serving a new tab

I'll say npm run dev I believe is the

command right yep that worked so you can

see that we basically got something

right we Z's loading that's fine if you

open your console I'm sure you'll see

some errors or something like that yeah

failed Oh the resource that's okay don't

worry about that just yet

we will wire this up to actually work

but for now I just wanted to make sure

that the server is working properly that

we can see bootstrap right we see this

navbar up here we see the dab University

to-do list you actually click through

this link it'll take you to my website

it's pretty cool but yeah so it's still

in the project that actually lists out

the to do's in this client-side

application though to list the to-do

items we essentially want to fill in

this unordered list we've got two here

we have a list for the tasks and then

the completed tasks so if we have an

uncompleted task it'll go in this list

and whenever we complete them it'll go

here but for now they're all uncompleted

so they'll stay in this task list

alright so in order to do that we need

to do several things inside this app

that J's file this is where we'll

actually create

you know our JavaScript app that talked

to the blockchain so the first thing

we'll do is actually create an app like

this just a app because this object okay

and we'll create a load function

and actually call this a sink

we're going to use a lot of async

functions inside this tutorial I've been

using a lot of async/await pattern when

loading data from the blockchain it

seems to be pretty helpful

so we'll fill this in

and then in order to load the app let's

actually do this console.log app loading

and in order to load the app whenever

the project loads we'll just say

say window

when it loads we'll just pass in a

function say aptoide actually didn't

mean to put that in sense object do you

like this

all right so let's reload

all right so we see the apps actually

loading all right now I'm actually put

these windows side-by-side and you can

see that this to-do list is actually

responsive which is cool we'll be able

to see the tasks right here and be able

to focus on the code while we're doing

this the first thing we want to do

inside this load function is actually

say oh wait app load web 3 we want to

load the web 3 library in order to

connect to the blockchain now when we

load web 3 I'm actually just going to

use the configuration that's specified

by meta mask themselves right what we're

doing is creating a way to talk to the

blockchain we want meta mask which is

going to be the browser extension that

we use to connect to our dapper

blockchain application to talk to the

blockchain with web 3 J s and meta mask

actually suggests a way to do that so

I'm not going to reinvent the wheel here

I'm just gonna do what meta mask tells

us to do so I'm going to actually just

paste in the configuration that they

suggest and don't worry if you don't

understand what's going on here

just know that this works and it's

inside of the github repository and you

can find the code and link it with the

link in the description below so let me

pause because I don't feel like a fully

explained web 3 J s very well and what's

going on here ok so remember this to do

this application is backed by the

blockchain and we want to actually

connect to the blockchain to use it so a

few things have to happen we have to

connect our browser to the blockchain

and it's what we use meta mask for right

and then our client-side application

needs to actually connect to the

blockchain and that's what web 3 J S is

for so inside of our project we'll use

the web 3 J's library to talk to the

etherium blockchain it'll actually allow

us to connect to it and you know read

and write data from the blockchain

inside of the app and then meta mask

will allow us to you know communicate

with that client-side application with

web 3 J s and allow us to you know

interact with it via our browser so what

we did here was just load it up web 3 J

s you know loaded our block

chain connection essentially we'd even

call this like connect to blockchain if

we want to do and now we'll actually use

our browser to connect to it with meta

mask

so let's actually do that I will go

ganache let's actually find the private

key here we'll show the key copy it all

right

Mehta mask and make sure you've opened

this VM already and what you want to do

is connect to the private network which

is localhost 75 45 might see the main

etherium network first but you want to

change networks to localhost 75 45 here

and what you want to do is click this

accounts menu you want to import a count

and you want to paste in the private key

it's like type private key and click

paste and then import all right I've

already done this step so I'm not going

to do it so I'll click cancel whenever

you've imported the account you know

from ganache you want to use this make

sure you use the first one because

that's the account that we deployed the

smart contract with okay you'll actually

be connected with that account to the

blockchain right so here's your

blockchain account and then you can add

it to your wallet and meta mask to

connect to the blockchain with your web

browser and you'll specify the

blockchain by you know picking this

local blockchain that we have running

with ganache okay

so I'll refresh that alright and you've

got your account connected to the

network

now let's take that account from ganache

this one right here and let's show it in

our application to prove that we're

actually connected to the blockchain

with it all right so I'll just say load

account like this crate load account

function say load account this would be

a sink

and I'll say apt account equals web

three each counts zero okay so web three

here I was set by load web three and it

has this eth object that's going to

contain all the accounts which will be

an array when you get the first one

which will be the account that we're

connected with inside a meta mask and

inside the load function I'll say a

weight load

account

app download account okay save that and

now inside of the index.html file you'll

see that we have a place for the account

here this will be the place where we can

actually add the account we'll do that

in a second but for now let's actually

just console that log

and see if it worked properly all right

yep there we go and we can see it here

we can verify that's the same account

and meta mask so een ein two five eight

and that's you nine two five eight

alright so we've successfully retrieved

the account from meta mask and will

actually stick it inside the project in

a little bit okay so we'll just clean

that up

now let's actually load the smart

contract from the blockchain this will

be the to-do list that we created so

that we can list out the tasks from the

to-do lists

in order to do that we'll say load

contract

say sink

pass it a function

and inside of here the first thing we'll

do is actually pull out the smart

contract JSON file so say Const to do

list equals oh wait I'll say J query get

JSON must be to do list

okay so if you remember inside the BS

config file we expose the build

contracts directory to the root of our

project so we can call this debut list

JSON file we're actually pulling out

this file right here

we can market

we log it but we were to do that we need

to call this function say oh wait app

load contract okay all right we can see

it here here's this to do list file

okay so next what we want to do is

actually create a truffle contract so

truffle contract is just a JavaScript

representation the smart contract that

will allow us to you know call the

functions on it and things like that so

what we'll do is I'm just gonna paste in

some code that shows you how to do that

do like this okay

so this will be called truffle contract

we'll pass in this to-do list JSON file

that's basically gonna create a wrapper

around the JSON file that we create a bi

truffle and it's gonna allow us to you

know interact with it and we'll set the

provider which is the web 3 provider

which we created here and this is

basically just going to give us a copy

of the smart contract in JavaScript and

it's going to tell us where it is on the

blockchain and we're gonna be able to do

stuff like you know call all the

functions that we coded inside of here

like the tasks function the tasks

account and things like that so let's

clear this out and just say even refresh

and see that everything worked

all right so to-do list of undefined

let's change that so you actually have

place to store this contract so we'll

say this say contracts like this

well actually create

an empty object

okay

well refresh if you guys get stuck on

new steps feel free to clone the

repository and see the code below now we

want to actually you know get a deployed

copy of the smart contract like we did

in the console remember we did you know

to-do list equals like a wait to-do list

not deployed we're gonna do the same

thing here so we'll say app dot to-do

lists equals a wait app contracts to-do

lists

deployed okay

and you know this is really just

and this is really just you know getting

the values from the blockchain so this

is a live contract now this is just like

we did in the console all right now we

should have loaded our app up with a lot

of data we've connected to the

blockchain we've retrieved the account

and we've retrieved the smart contract

that we created you know in the previous

section so we want to do now is actually

renders from information on the page the

first thing we'll do is actually render

out the account that we're connected

with so first we'll just say render

equals an async function

and inside of here what I'm going to do

is show the account

right inside of our HTML okay remember

we got this place to show the account

right here

so that's exactly I'm gonna do when I

put the account inside of this and I'm

going to call the render function so

after the contracts have loaded I'll say

a wait app dot render

all right in order to see this change

election to expand the window here all

right you can see that the account was

put in here so like I said earlier I

created this as a responsive application

and we can see the account you know here

but whenever we resize the window we

don't want to see that anymore just to

save some space so we'll keep that down

but that works and if you want to code

this you know with your window all the

way open feel free to do that I'm just

going to use a smaller view to save some

screen real estate so you guys can see

both things happening is I'm doing the

tutorial all right

so let's do some more things have this

render function we actually want to do

is render the tasks but I'm going to

basically create some other logic inside

of here to prevent double rendering all

right so we'll do is do a couple things

we will say that the app is loading I'll

keep track of that like this

changes to false whenever it's rendering

we'll save is loading stop calling this

function this is basically prevent a

double rendering problem and while this

is loading will actually set it to true

and when it's finished we'll put it back

to false so let's actually create a set

loading function like this I'm just

gonna paste some code in you can find

this code in the get-up repository so

it's set loading basically it's just

going to update it and we'll show the

loader in the index.html file this will

be our simple loader as you see here

loading this is loading and I'm going to

show it when it's loading right and I'm

going to hide the content which is this

this is actually the to do list itself

alright I'm going to show the loader

hide the content

all right so let's say that see if

there's any errors

all right so that looks like the loader

went away which is what we want

all right now the next we want to do is

actually fill in the tasks who actually

want to render them so we'll list out

the tasks inside of it so I'm a function

like this so I'll say render tasks say

async so inside this function we need to

do a lot of things the first thing we

want to do is actually load the tasks

from the blockchain and then the second

thing we want to do is actually render

out you know each task with the task

template

and we're gonna have to basically render

out each task one by one and then we're

gonna have to actually show the task on

the page okay this is kind of a

three-step process it's gonna be a

little complicated but just bear with me

I'll show you how it works so what we're

gonna do is fetch them from the

blockchain and we're gonna actually use

this template that's created down here

this task template it's gonna have a

checkbox and the content we're gonna you

know fetch this off the page and create

a new task with this okay

so first one thing we need to do is

fetch the number of tasks from the

blockchain remember I said that we can't

you know just fetch all the tasks with

this mapping essentially we need to find

out how many there are

and we need to loop through the items in

this mapping and fetch them out one by

one so if there's ten tasks inside of

here we'll need to do one two three four

five six seven eight nine ten

if there's one we just do this once so

in this case there's just one but that's

what we need to do first we say Const

tasks count equals await this is app dot

to-do lists task count okay and now we

know how many there are and the next

thing we want to do is actually fetch

this template that will use to list the

task out in the page say Const task

template

equals task template okay

and now we will actually want to use

this task account to render out each

task on the page in order to do that

we'll create a for loop in Java Script

like this if you've written some

JavaScript before it should look pretty

familiar we're basically just saying for

every number from 1 all the way up to

the task count

do this operation so that's what we want

to do we start with one because that's

the first valid ID inside of the mapping

so from task number one all the way up

to the maximum number of tasks which you

know if it's ten we're going to do this

10 times you know

fetch each task so we'll actually read

the value from this mapping with the ID

so I in this case is going to be the ID

inside the loop the first thing we'll do

is actually fetch all the values for the

task

we'll call the task function and break

out the attributes to the ID the name

and completed do that like this

so say tasks equals await aptitude do

list tasks I which is the ID in this

case and because of our trouble contract

works this is actually gonna return an

array and we have to reference these

values by each item in the array so the

first item will be the task ID the

second ID second item which will be the

task content the third item which will

be completed and remember this array is

zero index that's why the first item is

zero the second item is one their item

is 2 okay so now we'll have the task ID

content and completed the next thing

that we'll do is actually create the

HTML for the task like this I'm just

gonna paste in this alright so we'll do

is actually get a new task template

we'll take this task template that was

you know fetched from the Dom and we'll

actually clone it alright we'll get a

new copy we're gonna find the content

for this template we're gonna fill in

the content from the task and we'll find

the input which will be the check box

and we're gonna populate that with some

values which will be the task ID

it's basically whenever we check this

will like you know turn it on and off

and whether it's completed or not we'll

just use that from the task and we want

to wire up a unclick function which will

be toggle completed and one form of this

later we won't use it for now so we can

comment it out okay so the next thing we

want to do is actually put the tasks and

the crushed list so what I've pasted in

some code here too so what this does is

check if it's completed and remember

there's two lists here there's a list

for the completed tasks and a list for

the sorry here's a completed tasks and

then the list for the non completed

tasks and if the tasks completed we'll

put it in the right list and the last

thing we want to do is actually show the

task we'll do that like this we'll just

take the hidden task template that we've

been modifying I'll just show it like

this okay alright so let's actually try

to call this render tasks function

inside of the render function

so render task is here and then after we

rendered the account we want to read the

tasks like this so let's say this and

see what happens you might have some

errors but we can just address those as

they come up

nope nope there it is boom it worked so

we've actually successfully listed the

tasks from the smart contract in the

blockchain I can pull this out and we

can see the first task inside of here

which is checkout dab University it's

not gonna do that I'm gonna right click

and go to DAP University calm awesome so

it worked

let's see my social links here you got

my Twitter it's pretty cool alright so I

know we've covered a lot of ground but

we have successfully listed the tasks

inside the client-side application ok

I've commented a couple things out here

because we haven't implemented them just

yet but if you get confused just go Bree

whine the video and you know fine what

you might have gotten lost the next step

we want to do is actually write some

tests to ensure that the tasks were list

out properly ok and we're actually going

to use the mocha testing framework from

JavaScript and the chai assertion

library in order to write our tests so

you can read more about these if you

want to look at our new file in the test

directory say tests to do list tests is

if you go inside the test directory you

can see the to do list test out J's file

here

alright so it's actually write a basic

test to ensure that you know the

contract was initialized properly and

that actually lists out tasks the first

thing I want to do inside of here is

actually required the smart contract

like this that's very similar to our

migration file pattern say contract and

we'll say to-do lists will pass in a

function here

all right and we'll write all of our

tests inside of this callback function

this callback functions actually gonna

expose all of the accounts in the

blockchain right so all the accounts

that are connected with you ganache all

these are going to be injected inside of

this variable here this will be an array

you can read them out one by one so the

first thing we'll do is actually get a

deployed copy of the smart contract with

a before hook okay and we'll do that

like this will basically just say before

each test runs that's essentially what

this means we're gonna pass in an

asynchronous function that should allow

us to use the await keyword let's say

this dot to do list equals to do list

deployed okay and before each test runs

we'll have a copy of the to do list as

deploy to the blockchain

now let's create our first test example

what is say it deploys successfully

all right we use the async function

because we want to use a weight inside

of here

and the first thing we'll do is actually

just get the address like we did in the

console earlier say Const address

I'll wait this to-do list address we'll

say we basically to make sure that the

address exists so you want to check that

it's not you know empty so leave that

like this say assert not equal this

address we don't want to be 0 X 0 we

don't want it to be an empty string we

don't want it to be null and we don't

want to be undefined so we can check

that and that'll just make sure that the

smart contract was actually put on the

blockchain and that it has an address ok

now we can run this test inside of

shuffle like this we just say truffle

test hit enter all right and it passes

now the next thing we want to do is

actually list out the test and the test

and make sure that it works

so we'll say it lists tasks pass this

ASIC function

so inside of here we'll just do a very

simple check we'll just basically make

sure that the count is correct and that

we can fetch you know a task by the

count

so first we'll just get the task count

and we'll just do that and the next we

want to actually try to fetch the task

out of the mapping so we'll just make

sure that a task exists where the task

count is okay this would be a simple

test so do that and now we want to do is

actually assert that the ID is equal to

the task count right that it is set

correctly so let's do a basic test and

just try to run it and see what works

all right it works so let's look at that

you can see that we're just getting the

task we're calling the ID and making

sure that it's equal to the same task

count next let's test some more values

and make sure that the content is

correct

that completed is correct and that the

task number is the same as we expect so

let's just do that like this so paste in

some examples will say assert equal

tasks content is this that's the first

task we set whenever we initialize the

contract we want to say that the

completed is false right I'm going to

say that the task count is actually 1 we

want to specify that someone in this

case so let us say that we run the tests

all right passes all right so that's

concludes this section where we've

actually listed out the tasks in the

to-do list another we covered a lot of

ground we actually created the tasks

inside of the smart contract we listed

them out in the console we had to wire

up the client-side application to list

the tasks out there and we wrote some

tests so that's a lot if you got

confused about anything feel free to

rewind the video paste in the code from

the github repository down below and

while we're here I'm gonna go ahead and

commit these changes to get ahead gotta

say get commit

right so we've listed the tasks

the next item is to add tasks to the

to-do list we'll do this with a

client-side application and we'll write

tests for it

but first we want to change this create

task function to add some additional

functionality so right now we're calling

this create task functions at the

constructor to add a default task to the

to-do list like this but we want to you

know call this function externally from

the client side in order to create tasks

that way we also do it the console and

things like that so what I'm gonna do is

actually add a new line here and what I

want to happen is to broadcast an event

that this task was created some explain

that solidity allows us to create events

that are triggered anytime you know

something happens inside of a smart

contract and external consumers can

subscribe to these events to know

whenever the event happened and events

are really useful because you know

whatever we call it create task function

we don't always know when an you know

the transaction actually completed we

don't always know when it was mine and

things like that and it can be really

useful to listen to those events in

order to you know know that was finished

so we can create an event in solidity

before we call here we can actually

declare it inside of our smart contract

I'll just do it like this

we'll go blow this mapping will say

event will say task created and notice

that's capitalized all right use a

semicolon here and we'll just add some

arguments to this event we'll say you

nth ID this will be the ID of the task

that's created a string this is the

content and the completed property so

boolean completed all right so that's

how we create an event inside of

solidity right this just means that you

know the task created event is available

to us inside of the smart contract and

I'll show you how we can actually call

it would you like this we use the emit

keyword emit task created and we pass in

the arguments

so the

here is the task count and the content

which is passed in from the function and

false because it's a new task and we

haven't completed it yet and that's

pretty easy that's how you trigger

events inside of solidity and we can

subscribe these events you know inside

the client-side application or you know

anywhere that can listen to events on a

smart contract or while we're here I'm

gonna go ahead actually write the tests

for creating the to-do item so I'll open

the test file over here do this side by

side and I'll just create a new example

down here so below lists tasks will say

it creates tasks I'm just gonna add some

space you can see better so say it what

creates tasks alright was a async

passing a function and first we'll say

Const results equals await this dot to

do this create tasks and I'll say a new

task okay and we'll check the tasks

count like oh wait this step to do this

task count all right well that's that

and first we'll check that the tasks

count is the same as we expect say - so

that's the first thing we'll check on

well ensure that you know we created a

new task and the new count is actually

two and now what we'll do is check that

this event this task created event was

actually triggered and you know we'll

dig in to the logs and say that the ID

was the same the contents the same and

complete it was the same so there would

be the actually you know this new task

that we created was you know logged out

so we can get the event like this we're

gonna use this result which was you know

the result of this finished create task

function right we use the async await

pattern to get the result here and the

event is actually contained inside of

that so we'll say it Const

event equals result logs okay send their

logs as the first item okay and the args

key basically is going to contain all

the values for the event and you could

log this out like a ganache right you

could actually console.log this event in

fact let's just do that right now let's

just say console log our results go to

the terminal

shuffle I'll show you the result and

what it looks like so you can see what

we're digging into alright this is

loading okay so this is what the result

looks like we see there's a transaction

hash here and it's got a receipt and

inside of here we have logs right and

here is where the event information is

contained right we can see this args key

right here it's gonna have an object and

granted we can't see exactly what's

inside of here because it's not logging

all the information but this args key is

going to contain all the values of this

event that was triggered whenever this

was created okay so I'll take out that

result and now I will check to see that

all the information is there

so we'll say assert equal event ID was a

two number it's equal to two

let's say a search equal that content is

equal to any task search equal events

completed set false

all right let's for the tests

and this time we won't see all this log

output it'll actually just run the test

and hopefully it'll pass yep it passes

all right so we can see that our event

was triggered whenever we called this

great task function all right so I'm

gonna remove this space and that's how

you write tests for this create test

function and check on events now let's

go to the front-end application and

create tasks that way now before you you

jump back into this make sure a few

things are correct make sure that

ganache is running your block change

running and make sure that your

contracts are migrated that you're

connected with meta mask right here

things like that okay so what I'm gonna

do is actually enable this form that I

commented out for the previous steps on

the page so this forms gonna have an on

submit function create task which will

build here in a second I haven't done

that just yet I'll just refresh the page

and show you what that looks like all

right so we'll see this add tasks field

and we'll actually type in a task here

and we'll hit enter there's no button

here just for simplicity's sake we'll

just use the Enter key in order to

create the task all right so I'll go

back to the app J's file and it's

actually add the create task function

we'll do that like this let's do it down

here below the render function alright

we can say oops create task so be an

async function

so what we'll do is say app not set

loading to true okay so whenever we call

this well we're going to show the loader

and what we'll do with it Const content

equals new task Val okay and that's just

the name of the form so if you go back

to the index.html file you'll see this

you know for sorry the name of the input

it's all the form to the on submit

create task we're gonna fetch the value

of this input right here this input

which is the ID new task okay and we're

gonna get the value which is gonna be

what's ever filled out inside there so a

new task value and now we're gonna call

the smart contract function we're going

to call this create task function with

we know web 3 J s with a shuffle

contract library and talk to the

blockchain or it actually updated so

we'll say a wait app dot to do this

actually sorry this will be create task

and we'll pass in the content from the

value okay and whenever we do that

whenever this is finished I'm just gonna

do a shortcut and reload the page so

that whenever this is actually done I'll

just refresh the page and it'll go ahead

and fetch all the tasks from the

blockchain again and list them out on

the page so instead of having to like

you know listen maybe for the event and

then we load the page like sometimes

they can get into a double rendering

problem so I'm just going to actually

just reload so I'll say like window dot

location not reload that's just a

JavaScript thing to say refresh the page

okay

so let's test it out and see if it works

I'm gonna open the console see if

there's any errors nope we're good

alright so we'll say a new task or it

will say task number one task number one

and like I said there's no button here

you just want to hit enter in order to

make this work

so I enter and I didn't put a button on

here just for simplicity sake I'll say

confirm alright there we go

so we successfully added a task we can

see task number one was added to the

list

and if you go and check ganache you can

see the same thing if you go back to

your transactions you can see that a

transaction was created right here I

think it's the same one yeah it's like

that's the same one and also you can go

to your logs see the same thing it

scroll like crazy I think the other at

the bottom right

anyways that gives you an idea of you

know where you can look to find out more

information about the blockchain

whenever you doing this kind of stuff

alright so we've successfully created a

new task on our to-do list and we've you

know done it inside the smart contract

we have done it on the client side and

we've written tests to make sure that

this works so that's it for this section

I'm gonna go ahead and commit these

changes I'll say get add dot git commit

let's say three creates tasks

now the last thing we're going to do in

this tutorial is actually check off the

tasks from the to-do list whenever we do

that they'll appear in a completed list

down here and they'll be extract out so

that like this first we're gonna go to

our to-do lists or create a new function

will call this toggle completed okay

someone to use a space down here say

function toggle completed okay so what

do you want this function to do so we

want to take this you know struct these

tasks trucks that are inside this

mapping and we want to find a specific

task and we want to change this value so

if this value is already true when I

change to false and it's already false

when I changed it true so basically if

someone checked this item it would you

know say that it's completed and if it's

on the completed list we could check it

and it would take it off the complete

list and put it back in the you know not

completed list okay so this function

will need a parameter it'll need an ID

of the tasks that we want to actually

toggle so we'll do that like this we'll

say you int ID all right we'll say

public so first we will get the task out

of the mapping all right so we need to

read the task out of the mapping like

this you can see tasks you know tasks

count we can do the same thing they said

tasks and we can read the ID like this

CID

so that watch you fetch it out let's

assign it to a variable whenever we do

this we want to actually declare this

variable with the type task and we're

actually gonna do this just in memory so

it looks kind of funny but this is how

we do that in solidity we say task this

is the data type that we declared right

here task memory and we say task like

this okay now notice this underscore

basically just means this is a local

variable and not a

variable it's not necessarily specific

to solidity it's just a convention right

you see this here in fact I'm gonna do

this like this as well I D so you know

content is underscored here because that

was a local variable that was passionate

the function IDs the same way and I'm

gonna do just tasks like this because I

don't want to sign into the state

there's nothing special about doing that

it just convention so now I'm gonna say

tasks got completed and we basically

want to do the opposite of whatever it

was before so they can read the value of

whatever it was before like this we just

say to ask I completed but we want to

say the opposite so we'll say bang oops

bang right so if it was false this will

turn into true and if it was true it'll

turn into false we're assigning that new

value here all right next we're gonna

put it back into the mapping so just

like we did tasks tasks count equals

this we're going to put the back into

the task mapping set tasks ID equals

task alright so that's how we would

create a function to toggle task

completion now I want to do a few more

things inside of here before we move on

I want to emit an event just like in the

create task function

so first we'll declare another event

will just say event say task completed

alright and it will give us two

arguments we'll say you nth ID say you

went our sorry bool completed all right

and now I will trigger that events out

here say omit task completed

ID task completed all right and that

should work a lot like our create task

function where that will admit an event

any time this function is called okay

so let's actually run a test to make

sure this works before you know wire up

the client-side application we'll go to

the test file right here and I'm

actually gonna split this pane

vertically all right so I'll just split

this pain we've got a test file down

here and the smart contract could appear

so I'm just gonna focus on this you know

we want to just test this function unit

test this toggle completed so I'm gonna

create a new function down here give a

social space I'm sorry I know example

that will say that it toggles task is

completed so I'll scroll down a little

bit I'll actually just copy this and

paste it again to give yourself some

space and add some boilerplate

so we'll say it toggles task completion

and I'll clear out all this actually

let's do this and say result equals this

dot to do list dot toggle completed and

I'll pass in one should be the first

task and we'll get the task itself will

actually retrieve the task I'll pass in

ID one alright I want to assert that

that's going to be equal to task

completed we want it to be true and we

want to fetch the event just like we did

in the previous example and we want to

ensure that the event ID is equal to one

and that the event completed is equal to

true alright that makes sense so

basically I know I modified a lot of

that code so that might be a little

tricky I didn't just you know write it

out as I was thinking it I just changed

what was there from the previous example

let's just review so we're toggling

completed we're calling this function

passing in the idea of the first task we

know there's a task already in the zoo

list because we created one inside the

constructor right and we waited for that

to finish got the result which we'll use

to read out the logs here in a second

but the next thing we did was we got the

task right and we checked that it was

actually completed rightness that's true

and now we want to make sure that this

event was triggered and we you know get

the event by digging into this result

which we witnessed in the previous

section if you didn't check that out go

ahead and rewatch that part so we took

the event and got the ID it made sure is

one and then looked at completed and

ensure that it was true all right so

let's talk about the test all right it

looks like I've had an error let's go

back to this code we could see I forgot

the underscore here let's run it again

all right it passes awesome okay so I'm

gonna remove this space save this now

let's go to the client-side application

and wire up the check boxes to toggle

the tasks so go back to the app J's file

and I'll create a new function down here

I will call it a toggle completed I

believe this is the same name as the

smart contract function so below create

task we'll say a toggle completed I say

sync positive function and we'll do is

similarly to create task we will say the

app is loading say Const task ID and

actually inside of here this is gonna be

on a on click event whenever we click

this checkbox we're gonna you know have

an event listener that calls this

function so I'm going to pass in the

actual event itself will just use Eve

for short

and that events going to contain the

name of this checkbox which the name

value is going to be set to the actual

task ID so we'll say e target

and now I'll say await when actually

gonna call the smart contract function

to toggle this task is completed say app

got to-do lists toggle completed I'm

gonna pass in the task ID all right and

then just like the create task function

whenever that's finished I'm just gonna

reload the webpage semicolon or sorry

yeah comment there okay no errors but if

you remember in the previous sections I

commented this out so I'm gonna put I'm

going to re-enable this this is where we

actually wire up the onclick handler to

do this so now whenever we're rendering

the tasks out we found you know the

check box now we want to actually add

the event handler whenever it's clicked

to call this function so everything

looks good all right let's try it out

I'll try to check this off the list

see if it works all right let's look at

a problem here all right we do have a

problem and I'm gonna see if you can

guess what it is it's something I forgot

to do in the previous step and I'm

actually gonna leave this in the

recording because it kind of shows you

the nature of blotching development and

all the things you need to do do you

know what it is yet

well I'll tell you we forgot to run the

migrations yeah so we added a new

function of the smart contract and it

worked on the tests but we didn't

actually deploy a new copy of the smart

contract to the blockchain with this new

function so in order to do that we'll

run truffle migrate

- test reset to deploy a new copy of the

smart contract to the blockchain and

whenever we do that we're gonna want to

refresh our webpage to pick up that

change alright so let's try that again

sorry guys I forgot that step like I

said I wanted to leave that in the video

just to show you you know something you

might forget to do and hopefully that'll

help you remember all right so we

refresh the page now we see that our

other task is gone now why did that

happen

well that's because you know whenever we

deploy

you copy the smart contract all the

state of the smart contract is gone

right it's a new smart contract whenever

we redeploy so all the old tasks we had

in the smart contract have disappeared

so we'll add a new one let's say task

number one quite a few will just sign

these really fast task number two it's a

task number three all right so now it's

actually toggle one is completed and we

see the meta mask confirmation pop-up

will sign it firm and there we go we've

actually successfully checked off task

number one from the list and we can see

that it was added to you know the list

down here below so we can you know

actually do the to-do item on task

number two we can go to DAP University

calm all right let me see it awesome we

went there and now we can go here and

check that off the list because we

actually did it confirm and there we go

all right so that's it guys that's

actually the end of this tutorial

you've successfully created your own

to-do list on aetherium power buy smart

contracts and you've created this

clients that application to interact

with it so congratulations

so I hope you all liked this tutorial

again be sure to subscribe to the

channel if you haven't already and also

don't forget you can download my courses

for free on my website over here at DAP

university comm ford slash free download

you can just sign up for my email list

to you know get my courses downloaded

for free and also you you know keep us

me on Twitter and stuff like that for

more daily updates so also guys I'm

releasing a premium course like a full

decentralized blockchain development

course sometime soon so you'll want to

sign up to that email us to find out

more updates about that it's gonna be

really extensive it's gonna be really

awesome you're gonna want to learn about

it so just stay in touch and also by the

time this videos out you'll be able to

find an article to accompany this video

which you can follow along step-by-step

it'll be somewhere on my website and

I'll probably in the video description

below

you can see other articles on my website

here like you know this is the ultimate

aetherium dap tutorial which i released

last year which is a pretty popular

tutorial that shows you how to build

your first centralized application you

know you can code your own

cryptocurrency on aetherium you know

building a RC 20 token stuff like that

I've got some other deep dives on topics

like you know web 3j s which we talked

about some in this tutorial you know a

lot more lessons on solidity how to

develop smart contracts I kind of go

into more features at the language and

things like that so this is a huge

resource with a lot of free stuff a lot

of good information I also have some

tutorials on like how to build a real

world ICO and things like that this is

like a greener production ready I see

OGG use in the real world this is pretty

advanced you know and also if you're

looking for somebody to work on your

blockchain projects you know I am

available my email address is down below

I did a lot of you know block check and

development a lot of consultation and

advising for people who are launching

blushing startups icos things like that

I've got a complete solution for

launching and I see oh like I said you

can reach out to me via email my email

is on my website and also in the

description below some buttons here you

can contact me on the website

I like set my Twitter's here or things

like that so again I hope you all liked

this tutorial until next time thanks for

watching DAP University