Hello everyone. So, in this session we are going to cover the third part of our dap development. So in this part we are going to talk about the user interface for our dap. So, I will get the overview of the user interface. And then we are going to have a brief discussion about web three framework what web three is and how it is utilized, then we are going to develop some logic for interacting with our deployed contract. So in our last session, we got our contract deployed, which contains logic for adopting the pets.

So we will develop a logic in our user interface to interact with that deployed contract on the the contract which is deployed on the blockchain. And finally, we will discuss about a very key difference between the types of interaction we can have on the blockchain so these interactions are either these interactions fall under two categories they can be the transaction or calls okay. So, this is very important concept to understand because because you know, the way you make the transaction, the interaction then defines whether you will get charged or not during the execution of the introduction on the blockchain. Okay, so let's get started. I have my virtual machine running, and I got connected over here. So the first thing I'm going to do is we'll open up our terminal and start the Visual Studio next door demos.

We'll get into our Pet Shop demo. Right here, I'm going to open it up Visual Studio. Code is opening. Alright. Alright, so the box, the truffle box gives us the user interface out of the box, we don't need to develop it. And if you go to the SRC here, you have all the logic for our user interface.

Everything is built using the Node JS libraries, and you know, various other JavaScript libraries. So we have out of the box user interface built with us in this box. So that's another advantage we get by using the box. Okay, next thing we need to do is In the J's folder, we have this app.js file. And if you see in this app dot J's file, there is some code already written. But you know, there are other places where we need to put our code okay.

So, during this session, we are going to put the code and then we are talking about how that what is the logic within the code and how it is interacting with how it is going to interact with our deployed contract through web three. Library. Okay. Know instead of them again, having the code developed from scratch. We have it already in our demo solution folder. So I'll go to interior demo solution and I will open folder.

So here we have the src folder in this src folder, j s app.gs. I'm just going to copy the entire code for here into our project and then let's discuss the logic which we have inside. Yes. Okay. Okay, so the first thing we want to do is we go to the init web for sure. So they need web function.

What we are trying to do is in our next session anyway, we are going to talk about the web three provider. Okay? But let's discuss it here. So in the init web function we need to interact with the blockchain contract, right? So, in JavaScript there is this framework called web three, this web three framework, it does all the heavy lifting off giving you a sort of wrapper through which you can interact with aetherium and blockchain. Okay.

So this web three framework is what we are going to utilize web three framework is basically the middleman between your application and then blockchain okay. So in order for us to interact with the blockchain, we need to define a web three provider, okay. And this web three provider is a single term, what you say it follows the singleton pattern wherein, you know, we'll have a single instance throughout our application to interact with the blockchain. So what we are doing is When our application initialized okay so, in our app.js we have this function. So, at the time of initialization of our user interface, this function will get called and this function is first checking if we already have a web three instance with us okay web three provider Okay. Now, as I said you know this is a single term it follows the singleton pattern.

So, in case we already have the web three, reference, then in that case, we are going to get that web three provider and assign it to this variable AB dot web three provider, okay, so in our application, we are going to interact to the blockchain through this web three provider variable, okay, which is an application level variable, okay. So what we are taking is if web three is already initialized, then use the car provider within web three, okay. And when we are going to test the application, this thing will become more clear. And if you don't have the web three provider in that case, the we are asking web three to give us a new provider okay. And another thing you will notice here is we are going to utilize the ganache test blockchain for our testing So, that's why here when we are asking for a new provider, we are asking it to get the provider from our ganache blockchain okay.

So this is what we are doing in this function. I hope it is clear. Okay, next thing is we will go get into this function call In it contract okay. So again we are calling this in contract function okay after we get the web three reference okay. So, what this function is doing the init contract function is calling this get Jason function and this function will then give us the data okay. So, the logic over here in this function is to basically get the contract information around or an option contract and then assign it to a variable okay.

So, you know the way we have in typical programming language we have something called as API application programming interface. So, similarly for aetherium to interact with Contract we have something called as application binary interface Abi. So the application binary interface of apps, the whole functionality of the deployed contract, and then it gives you an interface through which you can call various methods of the contract, you know, access the getter and setter and the thirds of the variables within the contract and so on. Okay. So what we are doing is through get Jason, we are getting the API application binary interface. And from this API, we are then creating an instance of our adoption contract.

