Haseeb Rabbani: #BUIDling Utility in the Ethereum Ecosystem Workshop | ETHDenver

all right good morning everybody Bikaner sorry I couldn't resist welcome to youth Denver my name is Kent I'll be your emcee for the first half of the day here as a reminder this is the each stage where we have workshops throughout the day we also have the way stage over here w/e i way so be sure to check out both I want to welcome everybody I believe we have people from no fewer than 23 Nations attending today's event and I believe this is the largest blockchain hackathon to date ever so far so thank you for coming there'll be a lot more interesting things going on today I super excited if you see people walking around in purple shirts give them a high-five because this this would not happen without the work of the volunteers so thank you volunteers and staff you're making this happen so without any further ado I want to invite our first guest for the workshop up to this stage Hasib Rabbani is formally or currently with block geeks and currently working on a project called ethers IO which is a perfect example of building utility into the etherium ecosystem we're gonna learn all about that right now so welcome thank you Ken so ok awesome let's get started hey everyone my name is Hasib and i am one of the instructors at block eeks and i like to call myself a dev Angeles and I'm super excited to be here with all of you today at this amazing event and you know thanks to the East Denver team for organizing all this and getting everybody together this is great and thanks for having block geeks as a sponsor as well we're really proud to be a part of this of this hackathon so thanks for having us so my workshop is called intro to ethers i/o and before we dive into that I'm just gonna give you a little bit ground on block eeks so block eeks is based in Toronto so we're from Canada and one of the cofounders of block geeks is Demetri butyrin who also happens to be Vitalik butor ins father and I like to bring that up because you know Demetri first encouraged Vitalik to learn about Bitcoin and blockchain x' and he went on to invent aetherium and that that really resonates with me because you know it goes to show how you know the right type of encouragement and guidance early on can can literally change the world and so continuing in that spirit of learning we have block eeks and what we're doing with block geeks is encouraging everyone to learn and to learn about blockchain to learn about etherium and to learn how to build these awesome new applications and so the way block geeks does this is so we have a bunch of online courses that we've produced ourselves so we're building a blockchain curriculum we also have a bunch of free articles and guides online that you may have come across while you were googling around for information about what blockchain is and we also do a lot of in-person workshops like this where we you know get to interact with people and demonstrate you know some live coding examples and yeah but the key point here is we developed the blockchain engineering talent and that's where you guys come in so thanks for being here so let's get into ethers dot IO so what is ethers IO it is a DAP development framework right so you can use ethers IO to help to help you quickly build a decentralized application and it was actually created by Richard Moore I don't not sure if Richard is here right now but he will be at this event so Richard Moore also wrote the ethers j/s library that some of you may have used so he's pretty awesome and this is his latest project called ethers dot IO and the way we install this it's available as a node module so it's really easy to install all you have to do is npm install ethers - CLI and this will give you a bunch of command-line tools that will make it easy for you to quickly get adapt up and running so how does ethers do compared to other adapt development frameworks like truffle right truffle is one of the the most popular adapt development frameworks today so you know ethers dot IO is also adapt development framework but it has some minor differences right so first difference is there's only one npm module to install so it's a lot quicker to get set up and running whereas with truffle you have to install a bunch of other libraries as well ethers dot IO doesn't require running an ethereal node so it'll use in fira and other service providers or you so you don't actually have to run death organ ash at all it also comes with a webserver bundled in that that node module that allows you to quickly get your front and serving through a local HTTP server and you can quickly see what your adapt looks like and it also includes this front-end hosting where you can host your adapts called ether space and I'm going to show you how to how to do that in a moment but yeah you should definitely check out the documentation at docs.bmc.com content ends and backends and the front end is you know what the code that runs inside your web browser inside your chrome and it's written in HTML CSS javascript for the most part right and we also have a back-end that is our actual application logic alright and that usually sits on a hosting server like AWS and it's usually written in rails Django or nodejs whatever you prefer and the way the front end and the back end typically communicate is by sending HTTP messages and we usually use something like jQuery to help us send those messages back and forth between the front end and the back end so that's how traditional web apps are architected today but with DAPs the architecture changes slightly right so we still have a front end and a back end right and the front end for the most part stays the same right like we still write the front end in HTML CSS JavaScript it still runs inside your web browser but the back end part over here looks kind of different right so we're not using AWS anymore or another hosting service we're actually using the etherium blockchain as our back end and the smart contracts that we deploy to the etherion blockchain contain our application logic and we can interact with the backend also using libraries like jQuery but also web 3 j/s which some of you may have come across as a popular JavaScript libraries to help you interact with block chains so okay now that we've understood you know a little bit of the architecture if we zoom in to the front-end part so that that's what we're gonna be focusing on in this workshop the front-end UI and we're going to use ethers IO to build that front-end UI and so if we zoom in to that front and square we'll see something like this which is the ethers IO architecture and you know the all I'm trying to point out over here is that ethers dot io keeps your keys local right so they never leave your computer right so they stay local and protected also the the way the ethers application so this is the application in the middle and applications run inside an ethers IO container right which is running inside your web browser right and the container sort of manages the keys for you so you know you don't have to worry about keeping the keys safe and your application lives inside this iframe and we direct to this iframe using this link over here right so it's kind of hard to see on the screen but there's a URL fragment right over here where we're pointing to the app that we want to load into the iframe so that that's kind of the gist of how ethers dot IO sandboxes your app and it protects keys from just being exposed on the Internet one one thing to watch out over here though is that hosting your tap on the same domain like ipfs io can lead to some storage clobbering issues so and this is not specific to ethers dot IO right like if you if you share the domain like you're sharing the local storage and if you have a DAP that is stored on ipfs dot IO for instance then that will be sort of detected as the same domain and there may be some clobbering of local storage so that's just one thing to be aware of as well okay now let's get to the coding part so what we're gonna build is a simple blockchain Explorer using ethers IO and if we bring up a browser so what does a blockchain Explorer look like you may have already used one at ether scan do let's try to zoom in a bit and all block explorer really does is gives you a nice UI to view what's going on in the blockchain right so over here ether scan is one of the most popular block explorers right and we have a list of the latest blocks that are being generated on the blockchain and the latest transactions that are being mined in those blocks as well right but we're gonna build a really simple version of this and all we're gonna do is display the last ten blocks on the blockchain right so that's all we're gonna do we're gonna build a really watered down version of this and just one more thing before we get into into the code like all of the code will be available online at a link at the end of the presentation so if you just want to follow along and you know make note of any questions I would recommend that because you'll get the code at the end anyway okay now let's write or let's create our project structure I'm gonna try to zoom in you okay so we'll start by creating a project for our folder for our project and we'll just call it block Explorer seedy into it and we'll only gonna we're only going to write one file which is an index.html file right so let's create that file over here and we'll open it up in a text editor all right so all we have in this folder is this index.html and I'm just going to bring it over into an editor okay cool I'm just using the brackets editor you you can feel free to use whatever editor you like cool so let's start writing our HTML we'll declare our HTML tags we'll declare our head and body you and let's let's give this a title and we're just going to use a simple HTML table to display the data of the blocks right so I'm just going to define a really simple HTML table you so the only information that we're gonna display about our blocks is the block number the block hash and the block timestamp and in order to do this we're going to first import the ether zap JavaScript which will allow us to interact with the blockchain to load data into this table right so I'm just going to import the ether zap JavaScript and it's available at a CDN and the latest version is actually point four we're going to use a minified version of the ethers app javascript and we're going to use it to load data into our table so I'm gonna setup ethers so we can set up our page using one of the sort of hooks provided by ethers and I'm gonna demonstrate that right now you okay so I a function or I set a function to ethers dot on ready right so what this does is you know maybe you're used to setting up your web 3 provider and instance and detecting which one to use so ethers dot on ready sort of highs all that away from you and abstracts that away and all you have to do is provide whenever app initialization logic you want to do inside this on ready function so let's give this a whirl in the browser right and we can really quickly serve this index.

