Learn how to build a blockchain app using Etherium smart contracts in this full tutorial course for beginners. You will learn how to create a todo app with Etherium smart contracts using the Solidity programming language.
You will also learn to write tests, deploy to the blockchain, and create a client-side application.
TRANSCRIPTION
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