Blockheads Ep 3: BLOCKCHAIN TUTORIAL - How to build a basic shop

Captions as YouTube publishes them, usually machine-generated, so product and people names can be misheard.

1. 0:00

   hello blockheads i hope you're as excited for this video as i am i'm going to show you guys how to make your own digital marketplace that runs on blockchain that we like to call blockshop get ready guys it's going to be a lot of fun so this is the application that we're going to make today this was the app i finished in the last video and when i was trying to learn how to send near tokens um so you have your

2. 0:26

   cart here showing each of the items you want to buy as well as our corresponding prices you can see your total here and your smith button for purchase and on this side you have your your options of items as well as their corresponding prices and this little display shows the user what he currently has um or pre ways currently previously bought from from this store so i bought two

3. 0:50

   something but i think this design can use some improvements so i decided to show you guys how to make this brand new version where you have your users inventory here a new car with a clear car button new items with some with the description the price and add to cart button make it a little more dedicated and what's kind of fun is um after you select the amazon purchase you make your purchase you're gonna see two butterflies and one ring

4. 1:29

   gonna get a receipt letting the user know that their items have been purchased and that has been added to the near blockchain as well as another display showing you what the user has currently um bought or previously bought in their inventory so once we refresh the page we're going to see the updated inventory here this picture is also made with react bootstrap so now can display in a clean way both on mobile

5. 2:00

   and the web browser so this is the application we're gonna make i'm really excited and i'm ready to jump right in before we get started and want to make sure that you have node.js installed and we're going to be running in the react framework so make sure you have an understanding of react.js i personally won't be going over react in this video i'm going to assume that you guys already know it but i just want you guys

6. 2:27

   to have this installed so we can progress forward smoothly you're also going to want to have the create near app installed we're going to be using this to essentially set up our workspace i'll put a link in description to the github repository so you can follow the instructors there to get started on that so i'm currently in visual studio code this is my preferred text editor you can open up whichever one you like but i recommend visual studio code to

7. 2:59

   follow along i'm going to open up my terminal i'm going to run npx create near app dash dash front end is equal to react then the name of the project will be block shop or whatever you want to name the project hit enter just wait till it installs and there you go so we have our blog shop folder in our you know part in our desired directory source file and just all the boilerplate code if you don't do the dash dash

8. 3:37

   front end uh dash dash front end is equal to react it's going to default to vanilla.js so you want to be sure to include that if we navigate into the folder we just created so cd block shop you'll see we're in the current in the correct folder and if we run yarndev a browser will open so you can see that server is running at this port bring it over to my other screen so you'll see this demo code this demo

9. 4:16

   of this demo application um runs you can sign in sign out so they kind of build that for you which is nice right now i'm signed in as jerry but i imagine that this is the screen you're seeing instead so if this is the screen you're seeing um that's perfectly fine don't worry about the signing in just yet we'll get to that later so now i want to get to some cleanup before i do i want to encourage you guys to take a minute to familiarize yourself with the create new wrap environment read through the comments they're going to really help you in kind of giving you a

10. 4:50

    sense of what's going on because i know there's a lot going on but um honestly but i'll see you through that let's just jump right into the cleanup so just highlight everything all the way down and hit delete add the closing tag inside of here type in return parentheses and let's add a hello world so p tag hello world you can come back to that hit save go into um go into your source folder and open up utils.js

11. 5:32

    and here we're going to keep the login and log out functions we're going to use this later those come preloaded with the application highlight this on submit function delete it i can delete some of these comments too but you know there's comments delete the set greeting function and then the get greeting function these are contract functions and they're located within these view

12. 5:57

    methods and change method arrays to make them public and accessible to the user uh we're going to go over contract calls and contract functions a little bit later but for now just stick with me for this clean up go into assembly then main.ts and get rid of the set greeting and get greeting contract calls the contract function as well as this comment and uh this default message variable hit save