html by you know we're in the same project folder and we're gonna use our ethers command-line tools that we installed right and so we say ethers - build serve right and it starts up a local HTTP server and I can really quickly take a look at what it looks like in the browser and this is just giving me a warning that I'm not using HTTPS and that's okay for development but probably not for production so we're just gonna say okay for now I'm gonna zoom in a bit and we can see that our our table shows up right so that looks good but we also have a bunch of other code that we didn't write right so so this is the ethers dot IO container right and it provides a way for you to manage your accounts it also provides some wallet functionality and yeah so this is the ethers container and our app is running inside of this container so our app can interact with this container and use it to sort to sign messages for instance right so and we're gonna see an example of that so the next step is to okay we got our our front-end running the next step is to get some data loaded in here so let's write the JavaScript that will actually load the data oh and we can quickly check our hello world as well that it came up in the console to go to developer tools okay we can see that our hello world was was printed out okay and we'll come back to this console as well so I'm gonna write and an update blocks function which is going to use the ethers API to get block information I'm gonna put my mic down you so the first thing I'm gonna do is get the latest block number and I'm gonna do that by calling ethers dot blockchain dot get block number and this is going to return a JavaScript promise so we're gonna pass it a callback function I'm just gonna move it up on the screen is this text size okay should i zoom in more cool you so let's verify real quick that our function over here is working as expected so if we just go back to our browser and refresh the page we should see the latest block number being printed out to the developer console okay there was a typo there we go cool let's try that again awesome and we got a block number prints it out here and if we just come so it says 5 1 0 1 6 3 2 and if we just compare that to what we see on either scan 5 1 0 1 5 9 6 so it looks about right it looks like we're getting the right data from the blockchain right so now let's do something with this data so now that we have the latest block number we want to get the last 10 blocks all right so we're just going to do a simple for loop and request the block information for each of those 10 blocks right so I'm going to write that for a loop right now you cool so all I did here was use ethers blockchain get block and I passed it the block number right and I said number minus I because I want the last ten blocks and then this callback function will print the block right so we'll write this print block function real quick as well but all print block is going to do is take the block and add it into the HTML you all right so I've just gotten references to my table and I inserted a new row at the bottom of the table and got references to the three columns in that new row that I created and now I just populate those cells with the data you cool and we just used these properties from the block the number the hash the timestamp and we set the HTML so now let's give this a whirl in our browser see what happens nice so we got a list of blocks printed out right so they're not in any particular order right because the ethers app API is asynchronous so that's why they weren't printed out in any particular order but we see that we got you know the the the block number the block hash and the block time stamp and one other cool trick that I'd like to show you is just by changing the domain right so if I wanted to point this to the roxton test net right all I have to do is type Rob's tin here Rob's Tenorio and it'll give me the insecure warning again because it's a different domain and it's gonna print out a different set of block numbers for me because it's printing out information from the Rob's ten test net right so just by changing the domain name I could point it to a different block chain Network which is pretty cool okay okay so let's let's get to okay now how do we deploy this so we have this running this really simple blockchain Explorer running locally but now we want to make this available to you know to the public to other people so that they can come and interact with it right so how would we do that right so we would publish this to ether space and you would basically get a domain on ether space that points to your app so let's see how we would do that we will use the command line tools so I'm just gonna turn this server off for now clear my terminal and so to use ether space you also need to have get installed right source control live toolkit a lot of you probably already have it so you need to use git in order to manage your files that you want to upload to ether space right so we need to initialize a git repository first and we'll say get in it right so this will create an empty git repository and we're also going to say ethers build in it because we want to generate a key file that we're going to use to upload to ether space right so it's asking me to set a password on my new key file enter it again cool and all this did was create this account dot JSON key file right encrypted with my password that I entered right and we're gonna see how how to use this to upload to ether space in a second so to first tell Eaters about which files we want to deploy we first need to put them under get right so we need to tell git about our files so I'm just gonna add our index.html right and create a commit cool and now I can check that ethers build has picked this up by running ethers build status right and it sees that you know one file was added and that this account Jason is untracked right so it's just getting is just using git to determine which files you want to prepare and deploy right so now that we've created now that we've told eaters which files we want to deploy we're going to use the ethers build prepare command to prepare our adapt for deployment and we're going to sign it as well using the key file that we just generated right so we passion the - - signed option but you can also do it unsigned if you just want to pass it to your friends but if your if you're deploying to production you it has to be signed so this will prompt me for my password that I just used for my key file right and it's gonna create a slug file alright so if I just do LS again it created this dot slug file that represents the signed version of my DAP right and to deploy this now all I have to do is copy this luck file name and say ethers build publish and then the name of the slug file and if we do that and we give it okay that happened pretty quick so this is our ether space domain name right so what we did was we took our DAP our index.html and we deployed it to this place called ether space and now anyone can access our DAP in the world right so if they just take this link right this is all you have to share and we just paste it in here we should see the same application awesome cool yeah so the only difference between you know this version and this version is that over here we've deployed two ether space whereas over here our DAP was local and we were we were developing on it so yeah that's I think that brings me to the end of my coding demo another thing I wanted to point out is that ethers comes with an iOS app so you can actually use your apps on your phone right so there's a third has a a mobile browser on iOS that you can use to basically see this exact same app right so that's another really cool feature of ethers there's a lot of testing features that I I'm not covering over here but I encourage you to check out the documentation online they have a lot of example projects that you should definitely check out and see how to set up you know tests for your adapt so that brings me to the end of my presentation right so as I promised all the coding resources are available at this link right so if you go to bitly slash coding blockchain you'll get you'll see a bunch of links some of them are developer resources some of them are links to the block geeks github that has the source code that you just saw so you can go check out that code and study it more and yeah you can learn more about blockchain by signing up at block geeks we offer a 7 day free trial but also on top of that we're offering a 25% discount code which is BGE --the denver so if you use that when you're signing up on blocks you'll get a 25% off and yeah our next workshop is gonna be on face book is gonna be a live stream and it's on February 22nd just on our Facebook page so anyone can participate and you know comment and ask questions and yeah feel free to reach out to me if you have any questions about ethers or a blockchain or how to get started yeah feel free to reach out to me via email or in person if you see me walking around more than happy to answer your questions yeah and that that concludes my presentation so thank you for thank you for listening