How to Build Ethereum Dapp With IPFS - Blockchain Programming Tutorial

today I want to show you how to build a full length blockchain application that mixes a bunch of different technologies together okay we're gonna use aetherium we're gonna write smart contracts this little D programming language we're gonna use IP FS the interplanetary file system for decentralized file uploads and we're gonna mix these two things together to create a decentralized app that does file uploads handles files all that kind of stuff game and before we're gonna do all that hey I'm Gregory from DAP university put the like button down below click Subscribe and if you want to learn how to build blotching technology and you want my free training on my website over at dap university comm port slash bootcamp so there are several different technologies we're gonna combine for this video okay in this project the first one is aetherium that's going to be the blockchain protocol that we use for this application right it's gonna be our back-end for the app essentially okay another one is ipfs so IP FS is the interplanetary file system this is what's going to allow us to actually store files in our application in a decentralized way okay and the other technology is react okay this is going to give us the ability to write a client-side application for the project without having to write a bunch of JavaScript boilerplate code ourselves and you know do a bunch of yucky stuff in JavaScript so react is a really great framework for building user interfaces in JavaScript and that's what we're gonna use in this tutorial right so you have to be an expert in any of this stuff you have to really know much about blockchain or the programming languages involved or react or anything like that I'm gonna teach everything from scratch good so let's go ahead and take a look at the app that we're gonna build all right so this is the meme of the day app alright so essentially this allows you know somebody to set the meme of the day right here's today's meme and you could change this I could choose a new file and upload it and you know pick a new one and change it and then click Submit and it would change this me Maurice I'm not gonna demo that all the way through but that's how it works so yeah what this app does is this client-side is written in react j/s and you know we've got bootstrap that's the templating framework that makes it look you know we're not going to write a bunch of CSS and JavaScript an extra code just to make it look like this we're gonna get a lot of that for free all right so yeah I uses bootstrap uses react j/s to handle all this rendering you know the uploads the submission all that kind of stuff react handles all that and two other pieces right you've got IP FS that's where the file goes okay so whenever we upload this file it actually goes to ipfs and then once it comes back from ipfs it gets saved on the blockchain right and that's we're using aetherium for it's got a smart contract that we're gonna create in this tutorial that tells our project our back-end where the file is located on IP FS all right I'm gonna give you a diagram of how that works in a second okay but let me first explain ipfs a little bit more and why we're using in this tutorial okay so I BFS like I said is the interplanetary file system and essentially like this is a solution for storing files in a decentralized way so what do I mean by that right so the whole point of building a DAP is to try to achieve decentralization it's try to remove a central authority a central point of failure you know from an app to make it more trustless all that kind of lots of different goals you could shoot for but the whole goal is to try to move away from keeping everything in one place right that's what ipfs does so you know aetherium is the blockchain that we're using aetherium has nodes you know that keep a copy of all the code on the blockchain that's how it works right all the data and the code is distributed across the network but it's not a great place to put files right files are big right so you don't want a store like megabytes and gigabytes of files on aetherium it would be cost prohibitive it'd be so expensive to do that and be so slow and like it wouldn't even work so you need something else right you need that's what ipfs comes in so essentially it has nodes like aetherium does and you distribute files across different nodes on the network right and they can't be you know tampered with a lot like aetherium right somebody changed it you wouldn't have this you'd have a different copy in therefore there'd be a discrepancy and yeah you get the idea so ipfs is a decentralized file storage protocol and that's exactly what we're going to use so ipfs uses hashes so essentially whenever you upload to ipfs the file will live somewhere and then you identify it by its hash okay so that's what we'll store on the blockchain okay so in this app I'll show you on the whiteboard here we're going to upload an image put it on ipfs get the hash back from my PFS and then store that on the blockchain okay so I'll show you will basically take an image of image first and then we'll have in our browser and then we'll have a CI BFS and then we'll have a cerium smart contract okay so what's gonna happen it's a we're gonna have an image a meme right we're gonna upload it to the browser okay and once we have done that with this form right and here's the form upload the image choose file submit alright it's gonna go to ipfs whenever we submit the form okay and then once the file is actually stored on ipfs its gonna come back with a hash okay and whenever we get that hash I'll just write that here hash we're gonna store that hash on the blockchain okay and then whenever we reload the app we will fetch that hash back from the blockchain and that's how our browser will know what the meme of the day is all right so the meme of the day will always live on the blockchain and whenever we refresh this page is gonna fetch that data from the blockchain show us the meme of the day and that file is gonna be rendered from ipfs right so that hash on the blockchain can't change and then the file on ipfs won't change either okay this week decentralized application alright so one more reason I'm using IP FS and making the tutorial this way is to really just show you how file uploads can work in a decentralized way so there's a little bit of a silly app right just to kind of make a meme of the day on the blockchain that doesn't necessarily make sense for a real world use case part of its educational and entertaining but it's also just show you how it works right this could theoretically be any file like what if this wanted to be a medical record or you know something like that and then you know you you'd have to take this example and you know extend it and you know do some more things like encryption etc etc but this gets you started and this shows you the power of decentralization and what you can do with it and you can take this example and build on top of it right use any kind of file that you want to write that's why we're doing this tutorial okay alright now let's go ahead and install the dependencies that we can start building out the project before you get started you need to make sure you have no js' already installed in a computer you can see if you have node installed by going into your terminal and typing node - V you can install node with a package manager like homebrew or you can download it directly from the node.js website the first item in the blockchain developer toolkit is a personal blockchain we're going to use ganache as our personal blockchain for this tutorial you can head over to truffle Framework com4 slash ganache to download it you can click this download link and whenever you've downloaded it makes you install it and when you open it you've got a local blockchain running so what is ganache you know what is a personal blockchain well a personal blockchain is like a real blockchain Network you know that's connected to the public where anyone can connect to it but it runs on our computer it's you know a closed Network and ganache basically you know as a process that runs on a computer that spins up this blockchain and runs on a server so we can use this to develop smart contracts we can run tests against it we can run scripts against the network develop applications and actually talk to this blockchain is really helpful it's an invaluable tool and the blockchain developer toolkit so if you open ganach you'll see you know ten accounts listed here these are the addresses to each account on the side and you'll see you know these balances you'll see a hundred ether and this is the etherium cryptocurrency that each account has and it's you know required to you know pay gas fees in the network and stuff like that all right so that's an overview of the ganache personal blockchain network and we're gonna leave ganache here set up in our project because we're going to need it running in order to develop our project the next dependency is the truffle Framework we're going to use the truffle framework to develop aetherium smart contracts with the solidity programming language you can install truffle by going to your terminal and typing NPM install - gee truffle at 5.0 dot five and it's important that you use that exact version in order to follow along with this tutorial but truffle is a suite of tools that allows us to you know develop smart contracts write tests against smart contracts deploy smart contracts to the blockchain it gives us development console and that also allows us to develop client-side applications inside of our project so it does a lot and I'm going to show off all those features in this tutorial the next dependency is the meta mask extension for Google Chrome remember that the etherium blockchain is a network and we need a special browser extension in order to connect to that Network and that's where meta mask comes into play metal mask will allow us to connect to the blockchain with our personal account and actually interact with the smart contract that will develop in this tutorial you can install meta mask by going to the Google Chrome Web Store and searching for meta mask and clicking install and once you've installed it just make sure that you enable it inside of your chrome extensions like this you can also see the little fox icon and your extensions tab alright let's get started coding so the first thing we need to do is get the project set up alright and instead of creating the project from scratch I'm going to use my starter kit you can see this on github this is DAP University sorry github.com forge / DAP university ford / starter kit alright we're gonna use this this is a custom project that I've created with the truffle suite and I've also included like a react app inside of here and I've added some special configuration so it you can keep all your code organized really well stuff like that and basically this is just going to allow us to get started quickly without having to write a bunch of code ourselves so I'm gonna copy this URL and we go back to the terminal and I'm gonna say get clone alright I'm gonna paste in the URL and then I'm gonna hit space and the project name so I'm just gonna call this meme alright alright there we go so now we've cloned the project am I gonna go into that directory like this we'll say CD name alright now we can see that there are files in here right we've done this correctly so I'm gonna open this in sublime text that's gonna be my code editor all right with the symlink double dot alright if you don't have this configure that's okay you can just open the project manually or you can find the sublime text em link let me see if I can find really quickly sublime text symlink let's see what Google says here yeah you could look out something like this - yeah stubble right so I've got a Mac you can look at this way or you can just Google all windows like how to set that up right so I'm gonna open this up and now we can see that our project is here the project directory so we can look at the source directory and see that we've got some react components inside here already alright and we've got a contracts directory for the smart contracts in the blockchain and we've got a truffle - config file which is configured our entire project with some customizations we can go there in a minute and then also a package.json file with the dependencies all right so let's go ahead and install the dependencies like this to say npm install all right so that's finished now if you see some errors here it's okay as long as you have the success message the M that all your packages were added that's all you really care about I know there's some issues here I might work through those in the future but this is working for me now and so working for everybody else all right so I'm gonna clear this out and really quickly just a quick recap this package that JSON file is basically just a way to pull in all the libraries the JavaScript libraries and the NPM registry that we need for our project they're gonna give us packages or just like libraries and reusable code that's gonna do stuff like a allow us to talk to the blockchain that's what web 3 is right here right web 3 j/s turns our web browser into a blockchain browser lets our app do that right shuffles the suite of tools that allows us to you know actually build this project out like this right and to react etc etc bootstrap right all right so let's go to our terminal I'm gonna open a new tab and I go ahead and start our web server because we have a free web server that came with this project okay I'm going to show you what we got for free with the starter kit so I'll say npm run start oops sorry p.m. run start all right so you should see your web browser pop up whenever that happens right because it's gonna say start a development server and it'll go ahead and open a new tab or new browser won't know if you haven't opened one yet and you should see your app open automatically all right there we go this is the DAP University start with kiss this is what we got for free whenever we cloned that repository right here this is all the stuff that's in here you can see we've got bootstrap right that's what gives us this nice dark navbar got a logo inside here and some basic code right so we can I'll show you where all that lives inside the project if you go to source components right we could see this app that J's file here this is a big react component that's got all of the code for that starter kit we can see you know DAP University here is here that's in the navbar right that's what's everything inside this nav ok yeah this is deputy versity and we can see you know Dappy diversity starter kit that's what's going on right here all right we see the logo and this is a link to deputy fresh comm for my boot camp and yeah there you go so we can edit all the code on this page as a starting point to create our me map okay so I'll go ahead and do that let's just like change this so say meme of the day I guess didn't even do that all right meme of the day yeah I really quickly I'll go explain react Jas if you're not familiar with it okay so react is a JavaScript library for building user interfaces and essentially like what react does is it gives us a way to organize our code right so react organize all of its code and these things call components that's what app that Jas is here right so you see this class extends component right so components coming from here this is being imported from react okay so components are basically a way so just like organize your code so that they're reusable so that they're compartmentalised right it organizes the code you can have a bunch of different files here and this would be like you know different components that you could import like this and include inside of here okay any game you'd see that right react is a component based library this is what a react component looks like in a very simple expression compared to what we just saw in our other project right and react gives you a couple other cool things like it's state object which we're going to use in this tutorial right so what is state well state basically tells your browser it's harder to define the word state without using the word state so let me just show you here in this to-do app right so over here in this to-do list we can see item 1 all right add item 2 all right so in this case like if i refresh the page like item 1 item 2 would go away right and that's because this to-do list has a state well the state represents like what items are on the to-do list right and if this was a more advanced to-do list it would have check boxes and you would know which items were completed and which items weren't completed all of that would be the responsibility of the state to know that information right and react gives us the state object right here right it says items this is you know the items that are on this to-do list and this is the text for the to-do list right so react has a lot of cool features that allows us to work with this state object as we're going to see in this tutorial okay and react also has you know some lifecycle methods and stuff like that there's a lot a lot of cool stuff we give her free out-of-the-box react but that's a high level overview of what it is if you've not used react before don't be scared we're gonna you know get our feet wet with it in a pretty beginner friendly way in this tutorial okay all right so now let's go ahead and start actually you know changing the code and making this work okay so what I'm gonna do I'm gonna do this a little differently I'm gonna actually work on the front end part of this application and then work on the back end after we've gotten some of the basic front-end functionality done and there's a couple reasons I want to try that I want to show you kind of how ipfs works first and get some visual feedback and then we're gonna work on the blockchain side of things second okay and then we'll kind of glue it all together at the end so that's where we're headed I'm gonna edit this to get the front end working to actually integrate ipfs and on the back end we're gonna use the blockchain and then we'll put it all together kind of in part three okay so let's go ahead and get ipfs working the first thing we'll do is take out you know some of this we don't necessarily need this link anymore see here take this out and whoops I think I took got too much code here and let's refresh the page yep all right so essentially what we want to do is change this image and we want to create a form here that uploads a new image puts it on ipfs and then whenever it's on ipfs we want to show the image here right it's gonna replace this logo alright that'll be our meme of the day whenever users see this page they'll see the new meme here okay so let's go ahead and create that form we'll do like this I'm just going to create a form object here let's see here right below yes it's a form all right and I'm just going to do like this as a input type file all right then on and that'll just do that I'll do another input input type submit all right go to refresh the page and see if anything changed all right perfect okay so what we're gonna do is choose a file and then submit it and whenever it's submitted its gonna go to ipfs and then whenever it's on ipfs it'll show it here okay so now let's go ahead and add some formatting to the code okay we'll add a I'll say h2 let's say change me alright go back here to change meme perfect alright now let's add a little space here you could probably do this with the bootstrap let's let's try this let's say well I'll do like this this is kind of a cheating way to do it this is just an HTML entity for a non-breaking space instead of a paragraph we're just gonna show it just you know oops I spelled that wrong and bsp all right there we go just gonna give it some space between the logo and the title change meme here all right there's a better way to do this with like CSS and bootstrap but I'm just gonna put it here for now okay so now we have our UI laid out this is gonna be the mean whenever it's changed here's change mean we're gonna choose a file we click on submit okay so let's go ahead and actually upload the file so the first thing we want to do is create an event or sorry create created on change handler alright so on change we want to capture the file say this capture file okay and I'ma put space here okay so what's gonna happen is whenever we choose the file we want to upload the image then basically process it so they can be sent by PFS we actually want to convert it to a buffer and I'll explain that here in a minute but essentially whenever this file field uploads a new file we're going to process it right it's a two-step process process the file and whenever it's submitted we'll have a new event handler that puts it on an IPSS so let me explain the event handlers essentially what's going to happen is this says whenever the input changes call this function okay and now I'm going to define this function I haven't defined capture file yeah I'm going to do it up here right so on change this capture file okay so let's go here and say capture file alright create a new function like this oops and inside of here I'll just say event okay so I'm gonna use a JavaScript arrow function here it looks different from this render function and that's because for all for a couple reasons it's the function scope is different and it prevents me from having to do some other binding inside of JavaScript and react I don't get too deep into that but essentially I'm using a arrow function here for a very specific reason okay so also notice this render function inside of react is just the rent is the function that's called whenever you know this thing lays content out on the page and it basically allows you to put all this HTML with JavaScript mixed inside of it onto the page I didn't really explain that before sorry so this is a you know function that has JavaScript and you can basically mix HTML and JavaScript inside of it that's really what react is all about you can see this is JavaScript right here this is JavaScript oh sorry well this part is yeah but this is HTML all right so let's keep working on this capture file so inside of here what we want to do right now is essentially just console.log that the file has been captured so that log file captured and I'm also going to say event prevent default all right explain that really quickly so event is gonna be the call is going to be the argument for this so on change has a callback function essentially and it's going to pass in an event and we want to prove in the default behavior so like on submit or something like that it would go to a new page and you know different elements have different behavior default behavior whenever they're submitted or changed and we're just gonna stop that we want to override that behavior and create our own here alright so that's what I'm doing so what's going to happen now is just verify that this is actually wired up and talking okay so I'll click Choose file all right I'm going to actually choose a meme so I'm gonna hit that hit enter and let's open the console to see if it changed yep all right there you go you can see file captured boom done all right yeah perfect okay so now we want to do is build this function out we want to process the file inside of here say process file for ipfs all right so there's a few things we need to do first you want to fetch the file from the event say event dot target files all right so it actually console.log that out it's actually I'm gonna take this off and show you vent target enough files is what we want so reading event here dot target dot file so let's just console.log BAM choose a file change it alright alright here we go so file list right you can dig into this and see yeah there you go there's it's in turns an object with keys and we can see here's the file information last modified modified date name size image right all this stuff so it's a file object okay and we want the first one or with the key 0 so that's what we do we say event that target have files and we're going to read the key of 0 okay so I'm gonna do that base it here and then that's gonna be our file so it cost file right and the next we want to say constant reader equals new window dot file reader ok so this is something that's included in our project already this is the file reader essentially what this is going to allow us to do is convert this to a buffer alright and a buffer is what we need in order to put this file on ipfs alright so I can show you what that is let's see file buffer alright so you can read this on Mozilla here it says file reader object let's web applications asynchronously read the contents of files or raw data buffers stored in the computer using file or blob objects to specify the file or data to read alright so you can read more about that if you want to but that's essentially what we're doing right here alright so we're gonna take the file reader like this and we're going to say reader read as ray buffer and then pass in the file okay I'm gonna sit here and then now we'll say a reader on load end all right and then we're going to is there a function and say console log buffer and then say this state buffer all right so let's just go ahead and take a look at that all right so choose a file go here open a screenshot click enter all right so we got an issue here can I read property buffer of undefined all right so sorry guys and I haven't decided to the state just yet let's do this my bad will say we actually had to convert it to a buffer so we'll do this as a buffer a reader that results all right try that again open the file alright there you go so this is what the this is what it looks like this is the data that we're actually going to send ipfs okay so we've done the job we need to do here we've converted this to the format that we want and then now we need to actually use this converted format we've processed the file essentially and we want to put it on ipfs so it's a two-step process like I said whenever you upload the file we process it and then we submit the form like this ok so in order for these two things to talk to one another you know the submit button has to know about the file ok so this is where reacts state object is going to come into play we're going to take this content right here this is the result that we want and we want to put it in reacts state object ok so we'll say this dot state I'm sorry this set state and we'll say buffer alright and put it in like this boom done all right so I'll illustrate that to go back to react I'm going to open the react documentation here reaction org and you'll see you know the state object boom right here this set state all right and you pass them whatever you want and we can also configure the state inside of fear like this yeah inside the constructor so the constructor props we can actually just copy that go inside if you're in create a constructor for ourselves put at the top super props and we can add a default state like this I'm going to take out some of this and say buffer buffer I'm gonna say no all right and I'm actually going to break this up into multiple lines because we're gonna add more things here later but that's why I'm gonna do say buffer is null initially but we're gonna set buffer here we save this set state and passing the buffer that we configured right here okay and this is going to allow us to read the buffer whenever we submit the form all right all right so we have on the input change capture the file and we've essentially processed it okay so now we want to do is actually submit the form and whenever we submit the form gonna put on ipfs so we'll go to our form and we'll say see you're on submit actually don't do it here let's do it on the forum itself say on submit I see this on submit all right so we said this capture file and this dot on submit so instead of cap right below capture file say on submit and we'll do a new function just like we did here event okay so same sort of deals they event.preventdefault and then we'll say console.log submitting the form all right so now let's try that choose a file click a file submit all right submitting the form and let's go ahead and start putting it on ipfs all right so in order to connect the project to ipfs we viewed a couple different ways so just a quick recap of how ipfs works you know it's a distributed file system right so it works kind of like a blockchain in the sense that it has a bunch of different computers that all hold copies of the files right so we could essentially be one of those computers or we could just connect to one right so ipfs it uses no it's a lot like a blockchain lot like aetherium so similarly like we could connect to ipfs by running our own node or we could just connect to one for free all right so I don't want to go through like setting up your own IP FS node in this tutorial because it's really easy to get hung up on something like that I've got some other tutorials on my channel about that if you want to find those I'm gonna go ahead and connect to one for free with the service called in fear up okay so I'm fira essentially is like a blockchain as a service platform we're not really blotching to the surface we're like a blockchain node as a service and also ipfs as well okay so you can use in fear to connect aetherium or IPSS so it's really easy to get started with ipfs you don't even have to create an account you can just use the public and fira ipfs gateway and that's exactly what we're gonna do basically we're just gonna get a link to an existing IP FS gateway and node for free without having to register and we just paste in our project and it's going to work okay so in order to connect to that we need to install an IP FS package okay so the package we're going to use is the ipfs httpclient alright so here is an example this is the NPM registry page yeah so this is the package we want so he's an NPM install ipfs - HCP client we're just gonna copy this exactly from the project ok so we'll go to our code and say NPM install - - save ipfs HTTP - client and what's this install and I'm gonna go ahead and kill the server because I want to restart that whenever we install new package JSON files all right or anything that goes in our no models directory okay and we'll check the status of this all right there we go it's all done so I'll go ahead and reach out the server MPM run start and we can go to our code and check our package.json file and see that indeed ipfs HTTP HTTP client was added to our package that JSON file okay all right so let's go back to our code or sorry our app make sure things working I'll refresh the page sorry I'll see it's going to ask me to run this under different ports say yes all right so we're all good so let's go ahead and wire up our ipfs connection inside our apt J's file I'm going to import that new library like this okay we're just going to use the instructions that are inside of this documentation okay so let's just do this i PFS client equals require ipfs HTTP client go to the project like this ok paste that in I'm gonna say Const all right and we could clean this up guys just the heads up for the sake of this tutorial I'm just gonna do everything like long form inside this one file you could certainly optimize this like inside my blotch and developer boot camp we have you know a whole bunch of react components and I teach you to build a full stack app with best practices and all that kind of stuff a lot more depth but for now I'm just going to do it this way it's a Const ipfs client it's a Const so that's gonna import the package but let's actually create the connection okay so this is saying connect to host like this alright paste that ends it Const all right so this would be if you're going to run ipfs locally with your own node right you connect a local host port 5001 you'd use HTTP okay so we don't want to do that right we want to connect to in fira that's what i was talking about a minute ago which is gonna give us an IP FS know and a gateway for free okay so I'll do that like this you'll say we're gonna instead of adding arguments here we're going to use a long way and say host alright let's specify the host like this will say port 5000 1 Emily's protocol will be HTTP all right not HTTP okay so I'm just going to kill that and we can actually see that in the documentation here this was with arguments this is with you know options right so that's that's what we're going to do okay so we're using options here so host instead of localhost is going to be the in fira host will say ipfs and fira io okay that's the free and fira way to connect to ipfs and this is a really easy way to get started you have to create an account you know have to create an app or anything you can just get started like this good so now let's actually connect to ipfs and put a file on it right whenever we submit the form so just to recap we've chosen the file we've processed it we wants a minute put on ipfs we have a connection to ipfs and now we want to actually put this captured file on the file system so we've got a submit handler now we want to use ipfs and we want to add a file so we have access to ipfs here ipfs and then how do we do that well let's look at the documentation we can see see here how to use it scroll down okay so regular files ipfs dot add okay passing the data options and then it accepts a callback function all right so that's exactly we're gonna do we can use the add function say add and then we'll pass in the data and then we'll pass in a callback function that will run and we'll do stuff inside of your hoops sorry all right and so do stuff here all right so what is the data that we want to put on there well we want to we want to get the processed file right so whenever we process the file we set it to the state object right this set state and we said buffer right so that's what's going on this is the react state object and we want to read this buffer value and that's the data that we're gonna put on ipfs okay so we'll say this state death buffer all right and then the callback function is going to have an error oops sorry the combat function is going to have two arguments the first one's going to be error the second one is going to be results all right and let's just check this worked will say console.log ipfs results all right and we'll also say like if there was an error let's you know let's just tell the cell the console so if error console error oops sorry passing the air animal return all right so let's see works go to the app refresh the page so I just kind of slow not really sure what's going on here yeah all right choose the file select our first meme and click Submit all right so submitting a form we see that now give you a heads up sometimes the ipfs gateway is a little finicky so if it doesn't work for you the first time you might you need to retry this but it looks like it actually did work for me the first time awesome boom there we go so I can see the file was submitted here all right here's the hash and we can assess all that this is all the data we need to access the file if I PFS this is basically the ID of the file all right so I'm going to copy that I'm just going to go back to our project and just paste us an example and paste that in okay awesome so I know there doesn't look like much but that's what we can use to pull our file off of ipfs we know it's on there because that's what was successful all right so we're gonna do stuff here later and then I don't want to I don't like distract us too much but essentially step two is store file on blockchain which we'll get to here momentarily all right so let me show you how to read this file off IPSS it's pretty easy essentially we're gonna do is create a URL and this is going to be the ID of the file okay so we can do like this so say you say sample hash and I'll say example URL will be HTTP s : 4/4 / ipfs . in fira Daioh /i PFS alright we use the inferior gateway just like we did here i PF s time figured i io 4 / ipfs /a sh oops sorry ford slash this alright and that is exactly how we can find the file i'll just show you an example let's pull our browser back here copy this put in our browser paste us in boom there you go there's our meme from my PFS ceiling cat is watching you work from home so that's our first meme of the day that we're actually going to display inside of our app okay so now we're gonna use this URL and put it inside of the app right so we're gonna replace this image with that alright so let's just copy this URL for now and I'll just hard code it into this image so image source instead of instead of the logo let's just put that file in there like this all right boom there's our meme of the day ceiling cat it's watching you work from home it's very disappointed in you if you do bad things when you're supposed to be working it all right so that's awesome now we want to do is make this dynamic instead of just hard coding this and showing this image every time we want to show you know the image we actually upload it and we can use react state object for that too alright so inside of here instead of after buffer will say meme hash alright and we'll just use an empty you know a string here and we'll visit the meme hash here so say we could say this dot state dot meme hash state meme hash okay and now refresh the page and it's gonna disappear it's gonna show us a broken image right which we expect because there's no meme hash yet alright so I'm going to take this away all right refresh the page we shouldn't see any alt of logo at least all right cool broken image still that's fine we're gonna take logo away so we don't need it anymore all right all right boom so it's not find the image on your figure that's fine that's what we expect but for now we're just gonna set a default value a default meme essentially I'll have this oops well we can paste this in but take this back right or you could just copy the hash from here or if you pasted it somewhere yeah whatever you want to do so there's a default meme hash all right so that's the default me with the day and we can change it like this so let's actually try to do it dynamically so there's our there's our default meme yeah let's just see alright so now let's try to change this image right let's let's post a new file the ipfs and then change this inside of our app okay so how do we do that well we need to add a new file ipfs and we want to show the result and then we want to update the state of the meme hash right to include that result okay so let's choose a new file I'm going to choose a different meme this time I'll just promise you it's different enter all right so there it is let's click Submit all right submitting a form it's putting it on ipfs let's hope it actually works all right there we go i PF s results so the result is an array here all right I mean expect just one item to come back so essentially we're going to do is take the first object in this array and we're going to take the hash and we're gonna save that to the react state okay so result is an array so we can say Const results or we'll say meme hash equals results so results is an array we can read the first item in the array like this with zero because arrays are zero index so zero is the first item all right and then let's say this that set state sorry named hash equals me mash or in JavaScript es6 syntax we can do this shorthand like this instead of saying meme hash : meme hash we could just do it all like this all right so whenever I set the state it should update it and reaction automatically show a new meme on the page that's how rack state works so anytime the state changes it's going to re render the page and show us a new a new meme okay so let's try it let's change it let's put a new file ipfs process submit the form it's submitting the form and let's see if we get something new hopefully it'll post to ipfs correctly if it doesn't we'll just try it again all right so looks like we got an issue here it worked but I didn't actually do the meme hash correctly okay so meme hash equals results hmm actually I get the hash sorry guys so I just returned the object we actually want to get the nested key so let's try it again choose file screenshots do different one submit to work all right there we go there's our new meme and of the day so we can see this is uh you know let's just close this and enjoy our meme for a second this is me and people walking slow this is a this is a blimp of Yoda from Star Wars who's very disappointed at this grain silo yeah and this is a representation of me with people who are walking slow right in front of me guys we can change the meme still it's just sorry get a little crazy here is it awesome perfect okay so it is working but if we refresh the page we notice womp womp it goes back to our default meme all right so that's what we're gonna use the blockchain for we're actually going to store the meme hash inside of a smart contract on the blockchain permanently that's gonna be our back end okay and that way any time we load this app it's gonna have the latest meme of the day not just what was stored inside of the react state object alright so explain that more so this react state object is really just in charge of keeping the client-side state or the front-end state okay and we actually have to keep track of the backend state on the blockchain because any time someone visits this we want to read the data from the blockchain and put it inside of this app okay so here the only person that's going to know about this is us because we've got the you know code here and that's only going to show whenever we load the page for the first time okay so let's go ahead and do that alright we're going to just save this and we'll start work on the blockchain part all right now let's go ahead and work on the blockchain part okay so we want to essentially store this meme hash instead of a smart contract all right so we're gonna create a new smart contract to do that right so we're gonna do that inside this contracts directory okay you can see this migrations that soul file already here okay so what we're gonna do is create a new file here I'm gonna say new file so I'm using shortcuts and sublime text to do this new file relative to current view okay that's this same directory as this migrations contract okay and I'll say meme Sol all right so meme capital M Sol so we can see the new file created here meme dot soul so essentially Sol is the suffix for the files that contain solidity that's the programming language used to write etherium smart contracts and you know you use the convention of capitalizing those so this smart contract that already came with truffle is essentially just the smart contract that's responsible for putting new smart contracts on the blockchain I'll talk about that more in a minute but we can create a new a new smart contract like this first we declare the version of the solidity programming language you wouldn't want to use right that's what this is so we say pragma solidity sorry I should like this pragma solidity and let's see what version we want to use let's um hmm let's use the version that comes with truffle currently alright so okay cool so let's use version 0.5 dot zeroes say for some solidity 0.5 dot 0 okay all right so now we can actually create the smart contract inside of here or say contract this is how we declare smart contracts give it a name meme this is maybe the same name is the file then we use some open and curly braces like this and then the smart contract code goes here alright so let's go ahead and try to compile this to make sure worked make sure we declared this properly and the contract is a name that our project recognizes etcetera etc we'll go to the terminal and we'll say truffle compile that's gonna basically just turn our smart contract source code that we write into byte code that can be run on an etherium node and actually stored on the blockchain okay all right so it worked no issues there now we want to do is actually write the code for storing the mean hash so all this contract needs to do is act as a storage for us okay basically it just needs to know how to take the hash that came from ipfs and put it on the blockchain so that's a write function okay and then it needs a read function to actually get the hash back off the blockchain and deliver it to our client side applications so we can see that meme every time all right so it's just got two functions read and write write or we'll call it set and get all right so a read function and a write function and we're actually knew the write function first all right so what we want to do is create a way to store that on the blockchain so the first thing we'll create is a state variable alright so a state variable is a variable for the smart contract that's going to correspond to storage rights what does that mean anytime you update the value of the variable it's gonna get written to the blockchain all right so we can create a state variable like this a string name right or instead of name we'll say it's a variable name essentially that I just a dummy variable name right so solidity is a statically typed language and we need to use the data type of the variable before when we declare it so it's always gonna be a string so tell it string and then here's the variable name so in this case it's gonna be the meme hash stored in the blockchain so say meme hash alright so this state variable kind of works like a class variable in an object-oriented context where this belongs to the entire smart contract not just locally to a function or something like that okay so let's create a function to actually update this right and like I said this value is stored on the blockchain sort of like a database the blockchain is gonna be a database for us and this is going to be essentially an attribute for this meme contract that we're going to update so say function set oops sorry and then as the functions go like this that's the basic building block of the function there's skeleton I should say and we need to add some more add some more code here say string and this would be the meme hash alright so this is gonna have one argument that's gonna be a string and to be the meme hash and then we're going to take this local it's going to come in as a local variable we're gonna take the local variable and assign it to this state variable right here and write it to the blockchain okay we simply do that like this we say meme hash right this state variable meme hash right we're going to sign it is equal to this local variable meme hash so meme hash alright so there's nothing magic about using an underscore here in solidity it's just a convention that tells you that this is a local variable and not a state variable now you could technically have an underscore here work just fine but I just do this so that we don't have naming conflicts and you know that hey this is a local variable this is a state variable we're taking this argument which is a local variable in the function and we are assigning to the state variable okay so that's the basic way we do this we need a couple more things in order for this function to work right now we can only call this smug function inside the smart contract okay we want to we want somebody else outside of the smart contract to be able to use it so we'll say public all right that makes this function accessible outside the smart contract so it could be called by somebody you know who had access to it on the blockchain okay and then also because of the new version of solidity 0 to find out 0 we need to use memory here alright it's a string memory meme hash alright is this alright perfect so here's our write function and then let's go ahead and compile this make sure everything's working truffle compile and if it compiles correctly we will go ahead and move on to the read function but I just wanna make sure we didn't make any errors in the code before you guys see that all right it worked so let's create the right function as well our sorry the read function like this a function say get all right this doesn't need any arguments and essentially what we owe this function would do sorry all this function would do would be get the value of meme hash here you just say return meme hash alright pretty simple but we need a few other things we need to do public just like this oh I should mention this is called the visibility right public visibility so public and we also need to tell solidity that this is a view alright so this is a modifier and then also returns whenever the return value of this function is in this case it is a string we also need to tell it that's memory just like this because of this new version of solidity 0.5 dot 0 all right so yeah that's it and we return the mean hash that's all you need to do this is our entire smart contract let's make sure it compiled before I hit before I speak too soon right but if that works this is all you need to do it's pretty simple just to write function and a read function and this compiles we're gonna do next is actually put it on our local blockchain and show you how it works inside the console I want to test and then we'll hook it up to our client-side application to work as our backend storage for a meme so why everything together alright it worked so now let's put this smart contract on the blockchain and work with it okay so what I need to do is first open ganache alright this is your personal blockchain start it you can create a new project or create a workspace I recommend just doing the quick start and then you should see your blockchain running just like this you can see your mnemonic at top I can see your address here's you know the here's 10 accounts that you got for free they all have ether in them and this is just fake ether it's not worth anything on the real theory of network so don't go crazy but yeah our blockchain running and we're already connected to this blockchain insider truffle project because I have a trifle - config file here that has this already set up right so you can just go to local host port 75 45 thats here oh yeah right here local hosts one 2700 175 45 and there you go we've already got a development Network configure right here on our networks tab so our troubled project started talking to ganache and what we want to do is add a way to put this smart contract on the blockchain so remember I showed you this migrations file earlier well this is the smart contact is responsible for doing that we need to tell our truffle project that we want to put this meme contract on the blockchain so if you go to this migrations directory up here alright so initial migrations we're gonna create a new file here that tells truffle to put the meme smart contract on the blockchain okay so I'll copy this a new file will say number to deploy contracts oops sorry J ass not J and I'm just gonna copy the code that was inside of your M patient like this sorry update the syntax alright so it's important that you use number two in your file name here for truffle because it needs to know the order to run the migrations in so the first migration starts with one the second one starts with 2 etc etc etc alright so we're gonna change migrations here just to meme all right so essentially what's going on is we're creating a new variable here called meme and shuffle uses this idea of artifacts to represent the smart contracts for the truffle project and it's just gonna find the meme that we've created here and it's going to deploy it to the blockchain all right so I'll show you where this artifact lives whenever we ran truffle compile it created a new file here such as a B eyes directory okay so API stands for abstract binary interface and this could probably be named better because this file isn't necessarily an ABI it contains an ABI but this is sort of this this artifact that truffles referring to okay and it's gonna take this file it's going to know that we're talking about our local network with our truffle - config file and it's going to use this to put on the blockchain so a migration in this case is just moving the smart contract from one place to another or migrating the state of the blockchain because what happens we update the state right so we can run our migration like this say truffle migrate to enter alright it was successfully deployed to the blockchain so now we can connect to the blockchain and just try it out okay so let's open the truffle console like this so say truffle console hit enter and what this is gonna do is give us access to a JavaScript runtime environment where we can talk to the smart contracts with JavaScript and run commands and you know cost functions read information about it examine the behavior anything you do in a normal console you can do that with the truffle console as well with no js' okay so I'm gonna say I'm gonna get a copy of the smart contract this meme contract like this say Const meme all right equals wait meme dot deployed all right hey Anna it's a meme oops aren't mean alright perfect so let me explain that explain this code so meme the same cost meme is just declaring the variable and we're gonna sign it whenever we declare it and we say oh wait meme got deployed so meme dot deployed is the function called on this smart contract meme and deploy just gets the deployed instance of it right so whatever this got put on the blockchain like it had an address it has a state it has all kinds of information and we need to fetch that out from the deployed instance of the smart contract and assign it to a variable all right that's what we do so this is the main variable whenever you open the truffle console it knows about it we call the deployed function to go find it on the blockchain find out on the blockchain bring it back to us and assign it to a variable but if we just did this cost meme equals meme deployed it wouldn't work all right I can even do it well that's not why it caused meme - all right so if I do meme too Milas tration is failing here I'm not a hundred percent sure why but explain why did this we use this keyword a weight to say basically wait for this result to come back and that's because the deployed function here is an asynchronous function call right it doesn't just return the data back right we wait for the data to come back and if we want to do that we have to use this weight keyword right you can read more about this in JavaScript if you want to I'll say here a sink wait all right so see your JavaScript info you can read about this essentially it's it's a way to it's a strategy for handling the eventual result of an asynchronous function call you could use stuff like promises and JavaScript and chain them and use callbacks all that kind of stuff but async essentially allows you to do it this way let the weight promise okay all right cool three more up on that if you want to I'm going back to console and say meme and then let's say get it cost me - it's not use cost let's just say me mesh let right and it's empty right it's an empty string and also also notice if you see this is undefined right that's because it just logs undefined out at the console so sometimes people email me and say hey you're territorial doesn't work because I did you know a weight or something like that or I can even do a weight here let's just do sorry okay so they'll say I get undefined here even when I use async/await well that's because the console just logs undefined to the console you actually add to call meme hash to get the value back okay so it's empty we expected to be empty because when we deployed it to the blockchain we didn't assign it yet so let's call the get function and that will allow us to update it so we'll say results goes meme set up the hash to ABC one two three all right boom there we go so the result is a transaction receipt guys see this more in a minute when we run a test essentially this is the receipt that comes back from the blockchain right we can go to ganache and see that all this worked we can go to like the logs and the events Oh doesn't see oh it's because we don't have a connected to a smart contract yet but essentially if you go look at the laws you'll see that transaction go through okay but now we can actually read the value back so we'll say result equals our meme hash equals a weight mean get alright let's a meme hash boom there we go ABC one two three awesome and this is actually going to be our meme hash from ipfs okay so that's we're gonna use this form alright so we've got this on the blockchain while we're here let's go ahead and run a test for this all right it's really important to test your smart contracts whenever you're writing for the blockchain because they can't change and you want to make sure that everything works properly because you can't push your code again once it's actually on the blockchain so I'm gonna create a new directory here draw a tests clear out some of these files I'll say new file oops sorry Prada Schrute create a new dress called tests will call this meme test at jeaious alright so test file test directory mean test is all right so truffle comes the test framework pretty much for free out of the box that's going to include the mocha testing framework and the chai assertion library so I'll show you the examples of that so I am pulling up the pulling up examples off-screen here all right so mocha is a testing framework mocha testing all right so mocha Dodge is all right yep and then chai assertion library and these are the two pieces of information we're going to use or sorry - the two libraries we're gonna use to write tests for the smart contract okay so we've created this new file like this the first thing we want to do is import it the smart contract for testing right just like we did in the migrations directory where is it it's alright migrations what contracts souls like cost me I'm just gonna copy this line going to test file constant meme equal artifacts that require meme okay um actually yeah I think that'll work we're gonna find out so next we're going to actually import the Chie library like this they require a chai all right and then let's import some other helpers that we already have here a package.json file we see chai as promised so I'm going to copy this this is going to help us write some tests say use require chai as promised and then we'll say should all right so essentially chai is very configurable and I'm gonna step I'm gonna use this configuration to write some neater of tests inside this directory so now let's say we can write the test for the smart contract like this wheeze the contract keyword alright then we type in the name meme alright that's this name here and we're gonna pass in the callback function accounts and we'll write all the tests here all right so here's the contract name the callback function includes the accounts that are provided by ganache so we'll have access to all of these inside here right boom boom boom all right so now first I'll declare a variable say let mean all right I'll say I'll say contract well since I mean that works say name is the contract will keep things less confusing all right so inside of here I'll say describe plummet so async all right and sign up here we want to do is essentially make sure the contract was deployed correctly and that this test works say Const address equals well it's actually fetch the address not sure how to do it in in the in the console really quickly so say meme hash or start meme dot address right whenever you never you fetched it we've essentially can log the address from the blockchain and we're gonna check for this inside of our test okay so let's do exactly what we did in the console let's just fetch a copy of the meme contract and then show the address and if it has an address then we know that it deployed successfully okay so let's just do that and say meme which we said let here let me equals a wait meme dot deployed it's exactly what we just did in the console right and then we can say meme to address and we'll just console.log the address for now we're not gonna be assertions let's just log the console and see if it worked so I open a new tab here we got a few tabs going we've got our terminal we're going with a test and we've got our console we've got our server running here ok we can check our test like this we can run it with the truffle test command say truffle test all right and we didn't create any assertions just yet but we're gonna log this value out of the console just to make sure we wired this up correctly and that the address came back okay all right sorry guys I made a mistake so it says 0 passing that's because we don't actually have any tests written I forgot to put this inside of an example so that's my fault I'll feel like this it deploys sometimes it's hard to talk and code at the same time and like keep your train of thought all right so we sync all right let's try that again let's do that truffle tests I don't see the passes and while it's doing that I'll explain this a little more so the describe function here essentially just gives us a way to organize these test examples you'll see it logged out to the terminal here in a minute all right but essentially like you'll say describe meme deployment and deploy successfully but these you know use these arrow functions with async/await pattern and we need these async keywords so that we can call a weight inside of here and use the await keywords so if I took this async off like this await wouldn't work and I could demonstrate that but I would just take my word for it so there we go awesome perfect so now we see we have one test you can see it's a contract meme that's we could here contract meme deployment right describe deployment and then it deploys successfully check box and here's the address right so that's exactly that worked so let's create a test for this now we don't always know what the address is gonna be cuz it's gonna change every time you put it on the blockchain so let's just make sure that it's not empty that's the best test that we can write so we'll say assert not equal all right so recent chai for this will say address all right that should we got back we want to make sure it's just not blank it's not an empty string okay so explain that like on mocha you've got that's what sort of chai chai is chai as an assertion library see a search right assert type of foo is string assert equal foo and bar so we're using assert not equal the address of the smart contract empty string all right so we're going to do that a couple more times and we're also going to say it's not no it's not undefined and we're also gonna say it's not a empty address all right this is our test and were gonna write to make sure that it actually got deployed this mark on track sorry deployed the blockchain that the address is correct that's how we know so we'll say trouble test wait for this to pass alright it worked so now what we want to do is actually write some tests for these other functions that like see your source contracts mean that soul we want to make sure they're like the set function works and that the get function works okay so let's just say describe bribe storage a sink let's say it's you know updates or SSA updates the meme ash say sink all right so I may get myself some space so we can see this better all right so what we can do is use this meme dot deployed just like this name equals a weight meme not deployed to get it and then write the test example in here but you'll notice that we'd be doing this twice right we don't necessarily want to have this duplication between these test examples so mocha will allow us to use something called a before or before filter depending on how you say it before it's just a function and we can say inside of here we want to essentially call this and it's going to run it before each test example alright so we can fetch a copy the smart contract and you know tests from meme inside of here on each one and avoid this duplication this redundancy okay so I can say meme equals a weight meme oops sorry got deployed all right and then that way I can take this out and then I'll have access to it here as well and I'll say async so that we can use the await keyword inside of this all right so let's just the test make sure still works after we've refactored it all right it worked so now let's actually test that it updates a storage so first let's you know right to the blockchain and then we will read ok so let's do this we'll say costs well write a test for that like this first we want to do is actually you know store it on the blockchain well we'll call this set function and then we will call the get function to make sure that you know it's the same thing that we set it as okay so that will make sure that the set function works and that the read function works for getting that information back off the blockchain okay so would you like this set Const what else you let me mash all right and I'll say meme hash equals ABC one two three that's just like we did in the console right and we'll say L wait meme that's a smart contract name say set meme hash okay so that's gonna actually call you know this function right put this me mash in there and if this works this test is going to continue execution and if it doesn't work it's gonna blow up here and now what we can do is read it off the blockchain and make sure it's the same as this alright so say Const results equals a wait all right name gets alright so meme hash results these are the two things you want to compare it's pretty simple we just say assert so we said assert not equal here so we can just say assert equal results me fish like that all right boom awesome that's all we need to do store the meme hash abc123 add it to the blockchain fetch it back and make sure that the result is the same thing that we intend it to and that's going to test both functions all in one go all right so I'm gonna kill this dead space and run the test hopefully it'll work this time double tests alright it worked so you've successfully written tests for our smart contracts they're perfectly covered so yeah that's great we finished up the backend portion of our app alright so we've got a front-end that puts the meme on ipfs now we have a back-end that you know is ready to store the image on the blockchain right and so we've done that first part we've put this on ipfs since come back and now after it's come back to my PFS we want to use this storage contract that we just created and put it on the blockchain okay awesome so let's go ahead and do that we're essentially going to need to use this smart contract put in our app and make it work so let's do that all right so now let's connect this front end to our blockchain okay so go back to our app that J's file let me find it a little lost here at that yes all right so inside of here we want to do is actually connect our application to the blockchain all right so the first thing we need to do is import the web 3 library right so web 3 J s essentially is going to be the library that turns our client-side application to a blockchain application all right so I'll pull the documentation for that here isn't swept through JSA here C aetherium JavaScript API so this is going to allow us to connect our application to etherium right and in this case we're running aetherium with ganache ok so inside of here I'm gonna import the web 3 library because we already have it inside this package that JSON file right here let's do this say import I'm sorry will do imports we'll have three from web three okay and that's going to pull in the web three librarian JavaScript now we want to do is actually wire up this client-side application and turn it into a blockchain application okay let's talk about that how that happens okay so essentially what's going to happen is we need to do two things we need to make this application a blockchain based application which we've already known web three and we also want to have the user to connect to the blockchain with our application that's we're gonna use meta mask for all right so you need to have installed meta mask in order to follow along with this alright so what we're gonna do is connect with meta mask to our application talk to web 3 swear to wire up web 3 and we can use meta masks own instructions in order to do that alright so the references blog post that meta mask put out that essentially shows us how to do it I'm not gonna invent the wheel or sorry reinvent the wheel here I'm just gonna do a meta mask tells us to do right so anyways how many zhmed masks instructions to wire up web 3 okay so I'm gonna go here and create a function that actually sets up web 3 and connects to the blockchain inside of this react component alright so I'll call it let's see here a sync load web 3 okay alright inside this function what I'm going to do is do what meta mask tells us to do say if windowed aetherium alright then we're gonna do something else if there is no window to aetherium window dot web 3 all right and then else we're gonna have a fallback okay so essentially meta mask has this idea that aetherium provider okay and then there are some different conventions for that if it's on window dot web three then we're gonna handle a certain way Poisson windowed aetherium we're going to handle it a certain way right so here you use this meta mask of 3m wallet and connect to your app it's going to put either in aetherium object or a web 3 object into your browser and that's what we want to do if it's this we're going to do a certain way for this we're gonna do a certain way if not we'll say window dot alert please use meta mask and we need users to have meta mask installed in order to use this dap in the first place to actually sign the transaction to put the file on the blockchain okay so if windowed aetherium will say window dot web 3 what you're essentially as that we're doing we're overriding it equals new web 3 and we'll pass in window cerium right it's a new web 3 instance that's what we're getting here all right and then we'll say oh wait windowed aetherium label all right and if we just have web 3 by itself will essentially just say window that web 3 equals new web 3 window dot we have three two current provider all right and that's going to essentially whatever is already attached to window dot web 3 that current provider all right and that will be our web 3 connection all right so now we actually to call this function and I'm going to do it on a lifecycle method within react called component will mount so async component will mount all right and inside of here we're going to call a weight this load lab 3 so I'll explain that more essentially a component we'll mount is a life cycle method that comes for free in react ok and what this does is it says you know whenever this component is going to mount to you know reacts virtual Dom then call this function in this case we're going to load web 3 so rack knows about this basically under the hood and we're gonna say we're gonna use this function to call another function here in a minute but essentially that's when we're gonna load web 3 it happens before the render function happens and I believe after the constructor you'd have to go look at the react documentation to know exactly when this pops up you can probably find the list of react lifecycle methods let me just look here react life psych life cycle callbacks but I see if I can find it on Google or estate and life cycle let's look here all right yeah yeah so here's here's examples see your lifecycle next next next adding last like a method to my is that component did male component will unmount it's probably got a whole list of the methods and here somewhere let's just look see there's a whole complete list somewhere alright here we go here's a good blog post this is kind of old so maybe it's a little outdated but this will give you an idea of what they are alright yeah so we'll mount did mount will receive props should update will update render did update will unmount this will tell you the order and the different behavior based on you know what's what you're trying to do so in this case we're using component wheel mount so go check out this blog post if you want to to learn more about react lifecycle methods alright let's go back to our app and see what's going on all right so I got a metamath notification that popped up whatever we enable window died with 3 so this is going to say DAP university starter kit wants to access your app with meta mask so as they connect perfect all right there we go we're connected so make sure you got metamath installed and you're logged in all that kind of stuff in order to connect to web 3 if you don't make sure you follow the meta mask setup steps install the Chrome extension in Google Chrome you got to use Chrome and then you know make sure you got an account all that kind of stuff right so now let's actually load the smart contract so we've successfully connected our front-end application to the blockchain we have a blockchain browser now with meta masks and we have a blockchain app because this you know react app is actually talking to blockchain all right so now we want to do is fetch the smart contract from the blockchain so that we can fetch the value of the meme hash and then actually update it whenever we submit the file to ipfs and then we'll have a fully functioning back-end for this application and every time we refresh the page like this won't go away okay all right so now we want to do is load all the information from the blockchain like the account that we're connected with and also the smart contract for the meme storage so that we can actually you know read the value of the current meme hash and also update it whenever it comes back from IPSS all right so we'll create a function for that so we'll basically like say well get the account say get the network I say get the smart contract then get the me mesh okay so we need to do all this with the blockchain someone got a new function that says async load blockchain data all right inside of here we'll get the account first we'll just say Const web 3 equals window web 3 all right so we know that web 3 was assigned you know here now we can assign it to a local variable I'll get the account like this said Const accounts equals a weight web 3/8 accounts and then actually do this they can get accounts I'll just show you that the documentation all right so it's got a web 3j is say get accounts so web 3 has you know several different namespaces underneath the library so web 3.8 the package that allows you to interact with etherium right and the smart contracts so we can find the get accounts function right so what that does is it gets all the accounts and the current wallet and a lot and it just returns them as an array right so if you have two accounts it's gonna show you each alright so we're using metamath so it's going to give us an array of only one account all right and we can basically get this account and make sure this is working properly log it to the console so let's make sure we have an account in metamath right I currently do but you will need to make sure that you import your account from ganache so go to ganache find an account show the private key no you don't want to do this for a real account because you know this is essentially like your password on the blockchain if anybody knew this information they could steal all your money so I don't show this anybody in the real world but I'm gonna show you the ganache copies that's okay because it's not real alright so now I'm gonna go to met mask I'm gonna import account sit here import account paste the private key and hit import so I've already done this so it's going to say you're trying to import a duplicate so I'll click cancel once you've imported you'll see your new account here and inside meta mask you will want to connect to ganache which is I'm running on port 75 45 says localhost click that alright and now I've got 99 a third here which is the same inside of ganache so that's the first account the list alright so all right let's show this in the console oops go to the console go back to our code and say console log accounts you all right so it didn't run I know why it's because we're not actually calling this low blockchain data function so we need to do it like this wait this load blockchain data save that boom there we go alright so there's our account returned in the console that's the same as we saw in ganache so II for CB e for CB alright so now copy this well actually won't copy it we need to assign it inside of our code salut that like this instead of will keep track of the current account with a state object right so we'll go down here to the constructor I can't find it so just below meme hash like she just do it first we'll do alphabetically say I count we'll just use an empty string here we're gonna set the account in the state so we'll say this set state and we'll say account equals accounts which is an array alright we'll get the first item out of the array like this account 0 perfect boom there we go so we fetch the account Adam Adam asked and put it in the react state object now we need this account because we want to actually sign the transaction whenever we submit this form to store it on the block chance really important we need that account in order to do that which momentarily while we're here will display the account on the page like this let's just do this let's say like I'm gonna scroll down to the nav bar ok and I'm going to after this link let's see you're actually mmm let's do it here in the nav bar sorry after the link let's create a ul an unordered list class name believe this is bootstrap navbar nav and we'll say P X - 3 you know and we'll say L list item oops there we go and inside here I'll say class name equals nav item text no rap D none DSM none and I'll say d sm block okay so these are just display utilities the kind of bootstrap that say when it should be visible when it shouldn't be so now I'll say small and we're actually gonna list out the account here say class name all right so say this dot state count right so see if it worked boom there we go so now we can see the account they were actually connected with that's the same as what we see a meta mask right that's the same as what we see in ganache here on our blockchain perfect alright so now we have the account now the next thing we want to do is actually fetch the smart contract and pull it into our app let me explain what essentially we're gonna find the smart contract but we need to tell it which Network the smart contract is deployed to and basically you know which network were connected to with meta masks in order to find it because we could you know change networks main aetherium network or any of these test networks or this development network and depending on which network we're gonna connect to the smart contract could be in a different place it could have a different address like we saw you know here in our tests right so we need to find the network now aetherium has a way to do that with see here what three eath let's go back and search get net yeah all right here it is perfect so we can say web 3 net so web 3 we saw went through a the minute ago so web 3 net allows you to to interact the theorem nodes and network properties so we can basically just say web 3 net you'll get ID and it's also nested underneath as well so through Ethernet get ID that's what we use so the different aetherium networks have different network IDs and I'll show you what that means here in a minute but it's important that we get it so we'll just say a wait constant we're going to eat was a weight web 3/8 get ID or sorry net get ID say that console.log network ID alright let's go look and see what happens all right so 5777 let me show you why that's important right so whenever we deploy the smart contract we need two different things all right we need the ABI and we need the address all right so whenever we open this file over here this ABI is you know meme JSON we need to find the ABI in the address all right so the ABI is really easy to find it's always gonna be the same whenever the smart contract is finished right we've finished coding it so the ABI won't change that's this array here this basically just describes all the functions on the smart contract shows us the byte code basically just how it works it describes how it works and next we need the address all right so this is West saying a minute ago the address will change depending on which network were connected to inside a meta mask right you'll have a different address here different address here here here here here here alright so how do we find that well we we got the network ID from meta mask with you know web 3 net get ID that's what just log to the console as 5777 but you'll see here in ganache sorry in in truffle this file you'll see this network ski alright 57 77 so we need to drill all the way down here into networks and find this address right here and that's the address of the smart contract deployed to the network with the ID of 5777 so this was deployed the main aetherium Network there would be an additional key here that would say 1 if this was deployed to the Cove on test Network it would be called like 42 right so that's what we'll do let's go to here and get the ABI we'll do that like this actually let's get the let's get the address first let's see here yeah I'll show you okay so I'll just show you step by step now that we have the network ID we can say Kant's network data and we essentially want to get the you know sorry we want to get this information out of here so let's import this file first go to the top of our app that J's file and we'll just uh say import meme from dot api's meme not JSON alright so dot Dutch means we're going upward upper directory so added components into api's we're going to get this meme JSON file here and assigned to this variable okay so now we have this JSON file stored as meme and we're gonna say network data is equal to C here say meme dot networks alright that's what's going on here meme dot networks no yeah I mean but networks then will pass in the network ID network ID alright so we'll say if network data we're gonna you know actually fetch the contract else you know window dot alert smart contract not deployed to detected Network all right so let's check that out okay so no issues here let's change the network and it's going to know that the smart contract isn't deployed so go to the main net and will refresh the page yeah boom smart contract not deployed to the network okay so let's go back to ganache that's working work refresh the page and no error perfect so now we want to fetch the smart contracts inside a few that we have the network data so like I said we need two pieces of information we need the ABI and the address so thankfully we have the network data so we can find the address because we know the network ID and we can just dig it out of here all right that's going to be network data address and with the ABI that's going to be just me maybe I write because it's just right here meme this is the entire file in the API perfect I'll even sign that right here I'll say Const ABI equals mean to ABI I'll say Kant's address equals network data to address all right just so it's really clear here's the ABI here's the address now with the ABI and the address we can create a web 3 representation of this smart contract so they can call the functions and actually fetch you know the mean hash with this get function from the smart contract again so I'll show you how to do that you can go to the web 3 documentation and look for contract also actually for call those nice contract let's see what comes up well three eath contract okay this is how you fetch a copy of the contract this is exactly what I was saying web three eath contract you need to pass an ABI boom and the address we have both these pieces of information and we can do an example just like this right here okay and that's exactly what we're gonna do so I'll go to the app you know create that like this say Const contract equals web three eath contract with a capital C and I'll pass it meme the ABI network data address all right perfect so that's exactly that here I'll go and use the variables just to be clear all right perfect so we can also update that to the state like this oh sorry say no and we'll set state as a contract all right that's the same thing as saying this right but es6 allows us to your shorthand write contract contract now we can say Const meme hash well actually let's not the fencing match yet let's just console.log a contract to make sure it works go back to our terminal here or sorry our console let's see what kind of sins we see what happens when we refresh the page sorry all right there we go there's the contract with Webb 3 so now we're going to be able to actually call the smart contract function the first we're gonna call is the get function okay so we do that like this we go to the documentation I'll show you how it works with Webb 3 let's find the call all right here's what we want so contract call Webb through 8th contract my method call so here's the documentation so this is how it works makeup is highlighting all over the place this is how it works so essentially like you went to the contract so my contract in this case we meme and then we say methods all right then my method and then you just you know put in a new function parameters if they have any and then you say call alright so there are two types of functions when you're talking to the blockchain there's call functions and then there's send functions so call functions just read data that's all you got to do my methods call and it doesn't cost any gas right but send functions or do cost gas and I'll explain that whenever we actually store the file the blockchain but for now we're just gonna fetch it we're just gonna read it that's what call is for okay it doesn't require any gas we do it for free say oh wait contract methods all right and then get all right that's the function your get with no arguments and call all right that's just gonna return the value because we can't just do get by itself won't work we have to say call all right and it's all the methods for the contractor namespace under this methods key say Const meme hash equals await that all right and we also need the await keyword because if we just do that remember all the calls to the blockchain are asynchronous this is just going to return a promise and we'll actually return the values so you could use a promise chain you can use a callback function I'm using the async await pattern like we did in the tests okay all right so now whenever that comes back we'll say this set state lets it mean hash so we can add that to well overwrite this and once we load this data from the blockchain we're gonna see this get updated probably to an empty string or whatever we set it in the console I think we set it to like ABC 1 2 3 or so you know with that we can just check let's see meme hash yeah we're gonna see it set to this ok so this is actually gonna break it won't work but I'll just demonstrate that on the page yeah look so it already refreshed that was our default meme hash we can see the ceiling cat goes away because it fetched back abc123 from the blockchain so I think it's working properly right yeah there we go abc123 awesome that's we want to see so the image is broken that's what we expect but that means that were actually reading the data from the blockchain correctly because abc123 is what's in the console now when I manually update it in the console so that we can you know have well I just leave it for now we'll update it from the client side I don't want to belabor that I'll show you how it works here in a minute ok so let's that's all we need to do for this perfect so we've we've set everything that we need to inside this function so I'm gonna clear out all this code alright we're getting so close to being finished here guys the last thing we need to do is just store the meme hash on the blockchain whenever it comes back from ipfs all right so you've processed the file for ipfs I'll submit we put it on ipfs and if we get done we just need to put the file on the blockchain right here so let's see here there's a couple things we need to do well actually only one thing we need to do we need to just call this set function and pass in the main hash it's pretty easy so I'll show you how that works go back to the web 3 documentation I'll show you how you know my method send works so my method call is just reading data from the blockchain it's free alright it's very simple you just do that just like we did my method send works differently okay you actually have to tell it the account that you're sending it from because that account has to sign the transaction and pay a fee in order to install sorry in order to save the meme hash to the blockchain right that's because reads from the blockchain of free rights cost gas okay the gas is going to be expressed in ether the etherium native sorry if your games native crypto currency in a very small amount ok so do you like this so contract methods just like they did the call my method you pass in the parameter to the function and you say send instead of call and we're gonna pass in some options which you'll see in a minute so here's an example my methods send right you need to tell the account that you're sending it from and that's their real only the the only data that we're going to pass in and we have access to that already inside of our application and I'm not going to use the async/await pattern here I'm going to use a callback function or starting a promise chain it's a then function receipt and then whenever the receipt comes back I'm gonna get the actual hash and I'm going to set the state that way okay Sears will do will say this state contract all right since we're doing we're fetching contract from the state got it inside of here could be sitting here methods set all right and then meme hash react paste it in and then send here's we want to tell it the account so they say from this state account right that's that's stored in here right that's the account that we're connected with right here all right just state that account pass that in and then we use this promise chain then a cor and then once that's done I don't want to update the state just yet I don't want to do it here I want to do it whenever it's actually successfully saved on the blockchain so I'll do it inside of here all right perfect all right so I think it's gonna work let's let's give it a try so it's got a two-step process we have to choose the file change it let's change it to run Isay Yoda image and then we'll upload to ipfs and whenever it's uploaded from ipfs it will get written to the blockchain and we'll see a meta mask confirmation pop-up if everything works correctly and will sign the transaction let's click Submit so submitting the form it's putting it on ipfs or just coming back for my PFS we should see I made a mess pop-up so I'll just wait for that hopefully it will submit to ipfs correctly the first time without any timeouts or anything like that all right so it actually posted ipfs we can see the IP FS result here and I had a meta mask confirmation pop-up all right so here's our minim s confirmation I need to confirm this and just sign it with the account right click confirm and there we go I got a confirmation so let's refresh the page and hopefully we'll see our yoda meme here all right it's the moment of truth refresh awesome boom it worked yes that's great all right guys so we have successfully created a blockchain application with ipfs right we've got our meme of the day that we can change put it on the blockchain and we can show it with ipfs let's add you centralized application with the centralized file storage congratulations he's in a lot of hard work to get at this point ok so let's do a little bit cleaning up really quickly let's go back to here I'm just gonna take this out I'm going to take this out because I want to you know commit this code so you guys can see it whenever I post the tutorial on YouTube all right so refresh the page all right boom there we go awesome boom done perfect all right guys that's like a complete app we've created a smart contract you've written tests you've created a react app you know you put the blockchain you run a blockchain you've worked web three you've done all kinds of stuff with a BFS congratulations on completing this tutorial all right so again if you liked this video be sure to subscribe the channel click like button down below got some source code and if you want to take it a step further and you know jump in my blotching developer bootcamp and be able to build like a real-world project with me you know you can sign up for that here at Dappy diversity com4 slash bootcamp take you through a free training and give you an opportunity to join my bootcamp all right build a real-world project inside there crypto currency exchange all right so we use the same skills that I've taught you in this tutorial we take it to the next level all right really next-level stuff compared to this which is a little bit more beginner level all right so I'm gonna hope you like this video and until next time thanks for watching DAP University

Channel: Dapp University

Views: 37,215

Rating: 4.9695044 out of 5

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

Id: pTZVoqBUjvI

Length: 120min 1sec (7201 seconds)

Published: Wed Sep 04 2019