Build a decentralized Library management app with Solidity | Rahul Agarwal | Skillshare
Search

Playback Speed


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Build a decentralized Library management app with Solidity

teacher avatar Rahul Agarwal, Flutter Developer & Trainer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Course Introduction

      0:53

    • 2.

      Create a new hardhat project

      7:39

    • 3.

      Alchemy and Metamask Keys

      9:04

    • 4.

      Creating Library Contract

      6:54

    • 5.

      Functionality to fetch books

      12:45

    • 6.

      Create a new test file

      13:14

    • 7.

      Unit test to add and fetch books

      13:59

    • 8.

      Run the tests

      5:05

    • 9.

      Writing the deployment script

      4:54

    • 10.

      Work on Next js frontend

      9:46

    • 11.

      Functionality to connet MetaMask

      11:18

    • 12.

      Functionality to add a book

      16:32

    • 13.

      Functionality to fetch books

      9:29

    • 14.

      Creating a Book Component

      18:52

    • 15.

      Functionality to change Book status

      5:10

    • 16.

      Test the complete application

      4:40

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

44

Students

1

Project

About This Class

Blockchain is a key technology behind Web3. It is most-often associated with the cryptocurrency bitcoin and is the technology that underpins it. The bitcoin blockchain is a public ledger of activity of the bitcoin network. But bitcoin is not owned by a single company or person and it is not issued by a central authority like a central bank. Instead, it is decentralized and the network is maintained by a global group of people running specialized computers.

In this course we will learn how to create a complete decentralized Personal Library Management application from scratch. We will be using Solidity for the smart contract, hardhat for testing and deployment purpose, Ethers js to communicate with the contract, Metamask to sign the transaction, Next js for the frontend and Alchemy as the blockchain node provider. By the end of the course you will understand all the concepts required to apply for a developer job or even build your own application on the Ethereum blockchain.

Our stack

  • Solidity (To write our smart contract)

  • Hardat (build, test and deployment framework)

  • React / Next js (To create our frontend)

  • Ethers (web3 library for interacting with the blockchain and our smart contract)

  • Alchemy (Ethereum node provider)

Meet Your Teacher

Teacher Profile Image

Rahul Agarwal

Flutter Developer & Trainer

Teacher

Hello, I'm Rahul. I am skilled in building cross platform application using Flutter. I am freelance developer as well as conduct workshops to share my knowledge with the community.

See full profile

Level: Intermediate

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

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.