Transcripts
1. Course Introduction: Blockchain is the driving
force of the next-generation, which is also referred
to as the verb tree. Blockchain reinvents the way
data is stored and managed. Web tree embraces
decentralisation and is being built and
owned by its users. As it is in lot of new opportunities for developers like us in this dominant. In this course, we will
learn how to build a complete
de-centralized celebrity management application
from scratch, we will be using solidarity for the smart contract
development paradigm for testing and deployment part was thirsty us to communicate
with the contract, MetaMask to sign
the transaction, React JS for the funding and alchemy is that blockchain
will provide them. By the end of the course, you will understand on
the concepts required to apply for them to put a job or even build your
own application on the Akkadian blockchain
without wasting any more time. Enroll now and
let's get started.
2. Create a new hardhat project: Hi, welcome to the very
first video of the course, where we will learn how to build a de-centralized library
management application. So I won't waste your time on explaining what is Web three, what is decentralisation
and all. If you want, you can
Google on your own. I will just statically go to the course curriculum
or the course roadmap. So the course is
divided into D7 steps. The first step will be to set up the development
environment. Then we will create
a smart contract. Then we will write unit test. Then we will deploy
smart contract. After all that tests
are successful. Then we will use a framework, React framework known as next two years to
build a front end. And then we will use ethers chairs on the front-end to interact with
the smart contract. And finally, we will test the whole application whether everything is
working fine or not. So before moving forward, I would just like to make
sure that you have installed Matter mask and have some test scholarly
interests in your account. I'm not going to
set up with, again. Please watch any tutorial on it and continue
with the course. It will hardly tech
five-minutes, that's it. Now, before, before working
on the application, you should at least
know that tech stack. So obviously we're using
a titanium blockchain. And solidity is that
programming language to write smart contracts. Then we will use hard hat
as the deployment tool. Then MetaMask wallet. Then alchemy is a
hidden node provider. It tells you this is a laboratory to communicate
with the smart contract, then HTML, CSS, and finally, React JS, or you
can say Next JS. That's it. Let's get started with the
development environment. First, create a folder. Name is library management. That okay, if you want, you can name it anything, then append a terminal in it. And to install hearted, you need to first
create an NPM package by running the
command and VM in it. Why? It will initialize
an empty NPM package. That's it. So you can see this
package.json file is there. Then doing style hardhead. That command is npm. Install, dash, dash, save, tab, hard hat, and press Enter. Okay. The hardhead packages are the harder dependency
is installed. Not to create a hardhat project, we will use this command, which will give us a
bare minimum structure, that is NP hard hat. Then press Enter. Then select the
first one that is create a B6 sample project
and press Enter again, then again, Enter, then enter. That's it. Now, few folders and
files are created. The sample project
will ask you to install hard headed by a full
harder it terrorists and few other dependencies
which makes hardhead compatible with
test will fail and it has celebrity to simply copy this line and paste
it and press enter. It will download all
the dependencies required for the project. Okay. Let dependencies I have
successfully installed. Now simply append VS Code Editor and append your
project folder in it. These are the dummy files
which hardhead provide us. In the next video, we will include alchemy and Meta mask keys in the deployment
of Hardhead configuration. Thank you.
3. Alchemy and Metamask Keys: Hi. So a hard hat gives us
few folders and files. We will understand all
of those step-by-step. But first, let's go to
hard-headed conflict dot js file. And make sure we are pointing our network to correlate
itanium test network. And for that to work, we need go early itanium node
URL and a wallet address. Vr using curly and
not rob Stone or any other because in Alchemy, those networks are
being depreciated. So right, not the
best choice would be to use caudally network. As I already have an
account in Alchemy, I won't be creating
a new account, but simply go to alchemy.com. And I am clicking on Login. You have to register yourself. It's very simple. Just connect your
Google account and all. Nothing fancy. And then here, after creating a new
account in alchemy, you will be redirected to
this dashboard screen. Here, simply click on
Create App button. And now let's fill up
those information. My app name will be
Library Management, tab. Then chain will be tedium, but the network will be godly. And as I said, this is
depreciated, depreciated. So it's better to use just coldly network and
then click on Create app. So you have successfully
created an app in the Alchemy. Now, the next step is to get the private
key from MetaMask. You can install Meta mask by
going to Madame mascot on your website and install the
extension for your browser. As I already have it, you can just pause the video
and watch the setup of a new wallet and how to get
test eaters in your account. Because definitely
to make it work, you must have some test. A test like this. This is my wallet. And just logging in. Then you can see, I have this much on the test. Eaters and make sure you silly. You select the network
orally from the options. Then to get the private key, you have to click
on account details, export private key, and
type your password. That's it. Then you will
get your private key. And this, this 0 x a d, This thing is your public key, which right now is not required, but at least you should know. Now, you have to install a few dependency to
write these keys. Because we will write alchemy URL and MetaMask private key in our hardhead configuration. And for that, we
will install and use it dependency called dot ENV because it is not
recommended to pass those sensitive information
directly in our code. So simply append your
terminal and write npm install dot ENV. But also I am Installing of Penn Zeplin appends a plane
is say library of modular, reusable, smart contracts
returning solid. So it's simply pre-written code which you can use
directly. Nothing else. I will just write npm install a direct append Zeplin
slash contracts, and then space D, O, D E, and V dot ENV. This is another dependency. That means there are
two dependencies. And then we'll just press Enter. So it's done. Now. Use that dot ENV first. I will create a new file in the root directory
by the name dot ENV. That's a like this. You can see it's in
the root directory. And then here I will
create a very well. Or you can say something
which will store the value. Alchemy URL is equal to this, and let g is equal to this. Remember there is
nothing that is coal mine all yet
directly. I'm writing it. Now to get the alchemy URL, simply go to your app
and click on View key. Then you will see this
HTTP cookie simply copied and paste it in your
alchemy URL like this. And then to get
the wallet private key, append method mask. Then here the account details, export private key and Dario
valid password and confirm. Copy this key and paste it here in the
violet private key. That's it. Save it, and close it. Now, we want those key in
our hardhead configuration. For that just opened a
hard-headed config file. And inside the modules
or export, right? Networks, then curly braces. Then inside it, like the
network name, I'm using girly. Then again curly braces. Then one property is URL, which we use that
dot ENV file data. We have to write process
dot ENV alchemy URL. And to make it work
at the very top, we have the first require
the dot ENV package. That is dot ENV dot
config like this. This way we can access
the dot ENV file. And then the URL is given. And the second parameter we
have to send these accounts. It is in the NA, we simply have to
write process dot ENV, dot wallet, private
key. That's it. That's it for the
hardhead can fertigation. Now, our project is pointing towards the alchemy
correlate desk network. In then next video, we will work on the contract
creation. Thank you.
4. Creating Library Contract: So now it's time we work
on our smart contract. Create a new file inside
Contracts folder and name it Library dot soul. Then the first thing we
have to do any contract is delta license and
diversion of solid, solid DVR using the right
contract and the contract name. We will give the
contract named library. Now, I'm Wesley library
will have books. So the first thing we will do
is create a book structure. That is, a book will
have some ideas, some name like that. Just simply write book. Then. It will have a book ID. Then the book name. Then yeah, publish. Then who is the Arthur? And finally, whether we have finished reading
this book or not, like this, because that
concept will be that we will have our own
library where we can write. This book is left to read. I have already read
this book like this. So the structure is ready. Now, I will create a
variable of book lists, which will be a
list of books type. That is, it will hold
the book structure. It will be a private and I
will just name it vocalist. Then we will map that book ID to
the wallet address of the user who is
adding that book. So that later on we can directly fetch that users book
without any issue. So I will just simply
write mapping. Then you end to 56 will
be mapped to address, and it will be simply
book to owner. Again, I'm saying
it is a mapping of book ID to the wallet
address of the owner. That's it. Then the first function we
will create is to add a book. So simply add bulk. Then this function will
be an external function. It will recall from outside. And it will accept few
values like string mammary name you in 16 year. Then string mammary artery. Then a Boolean of finished. These things it will accept. Now to add a book, we must have a book ID
and it should be unique. Service simply won't use any external
dependency right now. I will just give the ID the
length of our booklets. That is this one. Since obviously,
after adding a book, it will keep incrementing. So always this will be unique. It does suppose the first thing, we'll start from 0, then that is the
book id will be 0, then one, then two like this. Then in the book list, we will push the value
of the structure. That is, of the structure
book will push it. And first thing it
will take is book ID. Then name that here. Then finished like this. So this we will push in it. So automatically the length
will increase from 0 to one. Then in the mapping also, I will do the mapping of book. Id belongs to the message
sender like this. So this book belongs to this, to whoever is calling
this function. And at the end, I would like to emit a event. The event will be
add book. Simply. It will ask for recipient, recipient and book ID. So this will just be
logged in that blockchain. Any externally we can
read it is information. Just simply see it
as a login function. Add book event. The recipient will be message sender and book
ID will be book ID. So I hope you have understood
this is a very basic code. If you are coming from any
other programming language, you'll understand the concept. Obviously, these things
as something new. If you have still doubt, you can just read about
mapping and events. And in the next video, we will work on other functionalities
in our smart contract. Thank you.
5. Functionality to fetch books: Now let's work on
the functionality to get all the books of
that particular user. So I would name it, simply get book list. It will be a private function. I will tell you why. It will only give you the information that I'm
using the view keyword and it will return this stuff
book that is like this. You might be thinking
why this private, because I just want to pass arguments like
Boolean finished. That means whether that is whether we are asking for the books which are finished
or which we haven't read. So with this one function we can call or we can implement
two functionalities. Let's start working. You will understand everything. Okay? Function
spelling it wrong. Okay? Now, first thing I would do is create a variable, name it. Then it will be a
new list of books. And that land would be vocalist, dark land like this. Okay, so now at first, we will count how many
books this user has. Because in this book list there will be lot of books of
different, different users. The first thing we have to iterate or loop through that
list to find the owner of. That is, define the
books which are being owned by this user. Stands for that. Simply create a for loop. It will be when I is equal to 0. I less than book list, book list, land I
plus plus, like this. Then the first thing we have to check is whether book owner, that is this book ID belongs to this message
dot sender or not. It is. Since we know
book ID starts from 0. And so that's why we have
started this from 0. And we asked the mapping is
there with this address, so we can just check whether
it belongs to this sender. And another condition we
will check is book list. I. Finished equal to,
equal to finished. Like this. Simply meaning, meaning this book
list dot finished. That is this property. Whether it's equal to the variable we are sending
it is this Boolean, whether it's equal or not. If it's there, then in
this temporary variable, simply at this counter location, insert this value
that is book value. Then then increment that
counter like this. Okay? So now, no doubt we have all the books which are owned by the user
in this variable, but that length is
defined a bigger, that is, all the book list. It might be a 100. And only five books
will be there. To just save some
memory and space. It will create another variable. That is, all these are temporary variables
that is final result. And it will be, again. A new area of books, but this time, the length of that counted
this actual land. And I will use the
for loop to simply fetch all the data from
these two distinct. Now again used new
int I is equal to 0. I less than counter I plus plus. Here, simply, in
the result array. Copy everything from
that temporary array. That's it. It's just simple copying. And finally returned. That is like this. So again, I would like
to explain first, this is a private function
which only views. It doesn't do anything
in the blockchain. In this function we are sending a parameter
called finished, that is whether true or
false. So we'll send. Then. First thing we have created a variable by the
name temporary. It is an empty array. With that is with the size of the array equal to the size
of the booklet steady. It might be, suppose,
suppose 500. Then we have created this
counter which starts from 0. And simply just think of it. How many books are
owned by the user? If it's owned and it
will get implemented. And as I know it start from 0, That's why in the temporary, I just send it to
the 0 position. Or else how we will
send a value inside it. Then if you want, you can return the
temporary as well, but the length is very much pig. To remove it, I just created a new array with
that counter length, that is suppose ten and
hours, just for example. And simply copy paste everything
from temporary two days, result, variable and
return the result. Now, the purpose of
making it private was to use these two because
we are creating to function. First, function name is
get finished. Books. External view returns book memory. And it will simply return
this function that is get book list with finished
value to true. And another function we
will create and name it, get on finished. Books. External view returns an array of
books structure. And it will return the
same thing that is, get book list, but
definitely value with false. So with this one function, we are able to write two more functions or else
we have to write wish, we might have to write
separate, separate. It will be, again, the code will be
repeated and all. So it's very simple. You will understand it
step-by-step or else please pause the video and try to understand
the logic behind it. Now, the final
functionality we need is to set this finished
value from false. That is, from true
to false and all. Because obviously if they
use the read that book, he might want to update it. So simply write function. Punished. Then it will
be an external function. Now this function will ask for that book ID and
a Boolean value. Finished. First thing, we will check whether the user is the
owner of this book or not, because he can only read
or see his own books. Does this book ID belongs
to the message dot sender? This thing will be
here like this. Then simply book list. Book id, dot finished
will be this value. And after this, I would like to, again, I made a event. So just like event set finished, it will ask for book ID. And the Boolean value. Here. Let's emit set finished. And we are sending this book
ID and the finished value. So that's it. For our
library, smart contract. We have written everything. In the next video, we will write a unit test to make sure everything
is working properly. Thank you.
6. Create a new test file: Hi, welcome back. Since Blockchain is immutable, so before deploying
our smart contract, we must write unit
tests to make sure all our functions and variables in our contracts
are working properly. And returning the
correct values. We will be using Mocha
Chai for this purpose. So inside that test folder, create a new file and
name it Library dot test, sorry, library dot js. Now, let's Right, the required that is imports and all that library which
we will use is Chai, that is like this, we have to write. And then the next thing
we will require is eaters is equal
to require e tos. We have these dependencies when we created a new
hardhead project. So let's create our desk. And we will write
library contract. Then inside it. I hope you know how to
write test using hard hat. So now before running the
functionalities and all, we must write some data
or some variables. Like first of all, definitely, we should have our library
contract and so forth. Let's write this variables. Then, the owner who is
deploying the contract. This second library that is
small letters will be like an object and check
of our contract. And this will be a
factory, you can say. Then we must add some dummy
data to our library at first. So we will just write
number of number of finished book
is equal to five. Just dummy data. And secondary we const num, finished book, spelling mistake. When niche book is
equal to three. Then let's have finished unfinished book list and another finished book list. So Mark II uses hooks to
organize the structure. This desk cried keyword
is used to group all our tests and we can go
as Nest MLL. We can nest it. That is, again, we
can write this graph. Again, we can do like this
so we can nest it all. Then there is IT cook, it is the test cases and all
which we will use later on. Then we have before
h, It's a hook. That is, we have this. We have this before
each hook as well. So it's a hook which
will run before all the scribe and it functions. So in simple words, whatever you write inside
this beforeEach will run when our test cases that is built on
four separate desk. Okay, now let's move forward. Let's start with
before each hook. Inside it, they will
win a sinc function. Now, we will use this
library keyword, that is library variable. And we will simply
write await ethers, dot get, contract factory. And our contract name
is this. Elaborating. Okay, Then we will
have this one. Let the library, which will be await, library dot deploy. Again, await this. We don't have to write directly. We can now get the
signer like this. Owner is equal to await. Start. Get signers like this. Okay. Just right,
I'm just checking. I have everything.
Everything is there. Now. This is the structure. That is, it will have
a list of values. The first value will go
inside this variable. This is, this is the
meaning of this statement. Now let's initialize this
unfurnished vocalist to this empty list and friendliest
place to this empty list. Now, what we will do is we
will add five dummy data into this unfinished
book list and three dummy data into this
finished book list. Now, for that, I will use a for loop that is far lead
I is equal to 0. I less than number of
unfinished book I plus, plus. Like this, then simply, I will create a book object. Object or you can say like this. Then it will have name. It will have year. It will have, will have a value of finished. This will be false. Now, get random values
of name here in Arthur, since it will be
looping through it. I will create a basic
random function here. Like this. Function. Get random integer. Now I will just set the
minimum and maximum digits and all and simply return Math dot floor. Then not random. Multiply by maximum
minus minimum. Like this. This is a very
basic numb function. If you are using
some more complex, if you want some more
complex numbers, then you should use
some other libraries. But right now, this
will do that job. This is just a testing purpose. I will simply get
random integer. I need, is it from
one to 10 thousand? And I will just make it
to string like this. Again, for the year. It will be anything between
1800 suppose to 2022. Then our third would be
just this random number. Just remember, this
is just for testing. I want some few data's
in it that side. Now, after this book object, I will simply write await, library, dot, add book and book. Book, dot name,
Book, dot ear, hook. Our third book, finished. And then I will push this information in detail,
this unfinished list. That is this book
value like this. So simply, again, this before h runs before
every test defined, we will define total
for unit test here. And before every test, this piece of code will run. Here we are first deploying our contract and then
getting the instance of it, and then adding some dummy box. Now, again, similarly,
we have to add data for this that is
finished book as well. After this unfinished book, again, we will write
somewhat same. So what I will do is I will
copy it, paste it here. Then first thing I will do is get this number
of finished book. Here. I equal to 0 less than
number of finished book. Then again, this will be
the books and this here, definition value will be true. Then I will write
await library dot, add book, Book dot name. Then here I will push this information to this
finished book list. That's it. So finally, now we're completed with this
before each hook. In the next video, we will write the unit test to add a book and get
all the books. Thank you.
7. Unit test to add and fetch books: So now let's write our
first test to add a book. After this, before each clause. Let's write again that describe group and add book. This will be a function. Then inside it, use it. That is the this is coming
from the library as well. This is the test cases. The first test case will, we should meet and book event. Just write it down. If you're not understanding, then definitely at the
end of the test you will understand what
this line means. Again, let's create
a random book. For this. Copy, this book object. Here. Everything is okay. After this, simply write await x back in, again inside it right away. Library dot, add, book. Then write those
things inside it. Just copy and paste if you want. Then this will emit a
value that is to emit. Then our library instance, that is contract instance. That then it will emit
an event called Add book with arguments or NOR address. Then number of and finished book plus number of finished a book like this. So what I mean by this code, since at the end of our ad book function in
that library contract, that is this, we are
emitting this, right? So this event is this, which is recipient,
that is who is the owner of the book.
And that book ID. And since the book id is the
length of the book list. And in our, before each book, we already inserted this number of books that is 53 in the list. That lemon start from 0. So in simple words, what I mean is we already have a task that is
this dummy task in that list. And this will be the
nine task which we are, that is nine book, which we are adding, which will have an id eight. This will have an index eight because in e-mail list
the index starts from 0. So this book will
have an id eight. That's it. Like this. This book will have an id eight. We will just check whether the event will emit this information
or not. That's it. And to make equality check or compare expected results
against actual result, we can use Chai, which gives us three
assertion that is, this expect there is a third as well and there
is should as well, but we will use only expect. Now. This adds a
book test is done. After this, we will
write another unit test, which will be to get books. Let's write it. It will be a function again. The first test case, really, we should return the correct number of that is correct. Unfinished books. There will be a sinc function. Now, let's get the books
from our contract. That is books from chained. This blockchain will be
Library instance dot. Get unfinished
book that is here. Get unfinished books like this. Then what we expect
is, first thing, books from chain dot
length should be equal to number of
unfinished books. And then what we will do is we will also verify
that books that is, that books inside this
array is equal to the books inside this book list
of their contract. For that, we have to create
a function which will verify books and so
simply write it down. The code I'm about to write. First function will be
verify a single book, okay? It will take book
chain and book. So we will have expect book dot name is equal to blockchain dot name. Then we will have
another expect. Book. Dot ir dot two
string will be equal to blockchain dot,
dot to string. Then we will expect book. Our third should be same as n equal to blockchain dot Arthur. And now we will have another function,
verify book list. So it will be books from
chain and book list. Let's first expect
books from chain. Length should not
be equal to it is, it is not equal. It is not equal to 0. Then second expect will be books chain length is this book list dot length. Then since we have
lots of books, that is in this area also and this area also we
will have lots of books. So we have to loop through
every book and then check. So we have, we will
have a bar loop. Then. It will start
from I equal to 0, I less than book list
dot length I plus plus. So simply write const. Book chain is equal
to books from chain. I suppose 0 index
first index like this. Then book will be book list, which is here that isn't a test. And then we will use
this verifiable, that this verifies single book. This, for this particular book, we will check that name or
if both the name and author, Eric color, not like this
on the blockchain and book. So we are just simply
comparing books stored in that contract and books stored in the local
variable of this test. That's it. So again,
go down here. What I will write this
verify book list. Then I will simply
send books from chain. And then unfinished book list. So definitely it should give us unfinished book
list from that chain. And then unfinished book lists from here that is in this test. And similarly, we will have another condition to get the correct number
of finished books. Here. This will we get finished
the book, books. Then books from Jane is
equal to number of finished. This will be finished
books equal. And then verify booklets, that is books from Jane. And this finished book lists, whether it is equal or not. So that's it. We have successfully created
unit test for adding a book and even
fetching our books. It is fetching books which are unfinished and fetching
books which are finished. That's it for this video. See you in the next session. Thank you.
8. Run the tests: In this video, we
will just write our final test case and then, and then run all our
test and see if it's, if it is working
properly or not. Finally, test will be
to set a book finished, that is an unfinished book. Let's change it to finished. So let's again like
this, this gray. Then set finished function. That test case really we should set finished event. Then write our function. Suppose let's take
that book ID to be 0. That is the first book. Then glanced. Book. Finished is equal to true. Then simply write await, expect. Then library dot set
finished function. We will send the book ID. And that's the decimal
which genes to true. Then it will emit. It will emit a function or an
event which is called set. Capitalists set finished
with arguments, arguments, book ID, and
a value that is true. So when we call this
set finished here, you can see it emits an event which have the book ID
and a finished Boolean. That's it. That's what
we're talking about here. We will check whether
it is a meeting or not. Now, it's time. We run our test. Make sure you save
all your files. Then in your project directory, simply bring up your
terminal and right and px, hardhat, test and press Enter. Remember if you ever
get any error here after finishing that added
or after fixing that error, use NP x hardhead clean and
then run the test again. That is run this test again. Our library contract hash
some issues. You can see it. Okay. Let's check. We
have some issues. I will get back to
you with a solution. So I got the solution. The mistakes I did was
first mistake was, that is, in the fourth line, I should have this hard hat, not a test library. These letters should come
from the Howard head library. And a second mistake was, This expect should come
from child library, but it should not be capital, it should be small
letter that is CHA, small. Let's save it. And again, I will
get a new terminal. I will read and
px. I'd had clean. Then I will add NP
x had had test. Let's see. Now everything is
working properly or not. So finally, you can see all
the test cases are showing, okay, that means
we're ready to go. In the next module, we will upload our
smart contract to the blockchain. Thank you.
9. Writing the deployment script: Hi, welcome back. In this video, we will write that deployment scripts
for our smart contract. Simply go to the scripts
folder and create a new file by the
name deploy dot js. Now let's start working on it. Let's require the ethers package from the hardhead dependency. Now simply write this piece of code which is required for
the deployment purpose. First of all, we will
create a contract factory. And I await eaters
get contract factory. Name is library. Then create an instance that
is contract for trade dot. Deploy. A weight contract deployed. We will just wait to make sure that contract
is being deployed. And after day. After that, we will console
log dow contract address, which is very much important. We will use this
contract address later on in the front end. Simply write contract address. And then we will write
another function. To run the above
function like this. Have a try catch block. We mean then process that exit 0 if
everything is okay. And if we have some adder, then you read console dot
log, maybe logged error. And we will write
process exit. One. We can edit is
Exit button adder. And finally we will write and
run main here, let's say. So this is the
deployment script. Just save everything. Then to deploy just appended
terminal in the root folder. And simply type NP x. Heart had run scripts. Deploy dot js. Network is godly
and press Enter. Let's see if everything is okay, then we will get our
contract address. How our contract has been
successfully deployed. Just copy this address and simply get a comma,
that is Command. And just save it so that we
don't lose this information. Now, if you want, you can also check the contract. Information in. Godly. Ethers can just go to this website and simply paste your contract
address and just search. See, we have this
contract which is being uploaded are
deployed 52 seconds ago. You can just check that yes, our contract has been deployed successful
days, no issue in it. So that's it for this video. The next module, we will work on the front end and then interact with our
diploid contract. Thank you.
10. Work on Next js frontend: Hi. In this module, we will
work on the front end of our application and we
will be using next JS, which is area yet framework. Now in the project folder, simply write the command npm. Create, next app. Then we will be using the
living there as well. Just write tailwind css and I will name it client
and press enter. It will create a basic
next JS application. Okay, so our next chairs application
is successfully created. Now in order to interact with our deployed
smart contract, we will need two things. Contract address and that ABI. To get the ABI simply copy
the library dot json file, which is inside artifacts and Contracts folder,
then library. Then we have this library
dot json file too. This client. And this client create a
new folder called ABI. New folder here, ABI. And then inside this folder, simply paste that
library dot json file. That is, this is the ABI which
is required for the task, that is, for this
contract address. Simply create a new file called config dot js inside
client directory. Directly that is inside
this create a new file called config dot js. And inside, simply write
export, const task. Or you can just
say not contract, you can simply write contract. Address is equal to and then directly copy this
address here and save it. We will use this later on. Now, if you want, you can just remove it. The address here. That's it. Now we
will also have, we will need to install
few dependencies for our, for our next JS project. So simply go to that client directory in the
terminal it is CD client. And simply write npm, install eaters, types styled components,
and press Enter. So eaters is a quite interact
with the smart contract. Types will check the props and let's see what
I did mistake. I didn't components
spreading somewhat. Combo. Nance types will check props pass to
your components, will match your conditions. And make sure that data
you receive is valid. Perhaps types, which
is just to make sure that data which is sent to
the component is valid, then that style components
allow us to create components and attach
styles to it using ES6 tag, template literals, the styles
which are returning CSS. In simple words, it is a third party package
using which we can create a component as a
JavaScript variable that is already
styled with CSS code. You will understand it later on. So now just run, our application is npm run dev. Okay, now let's
simply go to this. It is local host and see our next JS application
is successfully written. So that's it. Again, I will what? I will just make this small. It is like this. The contract address,
just the camelCase later letters I like, I like this way. So the next thing we will do
is work on the index file, which is inside pages. Here. We have this index
dot TypeScript file. And I will remove
everything from here and simply start
writing from scratch. First thing I will
have you stayed and use affect folks from React. Then I will have
contract address. Contract address
from config file, which is outside this, that is this config file. Then I will import
ethers, ethers package. Then I will import our ABA that this library from ABA slash library dot json. Then I will import
next page from next. Then also I will just
simply declare lead window. So that later on it doesn't give any
errors. That's great. Our component that is home explored for the lateness. So now we have our component radiated is our
next application is ready. In the next video, we will work on how
to connect them MetaMask wallet in our
application. Thank you.
11. Functionality to connet MetaMask: Hi. In this video, we will work
on that functionality to connect our Liam valid it is the molar mass
to our application. So let's first work
on the function and call it connect. Or let. Let's wrap
everything in it. Try catch. Block will simply write console.log adder connecting
to my thermostat. And simply we will
write that added. Now first, we will get
the stadium object, this which is injected
to our browser. Then we will see if
we have a TDM or not. If we don't have a TDM, we will simply
write console.log. You might mask not
detected and return. And if we have, then we will check whether it is connected to the
correct network, that is Garlin network or not, will simply get the request for them my turn, which is known as chain aiding. And then we know we know that girly ID is 0, X5, this is cartilage and ID. So we will compare it if Shane AD not equal to
correlate chain AD. In that case, simply
alert alert that you are not connected to a network and simply returned from here. And if this is also okay, then simply will
get that counts. This m dot a request. That request and we will
hear request that my third, which is known as request accounts, like this. And then we should have a
state that is variable here. I will name it current account. To change it, I will simply
set current account. I hope you know that you
state hook in React. Simply means this is a variable and its initial
value will be empty. This is a function which will be used to assign value
to this variable. That's it. So like this, I
copy this function, then put it here and simply write accounts. The first one. Just, just like this, we will have multiple
accounts in MetaMask, just get the first one. This is the function that is the function to connect wallet. Now, let's work on
the HTML portion. Simply return a div. Let's give it some
class names of CSS. Flex, flex called items. If you want, you can just
copy what all this means. Because this is a tailwind
CSS code, F3, F6 for. Then. This is just basic styling. That's it. Nothing else. 68508. Mainly mom will be inside this padding bottom 20. Then have another class. Gave me the class name. Transition over date. When it gave. Then over scale, when 05, transition, duration 500. Ease in, out. Then not inside it. Outside it. Given H2. Is that decks C x bold, and B is margin bottom. To add a margin, top 12. And name it. Manage your personal library. Like this. Then, now comes our
portion that is, we'll check if current
account equal to empty, then then we will have a button or else we
will have something else. Okay? Let's see. If it is empty, then we will have a button. The button name will be connect. Let. Now let's
give some styling. Class name. Text, font borne. By adding my three. Betting x 12. Background. One, C, 232, large margin, bottom. Then scale 105, transition. And in the onClick event, we will simply write
connect, well IT function. We will assign it this n. If they've already
is already connected. Then we will have a div tag, which will have
an edge for that. Then wallet, wallet connected and
their wallet address that this current account. And let's give it
some styling as well. Next, excel. On day 12, managing dot. Let's save it. I want to add a C. We have this beautiful full
button, neck wallet. If I click on it, it will bring up my MetaMask. And my task is already
connected to the Golgi network. I will just simply write next, connect and say,
well it connected, this is my public address. So we have successfully
created steadies. We have successfully worked on the functionality to connect our My Thomas wallet
to the application. In the upcoming videos, we will work on the front-end
and the functionality to add and delete books
and all. So that's it. See you in the next video.
12. Functionality to add a book: Hi. In this video, we will work on a farm which will allow
user to submit a book. And I'll say we have to write a function which will insert those information
in that blockchain. So loud, Let's start
with the function. For the function to work. First, we should
have some states. It is some variables. You can say const, book name. So definitely read the
book will have a name. And to update that variable, we have this set book name. You stayed at the
very beginning. It will be empty. Then we will have book author. And then it will have set. Book is according to use state. Again, it will be and then
that book will have a year. It is rich ear, that book was published. Book here. You state MD. And then finally we will
have book finished. That is very that this
book is finished or not. Said book finished. So at the very beginning, it will be no. Obviously when we
add, adding a book, it default value
should be known. Then let's work on their
function and name it. Submit book. It will be a sinc function. Then let's create
the Book object. Simulate. The key will
be named blockName. Then your boss. Ain't we have to change it
to integer, that string. That is the bulkier. Then we have the third book. Then we have finished value. If the book finished
value is yes, then it will be true or false. You will understand this
what I'm talking about, because this is a
personal library. So you might want to insert your a book which is
already being red, but you want to add
it in the blockchain. That's okay. Then, then let's do the try-catch block. Try catch block. We have console.log and submitting new book. And then write the
editor, bring diarrhea. And what we will do
is first we will get the stadium from that window. Then if we have it KTM object, then let's write const. Provider is equal to
new eaters providers. Web three provider. And we will pass
that Itanium object. Then we will get the signer. Signer will be provider dot, get signer like this. And then we will have
a contract instance. Library. Contract is equal
to new contract, this contract address, then
we should have the ABA, ABA, and then we have
to give the signer. And now we have to call the
function add book from them. Um, blockchain. Now let library transaction is equal to await
laboratory contract. Library contract dot add book. This is returning
the smart contract. We will send book, dot name, book, that ear book. Our book. Finished like this. And then we will simply
console log this transaction, that is library transaction. And if it Tanium object
is not available, which won't be the case. But since we won't
take any risk, it will write, we
will write it up. Check does not exist. So that's it. That this is the function for
our submitting a book. We will just name this
function submit book. Now, let's work on
the HTML portion. Let's go below. Here. That is, in this
wallet connected. You want the form to show
because at first the user have to connect them
into a mosque wallet. So below this, below
this we will have, first of all, what I will do is wrap this thing inside a div. Dave, just wait, I'm just
thinking what can be done? Yes. Just give it a div. Close this div. Okay. Now, after this
wallet connected, Dave, let's write that form
that is rapid. New div. I will give some
tailwinds, CSS to it. These things will be text, font, semi bold, and be Duan De margin, top four. Then let's have
our input fields. The first input will be input type text, then place holder
will be book name. And this value will be that
variable we mentioned above. And onChange. What we will have. When we get the value. That is whatever it's there, we will set the book name. We'll just simply set
book name and pass e dot, dot, dot value. Like this. Let's give it some
styling as well. So I will just give
some class name. Isn't going to text
Excel on board. Margin, bottom margin, top one. Like this. Then I will
give it a BR, tag. Line break. And then again, I will
have another input field. So just copy it
and paste it here. Does styling will be same. Only the placeholder
will be book. Value will be book
and unchanged. It will be set book. Like this. Then again, I will have the
same input field. So I'm just copying the BR, that is line break as well. That third will be book
value will be book ear. Unchanged, said book
here, like this. Okay? Then simply have a BR tag, then a label. Simply right? Have you finished reading this book? Then? We will have some, we will have an option to
select this select HTML tag. Value will be book finished. Then onchange will be similarly. Like whatever we get, we will change it to
set book finished. E dot, dot, dot, dot. Inside this select tag, we should have options. The first option
will be of value. Yes, that is the I
have read this book. And the second
option, will we know? That is, obviously this
book is not right by him. Get. Now, after this label, we should have a button. I'm just pasting that
code because in the last I recorded this course
and just had a small mistake. So you can see this is a button with a
class name of text, Excel, font, bold BY
three, padding at x2. Then background, color off, hash F1, C, 232, rounded, large margin, bottom
ten, margin left five. Then hover, scale. 105, then transition. Duration 500, ease in, out. And onclick. I'm just assigning the
submit button function and giving it a
name of the book. That's it. So if you run, you can just pause the
video and write it down. It's just one line of code. Now save it and go
to your application. Just click on Connect wallet. See the form is here. You can name it anything. I already have one book
because as I told you, I did it that I did
the testing on it. So learn hardhead book
or her That's right. Bill Gates. I don't know he's
interested in this or not and gave it 2019. Add a book, then. Thomas will ask for approval. Simply confirm it. Let's see whether in the console we get our
transaction or not. I'm just checking, it's
still pending. It's done. Now click on Inspect. And in that console
we have this object, which is the complete
transaction C. So that's it for this video. The functionality to add a
book is working perfectly. In the next video, we will work on how to fetch those books from the blockchain. Thank you.
13. Functionality to fetch books: So now let's work on the functionality to fetch
books from the blockchain. First of all, we will
need some states. Simply write const books. Finished and said box. Finished is equal to use state. It will be an array. Similarly,
we will have another box. And finished said books and finished goods. They use date. Again, it will be
an empty array. Now, let's work with the function below this
submit book function. I will write const, get books is equal to a sink. Then I get a, similarly we will have
a try catch block. If any error is there, I will simply
console console.log. In that try section. Again, we will have
this line of code. Just copy this much on leave. I will just copy inside. I will remove, which
is not necessary. I will just simply
remove these two lines because we will need the
Itanium library contract. The contract instance to work to fetch the function
from the blockchain. Now, simply, let's get books. Furnished is equal to await. Library contract dot get. Now let's go and check. Get finished works. Get finished books. And similarly, we will have
let books unfurnished, contract dot get unfinished. And then we will simply set
the value of the state. That is set books finished. The book is finished. And set books unfinished will be equal to the list
coming from books unfinished. So like this, we have our
get booked function as well. Now, to show it
in the front end, we will create a
separate component. So inside this Pages folder called Come on
Nance, gumbo, Nance. And inside it create a file
called Book JS. That's it. So it will be just imagine
separate, separate book. We will just give
a for loop and it will return this component. So here I will use some
styling if you want. Again, I'm saying you
can do on your own this properties we have installed at the beginning,
these dependencies, prop types, and then import styled key frames from style components. Now, let's right, few
styling key frames. And this. Then inside this we will have, you can just write
this code same because as I'm again
and again saying, I don't care about the styling. Just to leak, just
to look decent. At least I'm giving
this styles transform. Scale 0.5. Then read per cent. Again, I will just copy
these two lines. Pasted. Scale one. And then we scale one. Okay? Then with dust
style components, I will have a container. So this is just we are giving a styles to a
component directly. This is what style component dependencies all
about. Staying that. Dave, let's write it down. One-by-one animation. Sliding 0.82 cubic Bezier inside it. Right? W 0.390.5750.5651. Then display grid. Then grid template columns will be 38 percentage, 20 per cent, age five,
percentage, 37 percentage. Then we're adding two
REMs, 0.1881.625168, date REM, border,
solid, one pixel. Border, radius. For big cell. Line, height. Normal. Transition back ground, 0.40 as linear. Margin. Bright. One, I am rate to 50 pixel. Display inline block. That's it. So that's it for the
styling portion. If you want, you can just pause this video and write
it down again. If I went a little bit fast. So in the next video, we will work on the book
component. Thank you.
14. Creating a Book Component: So now let's create
that book component. Below this piece of code. Let's say const book
is equal to this. And in this component we will accept some props like id, name. Here are punished, and a function which
will be Click book. Finished like this. Let's return. Let's return, let's it
then this container, which is already
styled like this. So that is why we use this style components so
that when we used it, it's already predefined
and it works like it is working
like a component. You can see, suppose some
kind of container component. You name it, you name it container and we can
use it like this. Now, let's go. That's Dave, name. Then. Then we have here. Then this span tag, we will simply say if finished equal to,
equal to pause. If the book is not
being finished, then we will have
something or else, or else, we will
simply have a p tag. Then we will have a button. Then this p tag later on. So here, if we have this, then they will have a button. And let's give some
styling to the button. Font, bold, wedding at x, y, break down. Ash, F, F, 77, F. Then we will have Dexter White. Then rounded. Large margin, top five. Our scale 105. Transition. Duration. 500 is in this burden. Then in this button, what we will have is we will have the on
click method as well. It is, is in, out here. Let's have the on click. When the user clicks on a click, then this fun function
will get executed, which is Glick Book furnished. And we have to send the ID. That is rich book. We have to delete
and just name it. Niche book like this. So this will be when, when the, when the property is
false and if it is true, then simply we can give a paragraph and give
it some styling. Font. Ball, bold, text, height 0 d, 71 E. And it will written
book finished. Let's say. So. Now, after this component, we will have some prop types that is really make sure that these properties
ascend in this order. Prop times it is, we have some conditions which should be fulfilled at first. Which is, this is
the thing where it's like id is acquired like this. Prop types dot number, which should be numbered
and is required. That's a name. Prop types. String, dot is required. Prop types B capital string is required than what we have. We have our talent finished. So we just copied. We have we have finished. Like this. It, this
thing is a number. And finally, we will simply export default book, like this. Book component is ready. Now let's show this book in the index page that isn't
that homepages show it. After this. We have this Add button. Then we have this Dave. We have this debate
at 132 after day, after day is Dave. We will have another
div which will contain which will
contain the book list. Let's give some styling
to this as well. Flex, flex, column, justify, center, items center like this. Then again, we will
have a Dave Class Name. Aren't semi bold text, large text, center,
managing bottom four. And I will name it books list. Okay? Then we will have a, we then we will have a button. Then we will have a button
and it will call get books. And this button will have
again classes such as Excel on board, like this. And if you are good
with Tailwind CSS, you can change it as well. These are just basic styling. Then round, rounded,
margin bottom. Then our scale when 05, transition duration, 500 is in, out. So this is the button. And below this button, we will do our logic. Simply. What we will do is
books unfinished. That land. If it is greater than 0, then we will have a div. If the length is 0, then we will have it div, which as I am heading, it will simply write
book unfinished. And inside this there
will be number of books. That is, books unfinished, not land like this. And let's give some
basic styling to this. Font. Semi bold text, center, margin, bottom. For margin, top five. And if it is not, then we will simply
have some empty div. Like this. Won't
show any heading to it because it will be,
it doesn't look good. Then below this, below this, let me just see. Below this, let's have another div class name will be flex. Flex row justifies
center, items center. And here we will have
like these books, unfinished, map, like this. And here we will
get single books. And in this single books, we will call the book component. Let's, let's import
double component here. Import Components book like this. Now this will accept
some properties. Key book that ID, ID, parse int. We'll just say book. We make sure it's an ID. That is, it is n number rate. Let's say the editor
will go later on. Book dot name is equal to bars. Book, the ear. String, like this are terrible. Book. Not. Then finished. Book. Dot, finished, dot two. String. Then Click book. Finished will be the function click, click Book furnished. We have to create this function. Let's say we have this book component. Okay, here. This will be this. Let's see. Is there any editor? We'll just call this component This click book finished. Here. Click Okay, the spelling, I guess, finished C. Okay. Now, these are working properly. You can see we have to create a flip book finished
function as well. And for this red lines
and all, if you want, you can just go to the file ts config
dot JS, that is here. And then here, change
strict value to false. The district to
false, That's it. If you do this, those red lines and those
things will be solved. C, Those are now solved. So that's it for this video. In the next video, we will work under functionality to change the
bookstore does to finished. Thank you.
15. Functionality to change Book status: So welcome back. Let's work on our application. V4. Good, to assign
this function that is, get books. That button. The button here, which
is which is this. So simply write onclick
and that's a good books. And also similarly, this will show all the
books which are finished. So similarly, we will have, we will have to show
books which are, which are, which are
finished at it this way. These are books which
are not finished and we have to show books
which are finished. So what I will do is simply
copy this piece of lines. Let's say suppose first
thing I will copy this and paste it here. It will be write books. Books, finished. Books, finished. Dot length rather than
same thing and it really book finished, that's it. And then I will again do
the mapping like this. So just copy it and
paste it below here. I will do that mapping with
books, finished, dot map. And it will have books
these days finished. And now we will work on the function here
and we will name it. Book, finished, copied
and pasted here as well. This will be the function
which we will be creating now. Lake book finished. Go up here. Creative function. Const like this. A sink. It will accept ID, like this. Okay? So now again, we will have try-catch
and everything. Similarly as always, since we have to connect
to the smart contract, which is already deployed, simply write console.log and changing book status. Simply print the header as well. Then in that try block, we will simply have, we will copy from,
copy from here. Just copy these lines. Paste it here. Okay,
we have the provider. Then library transition will be, it will be simply set. Finished id through like this, let's say console dot log. So this is the function. And most of the functions
are somewhat similar. Nothing that fancy. We're just calling this one
that is set finish this here. This one, it takes a book
ID and a finished Boolean. So we simply go and send the ID and the
Boolean, that's it. So finally, we have written all that codes
for the application. I'm glad that you
watched thing now, in the next module, we will test our application whether everything is
working properly or not. And if we get some error, we will solve it asap. Thank you.
16. Test the complete application: Hi. In this video, we've really test the working of
our application. We have been quoting from the last few videos,
but right now, it's time to test whether all the functionalities
are working or not. So the first thing I will
do is genes than network of my tomatoes from
Gormley to be suppose. And then I will click
on Connect wallet. See, you are not connected
to call it network, so it is prompting us
to change our network. This is working fine. Let's go into choline. Then when I click
on Connect violet, MetaMask appends, and
then next and connect. Okay. Now we have these books. If you remember, we already
added a blue book earlier. So if I click on Get Books, then we have two
unfinished books. See, this is one, learn web tree and the other
one is learn hard hat. So this is looking very nice. And also if I write learn, there is a trade date is next. Js. Mark Zuckerberg and 2018. Suppose if I simply write on, if I change it to yes, Let's see what happens. Alerts can form. Let us see whether the
transaction is still pending. It will take some time. It's done. So now, if I click on Get Books, see I have books finished. But I'm just okay. This mistake. I understood why it's two because here we
forgot to change. So books finished
will be this length. Let's say that, that is
a very small mistake. It's, it's corrected. Books finished one. And if I click on this
finished Book, learn hard hat. Again. Showing this,
then I click on confirm. That main motif of
this course was to understand the basics
of the blockchain. Technology is not that UI. If you want, you can use whatever front-end UI tool
and make it very beautiful. Because you might be thinking
this is very simple, but the main thing is
that functionality. Now, it's spending set
finished function. This spending. Now it's done. If I click on Get Books. See, this is also in the finished section and now we have one unfinished
book and to finished book. So that complete application
is working awesome. And I think we are proud
of ourselves that we have building a decentralized
application from scratch. So I hope you have
enjoyed the course. Make sure you watch other
courses of mine as well. Thank you. Have a nice day.