So the way it will work is we'll call this function or the application at the time of initialization, we'll call this function. It will get the data of the contract through web three from the blockchain. And then we are assigning that data to adoption artifact. This adoption artifact variable is basically the API application binary interface. And then from this API, we are creating an instance of our truffle contract. Okay, and the type of that truffle contract is of adoption, okay.

Right. So, we have our adoption contract created through this statement, okay. And next thing we are doing is we are setting the web three provider to this value. Okay, so in our previous function in the init web function, we had assign the web three provider to our application variable called web three provider. And now in our contract instance, we are setting the provider for this contract to that application level variable. So this way when we are going to interact with our adoption, contract that action to the blockchain will happen through this will three provider which is nothing but our web three provider we got during the initialization.

And again at this point if all these things look confusing to you, it will become more clear when we are going to test the application at that time we are again going back and revise the entire code as we do the testing of the application. Okay. So after getting creating the instance of contract and setting the provider, we are calling another method okay. called Mark adopted, okay. So what this method is doing so, this is the third major method in our application. So, if you go down here you will see the mark adopted.

This method is basically getting the instance of our contract okay. From that instance, if you see, so, we have this adapter instance here we create one variable okay. And to that variable what we are doing is if our contract okay dot option contract, which we initialized in our previous method, so if that contract is deployed, so this is an asynchronous call to the blockchain. So, this will see or check that the adoption contract is deployed. So, once it is deployed, then this problem is, is getting executed and in this promise we are going to receive the instance of the contract. Okay.

So through this API we are, you know checking if the contract is deployed and if it is then we are getting this callback. And in this callback, we will receive the instance of the contract and we are assigning that instance to our adoption instance, which Okay and then we are returning that variable dot get adapter dot call method Okay. Now here is the important thing, okay. In our actual contract, we had this method called get adapters right. So, let me just open our contracts. So, this is the contract we created in our previous session and here you will see there is this get adopters method, right?

So it was returning the an array of the adapters then we deploy this contract in our blockchain. So in our blockchain, the contract is there at a particular memory address. Now, we can invoke the methods and getter and setter setter on the variables, okay. Now, when we invoke those methods, those methods can be of two types. Okay. There can be one method Which will just read the data from the blockchain.

So, these are the reader methods and then there can be methods which will alter the state of the contract on the blockchain okay like for example updating some variable value on the blockchain right. So, what aetherium allows us is it allows us to call those methods which with the methods which do not change the state of the blockchain okay. So, such methods if you want to call, you will use the call method and if you are going to invoke a method and that method is resulting in some changes on the blockchain then such call will be called as transaction okay. So, the read only methods are calls the methods will change or alter the state of the blockchain transactions. Now, why we make this distinction? The reason to make this distinction is because if there is any state change happening on the blockchain then it tarea will charge you for those transaction.

And that charge happen in terms of the gas price. Okay. So if you remember when we last time deployed our contract, initially in our valid we had handed aetherium and after deployment, there was some reduction in that value. So it reduced from hundred to some 99% some value, right? So why that happened is because that deployment itself executed some transaction, change the state of the blockchain and as a result, we are charged for that transaction. So This is very key, you know difference between a transaction and a call.

Because if there is a method which just read the data from blockchain, you can simply call that method and by default, that method invocation will be a transaction. So even though if you are not changing any state of the blockchain, you will get charged. Why? Because you invoke the function as a transaction. So, this is the default behavior. So, if you want to save yourself from a curing any gas cost, then when you're calling a read only function, then in that case after the function name, you need to use the call method.

Okay, so, that's why you will see that this is our contract instance. And then we have the method. Right. So we could have simply said get adopters in that case So, for example, if I remove this call Okay, this is a perfectly valid statement which will get executed. But the problem is this from a tyrian blockchain perspective will be a transaction and you will get charged for this invocation. But if I call this data adapter and I know that this is just a read only function in that case aetherium will consider it as a call and not as a transaction and as a result, I will not get charged for this good doctor in rotation.

