Getting started with Ethereum development: How to use Metamask, Remix and Web3.js

so all right as you guys come in if you come towards the front we're gonna do some interactive coding throughout this presentation so it'll be easier for me to hear you guys if you're closer and if you have your laptops if you could grab those you can see in the eath Waterloo discord in the general channel I posted a link to the slides that I'll be using and you guys can follow along as I go through the slides because there's gonna be links to specific coding exercises throughout this I'm gonna be just driving through these coding exercises and asking you guys for answers but I think it'd be helpful for you guys to follow along on your computers as well so I guess Before we jump in I just want to say welcome to eath Waterloo this is this is super exciting I actually came to eath Waterloo two years ago that was when I really first was like my first experience with the etherium community I'm from Detroit Michigan my name is Josh Crites and I'm with consensus Academy I actually came to eath Waterloo two years ago and I met a lot of people from the consensus team I joined consensus Academy shortly thereafter the beginning of 2018 and eath Waterloo two years ago was an amazing experience it felt like a theorem was was super new like we're building new technology and in a lot of ways we've made a lot of progress but at the same time it still feels like this is very new technology where we're still building global infrastructure here so as much progress as we've made it as the etherion community still very new still excite exciting space so in this talk I just want to get new developers or even like experienced aetherium developers just do refresher on some basic tools on how to get started developing a theory immed apps throughout this workshop we're not going to need to well the only piece of software we'll have to install is meta mask and basically the rest we can just start writing smart contracts using remix right in our browser and we can connect to web 3j s the JavaScript library to connect to aetherium and smart contracts just right in our browser without installing any software so I just want to show how to do that I'm going to give a little bit of an overview some context around I'll just start going through the slides I think that'll be the best way to go and for people coming in if you don't if you don't have access to the discord you can find these slides at tinyurl.com slash Biddle - Waterloo so that URL will direct you to these slides and I have a lot of URLs in here so you guys can follow along as I go but yeah to start the agenda for this I'm gonna go through remix and how we can start writing smart contracts on solidity or in solidity for in deploying them onto any ethereum blockchain whether that's a the main net a test net or just a development chain installing meta mask and using meta mask to connect to the main net and test Nets through remix and then using remix to compile deploy and test your contracts and then from there once we have contracts and deployed onto an Atheneum network we'll go over how to use web 3j s to interface with contracts in web 3j s is a very common javascript library for injecting into wet like traditional web interfaces to handle accounts connect to deploy contracts sending transactions and in reading contract state and to reiterate this is a workshop it's not just a presentation it's interactive and I will be calling on you guys to help me write smart contracts and go through web 3j s as I do so kind of framing this talk the mindset I'm bringing here is bringing the idea of just-in-time learning there's a lot to learn about aetherium it's a very unique development environment we have unique constraints when we're developing on aetherium it's different than the traditional web to space and I'm not gonna cover the entire context of aetherium and all the constraints that you'll face as developers working on aetherium what I want to do here is give you a set of skills to complete a project by the end of the weekend and that can be anything I just want you to be able to write a smart contract to ploy it on to an ethereal test net and then connect to it read it read the contract state and sent transactions to it and allow anybody else to interact with it as well so that's gonna leave a lot out of the understanding but I think just giving you the skills to get started is it makes for a much more rewarding weekend because you'll actually have something to show for it by the end so to do that we're gonna get start started building ASAP we're gonna start writing code right right here right now and we're gonna do this together we're going to encounter problems along the way we're gonna see why like we're gonna see how smart contracts aren't working and then we're gonna figure out why they're not working and basically tackle these problems solve these problems as we encounter them as opposed to developing a entire framework of how aetherium works and coding after we get a solid mental model of how a theorem works so as you guys I'll give you some skills to start writing contracts and building interfaces for them but you're going to be encountering these problems throughout the weekend and I'm available I'll be here all weekend so as you run into problems come find me or and I'd be happy to help also I don't have a team right now so if you guys if you guys have a team or you have an idea I'd love to team up and hack so yeah I think it's helpful to provide a little bit of a framework before we just dive into code because like I said aetherium is a very unique development environment so just answering a few questions about writing smart contracts for aetherium writing smart contracts and solidity the first question what are smart contracts smart contracts are just programs that run on aetherium they're they provide a number of benefits over traditional web to applications because we're just web to programs because they're always available and they're uncensor all these provide a unique set of advantages such as building currencies on top of these building tokens that have real value and can maintain real value so that's one of the main value propositions of even writing smart contracts and to write them we're gonna be using a programming language called solidity the two most popular programming languages for aetherium right now are solidity and viper facility is by far the most popular and has the most robust tooling so that's what most smart contracts are written in and the smart contracts are these smart contract programming languages are specific to aetherium aetherium runs specific code calleth called aetherium bytecode i'm it's similar to Java in the sense that there's a Java Virtual Machine Java programs combine compiled down to Java bytecode and then Java bytecode is what actually runs on the Java Virtual Machine the same kind of thing happens on aetherium but instead of with Java bytecode is running just on whatever computer is running the java java virtual machine with the etherium virtual machine this etherion bytecode is running on this distributed computer this global distributed computer so that's a long way of saying we need a specific programming language to write this specific etherion bytecode and that's why we have solidity so let's just jump right into writing some solidity to write solidity we are going to be using this in browser development environment called remix yeah I'm just going to go over some of the features of remix because you can basically do you can do almost everything you need to write smart contracts and deploy them onto the network right from this interface which is super powerful because you actually don't need to install any software you just go to remix etherium org and this is the landing page you can see you can select different environments you can select solidity as your environment vipir and these clicking these buttons like if I click solidity it's just going to load a specific set of plugins on the left side and these these remix plugins are specific for like I have a solidity compiler here so it'll compile my solidity contracts I also have a deployer oops so I can deploy contracts and send transactions to the kind of my deployed contracts I also have analysis tools if I select a viper it's going to give me an additional compiler because viper is a different programming language so the compiling rules are slightly different the syntax of the language is slightly different yeah so you'll also see down here at the bottom there's a console this will come in handy when we're actually deploying contracts and sending transactions we'll be able to inspect details about what's going on down here and just jumping over to the left side of the screen again I have this file explorer that has these are all the contracts that I actually have saved in my remix this just saved my contracts in local storage in the browser so going into like logging into my other computers obviously I won't see these these contracts but any contract that I work on it's automatically saved in the browser which is really handy you can connect to github gist's you can connect your local filesystem those are additional plugins you can get going to the solidity compiler you can select different compiler versions this is well i'll talk more about this as we actually get into writing solidity contracts because we're going to be specifying these compiler versions right in the solidity files different compiler versions will behave slightly differently compile the same code into slightly different bytecode depending on what's different about the compiler if you're on a slower laptop you might want to uncheck auto compile especially if you have a lot of contracts because this can can take a long time and every time you edit anything in the in the editor it will try and recompile so this is what a contract looks like making any edit to this file will cause it to recompile so check this box as as necessary and then basically once we have a contract compiled the contract deployer and transaction runner makes this contract available to deploy onto whatever network I have I'll get into more detail about this shortly with an actual example so any questions about this so far and if you guys have any questions as I'm going through any of this stuff just feel free to raise your hand because we've got this room for two hours this presentation is not going to take two hours so interruptions are welcome alright so if you guys are in the presentation this link will actually open remix I'm gonna close this one will open remix with a specific github gist available to it in the file explorer called simple storage for those of you that came in a little bit late you can access this presentation at tinyurl.com slash fiddle - waterloo and then you connect you can access all of these URLs so yeah this this link will load remix with a specific simple storage contract already loaded it's available in in the gist you guys able to see that on your computers ok cool so I'm just gonna go through this simple contract and highlight some some key parts about a solidity file and you'll notice that the first line is a pragma solidity statement and it's actually saying greater than or equal to zero point 4.0 or less than zero point seven point zero this is the compiler specification so this is saying that any compiler version between these numbers is going to be valid and the compiler will throw an error if it's outside of this range this is important because syntax actually changes quite a bit between compiler versions so you don't want to make assumptions about how your compilers gonna behave this is required and something to note about remix I have auto compile selected so as I add 'it this file it's gonna try not to compile and remixable throw errors like this when it can't compile which is super handy it will also tell you exactly what's going wrong if you mouse over the X in this case I just don't have the line ending in a semicolon yeah I have this this is a comment it's just like JavaScript where you can do two slashes or a slash star to do code comments right in your solidity file so this is just a note that I have this an instance of this exact contract to deploy it onto the rinkeby test network at this address but yeah this is just demonstrating what a comment looks like and then I have a contract here defined as simple storage yes solidity or just like aetherium development is similar to object-oriented programming in the sense that we can think of contracts on the etherion blockchain is like we can call it a contract oriented programming where instead of objects living in a global space we have contracts living in the global etherium space so here I'm just defining a contract called simple storage and yep yeah the difference I think the difference is between objects and contracts might become more clear as we go through how contracts are defined and then how they actually behave on aetherium so let's talk about that more at the end of this and yeah just bring that question up again and maybe maybe we can all answer it so yeah typically in a solidity contract file we will declare storage variables in the top of a contract so that brings up the idea there's multiple types of of there's multiple types of memory in aetherium in contracts we have storage variables so in this case we have a variable called store data and that's going to be persistent across that's basically going to be data that lives on on chain this data will always the stored data variable will always be accessible for people to read and in this case update since we have a function that allows users to update the function but this data is persistent on chain that's a key point about storage variables this is the only storage variable for this contract so and it has its of type unsigned integer we use that we define the type using the U nth syntax here before the variable name there are many more types for solidity we'll get into those more in future contracts in the next contract that will be coding but yeah so solidity is a statically typed language so that means we have to basically define the type of all the variables as we declare them so as we go into like line 9 here we're defining an event for this contract called storage update an event is a specific it's a specific thing in solidity or just in aetherium where there's there's essentially a log of of data associated with transactions and declaring this stored storage update event will allow us to write information to the logs when when a transit action occurs that calls this event so foreshadowing this yeah this thing in line 13 as I mentioned solidity is a statically typed language so for all the data that we want to associate with this event we have to declare the type and the variable names yep why do you need to log stuff it's handy to log stuff because it makes it easy to basically read when actions happen on chain so when we get into using web 3j s there's you can actually subscribe to the logs on chain so you can basically say I want to look at this contract to see if this event ever happens when those events happen you'll basically get a notification that it happens in the JavaScript library so it's extremely handy for building interfaces because for instance in this set function we can emit an event called storage update and if we have our JavaScript library watching for this storage update event will automatically get a notification that happens we won't have to be constantly query incurring storage data value is will just be notified whenever it changes so it's a good heuristic to basically log an event every time the state of your contract changes so like the front end of an application can can just be watching all of the events on a contract and it should be able to determine what the state of the contract is without having to read any of the state variables directly it can just listen for events whenever events are triggered it can update updated state or its representation of the state so we've declared this event and this simple storage contract just has to two functions it essentially has a set function and the get function just a getter and a setter this set function takes one unsigned integer variable X and it's just going to set that to the store data storage variable and it's going to emit the storage update event with the new value and then also the address of the of the account that called the transaction yep that's an excellent question I actually have a link to that in the next contract that will be that we'll be looking at but the main ones that that we'll be using our message sender and message value message sender will give you the account of the essentially it gives you the account of whoever sent the transaction sometimes that's a contract sometimes that's an account owned by a person that gets a bit in too into the weeds about how there's different types of accounts on etherium I guess we can just go into that now essentially if you guys are familiar with meta masks we have accounts here where we hate they're called externally owned accounts where these are accounts that are associated with private keys and we we think of them as owned by people these are accounts that people sign up for and they're people create there are also contract accounts so if I deploy this contract on to the network this contract account will it won't have a private key associated with it that's created but it will have an address it will have an account balance and it will have associated data so just by looking at just by looking at the account addresses you can't actually determine if an account is an externally owned account or a contract account but if there's Associated code you can tell that tell that it's a contract account I just want to note also that this set function is marked public this means that anybody can call this dysfunction it's not restricted in any way so it's Kabul by other contracts it's called callable by any externally owned account and then there's just a gutter function and all this function does is return the stored data value so it's just gonna read the stored data value and yeah that's a quick intro to a simple storage contract in solidity any questions there yep exactly so a transaction is a function call or a function call requires a transaction transactions on aetherium can be simple value transfers where you're literally just updating balances in different accounts but they can also have data associated with them and if you send a transaction to a contract and have associated data that contract will read that associated data and interpret it in a certain way using that associated data it will determine which which function you actually want to call it will read the input variables based on how the contract is defined the types of the inputs and yeah we'll get a bit more into that when we're when we're going into web 3 Jas because that that handles a lot of the abstracts away a lot of the complexity around formatting the transactions when you're calling contracts or sending value to other accounts this contract yep so if I send value to this contract or if I update any of the information in this contract there's actually code that's associated with this contract with each account there's a balance there's associated storage if it's a contract account those the either the balance is updated if it's just updating the ether balance like you're sending an ether transaction to it if you're not sending any ether but you're just sending information in transaction data and you're updating the store data value it's just gonna change the code that's associated with the contract account does that make sense all right so I'm gonna jump in to our next example there's gonna be a more interactive example where we're actually gonna code through this this simple Bank contract I know a lot of you guys are brand new to solidity and ethereum I'm gonna call out questions as we go through this so if some of you are more familiar I'd appreciate if you shout out the answers as you know them but all of the answers can be found in this link here just the full of documentation this you guys will probably be referencing this documentation a lot throughout the weekend this is really like the source of truth in terms of how to understand solidity and as you run into problems this play this this reference will be invaluable so yeah in this example I just want to basically create a simple bank this simple bank contract is going to just have variables that store users user balances on the user status whether they're enrolled in the bank or not there's gonna be an owner of this contract there's going to be several events that are emitted as the users and roll and make deposits and then there's just four functions I think that allow users to enroll deposit funds and withdraw their funds so by going through this example we'll learn some more types in solidity and also get more of a feel about what it looks like to to write solidity so yeah we can see we just have a contract definition in line 11 for the simple bank contract and and at the top we're going to declare our state variables these are going to be the persistent variables that persist for the life of the contract one of these one of these variables is just the balances of of the users I don't know if you guys are familiar with mapping types but essentially a mapping type is a it's a key value it's not a list it's just a reference where we have specific keys associated with specific values so in this case we have a mapping of balances in this mapping we're going to store addresses of users and with each address we're gonna have one unsigned integer corresponding to a balance so we can just think this balances mapping can be can be any size it initializes to having essentially just an it's an empty mapping where every address is just associated with a zero balance and and in the comment we actually want to we were actually able to hide the balances in this mapping from from any other smart contract so by making this by making this variable private we can say we can prevent any other smart contracts from looking up the balance of any of the users in this contract so we can prevent other contracts from looking up balances but because the etherium chain is public and accessible by anybody just by the nature of the system and you any user can look up the balance of any user but using this private keyword we can prevent other contracts from looking up balances so a key thing to note here is that this private keyword does not prevent anybody from actually reading the balances it only prevents other contracts from reading balances in contrast with this enrolled mapping we can a lot we want other contracts to be able to look up if if users are enrolled in this contract so we can make this mapping public any state variable or any storage variable defined in a solidity contract mark marked public will have a getter function automatically generated for that state variable so even though I don't have a getter function defined for this enrolled mapping by marking it public the compiler will automatically create a getter variable for it and likewise with the owner address we're gonna make it public so that anybody can look up who the owner of the simple bank contract is this is another basic type in solidity the address type the address type has multiple methods associated with it so whenever you had to have an address type you can actually look up the balance of the account associated like the of that account so owner dot balance now becomes a method that's cobble in my contract also we can call transfer we can send ether and make calls function calls to two accounts with or just to two variables that are of the address type so we'll see what that looks like farther down when we're defining our withdraw function so let's define a few events that we will want to to log as we're going through this contract so we're gonna have an event called log enrolled and this event is going to take one input and it's going to take an input called account address and this is actually an address type so yeah we're going to have another event called log deposit made that will actually omit this event in the when a user makes a deposit and we're gonna want to basically know who made the deposit and the amount of the deposit so when we're defining this event we're going to have an address called account address and the associated amount will be an unsigned integer and we'll call it a mount and let's create one more event called log withdrawal and we're gonna have three arguments for this event because we're gonna want to know basically who's requesting the withdrawal how much they're requesting and then the new balance of of that account so we'll create an event called log withdrawal we'll have the account address will have an unsigned integer which is that withdraw amount and we'll have another unsigned integer which is the new balance so these are the three events that we're going to have associated with the three ways that users can update the contract so now that we have our state variables defined and we have our events defined we can go into the function section here's based on your question from earlier about the global globally available variables here's a here's the reference in the solidity documentation and here's the list of all of the special variables in solidity so all of these things when you call like message sender in solidity it's going to give you the sender of the current message whether that's the transaction initiated by the externally owned account or that might be another smart contract that's calling the current smart contract if you have multiple contracts that are interacting and as I mentioned message dot value is another common commonly used special variable which is the amount of value that's actually sent along with the transaction we also have special variables associated with a time like this now variable will actually give give you the timestamp of the block of the current transaction oh yeah as I mentioned well we'll go we'll gloss over these for now and as as you encounter these as you're writing solidity you can explore how they work in more detail but back to the simple bank contract we have this special function in all solidity contracts it's just called constructor and this this is a function that will execute when the contract is deployed so whatever code we add here will will be executed upon contract deployment so it's quite common when you have a contract that has a specified account owner as we do in this to set the set the owner of the contract to well whoever you want the owner to be often that is the sender of the contract so in this case we'll just set owner to message sender so when when this contract is deployed the owner will become the account that is sending or that is deploying the contract every contract also has a fallback function well you should define a fallback function for every contract this in to define the fallback function I'm you essentially have an unnamed function and this function will be called if if someone sends a transaction or attempts to call a function on the contract that doesn't actually exist this fallback function will be it will be executed so as mentioned here this function is called if all other functions don't match or this contract is sent in either transaction with no data associated with it so this specific fallback function we are just calling revert revert is a special code that just basically halts the transaction and causes it to not work it throws an error and it doesn't it's not an accepted valid transaction this prevents people from accidentally sending ether to the contract it basically forces people to interact with the contract in ways that you intend that you designed if you don't include if you don't revert with a fallback function you can have the contract accept user funds you can have it you can really have it do do whatever you want but it is common to just cause it to revert so people only interact with your contracts and intended ways so we have this function here this function signature called get balance this is a public function it's going to return an unsigned integer and based on the the comments here you can see it's the purpose is just to get the balance of a specific user so to do to define this where we just need one line we can return the balance of the sender of the transaction oops I think I've missed it so that will look up the in the balances mapping it's going to look up the address of the sender and just return that value so any user can just look up what their current balance is by calling this get balance function remix is giving us an error here or it's a warning it's telling us that these the functions state mutability can be restricted to view defining a function with the view keyword means that this function is only reading the state of the contract it's not actually doing any updates to the contract and because because we're only reading the contract state it doesn't require a transaction it doesn't require an update to the contract it doesn't require any change to the blockchain we're literally just reading data off of off of the blockchain so this is a free Trent this is a free function to to execute we'll get more into what free versus not free transactions are about but essentially essentially transactions cost money to execute because it's a way to prevent spam and basically protect against the halting problem and when you're running a globally distributed computer so yeah the key thing here is when you define a function called view it's only reading blockchain state it's not sending a transaction and these are free to execute so getting into our functions that actually do cost to execute our first one will just enroll a customer within the bank we're gonna mark this public because we want anybody to be able to join our bank and we're just gonna update the enrolled mapping for the message sender to true if we go back up and check our enrolled mapping it's a mapping from addresses to boolean so we're associating a true or false value with each with each account by default they're all false if you look up any account in this mapping right after the contract is deployed they'll all be false so as users enroll in this contract we will update their enrolled status to true and we're gonna admit the associated event so we'll just log enrolled and checking on what the event emits okay it just emits the account address so we can just omit the message sender and it actually has a return value of a boolean and it's not uncommon for solidity functions to just return true when they successfully execute so you might see that on some other contracts if you're looking those up online yeah any question yep how did it define the default State so you mean like why are they all false to start that's just the way that aetherium works essentially any state variable that's declared but not defined so we don't actually have this set to anything right like it's just it's just declare that it is a variable by default if if the evm the etherion virtual machine is going through and looking up the state of any address it's just going to default to false so if it's not there it's just as oh it's false for example let's just say we have an unsigned integer called X and we just leave it like that defined like that this is going to be 0 if you can actually look up the value of x here and it's going to default to 0 so all state variables default to have a default initialization value even if you don't set them boolean is default to false integers default to 0 addresses default to 0 just a string of zeros arrays default to just empty arrays so good question so you have the next function we're just going to declare the deposit function and we just want users to be able to deposit either into the bank we want the users balance to be updated we want to make sure that the user is actually enrolled before they can make deposits and we want to omit the appropriate event when a deposit is made and then we'll just return the balance of the user from the function when it's done so first thing we're going to do whenever we have conditions that need to be met in it when a function is called in this case we want to make sure that a user is enrolled we actually want to do that at the beginning of the function so to check conditions in solidity we can use this specific require statement and then the first thing it's going to take is a condition so we can say we want to require that the enrolled status of the message sender that's actually equal to true so this condition is going to be evaluated and if it's true it will proceed if the condition is not true so if this if the sender is not actually enrolled in this Bank the transaction will revert it won't continue executing and the transaction will fail we can actually send a second parameter to this require statement which is just going to be the error statement that is is logged when the transaction fails so we should say we can say something like [Music] sender should be enrolled and this is helpful for also figuring out how you're trans where your transactions are failing I mean you could have four or five require statements at the beginning of a function and adding these strings about which require statements actually failing is really helpful for determining where the state of your contract is not aligned with your assumptions so after we check that the the sender is actually enrolled we want to add the amount to their balance so we're gonna look that look up there their balance in the balances mapping and we can just add the message value that they sent along with the transaction so remember in in the special variable special global variable message type value is just the amount of weh-weh is a subunit of ether ten to the 18 way is equal to one ether so it's a very very very small amount but it's the smallest amount of value measurable in etherium so that's the the smallest unit but a unit of account once we update their balance we are going to omit the appropriate event so a log deposit made I think we logged the message sender we're gonna log the account and then also the value of their deposit we're getting a couple errors let's see what that is we're getting an error saying message dot value can only be used in payable public functions so we have not defined this function as payable which we need to do for this to work payable declaring a function payable just means that it will be able to handle message value this is a protection to basically ensure that only functions that should be accepting ether that should be accepting value transactions will be so you as a programmer have to explicitly state that this function should be be handling ether and then when this when this contract accepts a transaction with Associated value the the balance of the contract is actually incremented by the amount that's that it's sent so there's not actually a value amount associated with each user in this contract there's just one global balance in associated with the contract but in this balance is mapping we're keeping track of the amount that each user actually deposits so once we log the deposit event we're just going to return the balance of the sender of the transaction and the really of one one function left to implement in this contract we want users to be able to withdraw their deposits this function is going to take one parameter they withdraw amount i'm defined in way and to allow users to withdraw their funds we actually want to do a check here to make sure that they have made the they've deposited enough ether to be able to withdraw the amount that were requesting so to do that we're going to set the condition here where we look up what their balance is in the balances mapping and we're going to make sure that is greater than or equal to the withdraw amount and if they fail that check we can say they don't have enough funds to make that withdrawal after we do the check we want to update the global balances mapping help to withdraw amount so when they actually when they actually withdraw their funds we track that in the balances mapping because as I said the balance of the contract is gonna be holding the funds of everybody that deposits and where we're actually keeping track of each user each users balance is in this balances mapping so we need to update there and then we actually need to send the person doing their withdrawal requests we need to send that value from the contract to their account so to do that we have this message senders of address type so on variables of address type we have a method called transfer and it takes one argument which is the amount to send so to actually send funds from this contract to a user we just call message sender dot transfer with the amount once we transfer that amount we're going to omit the withdrawal event to log withdrawal and let's see what it takes the account address the withdraw amount and the new balance so we'll log the sender will that withdraw amount and the new balance and we're going to return we return then users a new balance as well all right so we have a simple Bank contract coded and it looks like it compiles any yep there is a way that we can look up the balance let me see if we call if we define a balance here this is gonna create a getter for for the balance and as we will move on to deploy this contract and we'll actually inspect a balance as we we send it send it value so now that we have this contract that compiles correctly we can look up details in the compilation in the compilation plug-in and in remix but we're just gonna jump over to the deploy and run transactions I want to highlight that in this in this tab we have an environment drop-down where we can select the JavaScript VM or injected web 3 JavaScript VM is essentially a blockchain simulator that's going to be running right in your browser so it it's an it's a like a local version of a cerium that follows the same rules it's just running right in your browser so it has the same opcodes it follows the same rules everything works functionally the same but it's really easy for testing and experimenting with contracts because transactions are instant you don't have to use real value you don't have to wait for processing times or anything this javascript vm comes with five accounts that are all pre funded with ether so you can send value right off the bat and yeah we'll just deploy this the simple bank contract you'll see it popped up down here and deployed contracts I have a simple bank deployed contract instance down here which has an address you can see it starts with six nine two ends with B three a clicking this this clipboard here will copy that address if I need to to paste it somewhere else but in this interface I have all the functions that I defined in in my contract so my fallback function my deposit function these are both marked with red buttons because they're payable I have enroll and withdraw which are yellow because they are standard transactions and then these blue buttons are get our functions so they're just reading contracts eight the ones that take input just have input fields right here so I can oh yeah one thing I want to mention is this output down here this console will basically show you the status of your transactions that you're executing in this Left panel here so clicking the drop down you can see the status you can see transaction hash you can see the contract address gas costs which are just the value that's required to send along with transactions to prevent spamming the network and any other associated information with the transaction so I'm going to clear this and I'm gonna try and deposit some money to this contract from this first default account first I'm gonna just check I'm calling to see who the owner is I'm getting this returns CA three five that's the contract that I have or the this is the account that I currently have selected and this is was set this account was set as the owner in the in the constructor that we defined so I can look at the balance of the the owner it's zero I haven't deposit anything I can check the enrolled status clicking this clipboard here will copy the account address current account address I can check the enrolled status of this account it's returning false because I haven't enrolled yet I can check the balance and the balance is also zero if I try and deposit some funds to this contract I'm gonna just try and deposit 12-way you can see that this transaction actually fails there's a revert here and we can see that there's a reason provided by the contract oh the sender should be enrolled that's the require statement that we defined in the deposit function so first I'll enroll this account in the contract I can see it was successful it's returning decoded output is true there's also the event information that we're logging here the event is called log enrolled I can see there's an account address see a35 which is the account that we are transacting from right now so now that this account is enrolled in the contract let's try and try and deposit 12-way again this transaction was successful you can see the output there so now if I look at the balance of of this account it's actually twelve and just to check that I can withdraw less less value than I deposited this transaction was successful and my new balance of this account is one so using the JavaScript VM is a fast easy way to experiment with your contracts and just do some manual testing to see if they're behaving as you expect also if your contracts aren't behaving as you expect it's a great way to just edit things inspect contract state and yeah you're provided with this like this interface that's much easier to interact with your contract than some other development environments I want to bring up meta mask at this point you can connect remix directly to madam asked by selecting injected web 3 as your environment what this does is so meta mask injects a object into your browser which is connected to the etherium network in this case I have an account with the first three characters 7 d6 and I'm connected to the rinkeby test Network I can change to the main aetherium network or other test networks or local development networks if I have those set up I'm gonna leave it on rinkeby for now but remix will detect which network I'm on says that I'm on the rinkeby network right now and it has the Associated meta mask account with my ether balance I have one point zero two ether in account which corresponds with madam asked so I can actually deploy contracts to various networks using the injected web 3 right now so if I want to deploy this simple Bank contract to the rinkeby test Network I can just click deploy madam ass is gonna pop up asking me to do a contract deployment it's gonna give me gas estimates and I'm just going to confirm this and madame ass is gonna send this to the test network and actually deploy it onto the test net so this is gonna take several seconds to actually be mined and included in the in the test net blockchain but once it is it's gonna pop up just like it does in the JavaScript VM and it's giving me the address at which you can now see this simple Bank contract so you guys can actually go to the rinkeby ether scan block explorer and you guys can see this deployed contract that i just that just deployed so i don't know if you guys are familiar with ether scan block explorers allow you to just basically look at all contracts all transactions the balances of every account it basically allows you to look at the details of everything that's going on on the blockchain so there's just regular ether scanned IO will show you the etherium main net and then there's an ether scan for each each test network as well so now that you guys know that this contract is deployed at this address you can start interacting with it you can enroll in my simple bank you can make deposits you can make withdrawals but to do so you will need an ether balance in your account on the rinkeby test network again paying for transactions on any aetherium network is required to prevent spamming the network essentially so as I have links to ways to get test net ether in my slides but if you just google rinkeby aetherium faucet the first hit should be a link to get test net ether to start sending transactions so with that I think that's everything I want to cover in terms of coding smart contracts in solidity in using remix are there any questions about using remix right now cool oh yeah between require the difference between require and assert so require is a check typically used as a check to verify like user input to a function and it's a condition that may or may not be true when it when you get or when the transaction gets to this point assert statements are typically understood to they should never actually happen they're similar in the sense that assert statements if they fail the transaction will will fail it won't be processed and state will be reverted to what it was before the transaction but yeah it's more like a check to basically say that your contract should never get into a situation where an assert statement fails you're kind of coding in assumptions about how your code works or expectations about how your code works whereas with this require statement I'm not saying I expect or like I don't necessarily expect the message sender balance to be greater than the withdraw amount it should be for this function to execute but it's totally possible that somebody calls this withdraw function who doesn't have sufficient funds to withdraw as much as they're requesting does that make sense cool all right so I have one more exercise called the supply chain exercise in my slides I'm not gonna go over it here but I'm gonna leave it to you guys to go over that if you would like if you go over that and you have questions about it and feel free to reach out to me but yeah this is I think we covered everything here oh yeah one goal I have for you guys is to deploy some contracts to the test net by the end of the weekend so connecting your remix to meta mask connecting that to the test net and having test net ether to actually deploy a transaction and as I mentioned throughout blockchain interactions cost something to avoid spam and address the halting problem in the theorem that's called gas you have to pay for gas with ether to to basically update the state of the blockchain whether that's deploying a contract or updating the state of any contract and there's a link to the rinkeby test net faucet here in the slide there's several other test nets and aetherium called there's one called Rob's ten there's another called Kovan there's another called girly and yeah they're they're all good to use they have slightly different they process transactions at slightly different speeds but yeah the your contract was gone hmm I'm sorry to hear that I don't know why I don't know why I didn't save oh you so you switched networks in meta masks and then the page reloaded and that your your progress didn't save okay I guess that's a good warning to everybody if you're developing contracts in remix be wary of switching networks and not having the state of your contracts saved it's automatic as far as I know I don't think there's a save button anywhere if anybody else knows otherwise please let me know but yep yeah I guess that's a good point especially since if you're using remix as your only development environment it feels risky to just have your only progress in a window that may not be saving your code so just say frequently I guess so we deployed our contracts and I just want to mention some additional considerations that we have not covered in this presentation so far since we are just focusing on getting skills necessary to write contracts deploy them and interact with them we're skipping a lot of important details about a cerium development I have links to more information in this slide but the quick overview is we're not going over any design patterns of how to develop contracts so he's been around for a few years and people have come up with good design patterns on on ways ways you should do certain things including destroying contracts that aren't no longer being used so they were moved from the blockchain coding factory contracts which are essentially contracts that deploy contracts themselves which is an interesting pattern and there's a lot of patterns around handling user funds so you don't accidentally lock them or or lose them there's also a lot of best practices that we're not covering in terms of maybe using vs code or another editor that isn't remixed so you don't lose your progress as you go also setting up testing environments you guys may have heard of the truffle development environment that has testing built into it we don't really have great testing and remix there is this testing solidity unit testing plugin but you actually have to write your tests in solidity as you're going through which presents some unique challenges it's often a lot easier to just write them in JavaScript using a tool like truffle or or waffle so testing is definitely key to writing creating good projects there have been a lot of attacks on a theory em over the past few years those are well documented and we have not touched on any of them so far and there's a large suite of security tools just a couple our our myth X and slow there so you can just run static analyzers on your code and they'll highlight some vulnerabilities won't catch everything but it's definitely better to run your code through these security tools than not so we touched on how you can interact with your contracts using remix I guess before I actually let me jump back to the simple storage contract so I want to show you guys how to connect remix to a contract that's already deployed so as I mentioned in the simple storage contract we have this contract defined at this address on the rinkeby net test net we can actually connect to this already deployed contract using remix using our deploy and run transactions plugin since we have the simple storage contract loaded here we can basically tell remix that we know well first we're going to select injected web 3 so we have it connected to rinkeby and we can say i know there's an instance of this simple storage contract at this address provided and it's gonna give me an instance of this simple storage contract at the address that I put in so you can look up any deployed at deployed contract on any on any network and just if you have the if you have the code the solidity code and the address you can create an instance and then start interacting with this contract on the test net so this is a nice easy interface from a developer perspective to read contract state let's actually see what the contract so the contract currently has stored data value of 42 I can update that to five and send it to the network I can see the transaction processing it's this is the actual instance of the simple storage contract as the contract definition here I can see the transaction history I can see I've actually been interacting with this contract quite a bit doing testing and I have this this transaction history on the test net and it just processed another one 20 seconds ago with that update so checking it again yep it's updated to five so this is a cool way to interact with contracts on the test net or maintenance but it's not very user friendly you're not going to get people to load contracts into remix to do any interaction so to basically handle that we have the web three j/s library to explore how that works I have this exercise that I put together it's going to go through using web 3j s in the right in the browser it has some transactions pre-programmed in this lesson so when you open this page madam asked will prompt you to send some transactions but will will rerun these as we go through as we go through the lesson so essentially web 3j s just tracks away a lot of the complexity of dealing with with contracts and sending value around aetherium in cents it's a JavaScript library you can just import web three.js right into your front-end of your application and have it talk to madam asked to read contract state from the blockchain and also send new transactions so yeah this is kind of a wall of text right now this is this link is available in the in the slide so you can go through it at your own pace but I want to highlight yeah a few things first thing is that if you the first time you're accessing this page madam asked is not actually going to inject the inject your information right off the bat you actually have to ask meta mask like the developers have to ask madam asked to access access the accounts to do that you can just run this function aetherium enable you can run that right in in your front-end application you can run it here or in the browser console but madam asked will keep it will remember every site that you grant access to it didn't ask me to provide access to this site because I have already authorized observable hq.

