Intro To Blockchain Programming (Etherum, Web3.js & Solidity Smart Contracts) [FULL COURSE]

do you learn blockchain programming because today I'm gonna show you how to write your first blockchain application powered by aetherium web 3 and solidity smart contracts and you don't have to know anything about blockchain in order to follow along I'm gonna teach you from scratch I've even created a step-by-step guide with written instructions and code examples and you can find a link to that down in the description below so if you're new around here I'm Gregory from dapping University and I've helped tens of thousands of people learn blockchain programming and I want to help you today but before we get started be sure to subscribe to this channel if you haven't already and click the like button down below and if you want to learn how you can become a highly paid blockchain developer you can join my free training on my website over at dap university comm forward slash bootcamp and i'll also put a link to that down in the description below so today I'm gonna teach you blockchain programming from square one by building a complete blockchain application will create etherium smart contracts with the solidity programming language will write tests for these smart contracts and javascript will deploy the smart contracts to a blockchain and will create a client-side website with web 3j s and react.js so that users can actually interact with a smart contract on the blockchain and don't worry if you don't know these programming languages already I'm going to teach them to you as we go so let's go ahead and look at the application that we're gonna build this is a marketplace application that runs in the blockchain kind of like Craigslist it allows people to list items for sale and it allows other people to purchase those items with cryptocurrency whenever somebody purchases the item they instantly become the owner that's because the application is powered by a smart contract on the blockchain which manages the marketplace it tracks who owns the item for sale and it transfers the ownership of it automatically anytime someone purchases the item with cryptocurrency so it kind of works like a vending machine so let me break that down if any of that's confusing let's start with the basics so like what is a blockchain so blockchain is a peer-to-peer network of nodes all talk to one another right these nodes are basically just computers that share responsibilities very similar to a web server they store data and run programs that can be accessed anywhere whenever you're connected to the blockchain and all the nodes work together to create a public network that anyone can connect to so you can think about a blockchain in a few ways one way is to think about it like a giant world computer where all the computers work together you can also think about it like a network where you can send money and run programs and you can also think about it like a database that you can store information inside of and you know sketch it back out so the blockchain you know assumes a lot of responsibilities that a single web server would normally you know soon like keeping the application code on a web server and also keeping the data on another web server but the blockchain actually delegates this responsibility across all the nodes in the network so instead of keeping all the code and the data to an application on a web server the blockchain distributes this to all the different nodes that means that you know each of these nodes in this you know gets a copy of the code and the data on the blockchain right and they all work together to you know run the code and make sure that the data doesn't change and is secure that's why it's run on the blockchain so all the data on the blockchain is contained in bundles of Records called blocks which are changed together to make up the public ledger and all the nodes on the network work together to make sure that this data is secure and unchanged and that's what makes the blockchain so powerful so how would you connect to a blockchain well I wanted to do it you need access to a single node right you can run your own node or connect to one and whenever you do you have access to the power of the entire network so what is a smart contract smart contracts are the building blocks that we use to create blockchain applications their programs that we can write to run on the blockchain they're been in a programming language called solidity which I'm gonna teach you in this tutorial they're immutable which means they can't change and we want that to be the case because we don't want the code to change at all we want to deploy to the blockchain no it's a contract that's always gonna work the same way every time that no one else can tamper with it and it's also kind of like a micro service on the web you can think about like that all right it exists on the blockchain and really anyone can talk to it and read and write information from it and execute the business logic contained inside the program so how does a smart contract work well let's look at the diagram of the smart contract we're gonna build today we're gonna run a smart contract to power the marketplace in this tutorial and it's gonna work kind of like a vending machine so we'll allow someone to list an item in our marketplace and anytime someone wants to buy it they're gonna send cryptocurrency right and the smart contract is going to be in charge of sending the payment to the seller and then sending the item to the buyer and so that's how you know the smart contractor is going to work but what about the entire application like how does it all fit together well let's look at the structure of a normal web application in order to understand that and then we'll look at how our blockchain applications going to work so here's the structure of a normal web application right you've got a client-side application run an HTML CSS and JavaScript right that's accessed by a web browser right that's going to go here and this HTML CSS and JavaScript can be the front end and it's going to talk to you know a back-end of some kind of web server that's gonna have all the application code and then that's going to talk to a database that you know contains all the data for the project and all that's gonna lie on a central server right right here but this blockchain apps gonna work differently first it users going to connect to a web page with their browser and then that web page is gonna talk to the blockchain directly right it's gonna connect to an aetherium node that's going to access all the data on the blockchain and it's also going to interact with the code that we write this smart contract right so the blockchain is basically going to be our entire back-end right our front ends gonna be a website and the backend is gonna be you know smart contract running on the blockchain all right now that we've covered the basics let's go ahead and get set up so we can start building our application before you get started you need to make sure you have no js' already installed in a computer you can see if you have node installed by going into your terminal and typing node - V you can install node with the package manager like homebrew or you can download it directly from the node.js website the first item in the blockchain developer toolkit is a personal blockchain we're going to use ganache as our personal blockchain for this tutorial you can head over to truffle framework com4 slash ganache to download it you can click this download link and whenever you've downloaded it makes you install it and when you open it you've got a local blockchain running so what is ganache you know what is a personal blockchain well a personal blockchain is like a real blockchain Network you know that's connected to the public or anyone can connect to it but it runs on our computer it's you know a closed Network and ganache basically you know as a process that runs on a computer that spins up this blockchain and runs on a server so we can use this to the develop smart contracts we can run tests against it we run scripts against the network develop applications that actually talked to this blockchain is really helpful and it's an invaluable tool and the blockchain developer toolkit so if you open ganach you'll see you know ten accounts listed here these are the addresses to each account on the side and you'll see you know these balances you'll see one hundred ether and this is the etherium cryptocurrency that each account has and it's you know required to you know pay gas fees and the network and stuff like that alright so that's an overview of the ganache personal blockchain network and we're gonna leave ganache here set up in our project because we're going to need it running in order to develop our project the next dependency is the truffle Framework we're going to use the truffle framework to develop and here iam smart contracts with the solidity programming language you can install shuffle by going to your terminal and typing NPM install - gee truffle at 5.0 dot 5 and it's important that you use that exact version in order to follow along with this tutorial but truffle is a suite of tools that allows us to you know develop smart contracts write tests against smart contracts deploy smart contracts to the blockchain it gives us development console and it also allows us to develop client-side applications inside of our project so it does a lot and I'm going to show off all those features in this tutorial the next dependency is the meta mask extension for Google Chrome remember that the etherium blockchain is a network and we need a special browser extension in order to connect to that Network and that's where meta mask comes into play metal mask will allow us to connect to the blockchain with our personal account and actually interact with the smart contract that will develop in this tutorial you can install meta mask by going to the Google Chrome Web Store and searching for meta mask and clicking install and once you've installed it just make sure that you enable it inside of your chrome extensions like this you can also see the little fox icon and your extensions tab all right so the first thing we want to do is just set the project up we want to make sure that our environments configure properly that we can talk to the blockchain and start coding without any problems okay so instead of you know creating a bunch of files ourselves I want to get started with a starter kit okay this is something I created to allow you to create apps quickly or blockchain applications without having to write a bunch of code yourself right and once you have to do a ton of configuration so basically you can just copy this URL this is github.com fort slash debut diversity ford slash starter kit and clone the product this way all right so if you're not very comfortable to get you can also just down a zip file if you want to right here but I'm gonna use git okay so imma go to the terminal and I'm going to say git clone I'm gonna paste in the URL and I'm also going to provide the project name that I want to create so in this case is gonna be market place a market place all right okay so now I can change directory CD marketplace all right all right there we go that's on your project so I just cloned the starter kit and created a new folder called marketplace and that's where we are so I can see all the files inside of here and I can see you know that there's get information here it comes to the initial commit but that just sets the project up so that's okay so I'll clear all this out now I'm going to open this in my text editor okay to take a tour of the project I'm gonna use sublime text and I can open files and projects with sublime text with this special symlink I say subol dot if you don't have that you know configured on your computer that's okay you can just manually open the project and sublime text yourself but that's how I do it alright so let's take a look at you know what we created whenever we downloaded that starter kit okay so this is a truffle project alright you could have created something very similar to this with the truffle and knit command but I've set this up you know with some dependencies already we've got a bunch of JavaScript dependencies in here inside this package dot JSON file that we can use for testing that we can use to just navigate our project really quickly we've already got react installed which is what we use to build client-side application I've got bootstrap installed so that we don't have to write a bunch of CSS ourselves and you can create really nice-looking front ends so this is a design for you to start creating full stack blushing applications really quickly right and I'm also got the network configuration ready to go we're already talking to ganache our local blockchain without any configuration and you'll also see that I have some additional configuration here to put the smart contracts in a different place than they normally are at a truffle project and there's several reasons I do that but basically I'm going to keep all of our source code inside of this source code directory so long story short if you if you're familiar with other truffle projects just know that the smart contracts are gonna be in a different location than than normally are but that's not a really a huge deal it just helps keep things a little more organized especially for deployments ok so we can take a look you know inside the source directory we're gonna have our react components that we'll use to build a client side but we'll also have the smart contracts which will essentially be the back end for this project alright so inside the smart contracts directory is where we're going to create our first smart contract we can already see that there is a smart contract to the side of here this is actually just a smart contract that ships with truffle projects this is a contract that handles migrations so whenever you put new smart contracts on the blockchain truffle uses this smart contract to help do that all right so let's go ahead and create the smart contract that we're going to write in this tutorial series inside this directory right here so I'm gonna create a new file alright and we'll create in this same folder and we're going to call this marketplace so capital M AR K et PLA CE alright Sol Sol alright and this is the file will write all the solidity source code for the smart contract so the first thing I want to do inside of here is declared their version of solidity that we're going to use all right we do that like this say pragma solidity all right and the music carrot say 0.50 alright then follow that with semicolon alright next we declare the smart contract we use that with a contract keywords a contract and we're gonna call this marketplace just like the filename alright and this is going to be the smart contract that you know handles all of the business logic for buying and selling items on the blockchain right it's also going to write to the blockchain and read from the blockchain so it's gonna kind of act like our all-in-one back-end for this project okay so we put all the code for the smart contract inside these curly braces like this then you know inside here and the first thing I want to do is essentially just create a create a way to make sure that this smart contract gets deployed properly to the blockchain I don't want to write too much source code inside of here I just want a simple check okay so what we're gonna do is give our smart contract a name and we'll check for that name inside the console okay so we do that like this I'm gonna I'm gonna create a variable called name for this but it's a special kind of variable right it's called a state variable so why is a state variable special well the state variable essentially writes information to the blockchain you know the value of that variable is actually stored on the blockchain alright and it kind of belongs to this entire smart contract I like a class variable would and maybe another audit oriented programming language and we you know just declare state variables like this first we declare the variable type all right cuz solidity is a statically typed language so we say string all right it's gonna be a string and then we follow that with the variable name like this we say name all right and that's not the very this this is just the actual name of the variable is name because that's what we're gonna do we're gonna set the variable name okay so that's how you create a state variable now the next thing we want to do is be able to access this variable from outside the smart contract okay so right now we could you know update this value it would right it to the blockchain and we could read this from the blockchain but currently we can only read this value inside the smart contract itself right we want to actually be able to access it from outside so we declare a public and this will actually create a function for us where we can you know call the function name that will return this variable value whenever we deploy this mark contract okay so next we actually want to set this value there are several ways we could do that I'm gonna do it inside of the constructor for the smart contract really just just show you how the constructor works like I said there's a couple different ways you can do this but I'll just show you this way all right so let's do it this way it will say constructor all right and this is how you create a constructor so constructor is basically just a function inside a solidity that gets run only one time whatever the smart contract is deployed all right so let's say constructor public all right and this is going to be where we set the value we'll say name equals say DAP University marketplace all right there we go so that's how we set the value of that name okay yeah we do this inside the constructor function which we call constructor and let's go ahead and see if this works so I'm going to open up the terminal go back here and let's first compile the smart contract just to make sure we don't have any errors in the code so we say truffle compile like this oh let's look at an issue here I see what the problem was so first we didn't actually install the dependencies for our project okay so we cloned the project but we didn't actually run npm install and i'm actually gonna leave this in the video because this is a common problem that we run into so i want to go ahead and fix it for you while i'm on camera so all these packages inside of here we have installed yet so make sure you do this whenever you clone the project say npm install just like that and i'll just pull this up in case it's getting cut off at the bottom of the screen wait for all these to download and you're probably gonna see some errors here at this time i'm trying to figure out what's going on here it should install successfully even if you see errors you can probably just ignore them just to make sure that you see a success message at the bottom of the screen okay so here's what i'm talking about starting to see this kind of stuff don't worry about that as long as your build actually succeeds okay so you can see right here is optional skipping this right skipping these optional dependencies don't worry as long as you see this you're okay alright i haven't run into issues successfully building their project with those errors okay alright so i'll play that out and we'll try truffle compiled against a truffle compiled alright it worked and now you can see that it actually put the compiled smart contracts in the correct place i'll just show you what that is alright so we put it inside the source directory under this abis directory and we can actually see the compiled smart contract here this is a an abstraction that truffle creates with has an ABI inside of it i suppose this could be named something a little better because this file actually is more than just an ABI here's the abi abi stands for abstract binary interface and basically just describes how the smart contract works with you know JSON like this we can also see the byte code for the compiled smart contract lots of other stuff okay so that worked and this is where the api's go inside the project alright so the next thing is to actually to plug the smart contract to a blockchain hold it like this will say truffle my right alright we can also actually first let's just make sure we have ganache running so that's something that you all won't want to do say ganache alright if is to open might open off-screen here so let's actually create a new workspace so I'm going to do is I've got one old one here so let's kill that remove it all right new workspace we'll say marketplace and what you want to do is add your truffle project so we can go to add project alright so I found marketplace and inside of here I just want to select the truffle config file so essentially what this is going to do is link your project to ganache and it'll show you axed ryuu's full event data stuff like that whenever you're trying to debug or just you know watch stuff happen on the blockchain okay so we'll add project we'll save workspace alright and there you go you got your blockchain running and that's something you want to make sure you do before you try to migrate your smart contracts because it won't be successful if you're not connected do ganache and you want to double check that you know port 75 45 is where ganache is running because that's what you specified here and truffle your truffle config file so 75 45 okay alright so let's run the migration so truffle migrate hit enter alright it worked so now let's just check I'm going to clear this out and I'm gonna open the truffle console okay I do that like this say truffle console so now I have open the trouble console which is essentially just a JavaScript runtime environment that allows us to interact with our blockchain okay and we can interact with smart contracts and just the blockchain itself okay so inside of here you know we can we have access to web 3 you know which is the main JavaScript library for you know communicating with blockchain so I'm going to pull this up in case it's getting cut off on the screen and we can see the accounts that are listed with ganache we can say web 3.4 ETH get accounts and we say like this we can say accounts equals a weight web 3e get accounts all right and and it'll say undefined but that's just the return value that's not actually what got assigned to accounts or that's sorry that's what gets logged out so we say accounts alright and now we can see all the accounts that are you know running and ganache so if you go back to ganache that's the same thing all right and now we can you know also do really simple stuff like a weight say block number say wait web three eath get block number all right block number all right that'll just show you the current block number on the blockchain right there you go so that's the way to just assume that you're actually connected the blockchain that because you can get the block number you can see the accounts and so that way you know you're talking to ganache correctly you're actually talking to the blockchain you set that up well and so the next thing you want to do is actually just check the smart contract so we can get a copy of the deployed smart contract like this we can say marketplace equals capital m market place dot deployed all right we call that function and this actually isn't gonna work I can see it ahead of time so we'll go back and fix it but I'll say oh wait and we'll say market place all right some market place has not been deployed to a detected Network all right so I I just realized this was gonna break before I tried it so let's see why all right so I'm actually only this in the video I'm kind of glad it's happening this way that I'm kind of forgetting to do some things because it shows you that you can read the errors and then figure out you know why this error is happening and what you need to do differently to fix it and that's kind of really how development works in the real world so I'm going to exit out of the console and I'm not gonna leave you you know scratching your head as to why this is happening I'm just gonna tell you so we didn't actually migrate this smart contract to the blockchain yet alright so I'll tell you why we actually have to create a script to do that alright so we see this migrations directory here you see an initial migrations file I'm going to create a new one and we call this 2 alright and we'll say deploy contracts is alright so this is 1 and then 2 and you actually need to order these so that truffle knows the order to run them in so one is the initial one two is the one that we're gonna create so I'm just gonna copy all the code inside of here and paste it and I'm gonna change all the words that say migrations and I'm gonna call it marketplace alright that's pretty simple this file basically just takes the smart contracts and puts them on the blockchain this is very similar to a migration in other contexts if you've ever worked with like a database before had to create migrations to add new columns or tables or something like that it's essentially what this is it's migrating the database from one state to another this is migrating the blockchain from one state to another by putting a new smart contract on it ok alright so let's rerun our migrations say truffle migrate and do this again alright now let's open the trouble console alright now let's try this a game will say marketplace equals a weight capital M marketplace not deployed all right so said undefined that's okay we didn't actually return the value of the variable we do that like this a marketplace all right there we go so now let's get the address say marketplace to address all right there we go the smart contract actually has an address so that's good now let's check the name that we set up here inside this this state variable so do that like this was a name equals a weight capital M or sorry lowercase M marketplace a name call the function this was the function that was created whenever we declared this state variable public right all right so we know a name and then we'll return name like this so just a name boom there you go DAP University marketplace awesome so worked we successfully put this smart contract on the blockchain when you fetch the address and we've been able to fetch the name so that's a good smoke test to make sure we've got everything set up properly all right so that's good now the next thing I want to do just to finalize this smoke test is to create a basic test file that we're gonna fill out or the rest of this tutorial will kind of do this in a somewhat test-driven fashion or at least we will prioritize writing tests as we create this marketplace smart contract will write tests alongside the solidity source code right so we can write tests in JavaScript inside this test directory actually don't see one so we want to create one so I'll go to the terminal at this and say mkdir so that stands for make directory say test all right so we can see a new test directory was created here and let's just touch that I'll create a new file test and we'll say marketplace capital M marketplace test J s all right clear all that out and aside of here we have an empty test file all right so what I want to do is fill this out and basically check for the same thing we just did in the console we essentially just want to you know check that the contract was deployed of the blockchain has an address and has a name so we can import the contract into this test file like this pretty basic all right we just say marketplace constant marketplace equals artifacts require marketplace that soul it's a lot like the migration father we just saw a minute ago all right same thing almost verbatim and next we can use mocha and chai which comes with truffle okay so I'll just show you that so mocha is a testing framework in JavaScript and this is what comes bundled with truffle and chai an assertion library that allows you to do assertions in your tests like should be you know you know expect assert things like that right so that's what we gonna use for this and we can declare the test for the smart contract like this will say contract will pass a marketplace all right and then I will pass in a functional to be the accounts all right and then I will use some curly braces here and we'll put all the tests inside of here all right so the first thing I want to do is create a before well let's do this they let marketplace absolute lowercase and this is where will the store will store the deployed smart contract with this variable but we're gonna declare at the top because it'll probably change so and we also want to be accessible to the rest of the test so say before async same market place lowercase equals a weight capelin marketplace deployed this is just like we did in the console right I just did this and then that's gonna get the deployed copy and the first thing we want to do is say describe deployment so describe is something that comes with mocha say sink and I'm gonna explain this async/await that we see all over the place in just a minute so they it deploys successfully and will pass in a sink make sure be consistent here I'm sorry and we'll say Const address equals a weight marketplace address and now we want to say assert all right not equal address zero X is zero so essentially what this is doing is just getting the address and saying hey we want to make sure that it's present that it exists it's not equal to this we also want to make sure it's not an empty string that it's not null and then it's not undefined so we can also do that just like this though all right so let's run this and see if it works we can go to the terminal like this and say truffle tests all right and this is going to actually run all the tests inside of our test directory in this case we only have one so I should find that and run it all right and see what happens all right there we go it passes okay so now let's see here marketplace deployed works works okay so the next thing we want to do is just check that the name was set properly okay we'll go back to our test and we'll write a new one we'll just say it has a name say it has a name say sink say Const name equals a wait marketplace name say a search equal a name will say DAP University marketplace all right let's save that run this tests and while this test is running I'm gonna go to explain something so you see this keyword async and you say that see this keyword await everywhere you know I did this in the console where I said Marketplace equals a wait you know marketplace deployed so why we need this await keyword well deployed here is an asynchronous function call so what does that mean it basically means that it's going to Java scripts can allow you to like resume code execution while this function is still being called right like it doesn't wait for this function to finish before it moves to the next line okay so but if we use the await keyword it does all right and you can only use the await keyword and in the async context okay and that's what we have to have a sink here so there's lots of different strategies for doing this essentially this deployed function is asynchronous because function calls from the blockchain are asynchronous because it can take a long time and so that's why by design it's asynchronous but if you want to wait to get the smart contract from the blockchain you have to do it you have to wait for it so that's why I use a weight keyword and an async in context so you'll see this this is called the async await pattern and you're gonna see all throughout this code base and the tests and the console and the client-side application okay so if I just wanted to stop and explain that here you can read more about async await online so all right are passed so there we go alright guys so that's it for this video this is you know the conclusion in the first video where we you know set the whole project up we're talking to the blockchain we got a basic smart contract we've got test ready to go so they can deploy the smart contracts with confidence knowing that they work and we can you know continue writing tests and continue building out the smart contract in the next video and that's exactly what we're gonna do all right so this video we're going to continue on with the progress that we made in the last video where we set everything up right we connection to the blockchain we created this basic smart contract here this marketplace smart contract and we wrote a basic test all right so you can find the code at this point the video with the link down in the description below but yeah let's continue on with this Marc marketplace smart contract we'll continue writing tests alongside as we develop it right so first things first make sure you have all your dependencies install with NPM install all right and also make sure that you have ganache running right this is your development blockchain okay all right so let's continue on the first thing we want to do this smart contract and this video is actually create a way to add items to the marketplace or products okay we want to basically create a product as a seller right we're gonna list a product so in order to do that we need to model the product in some way okay so I'm gonna do that in solidity with something called a struct so solidity allows you to create your own data structures like this is a struct and we'll just call it a product okay we can really give this any kind of attribute that we want to okay so the first thing I'm gonna do is give this struct an ID so you int ID alright so you went stands for unsigned integer that basically just means that it can be a number without a minus sign in front of it has to be positive you know a sign is a minus or a plus and this is always gonna be positive okay so we say string name strings pretty self-explanatory just like this and we'll also give it a price that you int price all right and then we'll give it an address of the owner all right so this is gonna be the person who owns a product and when we're listing it it's going to be the product seller but whatever it's purchased this is actually going to change to the new owner which will be the buyer okay so then we'll also have boolean for purchased to see whether the product has already been purchased in the marketplace or not all right so this is how we're gonna model the product we just create this basic struct that gives it these attributes all right so now we need a place to put this newly created structure so also I mention this is just a description of how a product works it's not necessarily an individual product each newly created project will follow this pattern all right so anytime I create a new product when you place to put them and we're gonna use something called a mapping and solidity all right and we'll create the new mapping like this we use the mapping keyword mapping and essentially a mapping is a key value relationship so it's like a hash table or an associative array or a hash or an object in other languages we're basically we have a key and a value so in this case the key is going to be the product ID all right and then the value is going to be just this whole product struct like this so the ID is going to be an unsigned integer like we declare it here so we'll we'll show the key map sorry the key value relationship like this we'll say you int and then we'll pass in the value it'll be a product and then we'll call this products all right so now we have our syntax I'll heading back alright so basically here's the mapping right that we declared the key is an unsigned integer which will be an ID and then the value will be product data type which we created here when we create this struct guy and this meat products mapping is the name of it now we want to be able to access this products mapping outside of the smart contract not just inside of it so we'll call it public just like we did with the name it's a public alright so there you go now we have a place to put these products okay so also we need a way to know how many products exist inside this mapping so you could have this giant you know lookup with IDs and products like we do it here but the problem with solidity is you really have no way of knowing how big this mapping is it's just a limitation of the evm so basically if you created a product and you only had five you don't know that there's only five inside of here you know if you looked for product five it would return a product but if you look for product six it would just return a blank struct with default values which would be like zero empty string 0 0 X 0 and false so we need a way to know how many products are inside of here because whenever we list them out we want to know how many there are and actually get them one by one all right so we'll do that like this we'll create a counter cache we'll say you int public just like everything else and say product sorry product count all right so that's gonna be something that we can use to know how many products exist inside this mapping will just increment this any time we add a new product will just increase it by one all right so we can use a default value right now say equals zero all right so there we go we've got a way to describe a product and put it on the blockchain that's another thing I'll mention this mapping is a state variable so anytime we add you know new products here they're getting put on the blockchain when they're inserted into this mapping and when we read them as mapping where they're getting read from the blockchain okay same thing with this product count alright so now that we have a way to put them on the blockchain let's actually do it so we're gonna create a new function called a create product will look like this we'll say a function create product alright and we're gonna pass in some values and then we'll put it inside if you're right but I'm gonna fill this out let's actually write some tests as we do this so I'm gonna open up a new column and put the tests over here and the solidity source code on one side alright so inside of here basically what we want to do is a few things we want to you know create the product we want to trigger an event basically tell the blockchain that something happened and we also want to make sure the product is correct before we do it make sure parameters are correct so basically we're going to accept some parameters inside this function we want to make sure that they're correct before we create the product when I create it and then we want to trigger the event all right so that's three things that we'll do and we'll write tests to check for this okay so first what I'll do is create a test over here and we'll say give ourselves some space just so they can see just like describe deployment will do this will say which is copy and paste will say describe products and we're going to take this out I'm going to copy this before filter or started before hook and I'm gonna paint it like this just that I'm not you know writing code a bunch of times and inside of here I'm gonna create the product first okay so let's just say that result product count so I'm going to basically create some variables here that will update later but inside of here I'm gonna say results and then I want to basically just say a weight we've already got marketplace I'll do like this I'll say create product all right so that's going to create the product first then I'm just going to test let's just make sure that it actually incremented the product count to one so say creates products all right so let's take it all this somebody that's kind of fast but I basically wanted to show you what I'm checking for so we want to do is basically well actually we need to fetch their product accounts listed like this let's do that like this so say results that was a product account alright so I know I did that kind of fast but let me just go over what I did so we said describe products and like I said you can download the source code or you can just pause this point the video and try to digest some of this code so for products we want to just make sure that it creates a product we're gonna fill this out more but at first we basically just want to say the product count changed whenever we added a new one okay and we just create a product count over here and we want it to go from zero to one alright and before we actually check for this we're gonna you know try to call the create products function which is we're gonna fill out right here alright we're gonna add some arguments inside of here so we can say create product and we could go ahead and just increment that value let's go ahead and do that all right so let's say product count so say increment product count do that here say product count plus plus all right so let's run this test should work all right so while that's running basically we're gonna check for the product count and the next we're gonna accept some arguments inside of here right this is gonna be what we actually you know we're gonna Rick we're gonna say we want to create a product with a few attributes so we can say a string memory a name the products gonna have a name right we're gonna set this and we're gonna set the price as well all right and then say you int price okay I'm gonna go back and do this is one tab for a second just so you can see the code and we'll also call this public so that we can call it I think we're not gonna be able to do that our test is gonna fail all right yeah so we got an issue here sorry guys let's let's just continue on with this and we'll increment the count as we go all right so memory name you went price public all right so we want to accept some arguments we want to make sure it just increments the count first okay so we'll set all these here in a minute but let's just fix the problem that we have I'll see here see you got parsing marketplace ol expected that oh I see I didn't I didn't add a semicolon so we could try to run this again let's just take these out but leave public right you need public I want to be able to call this function so save that we run in trouble tests I'll just wait instead of me tuning on all right it work so it actually incremented the product count okay so now let's continue on building this out I'm gonna put these back in here so basically string memory name all right and then you int price okay and we're just gonna increment the product count like that so let's go over here and add this so we'll create a name we'll just say iPhone X and as a price we're going to specify this in terms of ether all right so explain that basically the price we're gonna we're going to purchase you know items from the marketplace with a theory cryptocurrency or ether okay so the price is going to be expressed in ether but whenever we store you know ether on the blockchain we store it in something called way alright so way is basically the smallest denomination of ether you can go to this website ether converter dot online to see the different values of ether so if you subdivide either smaller and smaller and smaller you eventually get to way it's sort of like aetherium Spinney it's like a really really small penny okay and we deal with this value so this is one followed by 18 decimal places which is basically one ether i divided by decimal places all right you'll see you'll see others values like gray a lot right so we're gonna deal with way so how we can do that in our test is basically say we're going to do i phone x but we're gonna create a product in way so we want to say so say 1 followed by 18 decimal places so one say one ether but to store one ether we have to do this 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 in order to create one way our sorry one ether expressed in way that's what ether looks like as way and smart contracts always deal in way values like this okay so I don't want to do that but that's what it would look like if you run it out literally so I'm gonna say web 3 utils 2 way and I'm gonna pass in one alright I say ether that will convert it for us automatically alright so let's go and rerun the test we didn't change anything inside of the solidity smart contract necessarily we just accepted some arguments and that's what I want to do here alright alright still works just fine so it's yelling at us that we have some unused function parameters bets ok we're going to use them now so we'll go back to the smart contract let's actually do some stuff so inside of here we want to create a new product and add it to the mapping we'll do that like this will basically just say after the increment of the products account will say products say product count and we'll say equals we'll create a new product like this is a product alright say product account we need to give it several attributes the ID all right so in this case is just going to be the product account because we incremented it alright see why I'm using this counter cash like the counter cash always corresponds to the the most recent ID alright and so prior to count zero we increment it it turns into one which becomes the ID of the first product right and so on so forth so product count and we'll say say name all right price all right which will fill out this which will get from here and then also we want to say the owner so the owner is gonna be the person who called this function and we have access to that inside of solidity with something called msg sender all right so MSG is a global keyword and solidity and sender is the value of the person who called the function this is gonna be a theorem address like you saw in ganache alright so then we're going to say is it purchased and since we just created it it will not be purchased so we'll call it false okay all right so that creates in your product let's just go ahead and rerun the test to make sure everything's working correctly and then we will check for that in the the test already passed so in order to test for the product I want to make sure that it was actually logged out okay so we can check the logs by triggering events inside the solidity all right this is really helpful you can use this for a lot of stuff I want to show you how to use events right now all right so well first need to define an event we do that like this we can say event well capitalize this and say product created all right and I'm gonna open this up like this and inside of here we're gonna just pass in all the values from their product basically we'll use kind of these same so I'm just gonna copy them paste them here and instead of semicolons we're gonna use commas and we'll delete the last one all right so guy ID name price address of the owner and also purchased okay so this is hiker and you event inside a solidity and we're going to trigger it right here kind of the same way we did this we're just gonna admit the event with these values will say omit product created all right and I'll pass in the values let's just actually just copy all these so do this pass them in and now we'll be able to see this logged out whenever we call the function instead of our test okay and I'll show you how to do that basically console.log it will go back to our test file and inside of here we'll say Const event equals results all right it's a result actually lets you do this before a story let's do console log result logs all right so just check the logs run the tests and I'll show you what's inside the logs and we're gonna dig in into those logs to fetch these values you know inside of here why should I had to do that okay alright so looks like we had a problem here so let's fix this a see your partial contract expected oh so I forgot a semicolon again I'll see where did I do that alright so I forgot this Emmitt : after the event sorry guys so in line 22 make sure you got a semicolon after you declare the event or the test again so this is another reason we have two tests to check our errors make sure this that's working properly alright so another issue here I named the event the wrong thing yeah so I forgot addy alright one more time sorry guys run the tests again and this will hopefully pass this time and we'll be able to see the product log on to the screen okay so it's passing and here's what we laud right so I've logged out the logs from this result that came back whenever we create the product all right inside of here we see some values we see the result all right and it's got some stuff inside of here right you see this ID you got this name price all right so you want to dig into this and pull these values out and check them to make sure that they're correct that the name is right the price is correct if the owner is correct right all that kind of stuff so we can fetch that like this I will just say Const results like this it cost results equals R sorry costs event equals results dot logs and then we'll get the first ones an array so it's a zero based index array look at the first one and say args all right as we just saw that so here's the arcs okay args result Sebby the event and we want to dig into those values so first we wanted to say assert equal event ID to number when I convert to a number is the same thing as the product count to number and we'll just say ID is correct we'll do the same thing I'm actually gonna just copy this events dot say this is correct copy this and you're three more times so event dot name is the same thing as the is let's just you literally here's the iPhone X we'll just copy it so name is correct and then also event dot price and I'm gonna do this literally as well just just show you that this converts into way so we'll say one followed by 18 zeros so 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 we'll say price is correct and then also the owner is correct and we're gonna track the owner okay so I'm gonna come back to this I'll show you a second so purchased and we're gonna say it's false purchased is correct so let's check for the owner all right so the owner let's actually break some of these up so if you go to the top of your test file here this just says accounts alright this is gonna be all the accounts that are injected from ganache right if you pull up ganache you'll see all these accounts right so you can actually access these individually since this is an array we can break them up like this and we can say you know account one account to account three alright but I'm actually gonna name these accounts let's say account one is gonna be the employer alright and then it count - there's gonna be a seller an account 3 is going to be a buyer alright so what we want to do here is basically just make sure that the owner is the seller alright so in order to do that we want to basically say that this person who created the product is the same thing as seller but we need to tell the test that the seller is the one calling this function you know do that exactly like this we had some function metadata so after the normal arguments are passed in we pass in an object we say from and we say seller alright and that is exactly how solidity knows that MSG sender right is the seller so image you get sender comes from the metadata from the function and that's exactly what you see here all right okay so that's a little complicated but let's say this we run the test and see if it works all right works so it successfully creates products all right so I think that may actually be all we need for this particular part of the tutorial okay well actually sorry there's that's that's all we need for the success case let's also check for failures all right all right so what we want to do is make sure that a few things are correct so we want to make sure that the name is is there which require name and then we also want to require a price a valid valid price all right so the first thing we want to do is use these require statements so say require also the name and we basically want to check for the length that it's greater than 0 so essentially we want you don't want to be a blank name right so basically anything inside of this if it evaluates to true this function will continue execution but if it evaluates to false it'll stop execution and throw an exception ok and you know they won't pay any gas or anything like that ok so I'll say bytes we actually need to do that so I bytes name length is greater than 0 that just checks that the string actually has data inside of it all right same thing for price is they require price it's greater than 0 sorry 0 and yeah that I work all right so let's just run the test make sure it still works should be fine and then we'll test for the failures in a second and also while this is happening I want to make a mention to something you see these underscore variable names basically I'm using underscores here as a convention to show that these are local variables and not state variables right so all the state variables don't have underscores in front of them it's kind of a convention from other programming languages I try to use the same thing you know for example we have underscore name here and name here without underscores so that prevents they have conflicts and stuff like that all right so that's just something I want to mention ok all right there we go so now what we can do is actually check for this in the test well just check for failures but before we do that we need to import something new into our project into our test suite here we're going to use a special chai dependency that we installed inside our package dot JSON file it's already there we're gonna use chai as promised okay and should so just add this to the top alright so you can pause the video or get this from the source code if you want to basically we require chai we want to use China's promise which is in our package JSON file and we want to use should okay so you need this before you continue so let's scroll down go the failures the first thing we want to check for is that if we create a project about a name it's gonna mess up so say product must have a name and we'll say a wait marketplace oops Market Place Creek product station you just do this we'll just copy it all right let's do this marketplace and let's just take the name out so no name and we'll say should be rejected all right so that's how you check for the failure that's why we just imported this stuff should so should be rejected and let's use shovel tests see if this works all right so it was supposed to be rejected but it was fulfilled and so what's the issue here all right I think I see what happened so it's funny I was talking about these local variables we need to put an underscore here so we want local variable name not the global variable name because name was already set but this was it so make sure you use your underscore here it's funny that I just mentioned that and then I messed it up myself so let's try the test again couple tests and this should pass this time but it's good that you know we caught our error and we see that our tests are actually working that's good all right there we go so now let's check for the failure that it has a price so go back here and it'll just copy all this probably must have a price so we'll put the name back in will say iPhone X is fine all right and also we want to just use a blank price so just say zero all right say this works all right and it passes all right the last video we you know created a product right inside the smart contract and in this video we're going to allow people to purchase the products okay so we're gonna test for that but really quickly we're gonna test that we can actually read products out of this mapping right we'll be able to fetch products so it's sort of like create read and update there are going to be the main functions of the smart contracts when it comes to products so let's make sure we can read the product out of this mapping right so let's go to the test really quickly we're gonna create a new test down here just below it creates products we'll just say it lists products and let's just actually copy this so we're not just writing code over and over again I'll do this say it lists products all right so inside of here what I want to do is basis it Kant's products I'm gonna fetch them from the blockchain from the smart contracts I'll say oh wait marketplace products right we're going to call this function right here all right products right here and we're going to pass in the product count which we set in this before action right here it's a product count just do that and we'll check that the values are correct so I'm just going to copy this it looks kind of the same we'll say instead of events we'll change this to product all right and this should be actually product not products all right so like I said earlier we got to wait to fetch products out of here one by one which we do like this product equals product account all right our product equals this product with the index of product account all right or ID all right so let's run this test should just pass like it is truffle tests all right it worked so let's go back into our test looks like everything's fine here so now let's say that it also creates sorry purchases products or sells products sells products okay so let's just clear this out we'll fill out this test but simultaneously we're going to create a new function inside of the smart contract to actually facilitate the purchasing process so down here I'm checking myself some extra space so you can see this on screen just fine alright so we'll say function purchase product we'll pass in an ID so we'll just tell it the exact ID the product want to purchase will say pause public and the first thing we want to do several things inside of here right we're gonna have to say we're fetch the product all right we're going to fetch the owner all right to make sure the product is valid like it can be purchased we're going to part you're gonna basically purchase it and we're going to trigger an event save me a lot of steps inside of here but that's high level what we're gonna do all right so let's actually just do the purchase like this we'll say we'll do the basic part first so first we want to fetch it will just say product equals actually do this product memory product equals products ID alright so let me explain this essentially we're doing is we're instantiating a new product you know that we created here there's product struct like this we're doing it in memory right we're having a new copy of it not the one that actually exists in the blockchain and we're assigning it to a local product variable with this underscore alright and we're just saying hey fetched that particular product out of the products mapping and you know create this new copy in memory like this okay that's what we have this memory keyword alright so next we want to actually fetch the seller so it's a address a seller equals the product owner the the part hasn't been sold already that's who the owner is is the seller okay so now we want to basically we won't check for validity just yet look at that last well it's actually transfer the ownership so that's what we do whenever we purchases so we'll say transfer ownership to the buyer so would you like this we'll say product owner now equals the buyer which in this case is going to be the person who is calling the functions that's gonna be msg sender and I explained MMS you got sender here right and now we're going to Marcus purchased so it's a product purchased goes true we're going to update their product in the mapping all right we'll say products ID equals product all right so this product that we've edited basically we've created a new copy and memory here we have assigned a new owner but we've stashed we've you know we've tracked the seller before we did that and then we you know transfer the ownership you said that it's now purchased and we put it back in the products mapping like this all right so now we're going to do is actually pay the seller so whenever we call this function we're going to actually send in some cryptocurrency to purchase the product right we're just going to transfer the ownership we're also going to pay the seller all right pay the seller by sending them ether all right so you're gonna see this in a test but essentially we can pass in ether with this function call okay actually just illustrate it before I do it okay so because this can get kind of confusing but basically we're gonna do is we're gonna we're gonna do the function like this will say result equals right I run this yeah I'm just going to show you how the what it looks like a weight marketplace purchase product we're going to use product count as the ID and so that you know that's the only argument that this function accepts is the is the ID right but we can additionally pass function metadata like we did here all right this is from seller all right but we want to say from buyer all rights give me a new account this is the from but we can also send ether in with this function call ok so we can give it arguments but we can also say hey send some cryptocurrency and that's actually how we're gonna pay for the product and we do that with value all right and this value is gonna be you know the price of the product in this case you know one ether or you know this many way and we can just use that same value from the test right this is the product price let's just pass in the value like this alright so that's the actual product price so that's MSG value okay so that's gonna get sent in this function metadata and we can access that inside of the smart contract like this we can basically just say MSG dot value all right that's going to be the amount of each of that sending with the function call okay so now we want to actually transfer that value to the seller so just do like this we'll say address seller right which we stashed right here they transfer all right unless you got value boom easy as that that's how you do it that's how we pay the seller we basically take the ISA that came in and send it to them that way all right so there are a few things we need to do in order to make this work we need to modify this function first when you make this function payable alright so solidity won't let us send in ether with a function unless we've used this payable modifier right here that's what allows us to do this value metadata in the game and likewise we need to make sure that this cellar address is payable so we'll say payable here sorry payable and we also need to make sure that that is declared payable everywhere else inside of a smart contract where we you know use this address so address payable is a modifier so is a address so I'll see here here these two places alright so address payable all right and then address payable so it's really critical that you get these right or else it's not going to work and then also yeah that's how you do it so that's how you transfer ether to the seller you got to make sure everything's payable alright so last we want to trigger an event alright so now what we want to do is your users product created event and we want to basically say product purchased and we just really want to use the same values as this event just called a different name alright so just like this you can trigger an event copy this and just change the name product purchased alright and the last final thing we're gonna want to do is make sure this product's valid you know we'll have some requirements just like we did up here but we're gonna do that last let's go ahead and write some tests just to make sure that all this stuff works alright so first let's just truffle compile make sure I don't have any syntax errors I've been bad about that in the previous videos so we'll go ahead and run that basic check first alright so we got some issues here let's see so under clear I didn't fire did you mean name right so now doesn't know about the name so we'll need to actually do that we'll say a product name all right and then also a product price all right there's a copy and paste error let's try it again traffic compile all right so compiled properly now let's write some tests to you know check on this behavior all right so the first thing we did was set the result okay and we wanted to see that yeah we could we could pass in the buyer and we could also pass in the value so that Illustrated how that worked but we're going to use that as a starting point for our our test so we'll say success buyer makes purchase alright and what we want to do is go ahead and check these logs just like we did in the previous test to make sure that all this info was logged out properly so I'm going to copy this I'll say cost event alright and we'll say check logs so inside of the logs we want to make sure that the event ID is the same as the project IDs that's that's good the name is right the price is correct the owner is now the buyer not the seller all right and purchased is now true all right so let's run that test they truffle tests and I'll pull this up so that you can see it make sure it's not cutting off from the screen all right so looks like there's an issue here we got one failure expected purchased see it expected true but got false so let's make sure we updated that correctly all right so that's another thing we need to change the purchase should be true here in the event so that's my fault sorry guys we run the test again but hey that's why we write tests you know make sure that stuff works properly all right it passed so that's good we checked the logs the logs are correct so the next things we want to do we'll see here let's check for check to make sure that the seller receives the funds all right Celer received funds so that's gonna be a little complicated the first thing we want to do is actually well we want to do this basically we want to see how much they had before and then see how much they had after and make sure that the difference is the same as the product amount right so now you'll see some you know you'll see like in ganache these balances are changing and it's gonna change all the time because you know we're running these tests and ethers going to get transferred any time we sell a product and you also see these little you know tiny amounts go down that's because these are paying for gas fees whenever we're calling functions right or deploying smart contracts or anything like that right whenever we list the product we're gonna pay gas fees whenever we purchase a product we're gonna pay gas fees so basically the etherium Network requires you to pay gas anytime you make a transaction we'll talk about that more whenever we you know build up the client side application you'll be able to see it more explicitly in meta masks but just know these values are gonna change like crazy so we don't know what they're gonna be before we run the test so we need to check we'll basically just say you track the seller balance before purchase all right so we'll say let old seller balance I'll say old cellar balance equals a weight web 3 we can just check the balance like this about 3 eath get balanced and we'll say selling all right let's say old seller balances format it about 3 utils I'm going to convert it to a big number all right so we want to use big numbers because we want to use big number addition whenever we do the math all right so I'll say let new seller balance this is Amy after the transaction has taken place I will say new seller balance equals a weight let's just do this actually basically just copy this chant change old seller balance and new seller balance all right so now I'll say let price price equals web three utils two way say one ether all right this is the price that we you know paid for everything right and then price will convert it to a big number just like everything else say new web three utils being say new seller millets oops I made a mistake here so this should be price sorry and also I don't know what I'm saying a weight here so whenever we create a big number we say new sorry same thing up here so I'm just gonna you know if you want to just pause the video really quickly and just look at this screen to make sure your code is the same right it might be helpful all right so yeah I'm gonna wait say new oh wait new alright same thing here alright so now what we want to do is basically let's just log these out so let's say console log sainu seller balance our old seller balance new seller balance and then price right and let's just say travel tests let's just see what gets logged out to make sure the formatted everything properly at this point because we're essentially gonna do is do some math and make sure that the new seller balance is basically the old seller balance plus the price okay but we want to make sure that we set all this up before we start adding things together right so here's a big number here's a big number and here's a big number I can't actually tell what these are about looking at them but I'm gonna assume that they're right so let's I try to add them together in our test and actually create the assertion so we'll go back here and say Const expected balance equals old seller balance add price so you add as a function that exists on big numbers which we have here all right so simply expected balance and we'll finally check will say assert equal new seller balance and then it's the expected balance to string all right it's a new seller balance let's actually do this to string let's just convert them both to strange to make sure all right so let's as a truffled tests and hopefully this works all right it passes so we now see that the seller received the funds whatever the product was sold in the marketplace all right perfect okay so we've made pretty good progress we've tested for a lot of the core functionality inside of this purchase product function okay so the last thing we want to do is check for failures just like we did in our previous tests and functions etc etc right so if you go to the top here you know we tested for failures we you know made sure I had a name all that kind of stuff so let's check for a few failures here I'm gonna go sell some space just that we have you can see it on screen so let's check for a few things let's first let's require that the product exists so basically we want the ID to be correct so if we only have five products and they send in like you know product 99 we want to stop execution so make sure the product as valid ID so rules they require as a product ID is greater than zero and it's also is less than the product count alright so next we're gonna check that there's enough ether in the transactions so whenever they you know actually you know sent this function or call this function that they sent the right amount of ether so say require also as you require that there is enough ether in the transaction so in the code will say require msg the value is greater than or equal to sorry I'm greater than equal to the product price all right next we'll say require that the product has not already been purchased they require bang product it's basically if probably purchases false we'll just use the opposite of that all right and if it's true we'll also use the opposite of that that's what this Bang operator means all right so also require that and the buyer is OOP sorry it's not the seller does it require seller is not MSG to sender all right we don't want someone to be able to purchase their own product okay and we don't want to be already purchased we want to have a valid you know prize some of this get sent in all that stuff's alright so that's all the requirements that we need now we can test for all that in our tests I'm gonna go and clean up the source code here to remove all the extraneous spaces we'll just compile this truffle compile make sure that we didn't make any syntax errors alright compile properly so now let's go to our tests and let's check for the first failure alright the first failure is going to be a seat tries to buy a product that does not exist basically we want to use an invalid ID all right so say buy a product that does not exist ie product must have valid ID all right so let's just copy this and say this take away the results purchase product product countless $8.99 and then should be rejected all right let's run the tests all right so we got some issues here we got a revert all right so I got a little issue here so let's actually go back into the code we're gonna make sure that the product count is this so not just less than it could be less than or equal to your eyes let's save this I'll rerun the tests all right like this guy and it passes so let's go back to marketplace tests and let's write some more tests here we're gonna go ahead and just step through these to wrap up this video so we'll say let's make sure that we buy with enough ether okay so we'll try to send too little right so not enough ether so let's do that like this we'll just say alright marketplace purchase product and we will use a valid ID but we basically only use like half the amount of ether so it costs 183 but we're gonna send in 0.5 all right next we want to do is make sure that they try to buy the product from somebody else basically like we're gonna try to purchase it twice and we don't want that to happen so we're gonna do that from the deployer account like this so say purchase product prior to count we're due from the deployer so it's somebody else it's like you know a third party that hasn't even interacted with this transaction yet but it's already been purchased so we wanted to fail so I'll check for it that way all right the correct amount of ether or I should be rejected the last is we don't want the buyer to be able to buy the product twice alright so the buyer can't be the seller essentially alright would you just basically to try to purchase the product again from the buyer to make sure that that won't work all right so should be rejected all right so let's just clean up this I'm trying on the tests and that should be all that we need for this smart contract say truffle tests all right all right it works there you go that's all the tests and they're passing okay so that's everything that we need for this marketplace smart contract this is a complete blockchain back-end that we're going to use whenever we build out no this full stack application this is everything we need so we've got tests for this you know it's really important to test your smart contracts before you put them on the blockchain because the code can't change right so let's go ahead and deploy these to the blockchain and we'll wrap up this video so that truffle migrate all right worked so let's just open the console really quickly truffula console alright let's just check just say marketplace actually let's just copy the code here we'll say sorry do you like this bone all right there we go marketplace it's got an address right cool so everything works all right so that's um you know our smart connection on the blockchain now and we've got everything that we need to you know start building out the client-side application for this full stack blockchain app and that's exactly what we're gonna get started doing in the next video all right so now let's go ahead and start building on our client-side application okay so first and foremost you know just make sure you've got ganache running all right and also you know make sure you've you know deploy the smart contracts to the blockchain which we did in the last video okay so what I'm gonna do is actually open up a new tab here so we can run the server that we're going to use to develop our application or clients that app and I'm gonna start it like this so NPM run start alright and what its gonna do is open up a browser for you alright now you should see your front-end application open with this boilerplate code from the starter kit that's you installed at the beginning of this series alright so while we're here let's go ahead and talk about meta masks this is a little Fox icon up in the right-hand corner so meta mask is the browser extension that's going to turn your web browser into a blockchain browser it's gonna allow us to connect to ganache right this right here so we want to do is take some of the accounts from ganache and import them into mini mask I'm gonna go ahead and copy this second account here you can see this address this is sort of like the user name but we want the account password essentially in order to rebuild it in meta mask in order to import it so we'll show the private key alright so don't ever do this for a real account and I should also say well I mean you can import an account a real account with the private key but don't show anyone that's what I mean so like for example don't ever use this private key to store any real cryptocurrency all right because everyone who watched this videos seen it so copy that and we'll go to meta mask and we will import the account I'm going to say import account private key paste it in here import alright so I'm actually gonna give this account a name so click this menu here click details edit with the pencil icon I'm going to call this the seller this is going to make it easy to understand who's doing what in our scenario here alright and I'm gonna import another account so I'll take this account here show the private key again don't ever use this and then import a count say I'm gonna count private key import all right well edit this hamburger icon details pencil and then we'll call this the so let's switch back to the seller account and let's connect to ganache all right so you'll see this main aetherium Network and you'll see Robson Cove on etc etc we want to connect to local host port 75 45 because that's what ganache is running on so one two seven zero zero one seven five or forty five all right boom there we go now we can see our balance from ganache actually listed here alright and that means we are connected because it knows how much cryptocurrency we have in our wallet and now our browser is actually talking to ganache right so now we can you know get set up to run this blotching app ok so this is the boilerplate code that from the starter kit that you installed at the very beginning of this tutorial series right so if you go inside of you know your app your code let's go back the code here and open this in sublime text let's say sub old dot to open this in sublime text and if you go to the source directory and you see components right this app that J's file this is all the code that you see visually on the screen here it's all the HTML what do we got here well we've got bootstrap wired up for us right the templating flynt framework so I'm going to write a bunch of HTML and CSS ourselves it looks nice already so that's good and we're using a react j/s okay so if you look at this you can see some JavaScript code mixed with this HTML right that's just how react works so don't worry if you know no reactive and built an app and react before I'm gonna teach you everything you need to know to follow all this tutorial get started okay so let's briefly take a look at react so wracked is a component based library in JavaScript that's used for building user interfaces and that's exactly what we're doing right now we're building a user interface for this block amplication this DAP that talks to aetherium smart contracts for our marketplace okay so it's component based you know basically components are the fundamental building blocks of react applications all right you can see this HTML code mixed in with JavaScript it's all kind of intermingled together I see this class hello message extends react component that's how you define a react component and you get to see this result here here's the real basic.html see this dot props that name I'll explain all this as we go okay also react also has a state for each component so what I mean by that well web applications need to manage state right they don't persist across web page refreshes and we want to basically mirror the state of the blockchain inside of our app so what do I mean by that basically our marketplace you know has products in it we want our front-end app to list those products you know lot people to buy those products and how does it know you know how many products are in the list well we can use the react state object to mirror the products that are actually you know containing our smart contract in the blockchain and I'll show you how to do that so here's our a brief example here's you know this state equals this inside this constructor function we're gonna do something just like this at a few minutes and that's what how it manages this to-do list right how does it know how many items are on the to-do list how can you add new ones right so item three let's add it right how does it know how to do that well it does that with the state object you'll see that in action here momentarily alright so all this if I didn't mention already this is JSX syntax which allows us to write JavaScript inside these curly braces mixed in with HTML right inside this red code so that's the template thing language that we'll use so like I said don't worry if you don't know react even built an app react yeah I'll teach you everything you know if you have built an app and reactions you feel right at home okay so let's go ahead and go to our project let's just change some code to make sure that you know we can see our changes reflected in our browser I'm gonna go ahead and change the name on this navbar right so find this nav right here and let's just change the name say DAP University's blockchain marketplace you can call yours whatever you want to but that's what I'm gonna do so we'll see all right boom there you go dab University's blockchain marketplace notice I didn't even have to refresh the page the server already does that for us you can go here and it already does that for us alright so I'll clear all this alright so now let's actually the next thing we want to do is wire up this component to talk to the blockchain alright so inside here you'll notice I can collapse this render function to see how simple this react component really is basically you know which is import react and component within JavaScript like this all right we got a logo inside of here we've got a CSS file but basically all the component is it's just this class right that extends component and it's got this render function alright this render function it just lays out all this HTML inside of here okay so we can wire up the component to talk to the blockchain with another function alright we're actually going to use web 3 j/s to talk to the blockchain and we're gonna create a new function inside this component to load web 3 okay so we'll just call the function load web 3 load web 3 all right and we will do it inside of here so this is we're gonna use the async/await pattern just like we did in our tests so I'll call this async logo of 3 alright so in order to do this I don't want to reinvent the wheel meta mask is actually provided a way for you to connect your web apps to the blockchain with web 3 j/s ok so if you go to this blog post this is floating around the web you can just copy the tutorial example in the description below to get this but they actually suggest how you should do this right there's this code example here so I'll just copy this and we go to our web app and we'll paste it in alright so don't worry if this looks giant and scary and you don't understand any of it that's ok I'll briefly explain what's happening here so basically you can detect a meta mask a few different ways right so for modern browsers there's a window theory 'm property right and if that exists you instantiate your connection like this all right for legacy browsers there's a window dot web 3 property alright and if that's the case you instantiate your connection like this alright and if neither of those exists you know that you don't have met installed and you want to you know do something about it so they just console.log alright so I actually want to adapt this code for our specific app and you can find this in the code examples for this section down in the description below so I'm just gonna paste it in and explain it that way alright so like I said for modern app browsers if windowed aetherium exists we're going to create a new connection to the blockchain with web 3 like this alright so window dot web 3 is going to equal new web 3 and then we're going to pass and window aetherium because we have it here and we're gonna enable it so if that doesn't exist we're gonna look for window that web 3 and we're going to instantiate a new connection with the current provider which we grabbed from weather 3 like this all right if neither of those exists we're going to raise an alert that hey there's no men in masks installed you should install it ok so we also need to import web 3 to make this work let's go to the top and just below react we're gonna import web 3 alright we've already installed this inside of our package JSON file here right and so web 3 is down here then we can just import like that alright so now let's actually let's let's call this right we've defined it but we haven't actually called it so we're gonna create a new function called component will mount I'm going to run an async because we use the async await pattern all right so I didn't just make this name up this is actually a function that comes with react component right just like render and this is a lifecycle method and react which basically means this is a function that gets run anytime this component is getting created right and specifically when it's going to mount this function is gonna get called there's several other lifecycle components sorry lifecycle functions for rap components you can read about in the react documentation but basically just know that this is what we want to do to load our web 3 connection so say a weight this dot load web 3 all right so save that and we'll go to our app here and see that nothing's broken that's it so we console.log it we could say so log know that web 3 all right there we go all right so we've loaded a web 3 connection next let's check the web 3 connection even more and actually fetch the account right so let's make sure that commit amass works by saying if we can retrieve this account address here and listing it out on the page okay so our next task so we'll create a new function down here call async load blockchain data and this is we'll actually fetch the information out of web 3 and get the account so we'll start off by saying const web 3 equals window dot web 3 we're just gonna stash that here right cuz we're attached to window at this point and let's get the account like this so let's say load account that would say const accounts equals web 308 web 3 eath get accounts so this is a function under the east namespace for what 3 alright so what we'll do is console log accounts here so what this does is returns all the accounts from our wallet our wallet in this case is meta masks and so it should just expose one account all right so we didn't actually call this so we defined the function we haven't called it yet we'll do it like this oh wait this low blockchain data all right all right so also we got an issue here web three get account is not defined so this is plural sorry guys all right boom there we go there's our account right so a six six eight if you gotta ganache you'll see a six six eight M that's the seller account okay that's what we expect so now we want to do is actually just get a single account write a council is an array so we can get the first account like this right this is zero based index array so we want to do is actually store this inside of our component state so remember I said that a minute ago and react let's see here we've got a component state which we can use alright we can set it up like this we can create a default state with this constructor function and we can you know set stuff in the state like this so this state equals this we can set state which I'll show you in a minute okay so first let's go ahead and create the constructor like to react old us to so I will say constructor and we're gonna pass in props we'll say super props so don't worry if you don't understand this just yet just bear with me I will say this state equals count all right so we want to do is actually update this value okay so let's do like this will say this set state right this is a function that react already knows about inside the component and we're gonna you know basically just pass in a JavaScript object with a key of a count all right and we're gonna read out of the accounts and do it that way all right so this does set state count right and then we can actually access this value from state in our side of our component like this alright well let's just create a new place on the navbar let's just say let's just do a paragraph tag for now I'll format this more but we'll actually list that like this so we use these JSX brackets right to put JavaScript inside of here it will say vista state all right so let's go refresh the page it's gonna look ugly probably but let's just see if it worked all right you can actually see it boom there it is it's kind of dark but it's listed out on the page alright awesome so I want to clean this up a little bit so I'm just putting this in a yucky paragraph tag here let's actually put it inside of a UL that bootstrapper knows about alright so here's a better formatting so this is something that bootstrap gives us by default if you go check their navbar examples it'll show you how to do this or you can just copy this code out of the code examples okay so I did this data count but I put it inside of here it's gonna look nicer alright there you go so that's a lot better we have a nice legible account here sort of like seeing your user name at the top of a web application okay so the next thing I want to do is actually update this this constructor here we had you know a default account I'm gonna add some more values here so I'm gonna fill these in just for the future alright so whenever he loads it from the blockchain we're gonna get the product count right it's gonna be 0 by default there's no products also if there's no products the products are gonna be an empty array alright and by default we want the app to be loading so we're gonna update all these values later but I'm gonna go ahead and just set this default state for now so they have to keep going back and changing it and so this is good jumping ahead a little bit but I would recommend just going and filling this out so I'm gonna get confused later ok alright so next thing I want to do is actually load the smart contract for the blockchain we've got the account now we want to get the smart contract so we need two pieces of information we the smart contract ABI and we need the address so what do I mean by that if you're this marketplace JSON file here you'll see the ABI right this is the abstract binary interface this basically just describes you know the functions of the smart contract what it does all that kind of stuff and then the address which is down here I'm gonna minimize as much this stuff all right addresses here boom so here's the ABI here's the address so we can actually read this JSON file in our react component to fetch this ABI out we can also fetch this address we have to get into this net works key here so what this file does is it manages where this smart contract is on multiple networks this could be on the main net it could be on a test network but here it's on ganache which is network ID 5777 and we can dig on to this to find the address of the smart contract deployed to ganache all right and web 3 needs both of those pieces of information in order to fetch the smart contract and actually use it you know the a B I'm a dress so let's actually get both of those things the first thing we want to do is import the marketplace like this all right that just gets the marketplace file go up or directory and it looks down into a B eyes and fetches marketplace a JSON all right and then we're going to actually get the marketplace like this let's just go to low blockchain data and we can you know say like a marketplace ABI so it's just consoled like that save that and go back our app all right so here's the API we can see the information about it boom that's working so now when you get the address so we can say consul like a bi and the State Council log marketplace marketplace dot networks and we can save fifty seven and then address all right so boom there you go there's the address the smart contract so we need both those pieces of information in order to you know instantiate the smart contract so what we could do is create the new smart contract like this we can basically say constant marketplace equals web 3d 'the marketplace or sorry contract capital c passing the ABI so marketplace will say ABI and address so say cost ABI caused a dress let's say this all right and then we'll console.log you Oh see her alright boom there we go so there's our actual smart contract so that's how we load it from the blockchain alright so that's a quick way to load this mark on earth the blockchain but let's this is too brittle right we don't want to hard-code the network cuz yours might be different than mine if we deploy this to a test network it might change alright so what we want to do is actually detect the network dynamically so I'm going to do this like Kant's network ID it goes web three eath it's called get I'm sorry website Ethernet get ID and we want to use a weight here alright so I can also just pass in this network ID like this boom I start again alright so it still worked I will not console.log you marketplace that's okay we can constantly the network ID just be sure should be 5777 alright boom there we go alright so that's working just fine so this is also brittle because if we're on a different network then this would potentially be you know it would be empty and we wouldn't have address available here so what I want to do is basically do this move this out and say Const contract data equals marketplace networks or say network data all right and then we'll say if Network data if not let's do something else here sorry guys okay so let's move some is code inside of here so let's I don't need to do this quite so much and then we'll say network data all right you that's how we're going to log this out right so because a console.log marketplace all right so now let's see this worse I might my mistake but no work just fine awesome so what I want to do is to see that makes sense like you can pause the video if you want to and look at this so basically you know we want to just make sure that the Condors actually deploy to the network cuz look what happens if it's not right if I just if I just took this out and save this like this and didn't put this inside of an if else if we go to like the main net or something like that let's go to main net let's refresh the page then like boom our apps gonna blow up okay so we can fix this problem let's put this back inside of here all right so if Network data else what we want to do is alert the user that the contracts not deployed to the network all right just like this but window dot alert marketplace contract not deployed to Detective Network so save that refresh the page still on main net and then boom there you go marketplace contract not deployed to detective Network have you click OK your apps probably yeah it works just fine but now if we go back to ganache and then refresh the page boom works just fine alright and then we can actually you know console.log marketplace here all right boom awesome so we've actually talked to the smart contract and wired it up inside this application alright so that's pretty good progress for today guys we have you know load the account from the blockchain we've also loaded the smart contract you know really quickly before we go let's clean things up just a little bit what I want to do is actually move this navbar into its own component here alright so I'm going to do is copy this cran you file here oops and then I must say navbar that Jas all right I'm gonna paste all this code inside of here I'm just gonna start deleting things so take out all this basically what you want the react component stuff we don't want any of this all right I'm going to take the navbar and minimize it so that we can copy this information let's go and bump the server all right so copy this out take out all this junk from the return function all right so this is what we want basically we're going to turn this into navbar and over the nav bar code back in here all right so what I want to do is basically just like clean this up to have multiple components we don't see all this code in the page at one time we're gonna keep adding to this as we keep building out our marketplace and I want to you know show you how react components work and how you can you know use them as you know modules essentially so inside of here we need to fix this we don't know about this state account anymore because we haven't assigned the account to this component state but react allows us to pass variables down to sub components with this props right here right so that's our socking balance on this constructor you see props so we can delete this nav right and then render this nav inside of here and then pass the variables down right so the first thing I want to do is take the nav bar import it like this we want to put it here we do this with net JSX it looks kind like HTML nav bar and then we get past the account down like this account equals this state account right because that's always saw in our previous example and then we can go to the nav bar component and say this dot props that I count all right so if I did everything correctly this should just work look the app should look just like it did because it's simply refactoring all right looks like it still works awesome so that's all got for today guys again you can check out the code example for this section down below now when I pick up where we left off in the last video right it's the last video we basically you know fetched our account from the blockchain and showed it on the page and we also you know fetched our smart contract the marketplace smart contract and logs out at the console here okay that's two big things so what I want to do now is actually store the marketplace inside the state so we'll say Const well actually this let's say this set state and will say marketplace and equal in marketplace but in JavaScript we can do this shorthand like this boom and what I also want to do is update loading so for now loading is always true we can't really tell in our app yet you'll see that more later what I'm gonna do is say this set state loading goes false okay somebody fall it's true and now it's false we don't see any consequence of that yet but whenever we are basically showing the black tuna once we start actually adding code here we're gonna like show a loader and we'll show the loader if loading set to true and if not we'll set it to false okay that's what this does this and then this game so now let's actually clear out some of this I mean I want to show all this boilerplate code down here we have the nav bar but we want to actually create some content inside of here just clear that out go back to our browser and check all right now it's empty that's what we want so let's go ahead and sketch out some HTML we will use a div here so a div div ID equals content will say main actually main and most this and let's do an h1 tag we're going to do is actually create a place to add a product that's what we'll do in this video say add product that'd be the first kind of thing that they can do inside the marketplace so say this alright so they didn't even work yet no why oh I see it's because essentially it's hidden it's underneath the nav bars so we need to create some extra some extra stuff here inside a bootstrap okay so we're gonna wrap this let's call it content like I said originally I'm gonna add some code here all right so this is going to be what we'll see then we're going to also close this out like this so you could pause the video really fast if you want to just see this alright so let's go back to the page and there we go awesome so AB bucked it was there before it was just hidden up inside here so bootstrap relies upon you know these objects idea of containers rows this grid system with you know column large stuff like that okay so I've created a lot of this for you so you want to think about it it's gonna make it look nice on the page and here's we're gonna add our product okay and now just like we refactored this navbar i want to refactor this entire section when we're gonna add all of our app code you know to show all the stuff on the page I'm gonna put it in a sub component as well so we're gonna create a new one we call this main main digest capital M alright so it's actually just copy what we do at the navbar go over to main paste it in stead of navbar we'll call it main alright say ma I in and let's take out all the code and let's just paste in what we did here right so just this part copy that may not yes so do this all right a product and we'll save this so we will import Maine just like we did navbar that bar than Maine then and then we'll put mein here main back to our browser and it still works awesome so now what we can do is I want to hide content on the page of the app is loading and I just mentioned that a minute ago right we sent loading state to false here and it's true by default so basically whenever low blockchain data is done we want to say hey our app is loaded show all the content on the page and we want to show a loader if it's still loading okay so we'll do that like this we're gonna use a ternary operator and JavaScript basically just say we use curly braces to run JavaScript inside of here we'll say this state right now loading right we're keeping track of loading inside of this state object and once a question mark if it's if it is will show a loader if not we will show this component right here all right we could just say we could do this so we could you can say like you know I'm basically a crate this right here all right so I'm gonna put a boom a div that works as a loader all right so let's go back to our app and refresh all right so you can see that happen there's a loader boom and then it works do it one more time all right you see it so that's how that works so now I want to refactor this so that it looks a little nicer basically I'm gonna you know put some space here and then I'm going to do this I'm going to make this on the same column as this alright then I'm going to just like that all right so that's a way you can use a multi-line ternary in JavaScript to do that so basically they're ternary just like an if-then statement so if this then this else do this okay just like this if this then this alright so I'll save that go back it still works awesome so now we have this main component that we can use and we'll pass values down to this later but now we don't have to worry about cluttering up this view this is mostly responsible for loading at the blockchain data is like that and then this is where we'll actually interact with the the the template code all right so now I want to do is just get started with some basic templates that we're gonna add to inside of here all right so we want to do is show a form to add a product and then we're gonna show a table to list out all the products on the page okay so I'm just gonna paste in some template code that we're gonna wire up step-by-step so this part isn't super important like I don't necessarily need to teach how to write HTML in this tutorial so you want to work at the blockchain I'm gonna paste this in alright and you can get this and the code example down below there's nothing special about this this is just HTML code we're gonna change all this later but this is just gonna give you some placeholder code to see what we're gonna actually create okay so here you go here's a form to add the product of a name price you can eNOS submit it and it'll add the part on the blockchain it's not gonna do it yeah we actually have to create the functionality for that and then here's we're gonna list out all the products that people can buy it'll show who owns it it'll show the price the name of the product and the ID okay and this isn't really on the blockchain right now just just placeholder code we're gonna modify all this are these buttons don't work or anything right we're gonna wow all this up in this video and also the next video but in this video we're going to concentrate on making this form works that we can actually list products on the blockchain as the seller right and the next video we're gonna change the buyer and try to buy the product that the seller has listed okay so let's do that the first we want to do is actually wire up this form so right now the form is pretty bare didn't really do anything we just see a form here with some fields what we want to do is whenever the form submitted is you know tell the blockchain to add the product that we entered here okay and in order to do that we need a function on the smart we could call the function on the smart contract that we created in the previous tutorials the add product function right so let's go ahead and do that alright so we're going to create a new function inside of react here inside of our component just blow constructor we'll call this a create product and we'll pass in the name price this is just like the name of the price and the solidity function that we created in the previous tutorials so the first thing that we'll do is tell react that we're going to be loading this state anytime we want to interact the blockchain we're going to tell reactive we're loading all right and we can we can we can create a part of like this will say this state that marketplace all right that reads the smart contract out of state that we stored here this is the deployed smart contract the web 3 contract say methods alright that exposes the functions on the smart contract say create product right and we say the name price past those in all right and that's not enough just to call the function right well we actually have to do is say send in passing the metadata so who's it from from this state account and also yeah that's actually enough so there we go so then what we're going to do is say once based gonna have a user promise here so once receipt bassant receipt this is the transaction receipt that comes back from the blockchain this state the voting oh sorry this sorry set state loading false okay so that's how we're gonna create the product this is a function that we'll use alright so now we want to do is actually call this function down inside of this component whenever the form is submitted okay so we need to do a couple things we actually need to pass the function down we're going to do with props just like we did with the nav bar so you pass the account down with props here we can also pass functions down with props so do that like this we'll say create product equals this dot create product alright I'm actually gonna yeah I'll see that that way for now so in order for react to know what this dot create product is we need to bind it to the component all right this is a really critical step it's a it's a gotcha if you yeah it's easy to forget to do this so don't worry if you fail I've done this many times before so you got to do this dot create product equals this dot create product bind this alright that's how you let react know that this create product is the same thing as this alright so we have pass that down to our main component with that and now we can actually call this function inside of here so we'll go to the code and we'll basically call that function any time this form is submitted so what's really nice is react allows us to have an run on submit handlers inside our component really easily like this see on submit yes a event all right and so we can just break this up like this to execute our code inside of here and we can actually call this step props dot create product inside of here I recently pass in a name and a price just like the function expects here all right so a name and a price so that's all you really have to do is basically just say on submit call create product so now the next steps are to fetch the name from this field and the price from this field so how do we do that and react well react manages the values of these forms or something called Refs okay and we can assign the rest like this so after text will say ref say well sign up like this the input I say this product name equals input all right and the same thing for here you can say this dot product price equals input all right so we fill those out react is going to use this ref inside this component and we can access that inside of here like this what's a cost name equals this product name all right but we want to call value because it's a form field all right and we do the same thing for the price this step product all right and then we can say value okay so then we can just pass in the product price like this so we've got the name we got the price and any time this form is submitted we can call that function but there's one more thing we have to do all right we this price and this thing we're going to allow people to store it in ether right so ten ether one eighth or something like that we want to store that value in way because remember any time we use our salinity smart contracts and we transfer ether around it's always done in way right so we can convert it to way like this so say window dot web 3.8 is two-way this will look very familiar from the tests this dot product priced at value to string alright it's important they call to straight there and say ether alright so there you go there's your price in what guys I got the name the price so I think that we've done everything let's just go ahead and try it out if we haven't done everything then trust me our apps gonna tell us so we'll go back here and we'll say you know iPhone let's just say let's just do this the rolex submariner and the price will say 38th all right it's ad product all right I didn't like something let's figure out what it was all right so I think I know what's going on here so first I forgot to do this so say event prevent default all right back to the page here let's try out a product again semi-product 1/8 a product and boom there we go with C any R so this dot state dot loading is not a function so that was just a dumb mistake that I made guys sorry about that so this should be this set state yeah so hopefully that'll work let's try it again let's do you rolex submariner say 38th and product EMBO and we see a meta mask conformation come up all right awesome so this is a good sign let's click confirm all right let's sell it and there we go I saw Madame s confirmation come up it came off off screen for me on my second monitor but I'll refresh the page and show you that yeah we're all good so let's just prove that it worked let's go to main dot J s and R sorry app that yes and let's actually get the product count should be one all right so you know we could do that like this so just say Const product account equals a wait marketplace methods product counter right just like we did methods create products we can do product account methods product count and say call alright so cup there's you can do call methods in web 3 or send methods right these send transactions these just read data right so call methods what we want the console dot log product count should just be one because we've only created one product so far all right boom there we go we could save our count to string or to number just depends on what you want to see boom there we go awesome alright guys so that's it for this video we have successfully created a product on the blockchain with this client-side application with react J s and web 3 for our decentralized marketplace alright so you can check out the code examples and the link down below all right everybody let's finish off this client-side application she on the last video we added the ability to create a product on the blockchain right we've got one product so far we've logged that to the console now in this video we want to wire up this table we want to list out all the products in the marketplace right here and we want the buyer to be able to buy them with these buttons okay and this address is going to change to reflect their actual address okay so we'll do like this let's go here and do a couple things first we want to list out all the products from the blockchain go to our app digest component and just below you know this line where we logged a product account we're actually gonna fetch each product individually from the blockchain so remember we stored our products inside of a mapping so I'll show you that let's see here a marketplace that soul and we have this products mapping and we kept the products account now we want to do is take each number in the mapping so let's say product count is you know 5 that means we have five products we basically want to take product one two three four five and fetch each one out individually here right so we we have to do it that way and solidity because there's no way to know the size of this mapping we can't just say like mapping dot length or something like that you can't iterate over this mapping so you have to like keep it counter cash and fetch each one individually right you could do other things but that's what we're gonna do in this tutorial okay so we're just gonna create a loop to do that first let's I'll store their product account alright this set state product account just like we did the marketplace and let's loop through the products and load them onto this react component so just like this well let me explain this so basically I'm just saying for you know 1 all the way up to the product account right so have many products there are we want to add products like this so we'll just say Const product equals a weight product methods products read it out of this mapping you know products right here passing the index to fetch that individual product it would say call just like I do with part account because we don't just send Annie ether we just read the data and then we're gonna fetch this product and we're gonna add it to this products array here right inside of the component state is your products and we're using the es6 spread operator basically we just take the existing products and add an extra product to this array and return an entirely new array to this products key in the component state okay alright so that's how we load up this and let's console all the products here console.log this state products to our app and boom there we go we can see it so we can see a rolex submariner was listed there and we can see yeah all the data about it boom there we go the price all that kind of stuff awesome so we've successfully fetched all of our existing products in the blockchain we can certainly add more but let's list those out on the page we can pass them down to the main component like this we'll just copy out this date products take out the console.log i like this so main we can say products like this let's just make sure it caught the right thing say products say this does say products and while we're here I'm gonna format this a little bit say main add a new line we're gonna keep adding to this list and I want it to be maintainable alright so products and then create product is a function so now inside this mark main j/s file we can actually list the products out on the page so let's look at how to do that so inside this main ideas file we see the table here right it's got a header in a body and we want to use this basically this table row as a template for the product okay so we're gonna take out all this we're gonna use this as a single product template so we're gonna loop through all the products like this we're gonna you know use these curly braces and say this got props that products hangs we passed in products with props same app right and then we'll say product we're also gonna say key all right and then we'll pass us a function and inside of here let's actually return oops and for now we'll simply just say I'll just put this in here alright now if we don't do something very particularly here react is going to yell at us we have to assign each table row that we were in turn out a key so that is unique and react alright so key from here just gonna go here they basically let's know how many are on the page so let me explain what's going on here we loop through all the products and for every product that exists we're just gonna put a table row on the existing table and right now it's just got these default values right you know just one iPhone we need to actually wire this up but for now let's just check it see if it works all right there we go iPhone X money right so now it's actually fill in the values from the product itself so here I'll say the product product ID to string all right and then here we'll say product name all right and then here let's actually look at the price say product price and then here we'll say product over all right so let's look at that all right got a issue here let's see here donkeys with hex alright so there's a few things I think it's from the owner maybe oh no hold on let's try this strain alright let's try this okay awesome so here we go we saw the product we added in the previous video this rolex submariner ID 1 the price is supposed to be 3 ether but it looks like it's expressed in way remember that's just the ethers penny basically but here's the owner and the buy button doesn't work yet that's ok well fulfill that in a minute so let's convert the price to be for real we'll say window web 3 utils from way and then we'll say our product price new string will say ether what was that right I still got a problem here can't read properly from way sorry web 3 window dot web 3 sorry I misspelled this utils all right so that's better but now it's actually add eath to this all right boom there 38th rolex submariner here's the owner click buy ok awesome so that lists all the products on the page alright now let's actually create the ability to purchase your product alright that's gonna need some more functionality kind of like we did whenever we bought the product alright so let's go up to our app that J's file let's create a new function just like we had you know create product let's do purchase product I'll sit here call it purchase product and in here we're gonna do the ID and the price ok so we'll say this set state loading is true but this state marketplace methods say purchase product and we'll pass in the ID and we'll say sin so from well since we're buying it remember on our test we created who had to send in the ether with the transaction so inside the function metadata we actually just send in that specific amount of ether so say value equals price all right and then the same thing I would just say you know once receipt set state loading false okay all right so just like the last one we have to update this to bind it so this great product will say purchase product and down here create product will say this purchased product I'm sorry it's like I had a --air here I don't want to delete that so did I'll do it above it would you like this so I guess purchased product boom awesome so now this function should be available in the sub component all right so now inside of main we're going to wire up the purchasing function okay so basically we're gonna do is use this button alright so inside this button what we're gonna do is say hmm we're to use an on click handler so up here we did on submit and called the function inside the form but down here we're gonna use on click so say on click and then we'll see here using curly braces and say event and we're going to you know execute the code inside of here this is gonna get really ugly really fast let's go ahead and break this up we don't need this class name by button really but let's do break this up because this will get pretty ugly pretty fast so let's move the button down here and then let's let's do this all right actually let's do that say bye sorry sometimes it's hard to tell alright so now we can fill in this unclick like this okay boom awesome so just like console.log clicked just make sure it's working alright so it's clicked that works so let's call the function inside of here so you want to do is say this props that purchased product we need to pass in the ID and we need to also pass in the it's the price okay so we're gonna do is just add those to the button like this we'll just say name the button name will be the product ID alright this we get from here and then we'll say the value of this button is going to be the product price okay so we'll say this type props purchased product will say event target name and then event target got you boom alright that should work guys let's give it a try so let's go to the buyer instead of the seller alright sorry I change the account here and say bar alright let's turn up by so we should refresh the page is to be sure by alright see our mid MS confirmation pop-up for our rolex submariner its 38th it's pretty expensive but we're gonna do it click confirm and boom there we go i just got a confirmation so refresh the page and boom there we can see our address right not to sellers address its transferred ownership to us now we own the Rolex alright very cool so let's do one more thing inside of our project let's hide this button we don't want we don't want anyone try to buy it again so if it has already been purchased then we want to basically prevent that again all right so let's just do it like this I'm just gonna do this oh so I'll do this we'll say bang product purchase so basically if it's not purchased then show the button alright and if it has been purchased just returned all right so this needs to be formatted over a little bit but yeah like that awesome doesn't look awesome but yeah alright so there we go awesome so yeah the button is gone alright so let's go back to the buyer account and the seller account let's do seller just to be consistent what's a seller his balance should have gone up yeah let's say you know air pods will say they're you know one eighth at product see I met at mass confirmation come up um all right and they let's buy it from the buyers perspective again and we can watch the ownership change so here's the seller click by Minnie Mouse comes up clip i refresh the page and boom we own it awesome of the buttons gone alright guys so that's it that is a complete decentralized blockchain application powered by smart contracts you've done the entire thing you've created the client-side application you've got it wired up you can add products you can buy products transfer the ownership instantly just like a vending machine so congratulations on making it through that concludes the client-side portion of this application alright so we have one last task to do and that's we're gonna deploy the smart contract to a test network we're gonna get the you know code off our machine and next deploy it so we're not running ganache all right now in this video we want to do is take the smart contracts and actually put them on a real blockchain right up until now we've been you know running everything on ganache just this test blockchain we want to put it out in the real world to see how it works okay so you can see a list of blockchain networks here inside meta masks right so the etherium a net is you know where real ether work is worth you know real money but these other networks are just test networks they allow you to like play around with your application on a test network so you're not like risking real funds or anything like that so we're gonna use the cove on test network okay so I'm going to click over to Cove on and you know I'm gonna use you know my accounts and ganache here which currently have no ether and we see nothing inside our application right because the smart contract isn't actually deployed at The Cove on test networks that's what we want to do is actually get it out there we're gonna need a couple Everett things in order to do that okay so here's you know Cove on on ether scan kovanda Hg and IO to explore this learn more about Kevon test network but we need a couple things first we need to be able to connect to the cove on test network and we're gonna use in fewer for that so if yours gonna give us access to an aetherium node right so aetherium node is how we connect to the actual blockchain and in fear it gives you in theory i'm known as a service you can get started for free by just going and creating account and logging in and what you do you'll see your dashboard you'll see an option to create a project and what you do you'll see some details like this alright so after you create the project you're gonna need this endpoint right here this is basically the URL for the etherium node so i'm going to go down to Kevon and see this you know cove on dime figured io4 / v3 i'm going to copy this okay and you keep this for later use okay so this is our aetherium node that we're going to use to deploy the smart contracts and use our DAP on the coban test network okay so keep that handy the next thing we need is some actual ether because if you go here you know we don't have any ether to deploy our smart contract with it's you know zero so let's go to ganache and copy this private key first of all and we'll just copy like this and let's add it to meta mask I'm going to import it like this sorry import account and pasting the private key again don't don't use this account for real on the main net so now we want to do is actually request some ether for that okay so we can go to the cove on test network faucet so a faucet is basically just a website or a smart contract essentially that dispenses ether so I can just paste in my address so paste in the address right here copy it paste it in here and he will this person Scott Bigelow inside this chatroom will actually send me some as a bot but he's the administrator and he will let me know as soon it has have some ether in that account alright so I just said it was successful so let's go over here and let's refresh this this is the transaction on the contest know or that you told me about all right boom there we go so he said three Thor was sent let's see if we can see our balance in meta mask go back here and there we go awesome we have three ether in our wallet and let's rename this this is the account let's do like this we'll call this the deployer so details edit deployer so just so we know what this accounts for this accounts you used to deploy the smart contracts again all right so we've got three ether and we can apply the smart contract with this particular account all right so now I'm going to show you how to deploy this smart contract really easily alright so head on over to remix etherium org all right so this is a solidity IDE in your browser so it allows you to you know edit smart contracts and things like that but also compile them run them deploy them all from your browser right it's nice and easy so what you're gonna do is go to your project find the marketplace smart contract that we created copy it all right then go back to remix and create a new file so you go to this plus icon here and then we'll call this marketplace Capital m marketplace just soul all right I'm gonna paste the code inside of here alright so let's check the solidity version so we want version 0.5 dot 0 and you can also go to the ABI to see what was compiled with in development so if you go to marketplace that JSON look for a compiler alright and this will show you the version so it's compiled with this version 0 at 5.0 this commit hash so let's go here 0.5 dot 0 all right this is it right here five five a yeah five five eight all right so close enough all right so let's to compile all good now let's run it okay so we're gonna check injected web three and what we're gonna do is select the cove on test network that we got our test ether from okay so head there Cove on it's gonna reload the page that's fine okay so they're gonna have a new version of remix that's what this is saying all right so we're on cove on test network you can still see our smart contract let's deploy it click deploy you have to sign this with meta mask all right so what I'm gonna do is change these values and edit these to make this happen pretty fast we'll do 30 seconds so I should do advance so I'm gonna do a 50 way to make this really fast and the gas limit I'm gonna say let's do a million units of gas one zero zero zero zero zero zero all right so the new potential toe will be point zero five eath which is fine especially for a test network say this confirm and it's pending so I'm gonna wait for this to finish so we can check out the transaction on either scan this is kovanda III and I Oh this will show us if this worked on the test network and it worked okay cool so now let's copy this value so let's see here this is the contract address well save that here for just one second and let's go back to our code now you can deploy this smart contract with truffle but I just showed you how to do the remix so let's create a new network right here normally truffle will do this for you I'm gonna do it manually since we deployed three mix I've been having some trouble with truffle lately getting contracts on the test network so let's just do what works for now so I'm gonna change this to network 42 that's the network ID for the Kevon test network okay so just trust me on that if you want to look at the different network IDs of the different aetherium networks you can certainly do that but that's coban is so let's copying the address go find this information here contract created see you're just copy this see all right address and then let's do the transaction hash we'll just copy this and click ok cool now we can verify that this exists in the cove on test network by saying truffle networks and it should show us the address on the cove on test network as well as ganache okay so here here we go network ID marketplace for this ok awesome and never going to be 42 is Cove on alright so let's save that and go back to remix and our sorry the app and let's change the cove on test network and we should be able to interact with the yeah should be able to interact the smart contract now so let's refresh the page and see doesn't yell at us doesn't say that the contract was not deployed the network you know if he went to maenette it'll tell us that all right so let's reload it I'll clip that a remix we get stop getting those errors let's eat here is the market place has not been deployed the network and we switched am a net but we don't get that error whenever we you know go to Cove on so that's good start let's try to add a product let's just say Apple earpods and let's do a price we'll just say one ether okay a product get the meta mask confirmation to pop up let's confirm the transaction let's edit the gas just to make it fast edit some to fast 30 seconds okay confirm and let's wait and see if it finishes alright it worked I just got the transaction confirmation on ether scan from meta masks so i refresh the page in order to see their product you might have to do that as well but there you go so your smart contract is deployed to a real blockchain so it's not all running on ganache anymore it's actually running on a public blockchain network now granted this is a test Network right so then the ether on here isn't worth real money but still you see that your smart contract actually works on a public blockchain that's really important alright guys so congratulations you have come to the end of this tutorial series where I showed you how to build a full stack DAP from scratch right so congratulations you know you guys have stuck it out done the hard work and you're on your way to becoming a real-world blockchain developer alright so again if you want to find all the code to this check the link out down the description below you can find a full length article on my website with a link down below as well so you can get the written instructions if you need more clarification about anything and you know as always be sure to subscribe to the channel if you haven't already and click the like button down below and if you want to learn how to become a highly paid blockchain developer you join my free training on my website over at DAP university calm for its life boot camp alright until next time guys thanks for watching DAP University

Channel: Dapp University

Views: 83,688

Rating: 4.9674606 out of 5

Keywords: ethereum developer, ethereum solidity, dapp ethereum, ethereum app, ethereum development, ethereum dapps, ethereum application, ethereum tutorial, ethereum mist, decentralized applications, ethereum web3, dapp, ethereum contracts, solidity, programming ethereum, ethereum programming language, ethereum coding, ethereum contract, ethereum code, ethereum virtual machine, ico

Id: VH9Q2lf2mNo

Length: 158min 8sec (9488 seconds)

Published: Mon Aug 12 2019