hey everybody this is gregory from dapp
university so today i'm going to show
you how to write your first blockchain
application i'll show you how to create
a to-do list that's powered by ethereum
smart contracts i'll show you how to
create your first ethereum smart
contract with a solidity programming
language or write tests against the
smart contract deploy it to a blockchain
and we'll 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 dot com
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 a to-do list would
work as a web application and then i'll
show you how it would 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 back-end
code for the server right any business
logic you might write and any data
that's stored in your application is
stored in a database right
and pretty much any other to-do list
tutorial that's out there is going to
show you how to write you know a
client-side application and html and css
and javascript and then it's going to
show you how to basically
do some business logic on a web backend
that you know creates reads writes
updates to do's 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 a 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
gonna 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 backend in a
database instead it's going to actually
talk directly to the blockchain and on
the blockchain we're going to have code
that's going to be written with ethereum
smart contracts
that will contain all of the business
logic for our to-do list
and all the to-do items are going to 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 like 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 or 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
different 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
application is doing here
so
all 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 going to be the building blocks
of blockchain applications and that's
what we're going to build our to-do list
out of we're going to write a smart
contract that will contain all the tasks
in the to-do list and allow us to 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 in the smart contract
is immutable which that means it's
unchangeable whenever we deploy to the
blockchain we won't be able to update
that code and that's important to
understand because that's what makes the
blockchain so secure whenever we put
code on the blockchain we know we can
trust it at that point it's called
trustless for a reason
whenever it's on the blockchain we know
that no one will change it and therefore
we know the to-do list will behave the
same way every time and sometimes i
actually think about smart contracts
kind of like microservices 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
application is going to work
again we're going to connect the
application with a web browser and we're
going to 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 where we're going to put our
smart contract we'll create the to-do
list with an ethereum 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
ethereum 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
blockchain works and how 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 ethereum 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
node.js already installed on your
computer you can see if you have node
installed by going to 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
truffleframework.com forward slash
ganache to download it you can click
this download link and whenever you've
downloaded it make sure 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 or anyone can connect to it but
it runs on a computer it's you know a
closed network and ganache basically you
know is 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 that actually talk
to this blockchain and it's really
helpful and it's an invaluable tool in
the blockchain developer toolkit
so
um if you open ganache you'll see you
know 10 accounts listed here these are
the addresses to each account on the
side and you'll see you know these
balances you'll see 100 ether and this
is the ethereum cryptocurrency that each
account has and it's you know required
to you know pay gas fees in the network
and stuff like that all right so that's
an overview of the ganache personal
blockchain network and we're going to
leave ganache here set up in our project
because we're going to need it uh
running in order to develop our project
the next dependency is the truffle
framework we're going to use the truffle
framework to develop ethereum smart
contracts with the solidity programming
language you can install truffle by
going to your terminal and typing npm
install
g truffle at
5.0.2 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 ethereum blockchain is
a network
and we need a special browser extension
in order to connect to that network and
that's where metamask comes into play
metamask 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 metamask by going to the
google chrome web store and searching
for metamask 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 in 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 ethereum 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 of this video
to see how to install the specific
version of truffle
so now we'll initialize a new truffle
project like this we'll just say truffle
init
all right and now we've successfully
unboxed a new travel 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 dot json
all right 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.json file by cloning
this repository on the github link in
the description down below all right so
here's the dependencies for the project
i'm just going to go ahead and save 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 um 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 um 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 i'll 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 network and
i'll explain that here in a little bit
and now i'll create a new file inside
this directory called to do list
dot sol
so we can see that to-do list is
capitalized to do list
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 the version of the solidity
programming language that we want to use
we'll do that like this we'll say pragma
solidity
we'll use a carrot
i'm going to say
version 0.5.0
and we'll end this line with a semicolon
all right
now the next thing we do is actually
declare the smart contract we do that
with the contract keyword say contract
and we want to call this contract a
to-do list which is the same name as the
file say to-do list
and we follow that with some opening and
closing curly braces
and inside of here is where we actually
write all of the code for the smart
contract now i'll 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 the 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 a variable and it'll be a
special kind of variable and solidity
called a state variable
and we can declare a state variable like
this we'll say unt
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 the smart contract is
going to change anytime this task count
changes and these are a lot like you
know class variables in an
object-oriented context where you know
the scope of the variable belongs to the
entire smart contract 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
all right we just say equal zero
and we can also
create a way to read this value from the
smart contract with a keyword called
public
all right and what that does is actually
provides some a function for us
that allows us to read the value task
count from the to-do list and solidity
kind of just magically gives us a
function whenever we use this public
keyword
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 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 wrote 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 we'll see
migrations and to-do lists.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 which is the abstract binary
interface we'll 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 ethereum 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 dash config
file all right and i'm actually going to
just paste some code inside of here
again you can get this code from the
repository uh for this project the
github repo that i've got down in the
description below you just check out
that link
all right i'm just going to 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 um that's actually connecting to
ganache so this is localhost and this is
the port that 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 7545
right and we can see it's localhost
127.0.0.1.7545.
so now that we have this filled out um
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 i'm actually going to copy the
contents of this and actually create a
new file in the same directory
and i'll call it uh
two
we'll say deploy
contracts
dot js okay
what's inside of this directory well
these are migrations i'm just going to
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 and
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 number two
and inside of here what we'll do is
actually change this we'll change
migrations to be a to-do list
so to-do lists from artifact require
truffle creates a an artifact
out of this to-do list.json that we saw
a second ago
and that's going to be just a an
abstraction of the smart contract that
it understands in order to put in 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
configured this correctly and we'll run
the migration like this we'll just say
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 ethereum
cryptocurrency balance has actually gone
down by a little bit that's because
deploying smart contracts to the
blockchain actually costs ether it costs
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 truffle 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 to the blockchain we'll do
that like this we'll say truffle
console
now we'll retrieve the smart contract
from the blockchain like this we'll say
to-do list
equals await
to-do list
dot deployed
so to-do list is the name of the uh
smart contract that we created in the
migration we 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 await keyword here so let me
explain that we must interact with the
blockchain in an asynchronous fashion
and if you've 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 lot of different ways to do it
but with truffle version five we've
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 say
to-do lists
all right you can actually see the
result as the smart contract here
and i'll just pull this up so you can
see
let's actually get the address the
contract we'll say to-do list
address
all right
and we can see this is the address of
the smart contract that's deployed to
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
contract so we'll say to do list
dot count
like this or sorry task account that's
what we called it
all right we can see that is 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 uh
task account
assign it to a variable and say a weight
all right we could say task count two
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 going to
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 going to do inside of here is
create this git 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 add
i'm not sure what all these errors are
sorry i'm going to get commit
i'll say project
setup
all right so that's it for the first
part of this tutorial where 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 in 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 that
we've been working on to-do lists
and we'll 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 task
we'll do that with something called a
struct solidity allows us to define our
own data types of structs
and we can create a new struct like this
we can say struct task follows with
curly braces
and we'll actually give this some more
attributes in a second
let me pause and explain uh some more
features of solidity right solidity is a
statically typed language in fact you
can see the data types listed here you
know uint this is an unsigned integer
which basically just means that it's an
integer uh 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 so
solidity allows us to define this uh
struct task here
and we can give it some attributes like
this we can say uint
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 would have a sign in
front of it that'd be a sign 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 will 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 the to-do list 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 task account
remember task account is getting written
to storage it's a state variable it's
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 uint
say task
okay now mapping and solidity is a lot
like an associative array or a hash in
other programming languages where you
store a key value pair right
and when we declare this mapping here
we declare the data type 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 a
uint an unsigned integer that will be
the id essentially of the task that
we'll store here
so we can look for task you know one two
three and it'll return the tasks okay
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 we'll be able to
use this task id reference here and
store the task like this
so now we need a way to actually put
this task struct
inside of this mapping
to do that we'll create a function
called 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 we'll say
string
memory
say content
let's be public
all right now inside of this we're going
to 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 going to create
right
so that's why we're using task count
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 uh 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 we call this uh it'll
change to one and that means the first
task that we put inside of this mapping
whenever we call this create task
function will be one and the next time
it'll be two the next time it'd be three
so now let's actually put it inside the
mapping we 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
uh
you know the key which will 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
just copy this
and
we say task
count
we just provide the arguments for the
structs 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
all right
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 want to 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 maybe init
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 all right
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 we'll just pass in uh check
out
app university
dot com
all right i'll 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 tasks out there
will be something they're forced to see
and that way we'll know that this worked
properly whenever we look at this in the
console and connect our client-side
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 may have some syntax errors or
something like that we'll see
all right it worked so now let's
actually open the console to see if it
worked we'll 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 we'll say truffle
migrate i'm just going to pass in the
reset flag
to 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 to the
blockchain if an existing one um is
already there
so like if you 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 uh 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 it like this truffle console
and what we'll do is actually list out
the to-do items so
first i will just get a copy of the
to-do list we'll say to-do list
equals await to do list.deployed
all right let's make sure the address is
there say to do
this to address
oops
misspelled that
okay
now let's actually list out the items
now let me explain something about this
mapping
we want to call this tasks function
that's provided by solidity
to list out the task 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 and natively to know how big it
is inside the smart contract
um 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 task
account counter cache here
so if we know that this task count is
one that means there's only one task in
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'd call this
function once with one and that would
return task number one we'd call it the
second time with two and that would
return task number two et cetera et
cetera until we get 10
which case it will return task number
10. so that's how we would do that and
if you're 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 await
to do lists
dot tasks
and we'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 dapaniversity.com
we can see that it's completed as false
we can see the id is one it's a big
number but we can actually do that
inside here we can say task
id
two number
right it's one
task content
sorry it's not 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 we'll just say
this
say source so we see a new directory
came up here
and we'll create a new file inside of
here called index.html
sorry say touch
source index.html
and we'll create an app.js file to store
all the javascript code say touch source
app.js
okay
stepping over the project and see
we have an empty app.js file and an
empty index.html file
and another file we actually want to
create is um
a bs config file
so bs config stands for browser sync
configuration i mean browser sync is
something that we use
uh
as a part of light server so if you go
to your package
uh 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
client side 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 we'll do that like this
we'll actually create a new file say
touch bs config
dot uh
json
okay
so inside of this file i'm actually
going to paste in some code
um and you can actually get this
configuration
from
the
project
from github down in the description
below
let's paste this inside of here
and don't worry too much about this this
is all just proprietary
uh browser sync configuration so
basically we're just saying the server
configuration is uh 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 our web server root and then also
we're going to mask a vendor with node
modules so any uh node modules that
exist inside our project we can
reference those at the vendor route
all right so there's a server
configuration
and now we actually want to fill in the
index.html file
now likewise inside of here i don't want
to spend a bunch of time writing html
and css so i'm going to just paste in
uh the code
from the application and again you can
just pull this source code from the
github link down below
i'm just going to paste this in like
this what we'll do is actually build out
the javascript part
but i don't want to spend too much time
writing the html
all right
so i'm going to paste this in here
i'll explain you know what's going on um
basically you know we're pulling in the
twitter bootstrap framework to write the
front end so we don't have to write a
bunch of css and ui elements ourself
um you know we can see this uh
bootstrap that was what i showed you a
second ago in 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 um
have a way to list out the tasks here
so for now i'm going to just uh
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 the server in a new tab
i'll say
uh
npm
run
dev i believe is the command
all right yep that worked
so you can see uh that we basically got
something right we see it's loading
that's fine um if you open your console
i'm sure you'll see some errors or
something like that yeah failed 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 nav bar
up here we can see the dav diversity
to-do list you actually click through
this link it'll take you to my website
which is pretty cool
um but yeah so let's fill in the project
and actually list out the to-do's in
this client-side application so to list
the to-do items we essentially
want to fill in
uh 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
all right so in order to do that we need
to do several things inside this app.js
file this is where we'll actually create
um you know our javascript app that
talks to the blockchain so the first
thing we'll do is actually create an app
like this let's say app
this is object
okay and we'll create a load function
and actually call this async
we're going to use a lot of async
functions inside of 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
uploading
and in order to load the app whenever
the project loads we'll just say
say window
when it loads
we'll just uh pass in a function
say app.load actually didn't mean to put
that inside this object
do it like this
all right so let's reload
all right so we see the app's 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 await
app.load
web3
we want to load the web3 library in
order to connect the blockchain now when
we load web 3 i'm actually just going to
use the configuration that's specified
by metamask themselves right what we're
doing is creating a way to talk to the
blockchain we want metamask which is
going to be the browser extension that
we use to connect to our dap our
blockchain application
to talk to the blockchain with web3js
and metamask actually suggests a way to
do that so i'm not going to reinvent the
wheel here i'm just going to do what
metamask 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 then 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 i've fully explained web3 js very
well and what's going on here okay
so remember this to-do list 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 that's what we'll use
metamask for
right
and then our client-side application
needs to actually connect to the
blockchain and that's what web3js is for
so inside of our project we'll use the
web3.js library to talk to the ethereum
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 metamask will allow us to
you know communicate with that client
that application with web3js and allow
us to you know interact with it via our
browser
so what we did here was just loaded up
web3.js
you know loaded our blockchain
connection essentially we even call this
like connect to blockchain if we wanted
to um
and
now we'll actually use our browser to
connect to it with metamask
so let's actually do that i will
open up ganache
let's actually find the private key here
we'll show the key
copy it
all right
we'll go to metamask
and make sure you've opened this if you
haven't already
and what you want to do is connect to
the private network which is localhost
7545
right so you might see the main ethereum
network
first but you want to change networks to
localhost 7545 here
and what you want to do is click this
accounts menu you want to import account
and you want to paste in the private key
select 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 in
metamask 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 refresh that all right and you've got
um your account connected to the network
now let's
take that account
um 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
create a load account function say load
account
this would be async
and i'll say app.account
equals
each
counts
zero
okay
so web3 here
was set by
uh
load web3
and it has this eth object that's going
to contain all the accounts which will
be an array once you get the first one
which will be the account that we're
connected with inside of metamask
and inside the load function i'll say
await
load
account
app.load account okay save that
and now
inside of the index.html file
um 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 it's actually just
console.log
and see if it worked properly
all right yep there we go we can see it
here
we can verify that's the same account in
metamask so e925a
and that's e925a all right so we've
successfully retrieved the account from
metamask and we'll 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
uh in order to do that we'll say load
contract
say async
pass it a function
um and inside of here
the first thing we'll do is actually
pull out
um the smart contract json file say
const
to-do list
equals
a weight
let's say
jquery get json
let's be to-do-list
okay
so if you remember inside the bsconfig
file
we exposed the build contracts directory
to the root of our project so we can
call this to-do list.json file we're
actually pulling out this file right
here
and we can log it
we can log it but in order to do that we
need to call this function say oh wait
contract
okay
all right we can see it here here's the
to-do list uh 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 going to
paste in some code that shows you how to
do that do like this
okay
so this will be
uh we'll call 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 created by truffle
and it's gonna allow us to you know
interact with it and we'll set the
provider which is the web3 provider
which we um
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
going to be able to do stuff like you
know call all the functions that we
coded inside of here like the tasks
function the task account and things
like that so let's clear this out
and just save and refresh and see if
everything worked
all right so to do list of undefined
let's change that so we actually need a
place to store this contract so i'll say
this
let's say contracts like this
we'll actually create an empty object
okay
we'll refresh
if you guys get stuck on any of these
steps feel free to clone the repository
and see the code um
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.deployed
we're going to do the same thing here
so we'll say app.to-do list
equals await
app.contracts
to-do list
deployed
okay
and you know this is really just uh
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 render
some 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
and remember we got this place to show
the account right here
so that's exactly what i'm going to do
i'm going to 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 weight app dot render
all right in order to see this change
we'll actually 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 um 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 um to save
some screen real estate so you guys can
see
both things happening as i'm doing the
tutorial
all right
so let's do some more things inside this
render function what we actually want to
do is render the tasks
um
but i'm going to basically create some
other logic inside of here uh to prevent
double rendering
all right
so what we'll do
is do a couple things
we will
say that the app is loading
we'll keep track of that like this
let's change this to false whenever it's
rendering we'll save is loading stop
calling this function this will
basically prevent a double rendering
problem
and while this is loading we'll 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 going to
paste some code in you can find this
code in the uh github 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 that 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
all right i'm going to show the loader
hide the content
all right so let's save that and see if
there's any errors
all right
so that looks like the loader went away
which is what we want
all right now next we want to do is
actually fill in
um
the
tasks who actually want to render them
so we'll list out the tasks inside of
its own function like this we'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 going to have a check box and the
content
we're going to you know fetch this off
the page and create a new task with this
okay
so first what we think 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 task count
equals a weight this is app.to-do list
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 we'll
use to list the task on the page
say const
task template
equals
task
template
okay
and now we actually want to use this
task account to
um
render out each
task on the page in order to do that
we'll create a for loop in javascript
like this
if you've written some javascript before
it should look pretty familiar we're
basically just saying
for every number
from
one
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
10 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 task equals await
do list task i which is the id in this
case
and so because of how truffle contract
works this is actually going to 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 second
item is one third item is two
okay so now we'll have the task
um id content completed
the next thing that we'll do is actually
create the html for the task like this
i'm just going to paste in this
all right
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 right we'll
get a new copy
we're going to find the content for this
template we're going to fill in the
content from the task
and we'll find the
input which will be the check box and
we're going to populate that with some
values which will be the task id so
basically whenever we check this we'll
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 uh
on click function which will be
toggle completed it will implement 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 task in
the crest list so i'm going to paste 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 um sorry here's the
completed tasks and then the list for
the non-completed tasks
and if the task's 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 let's show it like this
okay
all right 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
render the account we want to run the
tasks like this
so let's save this and see what happens
we might have some errors but we can
just address those as they come up
oh no 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 check
out dap university so i'm actually going
to do that i'm going to right click and
go to dapuniversity.com
awesome so it worked
see my social links here and get my
twitter
it's pretty cool
all right so i know we've covered a lot
of ground but we have successfully
listed the tasks inside the client side
application okay
um i've commented a couple things out
here because we haven't implemented them
just yet but if you get confused just go
rewind the video and uh you know find
what you might have gotten lost
the next step we want to do is actually
write some tests to ensure that the
tasks were listed out properly okay
and we're actually going to use the moca
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 we'll create a new file in the
test directory let's say test
to-do list
dot test.js
if you go into the test directory you
can see the to-do list.test.js file here
all right so let'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 we want to do inside of
here is actually require the smart
contract like this
that's very similar to our migration
file pattern
say contract
and we'll say to-do list
we'll pass in a function here
all right and we'll write all of our
tests inside of this callback function
this callback function is actually going
to expose all the accounts uh in the
blockchain right so all the accounts
that are connected to 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 we'll
basically just say
before
each test runs that's essentially what
this means
we're going to pass an asynchronous
function that should allow us to use the
await keyword let's say this dot to-do
list equals to-do list dot deployed
okay
and before each test runs we'll have a
copy of the to-do list is deployed to
the blockchain
now let's create our first test example
we'll just say it deploys successfully
all right we'll 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 just want to make sure that
the address exists
so we want to check that it's not
um you know empty so we'll do that like
this
say assert
not equal
this address we don't want to be 0x0 we
don't want it to be an empty string we
don't want it to be null and we don't
want it 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
okay
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 tasks 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 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 then 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
will 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 was set correctly so let's
do a basic test and just try to run it
and see if it works
all right it works
so let's look at that we 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 um
the task number is the same as we expect
so let's just do that like this paste in
some examples we'll say assert equal the
task 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 we want to say that the task
count is actually 1 we want to specify
that it's 1 in this case
so let's say that run the tests
all right passes all right so that
concludes this section where we've
actually listed out the tasks in the
to-do list i know that 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 going to go
ahead and commit these changes let's say
git add
i'm going to say git commit
all 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 in the
console and things like that
so what i'm going to do is actually add
a new line here
and what i want to happen is to
broadcast an event
that this task was created
let me 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 uh whenever the
event happened and events are really
useful because
you know whatever we call this create
task function we don't always know when
you know the transaction actually
completed we don't always know when it
was mined and things like that and it
can be really useful to listen to those
events uh in order to you know know that
it was finished
so we can create an event in solidity
before we call it here we need to
actually declare it inside of our smart
contract
we'll just do it like this
we'll go below this mapping we'll say
event we'll say task created
and notice that's capitalized
all right here's a semicolon here and
we'll just add some arguments to this
event we'll say uint id this will be the
id the task that was 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
we do like this we use the emit keyword
emit
task
created
and we pass in the arguments so the id
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 to these
events you know inside the client-side
application or you know anywhere that
can listen to events on a smart contract
all right while we're here i'm going to
go ahead and actually write the tests
for creating the to-do item
so i'll open the test file over here do
the side by side and i'll just create a
new example down here so below list
tasks we'll say it creates tasks
i'm just going to add some space so you
can see better
so say it
creates tasks
all right let's say async
pass in a function
and first we'll say
construct
equals await this dot to-do list
create task
and i'll say a new task
okay
and we'll check the task count
oh wait this dot to-do list
task account
all right we'll fetch that
and first we'll check that the
task count is the same as we expect say
two so that's the first thing we'll
check on
we'll 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 into the logs
uh and say that the id was the same the
contents the same and completed was the
same so that 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 going to use this
result which was you know the result of
this
finished
create task function right we use the
async weight pattern to get the result
here and the event is actually contained
inside of that
so we'll say const event equals
result
logs okay it's in their logs and it's
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 in
ganache
you could actually console log this
event in fact let's just do that right
now let's just say
console.log
result
go to the terminal truffle
we'll show you the result and what it
looks like so you can see what we're
digging into
all right 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 going to
have an object and granted we can't see
exactly what's inside of here because
it's not locking 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
now
i will
check to see that all the information is
there so let's say a search
equal
event id
we'll say two number
it's equal to
we'll say a search
equal
event content
is equal to a new task
search equal
event completed
i'll say false
all right let's run the test
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 passed
all right so we can see that our event
was triggered whenever we
called this create task function
all right so i'm going to remove the
space
and that's how you write tests uh for
this create task function and check on
events now let's go to the front end
application
and create tasks that way now before you
jump back into this make sure a few
things are correct make sure that
ganache is running
your blockchain is 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 going to do is actually
enable this form
that i commented out from the previous
steps on the page
so this form is going to have an on
submit function create task which we'll
build here in a second i haven't done
that just yet but i'll just refresh the
page and show what it looks like all
right
so we'll see this add task
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.js file let's
actually add the create task function
we'll do that like this
let's do it down here below the render
function
all right we can say oops
create task
this will be an async function
so what we'll do is say app dot set
loading
to true
okay
so whenever we call this we want to show
the loader
and we'll do that 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 uh you know sorry it's
the name of the the input it's on the
form see 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 new task value
and now we're actually gonna call the
smart contract function we're going to
call this create task function uh with
we know web3js with the truffle contract
library and talk to the blockchain in
order to actually update it so we'll say
a white
app.to-do list
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 going to 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 reload the page
like sometimes i can get into a double
rendering problem so i'm just going to
um
actually just reload so i'll say like
window dot location no 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 going to open the console and see if
there's any errors
nope we're good all right so we'll say a
new task
or we'll say task number one
task
number one
and like i said there's no button here i
just want to hit enter in order to make
this work so i'll hit enter
and i didn't put a button on here just
for simplicity's sake
i'll say confirm
all right there we go
so we successfully added a task we can
see task number one was added to the
list
and and if you go and check ganache
you can see
uh 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 looks like that's the same one
and also you can go to your logs see the
same thing
and scroll like crazy i think there's
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're doing this kind of stuff
all right 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 going
to go ahead and commit these changes
i'll say get ad 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 striked out
so we'll do that like this
first we're going to go to our to-do
list we'll create a new function
we'll call this toggle completed okay
so i'm going to give you some space down
here
say function
toggle completed
okay so what do you want this function
to do
so we want to take this uh you know
struct these task structs 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 it to false and it's already
false when i change it to true so
basically if someone checked this item
uh 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 task that we
want to actually toggle
so we'll do that like this we'll say
uint 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 task you
know tasks count we can do the same
thing we say task and we can read the id
like this say id
so that will actually 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 going to 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 state variable um it's not
necessarily specific to solidity it's
just a convention right you see this
here in fact i'm going to do this like
this as well id
see you know content is underscored here
because that was a local variable that
was passed in the function
id is the same way and i'm going to do
just task like this because i don't want
to assign it to the state
um there's nothing special about doing
that it just convention
so now i'm going to say task
dot completed
and we basically want to do the opposite
of whatever it was before
so we can read the value of whatever it
was before like this we just say tasks
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 um we're going to put it
back into the mapping
so just like we did tasks task count
equals this
we're going to put it back into the task
mapping say tasks
uh id
equals
task
all right
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
um i want to emit an event just like in
the create task function
so first we'll declare an event
we'll just say
event
let's say task completed
all right
and we'll give this two arguments we'll
say unit id
say you
went or sorry bool
completed
all right
and now i will trigger that event inside
here say emit
task completed
id
task completed
all right and that should work a lot
like our create task function where that
will emit an event anytime this
function's called
okay so let's actually write a test to
make sure this works before we you know
wire up the client side application
we'll go to the uh test file right here
and i'm actually going to split this
pane uh vertically all right so i've
just split this pane
um we've got a test file down here and
the smart contract cut up here so i'm
just going to focus on this we want to
just test this function unit test this
toggle completed
so i'm going to create a new function
down here and give ourselves some space
or sorry new example
that will say that it toggles task is
completed so i'll scroll down a little
bit actually just uh
copy this and paste it again to give
ourselves some space and
have some boilerplate so we'll say it
toggles
task completion
and i'll clear out all this
actually let's do this let's say result
equals this dot to-do list dot toggle
completed
and i'll pass in
uh
one should be the first task
and we'll get the task itself
we'll actually retrieve the task
now pass in id1
all right
and we 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
all right does that make 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 so let's
just review
so we're toggling completed we're
calling this function
passing in the id of the first task we
know there's a task already in the to-do
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
um
but the next thing we did was we got the
task right and we checked that it was
actually completed right so 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
um so we took the event and got the id
made sure it was 1 and then looked at
completed and ensured that it was true
all right so let's try to run the test
all right it looks like i've had an
error
let's go back to this code we can see i
forgot the underscore here
let's run it again
all right it passes awesome
okay so i'm going to 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.js file and i'll
create a new function down here
i will call it
toggle completed i believe this is the
same name as the smart contract function
so below create task we'll say toggle
completed
i'll say async
pass it a 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
going to be on a on click event because
whenever we click this check box uh
we're gonna you know have an event
listener that calls this function
so i'm gonna pass in the actual event
itself
we'll just use e for short
and that event is gonna contain
the name of this check box
which the name value is going to be set
to
the actual task id
so we'll say e target
name
and now i'll say
await we're actually going to call the
smart contract function to toggle this
task is completed say app
dot to-do list
toggle completed
i'm going to pass in the task id
all right
and then just like the create task
function whenever that's finished i'm
just going to reload uh the webpage
semicolon or sorry a comma there
okay no errors
but if you remember in the previous
sections
i commented this out so i'm going to put
i'm going to re-enable this this is
where we actually wire up the on click
handler to do this so now
whenever we're rendering the tasks out
we found you know the check box and 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 looks like we got
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 going to
leave this in the recording because it
kind of shows you the nature of
blockchain 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
so we added a new function to the smart
contract and it worked on the tests um
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 dash dash reset to deploy a new
copy of the smart contract to the
blockchain
and whenever we do that we're going to
want to refresh our web page to pick up
that change
all right 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 um and hopefully that'll
help you remember
all right so we'll 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 a
new 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 we'll say task
number one
about a few
we'll just sign these really fast
task number two
task number three
all right so now it's actually toggle
one is completed and we see the metamask
confirmation pop up we'll sign it
confirm
and there we go
we've actually successfully uh checked
off task number one from the list and we
can see that it was added to
um
you know the list down here below so we
can you know actually to do the to-do
item on task number two we can go to
dappyuniversity.com
all right we see it awesome we went
there
and now we can go here and check that
out 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 ethereum powered by smart contracts
and you've created this client set
application to interact with it so
congratulations
i hope you all like this tutorial
again be sure to subscribe to the
channel if you haven't already and also
don't forget you can download
you can just sign up for my email list
to you know get my courses downloaded
for free and also you can you know keep
up with 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
for that email list to find out more
updates about that it's going to be
really extensive it's going to be really
awesome
you're going to want to learn about it
so just stay in touch and also by the
time this video is 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 it'll probably
be in the video description below as
well you can see other articles on my
website here
um
like you know this is the uh ultimate
ethereum dap tutorial which i released
last year uh which is a pretty popular
tutorial that shows you how to build
your first decentralized application i
mean you can code your own
cryptocurrency on ethereum
you know build an erc20 token and stuff
like that got some other deep dives on
topics like you know web3js which we
talked about some in this tutorial
um you know a lot more lessons on
solidity how to develop smart contracts
i kind of go into more features of 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 you know production ready ico
that you could 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 um you
know i am available my email address is
down below i do a lot of you know
blockchain development a lot of
consultation and advising for people who
are launching blockchain startups icos
things like that i've got a complete
solution for launching an ico 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 like i
said my twitter's here things like that
so again i hope you all liked this
tutorial until next time thanks for
watching dap university