Code a Blockchain Game Step-by-Step (Ethereum, Solidity, Web3.js, Truffle)

today i'm going to show you how to create your own blockchain game and i'm super excited because this is the first time i've ever done a gaming tutorial on my channel but right now is the perfect time because blockchain gaming is really starting to take off and i'm going to show you how to jump on that trend and create your own game today all right i'll show you everything step by step how to create ethereum smart contracts the solidity programming language how to write tests for them put them on a blockchain and then also how to create a client-side app that will let users play the game and interact with your smart contracts but don't worry you don't have to be an experienced programmer or really know anything about blockchain to get started today i'll show you everything step by step so before we get into that if you're new around here hey i'm gregory and on this channel i turn you into a blockchain master so if that's something that you're interested in then smash the like button down below for the youtube algorithm and subscribe to this channel and if you want to learn how to master blockchain step by step from start to finish then head on over to dap university dot com forward slash bootcamp to get started today here's a demo of the app that we're going to build today this is a blockchain based memory game where you try to find matches and as soon as you find the matches you get to keep them forever on the blockchain that's because each of these tiles is represented by a blockchain based token so whenever you find the tokens and you match them you get to keep them in your wallet and then these tokens can be transferred outside of the game because they live forever on the blockchain and you can sell them on a marketplace keep them as collectibles whatever this app is inspired by a tutorial by anya cabeau who's another javascript youtuber so full credit to her for originally making this tutorial i'll put a link to her channel down in the description below but i've taken this and adapted it for blockchain and also for modern web development with react.js here's a quick diagram of how the application is going to work that we're going to build all right so first and foremost we're going to use our web browser and talk to a client-side website this is where most of the logic for the memory game is going to live we're going to write this game in javascript and we're going to do do it react.js okay and then when we match the tokens in the memory game we'll actually create new tokens on the blockchain all right that's where the tokens are going to get saved whenever we find them and these tokens are powered by ethereum smart contracts which is going to act like the business logic for transferring the tokens and you know govern the token ownership and then the ledger of people who own the tokens are going to live on the blockchain as well it's going to act like our backend database in this tutorial and then of course once they're on the public ledger of the blockchain they can be sent to any other blockchain wallet you know sold at a marketplace etc etc really quickly let's talk about the tokens in this tutorial so the kind of token that we're going to build step by step is not a money it's it's different it's called a non-fungible token so you might have heard about this with digital collectibles like cryptokitties for example this is a really popular topic in the blockchain space right now so that's what the tokens are going to be in our tutorial there can be memory tokens that are collectibles that we win by playing this blockchain based game and then we can hold onto these tokens you know collect them sell them whatever let me further explain this difference so that it makes sense so the token we're creating is a non-fungible token and that's different from a fungible token so you might think of fungible tokens like cryptocurrencies so these are examples of you know tokens that represent money so let's take a token for example let's just see like the uni swap token uni every uni token is worth the same as every other uni token you can swap one uni token for a different uni token and it's worth the exact same that's what a fungible token is and this works really well for money so non-fungible tokens mean that tokens aren't necessarily worth the same so each token is unique these tokens are not unique these tokens are unique that's why they work as collectibles so for example uh you know one token might become rare and therefore worth more than another token and that's an example of non-fungible tokens and that's exactly the type of token that we're going to create this video so we're going to use the erc721 standard you might have heard of the erc20 standard for ethereum-based tokens that's what these are these are all erc20 tokens well erc 721 is just the standard for non-fungible tokens so it basically just describes the types of functions and events that a token must implement again this is just a ethereum smart contract written in the study programming language and this is the description of you know the types of solidity functions that have to exist like balance of to see how many tokens the individual owns the owner of each token the ability to send tokens like transfer from the ability to approve tokens for other people to send them we're going to get into all those details in this video but that's a really quick overview of what the erc 721 standard is because that's what we're going to build in this video now let's install the dependencies we need for this tutorial the first dependency is node.js this is going to allow us to install all the packages on our computer as well as run our client side application so you can see if you have node already installed by going to your terminal and typing node dash v so i'm using node 9.10.0 i would recommend using the exact same version for best results during this tutorial but you can probably use the latest version if you really want to and you know what you're doing so uh you can download node directly from the website or you can use a command line tool like homebrew a package manager to install it that way the next dependency is the truffle framework this is a framework for creating ethereum smart contracts we can write ethereum smart contracts with the solidity programming language write tests against them and deploy them to a blockchain with truffle as well as many other things which you'll see in this tutorial you can install truffle from your command line like this say npm install dash dash g truffle at version 5.1.39 the next dependency is the ganache personal blockchain this is a blockchain that will run on our computer we can simply download it and run transactions in the blockchain deploy smart contracts to it without having to pay any real money so go ahead and download ganache you can just click the version for your operating system here and whenever it's finished downloading you can open it and you'll see that you have a brand new blockchain running on your computer just like this you'll see lots of different accounts funded with 100 fake ether and don't get too excited because this isn't actually worth anything the last dependency is the metamask extension for google chrome most modern web browsers won't connect to the blockchain out of the box and so we need to install a special browser extension to do that that's exactly what metamask does it's an ethereum wallet that turns our browser into a blockchain browser so go to the google chrome web store find metamask and click install and once you have it installed you should see a fox icon in the top right hand corner and just walk through the setup steps to get that started all right now let's start building the project so instead of building out everything from scratch in the beginning i'm going to help us get started fast so i've put a link down in the description below to a github repository this is going to let us get the starter code for the app um so we can get get moving alright so type this into your terminal say get clone dash b all right starter dash code so this is a specific branch on this repository so uh here's a repository link github.com for slash hyperdiversity forward slash blockchain game then finally put a space after that and call the folder blockchain under short game so don't worry if you understand everything about this i'll put this command down in the description below okay but just click enter and you'll see what happens all right so i'll enter into the newly created directory like this say cd blockchain game all right and you'll see the branch starter code so if you want to change to the master branch you can but i'll just uh start in the starter code brands like this so next we want to install all the dependencies we'll just say npm install wait for that to finish all right so it's done and you might see some warnings here uh don't worry about that as long as your package is actually installed that's all we really care about at this point it's not ideal but that's just the state of things uh so let's clear that out and then i'm going to open this in a new tab here okay so i've got two tabs in my terminal and on the second one i'm going to start the server we'll do like this we'll say npm run start this is just a server for the client side application again uh the rest of it's going to be on the blockchain so this is my old version let's just see if this loads up here all right there we go that's what you should see so here's the basic template for the app again you can see that it just says edit this and app.js so we're going to fill this out in this tutorial so there's no game here but this just has some basic ui ready for us so we have to build this stuff from scratch it has a nav bar up here with this memory tokens title right a nice little icon and then a place for our ethereum address here and then this is where we'll actually build the game all the interactivity and we'll collect the tokens at the bottom and we'll do that later in the tutorial so i just wanted to run the server really quickly to make sure that everything was set up properly so let's just continue on with that let's just set the project up so that we can you know build it out for real so the next thing we want to do is start ganache so this is our local blockchain and we want this running so that we can uh you know deploy smart contracts to it and all that kind of stuff before we start building everything out so we'll just create a smoke test to ensure that everything works okay so let's go ahead and open this project in our text editor so i'm going to open my sublime text uh you can use whatever text editor you want to people ask me about that a lot what does that subtle dot command mean well basically that's just how i open my projects in sublime text it's a quick shortcut for my terminal don't worry if you can't do that you can always just navigate to your file browser and open it manually that way if you want to so we can see inside of here that we have a truffle dash config file this is what configures our project to talk to the blockchain so here's our connection to ganache right here and then if you've used truffle before you might notice that i set my projects up a little bit differently i put the contracts in a different directory so they can be exposed to react js for these tutorials so that's the configuration here if you're brand new don't worry about that but if you're you've been around truffle for a while that's why i do this okay and so let's keep looking at the project here so next let's just look at the source directory all right there's lots of different files in here and and directories so uh the first is the contracts directory this is where the smart contracts will go so we already have a memory token smart contract set up for us this is where we'll write all the code for the token we'll build this out here in a minute um we have a test directory where we're going to write tests for this smart contract and we already have a basic test skeleton set up here as well we'll fill out the code for this in the tutorial and then last but not least you know we have the client side directory so this is where the components go for react.js again reacts to component based library we'll dig into all that in this tutorial but we have the basic uh you know markup for the front end that you see inside of here and of course we'll fill out this code in the tutorial and also create a lot more uh in here as well so let's start off with the token all right so this is we're going to create the erc 721 token for you know the memory tokens that we're going to collect during this game so um we'll build this out you know in this tutorial but first let's just create a basic test to ensure that we can uh deploy the smart contract to the blockchain that everything's set up properly and so let's do a couple things here so first i want to take out this all right so this is you know part of this different smart contract that we're going to inherit from later in this tutorial don't worry about that just yet just know that we don't want to deploy it with that on there yet right so basically we each want to say we're going to give it contract a name this is the second thing so say string public name equals memory token all right so we've just done here is created a variable inside the smart contract this is called a state variable which basically means that it belongs to the entire smart contract not just a function and it is stored on the blockchain so it's going to be an immutable variable value means the variable value can't change uh because on the blockchain and it's with the smart contract so it's just going to be a strange name memory token and so that's what this means here because solidity is a statically typed programming language which means that whenever you clear declare the data type you must do it like this and then it can't change it can't be something else all right it's also public which means we can read this value outside the smart contract which we'll see in a minute and then it just has this name here okay so we'll just save that and we'll deploy it to the blockchain and we'll try to read the value so the next thing we need to do is tell truffle how to put this on the blockchain so we'll open this migration file so go to the migrations directory look at migration number two this is called deploy contracts so this is just gonna be a file that tells truffle how to move the contract onto the blockchain that's what a migration is so you might be familiar with migration from another programming background if you're a programmer already maybe like a web developer or a mobile developer anything that works in the database i mean you have to migrate a database you basically are changing it that's what a migration is it moves it from one state to another or maybe you're moving data from one place to another you could think about a migration that way as well that's what this does so we can put the smart contract in the blockchain like this we'll go to this initial migrations file we'll just copy this paste it inside of here and uh instead of deploying migrations we'll deploy memory token so that's what this is here this is just importing the memory token artifact uh into this file the artifact is what truffle uses uh whenever it you know compiles the smart contract it creates an artifact so that it knows how to work with it in javascript okay we'll see that in action more later so uh we just do deployer deploy memory token just save that and then also while i'm here i'll note that the migrations are numbered so that truffle knows what order to want to run them in so the initial migration is number one and then deploy contracts as number two because they must be run in that order all right so let's go to the terminal and deploy this we'll say truffle migrate dash dash reset all right i'm going to do reset for now in case you have any other smart contracts that exist in your build directory i pretty much always do the reset flag for local development like this basically understand that smart contracts are immutable like they can't change and so if you update the code to them when you're developing them you have to put new copies on the blockchain and that's what i do whenever i do the reset flag so we'll run truffle migrate dash dash reset to put this on the blockchain and let's just see if it works so it's compiling all right all right and boom there we go it's put memory token on the blockchain so now let's um open the truffle console to interact with it all right we'll say truffle console so now we have a javascript uh console where we can interact with the blockchain directly which is pretty cool okay so i can actually fetch the smart contract with javascript inside this uh console and we can read that variable value name so i'll say like say name or so contract or token token equals await memory token dot deployed all right so i'm using a weight here because this is an asynchronous function i talked about that a lot in my other tutorials but basically you know the interactions of the blockchain are asynchronous and so if you want to get the value of this you must use the await keyword because like you know just token if you did this then it would only return the promise not the actual token itself it's kind of confusing if you want a deeper explanation that just go look up how promises work on in javascript and also how async await works so anyways you'll see token here it'll say undefined uh that's just the logged value that's not the return value so you can say token all right boom and there it is boom all right it's a token.address all right so it was deployed the blockchain boom done and then token.name so we'll say name equals await token.name and then uh call the function with the parentheses all right and so it'll say undefined again that's just a logged value it's not the actual return value click name and then boom there we go memory token awesome so we have successfully put a smart contract on the blockchain it is a very simple smart contract that doesn't do very much but now you have um you know just guarantee that everything works properly you've set up a blockchain you've put a smart contract on it you've written a little bit of solidity programming language so you know you've taken some concrete steps to becoming a blockchain developer and building your blockchain game so congratulations that's the really the first step so let's continue on with that okay i'll exit the console like this just say exit all right clear this out and we want to keep building out the smart contract what we're going to do is actually write some tests for it so we don't want to boot up the console every single time to see if our code is correct we want to use test driven development and not really test driven development but we want to write tests along with the code i think test driven is probably too hard for most people who are just starting out programming and just like learning blockchain we want some sort of test coverage though to make sure it actually works good so we won't be hardcore test driven but we will we will write some tests all right it will make things more efficient and speed things up so what we're going to do is we're not going to write actually too much solidity code in this tutorial again because um we can get a lot of this for free by using the open zeppelin library let me explain why so let me just pull it up here say open zeppelin erc 721 so a lot of these tokens are basically like solved problems so for example if you want to create an rc721 token um there's no need to really reinvent the wheel now that being said if you're just learning programming from the very first it can be helpful to like reinvent the wheel to learn things and i actually teach you how to do that and some of my other tutorials i teach you like how to build a cryptocurrency from scratch i teach that inside the blockchain bootcamp because sometimes like when you're just starting out it really helps to build things from scratch to get a deeper understanding even if you are reinventing the wheel sometimes that can be helpful for learning but the scope of this tutorial is really just to show you how to make a game and how to use tokens so if you want to if you want to you know build tokens step by step you can check out those other tutorials to do that deeply but for this tutorial we're going to use a template from er sorry from open zeppelin because they have a standard interface and implementation for writing erc721 tokens these are the you know collectible tokens on their github so basically we can just use this see erc 721 and they basically have a lot of the functions created already because remember it's just a standard token it works supposed to work the same way for pretty much everybody here's the specification here and they've basically already implemented the standard for us all we have to do is inherit from it in our smart contract and we get all that functionality for free so i've already included the erc721 full uh standard inside of here so i did this because i didn't want any conflicts with the open zeppelin version i wanted to be able to follow this tutorial pretty easily i didn't want to import it from the npm package or anything like that i wanted to just put it in our project uh so you had easy access okay so it's already wired up for you all you need to do now is uh you know put this line back in there so basically we say memory token is erc 721 full so this is how you do inheritance and solidity this is the smart contract we're going to inherit from this is the erc 721 full here all right and of course this this inherits from every other you know contract inside of here okay so um and then we import you know the file right here and say dot is the current directory and then here's the file name and then we inherit here okay all right so uh let's just take this out and start over and we can actually set the name a different way so you can see that this erc 721 has a constructor here so this constructor is just the function that gets run whenever the smart contract is created or put on the blockchain and it has some values we can pass in so it actually takes a name so string memory name and then string memory symbol because these tokens all have names and symbols so they can be traded on you know marketplaces so that you know wallets understand how they work so we can implement this constructor into our smart contract like this okay we just say constructor keyword constructor and then this is how we tell it that we want to give the erc 721 full arguments i'm just going to copy this and paste it here and then we give it this name and symbol that's required here so names a string and symbol is a string and we just say memory token and then we say memory memory that will be the symbol okay and this constructor must be public all right and then it's just going to be an empty function we don't actually have to uh implement any logic inside the constructor we just have to implement the uh constructor for this erc721 full here okay so um let's just start off with that it's a really basic implementation we've given it a name and a symbol a lot like this state variable name here that we read out in the console we just assign the name this way because that's what the uh the template asks for and if you want to browse this you know you can look for name so you can see this is the name function here inside of the erc720 metadata it actually implements a variable here a private variable actually called name and a private variable called symbol but they expose public functions that read these values okay yeah that's that's how it works but we're gonna write a test for this so tests are just automated tests that allow us to check the behavior of the smart contract uh it's like what we did in the console but it does it automatically inside javascript with shuffle so go to your test directory and find this memory token.test.js file and this is where we'll write all the code for the test so of course i have cleared out a lot of this stuff but um you know i have some boilerplate code in here so that you don't have to buy all this yourself basically what it does is it uses memory token right it imports it just like we did the migration it you know creates some configuration for the test and then it uses this contract uh function to create the test suite so really quickly uh we're gonna use the mocha testing framework and the chai assertion library so mocha testing framework comes bundled uh with truffle okay so it's a javascript testing framework where we can write tests for the smart contracts smoke is a pretty popular framework like i said comes a truffle and then we're also going to use the chai assertion library so chai basically is going to allow us to have these matchers uh in our tests like should you know expect assert all that kind of stuff so those are the two main things we're going to use to write the test and you'll see that in action as we go along here so inside the test the first thing we want to do is let's just create the the basic one right let's just say let's write a test example like this we can say describe uh deployment all right and then i'm gonna use an async function all right and then inside of here we'll say it uh deploys successfully and then we'll say async so again i'm using these async functions because we're going to be using the blockchain and we want to use the await keyword to fetch things so the first thing i want to do is basically like declare the token here i'll say let token all right this is just going to be a variable that we can assign the token to when we fetch it back from the blockchain just like we did in the console okay and then uh i'm going to write this exact same code that we did in the console so let's say like uh say token equals await memory token.deployed again this is just what we did a few minutes ago in the console so we store the value here and then we want to check the address all right this is we also did this in the console uh let's just see this all right cons address equals token address and then we would just want to make sure that it it exists and that's not blank so we'll do this all right so say assert that's what we do to check the the validity in the test to say a search dot not equal you know address we don't want to be the blank address we don't want to be an empty string we don't want it to be null we don't want it to be undefined that's because we want to check that it's present but we don't know what the address is going to be because you know every time we put a new smart contract in the blockchain the address changes so we just want to make sure it exists all right so uh let's run the test like this and say truffle test and this will uh yeah it'll it'll put it on the network and then check the address all right make sure it runs hopefully doesn't have an errors and boom there you go it passes awesome so if you've never written a test before that's what it does you just see this output here and you can see the name of our our test you know contractors memory token this is the deployment and we say that yes it deploys successfully based upon the rules that we described in here you know we say assert that's just saying you know ensure or you know make sure that this happens make sure that the address is not equal this make sure the address does not equal this you know et cetera et cetera you could change this uh to something else and watch it fail and you could make it turn green as the whole whole uh testing philosophy is like reno red green refactor it's not exactly what we're doing here but we are adding test coverage okay next let's check for the name but first let's do this so we want to fetch this memory token before we write more tests well let me just show you we can add a new test for the name like this we can say like you know it has a name all right and then we say async like this and say const name equals await token.name all right and then we can say assert equal yeah name and then say memory token just like we created in the contract but it's not going to know what the token is because we defined token here inside this test so we want the token to be you know let me just show you a better way to do this no it's not necessarily true for this one whenever we write more tests it's not going to know so let's do this let's say uh before async basically we're going to create a before block where we can fetch the token before every test instead of doing it here right so basically i'm taking this line away and i'm moving it in here so this is part of the testing framework we have this special function called before all right and we can um fetch the token from the blockchain first and then do all this stuff does that make sense because you don't want to just do it inside of here we want to do it before we do everything okay so we check the name like this and then we can also check its symbol like this alright boom has a symbol and that's just like the name test but it's you know we just checked for the symbol so symbol equals token.symbol all right and then if you want to you know pause this part of the video and then check your test before um we run it you can do that or you can also check the code solution provided in the github link down below all right so let's run the tests and let's see if it passes all right there we go boom deploy successfully it has a name it has a symbol so great we're making good progress all right so those are the basic attributes of the token um now next what we want to do is test we want to build up the token so that it uh can be minted all right yeah so that it can be minted and so that it can be distributed to other people so the whole idea is that whenever you are creating the token you want it to start from zero like whenever the token's created there are no tokens in existence and then we want people to uh collect them so again we're going to have this memory token game here and it's it's not there anymore but again we're gonna you know match squares like in a memory game and whenever we uh match the squares a new token is gonna get created for us and we'll see that in action okay so we want to write the logic to create the tokens we'll have a mint function right that's that's what it is you know you mint the token that's what it means to create one so we'll create a new function like this i'll say function mint all right we'll say address to and then string memory token uri and say public returns bool all right and so let me explain what this token what this mint function does so it accepts two arguments um the course is a function so we start with the function keyword then we give it a name mint all right then it has two arguments argument one and then argument two so the first argument is the address or the username basically of the person on the blockchain that we're going to give the token to that's what this address data type is here all right so it's an ethereum address just like you'd have in metamask so this is the person no two is the variable name and then we use this underscore uh to as just a convention here and then we use a string for the token uri so what do i mean by that well basically like you know these tokens have images associated with them so you can see like this is uh this cat has a cat image all right this cat has a cat image all these tokens have pictures so these pictures are stored somewhere you know they could be stored on a web server somewhere if you want to get more decentralized you can store the images on a distributed file system like ipfs for example okay so that's what these images are okay so basically we need a place to reference the image for each token and that's what the uri is so that the two will be the owner and the token uri will be the the location of the uh of the image that's stored okay so we're gonna override uh one of the functions inside of the erc721 file here so meant with let's see here uh actually we're going to create our own so we'll just say um do like this we'll say um uint yeah well override the mint function sorry i got a little confused so see here mint all right you can see this uh function inside of here it's a it's a it's an internal function that's why it uses this underscore all right and so we want to create our own mint function that implements this but we want to do it a little bit differently all right so um how this works is it wants to use a token id okay so uh you could give an arbitrary token id but we want to actually create a token id so first of all let's do the mint function say mint and we'll pass in um you know 2 value here this is how we implement uh the mint function that we've inherited from okay so underscore mint i'm gonna say token id all right now we need to set the token id so we'll say uh uint i'll say token id uh and then we'll say we'll say equals total supply and then we'll say add one okay so let me explain this the erc 721 standard or at least this particular smart contract that we're inheriting from has a total supply function so what this does is it returns the number of tokens that already exist so we have an all tokens array which basically keeps track of all the tokens as you might suspect and we just read the length all right so we can see how many tokens exist in this array and that will give us the total supply or the total number so we're going to use that as the id okay and so whenever we want to create a new token we'll go ahead and increment the id manually inside the function so that we can't accidentally overwrite an id so we'll just get the total supply we'll add one to it just like this all right to get the new token id and we'll call this mint function all right so this calls the mint function inside of the erc721 contract here and then boom that will be the first step so the next step is that we want to set this token uri okay so there's a function for that inside of here too set token uri okay so um basically this just takes the token id which we just created and then the uri and then it sets the uri for the token so that we can see this image right here okay and this is exactly what we'll do for our memory token so we'll do that like this say uh set token uri and we'll pass in the token id and we'll pass in the token uri all right we'll use the semicolon and then finally we'll just return true all right and then boom there we go all right hopefully all this code works we'll check it out our tests but if it does then this is our complete smart contract and now it's it's pretty simple right this is not an in-depth flex solidity coding tutorial because we're just using a library and customizing it again i've got lots of other tutorials on my channel if you want to check those out for more in-depth solidity coding uh of course the blockchain bootcamp goes way more in depth in those tutorials as well you can check that out and link down below but uh yeah this is this is it all we need is a smart contract with a couple of variable values and then a special mint function and we're ready to go and that really highlights how easy it is to use the erc721 standard i used the token templates from open zeppelin to get started really fast creating your own token okay so let's go ahead and write the test for this uh we'll just kind of quick we'll go to the test here we'll create a new um test like this i'm just going to paste this in i'll clear it out and then we'll write the code manually okay so i'll clear that out and so we're going to create a new uh test here that that describes a token distribution all right so this is just like deployments there's two main concepts here deployment and then token distribution all right so i'm gonna put this up so you can see it and um we want to talk about how it mints tokens so first of all we clear declare this variable value here let result and then we want to say uh basically we're going to call the mint function and then inspect the results so we can say you know await token.mint all right we're just going to call this mint function just like this all right boom we're gonna do it in our test instead of the console and then we can say you know accounts zero so if you look at the top of our test here we have this accounts and variable that's injected by truffle okay and so accounts 0 is going to be the first account in that array and that's the 2 value that's the person that we're creating the token for here on the 2. and then next we want to do the token uri okay so we'll just say like you know https colon four dots forward slash www dot you know token dash uri dot com forward slash nft all right so this is just a really basic example this is an arbitrary url this could be anything you want it to i'm just going to do that for now to make sure that it works okay so um we can make the first thing we want to do is make sure that it actually increments the total supply okay so do that like this it should increase the total supply so um we just call the total supply function that's exposed by you know this smart contract like this we say you know results which we defined here equals a weight token total supply all right we just read it back and then we want to make sure that the total supply is one because you know now we have created uh just one token so we do that like this boom all right and then next we want to ensure that the owner balance is increased all right so this person who we went to the token for we want to make sure that they have just one token all right so we do that like this boom so because i hate increments the owner balance your result equals awaits token balance of accounts zero all right that's the first account and we say uh this is equal to one right so next we wanna make sure that the token belongs to the owner so we'll use a special function for that like this boom so token should belong to the owner so we just say token dot owner of id number one all right and we just want to make sure that the owner of token number one belongs to the account that we minted it for okay that's how you do this account zero two string owner is correct okay and then um let's do this next we want to see that we can actually see all the tokens of the owner so you can get that just like this we need to see how many tokens the account has first we'll call this balance of function just like this okay i want to see how many tokens they have and then we want to loop through all of the tokens inside of javascript to fetch out each individual token that the person holds okay so um [Music] basically what we'll do is write a for loop in javascript like this boom to fetch out each uh token so if you're brand into programming let's just look at like for loop javascript so let me just pull it up like in javascript you have these for loops so basically you can just write this code that keeps executing over and over again for all these conditions so here let's move the contact switch but basically like this says for i which is the variable value that you declared here um so i is zero and then we're gonna loop through each we're gonna keep like incrementing i by one until you get the length of this cars array okay and then uh that's how long the loop will execute for so if you want to you know learn more about how these loops work definitely go check out w3schools they do a good job of teaching the basics okay so we write this for loop um that basically loops through all of the tokens that the person has so we start at zero and then we go all the way to the balance of which is one so it's gonna be one token if they had a bunch of tokens it would loop through all of them and then we just increment one by one and so for each of those we want to fetch all the ids that belong to this owner so we say token token of owner by index all right that's what this function does is a special function provided with this smart contract and we say uh you know pass in this account and then we want this basically to return all the tokens from this account you know the first one the second one etc etc and then for each of those we push them into this array here okay and now because this person only has one token it's just gonna return one token inside that array which will look like this so this is the expected result it's gonna be just this simple array with one you know if they had more tokens it could be like you know two you know three etc etc but it's not they just have one token in this case so what we want to do is basically just assert that this array is correct so we'll say token ids to string is equal to expected to string so our token ids is the array that we created here and then expected is this array that we've created here okay and so the last thing is we just want to make sure that the token uri for the token we created is correct so we'll say token uri correct i'll just paste it in like this boom so token uri equals a weight token dot token uri for the first token and we want to make sure it's equal to the same uri that we created here at the top okay so boom all right so that's all the tests we need for now because we don't need to do test coverage for all this stuff because it's already tested inside the library that we're borrowing from but we do want to write test coverage for the stuff that we implement right and that's what this does and we also wanted this basic test to you know see that our settings are correct and that you know it deploys properly okay and the last thing i want to mention this um i don't think i said this at the beginning of this part is that it's really important to test smart contracts you know it's important to test all smart all software uh well not it's it's tests often are very important in software i put it that way they're extra important for smart contracts okay because smart contract code is immutable you know developing blockchain applications is very different from developing regular applications because like once you put on the blockchain you can't change it really and so you want to write tests um to check for things extra before you deploy it for real okay so that's what we're doing here all right so let's just save it and let's run the test and say truffle test and hopefully it passes hopefully we don't have any problems here we'll just see fingers crossed all right we'll wait wait come on come on come on and boom there we go so it mints tokens properly awesome so everything in our test pass just fine so at this point if you want to play around with this you can write some more tests if you wanted to or you could like you know change these values to watch the tests fail and then make them pass just so that you see what that's like but uh from this point we're going to move on and go ahead and start building out the client side portion all right so now let's start building on the client side portion of the application so i'm going to go back to my web browser here and make sure i still have this open okay so um again this is our web server is running here in the separate terminal tab make sure you start your web server if you haven't already this is npm run start and i'm running in a separate tab so i can still execute my other commands here let's make sure that you know ganache is running okay this is the blockchain and then finally let's use your truffle migrate dash dash reset to oops sorry you'll say reset to put our smart contracts on the blockchain okay make sure everything's there our tests are passing we want to put the smart contracts there okay so um the first thing we want to do is make sure that meta mask is set up so again you know metamask is how we connect our web browser to the blockchain we're going to connect it to this particular blockchain that we just booted up here with ganache and so we first do that by uh you know going to metamask here and typing in uh basically say choose a network okay and you'll see the main ethereum network you'll see these other test networks but you want to create a custom rpc probably i just called mine ganache okay ganache and then i type in the rpc url which is just this right here you can see rpc server uh boom all right so i've already done it so it's going to say it's already in the list but that's that's how i do it okay just ganache then boom and then click save and then you want to connect to it all right and so once you've done that your web browser will be talking to this specific test blockchain that you're running okay so again these are all the accounts on the blockchain so it's got 10 accounts um that already have they're pre-mined with a hundred fake ether again this is an ethereum blockchain it's it's a fake ethereum blockchain that's the blockchain we're working with some tutorial basically this eth isn't worth anything on the real ethereum network so don't get excited but you need to use this ethereum to pay the gas fees or the transactions whenever we claim the tokens on the network because anytime you put new information on the ethereum you have to pay gas that's what it's for um and yeah so i've already paid some gas for deploying the smart contracts that's why the gas has gone down here okay normally i start with 100 but this is the account that uh truffle uses to deploy the smart contracts is the first to count the list anyways i'm kind of going off a tangent here i just want to explain that but anyways we want to import this account into ganache so we can expose the private key right here click show keys and you'll see the private key all right so never use this account in production because everyone who's watched this tutorial has seen this private key and they could steal your money if you decide to put any real cryptocurrency on here right so anyways you want to click uh copy and then you want to go to ganache okay and then on the accounts you want to go to import account you can click you know import account here and then select private key paste and then click import i've already done this okay so it's not going to import that same thing again but just click import it'll work and then you know i have named my account you know gadash number one you can do the same thing by changing the account name uh that just reminds me that it's the first account provided by ganache okay so again don't use these in the real world and this mnemonic is used to rebuild wallets and uh anybody who's seen this tutorial could steal your money if you you know use this for real so don't do that but it's okay to use it in development right and that's why we're doing that so um now we've got metamask set up uh web browser is connected to the blockchain but the first thing we want to do is connect our app to the blockchain we actually this memory tokens app we want to wire up a connection so we'll do that that's that's the first task okay but there's a little bit of work to be done in order to make that happen all right so let's go to the uh source directory go to components and look at this app.js file okay so this is the main file we'll write all the client-side um code okay this is a react js component so react is a framework for building javascript interfaces or user interfaces in javascript okay it's a very popular modern web development framework very popular for blockchain developers that's one of the main reasons that i use it in my tutorials lots of other web developers already no react and yeah it's some that's one of the reasons i use it by tutorials okay so it's a component based library which basically means that um all the code is is contained inside of react components which is just these class based components that have a name all right and they inherit all this behavior from react component all right and uh you know it mixes html and javascript all inside the same files so instead of like having a file for html code and then a file for your javascript code it puts it on the same place and you can even see like a mixture of html and javascript on the same line that's what this like evaluation here is so don't worry if you're like not a react developer already if you're not much a developer you can just follow along with what i'm doing here and pick it up pretty quickly like i think you'll get the hang of it as long as you just watch what i do so that's what react components are the other big um thing to know about react is it has a state object with a bunch of special functions under the hood okay so the state object um stores like the state of the application that's a terrible explanation because i just used the same word to define the word but let me just illustrate what that looks like and i think it'll make sense so they give you this example here that talks about the to-do list so if you're on a to-do list and you say like you know item one all right and then you click like add item one and then you say item two all right so your website now knows about item one and item two well how does it know where it is well it basically has a a database kind of inside the website that keeps track of these two items on the to-do list that's what the state is okay so you can see this right here this dot state equals this and then has this items right here this items array well there's an array under the hood that stores each of these items that we just added inside this text box okay that's the say object is it basically gives us a way to handle like a small database on our client-side application and so we have all these special um you know functions and things like that to help us interact with the react state you'll see those in action as we build out this game okay so um let me go back to the code here and introduce you to this right so this looks familiar from that react um documentation so we have a component here called app all right we have a constructor function here which just initializes the component looks a lot like this all right this constructor right here and then we have this render function right here that lays out all the html code all right i'll expand that and you can see it here all right this looks just like the documentation here's their render function that lays out the html code you know they put some javascript and some html inside of here and we'll do the same thing as we code this example out okay so um you know we can see that here boom here we go inside of our layout we have you know a nav bar that's what this is all right so it's this this black navigation menu up here with the memory tokens you can see this here all right memory tokens and then this brain all right this is an image right that i've already imported at the top of the file and then um yeah i've already got some basic css imported into the app and then one thing to notice too is that we're using bootstrap here so bootstrap so bootstrap is a ui framework uh for building you know user interfaces so you don't have to write a bunch of html and css yourself that's what we've got here and that's why this styling looks nice without writing much and that's why you have all these extra class names inside the markup i know some people don't like bootstrap because it clutters up the markup but this tutorial is really about uh teaching you how blockchain works and how uh react.js works it's not so much about teaching you how css works so that's why i like using bootstrap for these types of things all right so let's make our app talk to the blockchain a few minutes ago that's what i said our first task was and we got a little sidetracked explaining how react works how bootstrap works but if you're brand new then you definitely need to understand those things before continuing um so let's just create let's just connect our app to the blockchain so in order to do that we're gonna use a library called web3js so this is the main javascript library for interacting with the ethereum blockchain again ethereum's a protocol that we're going to use in this tutorial and so um you know we've connected our web our web browser to the blockchain with metamask but now we need to connect our web app to the blockchain we're going to use web3js to do that all right i'm sorry this one right here so we're going to see web3 in action for sure in this tutorial but first we need to import it at the top of the file that's what i did here all right but now we need to actually um create a function that loads web3 in the app and so i'm really just going to copy and paste this and that's okay because you don't have to code this out by hand i don't personally code this out by hand i just import it into my other projects because there's no reason to code it out by hand it's the same code every time okay so boom we're going to create this function called load web 3 all right and this code right here is literally given to us by metamask like that's another reason i'm not making code this out by hand metamask even tells us in this blog post like hey here's how you connect your web application to web3 so i basically have taken metamask's own recommendations here and simplified it for this react app and create this load web3 function okay so we've just defined it and we've connected it to the browser but the next thing we want to do is actually um we want to can we want to call this function so we'll create a new function here called component will mount and this is a javascript function or sorry a react life cycle method so you know you can read more about those react lifecycle methods in their documentation if they want to like just say will mount so they don't show any here but you can just google it like component wheel mount for react and you can read more about those so basically the whole idea is that like while the component is being rendered there's a special point in its life cycle where this will be true we'll say component will mount and whenever that's true we want to execute this code so in this case we want to say a weight we'll say load or this dot load uh web3 okay and we'll call this function okay so let's check our app and let's open the uh console if you want to know how i did that you can i think it's option command i or you can just do right click and say inspect and then click console here okay and then we don't see anything yet that's okay let's perform a task to ensure that web3 is connected into our app so we'll create a new function down here we'll call it a load blockchain data all right so do like this boom and then we'll call that function here so load blockchain data we're going to define it here and then we're going to call it here so let's say await this.low blockchain data and then the first thing we're going to do inside of here is just um stash the web3 value all right cost web 3 equals window.web3 and then the first thing we want to do is just fetch the account that we're connected to with metamask and log it out to the page so do that like this we'll say const accounts equals await web3 dot east.get accounts all right and then we'll say console.log let's say account and then we'll say uh accounts zero all right so this is the web3 function for fetching the accounts and then this is the account all right so let's just refresh the page and then boom there we go so here is the uh account that we're connecting with metamask you can see it here boom all right to aec and then to aec awesome so we are rocking and rolling we have connected our application to the blockchain we have metamask connected um that's a huge first step right our react app is working it's talking to blockchain check mark number one okay so next we can um instead of logging this out to the console let's actually display on the page up here inside this nav bar so we've already got this wired up inside the nav bar you can see this right here so this is how react uh implements javascript inside of html okay so you've got this render function that lays all the content on the page we've got a bunch of html but then inside this html we can use these curly brackets to evaluate javascript so we're using that react state object which i talked about a minute ago right this thing right here right this state object to store the current address right and right now we just set it as a default value of 0x0 okay and um inside this account here we've just said hey read this dot state dot account that's how you read information from the react state object it's super simple just this dot state dot account will return this value right here okay and that's what you're seeing right here okay so now after we have gotten the real account for web3.js instead of logging at the console let's say uh this dot set state and then we'll pass in uh the account here let's say accounts zero all right boom and then refresh and there we go awesome now we can see the actual account that we're connected with from metamask inside of this project okay boom there we go awesome all right so that's the big next step so now what we want to do is we want to actually connect the smart contract from the blockchain and bring it into the app as well so this is the token that we just created in the last section we want to bring it into our app and load up that information and put it in the state object as well okay so we'll do that like this uh first of all we have imported the token at the top of the file already right this is just the uh the abi files if you go to the abis source abis you can see the memory token right here so this is the truffle artifact it's not actually an abi this is not the best name for this directory but um you know this is contains the abi which is basically just a json object or an array that uh describes like the functions on the smart contract um it describes the interface basically so that we know like what the functions what functions we can call inside our app and things like that so we're going to create a javascript version of the smart contract just like we did in the console just like we did in the test suite inside our client side application and we need two pieces of information to do that we need this abi okay and we also need the address so i'll show you that inside web 3. let's just look at that three eighth contract whenever we create a javascript version of the contract we need that's this you do it right here new web3 eth contract and we pass in the json interface which is the abi that i just showed you and then also the address that's the location of the smart contract on the blockchain so this file inside of here for the memory token it contains the abi and then it also contains the address down here at the bottom okay let's just sign let's look for networks networks yeah boom there we go so networks um it contains the address let's see here's the events the address boom right here for the smart contracts the api is the top and then the address the smart contract is here so all that information lives inside of here inside this json file so we need to pull it out and then create a javascript version like this okay so the first thing we want to do is determine the network we're connected to with ganache because that's going to tell us the specific location of the address all right because the address could change depending on what network we're connected to so that's the first thing we want to do we want to get the network id right like this so we'll say boom so let's say load smart contract so network id is going to be web 3 eth get net id in which console logged that okay and so we'll go back to ganache here and see 57.77 all right so that's the same thing that we see here which is what we expect because we have metamask connected to ganache if we were connected like the main ethereum network it would be one but inside here it's 5777 that's just the name of ganache and you can also see that here 5777 so now we want to fetch into this file and fetch the address on network 5777 so we'll do that like this we'll say you know network data all right this is going to be the memory token networks key network id so we're going to do this networks then we pass in the network id 5777 and then we want to fetch the address but only if it's deployed to the network so we say if network data all right then we'll uh you know store the address like this we'll say uh you know address is networkdata.address okay all right so that will set the address like this okay and then we'll say you know if if it's not if we don't see network data like let's say it tries to get into that file and it doesn't see that then we'll just say uh the smart contract is not deployed to the network we'll just alert that to the window okay all right like that boom done so um again in order to create the javascript version smart contract we need the abi and we also need the address we have the address we can get the abi like this say const abi equals memory token uh abi because that's on the top level okay it's not in the network data all right it's right here abi abi is always the same regardless of the network but when the network changes the address changes that's why we fetch the network data address okay um so now we can create a javascript version of the smart contract we'll call it token it's like kant's token equals new web three eth contract abi address that's just like we saw in the documentation here okay new web3 eath contract abi address okay so we fetched both those pieces of information just like that so now we want to do is add it to our state object so we'll say you know like token let's do an empty object here and we'll say you know just like we did here this dot set state account we can say this set state token all right so this is a shortcut in es6 for saying this so this is the exact same thing but we can abbreviate this inside of es6 by doing this okay all right so next uh so we fetched the token smart contract it's done and then now we want to do is fetch the total supply okay so we'll do this we'll say uh const total supply equals a weight token.methods dot total supply all right and now with web3 you can't just call the function you have to also say call all right so like with web3.js um basically like let's just see here let me find the documentation yeah call methods are when you read data from the blockchain so basically you have to do the function name and then say you know call at the end okay because if you don't do call it won't actually run the function it'll just return the function so send methods which we'll see later are when you actually like trigger transactions on the blockchain um and you have to call send at the end of those functions as well but in this case we're just reading the total supply so we do call here all right and then we're gonna we're gonna store that to the state as well all right just like we did with the uh other things so set state total supply and then we're going to update the default value in our state like this so we'll do this and while we're here instead of doing tokens is an empty object i'm going to say no okay that's probably better um so that's the next thing and then we're going to uh let's just see here now we want to load all the tokens so we did that inside the test right this would be very similar we did in the test where you can see uh we loaded all the users tokens with this for loop so i don't want to go through and explain all this stuff over and over again because we already did this in the testing section so i'm just going to paste in the modified version inside of here because i don't want to like you know just re-explain all that stuff you can go back and watch that section if you want to but we're going to load the tokens like this so just say boom so load the tokens so this will say balance of a weight token methods balance of accounts zeros that's the account we're connected with we do call and then we write this for loop to go through the entire balance and we just say you know get the token of owner by index fetch the uri and then we set the state the token uris that's going to be all the urls for the tokens we update the state like this okay so we'll also do a default state here we'll do an empty array as default for the token uris and there we go awesome so that's it that's loaded up all the blockchain data into our app um so again if you want to understand how this works go back and watch the testing section because this is almost identical code we're just calling it again inside our client-side application to load up all the tokens on behalf of the user so let's go back to our browser make sure everything loads properly and yeah boom there we go so nothing has really changed that's okay uh we don't shouldn't see any visible changes on the page um because basically yeah we just we just wired up stuff under the hood okay so uh let's just see here next let's go ahead and fill out the rest of the state object so i'm going to paste in some values here you can just get these from the final tutorial code if you want to all right so these are going to be some more uh values that we need so we need a cards array this is going to uh basically list all the cards in the page the cards chosen and then the cards chosen id and the cards one you'll see all these implemented as we as we go through tutorial okay so uh first of all yeah first what we want to do now is actually like build out the game we've wired this up to the blockchain we have um you know loaded the smart contract now we want to create the game so the first thing we're going to do is just show you how we're going to do all the cards so in the project already uh if you go to the public directory you could do these images and you can see like the tiles for the memory game okay and then also like the actual um you know the images for them okay whenever you flip them over so first thing we want to do is create an array that manages all this stuff okay so actually before i do that let me explain these are in the public folder because we we don't want them to be in our react source code because whenever we mint the tokens whenever we create these we're going to reference these full urls from the public folder so that's that's why i'm doing that in case anybody's watching that wondering why the images are there that's why for total beginner don't worry about it so um i'm going to create a constant inside of here that references all the images so it's like this i'm going to paste this in you can get this from the final code solution if you want to but basically we'll create this constant called card array that just keeps track of the name of each card and then the image location so the image you know the fries the cheeseburger the ice cream the hot dog etc etc okay that's going to get stored in this constant here all right and um that you know that's going to reference all these images in the public folder for each tile okay and so now we can do is uh load all that content on the page so first i'll you know scroll down here and we want to put all that here and this this code goes here section so what we want to do is create a uh we want to look at this card array and yeah basically we want to create the card array first so inside the component will mount function we're going to go inside of there and sort the cards because we want to randomize them before we put them on the page all right so we want to go at the very last line of this before after load blockchain data and do this so we'll say this dot set state card array right that's this right here and then uh we want to take this card array right here and then we want to sort it all right and we say 0.5 minus math.random so that just gives it a random order um and then yeah it just randomizes the cards for the memory game and that way it'll be sort of an unpredictable order anytime it lays it on the page right so uh that's the first thing is randomize the cards and then now all those cards are loaded up in this cards array state variable here and now we can load them out on the page like this so we'll just map over them so map is a function in javascript where we can iterate over each item in the array all right we'll say this dot state dot card array okay so i'm just going to paste this in here you can get this from the code solution if you want to um but i'll explain it so say this dot state our cartridge map and then we'll say the card and the key so here's the key the key is basically just something that react needs to know about whenever we implement multiple items with the same html element on the page we say the source is equal to this dot choose image we'll implement this function momentarily all right it's not does not implement it yet but then we'll give each element an id of the key and then we'll create this on click event so basically whenever a card is clicked it will get the function and we'll we'll actually implement the card so let's let's not let's not do this part yet uh let's do that let's just do choose image all right and get some quick feedback so um we'll create a choose image function like this all right so i'm going to paste this and i'll code it out step by step here in a second so we'll do it right below load blockchain data i'll say below the control yes to below the load blockchain data okay so choose image all right so basically we'll just say we'll start here um we'll say this if state actually let's do let's just start like this let's just do choose image and then we'll start off like this this will be the basic starting point so choose image all right so basically this is just going to return all the blank cards all right and there we go boom awesome so it doesn't do anything yet we just see the board laid out in the page and yeah that's the first feedback so what we want to do is actually create the logic to start flipping over the cards so we can check the matching right so that's what this part of the function does so i'm going to add this back in there again this is in the final code solution so we want to create this on click handler so basically anytime we click one of these cards we want a certain function to fire all right say on click and then event all right we say let the card id we're going to get this data id right here event target get attributes data id that's this right here and then we say uh basically this state cards one includes card id to string that that's basically gonna say like um if if you've already won the card then don't flip it but if you haven't then flip the card over so we're going to implement this flip card function and we're going to update this you know choose image so let's just uh scroll up here and implement that flip card function so um we'll do that like this we'll say um choose image and then flip card it's gonna be an async function and we'll just pass in the card id okay and then so inside of here's where we write all the logic to do it so what we do is basically um we just say if the card's already chosen so basically we say this that state chosen cards length all right and we see if if there's we we just check the length of that all right and then um we basically say this dot set state and we actually update the chosen card so cards chosen this state that cards chosen this date dot cards array card id name so basically that just updates the chosen cards to include this particular card that we've passed in okay and then also uh we implement the ids so we have cards chosen and then the card's chosen id which is a specific id that we passed in so this can be a little complex to understand there's a few different arrays going on here but i think if you just take a step back and look at this and then look at the different arrays that are in play here then that will make sense okay so there's that and then um basically what we want to do is say if the uh already chosen is equal to one all right basically if it already has been chosen we want to check for a match we're not going to do that just yet we'll just we'll just leave that all right so um that's the first step all right so next we want to do is actually implement the logic for showing different cards on the page all right so whenever we flip the card like we want to uh you know show different image okay so we want to go back up to the uh that the function i forgot the name is called let's see here it's uh choose image all right so we want to go to the choose image function and update that so right now we're always doing the same image but now we want to do some conditions and say like we got the card id right i want to say if the card um id includes um basically if if this is in the cards chosen already then we want to show the card on the page right and if not then we want to do that default image right so that's that's what this does here so this dot state card's chosen id includes this card id all right then we want to put it you know turn the card over basically because we're dynamically choosing the image right here all right it'll change the source automatically and if not we want to do the default okay so let's do that and then there we go boom so of course it's you know still we can turn over everyone so that's not totally working yet and it's not actually checking for matches but that's the idea okay so um now we just want it to turn over two cards at a time all right so that's when we go back to this line right here we say if it's already chosen all right basically if you've already chosen then we want to go ahead and check for a match so that's the whole idea here is uh this if the chosen cards already has one card in it and we're calling this function for a set second time um that means it's you know it's one already exists that we're calling this function the second time then we want to check for a match okay so that's gonna be our next function and we'll just say uh this check for match function be a little complicated so we'll just let's do a really basic starting point here we'll say check for match all right and then let's pass this in here make this async and we'll say alert let's say checking for match so you'll see how that works right so boom and then boom so checking for match all right it doesn't do anything yet it just puts the alert up on the page like this all right but that's the idea all right and then we'll go back in here and we'll say uh we'll code this out more so first we want to do is keep track of each option that we have checked for right so the first is option one so this will be the state cards chosen zero this would be option one id state card's chosen one will be option two id right so basically like if it's the same image uh then we would wanna say hey you just clicked on the same image and then next if it's the same if you've actually found a match you want to tell you so you say else if the card's chosen zero is equal to card's chosen one basically if the card id is the same then uh we'll say hey you found a match all right and then um yeah and then we'll basically say you know this set state uh you know cards one and we'll put in the cards okay and they'll put in the token uris as well so let's let's not do the token uris yet let's just keep that out and then if you didn't get anything all right if it wasn't a match then we'll just say you know sorry try again right and then uh we'll basically just say this set state or reset everything at the bottom this state card's chosen card id all right so reset those after you've checked for a match and then basically if if you've found them all then we'll give you an alert that says hey you found them all okay so this is the basic functionality for checking the matching we'll add the blockchain part in a minute to collect the tokens but last thing we want to do is update the choose image function okay so whenever we dynamically choose the image like if we find a match we want to show a blank white square okay so i'm just going to override the choose image function like this boom so basically we just add a new condition so basically if the cards one includes the card id so if you've won it you've collected the token then we're gonna show this blank white square if not you know show the card image and if that's not even true you didn't even find a match then show the blank image right so that should be the basic uh logic i believe for the game um so let's do that and then boom all right so let's uh try to actually find a match here there we go boom found a match so click okay and then awesome so they go away we found the match it checked it out correctly so that's the basic game functionality down so there's two last things to do before you finish up this tutorial now we want to do is actually you know collect the tokens so whenever we find two hamburgers we want to create a new hamburger token all right and then we'll do that like this and we will also want to we will list them out on the page whenever we find them okay so we're going to add the blockchain part like this so down here inside of uh inside of this like if we actually found a match and we say you've found a match we want to change this code to look like this and i'm just going to paste this in here but i will explain what it does so boom so um basically we do this so we're going to call this function on the token so this dot state dot token dot methods dot mints all right this is the mint function and it just just like we did in the tests all right as we go back to the test you can see this mint function here all right we're doing the same mint function but with web3.js so it takes an account and then a uri so we do the account which is the account we're connected with the blockchain then we give it the token uri which is basically just you know the current location localhost 3000 plus the image right here so like you know this images.pizza.png so basically just build a url um right here for the uri and then remember with web3.js we're we're actually triggering a transaction on the blockchain so we must call uh send all right so my method send all right so mycontract methods my method send right because we can't just call it like this we tell it who we're sending it from so we say from this dot state dot account and then uh we wait for a transaction hash to come back from the blockchain and whenever that's done we're going to update the state with the cards one all right but we're also going to update the card uris so this is going to be all the uris of the tokens we've actually collected which is going to allow us to reload the page and play multiple times and save our cards or our tokens forever on the blockchain okay so i'll save that go back here and show you on the page so click refresh and let's give it a shot let's see if it works so let's try to find a match all right maybe all right you found a match awesome so click ok and now you should see this metamask confirmation pop up that allows you to claim your token whenever you find a match all right so click confirm and then boom there we go so i just got a confirmation on my other monitor that said the transaction was confirmed so we've collected that token so now we want to do is actually like display that token down on the page whenever we have uh collected it okay so let's go back to the code and implement that because we want to show all our tokens once you collected it at the bottom of the page okay so what we're going to do is replace this code right here um at the bottom all right so we'll replace this code and loop through this with the the map function we'll say this data token uris map paper that's passed and token on your key and we'll just show uh the tokens at the bottom all right it's pretty simple just like we did up here but even simpler and then we'll uh add some text to say you know how many tokens we've collected right here so tokens collected is equal to this state.token uri's length all right so all the token uris we've collected we'll show the count right here and then finally uh we'll just add that last little bit of copy text at the top that says you know start collecting or start matching now all right we'll just we'll just change that text okay so now this should be a complete application let's let's test it out here all right let's click save go back yeah and there we go boom so i'm going to close the terminal here or start the terminal with the the console javascript console and uh yeah there we go you can see our uh ice cream token was saved from the last time we played the game we actually mentioned that toke on the blockchain so let's do some more see if we can find any more in action all right so it might take me a second to find a match here oh perfect you found the match click okay uh see a metamask confirmation pop up click confirm and then boom there we go we see our second uh hamburger you know token on the blockchain show on our page so saying find another one all right so let's try this oops sorry all right found a match awesome another metamask confirmation pop up and then boom there we go so you get the idea here you know you can play this over and over again and keep collecting tokens and so congratulations you know this is a complete blockchain game so especially if this is the first time for you building a blockchain based application you know really congratulate yourselves either way congratulate yourself you know you've seen i implement this this is actually the first time i built a game on my channel so i mean i hope you liked this tutorial but that's how it works so you know what you can do from here you know these tokens are now yours on the blockchain you can take them out of the game you can keep them in your ethereum wallet you can send them to other people and you know you can sell them on a marketplace for example these are digital collectibles that are yours to keep and you know you can keep playing this game over and over again to collect more tokens you know what i mean it's just like you could just you could basically earn tokens that way by playing this game over and over again like maybe there's some crazy advance incentive that you get people for playing your game and whenever they play it they get tokens that's kind of the future of blockchain gaming in my opinion that's that's where i think this whole space is headed you can create these games that don't fully run the blockchain but they have some sort of blockchain based rewards that you can take out of the game that exists you know outside their control so if you like this video you know where can you go from here you know you can always take this and build more features on it on top of it yourself i'd love to find out what you build again you can follow me on twitter and just uh you know show me your project there and of course if you like this tutorial you want to take the next step uh well first of all of course always smash the like button down below subscribe to this channel if you haven't already and if you like this tutorial and take the next step you know learn how to build a real world blockchain application like more than just a tutorial so that you can you know land a high paying job become a freelancer you know build your own real world project whatever right just uh click this link here head over to dap university dot com forward slash boot camp i can show you how to build that real world app step by step from start to finish right so again hope you like this video love to see what you guys build subscribe to channel smash that like button and until next time thanks for watching dap university

Channel: Dapp University

Views: 77,655

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: x-6ruqmNS3o

Length: 90min 20sec (5420 seconds)

Published: Fri Oct 09 2020