13. 6:27

    save here save your app.js and uh last clean up area will be the global.css file so we're just going to take everything i'm in this file and just get rid of it oh god there we go yeah just hit ctrl a hit delete we're going to add the background color black for the body just for now don't use this form css throughout the video but for now i just want something just to kind of show us let's see that everything's working

14. 7:15

    we're on your own dead with you if you had stopped your um there we go you should see hello world right here you see this and they know it's working so we have our hello world message showing which is good but now i want to make the nav bar so we go to react reactbootstrap.netflight.app click on get started you'll see npm install react bootstrap bootstrap and when you type that into here so npm install into your terminal react dash

15. 7:59

    bootstrap boot oops strap it's going to go rather fast for me because i already have it installed so once you do that so just run this line copy this the link um you know everything in here under the css section so go to the go to the index.html that's located within your source folder paste it into your index.html right here hit control s now we're going to go back to the website we're going to type in navbar here so navbar there we go yeah navbars you scroll all the way down until you

16. 8:40

    get to about and get to right here so right here they're going to show you this nav bar example we're just going to um copy this and paste it in go to app.js copy over hello world hit control paste hit ctrl s or command s i keep saying controls so save your documents go back to this application here oops if you have to run reset the server so uh it didn't update because i forgot to

17. 9:11

    restart the server so type in yarn dev it's gonna pull an error because we didn't import these tags so okay cool you should be seeing a black screen you inspect it and you're gonna see like a bunch of errors i assume yeah so that's fine so you're gonna go back into your app.js type in import curly braces um you're going to use these you're going to go through some kind of like example here just kind of use this as your as your guide and what to import but we're not going to use everything here so i might actually clean up too

18. 9:52

    we're going to type in navbar comma nav drop down and just nav from react dashboard strap and semicolon command s so errors go away and you'll see your navbar appear up here we're not going to use the lollies buttons we're actually only going to have the title for the page and a login button so let's go back through and delete what we don't need so we don't need um nav dot link features

19. 10:38

    don't need pricing we don't need this entire nav drop down menu we don't really need more deets as much as i love dank memes we're going to replace this with login and we're going to add an on click event listener type in console.log hello oh and last but not least we're going to rename this to blockshop it's going to go back and you see over login you have block shop you're going to inspect it open up the javascript console

20. 11:26

    and type in and just click oh i messed up oh yeah i'm sorry guys uh make sure you uh set this as a callback function there you go we're just going to run console.log hello so set this as a callback function save click on login you should see hello like keep clicking on it you can see that number kind of increasing so and there you go that is our nav bar so now to create the nav bar i want to actually make the bodied application so i'm going to add a call for

21. 12:08

    the container row and column from react bootstrap in container i'm gonna have a row inside the row i'm gonna have two columns so the first column i'm gonna i'm gonna actually have an options component and this column gonna actually call for two more rows this first row we're gonna have our inventory in the second row we're going to have our cart and these will be our components so as you can see that we're going to

22. 12:48

    see options inventory and cart so before we populate these components i want to backtrack a little bit we have imported this link from react bootstrap to show the styles and show that we can see our nav bar all right and that everything looks okay it's working but i actually want to use sas to design and modifier style sheets as well as modifier buttons um since we're using react bootstrap so we're gonna do

23. 13:28

    is you're gonna download another snippet called live sas compiler so it's live sas compiler looks like this i would click day once you have that installed onto your vs code we're going to create a new folder called scss in this new folder we're going to make a new file called app styles dot scss um before we do anything with this you go to your settings here type in sass so sas

24. 14:18

    and you're going to see live sas compiler after you install that plugin go down to here where it says set your exported css styles formats and save locations so edit settings in json and here where it says save path um copy this right here where it says source slash css what that's going to do it's going to create a new file called css where all our sas is going to compile to to create our one single css file or

