Build a Decentralized Application (DApp) with Web3

[00:00:00]hey everybody this is Gregory from DAP university and today I wanted to show you how you can get started building your first decentralized application in 20 minutes so the goal here is to give you the tools that you need to get started building a decentralized application or DAP quickly so what I'll do is give you all of the individual components that you need to get started and we'll go from there so you might have seen my other tutorial where I show you how to build a full decentralized application step by step with a with a framework like truffle so in this tutorial I'm not going to use a framework and there are a few reasons for that reason number one is that whenever you use a framework sometimes there are a lot of things that you take for granted that are just happening with your framework that you give for free and you don't necessarily understand you know how this works so today we're gonna strip away the framework and you'll be able to see how each of the pieces in your DAP kind of works on its own now the other goal of you know not using a framework is to get you started faster you know we use a framework you have to download a lot of stuff and do a lot of things to be at the command line and sometimes that gets people a little hung up so if you want to get if you want to remove that barrier to entry we will do that with today's tutorial as well so like I said if you haven't seen my tutorial where I take you through you know step by step and building your first decentralized application be sure to check that out because the end of this video I'm gonna show you how you really do want to use a framework for building gaps it makes things a lot nicer in the long run but this will give you something to get started and be sure to subscribe to the channel if you'd like to see more videos on how to build your first decentralized application on the theory of network all right what are the basic things that we need in order to build our DAP quickly well from a code perspective we need a smart contract and we need a client-side application that will talk to the smart contract on the blockchain so for the smart contract we will develop this in remem which is a browser-based IDE that allows us to you know write our smart contract and compile it and run it we also need a blockchain due to blur smart contract too and for local development purposes we will use ganache put out by the creators of truffle the framework that I use in my other tutorial and ganache is basically you know an in-memory blockchain it's like a one-click blockchain so this is the only thing that you'll need to download locally you can download this and install it and once you open it it's pretty pretty straightforward pretty simple it'll just start running and you'll have ten accounts connected to your blockchain for free now the next thing that we need there are two other things we need a library that allows our client side application to talk to our smart contract in the blockchain and that's what web 3 j/s is this is the web 3 library which is what we'll use to connect our smart contract to our front end application the last thing we need is a browser extension that converts our modern web browser into a blockchain browser because most web browsers don't support this out of the box for free we will use meta mask which is a Chrome extension that will allow your browser to talk to the blockchain it's pretty simple to install you just add it to your chrome just add it to your chrome extensions and set it up if you need help setting this up I walk you through setting up meta masks and a couple of these other libraries step by step and my other tutorial where I walk you through building your first centralized application and I can post a link to that down in the description below so let's go ahead and dive in first let's look at our smart contract code and also the kind of the client-side application that would be developing this is pretty simple I'm going to post a link to this in the description below so be deployed to github so essentially what we'll do is we'll have a really basic you know end HTML file that will have our application layout and I'll write some JavaScript down here and we will use this smart contract that I've written it's just a really basic contract and we'll just kind of copy and paste this into remix in order to compile it and deploy it now you'll see some other stuff in here like CSS fonts and JavaScript and this is really all just external libraries that I have imported so that we can get up remote and quickly and specifically it's just the bootstrap library so that we can have some nice-looking UI and the other main component is the actual web 3 library that I mentioned a second ago and this is the library that will kind of look at in depth or in detail when we develop this little front-end application here so let's take this smart contract we'll copy it and this is kind of the beginnings of a smart contract that I build out in my other tutorial where we build a full voting decentralized application go ahead and paste in your smart contract coat so let's take a look at this for just one second the smart contracts pretty basic all it really does is display a candidate name we'll just read the candidate name here this is gonna be our only candidate in this election and it also allows us to just update this candidate name and in the other tutorial I kind of walk you through how to you know we can add candidates and we can vote for candidates and we'll Talia votes but for now we're just gonna do something very simple to know that our you know clients that application is actually talking to our smart contract and you know you could go from there so what you need to do first of all is ensure that ganache is running see this here yeah just download install ganache and watch that and you'll see that you have ten accounts here with a balance of 100 ether and you'll need to take note of the port that ganache is running on mine's running on 75 45 by default so I'll go back to remix and we will change the environment now by default over here on the run tab yours is probably set to JavaScript virtual machine or maybe injected web 3 I'm going to choose a web 3 provider it'll ask us if we want to connect to an etherium node and essentially that's what ganache is gonna give us is a local node or an RPC instance and so I'm gonna update this to 75 45 because that's what we saw a ganache warning on look okay and once that's connected you should see the accounts available in ganache so I'm going to select you know this first account right here with uh this one right here 100 ether and I am going to deploy the smart contract by clicking create and we can see that this was deployed by looking at the transaction receipt below we can call the functions on our smart contract here let's get a candidate name we can see that this is the variable here set to candidate 1 that's what we expect because we see the default value getting set in our smart contracts constructor alright now that our smart contract is deployed to our local blockchain let's go ahead and you know look at our client-side application so first of all we will open our index.html file and we'll take a quick tour here so what we'll have is just a you know a place to hold our candidate name to display it and we'll have a form to update that candidate name and this codes pretty straightforward like I said I'll post the link to this code down in the description below and you can read through it and what we'll do is write our smart con are sorry our clients that application here like I said you know if I was building a real DAP but we'd have you know much more files for this or even our front-end framework but for now I'm just trying to show you very simply which component does particularly how web 3 works so in order to make all this work I'm importing you know bootstrap and I'm importing the web 3 library so that we can configure it and get our clients that application to talk to our blockchain so we'll take this index.html file will open it in Chrome to kind of see what we have all right so this is our basic UI we'll just have the candidates title here and what we want is to list the candidate name right here and we want to wire this form up to talk to our our smart contract and add the candidate let's start writing our client-side application JavaScript I'm going to just paste some code in here and that initializes web 3 that's the first step so remember we need a way for our clients that application to talk to the blockchain and there are two kind of actors in this scenario one is the web 3 library itself and the other is meta mask so meta mask is going to give us a provider in our web browser that we can use to talk to the blockchain so what this code does it says you know if this web 3 you know if web 3 is there we want to take the current provider and this is the provider that would be you know given to us by meta mask so we would set that here as the web 3 variable it's not provided by meta mask then we'll just default to a you know an HTTP provider that's on our local hosts you know node and this is the URL for and the port for my ganache instance so the next thing that we do is set the account for web 3 so you know meta mask allows us to interact the blockchain and in order to interact the blockchain we need to know which account we're using so we can actually tell web 3 you know the default account and what we'll do is get access to the first account that is provided to us by meta mask and we do this with web 3d th accounts and we'll just take the first one because this is a zero-based you know index right this is the first one and we tell which web we tell about three that this is now the default account and that's the one that we will be you know acting on behalf of now the next thing I'm we need is a representation of our contract in the client side and we can do this with web 3 by using the web 3 th that contract function and this is going to expect an ABI so an ABI is an application binary interface this is basically going to be just a big JSON object that represent your smart contract that the etherium virtual machine understands and we can also use that to reconstruct our contract for something like web 3 so we'll have a way to call the functions of our contract with web 3 like we can get the candidate and we can update the candidate and things like that so we'll do is we will pass in the contract ABI here and we also want to so this is so passing in the concert ABI kind of tells well you know web 3 what our contract looks like you know what functions exist on it and things like that so the next thing we need to do is tell it exactly which contract use on our blockchain so we do that by passing it the address of our contract and we can just do it like this and we'll just say contract address so we'll declare these variables here let's you know set that contract ABI will call this we'll set that in a second and we'll you know say set you know contract address if our contract address yeah so fill these in here in just one second and then we'll you know tell web 3 about these two things and this will kind of give us a representation of our contract that we can use on our clients side all right so let's grab the contract ABI we do this by going to remix you know go to compile once you go to compile we click the details button and we can see ABI down here API section we'll just copy this and I'm going to you know paste this year contract API it'll do that like this alright so we can see this is just a big JSON object that kind of tells us you know what the outputs are things like that these are the functions that our contract responds to yeah so I'm gonna just minimize this for kind of screen real estate and we'll also need the contract address and we can also get this and remix so we'll go to the run tab we'll find our you know contract that we deployed and we'll click this little copy symbol here this will copy our contract address we'll go to I'm sorry there's a string set our variable alright alright so now these are filled in we know about our contract API is and our contractor dress we'll pass that into a pre-contract function and we'll tell it which you know address to use the contract from and let's go ahead and set this to contract so now we've got you know web 3 configured and we have you know a representation of our contract that we can use in our clients that application to you know kind of write some code to make this client side work for our decentralized application let's do just that let's write some code the first thing I want to do is let's just display the candidate name so if you go back to our our application here we essentially just want to see the candidate name right here so let's just display candidate name will do that with that contract which we just defined right here or line 102 we'll do candidate name like I said this is just a representation that you know will allow us to call functions on our contract and then we need to pass it a function I'm gonna give an error and then candidate a name now let's say we'll see we want to display the candidate name here actually I have a conflict let's actually call this we don't need this let's take this off this would be alright yeah we'll use ID candidate name for this age for will say candidate name will pass the HTML can't do it all right let me see if that worked let's go to meta mask and ensure that we are connected to the correct Network let's reject this all right private network Ron ganache all right let's try refresh boom there we go we could see the candidate name listed here alright the next thing we want to do is provide a way to update that candidate named candidate name so we'll take basically find our form for updating the candidate this form right here will find the form will say on submit pass it a function you give an event well uh all right we'll go ahead and prevent the default behavior here because we don't want to trigger a page refresh when we submit the form and we'll do contract was set candidate remember this is our functionally out here a sec candidate contract set candidate let's grab the value so this form is going to have you know an input here yeah right here candidate name and we'll just find you know the only input available but say Val and hoops looks like I'm a little type over here this will be candidate all right so let's save that go to our browser refresh so all right let's try to update this value say candidate - oops - I candidate mmm there we go all right you can see that we're actually updating values because the candidate name changed yeah it is back to candidate it was just say fubar candidate bubar all right yeah we can you know put your name here you do anything you want you this gives us the ability to read and write information from the blockchain you know full stack so we have a client-side application where we can connect the blockchain connect to a smart contract where we can read some data we can read a candidate's name about the election we can also update that candidates you know name as a value so this gives you the very basic tools that you would need to get started doing those kinds of things you know just connecting any kind of HTML file to a smart contract on the blockchain you would just need you know some sort of representation that smart contract an ABI you need a web 3 instance in order to make use the ABI and an address for the contract that's deployed on the blockchain and you can start you know kind of going-away was just that alright so those are all the individual tools that you would need now earlier I mentioned you know that we wanted to do this outside the context of a framework but when I'm actually developing a decentralized application I want to use a framework and here's why you know this contract ABI I don't want to copy and paste this anytime you know I make a code change so if I'm developing a smart contract then I add functions I would have to copy and paste this into my file every time something like truffle actually handles that for you and I don't necessarily talk to the you know web 3 I want to set my you know contract from the ABI every time truffle actually has a truffle contract library that does all that for you which is really nice and also I don't have to change the address of this contract every time that you know it gets to redeployed so that's really nice and there's a lot of other stuff you give her free with truffle like testing there's some nice stuff for deployment I can specify different network so I could deploy this you know locally I could deploy it on a you know test network or the main network and also I wanted to show you that you can do lots of other stuff with this you know tutorial when I set my you know RPC instance here I could change this to any web 3 provider that I want to you know I could specify a remote RPC here so if you wanted to host in aetherium note or on a remote server you could connect to it that way or if you were you know developing with a different technology locally like guess if you've used the go implementation of a theory before you could plug in the you know port for get or any locally that's actually typically in defaults to 8545 on a Mac that's kind of probably why this is the default value here so that should give you some ideas of where you can go this tutorial and again if you haven't already check out my other you know to our tutorial where I walk you through developing a fully decentralized applications step by step and I'll show you the truffle framework and you know walk you through all of that so I hope this helped hope kind of shed some light on how web 3 works and you know some of the more rudimentary steps that you would need to take in order to build a decentralized application quickly be sure to thumbs up the video and subscribe to the channel if you'd like to see more videos on how you can get started building decentralized applications on the etherium Network and until then thanks for watching DEP University [Music] [Music]