com to permit a mask to inject the account information so if you're having trouble accessing any accounts from Anna mask you might need to run this aetherium to enable function it's also something to note is there are multiple versions of web 3GS which is kind of kind of frustrating the latest stable version of web 3G is is 0 to X and that's this is the version that's automatically injected by meta mask so if you inspect the web 3 object in your browser console when you have meta mask installed you'll see this web 3 JS version but the latest version in development is one dot X so in this example specifically I'm getting web 3 Jas version 1.2.0 from the JavaScript j/s deliver a CDN and then I'm just saving that the JavaScript library in this web 3 Jas variable here and then to connect the the library that I just got to meta mask I'm just calling this function new web 3 Jas at the web three current provider web 3 is the object that's injected by meta mask and I'm just calling this web three Jas to avoid any naming conflicts in this exercise usually it's just called web 3 you'll just say web 3 is a new instance of web 3 using the madam ass provider something I really like about this exercise is you can actually inspect the results of these functions as we go through so you can actually see that web 3 Jas is now an object available the current provider is the meta mask and page provider there's a selected address by this with this value which is the account here that I have the network version is for the chain ID is is 4 as well this chain ID corresponds to the rinkeby network the rinkeby network is chain ID 4 I think Rob's 10 is chain ID 3 Kovan might be 5 but may net maenette is a 1 well yeah in this web 3 jas object now I can see all of the I can see the version I'm using version 1.2 at zero and I have a whole bunch of methods in this eath property associated with blockchain information like accounts the network I have the provider specified I have a contract function so this is an extensive I mean this is the entire library right here so there's a lot of functions there and we'll be using these functions in the web three.js library to inspect what's going on on the rinkeby network through the rest of the exercise so just as an example I'm defining a transaction object here and I'm just defining a few things I'm gonna say I want it to come from the injected account so that's going to be my web 3j s selected address in in the given provider I'm gonna send it to it's currently at the same account but let's say I go over to this account I don't know why it's not copying oh that is the correct one all right so now that I have yep so if i refresh the page so it detects the the new account we don't reject these transactions I can see that the two account is my actually account number two from account is the my current account and I actually have a gas price set so I can run this transaction by just calling the web 3 library ethics and trans send transaction and this will try and send a transaction to the network so running this cell will prompt meta mask to actually send a transaction with an ether value of point zero one which is what I specified here and the value so let me actually send that and we'll see it it's going from my first account to my second account I'll just confirm both of these so it's gonna send 0.