25. 14:50

    folder but so after you have that setting modified and changed go back to your app.js and import a css slash app styles dot s css go back to the react we're gonna go back to here so go back to react bootstrap go to get started scroll down and import i'm sorry copy this line here or under the sas section back to your file go back to your scss folder and then your app styles.scss paste it in hit save

26. 15:41

    so you see your css file is made but nothing's in it right now and that's okay i'm going to go back to your app.js file hit save here i'm going to check out our application and everything went back to normal everything's good and clear when you if you saw that like if you saw a minute ago it was like not clear just because let me show you so we so that line removed from index.html earlier that was actually applying the styles to this page

27. 16:12

    um the steps we did import the styles from your bootstrap folder i in your node modules after you install react bootstrap and place it here what this allows us to do is to modify different like default bootstrap styles so importing styles in this way will allow us to modify the native designs that come with react bootstrap we're going to make these custom modifications here in our app styles.scss folder every modification you want to make has to be made above the import of this

28. 16:55

    import line we have here user body background we're going to make it hashtag zero zero zero let's go black for example i'm gonna go back to my page so we see this is bike currently so i'm gonna do is gonna save this and now it's black so we can change our background here which we've accomplished so let's go back to global.css we're going to switch this body over to app uh appear here get rid of this line

29. 17:45

    and here are these i don't know if that wasn't yours or not but i'm gonna hit save and i'm gonna go back to my app.js and we work and make sure class name is still up it's good so now we can see that our text is now white on a black background so moving forward and actually start with making our components so we're going to go to our source folder add another new folder called container

30. 18:22

    add one more folder called components and in our container we're going to first let's make the options component so start for the one at a time and call us options.js and you're going to make this a class called or cc so this is again react snippets um if you want to download it i don't think one of those earlier but we can show you so just uh download react code snippets by channel post how you say last part last name

31. 19:03

    sorry i'm going to butcher that so inside of here so we're gonna actually make our options folder so in our options component we're gonna make a list of the items that we're gonna have on for sale but essentially what we have here is a variable called list items it holds a an array of objects so each these objects be sure to include the commas between each object so in these objects each one has a property called name or we have one for the butterfly

32. 19:40

    the price where say for the butterfly we have like 30 i'm near tokens a description um this one says like this butterflies magical properties what those are who knows just buy it uh and so on and so forth i'm one for the blue ring so maybe this ring gravity protection somehow i don't really know how uh and a fire wing and i think this used to belong to icarus and what we actually want to do is pair a picture to each of these items so we're going to find a way to display

33. 20:12

    each of these items in our application um and what i did up here is also kind of skipped ahead a little bit but essentially you're going to make sure to import the container and the row from react bootstrap as well as the card i think about it as well as a card so i want you guys to head on over to png fuel i'm going to run through one of these items you can have all the other items kind of opened up already for you all

34. 20:44

    but type in or flaming can type in any item you want doesn't have to be these items click on the flaming wing hit the download png for free you should see your download initiate here ing fuel.com go back to your application and take someone max i'm just going to kind of skip ahead here but if you're on windows you have to do this by opening up your windows explorer go into your downloads folder but you can take your image and just

35. 21:17

    drag it right into your assets folder or file and rename this fire wing so i'm going to do the same thing for the blue ring and the butterfly butterfly blue ring okay this ring provide you with protection in some magic away just kind of what you buy okay so every images i'm going to go back to our options.js file recall each of these images so we're going to say import uh blue sorry the blue ring blue ring from

36. 22:06

    assets come on it's not going to help me out here there we go assets blue ring dot png you can do this two more times one for the what i call that fire wing and one for blind blue ring butterfly.png butterfly blue ring and firewing copy the name here so fire wing and butterfly now for each of these objects we're going to add these properties here just going to call this property picture

37. 22:53

    call the blue ring call the fire wing call the butterfly save see if there any errors let's go back and check out the application i think it's all right nothing's super oh we didn't call this yes it's not gonna actually appear here okay so everything's pretty good here let's keep going so once the other picture is imported we're going to move on to making the options component like options body call container in here

