Joseph Delong ~ Fundamentals of Dapp Development - PegaSys

[Music] thanks everyone that change shot acqua forces really I think we need to port our tutorials over to that this is really cool so fundamentally what we're gonna learn today is kind of like how to get your environment set up how to how do you build your first contract how to deploy your first contract and then how to communicate with that contract so first things first we're gonna if you go to this URL tinyurl eath denver 2019 yeah that'll have like that basically has like the full instructions of everything that we're going to go through I'm gonna stay on this for a while Wi-Fi password is oh it's um sorry the Wi-Fi name the SSID is Ethan burr guest and then the password is each Denver all lowercase 2019 exclamation point so so yeah go there so just a show of hands like broadly in the audience like how many people have like use truffle okay so how many people have like deployed a contract and use truffle and use ganache and all that right okay cool so so a decent amount but if you haven't what we're gonna do is it's basically everything from where they say soup to nuts for deploying your first contract and interacting with it the the interaction piece is pretty important because that's going to be how is what a DAP is essentially is a just your regular kind of web 2.0 application that interacts with a contract okay so we're gonna give prizes away if you get done with this we have some fabulous prizes from chill dot law they make these great shirts like this one's a shield outlaw shirt and we have some other ones like this one is like BTC to the moon whatever and then oh this one's one of my favorites right here this one a blockchain that's pretty sick I really like that one and then aspect chain one cool and then because I work for Pegasus a Pegasus hat for somebody out there who gets done but you got to get done with this tutorial so essentially like like to get the kind of gears going in your head for conceptually what we're doing right so we're going to install truffle and then we're gonna install ganache right so those are the logos for those two things if this is your first time you don't know that but it looks nice on a slide and then we're gonna build our first contract well we're actually going to write our first contract just kind of copy and pasting we're gonna do something very simple like just entry-level gets you to know all the functions of the contract then we're going to use ganache to set up a test Network which is very similar to your you know what you think of as aetherium main net it's just a a network that's on your local that you're starting so that you can deploy contracts and it doesn't cost you real ether it costs you imaginary tests ether then we're going to compile it using ganache or contact and then we're gonna deploy it and then we're gonna talk to it using like the web 3 right so that's that's the whole idea and so after that I'll back up to this because that's really all all we need from that so the whole rest of it is going to be demonstration and I'm even gonna cheat and use my own guide at some points so we want to we want to start by installing truffle okay if in this is a there are a couple of sessions we're making in this guide on those assumptions are that you have NPM you have you have get installed and you have clear with madam asked installed those are pretty like typical tools for what the exception of meta mask for a developer so we naturally made that assumption in the guide so first thing we're going to do I'm actually not going to do this one because I broke my environment last time I did this demonstration doing this one because I already have it all sure what broke but it did so you do you're going you're going to oh let's make that a little bit bigger okay cool so people can see that actually so you're going to you're going to do an NPM install for global for truffle because this is going to be like something you'll use in the command line from here on out and then to shoot and then then to prove that like you successfully have installed it you want to pipe a nice little like readout that I'll say like all your help menus and so yeah next we're going to install ganache CLI and ganache CLI is a tool to host test nuts and so once you've successfully installed ganache CLI it'll give you you you type ganache CLI and it'll give you kind of like an output that looks something like that yeah so Wow just the meta mass is just beating up ganache right now okay so now we're going to now we're gonna create our first like contracts and we'll do that I'm gonna do it on my desk ticket like everything on my desktop and so we're gonna make a directory you can do this like manually or you can do this like in command line however you like I think right and so sandbox folder we're gonna want to CD into a sandbox let's see let's make that a big window and then and then inside sandbox we're gonna want to run truffle in it and what's when we're inside sandbox it has to be an empty folder to run truffle on it and when you run truffle in it what it's going to do is it's going to import all of the like the they're kind of like the minimal Viable you know truffle installation if you've used like react they have like boilerplate stuff like this too and so if you if you list like what's in there now there's a folder called contracts migrations and truffle config is actually going to open mine jeaious what's this called was it yes yes go there yeah I couldn't remember the name of it for a wife of me okay cool so yeah now we're gonna make some edits to those contracts first thing well not for the contract actually to our truffle environment right this tells us in the guide it tells us like where what network we're pointing out and so we want it to point out our at our utter or local ganache install and so like we'll say local host and 8545 and that will tell you kind of like where where the contracts are gonna get deployed okay and so if we find my truffle config listen how do you make this one bigger yeah so I'm gonna want to go ahead and like delete all this and replace it with the stuff that was in the gist if you're looking at the guide it's a like over here yeah yes go ahead and just like drop it in there that's right Alex I'm not messing anything up right a coca-cola yeah yeah yeah yeah that was Denver 2019 oh sorry yeah right here sorry about that tinyurl.com 4/8 Denver 2019 yep and so that'll have all the instructions in there and so now we're gonna mess with our truffle config we're gonna set up like what test Network we're pointing out and then the next step is kind of like writing the contract so this is like a very simple contract you can see it's like set a favorite number and then get a favorite number and when you set a favorite number it takes the the message sender and and maps it to just a number that you would provide it's a message dot sentries sorry lost the lavalier mic message sender is like you're the person who's calling the contract and so yeah we're going to do that we're gonna make a file called simple storage soul we're in the contracts folder okay and we're gonna copy and paste the context contents from the get gist the reason I'm like I didn't just make like a whole get repo for people to pull is because like I want you to understand like where the this stuff is going and kind of like what each individual component is doing okay so next next we're gonna write the migrations right so the migrations is a when I call a deploy it's how it it does like it's able to take an action before it like deploys it into the network so like maybe you deployed it and you wanted to save off the address and make like an additional calls it's just kind of like a config that that allows you to configure how it gets deployed mmm shouldn't it take after okay so I don't know appearance there we go no anybody know how to make this light no idea yeah that too though oh there we go let's come in wait oh I broke it sorry I'm I really don't know hmm okay yeah yeah it's all like all at eight Denver 2019 is is in there I can go bigger not that that change the font size at all okay so next we're gonna fix the we're going to create a migration and like I said the migration is just there as a configuration the the names what are we going to name this deploy deploy contracts okay yeah okay contracts dot J s and this is just a simple js5 okay cool and I don't know if that's the wrong thing so we're yeah oh shoot no it was there we go okay so well yeah it doesn't say that in the guy dang it does okay cool good catch so before we do that we're gonna we're going to truffle compile and so that's that should show us like success or failure of our contract compilation okay so it's like succeeded yay it's almost like I planned it that way and the and so then then we start moving on to migrations thank you okay and so now that we have our migration setup we've modified that we are going to we're going to type in truffle deploy oh I guess I got to start my test net I stopped my test net for good reasons okay what oh I already had it running okay never mind I guess I didn't stop it okay so we definitely want to copy out a private key we have to do that at some point so now it's better time than any and so in our you want to go into metal mask and you want to make it point at localhost normally it would be pointing at a theory main net and so yeah you want it to point at your local ganache and so yeah we do that and then additionally we copied out a private key and so we're gonna want to add an account so we click import account and so basically this is going to be all test nut ether like on your local ganache CLI and so we're going to import the key using that didn't succeed 8545 we'll try this one why is this one empty - do you know what's going on my test RPC is pointing 8545 test RPC is running and I copied out the private keys maybe just try killing it and restarting it yeah yeah that's a good call okay and [Music] oh and that's not the right one important yeah what the hell well browser is this is Chrome okay it seems to be the most reliable for me in terms of that I'm asking ya now have it okay cool sorry so yeah success means like that you you then have a hundred ether and you're in your meta mask like that's all test nut ether I'm not really that rich hey then okay so now that you've done that now you want it like we wanted to get that like configured before we moved on now we're going to run truffle deploy and truffle deploy is going to take those Network those contracts and it's going to send it to our test network using the migrations file so it's going to go look at the configuration and then it's going to deploy it so you see our contract right here came through simple storage right in that transaction hash and they told us the contract address and so we need that contract address actually so we're gonna copy that out do I want to test or do I want to communicate there's a private key okay so yeah now we're gonna do now we're going to move on to the contract tests right so that like we have the contract deployed now we want to like run tests on it like wallets on our ganache instance okay and so we're gonna copy that out and we're gonna make a and we're gonna go into the test folder and in the test folder we're gonna create a new file called lowercase s simple storage dot J wait did I call it test I think it's simple storage at j s yeah underscore or lowercase simple storage j s and that has like some some tests to run on the contract and then if we go back over to our our our command line instance and we type in truffle tasks it's going to run tests on the contracts that are deployed I believe I built in a failure into here so that you kind of have to go in and modify a value this is the assertion error Bob's new value was not 33 it was I guess is saying it's that that's not equal to 30 for obvious reasons okay so we'll have to make some we'll have to make a modification to this to show and then we should have passing tests that's kind of like part of the guide is having that built in air yeah so there we go passing tests we've set up our our ganache Network we've written our contracts we deployed them and we've tested them okay so now we want to interact with them so the next thing I'm going to do is I'm going to I have a application that is written it's like a very fundamental react app and just shows you how you can enter with the concoct using like JavaScript so I'm going to clone on to my desktop here that that repo called simple client okay cool so that's been cloned you can see here yay and then I'm gonna I'm gonna CD into that then we want to modify the configuration with the address of the diploid contract so if you go back here and you look like it's simple storage right we have a contract deployment address and we need that because we need to know how to talk to it and when we copy that off and then we're going to put it into the app KS which is part of the react top this just does like a variable in there and where you see this add address here you're gonna want to replace that with your address so yeah so we'll do a new window open folder a simple client um and if you look at your source in the app KS you'll see the line I was talking about address here so dark but yeah right there you want to replace that with your address and then that way it'll know what to communicate with okay so yeah we did that and then that okay so now we want to do NPM install NPM install is like will go in tall npm install is going to go in and install all the libraries that are in the that are that are necessary through of reasons we won't get into here we don't include that in the repo yeah okay cool thanks thanks yeah just a one minute it takes a while to install this and they'll give you a bunch of warnings maybe don't use it in production I don't know maybe use it in production yeah yeah totally ok so now it's installed and then we're gonna cut right at NPM start okay and so NPM isn't going to like beat up a local server and it's then it should automatically open a browser if it doesn't just go to localhost 3000 and that will that will get you to the right place it's going to ask you to connect meta mess actually I'm going to add that to the guide cool so it's gonna ask you to connect your your wallet so it's like meta mass is requesting meta mass to connect to the the doubt browser and then meta mask injects the web 3 library ok and so now we're gonna talk to the contract using these fields so we're gonna put in our lucky number like let's say like 24 right then we're gonna update and then that's going to be a transaction and it costs money you know I mean it costs imaginary money but then we're gonna take and we're going to confirm that transaction and and then success looks like that like a pop up will come and I'll say that you updated correctly okay and then you want to check the number right and so this this like before it would be empty now yep well now it's empty okay shoot what just happened maybe didn't get mine fast enough live demos am i right okay well we have an issue hmm should have stored let's try it let's reload the page oh I I just I just redid it four days ago I don't know okay Oh account is automatically passed because it's a message sender yeah no it works just not now zero nothing yeah well I actually didn't even look at the page handling cannot read property dot length of undefined oh it's not coming back with anything yeah who knows anyway that's supposed to work it doesn't obviously oh did I do the wrong contract hang on no I did the right contract okay anyway that should work it doesn't so if anybody got this far like come get a t-shirt for me and I'll give you one and that's about it [Applause]