So, this is a very key and very important concept when it comes to aetherium. Contract invocation and you need to understand that, okay. So here, you know, we created the instance of the contract, got our get adopters method method and if you remember the logic in our gate, and our First method what we are doing is we are returning the entire array of adapters the variable adapter which is of type address, okay. So, the next thing we are doing is was this call so this call itself is a synchronous Okay? So that's why we have a promise over here okay. So, there are two promises happening one is first we are deploying the contract and then after that promise we are creating an instance and on that instance we are calling the get adopters method and that promise will then execute this then And here what we are doing is the adopters okay we are getting as a result of get adopters because it returns the error.

We are going through that array okay we are looping through that area and in that we are checking that if the address is black or zero, okay. Now this is again, a very important statement. So, what happens is when variables are created on the blockchain aetherium assigns them this zero value, okay. So, if you remember in our adoption contract adopters is an area of type address. So aetherium in other programming language, you might have observed that you know, variables are initialized to null values or non values or empty values and like that, but in case of aetherium if it is of type address they are given zero addresses. So, instead of checking for a null value or empty value we are checking for zero address okay.

So, what we are doing is in our contract instance if there is any adoption happen for a particular pet. So, for that pet we are going to disable one button okay. So, that There won't be any further adoption of that bed and on that button we are going to display success okay. So, when we are going to do the testing you will see it in action, you will see a user interface with all your different pets and that below that pits image you will see one button for adoption. So, if it is already adopted, you will see the text success if it is not then you will be able to adopt that pet okay. So, so if it is already adopted, that button will be disabled, okay and that takes tool chain to success okay.

So this statement will do that or execute that logic. Again, when we are going to do the testing this will become even more clear. Okay. All right. Now the final thing in our code is to look at one event one function which will which will be called on a particular event, the event is when we are clicking on a button on the user interface in that case, this event will be called. And here all we are going to do is we are going to mark that particular date as adopted.

Okay. Right. So, let's let's go through the logic here. So the first thing we do here is after you know we receive the event, we get the pet ID, okay from the user interface. And then we create the adoption instance. And then we use we have this web three, integration where we get accounts and we assign those accounts to we assign the first first variable from the accounts to this variable here from the user interface will receive this event and then you know in the event we will have the various accounts okay those accounts are the accounts which we get from our test blockchain right.

So Ganesh, when we start it gives us a list of accounts right, it gives you around 10 accounts I guess, for testing purpose, okay. So this web three interface has this method through which we can access those accounts okay. So for us to invoke a particular method or adopt adoption contract region. need one single account right? So that's why what we will do is once we call the get accounts through the web three, we will choose the very first account for our testing purpose okay for our adoption purpose, and then here we are going to call the contract okay. So, just like in our previous method, here also, we will check if the adoption contract is deployed and if it is, then we are going to get the instance of the deployed contract Okay, through the application.

API, we call it the application binary interface. And then we are going to call the adopt method. Okay. So this adopt method is there in our contract So, this method Okay. Now here you remember the difference between calling adopt and calling the get adopters. So, in our previous method we called get adopters in that we appended we had that get adopters dot call method, because that was a call, we don't want to incur any cost.

So, we had not caught, but here we are calling the document method and this adopt method it changes the state of the variable right. So, here the variable adopters is assigned the address of the work is invoking the contract right. And if you remember in our last session, I said that when you call in a method, message dot sender, we give you the address of the account who is invoking the method right. So, here we have some counts with us we got the first account and through that first account we are calling our get our adopt method right. So, here we are passing the pet ID and you will see from we are passing the account right. So, the message dot sender will have that address and it will get assigned to the particular pet IDs about the area and that pet ID into this variable okay.

So, we are calling that method and once that method is called then we are marking that fate as adopted So, Mark adopted method will be called which we discussed just before this and this mark adopted method will then disable the button below that. Okay, so, this is the logic we have in our our am dot application. So the logic over here is first, we are doing initialization. Okay to get our instance of web three, and after that we are checking. So so let's go one by one through the methods we just discussed. Okay, so the first thing we discuss is initializing our object.

If you have a web three provider, if not, then we flagged it through our blockchain, the local blockchain. Over here in the network function. The next thing we do is we looked at banquette. Yes sir Here we got the contract ami ABS sorry. Okay, we got the VA and we said that ABI to our application level variable. And the third thing we did is we checked whether whether the pet is Mark adopted or not, okay.

And finally, we had the adoption method where we call the transaction on the blockchain. So, this is the overview of the user interface, the code which we have and in the next session, we are going to do the testing on this interface.