38. 23:37

    inside this container we're going to actually take advantage of the fact that this list items variable is an array and call some use some credit braces for jsx call this list items called map what map's going to do is return an array inside this array that's returning would be the row of items we're gonna put on display so let's call x dot name save and we're gonna go back to our app.js file import the options component from

39. 24:19

    and down here we have our options placeholder we're going to replace that with options let's go back and we can see the names of each of items so now i'm going to do is i'm actually going to go to components add a new file called items dot js here i'm just going to do some rcc and just turn this into a functional component get rid of render and just have return and just to test if it works i'm just

40. 25:15

    going to put item and save so we have no errors that's pretty good it's going to go over to options.js and i want to pass a few um few things into the item so i'm gonna get rid of x dot name and put in item i'm going to call item from the directory so import item from components slash items items items there we go

41. 26:20

    so we're going to pass in all this information into each item and each item will have its own design but when populated this information so i'm going to say name is equal to x dot name price is equal to x dot price and forget me i kind of messed up here there we go so closing tag description is equal to x dot description um and image let's do a picture picture is equal to x dot picture so what we should see

42. 27:20

    let's see save the option save this that's the other thing there we go so we see our list of three items here i'm going to go to items.js so inside the items.js file i'm going to import um a card it's a card and a button from react bootstrap save and i also be sure to call the props the argument of your function and i also want to do is i want to make a card i'm going to make a

43. 28:10

    i'm going to layer this card with an image so say card.image and we don't need if you don't need this so you can make a self-closing tag so card.image card dot body and body we are going to have a place for the description so let's do card god was it item remember that's not kind of items it is there you go card dot title i cheated but let's see card.text um and so essentially we're gonna put in

44. 29:05

    here is the title the name of the um you know of our item for sale so we're going to just put um see i think this is always going to make sure before before i move on to carter text body oh yeah then the price so card dot title yeah so we have our card image um the card body the title the name of the um item on sale the description of it and then the price we're going to put here

45. 29:43

    and i also want what else do i want i want a button like a submit button or an add to cart button so button let's call this add to cart we will get the props dot price ooh got the braces there props.price like he was doing that props dot description let's do another one oh gosh there we go props dot name and here in image we're going to call for source and that source is going to equal to

46. 30:46

    props dot picture so i'm going to do this i'm going to take everything shift tab just kind of like seeing a little a little neater um i think that's everything we need so let's save this and get rid of this because like not really using a component there we go let's go back over here so you can see the image our first one um i'm not sure what's happening with these two so i found a little bug that i want to

47. 31:25

    point out i forgot to add a picture property to these two objects so now if i save them cool i think it's actually okay because i was playing around a little bit um with making it work so save and there we go okay so now it looks more it looks a little bit more centered so that's good um we can still improve these we can change the um the locations button maybe like put to center prescription i assume the text is was white

48. 32:10

    so we need to um make that black we have our functioning item so we're going to do a few things style wise to make our cards look a little better um for instance buttons over to the left over here there's um i think there is text here right yep but it's just like it's just white so you can't really see it and the outer bodies of the cards are a little mismatched so what we're going to do is we're going to fix the stylings uh first thing i want to do is we'll add

49. 32:47

    a container let's add a little container just around the button there we go and then here we're going to add a row right there and i'm just going to add to this row class name oops class name is equal to let's see let's forget this this part so i'm going to copy and paste this over here so just pause the video here and copy over in here in the class name so you can add class names to these reactive strap components or parts

50. 33:41

    yeah components container row oh yeah you need row here it's called row you can see the button moved to the center so that's helpful um all that does so i'll let essentially everything i wrote there just centers an object or so there's an item within a row and now i'm going to go back we're at some it's going rather than a little crazy but also kind of fun so we're going to add some sass files so vars dot scss