02 and so including including this this JavaScript in any front-end application in a browser will do a similar action it will ask meta mask for the user to approve anything that you provide in this so I can even change this to this could be a user input field where I basically ask the user how much ether they want to send if I update this cell and run it it's gonna ask me oh now I want to send do I want to send 0.51 eath to this account - sure and I can see these these balances are being updated so simple value transfers are pretty easy since we're using the rinkeby test network we have we don't have to worry about nonce mismatch errors as much this is something you might encounter if you're using a local development blockchain like ganache ganache can cause problems because you're changing your network ID so frequently basically every time you start it there's a new new development blockchain the accounts have a specific sequence of there's a sequence of transactions I mean it starts at 0 goes up goes up incrementally let's say you're developing on a test blockchain and you send 500 transactions on your test blockchain you start a new one meta mass is going to remember that you're at transaction 501 but on a new chain it has to start back at 0 so sometimes if you encounter an ounce mismatch errors that's just what's happening you can reset that counter in meta mask by just going to settings advanced and you can reset the account which basically meta masks will just query your development blockchain to get that latest information it's not gonna it's gonna clear the cache basically that's what happens that happens like I said it's not gonna happen on test nuts as much but using development block chains it will and you can also just like read account information using the web 3gs library so like I can say web tjs get balance get the balance of the current current address this is around 1.0 - eats I think what I sent about half and eath to my account - so they should update - about half as much and yeah looks like a bunch of my teeth went to my other account so the balances is updated that's all fine and good just like sending value from accounts to other accounts but that's not the most interesting thing about aetherium sending interacting with smart contracts is really what we want to do on that single so in this example I'm going to show you how to connect just like we connected remix to our simple storage contract here on the rinkeby net at this address i'ma show you how to do that using the web 3j s library so I have the simple storage address the same one defined before right here and then I have the ABI which is the specification that lets the the library know how to interact with the contract in remix this is generated automatically because remix has access to the source code of the contract so this this ABI is actually generated automatically when the contract is compiled if I go to the compiler details I can see the ABI information here this is all handled automatically by remix but since web 3 Jas in this instance does not have access to the contract source code and that's not published on chain anywhere we have to provide that information to the web 3 Jas library so so the library knows how to interact with the contract at this address so I have this published on github and basically to create the contract instance in or to we're creating a a contract instance in web 3 GIS and we're not creating a new contract on chain we're just in web 3 Jas we're saying we have this contract at this address and we want to basically create a new contract object with that so we can just do that by saying I have a simple storage is going to equal a new web 3 js8 contract with the ABI and the address and it's going to return this this object to me that allows me to interact with the deployed contract we can see this contract object is connected to meta mask it's got some options this is the ABI and the address and the most interesting things that we want to pay attention two are the methods which we can see here we have the set method and the get method they're both functions and we also have events we have one event called storage update which corresponds to with what we what we looked at earlier so to interact with this deployed instance we just need to call simple storage methods set and get and that will be it will send transactions to rinkeby test net and we able to read those updates so as I updated the this contract in remix you guys remember I updated it to five with the remix interface connecting to it through this exercise I can see that the current value is five I just called simple storage methods get dot call which just specifies that I'm just reading the contract I'm not actually sending a transaction to it but yeah just letting me know the the current state of the stored data value is five and then to update the contract I have this I have the contract object I want to set it to let's set it back to 42 so I just called simple storage method set with the value that I want to set it to and then that send to specify that I'm sending a transaction and not just reading the contract state and I want to send it from the current meta mask account so I'm just setting it to the selected address so if I run the cell meta mask is actually asking me to run the set function and I'm going to confirm that and this is sending it to the rinkeby test net and once it processes we'll be able to see that it updated so we can actually see that this transaction object in this exercise changed it it lets us know the block hash the block number and gives us information about the transaction transaction hash events associated with it so when when the transaction is successfully processed on the network it returns this information this is done with JavaScript promises if you guys are familiar if not there's links to how JavaScript promises work in this exercise and you can read more about how to work with asynchronous functions in JavaScript but now running this the cell to read the contract again I can see that it's actually updated to 42 if I go back to remix and look at the state of the contract and remix and also see that it's pointing to the same place one last thing I want to show about contract events we're logging an event whenever this contract is set whenever the stored data value was set so to subscribe to a contract or just subscribe to events in a contract I just call simple storage that events dot the event name and then it takes a callback function so in this case I am actually just logging this event to the browser console whenever event an event is triggered so I think this is actually yep this is the set event let me just send another transaction and we'll be able to see another event get logged but a common way to use these events in application front ends is to when when a page loads you set up all the event listeners that you want to pay attention to on your contract so then as these hooks get called you can update the UI for the user without them having to reload the page and they'll see all of the updates instantly so you can see that this event actually just logged in the console and I can see the address of the contract transaction hash transaction information I can see the values that we actually wanted returned we can see the account that is updating it as well as the new value so these events are they're not as useful for sharing information on the blockchain but in terms of building quality user interfaces events are super helpful yeah that's that's it for the web 3 Jas exercise again documentation on web 3 Jas is going to be your best friend as you're going through this and trying to understand how all of these methods and these functions work let me just see what I'm missing additional developer tools like I said we're just building some necessary skills to be able to build something this weekend so that's just writing contracts and being able to interact with them but there's a full suite of tools made available for developers and some of these are are listed here with additional information ganache I mentioned a few times just allows you to run the development blockchain it's similar to the JavaScript VM and remix but it's not running in your browser it's we're just running on your local machine so it's not dependent on your browser and it's it can be persistent across like multiple browser instances and stuff it's not just stuck in one window the truffle development environment it's a it's a more like fully fleshed out framework for developing smart contracts like I mentioned earlier it includes testing javascript testing is super helpful it also includes a version of ganache so there's you can actually run development blockchains right in truffle as well in Fury's another great tool which is in fira is a lot allows you to connect to the etherium network without having to run your your own aetherium node that's how a meta mask actually connects to all the networks that it does it just makes API calls to in fira so in fear just has a api service that allows you to read contract states and send transactions as the areumdawo org slash developers is a great page with a huge list of developer tools that's constantly being updated so I check that frequently open Zeppelin has an awesome set of contracts that's already they've written and they've been security audited they're they're super useful if you're interested in developing anything with tokens or crowd sales or having role based access control on your contracts they have they have contracts that you can just import into yours that that already handle this behavior all of these underlined items are links so you guys can access them through through this deck and for those of you that came in later you can access this deck at tinyurl.com slash little waterloo consensus also has a huge list of developer tools there's a lot of overlap there with the etherium that org site ipfs is not an aetherium project but it is a distributed data storage so storing data on aetherium is very expensive it's like very very expensive it's cost prohibitive so a common solution for storing large data sets or references is to store it on ipfs and just include hash pointers in smart contracts to locations on ipfs we can talk more about that later if you guys are interested in a data solution and then as I mentioned and we looked at today ether scan is a black Explorer that I use extensively for just looking at test nets and exploring contracts so I have a few more links here to allow the documentation that I referenced and yeah that's that's it for me I'm do you guys have any questions before we wrap up yep how can you reduce the gas cost there are some optimization techniques that we can talk about later but essentially there are tricks in terms of so the most expensive operations are storing data on ethereum and then reading and updating data like in in storage variables so basically if you can reduce that that's a great way to reduce gas costs just reducing execution wherever possible or like making execution I want to say like breaking it up into smaller chunks and distributing it among users so it's not just like one person or like one account doing batch transactions for a lot of people I do have some optimization exercises that I have for the course that I'm willing to share and yeah just things to keep in mind as you're as you're developing cool any other questions alright well thank you for for coming thanks for paying attention thanks for sticking around and again I'll be around all weekend let me know if you guys have any questions or if you have any ideas I love brainstorming on topics for for projects and just thinking through these problems so thanks guys [Applause] you