08 Petshop - Configurations and end to end testing of Dapp

Learn Ethereum by Examples Part 2 Pet-Shop - Your first Dapp
29 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
This is a free item
$0.00
د.إ0.00
Kz0.00
ARS$0.00
A$0.00
৳0.00
Лв0.00
Bs0.00
B$0.00
P0.00
CA$0.00
CHF 0.00
CLP$0.00
CN¥0.00
COP$0.00
₡0.00
Kč0.00
DKK kr0.00
RD$0.00
DA0.00
E£0.00
ብር0.00
€0.00
FJ$0.00
£0.00
Q0.00
GY$0.00
HK$0.00
L0.00
Ft0.00
₪0.00
₹0.00
ISK kr0.00
¥0.00
KSh0.00
₩0.00
DH0.00
L0.00
ден0.00
MOP$0.00
MX$0.00
RM0.00
N$0.00
₦0.00
C$0.00
NOK kr0.00
रु0.00
NZ$0.00
S/0.00
K0.00
₱0.00
₨0.00
zł0.00
₲0.00
L0.00
QR0.00
SAR0.00
SEK kr0.00
S$0.00
฿0.00
₺0.00
$U0.00
R0.00
ZK0.00
Already have an account? Log In

Transcript

Welcome back everyone. So in our fourth part of our paid shop tutorial, we are going to do the country testing of our tab we have developed so far. So, in this we are going to cover these topics. So, first we are going to discuss about meta mask what is meta mask okay what it is used for and why we require meta mask. Next we are going to talk about how we are going to configure meta mask to talk to our blockchain and, you know, interact with our deployed adoption contract. Next thing we are taught we are going to talk about is the light server.

So, this entire application is a web based application. In order for us to run this application we need to have some server to deploy this on. So, we'll talk about light server. Then we are going to do the complete testing of our dap application. And finally, we will We will discuss the takeaways from our first dap application. Okay, especially how it differs from the traditional applications and you know, the other stuff.

Okay, so let's, let's get started. Okay, so we have the code over here. So before. Before that I need to start the browser. So I will start the Firefox browser. Our testing will happen only in Firefox and I will explain why.

Okay, so we have a user interface. We have our blockchain, we have our contract, which is deployed on the blockchain. Now we want to interact through our user interface to the blockchain. Like the traditional application, the web based application, what we do is we have the application deployed on some Application Server. And then those applications are a client server based on client server architecture, right? So we can, we can interact them through the web browser.

But the blockchain technology is, you know, works on an entirely different paradigm. Right? In traditional application, we have three tier architecture, where you have the browser as the user interface, then you have the application layer and then the database layer. But in blockchain, we have the entire blockchain which works as a distributed database for us. Okay. So because of that nature, our traditional browser at this point, they don't have the capability to interact with the contracts deployed on the blockchain, right?

Because there is no application server running there is no database. Okay. So how that interaction happens Now to to to interact with any blockchain either you need to use specialized browser okay which are developed developed specially for blockchain or you can use meta mask as an extension to our traditional browsers. So meta mask is the extension which through which you can extend your browser to interact with the blockchain. Okay. So since existing browser they don't have the capability to interact with blockchain meta mask provides you a sort of interface, okay to connect to a blockchain and then through web three, we can invoke or interact with the blockchain.

Okay. Now in our case, I already have the meta mask plugin vailable in our development kit, okay, in case you want to install it in your browser, all you need to do is you need to just search for meta mass Mozilla extension or Firefox extension. Or if you are on Chrome, you can search for Chrome extension and through the extension you can get it added into your browser. Okay. So in my case, I have it already installed over here and if you click on this meta mask icon, okay. If it is the first time you are using meta mask, it will go through its configurations Okay.

Now before we can do the configuration, I need to have it on I need to have our blockchain running because we are going to use our test blockchain. So for that, I will go And open ganache so that our blockchain is up and running. And then we will go to Mozilla Firefox and get meta mask configured to talk to our blockchain. So, our test, blockchain is up and running. Okay and you know that blockchain is running on 7545 we need to remember this. Next I will go to meta mask.

I will accept the terms and conditions. We need to scroll all the way down. Okay, and then you need to give some password so thank you. Last word Yes. Okay, so it is going to create a new data. So you can create a new data but instead of that what I'm going to do is I'm going to import our existing data.

Okay. So then is basically you can see you know, you have your violet with, you know, your account details and how much impact you have on all those things. You can see, okay, now in our case, what we are going to do is our test RPC by default comes with the ballot and all those details so I'm going to use that Okay, so you can copy this mnemonics go over here. Okay, again, import existing 10 copy paste that why I'm doing this is because I want to use all the accounts, the test accounts which cannot provide us long with our test net Okay? So that's why I'm going to use this user password click OK. By the way to remember that that this is testing so in that case, you know we are using this mnemonics when if you are going to deploy your application on Main net, okay?