51. 34:15

    we're going to use these sas files to um to modify the design i'm going to do my little head and a modify design of our page and manager css just need file let's make one for options let's do options dot s css and you know what we're not gonna um recommend these like um independent files we're gonna use dependent files so uh for every sort of keep the app styles.scss it's kind of like your main one and i'm just going to add these little

52. 34:55

    underscore marks to note that these are just going to be like added on into separate file so when i save these um instead of the live sas compiler throwing into a css file it's just going to save independently and we're going to import these into one separate file let's import first go to options i'm just going to paste this in here so options container background color margin border radius padding

53. 35:29

    copy that um i'm gonna just place it right in our options component there we go and put it right here let's put the div let's give it to the div so class name is equal to that um it's not going to do much by itself because it's because something's actually being called here so we're going to app styles and we're just going to above this import we're going to call that import options let's see

54. 36:13

    options dot scss actually we have to put that we just put options let's see we actually have to conclude it okay so inside of our main scss folder i'm actually going to make another view file i'm just going to call block shop utils clock shop youtube dot s css i'm going to organize this is anytime i want to change a react component i'm just going to use appstyles.css to handle that change and then for the

55. 36:52

    blockchain details it's going to handle like the stylings of my own personal component and layout so when i save um yeah when i save block shop that you tells i should see a file appear here so she'll see that work there we go so this css file will be empty because there's something in it right now um but this is just gonna be essentially our hub for all of our different style sheets so i'm just going to call everything into like this one location

56. 37:25

    essentially so um everything i mean like anything with this underscore in front of it so import recall the varsity one um that's we're going to keep our common color schemes and variables then below that it has to be below the vars because i'm probably gonna call back to to here now and then but uh import options add a semicolon so now we're going to end up seeing is we can actually um

57. 38:06

    we're going to save this we'll look into here okay let's see options generated watching change detected change detected okay there we go okay so to save the options.css file that would be good um so i'm gonna go to uh so now what's kind of cool about this is that i can just call this one css file which is a little better for performance uh there's gonna be like some discussion organization um i mean there's like a certain different preferences on how

58. 39:05

    css is typically organized uh kind of experimenting back and forth between the two so if i want to make a comment on that on which they prefer being css one's just um one css file for every component if you have this that's better i'm interested in hearing that and your reasons why but i'm trying out this thing i think it's gonna be a lot of fun so you just have to simply import this one css file so import

59. 39:37

    um save and we can see the css styling actually did work so we have like that gray background from from that style sheet as well as the padding um and everything so what i want to add next is i want to see if we can like improve the spacing between the cards and also change the color of this text yeah we can actually probably handle the color text right now so let's just do say color black actually let's do zero zero

60. 40:31

    okay save oh okay because i did not call this okay so we're gonna say oh no there it goes i know i didn't i don't just show you now but there we go we can actually see the text now let's see the 30 like our price um and yeah we have each description it looks like i got the names mixed up because it's not definitely not a butterfly it's not the blue ring it's not the fireworks so let's go back and fix that

61. 41:12

    uh options what happened here picture butterfly okay so let's just do blue ring i have no idea how i messed this up so badly there we go fire wing and butterfly against the butterfly uh you know what it might have actually been easier to you know yeah i missed some other names okay so let's do this instead she'll do butterfly uh blue ring fire okay there we go so the last thing we need to do to wrap this up ignore that is to

62. 42:12

    finish off our inventory um so we can actually see right now um the users can't exactly see like what they have and these things are just dummy items um this would be nice to actually know what i already have in stock before you know before i um before i buy anything else so let's go over to inventory we're gonna do some fancy lifecycle functions here let's get rid of our little test array again um so we're going to do is we're going to make

63. 42:45

    we need we need a place actually how's the items we want and also how's their quantity and uh yeah that's essentially it so let's make a constructor set this constructor in call biz.state is equal to and inv name and inv quantity we want this to do is upon loading the screen we want to load the um we want to populate the inventory div so we're going to make use of uh life cycle see the life cycle methods to con to do

