Transcripts
1. Course Introduction: Blockchain is the driving
force of the next generation, which is also referred
to as never treat. Blockchain reinvents the way
data is stored and managed. Web three embraces
decent religion and is being built and
owned by its users. So as a result, a lot of new opportunities for developers
like us in this domain. In this course, we will
learn how to create a complete de-centralized to
do replication from scratch. We will be using solidity for the smart contract development hardhead for testing
and deployment. Thirsty is to communicate
with the contract. Mcnemar's to sign
the transaction, React JS for the Fontan, and ultimately as the
blockchain would provide them. By the end of the course, you will understand all
the concepts required to apply for a developer job aren't even build your
own application on the Akkadian blockchain
without wasting any more time. Enroll now and
let's get started.
2. Discussing course curriculum: Hi, welcome to the very
first video of this course, where we will learn how to build a real-world decentralized
application. So at present, everyone is
talking about the web tree. And even if you know
the basics of web tree, until and unless you develop a full fledged application
using all the technologies, you are not considered
as a developer. Obviously, you should
know solidity, react, hardhead, an E test.js. At least you should have
some knowledge of what does these technologies to in order to continue
with this course. Because here our primary focus will be building the
complete application. So before moving forward, let's discuss about the course. Curriculum are, what are all the steps we will
take in this course. The first step will be to set up the development
environment using hardhead and further KTM node. We will use the alchemy service. Then next, we will write the smart contract logic using solidity for that
to-do application. That is, how to add our
display or remove that to-dos from the blockchain
to our application. Then we will write the
unit test in order to test the working of the
smart contract logic. Then we will deploy
smart contract to the network that
is that test network. Then, then after we will create the front-end of the application using the React framework, we will, we will develop
a very basic app. Then using a thirst
dot js and MetaMask, we will interact with
the smart contract, which is already being
deployed to the test network. And at the very end, we will check all
the functionalities and the working of the
decentralized application. So that's it. And also make sure
you have installed MetaMask and have some test coldly details in your account. I'm not going to set up
again as I have already, deciliters and
everything in my wallet. So please watch any tutorial on it and continue
with that course. It is very simple. So that's all for this video. See you in the next
session. Thank you.
3. Setup hardhat project: In this video, we
will learn how to set the development environment for our application with hardhead. So the question arises, what is hot at hardhat is an environment
developers used to test, compile, deploy, and debug decentralized applications based on the Itanium blockchain. Its competitor is
known as truffle. In this course, we will use
hardhead, but later on, if you want to explore truffle, please go ahead
because you never know which one will be used in
your company's project. Now, let's start
doing it by creating a folder named to-do app. First create a folder. Then inside that folder
of Penn eight terminal. And initialize an
empty NPM package using this command
and BM in it hyphen. Why? Now we have this
package.json file. Then to install hardhead. Simply remember
this command, npm, install, dash, dash,
save, dev, hard hat. It will take a very
little fraction of time. It depends upon your
Internet connection. But hard hat has gained a lot of traction within this
viewers earlier it was only truffle. Also. It's done. You can just see there are
some and BMI will ever, it's not that important. Then after that, just
write np x hardhat. It will help us to create
a hardhat project. From the options, select
the first one that is create a basic
sample project. Then press Enter,
press Enter. See. These folders have
automatically been created. And also hardhead is telling us to install
these dependencies. This will help us with test, well with careful
and ethers library to interact with
the smart contract. So simply copy this and
paste and press Enter. Just remember,
these dependencies are important whenever
you are using hat. Also, if you want to know
more about hardhead, you can go to their
official website, hard hat dot ORG and just
read about this stuff. Right now I'm just assuming you know the basics of Hardhead. Whatever code I have written, you can find it in the documentation section
of their website. See npm install save-dev heard had an NP x that
gives us this option. Then it will tell us to
install these dependencies. That's it. Now, let's see. It's still installing this. This will also take some time. Till then. You can just check out the
official documentation. Okay, it's done. Now. We will install a few
other dependencies as well, which is not related
to hardhead. Simply write npm install, then. Ben Zeplin slash
contracts and dot ENV. That is, these are two different dependencies
of pens up plane is, has predefined methods
which are already tried and tested to be
used in any project. If later on we will need it, then only we will use it. And dot ENV provides
functionality to write sensitive data in a
separate file imported. Now, we have our project,
hardhead project ready. Just append our project in the VS code file, open project than three. And to do that, K. And also we just make sure you have these extensions installed. That is mainly solid. The d this solidity extension is being installed in your VS code. Yeah, that's the only
dependency required. There's not a
dependency extension. That's it. The hardhead project is now set up successfully. In the next video, we will include our setup, how Alchemy and MetaMask. Thank you.
4. Alchemy and Metamask keys: In the last video, we have successfully
set up this project. Now it's time. We include alchemy. Alchemy is a developer
platform that empowers us to build
scalable and reliable, decentralized applications
without the hassle of managing blockchain
infrastructure on our own. So simply go to alchemy.com
and create a new account. I already have an account, so I will login into it. We'll redirect to our dashboard. Here. The first thing
we have to do is create a new app by
clicking this icon. Simply click here,
then give it a name. I will give it. To do that. It will be a medium chain and
network will be coherently. And now simply click
on Create app. Then here, below this API key, click on View key and
copy this HTTP link. We will use this
HTTP key later on. Now, the next thing we have to do is get the private
key from our MetaMask. You can install
mathematics by going to matter mass dot au website, and then install the
extension for the browser. If you're here,
I'm using Chrome. You might be using
some other browser. I'm not going to set up
the wallet from scratch because I already have a
thirst and everything in it. Make sure you pause
this video and watch the setup of
new MetaMask wallet. And also how to
get test a test in that account from
YouTube or via Google. So simply click on this icon and then
enter your password. And make sure to change
the network to coldly. Here I have polygon hardhead, these are custom networks, but makes sure you have coli network and have
some tests ethers in it. Simply to get that private key, click on account details here, then click on Export private
key and enter your password. Make sure you never disclose
these key with anyone else. Your accounts address, that is, this address is your public key. If required later on. Now, we will use alchemy URL and Matt Thomas private key in
our hardhat configuration. For that, go to your project. And we have already installed
the required dependency, which is that dot ENV. As I already said, it is not recommended to paste those sensitive information
directly in the code. Now, in that project folder, create a new file
called dot ENV. Say this is in the
root directory. And then paste the paste
here, all the keys, that is by creating variables, alchemy, URL and wallet. Private, private key. Then copy and paste. Again, just simply
go to my Tamas. Then I count it is
export private key and copy and paste it here. That's it. Now we have the keys. We have to configure our
hard hat dot config dot json file for those keys
simply at the very top. This code require our dot ENV package dot config. And then in this module
that exports file, simply write networks,
then go linear network. And here in the URL, we will write process dot
ENV, dot alchemy URL. And in the accounts, which is a list, we will write process dot ENV, vallate, private key. That's it. This is how we configure
alchemy and MetaMask with our hardhead projects so that later on we can deploy
to debt network. Thank you, That's
all for this video. In the next module, we will create the
smart contract for our Todo application.
5. Creating a Task Contract: Welcome back. Now it's time we create our
solidity smart contract. Simply go to contract
folder here you will see a dummy contract which is greater that soul,
we don't need it. We won't do anything to it. Simply create a
new file and name it task, contract, soul. And now let's create a
new contract before that. At the very top, just make sure you include that license and
thus solidity version. Then we will create a contract and they
made the task contract. Now let's start with the
new struct, which is task. Our task will have ID. String, does that text, that is the title of task, and a boolean is deleted. Then this truck, let's have an array which will hold
all these task struct, which will be a private array, and we will name it task. Then definitely someone
will add a task. So we will map task ID to the address
of death owner. So we will just write
it task to owner. And also we will
have some events. That is, our first
event will be at dusk. It will have recipient dusk ID. And our second event
will be delayed dusk. It will have dusk
ID and a Boolean. So let's understand this code. Again. Events are used to log information
in that blockchain. We create a task structure. Solidity allows
the user to create their own datatype in
the form of structure. The structure contains
a group of elements with a different data
type is integer, string, boolean,
whatever we want. Then we have this
task which will hold all that task which are present in our
smart contract. And then we're simply
mapping that task ID to the address of the
task or not so that we can get or we
can search very easily. Next thing we will do
is create functions. The first function will be
function to add a new task. Just write function at dusk. It will accept task text. This is simply is the dead
Boolean and make it external. Definitely it will be called
from external front-end. Then first thing we have
to get is the task id. And simply what we
will do is make that length of this
array that task ID. So the first will be 0, then it will be one. And definitely
after incrementing, it will be different. Then we will simply
push to this task, Eddie, our new task. We will create this task. And since it is asking us id, we will give the task id here, then does text and is delayed. Did see these all these
all we have to send. Then we will map
this information in our task to honor mapping, simply writing the US to owner, then the dusk ID. And this belongs to this, a message sender who is requesting or this
calling this function, that person's at
rest will be stored. And simply, at the very end. We will write that. We will call the event. And the event name is add. Task. Recipient will
be message sender. And task ID is that task ID. So this information will be
stored in that blockchain. So that's it. I hope you
understood this function. Simply a function
called Add task. It is accepting, does desk
and is deleted value. Visibility is external, as we're not calling this
function within this contract. So we have just simply
wrote external. Then for the task id, which is simply make
the length that is at the very
beginning, it will be 0. Then once dusk is been added, the length will be one. And it will be random, always S, as we are pushing
this task inside it. So it will get incremented
automatically. Then we're mapping
to task two, owner. And then finally we are
emitting this event. But that's all for this video. In the next video, we will write the other
two functionalities. That is that Delete
Task and fetch my task. Thank you.
6. Delete and Fetch Task functionality: Now in this video, we will write the functionality
to delete a task. Simply write function
name, we delete task. Then it will be an external. Also. To delete the task, we will ask for that task ID. And Boolean is deleted, which will be true. Now, first, we will check
the mapping, that is, whether this sender
owns this task or not, suggest we will write two owner this dusk id equal,
equal message sender. If it is true, we will simply go
to task structure. It is to this task ID. Then dot is deleted, equal to is deleted. Then I meet that delete dusk event and give does Eddie
and is deleted parameters. So simply, we wrote
this delete function. It is asking task
ID and is deleted. It is an external function. Then before deleting, we're just having a small
check whether this task belongs to the address of this
Cinderella or not. If we will go to this
this task, Eddie. And simply in that task ID, that is the position of the task in this array
as see this task id. The id is the position as well. So we will simply go and write, does id dot is deleted
equal to this deleted? Whatever we are sending, which will definitely
will be true. And then simply, we are emitting these delays,
delete task, even. Then, the final functionality will be to fetch or
to get our own task. So simply write
function, get my task. It will be an external function. It will simply view that
it won't change anything and it will return task. That's a really done ask an
eddy of task. Inside that. First, let's create
a temporary task at naming them pretty. And we renew. The length will be
dusk dot length. Then what we have to do is definitely in this task at all, the tasks are being good at
is this user or whatever, 1015 users, whatever
users they are, all the task will
be in this array. So now what we have to do, we have to loop
through this array and find out what are
the tasks which are belong to this sender and then store those task in
this temporary array. So since we will do a loop, Let's first have this. That is, this will
be the count of the number of task
owned by this user. Then we will have a for loop. You and I is equal to 0. I less than dusk, dark length. And simply I plus plus. Then we mapping,
we will do what? We will use the mapping. Then does id starts from 0? If it's equal to message sender. And if the task property that is this is
deleted is false, that is not being deleted yet. Then in this temporary array
with this counter position, simply to this task structure, definitely in this task
edit data structures. So it will get stored in this temporary array at
this position that is 0. And then we will increase
the counter that is now, it will have one task in it. And then again, it will loop. If it finds that the
owner is the same. Then again, at one, at one position in this array, it will store this NesC next task and change
the counter to two. So this is how it is working. Now. We have the
temporary variable, that task which are
being owned by the user, but that length of that task is greater and
the elements will be less. So it will just take
up unnecessary space. So what we will do is create a new variable called result. And it will be an array of length counter
that is only debt. And simply, we will loop through
this temporary variable, U int I is equal to 0 I less
than counter I plus plus. And that is simply copy and paste everything which is there in
that temporary. And at the end, return this result variable. So this is the
logic behind that. Get all my task functionality. What we have done is first, we will create, first we
have created this function. Visibility is externally. It doesn't change
anything so it's view. So definitely it is not
taking any gas phase. Then we have to specify
what it is returning. That is an array
of task structure. Simply, at the very beginning, we have this temporary variable, which is just
storing the memory. And it is an array of length, task dot length, which
can be suppose 100. Then we have this counter is 0. That is, what are the order? You can say, how many
tasks does this user have? Then in that for loop, we're simply looping through
all that task present here and checking if
the owner of that ID, since the idea also
starts from 0, this task ID, see here. So task ID belongs to
the message dot sender and task I position
that is 0 position. Suppose it will start and
is deleted. Is deleted. You can say property is
false because we want, we don't want to show task which are deleted or which this
function will make it delete. And we will find, we will store here all those
in this temporary variable. And now since the
length is bigger, or the task might be ten, but the length is 100. So we're just creating another
variable called result. And copy and pasting all
the elements present in this temporary to this result variable and it
will be less than counter. And finally, we are
returning the value. You will understand the
concept once you use it. Or if you want, you can
just pause the video and try to understand
it again and again. Because these concepts
are very important. That's it. We have successfully
created our smart contract. In the next video, we will do the testing of this
smart contract. Thank you.
7. Writing test for our contract: Hi. So since we have our contract
ready in this video, we will test all the
functionalities. We already know that
blockchain is immutable. So before deploying
our contract, we write unit tests to make sure all our functions and variables in our smart
contracts are working. And returning that
correct values. We are using Mocha
Chai for this purpose. Just remember, we have installed these
dependencies while we wear Installing and set up on installing
hardhead in our project. So simply go to dest
folder and inside it, create a new file
by the name dusk, contract, test dot js. And the very first, import our libraries
that we will need expect from the child library. And then we need e tos from the inter-library, Saudi from the hardhat library. Now, let's write our test code. Describe, we will name
it dusk contract. Then we will have this function. Simply removing the
arrow function. If you want, you can
have the arrow function. And before writing the test, we will have some variables
to this contract. Then we will have this
within this small letter, we will have does contract. It will be the object or the
instance of our contract. You will understand
this later on. Then we will have the owner. And now, since it's a test, we should have some dummy data. So the number of the hotel or the dummy
task will be five. And also we will have a
variable called the ask. More car uses hooks to
organize its structure. This desk cried G word is
used to group our test, which you can nest be as, as long as you want it. This is, again you
can write described. Then again you can
write this like this. Then it has other hooks as well. It is I d, this is also one hook. It is a test case which we will use in the upcoming videos. Then we have before hook here in the more calm library. This before hook is run
before the first eat. Our desk scribe. That is, if we write just before, it will run before the first
are the describe block, then we have before each, which we will use it
to run before each. That is, it will run before each clause
or the statement, or eat or describe the prints. Then we have after it. It's a hook to run after that. Is it really run off? Eight are described. At the very beginning. I told you about this. Id. Hook. That test cases. Cases like this, we have. Hooks and most important
is before each desk guide. And let's say now, let's use that before each. Before each. Sorry, it will be like this. And inside this we will
have a sinc funtion. Here we will deploy
our task Contract. With this variable. We are using this
variable first one and simply write await, eaters, dot get,
contract factory. Our contract name
is does contract. Then we have the owner, which will come from a weight, eaters dot get signers. Then within this
small tasks contract, we will have that instance
of this deployed contract. This is just a simulation. Then this task will
be an empty array. And we will insert dummy
task inside this total task. It is I is equal to 0. I will be less than
number of total task, which will be five. I plus, plus. Let's get it. It does. Check is text will be simply that whatever you want to add does number
seems to make it random. Plus i then is
deleted, is false. Then we will have a
weight does contract DOD. At pass function we are using. Dusk, dark, text is deleted. This functionality is
this one that is at does it is asking for tasks
that text and Boolean value. Then we will just simply push, then does Bush dusk. So in this variable, we are pushing this value. So this before h will run, before every test defined. Later on we will
define 23 unit test. And before every test this
piece of code will run. Yeah, we are, we are deploying our contract and then getting an instance and then adding
five dummy task in it. Now, after this,
let's simply create a new desk that is unit
test to add a task. We will describe, as I
told, we can nest it. It is for the Add
Task functionality. Funtion. Then now we will use
the IT, it clause. And this just the
auto suggestion. So id, the desk condition is should meet at task event. It will be a sinc function. At the very top, we will just simply write, create a new dummy task. Task. Text is equal to, new. Task, is delayed
then will be false. Then we will await and use the expect keyword from
that child library. We will expect that
first the task contract. At task, we will
add this new task, dusk, dusk, text, and dusk is deleted. It will emit. It will m it. First we have to
send the instance. And what it will emit at
does that is this one. This at dusk, it
will emit arguments, arguments, owner, address, and number
of total task. So you might be
getting confused. So this is because at the
end of task function, we are emitting the
Add task event. With arguments, you can see message dot sender and task ID. And since this
before each clause, we already have five task. That is, here we are
adding five task. So this sixth task which
we are adding here, we'll have the ID five
as index start from 0. So that is why this is right. The ID will be five, because there are
five tasks in it. And the index is that we'll
always start from 0 in this task, this task ID. If you want, you
can just wait and try to understand
it again and again. Because this is very important. And you make a
quality checks or to compare expected results
against a result. We can use Chai library, which gives us three assertion. That is first one which
we are using expect, then there's assert
and there is should. In this tutorial, we will just use this expecting
that this dish should emit the expected
value or else it will show error and the task
won't be successfully. You can say executed. So that's all for this video. In the next video
we will complete the other two task
and run our test. Thank you.
8. Run the unit test: Hi. Now it's time to write
that final unit test. We have already written the
test for adding a task. Now let's write a test for
getting all that does, that is get on task function. Then in the clause, let it should return the correct number
of total task. Sink. Luncheon. Then let's have gone on. My task is equal to await. Does contract dot get my task? That is, this get my
task, is this one. Get my task. Then we will check
what we will check on. My dusk dot. Length should be equal. This one that is
total number of dusk. So what we are checking is
add this before each clause. We are adding five task in
this, using this, right? Using this, we're
adding five task. So when this condition
will trigger already, there will be five task
in our smart contract. So we will just check
whether it's being properly that is inputted or you can say
it's there or not, we will just check that. Now. The next test simply will be to delete dust
that is delayed dusk. Funtion. Then that condition should be it should emit delayed dusk. It should emit.
Delete task even. Then it is a sinc funtion. Then const dusk
id is equal to 0. Then const is equal to true. Now simply await. Expect. Does contract Dot Delete Task when we call it by
sending this task ID and ask deleted,
it should emit. It should this delete task event with arguments id and dusk deleted. So simply, what
we're doing is we're calling this Delete
Task functionality. And since here it will emit
this delete task event, we are checking whether
it is a meeting or not with that task
ID and this Boolean. And we just remember here
we're simply updating that is deleted value as we cannot delete a data
from a blockchain. That's it. Now, save all. And since we have all that
test conditions ready, it's time to run our test. Simply append a terminal in your root directory and write the command and
px hard hat test. Let's see if everything is okay. Or there might be some
errors. We don't know. Let's see, Let's see if working or not compiles successfully. This greater is the default one. We don't have anything
to do with it. See all the task, all the unit tests have
passed successfully, that is, at dusk, get all does delete, does everything, is working. Just remember if you
ever get any error, then after fixing that error, use the command and
px hard hat clean, and then run that test again
because there might be some cash and you don't
want to get stuck there. But in our case, there is nothing wrong. Everything is working. Congratulation. So that's it for the
unit testing portion. In the next module, we will deploy our
contract to the VLR, to the test network. Thank you.
9. Writing the deployment script: So since our contract logic
is working, in this video, we will write the deployments, create and deploy our contract
to that test network. Inside the scripts folder, simply grow and go and create a new file and name
it deployed dot js. Now let's write
the code required. This first, we will
need Ito's library. Then let's create a
function called main. It will be a sinc function. And then similarly, we will have a contract fact-free track. Three, eaters Get contract. Factory, name is dusk. Contract of this is the
name of our contract. Then we'll have an
instance with this code, contract for trade dot deploy. Then we will wait and
make sure that contract is being deployed successfully. And after that, we
will write console.log and we will output
deployed address. It is very important. Remember this contract, we will use it just said
contract dot address. Now, we have to call
this main function. And simply for that, we have to create another
function called a sink. Since this is the procedure and just remember to do it like we have to call
the main function. And if it is,
everything is okay, then we will exit the process. And if not, we will
catch the error. We will console log the error and simply write process that
exit and an editor. And at the very end, simply call the main function. That's it. This is the way to
deploy a script. We just have to
remember, that's it. Now, That's script is written. Deploy it. We have to use a command. Again. Bring up your terminal
and write np x hard hat. Then run scripts in that folder, go to deploy dot js. Then network we will use is
called early as this name, this G, E, LI, we mentioned it in the
hardhead dot config file. After that, just press enter. It will take some time. So you just have to wait. Because now this will
upload or this will deploy this smart contract to the real test network. Okay? Now it's done. This is that
contract at dressed. Make sure you just copy it and paste it
somewhere, like here. Because we will need it
later on and we don't want to just forget it. Now to check that whether this contract
is successfully there, we should go to courtly
ether scan website. Just click on this,
the first one. Then here, paste that contract address
and click on search. This will give all that
block information. See, 50 seconds ago, this block was created. And with this, we make sure, we are sure that
everything went okay. If you want, you can
just click on it and see from which address
it was pushed, gas price and all. So that's it for this video. Everything is now done
from the backend portion. In the next module, we will set up the front end using the React
framework. Thank you.
10. Working on the React frontend: Hi, welcome back. In this video, we will work on the front-end section
using React framework. React JS is a JavaScript
library which is very popular. And I'm just hoping
that you know the basics of it because definitely this is not
the React tutorial. Our primary focus
will be to just build a basic UI and test
our smart contract. Now for setting up
a React projects, simply go to the open the
terminal and go to that. You are to do DHAP directory
and run that command and px, Create, React, app,
name it client. Now, few folders, structures and file
will get downloaded. For the React application. It will take some time. Then you can just check out your code and see
what you have done. That is the task
contract dusk desktop. And because these concepts
are very much important, as once you build one project, then you will be able to build multiple projects
using the same concepts. Okay? It took a little while, but now everything
is being installed. Go to this client and
you can see we have source oblique and
all folders created. Now, in order to interact with our
deployed smart contract, we will need two things. First, is the contract addressed and the
second is the ABI. To get the ABA, simply copy that task
contract dot json file, which is inside artifacts, that is these artifacts. Then we have contracts. Then we have task contract dots sold. And we have this file. Just copy this file and
go to client folder. And create here, just
inside the source folder, create a new folder called
EBI and paste it. That's it. That is inside client
source folder. We create a new folder called ABI and paste that JSON file, which contains the contract ABI. The first thing I told was
that contract address. We already have that
contract address when we deployed it in
our previous video. Simply create a new
file and name it, config dot js inside client source folder directly
that is here. And name it, config dot js. And simply write the command
export, const, task, contract, address, and paste our address, that is this one. Here. These two were required. Now, we have to install
few dependencies as well. Simply go to blind folded, dislike this CD client. Make sure you are into client
folder and install ethers. That is npm install ethers. This is required to interact with the smart contract
from the front end. And then then next dependency, which is required is npm
install emotion slash edX. Then style. At MU I. I can make ADL. Then MU a deity. That is npm, install
emotion slash react emotions less than MU I, icons material than
MUS slash material. These are simply some
style and material UI related files which
we will use later on. Okay. All the dependencies
are now installed. I just wanted to
see Becky's Jason. Yeah. Everything is there. Now
let's work on that front. The first thing we will do
is inside the source folder, we have, we have app.js. We will remove everything here and start
writing from scratch. First thing we will
do is import, React, use date, hook, use, effect from React. Then we will import the next field Martin from MU material. Then we will import task, task file. And remember, this file
we have not created. We have to create and sick. And then we will import. Simply we will import dot CSS, sweet notes, sss like this. Then next thing to import
is the contract address. We will just said dusk contract address from that config file. Config file. Then we will import it from the library. Then finally, we will
import that task ABI from the folder EBI, then does contract adjacent. So these were all
the inputs required. Then this we have
to write and create an app component and
export component. And again, I am hoping, you know all these
react concepts. Let's create some states. Task. And we will set dusk. Use state. It will be an empty array. It will hold our task. Then next will be input. Input. You state this is that text input
from that text field. Then we have current account. Current account. Use the it will check whether my damask is connected and
then it's account address. And the last one we will have
here is correct network. And it will be set. Correct. Network is
equal to use state. The default will be false. It will make sure that the garlic test
network is selected. Otherwise, it will prompt, alert the user to
change its network. Now. First, let's create two new files inside
the source directory. First will be task dot js. As I already mentioned
that we have to create here, simply here, right? Import does dot CSS, which we will create just now. And this component, that is the task and export default. Dusk. Later on we will send
some props as well. And in that source, again, create a file called dot CSS. So that's it for this video. We have written a lot of code. In the next video, we will work on setting up our Meta mask and how
to connect with it. Thank you.
11. Connect Metamask Wallet: Hi, welcome back. So now the first thing we will do is connect our
MetaMask wallet. Sure, We have to write
a function for that. Let's write it from scratch. I will name it, connect wallet. It will be a sinc function. Now, within the try catch block will write all the
required logic. And in CAD tools
in the console log AD Connect thing to make a mask, the header. And in that try block, first, we will get tedium. Tedium, musical to Window
object, window object. Then we will check if whether we have the
bacterium object or not. If we don't have Italian object, then we will simply
console log met damask. Damask not detected. That is, the user has not
installed that matter mass extinction
in their browser. And if everything is good, then we will check which
network is then a Dharma, my damask, pink connected, that is rinky be
godly, whatever. So we will get the chain ID. Jane id is equal to await
it tedium, that request. Then in them at ten, we will give it chain ID. And then we'll simply console log the chain
AD as well just for our for us because
for the testing and I'll connect it to
chain, chain AD. Okay? Now we will write the chain idea
of the core network, which is 0, small x five. Just remember this is the
chain idea of courtly network. If you are using wrinkle B, then it will be 0 X4. These information you can get in the internet as well.
You can just Google it. So first thing we
will do is check if j is not equal to j in ID, then we will simply
alert, right? You are not to go early network and
simply return from here. And if everything is okay, that is the network is okay, then we will change
the state that is set correct network to true. At least we know that the
network is connected. That is, the right
network is connected. Then we'll get the accounts with this piece of code it
Tanium dot request. Then here method we will use is it request accounts and console log this
information as well. So the log wound account, and then the first account. Accounts the 0 index
and genes does set. That is this value
of current account to my damask account. Okay. So I hope you
understood this code. This is just the way we
connect my Damascus. We just have to
understand what that is. First we are checking whether it's connected
to go with you or not. And second directly, we are
requesting that counts. That's it. Nothing fancy. Just that with practice, you will remember that codes. That's it. Now the function or the
method portion is done. It's time we write the
HTML part as well. So within the function, this third, it is outside
this connect valid function. We will simply return
that component. That is return. And Dave, first of all, we will check whether that current account is empty on the user has connected, it's Matter mask or not. So current account. If it's empty, then then we will do something. Or else we will do
something else. If it's empty, then we will simply writes in
winning the center tag, we will give a button. Button. Class name
will be simply button. And in the on click, event will assign the
connect valid function. Okay? And we will name
this connect war-like. Okay. Now, in the else part, again, we will check if
correct network is there. Then we will do something. Or as we will do something else. And if the correct
network is there, we can simply output it Dave. Simply output a Dave,
I will name it. App. Then. Just simply write H2 tag
and task management, our to-do app, whatever
task management app. Then I will like the form tag. I will use a form tag. And then I will give
it a text field. Text frame. Any button. Button will be capital. Now, just write
this HTML with me. Our focus is more on
the blockchain portion. These are very basic. These on Blake at
first onclick event. I will just give it
another right now. I don't want to do anything. This button will have
at dusk written on it. And in that text field, I will simply write ID,
ID, outlined, basic, then label, make to do. Then variant. Outlined. Then style. I will simply have margin 0 pixels and each pixel is small. Value. Value will be input. That is, this input. And unchanged. Onchange will simply
write that this, whatever we get these
texts in the e, will set input e
dot, dot get value. Okay? These are all texts fill in oil comes from MUN
material package. So if you want, you can
search about it in Google. It's up to you. Then
in the S portion, we will simply write a div. Simply write it, Dave. And inside it we will write. Please go to the core ESnet and reload screen. I mean, they will just give
some class names if you want. These flags. Call just the face centered, centered, my game. Board. The next two Excel. Why? Later on if you want, you can
use CSS like tailwind CSS, and it's up to you. So that's it. For the Connect
vallate function. And the HTML portion. That is, if that current
violet is empty, then we will show the button. If not, that is if the network is there and also the current
account is okay, then we will have
the Add button. Will simply have the Add button
or else we'll just read. Please connect to the
network like this. So that's all for today. In the next video, we will write other
functionalities as well. Thank you.
12. Add Task Functionality: Hi, welcome back. In this video, we will work on the Add Task functionality. But before that, let's
run our application. Simply go to the folder, open the terminal
and npm. Start. Let's see how it's working. Sorry, we have to first go to the client folder and
then write npm start. Because the client is
the React js part. It may take some time. We have to test that connect
wallet functionality, whether it's working
properly or not. Let's see. I hope we haven't done any mistake since it's doing for the first time. That's why this taking
this much time. But see development server. It started. It's somewhat taking
too much them. I know. Yeah. It's done. But man. Okay. I know there is nothing like
the CSS and now we will, we will style it later on. But right now I just
click on Connect wallet. Okay. It happened. You might be thinking
how it happened, but because I already had this account
connected right now, if I refresh and click
on Connect or let's see, the notification has come. And if I read next
and connect them, then task management app. This is working properly. Let's now work on the
Add Task functionality. Simply. And dusk is
equal to a sink. E dot prevent default. This is used to not
submit the form. That's it. To prevent the
default behavior of that form. Then I will create
a task object. Dusk. Text will be input is delayed, they will be false. Then let's work on
that try catch block. Here. I will just simply submitting that task. Then in that try, again, we will have
a TDM or checked. Then simply check if it is there or if not, if it is not there, then I'm just
double-checking everything. I know already the account
has been signed in, but still just to be safe. Check does not exist. Then if it is present. Now, let's work. Const provider is equal to new ethers that providers, Dodd, Web three, Heider. It Hadean. Then we will get the signer. It is const saying that is equal to provider,
not get Signer. Then we will get on track. Instance, does contract is equal to mu eaters that contract. Then we have to
send three things. First, does contract
address that task, ABI and does cyanide. And then finally, with
that task contract, we will call the
function called add, which is in the smart contract. We will send dusk. Dusk Text. Task is deleted. And since this is a sync task, then we will get the response. And this response. Here, we will simply write
it in that data set. Does that is this
array said task. And we will append all the tasks which
are already there with this new task that I'm using the spread operator here
with this new task, okay? And then if there is some
error and we will catch it. If we get some error also, then we will simply catch it. And console log that added. That is added occurred. Why adding a new task? That's it. And at the
very end of the function will again make the
inputField empty. Set input empty. That's it. So this is how we write the
Add Task functionality. We just get the web to provider
from the Keras library. And we send out my Damask, The tales and get that Signer. Then we create the
contract object and simply call the Add task. Then what I did is
in the response, I simply update that does these things so that in
the UI things will get, will be changed as well. In this task. I append this dusk also. So that's it. For this video. In the upcoming videos, we will complete the
main functionalities. Thank you.
13. Delete and Fetch Task Functionality: Hi, welcome back. Now let's work on that day
late task functionality. Simply let's create IF
function, delete task. We have to send a key as well. That is the key is the item ID. First stuff. Let's wrap everything in the try
catch block as usual. Then V, we'll console log it. Then in that try, women simply do the same thing, which we then before. It is a window object. Then if ADM is there, then that thing as console dot log check does not exist. If we take idiom is there, then what we have
to do is the same. This, these lines, just
copy the first three lines. Notice new provider it KTM, then the contract
signer and all. And finally, simply
write delete. Does transaction
is equal to await, dusk contract Dot Delete Task. And that key and is
deleted will be true. Then. Then what we'll do is get all that task from the functionality which we already have in
the smart contract. It is get my task. Really call it task
contract dot, get my dusk. And then said that
task value here, using set dusk and biasing
that are dusk object, that is the result. So this simply was that the task only this
line of code was new. And similarly, we will have an adder functionality
called a cat all task. It will also be same. So what I will do
is first of all, this writing const, get
task is going to sink. And then same thing. Try catch block. Here. We will cancel that law adder. And in that try, hang, simply copy this, paste it here, and remove that delete task. Okay, so we have the provider, we have the signer, we have the task contract. Then we have lead. All tasks is equal to await task contract
dot get my task. And we will simply said
that task here, that's it. So this is the functionality
for get all tasks. That codes are
really very similar. If you have another
way of writing it so that the
repetition is not there, it will be very good. But for a beginner,
this is enough. So that's all for this video. See you in the next session. Thank you.
14. Creating the Task Component: Hi, welcome back. In this video, we will
create that task component. So if you remember, we have created this dot
that is test.js file. Here. Let's work on it. We will import few elements
from the material UI. This list, list,
item, list, item, list, item, text from MU I material. And second thing we
will import delete I can from my TV is UI icons that
material then delete. The task component. We will accept two properties, that is dusk, dusk
and on Lake function. Then it will return the list. It will return a list Class Name To Do list. Then list, item. And at least a DEM text. But I might eat is equal to is equal to dusk. Dusk text. Then we will have a Delete icon. Font size will be large. B, C, D, 0.7. And on click functionality
will be on click, which we are passing
as a property. Now, we have to work
on the app.js file. That is, first of all, we'll use the US effect Hooke. And at the very beginning, these functions should
be called once that is, get on task and
connect to all it. As soon as the app is rendered, these two functions
should be called. Then what we will do is in
this button that is at dusk, we have to remove
the null and right and assign the Add Task
functionality to it. And then after enough farm ends, we will have some, you will tax. It is unordered list. And in that we will
have dusk dot map. Then I DM. Each item will be we'll have that task component. And within the task component
we will send to you, perhaps it is item.name ID. Then The next item, not dusk text. Then on Blake, we will send simply delayed functionality
with the item ID. The ID is the key or you
can say that my day, whatever you want. So debts it. Now, everything is there. That our app is completed. In the next video, I will just give some
basic CSS to it. And then finally, we will
test our application. Thank you.
15. Basic CSS styling: Hi, welcome back. In this short video, we will just implement some basic CSS styling
for our task component. So just go to this task dot CSS file which we
created earlier, and then simply write the
class name to-do list. Let's give some styling. Display. Lacks. Justify,
content centered. Align, items. Center. Then it
will be 800 pixels. Border one pixel. So ln, light gray. And then margin, bottom. Then pick cell. And let's make it
important. Then. The next thing I would like to give stating
is that by ten, that is 18 connect wallet. But then we have this class. Background color will be for C, E, F, 50, this is the green. Then border will be none. Then colored. White. Bagging. Pixel to pixel. Then text, align, center. Decks, decoration, none. Display. Inline. Block. Size will be 16 pixel. Margin. They will
give doing d percent. And finally, align items
center and just save it. This is a very basic styling. And we have imported the
style.css file as well. I will just make sure it
is important that end. I just like it that way. So that's all for this video. The whole application
is now completed. In the final module, we will simply start
working of that obligation. And I will also add that
code somewhere at the end. You can just find
it so that you can, if you have any issue, you can compare it
with your code. Thank you.
16. Testing the Complete Application: Hi, welcome back. So we have successfully
completed the application. In this video, we will
simply go through the working of the application and check if everything
is working fine or not. Now, I will go to the
folder, root folder, then cd to client and write npm. Start. I hope everything
will work fine. And anyway, if K
is in any editor, we will try to solve it. Let's see, Let's see if it's
already been connected. Let's say I will first of
all remove the connection. Simply remove C. If I refresh, then automatically that
connect valid function is executed through
that use effect. If I make it cancel and if I change the network
to bring QB. And then click on
Connect wallets, see you are not connected
to the network. This alert is properly working. Then again, I will simply
change too girly network. And then click on
Connect violet. Now the wallet is showing
the notification. I will simply go and
click on Next connect. Okay? So I will try to
check that at dusk, learn solely language and at dusk is not working. Why is not working? Let us see. Learn solely bit D. And at dusk, they have to check. I have this at dusk event. Now let's check the
Inspect console. Submitting that does Contract. Jason did submitting that task. Something is not right. Sometimes related to the vagus. Does contract or cheese in a
democratic EPA fine as well. 07 task Ask a VI cyanide. Okay. Third, checking on few blocks. What I did was I
simply change this. That is const, a BA
is going to require. And then this ABA, I will write everywhere
that is here, as well as delete, as well as get all tasks. Let's see if it is
working properly or not. Now, Let's see. If I go and I learn solidity. Add dass, sie. Right now. Finally, at least that
my mask is now shown. I will simply go
and write, confirm. And now it's working properly. In my Thomas also you can see that contract
interaction is there. It will just let it be success because this one was coming
from the local site, that is from the local variable. But now the contract
instruction is done. And if I refresh, this is now coming from
the smart contract. Now, that error, I
hope you understood, simply remove this line of code and write const ABI is
going to require this. I will again learn hard
hat and simply add us. And I will now click on confirm. Again, make sure whatever
say if I now refresh and only one will come because
the other one was not properly stored in
that blockchain. See, it's spending. So you have to wait. This transaction is completed. In order to show it in your UI. Let's wait. Now, okay, instant. Now if I refresh now,
then they are at two. And let's try to work on the delete functionality.
I click on the Delete. Metamask is showing us. Now. If I simply click on
the Delete and confirm, let's see what happens. Make sure you let the
transaction complete. Okay? Not transition is now completed. Now if I refresh, I can see it
successfully deleted. Only one task is there. And if I go with my contract id, if I go to it has
kind of networking. Click on Search, then
see what happens. Okay, obviously, everything
is working properly. Our whole app is completed. I hope you have
enjoyed the course. You have understood how a basic, very basic application
is developed. And with this knowledge, you can develop any application
you want. That's all. Thank you. Have a nice day.