You need to use your own mnemonics and you're not having saved some IP which no one should access or do because this is a sensitive information. Okay, and here you will see that you know, we have this account for and you don't see any third or anything Why because we configured our valid but we did not configure our blockchain okay. So I will We'll go to the setting and I will point meta mask to our ganache blockchain. Okay, so over here we need to give the URL. Okay so if you remember go back so this is the URL where our test RPC is running. So we do this your sorry we need to go to the main network okay.

So, so here you know you will see all the available networks. This is the main aetherium production network Okay, the worldwide aetherium network, then these are the test networks available on aetherium. And then they Is this test RPC, which we used in our hello world. And then if there is any custom RPC test network, you want to utilize, you need to select this option. So in our case, our test RPC is running on custom port. So that's why we got here, this URL, okay.

And we will save this. So as soon as I save, then you will see that, you know, in our account, you will see some balance, we'll see this balance right. Now again, here, the balance is reset 200 because last time when we ran the session, or deployed the contract, and then I closed ganache, so that's why you know, all the previous transaction and the deployed contracts and everything is gone and we're there. So every time you restart grass, you will have it reset with you know, new accounts, and Your new balance and also you will see the current block is zero. So what we need to do is we need to redeploy our production contract before we can utilize our user interface. Okay, so so we will do the redeployment and this is I'm doing because last time I close the garage, that's why I need to do this okay, so I'll just put my click.

So, this will migrate our contract and you will see some blocks being mined in our blockchain and you will see some gas price has been used. So our account will decrease right. So now you will see there are four blocks mine. If I go to the transaction, again, you will see some transaction some guests will utilize and our balance has reduced. Now coming back to over meta mask in our meta mask also you will see again the same amount over here. And you know, this is the first account okay it is utilizing you'll see it starts at 62730 which is the first account okay.

So this is the account we are using okay and then next thing so so this is the overview of meta mask. Okay, next thing, next thing we are going to talk about is the light server. Okay, so our entire application is JavaScript based user interface in order for us to have it deployed and up and running. We need a web server. So you can have any web servers which are available in the market or for the testing purpose. The truffle box provides you a light server OK, so through this light server, we can access our application.

So what I'm going to do is, instead of running a sophisticated web server for deploying our application, we will utilize the light server. Okay, so this light server configurations are available in our vs config dot JSON file. So here you will see this vs config dot JSON. Here is the server. And it is going to take SRC as the base directive, where we have on the court and it will deploy it on the server. Okay, so how do we done this enough, all we need to do is we need to just go and run one command which is a Load command.

And then our server will get up and running. And along with that, it will also open up the user interface. So here I will be this is the corner and it will deploy the light server. And automatically it will have our back shop. Right. This is the user interface I was talking about.

And here you will see there are total 16 different pets. You can do that auction off that's why you know, we had that added for 16. So, these are the 16 different pets. Okay, so this is our user interface and this user interface Phase has all these bits and here you have that button. Okay. So now let's tie all the pieces together and understand the whole into the application right.

So, we have one contract called adop that contract is having one variable and two methods. So, let me open our current track okay. So it has one variable, it will store the address of adapters. Then there is a method which will actually assign the person or the account who is going to adopt the pet into this area, and then we can get all the pets which this particular address has adopted. Okay. This contract has been deployed in our test to blockchain okay.

And it is currently running are available on the blockchain. The other thing we have is this user interface. In this user interface, we have the init. app, file app.js file. In that file, we have three different methods first method basically gets the reference for for the web three, provider, right. So now, the web three framework will help us invoke all the methods on the deployed contract.

So first, it will help us get the instance of the contract. Second thing it'll help you invoke methods as a call or as a transaction. The second function we have in this application will help you initialize the contract variable Third function will verify the pets which are being adopted and if they are adopted, their button will be disabled the adoption button will be disabled okay. The adoption button will be disabled it will display success state of a dog and the third the final function we have is wherein we can click on this adult button it will then trigger the adoption event okay which which I talked about in the previous session and then in that adoption that adoption function we are going to invoke the adopt method from the contact right. So, the last two function Mark adopted will call will make A call on gate adopters function.

Okay, one of the two functions on the contract. And the second invocation will execute a transaction or on the adoption contract within a pet will be adopted. So this is our end to end the application from the contract to the user interface. Now let's see it in action. So what I do is here, you know, I will go click on a doc, okay, so this clicking of this button will invoke the event which we'll call our final method, okay. which is this one.

Okay, this function it will call and in this function, we are going to call the adult record okay. As the pet ID, so, whatever is the pet ID for this one okay. So it will pass on that pet ID and that pet ID will be passed to adopt function and in our adopted array in the contract, adopters add a dog the first variable will be the address of the account which is calling this and all this interaction connecting to the blockchain will happen through meta mask and getting the interfaces getting to, you know, the interaction with the contract will happen through web three. Okay, so web three is the JavaScript framework to interact with the contract. Meta mask is the interface to connect to the blockchain, okay and do the communication and then we have this web interface. So, we have the user utilize the dab edition.