64. 43:38

    this so we're going to need um component did mount and component did update so component except component did mount component did mount component did update check if the window dot account id is equal to you know an empty string or it's not equal to i'm sorry so so we're just checking for logged in up like when this at when this component gets created and if it is logged in meaning that's not equal to empty string we're going to do

65. 44:22

    this dot update or create a function called update ion inventory your call function here so this dot update and see if we can arrow function there we go so this dot update in else no nothing happens oh i don't know why there's these things here okay always here enter update inventory function we're going to call await window.contract i don't know if you see that get inventory remember it's a capital i i bet it's an asynchronous function so we can use

66. 45:13

    dot then to handle the results result we're say we're going to check if res is not equal to undefined meaning we actually have the inventory there we are going to set the state set state so we're in to the result meaning that we're going to get an array of the items that we recently purchased and set that as the new ray for user inv um also remember to post this in curly braces because it's technically an object return no i and b's for organizing the

67. 46:05

    inventory so this function so if this first function was just to get the main inventory this next function is to count out how many of each unique items there are and then split them out in a nice and organized way so this function just gets like a raw list of the items we have in our inventory and then this organize function actually organizes them into count by name so let names equal to empty array let quantity

68. 46:44

    equal to empty array and this dot state dot user m we're going to call the for each function on it and see so for each item if names dot includes um so if names includes or if we have x um we're going to run the following function here's a qty dot names index of x so we're pulling the index of um then we're like you know so should this item already exist in our names list we're going to find where the item is and make a corresponding index call to a quantity array

69. 47:46

    qty names dot index of x um and then all we're gonna do is we're gonna add one to that list so we're adding one quantity for every time we find uh an existing item else names.push x meaning that like if the name isn't there we're gonna add the name and qty.push one so we're just adding one to that um let's see so now in component did update we get two arguments typically so we get previous props craft props

70. 48:43

    and prev state we're going to say if the previous state actually i'm going to finish this and explain it okay so we're looking for essentially a change in the state particularly for the property user inventory we want to see if we actually received our raw inventory um this is going to determine whether or not the organization function gets called so this dot org in let's get an error

71. 49:13

    oh you didn't make this an async function there we go okay so now i'll do is modify our actual output display see if it actually works so we can say this dot state dot name v name dot map um so for every x we're gonna like a list of names so you say return list group item x and just do x meaning or with quantity maybe i don't know let's do colon let's return let's get our map with our x and our index

72. 50:14

    we're going to say this dot state dot inv and v qty index and that should do it let's see let's save let's see if you get any errors looks like we got an error so let's just see what error that was oh oh okay so uh just call super props i think this is deprecated so i don't know why it throws me this error but it's fine okay there we go spell super props in a constructor then it will stop screaming at you so user inventory

73. 51:18

    this dot we have to set the state got to have them so we created these arrays but we're doing nothing with them so what i'm going to do is do something with them i'm going to say inv name built-in names int qty is qty so we're setting the state variables with these new variables these new array variables so now we should see our array pop up so these are so these items are unique because i was just randomly adding them while checking functionality of the application so if we do

74. 52:05

    window dot contract i think i showed you guys this earlier but it's always fun so deliver products check out oh no check out a fish wait so then after i threw in a fish into our inventory get a free fish refresh the page it's going to call the inventory and there's our fish we have one fish but yeah this is essentially our fully functioning application and yeah this is now you have your very own functioning block job good job guys everyone thank you so much

75. 52:50

    for watching this tutorial on how to create blog shop i hope you had fun with it i want to see your creative twist and version of blog shop so send me a link to your github repository an email provided below and i want to make a video in the future to show off my favorite versions of blockshop i'm on this page so i think it'll be a lot of fun i think we have a great time with that like subscribe and comment below on what you like to see in the future and what i can do to improve this content to make it better for you guys

76. 53:15

    as usual stay innovative stay creative and have a great day guys you