ETHParis: Fundamentals of Dapp Development with Joseph Delong

network you're like a super billionaire so you can say how much you want you know the second thing we're gonna do is we're gonna we're gonna write a contract like from scratch in truffle sorry let me not confuse people okay it's a solidity contract we're gonna write we're gonna write it I'm using a kind of command-line IDE called truffle right and we're gonna compile and and deploy that contract to our ganache Network so we set up the test Network we're gonna write a contract we're gonna build it we're gonna deploy it to our network so step three is really we're going to take and we're gonna put a front end to that application so if you think of traditional um you know server client architecture it's it's very similar but in the sense of your your server that you're deploying is you know on chain and you're interacting on chain it's not it's not a you know kind of like a remote communication you're just talking directly into your contract as your back-end ok so that's the only slide that matters right here you're there and we can get started on that there we go found it okay cool so the first of the first four steps we're going to do here is like I was saying we're if you have and you should have an NPM environment if you don't that's kind of like one of the prerequisites it would take us a while to install NPM for everyone but you do this is a you know have to do sudo it depends on your environment but we're gonna install a global version of truffle and we're also gonna install a global version of the CLI and that means basically when I go to command-line I don't have to put in a path to to reference um ganach CLI or truffle I can just use the I can just use the this short phrase truffle or ganache CLI to start those okay so next thing we're going to do is we're so I can't do those because I'll break everything actually I probably need to do truffle because this isn't my computer one second you just guys no food and no beverages in here please if you have some just go outside and finish it and I'm gonna see you on every camera if you do it thank you cool thank you yeah so now we're installing cool hey I guess that's what this is for okay cool so we're installing truffle and it you know installed successfully okay so kind of moving on to the next steps now that we have like our you know stuff there right so I'm going to change my directory to the desktop and I'm going to make a new directory um and we're gonna call that that directory sandbox so when you're setting up a truffle instance SAN sandbox sand box there we go cool oh shoot I'm sorry yeah yeah yeah yeah yeah let's um let's move that over here sorry there we go does work better and everybody see that do we need oh no this way down there isn't it okay to bring it up and then try and increase the font size this is my life okay [Music] okay really this is just the worst cool if it was not like totally at the bottom like there we go what's that I can't I can't resize it I don't know um this is like my first day of easing something sorry hopefully you can see that better my apologies for everybody okay so we're gonna make a new directory right so we're gonna call that directory sandbox and then the next thing we need to do in is to get into our new directory so we're going to change directory to sandbox and we're going to call truffle in it and that's going to set up the environment in the sandbox oh cool version not supported cool cool cool alright yeah like I said give me just a moment I did get my laptop stolen so I'm not exactly sure new version not support we're currently using version seven point seven point four purple requires eight point nine point four NPM Dean's install what oh it's okay all right cool oh all right yeah okay can we get the guy whose computer says come help me for a moment I forgot its name [Music] what's it right yeah yeah it is it update right sorry yeah oh what's that okay oh I didn't know that don't break somebody else's environment but hopefully everybody else is you know following along doing this guide he said there was like something to select our environment so we're going to try that command again now that we have a newer version oh okay you that unmute excellent okay I'm really sorry y'all I you know I had this all set up to go but yeah unforeseen circumstances oh and install and like a note No yeah okay do you have yeah it's oh you have a new MacBook cool cool cool I used to have one of those um recently okay here we go we got a dongle I assume okay you let's go are you good thank you very much okay all right we got a doer piece place no let's make it a mirror-like yeah awesome yeah okay we're back in business thank you very much really appreciate it oh it's okay cool awesome yeah yeah [Music] so yeah we'll start there yeah okay and we'll go to tiny URL comm /e 'the pairs is what sir oh right oh cool what a fun Club week started okay yeah okay so we well let's see if we have or NPM install so herbs are truffle that's all I can't do like any of the you know them the magic of television sort of stuff where I like already have stuff installed and I can just you know go go for so I'm gonna do this with everybody else too so yeah we're gonna install truffle then we're gonna install ganache and then yeah this one actually takes a little bit and then we'll start up our own oh that was fast okay cool Eddy sledge it that's brilliant [Laughter] good cool yep and so now we're gonna have ganache and that also went in really fast okay now we're going to make our sandbox which is stop by making a directory let's make sure everybody can see it right okay cool [Music] sandbox okay and then we're gonna go into sandbox and we're going to call truffle in it you okay cool so if we did stuff okay so yeah so like if you look at your your your tree right if you do an LS right you'll see there's truffle config Jas there's test folder there's migrations and there's contracts and we're going to use each of those okay so the next step would be to set up our truffle j/s which actually truffle Jas is basically it's telling you where your environment is supposed to point to and so so like if you go it's actually shoot they change the name sorry we're going to modify truffle config Jas yeah it says it um okay sure yes code well no okay yeah cool [Music] no this is my first day yeah thanks okay so yeah now we're gonna we're gonna make edits to our truffle config the J s and that just tells us what environment we're going to be talking to so we're going to start up ganache CLI and we're going to talk to that and we want to say that we're talking to ganache CLI and not you know a theorem a net or a Rob stone or whatever we want it to you know understand where these contracts need to be deployed cool that's perfect all right and so we're just going to clobber whatever is in here with the the stuff from the the guide um 8545 that's yeah okay cool so yeah we're just going to clobber that Wow this one mm see what what's what's that one Oh weird well nice okay yeah I know stuff okay so then now we're going to make the the contract and so we that that's also provided in here as a as a gist right so just copy and paste that so you're gonna want to go too over into contracts and you're gonna want to make Ain a new file called simple storage dot soul and that's a solidity contract so smart contracts are it's a not really a great name because they're kind of just like applications that get run by the network and don't really have much to do with being a contract okay and the next thing so we're gonna we're going to call truffle compile just to make sure everything's like still like working okay so now that we put that stuff in there oh actually I'm wondering actually have okay cool that works oh yeah cool alright it seems good so we compiled right the compiled the contract compiled down to bytecode and so like next we're going to stand up our ganache CLI and we're going to deploy the contract into the ganache or into our you know our ganache Network Oh okay oh yes sorry okay so now we're gonna were to deploy it we need to update something called our you know our migrations right and our migrations tell us like how to deploy something when we're going to deploy it so yeah so I'm going to create I'm going to go into migrations I'm going to create a new file called it has to be at number two but I have a file name specified over here somewhere to underscore deploy underscore contracts and that's just a simple J's file yep and so now we have the now we have the the deploy and so it'll it'll know exactly like how to deploy the contract and want network to deploy it to so I don't believe I said in here to start ganache oh I did up here I said it way earlier but okay so now we're gonna start good on CLI look at that it's so cute and tiny so we'll call ganache CLI and this is actually like starting our network right so one of the cool things one of the cool features is is that all like it'll give you a bunch of you know private keys with like 100 Ethan them and so on in your private network you have a hundred eath each account and they provide you with the private keys it's just pretty rad why is it cutting off that's weird and kill that it's very strange behavior okay cool that's more that's more like it so if you can see that we start our network it's like you know our local host at 8545 right and so like we specified earlier we said we're talking to 8545 and so yeah we're gonna get to we're going to get to communicate with that so now now that we have our ganache network set up we have our you know our compiled contract we have all the kind of like the deployment stuff in this place we're going to try truffle deploy so and what truffle deploy does is it's it then sends that to the ganache Network okay there is this yeah isn't it that way didn't I did that see Oh today okay let's try again well I want to go away okay cool let's try again there we go hey went a victory mass and can you know big hand applause for the guy who told me that I didn't say my file I appreciate that okay so now now it's like actually in the network and we're if you're looking at your ganache CLI console it'll like have all these like transactions that come through you know you don't really need to understand them all that much it's just just some you know transaction data you know you get better over time you'll start to understand like what they do and what they mean and and this will say like the then also your deploy your truffle deploy will output kind of like where the contract is you know the transaction hash for that and how much it costs you to do that and you know those costs are you know somewhat representative of what they would be in the real world okay so the next thing we're going to do is now so now we have the network we have the contract the contracts deployed now we want to talk to the contract and so we're going to do like some really just like basic corny stuff we're going to we're going to update a value and then we're going to read a value from the contract and so I've written a just like a like a fundamental like great react app that gives you that gives you the very like what I say like the bare minimum to talk to a contract and so like if you're going to be hacking this weekend it's great because it'll give you it'll give you like some like a very like you know fundamental place to start okay um oh yeah there we go so I'm gonna clone down my simple client and if you're kind of like a reactor or like you know know developer or this is should be like pretty familiar for you actually we're gonna we're gonna do that not in sandbox how about that and we're gonna clone that down we're just pulling down the repo and we're gonna now we're gonna go into a simple client and we're gonna do an NPM install and that will install all of our dependencies that's pretty normal stuff for node developers and then we're going to do a then we're gonna do an NPM start so we can kind of see it not communicating to the the contractor then make some configuration changes so then make it talk to the contract you okay cool so now we're going to do an NPM start to get our server started and we can see like the it'll start the the the react the great reracked app starts up and it won't really talk to the contract and that's like that's what we're expecting right okay so yeah it's gonna ask for like your meta mask stuff okay cool yeah so we're going to I really hope that I'm not gonna like blow away anybody's like you know eath fortune here when I'm making modifications if you're out there okay so yeah it's not really like talking this doesn't really do anything it's like broken and so we're gonna open that up in in vs code and make some other edits you yes oh that dude I needed your meta mask password I'm not gonna like I'm not gonna like Billy keys or anything am i if I make modifications to meta mass I mean so we're gonna start to talk to the contract right I need to add a private key to it but that's okay it won't it won't affect your accounts it'll just okay so we're going to open a folder showing this simple client stuff okay and someday okay cool I guess it did it already didn't see that cool so apt Jas right if you see this thing it says add address here write the address that we're talking about is the deployed contract address on our ganache CLI instance so if I have a contract and I deploy it you know within ganache I get I get you know an address for that contract if I oh they wiped me out oh come on oh okay well anyway it's over in this other one two-one-zero that's the area code for San Antonio that's where I'm from that's what look that's so cool yeah this it's been a very wild ride okay so yeah we'll just copy and paste that into here it's like saying like where am I going to be talking to like what what's the contract that I want to talk to you and this is all like like normal stuff for like you know no developers so I won't like focus on that too much I just want to kind of get it started so yeah awesome i turn my other terminal yeah command Tildy and this made of a backtick okay man okay cool yeah that one thank you really appreciate it want to side by side you guys are wizards okay this is awesome so uh what step was I on oh yeah we just did the thingy and so now we're gonna we're gonna do the same thing again we're gonna start up our now that we put in the contract details we're gonna we're going to start up the client now okay oh no I want to do a NPM start so we start up simple client and so yeah there it is it's not connected to a wallet metamath is going to ask for that we're not doing that just yet but we should be able to check number right and it should return like nothing okay it blows up okay well whatever it's not supposed to do it yet okay so next thing we do is I'm gonna grab some of these private keys and I'm gonna import them and I'm also going to try to not you know delete any of your precious eath that you already may have so yeah I mean fifty-fifty yeah we come put in your meta mask password for me thank you thank you and so you know we're gonna connect yeah yeah yeah this is on main network so we're gonna switch this to our local host which is 8545 and then also we're gonna add a new account one of these like you know one of these super rich accounts yeah yeah okay super-rich is our account name and and we're going to we're going to import yeah we're gonna import a private key boom dropping it in there boom 108th rich AF yeah in imaginary money so yeah and then so now now we we actually kind of like just because of like a metamath bug like we have to kind of like restart our browser right now because like it's not gonna it's not gonna work like out of the box like that so when we we start up our simple Clyde again this time we're gonna have our private key with lots of eath in it and so we should be able to we should we should be able to connect our wallet hopefully and communicate and store a value and then retrieve it hopefully and not blowing up on camera be cool let's say well obviously my lucky number to one oh there we go or you know area code oh cool yeah awesome alright oh hey add address here okay I didn't save a file again cool this is this is a well that was comical for my end because uh yeah let's just let's just not take our chances on it yeah core core core you I met a mask you need to ask for a connection that's what you're supposed to do yeah okay cool I'll try that again because it's supposed to ask to connect there we go okay so we got the connection request now I'll ask you for a password you and if I cross my fingers where I'll be talking to the contract by sending an update hey it updated well the real test is did it actually update right so or now let it we we sent that to the contract it stored it in there and now we're gonna check it as zero awesome okay that's not what it's supposed to be it's supposed to have stored it you know sometimes this happens there's like there's a million things that we could do to troubleshoot it but um I have use this and the instructions are good so I would say use it and do it on your own should work correctly but let's give it one more shot I bet you I bet you it's really it really wants to work okay so checking number zero two one zero update confirm updated so it said no okay well it's not working but it works I've done it I promise but anyway so basically what we're doing now is we have the front end it's storing it into the contract then you're able to retrieve it yeah sorry the demo doesn't work perfectly but yeah we did a did my best and if you have questions about it I would totally you know willing to help any teams that need some sort of guidance on how to do any of this stuff yeah so thanks and that's kind of like concludes the presentation [Applause]