So you just click on adopt it will trigger the event okay before that event is triggered meta mask will ask us to select the account you want to choose okay okay. So here we have only one account okay. At this point you will see it starts with six to seven the very first account okay there is no charge for adoption it is zero and then there is this gas image okay. So, there is that default gas limit, we can increase and decrease based on the value of your gas price. The priority of your transaction on the blockchain will be data mined because you know in a distributed system, distributed blockchain there will be multiple invocation happening from various application right so, Which integration get executed first depends on the gas limit gas price and all sorts of things okay. So I will just submit with this price okay so there is some gas price some transaction fees happening and before we do that if you can actually you will see there are four blocks currently okay and we have how much amount we have 99.94 okay as soon as I click on Submit two things will happen first on the block here you will see the block there is one more block mind Okay, you will see the transaction amount has decreased and if I go to the transaction you will see you know some more transaction happening with the guests used and all the other details and on the user interface side.

Once the adoption is complete and confirmed, you will see that this adopt button is Disable and the text is changed to success. Yeah. So, now you will see that this button it says success and it is disabled. So, this way you know we can adopt maximum 16 different pets because our variable that is variable size was 16. Here again I need to ask something like this the transaction is happening you will see one more block being mined with these six blocks now, and you will see that the cars you will see that amount is there If I refresh this monitor transaction is confirmed here you will see success. Okay.

So, you see we adopted two pets and their buttons are disabled. Okay, right. So this is your first dap and we have gone through the entire process of creating the contract, doing the testing of the contract, deploying the contract, doing the unit testing of the deployed contract, then creating a user interface to interact, configuring our meta mask and finally testing the application. So this I hope will give you a you know, very better understanding of what blockchain is. What Ethereum blockchain is, what a contract is how we develop an end to end application. Now, that you you have got the understanding of blockchain technology and how to develop the application.

Now, let's discuss the takeaways. So, what are the takeaways over here? The first take away is the blockchain technology and aetherium in particular makes it you know, very easy for you to develop distributed application where there are transaction happening where you are, you know, selling or buying something without involving any third party. So, it provides you a trustless environment for doing transaction. What do I mean by that? Now, assume that this is instead of a pet shop, this is me an ecommerce site like amazon.com so on dot com if you want to buy something, your transaction, especially the payment happens through a third party.

Okay? So both Amazon and the customer, they have to have this third party, which will provide you the trust of doing the transaction. So you trust your credit card company, Amazon trust the credit card company, and then you exchange goods and services through that third party. But if you have blockchain and aetherium, the same thing you can do, you can exchange goods and services, but you don't need to have any credit card company over here. All you need to have is a worldwide distributed blockchain on which, you know, the seller will have you know, these kind of contracts. Okay, in our case, we have this contract to be able to adopt a pet Okay, it can very well be you know, somebody selling, you know, mobile phone for example.

And then the customer can go to the website and all the customer need is an aetherium account and some ether in his time so he can then use meta mask, okay, select a mobile phone, click on buy, provide all the select the account they want to use for the transaction and then transfer the ether for his account to the sellers account. And then the seller will receive the ether and the buyer will have the claim that he bought a particular cell phone from this seller because all that information is on the blockchain in terms of the transaction, the customer will have the transaction hash, which will view the details about what happened in the transaction okay. So, in that it will tell that okay through this transaction this customer with this account has transferred this much of ether to purchase this particular form okay. So, there is no third party involved for solving any dispute because everything is there on an immutable distributed database which is our blockchain and this is providing you a trustless environment without having any third party wherein, you know, you need to have some fees to you know, for that third party to provide your services.

So, because of this capability, wherein you have a distributed environment which is immutable, which is verifiable the whole blockchain technologies so revolutionary, okay, and now you can see the potential of the blockchain and it caveum you know, using this infrastructure you can develop you know, all sorts of application where previously any third third party trust is required. So, through blockchain that trust is no more required and you can have an application with so much of a, you know, a lot of capabilities and potential. Okay. The other thing that the second takeaway over here is having the audit trail okay or the transaction details, okay. So, for example, if you are transferring some ether from one account to another account, you get the transaction hash, and then through that transaction hash, anybody can validate and verify that transaction. Okay.

Now imagine that scenario in property registration. Right. So currently what we have, we have Third parties like government, they provide the property registration, right. So the buyer and seller, they need to verify that the actual buyer, the intended buyer is the actual buyer by going to the registrar right now, instead of maintaining the property registration detail on this third party, all those details can be maintained on a distributed Ethereum blockchain. Okay. And if I'm there to sell my property to you, all I can do is I can give you the details about the transaction when I bought that property and you know, it got transferred to my name, and you can take that one and verify it on the blockchain.

So you and I, we don't need to go to a third party. We don't need to have that expensive. charges which get incurred while registering property and this applies to all sorts of scenarios and this is another reason why the blockchain is such a revolutionising technology. Alright. So with this I will conclude this session and it has been a very huge learning experience for all of us by going through this dap and we understood lots of aspects of the blockchain technology. Alright, thanks a lot.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.