Build Your First Blockchain App Using Ethereum Smart Contracts and Solidity

everybody this is Gregory from DAP university so today I'm gonna show you how to write your first blockchain application I'll show you how to create a to-do list that's powered by aetherium smart contracts I'll show you how to create your first etherium smart contract with a solidity programming language or like tests against the smart contract deploy it to a blockchain it will also create a client-side application for the to-do list so if you're new around here be sure to subscribe to this channel and click the like button down below and also you can download my courses for free on my website over at dap university comm forward slash free download i've got a link to that down in the description below and also on my website you can find a full length article to accompany this video you can actually follow that step-by-step as you're following this tutorial and i've also got a link to that in the video description so before we start actually building the application let's get a high-level overview of how a blockchain application powered by smart contracts actually works so how does a blockchain work and how does a blockchain application work well I've chosen a to do list for this tutorial because that's a really common way to learn any new technology and I want to use that to show you how a blockchain application works so first let's look at how it to do this would work as a web application and then I'll show you how it work as a blockchain application so I'll put my whiteboard up here to demonstrate so normally whenever you access a web application like a to do list for example you use a web browser and you connect to a web server over the Internet and you access you know all the code and all the data from this web server so like this you basically connect from your web browser to the server and on the server it contains all the you know client-side files like HTML CSS and JavaScript it you know contains all of the backend code for the server right and the business logic you might write and any data that's stored your application is stored in a database right and pretty much any other to-do list tutorial that's out there is gonna show you how to write you know client-side application and HTML and CSS and JavaScript and then it's gonna show you how to basically do some business logic on a web back-end that you know creates reads rights updates to do and it puts them inside of a database like this right and all that's you know on a central server and that's how you build a to-do list on a web application so how would you build it to-do list on a blockchain well it would work a little bit differently so instead of connecting directly to a server you know we're going to access our to-do list via a browser and we're gonna you know connect to a client-side application that we will build and this will just be a simple client-side application on a web server but this client-side application isn't gonna talk to a web back-end in a database instead it's gonna actually talk directly to the blockchain and on the blockchain we're gonna have code that's gonna be written with etherium smart contracts that will contain all of the business logic for our to-do list and all the to-do items are gonna be stored on the blockchain itself and that's fundamentally how a blockchain application would work and how it's different from a traditional web application so that might bring up a lot of questions like well how do we connect to a blockchain and how does the blockchain work what even is a blockchain well I'll pause here and tell you a little bit more about that so what even is a blockchain right our client-side application is actually talking to a blockchain right here so it's actually a separate network okay and a blockchain is a peer-to-peer network of nodes that all talk to one another it's a distributed network so there's actually different computers or machines that talk to one another and we can connect to an individual node on the blockchain in order to use it that's what our web applications doing here so all of the nodes on the network participate in running the network they all contain a copy of the code on the blockchain and all of the data on the blockchain and all of the data on the blockchain is contained in bundles of Records called blocks which are chained together to make up the blockchain and all the nodes on the network also participate in ensuring that the data on the blockchain the public ledger is secure and unchangeable and that's what makes the blockchain so powerful and so what about the code on the blockchain well all the code on the blockchain is contained in smart contracts so smart contracts are basically just programs that run on the blockchain and they're gonna be the building blocks of blockchain applications and that's it we're gonna build our to-do list out of we're gonna write a smart contract that will contain all the tasks in the to-do list and allow us you know add new ones and complete them and things like that so smart contracts are written in a programming language called solidity and all the code and the smart contract is immutable which that means it's unchangeable whenever we deployed to the blockchain we won't be able to update that code and that's important understand because that's what makes the blockchain so secure whenever we put code in the blockchain we know we can trust it at that point it's called trust list for a reason whenever it's on the blockchain we know that no one will change it and therefore we know that to-do lists will behave the same way every time and sometimes I actually think about smart contracts kind of like micro services on the web they're on the blockchain and they read and write data from the blockchain and they do stuff with it you know they execute business logic all right now go back to the drawing board and kind of give you a refresher about how our applications gonna work again we're gonna connect to the application with a web browser and we're gonna build a client-side application in HTML CSS and JavaScript and that client-side application is going to talk directly to the blockchain and that's we're gonna put our smart contract will create the to-do list with an aetherium smart contract written in solidity and we'll compile it and deploy it to the blockchain it will also connect to the blockchain network with our personal account with an etherium wallet in our browser and I'll show you how to get that set up in this tutorial as well so now we've seen how a blockchain works and now we can build our to-do list application on the blockchain so let's jump in and start programming here's a preview of the application that will develop in this tutorial this will be a to-do list powered by an aetherium smart contract where we'll be able to add new to-do items and we'll be able to check items off of the to-do list and before you get started you need to make sure you have no js' already installed in a computer you can see if you have node installed by going into your terminal and typing node - V you can install node with a package manager like homebrew or you can download it directly from the node.js website the first item in the blockchain developer toolkit is a personal blockchain we're going to use ganache as our personal blockchain for this tutorial you can head over to truffle Framework com4 slash ganache to download it you can click this download link and whenever you've downloaded it makes you install it and when you open it you've got a local blockchain running so what is ganache you know what is a personal blockchain well a personal blockchain is like a real blockchain Network you know that's connected to the public where anyone can connect to it but it runs on our computer it's you know a closed Network and ganache basically you know as a process that runs on a computer that spins up this blockchain and runs on a server so we can use this to develop smart contracts we can run tests against it we can run scripts against the network develop applications and actually talk to this blockchain it's really helpful it's an invaluable tool and the blockchain developer toolkit so if you open ganach you'll see you know ten accounts listed here these are the addresses to each account on the side and you'll see you know these balances you'll see a hundred ether and this is the etherium cryptocurrency that each account has and it's you know required to you know pay gas fees and the network and stuff like that all right so that's an overview of the ganache personal blockchain network and we're gonna leave ganache here set up in our project because we're going to need it running in order to develop our project the next dependency is the truffle Framework we're going to use the truffle framework to develop aetherium smart contracts with the solidity programming language you can install truffle by going to your terminal and typing npm install - gee truffle at 5.0 - and it's important that you use this exact version in order to follow along with this tutorial so truffle is a suite of tools that allows us to you know develop smart contracts write tests against smart contracts deploy smart contracts to the blockchain it gives us development console and that also allows us to develop client-side applications inside of our project so it does a lot and I'm going to show off all those features in this tutorial the next dependency is the meta mask extension for google chrome remember that the etherium blockchain is a network and we need a special browser extension in order to connect to that Network and that's where meta mask comes into play metal mask will allow us to connect to the blockchain with our personal account and actually interact with the smart contract that will develop in this tutorial you can install meta mask by going to the Google Chrome Web Store and searching for meta mask and clicking install and once you've installed it just make sure that you enable it inside of your chrome extensions like this you can also see the little fox icon and your extensions tab now let's create the project I'll start by creating a directory for our project like this ETH just stands for aetherium so I'll enter into that newly created directory and now once we're inside of here we'll actually create a new truffle project but before we do that I just want to make sure that you're using the correct truffle version you can check your truffle version like this truffle version and you want to ensure that your version is the same as mine which is 5.0.2 so it's not go ahead and check out the dependencies section this video to see how to install the specific version of truffle so now we'll initialize new truffle project like this will just say truffle and knit alright and now we've successfully unboxed in your travele project and now I'm going to actually create a package.json file in order to you know pull in some development dependencies for the project so I'll say touch package.json alright and now I'm going to open this project inside of sublime text that's the text editor I'm using so let's go to the package.json file we can actually see the project directory over here and we can see the newly created package JSON file and it's empty I'm going to paste in the contents of this file that we'll use for this tutorial and you can actually get this package that JSON file by cloning this repository on the github link in the description down below alright so here's the dependencies for the project just go ahead and say this like I said I just pasted these in here and you can see we have a few dependencies like the bootstrap framework we'll use this for building out the client-side application we've got some dependencies for testing the smart contracts a server for running the client-side application and you know some other truffle specific development dependencies and I've locked these versions so that you can keep following this tutorial in the future so make sure that all these versions match what I have here so now I'm actually going to install the dependencies for the project like this so just say npm install all right so now they're installed now let's go back into our project and actually create the smart contract file that we'll use to build the to-do list we'll do that by going to the contracts directory and you can see there's a smart contract that exists inside of here this is actually a smart contract that comes bundled with truffle that manages migrations to the net and I'll explain that here a little bit and now I'll create a new file inside this directory called to-do lists that's sole so we can see that do list is capitalized to-do lists and it's in the same project directory here so now let's actually create the smart contract that will manage the to-do list for the application the first thing we want to do inside this file is actually declare their version of the solidity programming language that we want to use we'll do that like this will say pragma solidity we use a carrot I must say version 0.5 0 and we'll end this line with a semicolon alright now the next thing we do is actually declare the smart contract do that with the contract keyword is a contract and we want to call this contract to do list does the say name is the file say to do list and we followed that with some opening and closing curly braces and inside of here is we're actually write all of the code for the smart contract now go ahead and bump the font up so you all can see this a little better so the first thing that we'll do inside of here is just keep track of a number of tasks that are in the to-do list and we'll store this value inside the smart contract as a way to kind of get started and just make sure that everything is set up properly in our project we'll deploy this simple smart contract to the blockchain and actually see if we can connect to it before we you know do anything any more complicated than that so first we'll keep track of the number of to-do lists inside of the smart contract with the variable and it'll be a special kind of variable in solidity called a state variable and we can declare a state variable like this we'll say you nth task count so state variables inside of solidity are actually written to the blockchain and that's what they're called state variables they actually represent the state of this smart contract on the blockchain and the state of this smart contract is going to change any time this task account changes and these are a lot like you know class variables and an object-oriented context where you know the scope of the variable belongs to the entire smart contract and not necessarily like a function or something like that we'll see that more as we continue on through this tutorial but initially we can set this value to zero like this alright we just say equals zero and we can also create a way to read this value from the smart contract with a keyword called public alright and what that does is actually provide some function for us that allows us to read the value task count from the to-do list and the solidity kind of just magically gives us a function whenever we use this public key word all right that's all we'll do for our basic smart contract in order to set this project up and actually deploy this to the blockchain and make sure that you know everything's set up correctly we'll come back and you know build this out throughout this tutorial but for now we just want to do a simple check to make sure everything works properly now let's actually compile this smart contract before it goes to the blockchain and make sure that we read all our code correctly we'll go to the terminal and type truffle compile and we can see that it actually created some new files here I'll show you that in the project if you go to the build directory and then contracts will see migrations and to-do list JSON so this is actually a JSON representation of the smart contract that's created by truffle and it contains some information that's useful to us this is the smart contract ABI just the abstract binary interface will actually use this later in the tutorial when we talk to our smart contract in JavaScript we can see the byte code that was created by the smart contract this is actually the byte code that gets run on the etherium virtual machine and yeah there's a lot more useful information inside of here but I just wanted to show you that initially now in order to actually put this smart contract on the blockchain we want to create a few more files and I'll kind of give you a tour of the rest of the project structure here as we do that in order to connect to the blockchain we'll actually need to update this truffle - config file alright and I'm actually gonna just paste some code inside of here again you can get this code from the repository for this project the github repo that I've got down in the description below you just check out that link alright just gonna save this and I'll explain what's going on here basically inside of this configuration file we have the network's key inside of this object right so what that does is allows to specify several different networks but here we have a development network that's actually connecting to ganache so this is localhost and this is the port the ganache is running on so while we're here let's go ahead and actually make sure that ganache is running so you can open ganache find wherever you installed it make sure it's open and we can see that the port is 75 45 right and we can see it's localhost 127.0.0.1 475 45 so now that we have this filled out this is actually talking to the local blockchain now let's create a migration file in order to get the smart contract onto the blockchain so if you go to your migrations directory you'll see a file inside of here it's called initial migrations so make sure to copy the contents of this and actually put a new file in the same directory and I'll call it two we'll say deploy contracts is okay what's inside of this directory well these are migrations I'm just gonna paste this code in here so what is a migration well if you've come from another development background where you've used a database you might have had to change the state of that database by adding new tables or adding columns to the tables and that's because you're changing the state of the database the structure right the schema that's essentially what you're doing in this project right here with a migration whenever you're deploying a smart contract to the blockchain you're actually changing the blockchain state remember the blockchain basically is just a big database in one sense and whenever you put the smart contract on the blockchain you're updating the state and thereby you need a migration in order to do that okay and you'll see these migration files over here are numbered and that tells truffle what order they need to be run in so make sure your starts with number two and inside of here but we'll do is actually change this change migrations to be to-do lists so to-do list from artifacts require truffle creates an artifact out of this to-do list JSON that we saw a second ago and that's gonna be just a an abstraction of the smart contract that it understands order to put it on the blockchain now let's actually run the migration and deploy the smart contract to the blockchain so first again make sure that ganache is running make sure that you've you know configure this correctly and we'll run the migration like this what it's a truffle migrate all right it looks like it was successful so what we've done is actually deployed the smart contract to the blockchain and if you open ganache you'll see that something has changed you know with this first account we'll see that the balance of ether you know the etherium cryptocurrency balance has actually gone down by a little bit that's because deploying smart contracts to the blockchain actually costs ether it cost gas and we can see that this account has done that it's actually paid the gas fee in order to deploy the smart contract to the blockchain and shuffle by default uses the first account inside this wallet in order to pay those fees now let's open the truffle console in order to check the smart contract that we deployed the blockchain will do that like this I'll say truffle console now will retrieve the smart contract from the blockchain like this will say it's a new list equals a wait to-do list dot deployed so to-do list is the name of the smart contract that we created in the migration and go back to project and see you know this to-do list right we've actually retrieved the smart contract a deployed copy of it from the blockchain and assigned it to this variable to-do list and you'll see this a weight keyword here so let me explain that we must interact with the blockchain in an asynchronous fashion and if you ever developed other JavaScript applications you would know that there's a lot of different strategies for handling asynchronous actions right you can use promises there's a lots of different ways to do it but with truffle version five we actually been able to use the async await pattern inside the console which is really nice you can just do things in a simple one line like this basically this is just saying you know wait for this finished result and whatever the result is assigned to this variable so we can actually look at that we can say to-do lists all right you can actually see the result is the smart contract here and I'll just pull this up so you can see let's actually get the address the contract will say it to-do lists address all right and we can see this is the address of the smart contracts is deployed the blockchain this is just where it's located and now we can actually see the count of tasks that we created in the smart contractor so we'll say to-do lists dot count like this there's our tasks account I think is what we called it all right we can see that zero and now truffle actually stores that as a big number whenever we retrieve it we could convert it to a number like this we could just say task account sign it to a variable and say a wait all right okay say task count to number and I see that it's zero all right so that's a good check to see that everything is set up properly if you've been able to complete all this so far you know you've been able to create a smart contract create a new truffle project you know connect it to a blockchain and actually to put the smart contract on the blockchain and talk to it if you have any trouble just you know rewind the video and try to see where you might have gone wrong what we want to do now is actually pause and commit some of these changes I'm gonna create a new git repository I'll say git init and inside of here I'm actually going to create a git ignore file you don't necessarily have to follow along with all these steps but I'm just going to do them so that you all can see what I'm gonna do inside of here is create this get ignore file that ignores the node modules directory so that we don't commit all the node modules to source all right I'm going to say git and I'm not sure what all these errors are sorry I'm gonna get commit I'll say project setup all right so that's it for the first part of this tutorial we've actually set the project up in the next section we're actually going to list out the tasks in the to-do list now let's list out the tasks inside of this to-do list I'll show you the steps that we'll follow first we'll list the tasks and the smart contract and then we'll do that in the console and next we'll actually wire up the client-side application and list the tasks there and finally we'll write some tests that make sure that the smart contract is listing the tasks correctly so first we'll go to our smart contract they've been working on the to-do lists and will actually write the code to list out the tasks in the to-do list here so first we'll need a way to actually model the tasks we'll do that with something called a struct solidity allows us to define our own data types and struts and we can create a new struck like this we can just say struct tasks follow us with curly braces unless you give this some more attributes in a second let me pause and explain some more features of solidity right solidity is a statically typed language in fact you can see the data types listed here you know you int this is an unsigned integer which basically just means that it's an integer that can't be negative right so integers can be positive or negative with a minus sign you know a sign in front of it or a positive sign and solidity allows us to define this struct task here and we can give it some attributes like this we can say you nth ID this will be the ID of the task this is going to be an unsigned integer which basically just means an integer that can't be negative right if it was a negative integer we have a sign in front of it that'd be a signed integer but this is unsigned and the next thing will be a string and we'll say the content this will just be you know the text and next will be a boolean and that will be completed and that'll represent the checkbox state of the to-do list you know whether the item has been checked off or not all right so that's how we'll actually model a task on us to do lists with this data structure and now we need a place to put these tasks so where will they go well we effectively want to put these in storage on the blockchain so how do we do that how do we access the storage we need to create a new state variable like we did here with tasks account remember count is getting written to storage the state variable its representing the state of the smart contract which is written to the blockchain the actual data storage and we'll actually want to create a state variable called tasks here but we don't want it to be you know an unsigned integer we want a different data type we want something called a mapping and this is going to take a key value pair like this it'll say you int it's a task okay now a mapping in solidity is a lot like an associative array or a hash and other programming languages where you store a key value pair right and when we declare this mapping here we declare the datatype for the key which is an unsigned integer and the task which is you know this struct that we defined here and essentially this is going to be kind of like a database for us it'll have au int an unsigned integer that will be the ID essentially of the task that will store here so we can look for tasks you know 1 2 3 and it'll return the tasks ok and we also want to make this public just like we did with a task account and that will give us a reader function for free provided by solidity that will allow us to access the items out of this mapping all right now we have a way to create new tasks and actually put them in the you know database or the blockchain in this case you'll be able to use this task ID reference here and store the task like this so now I need a way to actually put this task struct inside of this mapping to do that we'll create a function call create task say function create task and inside of here we'll provide a single argument which will just be the content of the task itself so it's a string memory say content let's be public all right now inside of this we're gonna write some code that puts this task inside of this mapping so the first thing we'll do is determine the ID of the task we're gonna create right so that's why we're using task counter and you see that each task struct has an ID and we want to increment this task count value anytime we're creating a new task to put inside of this mapping so do that like this we'll just say task count and we'll just use the increment operator you might find this to be similar to other programming languages where you're basically just changing this value by one all right so once we've done that we'll have a new task count which if this is zero and the first time you call this it'll change to one and that means the first task that you put inside of this mapping whenever we call this create task function will be one and the next time it'll be to the next time it'd be three so now let's actually put inside the mapping do do that like this we'll say tasks that will reference the mapping and we'll say task account we can actually reference it by you know the key which would be the unsigned integer here and we'll just say equals and we'll create a new task we'll do that like this we just say you know task you just copy this and we say task count we just provide the arguments for the struck so the ID the content and completed so the task count is the new ID the content is the content being passed in oops from the function and it's a new task so it's not completed yet so we'll just say false alright now we have a way to actually put tasks inside the to-do list which we'll need as a prerequisite in order to list tasks you know we'll need some tasks inside of the to-do list in order to show them and the next thing we won't actually do is you know go ahead and populate our to-do list so that when we you know call it up on the client side it's already got some to-do items inside of it for us okay and what we can do is basically just add some tasks to this list whenever this smart contract is deployed so how do we do that well we do that with something called the constructor function for the smart contract so if you've ever used another programming language that has like an initialize function inside of a class or some sort of object you know may be in it or new something like that you've seen a constructor before so basically this is just going to be a function that's called whenever the smart contract is run for the first time which in this case is upon deployment alright so inside of this constructor function we can actually add a default task to the to-do list all right so we do that like this we'll just say create task task and what we'll just pass in check out DAP University calm all right put a semicolon here so now whenever we access the smart contract for the first time it will have a default task inside of it so whenever we list the task out there will be something there for us to see and that way we'll know that this work properly whenever we look at this in the console and connect our clients that application and write tests and things like that all right now let's actually compile a smart contract to make sure it worked we could just say truffle pile I'm a syntax errors or something like that and we'll see all right it worked so now let's actually open the console to see if it worked will say truffle console well actually first before we do that let's make sure we have ganache running I don't so let's pull it up all right so ganache is running and now we actually need to migrate our smart contracts will say truffle migrate I'm just gonna pass in the reset flag just be safe here in case you had ganache already running so what does the reset flag do well that would deploy a new copy of the smart contract the blockchain if an existing one is already there so I could go you know we change our smart contract code here so if you added new functions or something like that you could migrate with the reset flag to deploy a new copy so I'm gonna do that just in case you had ganache running already all right now let's open the truffle console so I'll do that like this truffle and console and what we'll do is actually lists out the to-do items so first I will get a copy of the to-do list will say to-do list equals a weight to do list deployed all right let's make sure the address is there say it to do this to address oops misspelled that okay now let's actually list out the items now let me explain something I was mapping we want to call this tasks function that's provided by solidity to list out the tasks in the to-do list and remember we declare this public so solidity gave us a tasks function for free to reference this mapping but whenever we call this function it won't just return all the tasks in the list and that's because solidity doesn't do that for us this mapping is a dynamic size there's no way you know in natively to know how big it is inside the smart contract and so you can't iterate over it and you can't just return the entire thing you actually have to reference the items out one by one and that's why we're using the tasks account counter cache here so if we know that this task count is one that means there's only one task and the to-do list and we would just have to call this function one time to get that task and we would pass in the ID which would be one in this case and it would return the task if it were 10 we would have to do this 10 times we would call this function once with one and I would return task number one we'd call it the second time with two and that would return task number 2 etc etc until we get 10 which Kasich will return task number 10 so that's how we would do that and if you were doing that on the client side we would use a for loop or something like that which we'll get to whenever we reach that section so for now inside the console we can just reference you know the only to-do item inside of here the only task is this one so we can say task equals a wait to-do lists dot tasks you'll say one all right let's see the task she bumped this up all right there you go so there's the task we can see the content check out DAP University comm we can see that's completed as false we can see the ID is one it's a big number but we can actually do that so inside here we could say task ID to number right it's one task content sorry is that a function it's just an attribute all right so now we've actually migrated this smart contract to the blockchain and we've been able to list tasks inside the console now let's create the client side application and actually list out the tasks there so in order to do that we'll need to create some new files first we'll create a directory to store the client side files will just say this say source so we see a new directory you came up here and we'll create a new file inside of here called index dot HTML that's re-say touch source index.html and we'll create an app dot JS file to draw the JavaScript code so they touch source app that J s okay stepping over the project and see we have an empty app dot JS file and an empty index.html file and another file we actually want to create is BS config file so BS config sends for browsersync configuration and browser sink is something that we use as a part of light server so if you go to your package JSON file you'll see this light server dependency so this is the web server that we're going to use in order to run the client-side application we need to configure the server to know about a few different directories inside of our project we want to tell it where the source directory is for the you know clients have files we want to tell it where these contract the smart contract JSON files are we also want to tell it where our node modules are to pull out some dependencies for building out the front-end so did that like this will actually create a new file say touch yes - config dot JSON ok so inside of this file I'm actually going to paste in some code and you can actually get this configuration from the project from github down in the description below let paste this inside of here and don't worry too much about this this is all this proprietary browsersync configuration space we're just saying the server configuration is this and we're pulling the files in from the source directory and also the build contracts directory so basically it's saying expose all of these directories to our web server root and then also we're going to mask vendor with node modules so any node modules that exist inside our pride we can reference those at the vendor route all right there's our server configuration and now we actually want to fill in the index.html file now likewise inside of here I don't wanna spend a bunch of time writing HTML and CSS so I'm going to just paste in the code from the application and again you can just pull this source code from the github link down below just gonna paste this in like this will do is actually build out the JavaScript part but I don't want spend too much time writing the HTML all right so I'm gonna paste this in here I'm explain you know what's going on basically you know we're pulling in the Twitter bootstrap framework to write the front-end so we don't have to write open to CSS and UI elements ourself you know we can see this vendor bootstrap that was what I showed you a second ago and Bs config that's how I got this vendor here and we can see some basic CSS that's just written inside the head tag and yeah we got some markup essentially we have a simple loader to show whatever the application is loading a form that allows us to create a new to-do item and we will actually have a way to list out the tasks here so for now I'm going to just comment out this form I think I think it'll run otherwise all right and let's actually just see if we can start the server so I'll start serving a new tab I'll say npm run dev I believe is the command right yep that worked so you can see that we basically got something right we Z's loading that's fine if you open your console I'm sure you'll see some errors or something like that yeah failed Oh the resource that's okay don't worry about that just yet we will wire this up to actually work but for now I just wanted to make sure that the server is working properly that we can see bootstrap right we see this navbar up here we see the dab University to-do list you actually click through this link it'll take you to my website it's pretty cool but yeah so it's still in the project that actually lists out the to do's in this client-side application though to list the to-do items we essentially want to fill in this unordered list we've got two here we have a list for the tasks and then the completed tasks so if we have an uncompleted task it'll go in this list and whenever we complete them it'll go here but for now they're all uncompleted so they'll stay in this task list alright so in order to do that we need to do several things inside this app that J's file this is where we'll actually create you know our JavaScript app that talked to the blockchain so the first thing we'll do is actually create an app like this just a app because this object okay and we'll create a load function and actually call this a sink we're going to use a lot of async functions inside this tutorial I've been using a lot of async/await pattern when loading data from the blockchain it seems to be pretty helpful so we'll fill this in and then in order to load the app let's actually do this console.log app loading and in order to load the app whenever the project loads we'll just say say window when it loads we'll just pass in a function say aptoide actually didn't mean to put that in sense object do you like this all right so let's reload all right so we see the apps actually loading all right now I'm actually put these windows side-by-side and you can see that this to-do list is actually responsive which is cool we'll be able to see the tasks right here and be able to focus on the code while we're doing this the first thing we want to do inside this load function is actually say oh wait app load web 3 we want to load the web 3 library in order to connect to the blockchain now when we load web 3 I'm actually just going to use the configuration that's specified by meta mask themselves right what we're doing is creating a way to talk to the blockchain we want meta mask which is going to be the browser extension that we use to connect to our dapper blockchain application to talk to the blockchain with web 3 J s and meta mask actually suggests a way to do that so I'm not going to reinvent the wheel here I'm just gonna do what meta mask tells us to do so I'm going to actually just paste in the configuration that they suggest and don't worry if you don't understand what's going on here just know that this works and it's inside of the github repository and you can find the code and link it with the link in the description below so let me pause because I don't feel like a fully explained web 3 J s very well and what's going on here ok so remember this to do this application is backed by the blockchain and we want to actually connect to the blockchain to use it so a few things have to happen we have to connect our browser to the blockchain and it's what we use meta mask for right and then our client-side application needs to actually connect to the blockchain and that's what web 3 J S is for so inside of our project we'll use the web 3 J's library to talk to the etherium blockchain it'll actually allow us to connect to it and you know read and write data from the blockchain inside of the app and then meta mask will allow us to you know communicate with that client-side application with web 3 J s and allow us to you know interact with it via our browser so what we did here was just load it up web 3 J s you know loaded our block chain connection essentially we'd even call this like connect to blockchain if we want to do and now we'll actually use our browser to connect to it with meta mask so let's actually do that I will go ganache let's actually find the private key here we'll show the key copy it all right Mehta mask and make sure you've opened this VM already and what you want to do is connect to the private network which is localhost 75 45 might see the main etherium network first but you want to change networks to localhost 75 45 here and what you want to do is click this accounts menu you want to import a count and you want to paste in the private key it's like type private key and click paste and then import all right I've already done this step so I'm not going to do it so I'll click cancel whenever you've imported the account you know from ganache you want to use this make sure you use the first one because that's the account that we deployed the smart contract with okay you'll actually be connected with that account to the blockchain right so here's your blockchain account and then you can add it to your wallet and meta mask to connect to the blockchain with your web browser and you'll specify the blockchain by you know picking this local blockchain that we have running with ganache okay so I'll refresh that alright and you've got your account connected to the network now let's take that account from ganache this one right here and let's show it in our application to prove that we're actually connected to the blockchain with it all right so I'll just say load account like this crate load account function say load account this would be a sink and I'll say apt account equals web three each counts zero okay so web three here I was set by load web three and it has this eth object that's going to contain all the accounts which will be an array when you get the first one which will be the account that we're connected with inside a meta mask and inside the load function I'll say a weight load account app download account okay save that and now inside of the index.html file you'll see that we have a place for the account here this will be the place where we can actually add the account we'll do that in a second but for now let's actually just console that log and see if it worked properly all right yep there we go and we can see it here we can verify that's the same account and meta mask so een ein two five eight and that's you nine two five eight alright so we've successfully retrieved the account from meta mask and will actually stick it inside the project in a little bit okay so we'll just clean that up now let's actually load the smart contract from the blockchain this will be the to-do list that we created so that we can list out the tasks from the to-do lists in order to do that we'll say load contract say sink pass it a function and inside of here the first thing we'll do is actually pull out the smart contract JSON file so say Const to do list equals oh wait I'll say J query get JSON must be to do list okay so if you remember inside the BS config file we expose the build contracts directory to the root of our project so we can call this debut list JSON file we're actually pulling out this file right here we can market we log it but we were to do that we need to call this function say oh wait app load contract okay all right we can see it here here's this to do list file okay so next what we want to do is actually create a truffle contract so truffle contract is just a JavaScript representation the smart contract that will allow us to you know call the functions on it and things like that so what we'll do is I'm just gonna paste in some code that shows you how to do that do like this okay so this will be called truffle contract we'll pass in this to-do list JSON file that's basically gonna create a wrapper around the JSON file that we create a bi truffle and it's gonna allow us to you know interact with it and we'll set the provider which is the web 3 provider which we created here and this is basically just going to give us a copy of the smart contract in JavaScript and it's going to tell us where it is on the blockchain and we're gonna be able to do stuff like you know call all the functions that we coded inside of here like the tasks function the tasks account and things like that so let's clear this out and just say even refresh and see that everything worked all right so to-do list of undefined let's change that so you actually have place to store this contract so we'll say this say contracts like this well actually create an empty object okay well refresh if you guys get stuck on new steps feel free to clone the repository and see the code below now we want to actually you know get a deployed copy of the smart contract like we did in the console remember we did you know to-do list equals like a wait to-do list not deployed we're gonna do the same thing here so we'll say app dot to-do lists equals a wait app contracts to-do lists deployed okay and you know this is really just and this is really just you know getting the values from the blockchain so this is a live contract now this is just like we did in the console all right now we should have loaded our app up with a lot of data we've connected to the blockchain we've retrieved the account and we've retrieved the smart contract that we created you know in the previous section so we want to do now is actually renders from information on the page the first thing we'll do is actually render out the account that we're connected with so first we'll just say render equals an async function and inside of here what I'm going to do is show the account right inside of our HTML okay remember we got this place to show the account right here so that's exactly I'm gonna do when I put the account inside of this and I'm going to call the render function so after the contracts have loaded I'll say a wait app dot render all right in order to see this change election to expand the window here all right you can see that the account was put in here so like I said earlier I created this as a responsive application and we can see the account you know here but whenever we resize the window we don't want to see that anymore just to save some space so we'll keep that down but that works and if you want to code this you know with your window all the way open feel free to do that I'm just going to use a smaller view to save some screen real estate so you guys can see both things happening is I'm doing the tutorial all right so let's do some more things have this render function we actually want to do is render the tasks but I'm going to basically create some other logic inside of here to prevent double rendering all right so we'll do is do a couple things we will say that the app is loading I'll keep track of that like this changes to false whenever it's rendering we'll save is loading stop calling this function this is basically prevent a double rendering problem and while this is loading will actually set it to true and when it's finished we'll put it back to false so let's actually create a set loading function like this I'm just gonna paste some code in you can find this code in the get-up repository so it's set loading basically it's just going to update it and we'll show the loader in the index.html file this will be our simple loader as you see here loading this is loading and I'm going to show it when it's loading right and I'm going to hide the content which is this this is actually the to do list itself alright I'm going to show the loader hide the content all right so let's say that see if there's any errors all right so that looks like the loader went away which is what we want all right now the next we want to do is actually fill in the tasks who actually want to render them so we'll list out the tasks inside of it so I'm a function like this so I'll say render tasks say async so inside this function we need to do a lot of things the first thing we want to do is actually load the tasks from the blockchain and then the second thing we want to do is actually render out you know each task with the task template and we're gonna have to basically render out each task one by one and then we're gonna have to actually show the task on the page okay this is kind of a three-step process it's gonna be a little complicated but just bear with me I'll show you how it works so what we're gonna do is fetch them from the blockchain and we're gonna actually use this template that's created down here this task template it's gonna have a checkbox and the content we're gonna you know fetch this off the page and create a new task with this okay so first one thing we need to do is fetch the number of tasks from the blockchain remember I said that we can't you know just fetch all the tasks with this mapping essentially we need to find out how many there are and we need to loop through the items in this mapping and fetch them out one by one so if there's ten tasks inside of here we'll need to do one two three four five six seven eight nine ten if there's one we just do this once so in this case there's just one but that's what we need to do first we say Const tasks count equals await this is app dot to-do lists task count okay and now we know how many there are and the next thing we want to do is actually fetch this template that will use to list the task out in the page say Const task template equals task template okay and now we will actually want to use this task account to render out each task on the page in order to do that we'll create a for loop in Java Script like this if you've written some JavaScript before it should look pretty familiar we're basically just saying for every number from 1 all the way up to the task count do this operation so that's what we want to do we start with one because that's the first valid ID inside of the mapping so from task number one all the way up to the maximum number of tasks which you know if it's ten we're going to do this 10 times you know fetch each task so we'll actually read the value from this mapping with the ID so I in this case is going to be the ID inside the loop the first thing we'll do is actually fetch all the values for the task we'll call the task function and break out the attributes to the ID the name and completed do that like this so say tasks equals await aptitude do list tasks I which is the ID in this case and because of our trouble contract works this is actually gonna return an array and we have to reference these values by each item in the array so the first item will be the task ID the second ID second item which will be the task content the third item which will be completed and remember this array is zero index that's why the first item is zero the second item is one their item is 2 okay so now we'll have the task ID content and completed the next thing that we'll do is actually create the HTML for the task like this I'm just gonna paste in this alright so we'll do is actually get a new task template we'll take this task template that was you know fetched from the Dom and we'll actually clone it alright we'll get a new copy we're gonna find the content for this template we're gonna fill in the content from the task and we'll find the input which will be the check box and we're gonna populate that with some values which will be the task ID it's basically whenever we check this will like you know turn it on and off and whether it's completed or not we'll just use that from the task and we want to wire up a unclick function which will be toggle completed and one form of this later we won't use it for now so we can comment it out okay so the next thing we want to do is actually put the tasks and the crushed list so what I've pasted in some code here too so what this does is check if it's completed and remember there's two lists here there's a list for the completed tasks and a list for the sorry here's a completed tasks and then the list for the non completed tasks and if the tasks completed we'll put it in the right list and the last thing we want to do is actually show the task we'll do that like this we'll just take the hidden task template that we've been modifying I'll just show it like this okay alright so let's actually try to call this render tasks function inside of the render function so render task is here and then after we rendered the account we want to read the tasks like this so let's say this and see what happens you might have some errors but we can just address those as they come up nope nope there it is boom it worked so we've actually successfully listed the tasks from the smart contract in the blockchain I can pull this out and we can see the first task inside of here which is checkout dab University it's not gonna do that I'm gonna right click and go to DAP University calm awesome so it worked let's see my social links here you got my Twitter it's pretty cool alright so I know we've covered a lot of ground but we have successfully listed the tasks inside the client-side application ok I've commented a couple things out here because we haven't implemented them just yet but if you get confused just go Bree whine the video and you know fine what you might have gotten lost the next step we want to do is actually write some tests to ensure that the tasks were list out properly ok and we're actually going to use the mocha testing framework from JavaScript and the chai assertion library in order to write our tests so you can read more about these if you want to look at our new file in the test directory say tests to do list tests is if you go inside the test directory you can see the to do list test out J's file here alright so it's actually write a basic test to ensure that you know the contract was initialized properly and that actually lists out tasks the first thing I want to do inside of here is actually required the smart contract like this that's very similar to our migration file pattern say contract and we'll say to-do lists will pass in a function here all right and we'll write all of our tests inside of this callback function this callback functions actually gonna expose all of the accounts in the blockchain right so all the accounts that are connected with you ganache all these are going to be injected inside of this variable here this will be an array you can read them out one by one so the first thing we'll do is actually get a deployed copy of the smart contract with a before hook okay and we'll do that like this will basically just say before each test runs that's essentially what this means we're gonna pass in an asynchronous function that should allow us to use the await keyword let's say this dot to do list equals to do list deployed okay and before each test runs we'll have a copy of the to do list as deploy to the blockchain now let's create our first test example what is say it deploys successfully all right we use the async function because we want to use a weight inside of here and the first thing we'll do is actually just get the address like we did in the console earlier say Const address I'll wait this to-do list address we'll say we basically to make sure that the address exists so you want to check that it's not you know empty so leave that like this say assert not equal this address we don't want to be 0 X 0 we don't want it to be an empty string we don't want it to be null and we don't want to be undefined so we can check that and that'll just make sure that the smart contract was actually put on the blockchain and that it has an address ok now we can run this test inside of shuffle like this we just say truffle test hit enter all right and it passes now the next thing we want to do is actually list out the test and the test and make sure that it works so we'll say it lists tasks pass this ASIC function so inside of here we'll just do a very simple check we'll just basically make sure that the count is correct and that we can fetch you know a task by the count so first we'll just get the task count and we'll just do that and the next we want to actually try to fetch the task out of the mapping so we'll just make sure that a task exists where the task count is okay this would be a simple test so do that and now we want to do is actually assert that the ID is equal to the task count right that it is set correctly so let's do a basic test and just try to run it and see what works all right it works so let's look at that you can see that we're just getting the task we're calling the ID and making sure that it's equal to the same task count next let's test some more values and make sure that the content is correct that completed is correct and that the task number is the same as we expect so let's just do that like this so paste in some examples will say assert equal tasks content is this that's the first task we set whenever we initialize the contract we want to say that the completed is false right I'm going to say that the task count is actually 1 we want to specify that someone in this case so let us say that we run the tests all right passes all right so that's concludes this section where we've actually listed out the tasks in the to-do list another we covered a lot of ground we actually created the tasks inside of the smart contract we listed them out in the console we had to wire up the client-side application to list the tasks out there and we wrote some tests so that's a lot if you got confused about anything feel free to rewind the video paste in the code from the github repository down below and while we're here I'm gonna go ahead and commit these changes to get ahead gotta say get commit right so we've listed the tasks the next item is to add tasks to the to-do list we'll do this with a client-side application and we'll write tests for it but first we want to change this create task function to add some additional functionality so right now we're calling this create task functions at the constructor to add a default task to the to-do list like this but we want to you know call this function externally from the client side in order to create tasks that way we also do it the console and things like that so what I'm gonna do is actually add a new line here and what I want to happen is to broadcast an event that this task was created some explain that solidity allows us to create events that are triggered anytime you know something happens inside of a smart contract and external consumers can subscribe to these events to know whenever the event happened and events are really useful because you know whatever we call it create task function we don't always know when an you know the transaction actually completed we don't always know when it was mine and things like that and it can be really useful to listen to those events in order to you know know that was finished so we can create an event in solidity before we call here we can actually declare it inside of our smart contract I'll just do it like this we'll go blow this mapping will say event will say task created and notice that's capitalized all right use a semicolon here and we'll just add some arguments to this event we'll say you nth ID this will be the ID of the task that's created a string this is the content and the completed property so boolean completed all right so that's how we create an event inside of solidity right this just means that you know the task created event is available to us inside of the smart contract and I'll show you how we can actually call it would you like this we use the emit keyword emit task created and we pass in the arguments so the here is the task count and the content which is passed in from the function and false because it's a new task and we haven't completed it yet and that's pretty easy that's how you trigger events inside of solidity and we can subscribe these events you know inside the client-side application or you know anywhere that can listen to events on a smart contract or while we're here I'm gonna go ahead actually write the tests for creating the to-do item so I'll open the test file over here do this side by side and I'll just create a new example down here so below lists tasks will say it creates tasks I'm just gonna add some space you can see better so say it what creates tasks alright was a async passing a function and first we'll say Const results equals await this dot to do this create tasks and I'll say a new task okay and we'll check the tasks count like oh wait this step to do this task count all right well that's that and first we'll check that the tasks count is the same as we expect say - so that's the first thing we'll check on well ensure that you know we created a new task and the new count is actually two and now what we'll do is check that this event this task created event was actually triggered and you know we'll dig in to the logs and say that the ID was the same the contents the same and complete it was the same so there would be the actually you know this new task that we created was you know logged out so we can get the event like this we're gonna use this result which was you know the result of this finished create task function right we use the async await pattern to get the result here and the event is actually contained inside of that so we'll say it Const event equals result logs okay send their logs as the first item okay and the args key basically is going to contain all the values for the event and you could log this out like a ganache right you could actually console.log this event in fact let's just do that right now let's just say console log our results go to the terminal shuffle I'll show you the result and what it looks like so you can see what we're digging into alright this is loading okay so this is what the result looks like we see there's a transaction hash here and it's got a receipt and inside of here we have logs right and here is where the event information is contained right we can see this args key right here it's gonna have an object and granted we can't see exactly what's inside of here because it's not logging all the information but this args key is going to contain all the values of this event that was triggered whenever this was created okay so I'll take out that result and now I will check to see that all the information is there so we'll say assert equal event ID was a two number it's equal to two let's say a search equal that content is equal to any task search equal events completed set false all right let's for the tests and this time we won't see all this log output it'll actually just run the test and hopefully it'll pass yep it passes all right so we can see that our event was triggered whenever we called this great task function all right so I'm gonna remove this space and that's how you write tests for this create test function and check on events now let's go to the front-end application and create tasks that way now before you you jump back into this make sure a few things are correct make sure that ganache is running your block change running and make sure that your contracts are migrated that you're connected with meta mask right here things like that okay so what I'm gonna do is actually enable this form that I commented out for the previous steps on the page so this forms gonna have an on submit function create task which will build here in a second I haven't done that just yet I'll just refresh the page and show you what that looks like all right so we'll see this add tasks field and we'll actually type in a task here and we'll hit enter there's no button here just for simplicity's sake we'll just use the Enter key in order to create the task all right so I'll go back to the app J's file and it's actually add the create task function we'll do that like this let's do it down here below the render function alright we can say oops create task so be an async function so what we'll do is say app not set loading to true okay so whenever we call this well we're going to show the loader and what we'll do with it Const content equals new task Val okay and that's just the name of the form so if you go back to the index.html file you'll see this you know for sorry the name of the input it's all the form to the on submit create task we're gonna fetch the value of this input right here this input which is the ID new task okay and we're gonna get the value which is gonna be what's ever filled out inside there so a new task value and now we're gonna call the smart contract function we're going to call this create task function with we know web 3 J s with a shuffle contract library and talk to the blockchain or it actually updated so we'll say a wait app dot to do this actually sorry this will be create task and we'll pass in the content from the value okay and whenever we do that whenever this is finished I'm just gonna do a shortcut and reload the page so that whenever this is actually done I'll just refresh the page and it'll go ahead and fetch all the tasks from the blockchain again and list them out on the page so instead of having to like you know listen maybe for the event and then we load the page like sometimes they can get into a double rendering problem so I'm just going to actually just reload so I'll say like window dot location not reload that's just a JavaScript thing to say refresh the page okay so let's test it out and see if it works I'm gonna open the console see if there's any errors nope we're good alright so we'll say a new task or it will say task number one task number one and like I said there's no button here you just want to hit enter in order to make this work so I enter and I didn't put a button on here just for simplicity sake I'll say confirm alright there we go so we successfully added a task we can see task number one was added to the list and if you go and check ganache you can see the same thing if you go back to your transactions you can see that a transaction was created right here I think it's the same one yeah it's like that's the same one and also you can go to your logs see the same thing it scroll like crazy I think the other at the bottom right anyways that gives you an idea of you know where you can look to find out more information about the blockchain whenever you doing this kind of stuff alright so we've successfully created a new task on our to-do list and we've you know done it inside the smart contract we have done it on the client side and we've written tests to make sure that this works so that's it for this section I'm gonna go ahead and commit these changes I'll say get add dot git commit let's say three creates tasks now the last thing we're going to do in this tutorial is actually check off the tasks from the to-do list whenever we do that they'll appear in a completed list down here and they'll be extract out so that like this first we're gonna go to our to-do lists or create a new function will call this toggle completed okay someone to use a space down here say function toggle completed okay so what do you want this function to do so we want to take this you know struct these tasks trucks that are inside this mapping and we want to find a specific task and we want to change this value so if this value is already true when I change to false and it's already false when I changed it true so basically if someone checked this item it would you know say that it's completed and if it's on the completed list we could check it and it would take it off the complete list and put it back in the you know not completed list okay so this function will need a parameter it'll need an ID of the tasks that we want to actually toggle so we'll do that like this we'll say you int ID all right we'll say public so first we will get the task out of the mapping all right so we need to read the task out of the mapping like this you can see tasks you know tasks count we can do the same thing they said tasks and we can read the ID like this CID so that watch you fetch it out let's assign it to a variable whenever we do this we want to actually declare this variable with the type task and we're actually gonna do this just in memory so it looks kind of funny but this is how we do that in solidity we say task this is the data type that we declared right here task memory and we say task like this okay now notice this underscore basically just means this is a local variable and not a variable it's not necessarily specific to solidity it's just a convention right you see this here in fact I'm gonna do this like this as well I D so you know content is underscored here because that was a local variable that was passionate the function IDs the same way and I'm gonna do just tasks like this because I don't want to sign into the state there's nothing special about doing that it just convention so now I'm gonna say tasks got completed and we basically want to do the opposite of whatever it was before so they can read the value of whatever it was before like this we just say to ask I completed but we want to say the opposite so we'll say bang oops bang right so if it was false this will turn into true and if it was true it'll turn into false we're assigning that new value here all right next we're gonna put it back into the mapping so just like we did tasks tasks count equals this we're going to put the back into the task mapping set tasks ID equals task alright so that's how we would create a function to toggle task completion now I want to do a few more things inside of here before we move on I want to emit an event just like in the create task function so first we'll declare another event will just say event say task completed alright and it will give us two arguments we'll say you nth ID say you went our sorry bool completed all right and now I will trigger that events out here say omit task completed ID task completed all right and that should work a lot like our create task function where that will admit an event any time this function is called okay so let's actually run a test to make sure this works before you know wire up the client-side application we'll go to the test file right here and I'm actually gonna split this pane vertically all right so I'll just split this pain we've got a test file down here and the smart contract could appear so I'm just gonna focus on this you know we want to just test this function unit test this toggle completed so I'm gonna create a new function down here give a social space I'm sorry I know example that will say that it toggles task is completed so I'll scroll down a little bit I'll actually just copy this and paste it again to give yourself some space and add some boilerplate so we'll say it toggles task completion and I'll clear out all this actually let's do this and say result equals this dot to do list dot toggle completed and I'll pass in one should be the first task and we'll get the task itself will actually retrieve the task I'll pass in ID one alright I want to assert that that's going to be equal to task completed we want it to be true and we want to fetch the event just like we did in the previous example and we want to ensure that the event ID is equal to one and that the event completed is equal to true alright that makes sense so basically I know I modified a lot of that code so that might be a little tricky I didn't just you know write it out as I was thinking it I just changed what was there from the previous example let's just review so we're toggling completed we're calling this function passing in the idea of the first task we know there's a task already in the zoo list because we created one inside the constructor right and we waited for that to finish got the result which we'll use to read out the logs here in a second but the next thing we did was we got the task right and we checked that it was actually completed rightness that's true and now we want to make sure that this event was triggered and we you know get the event by digging into this result which we witnessed in the previous section if you didn't check that out go ahead and rewatch that part so we took the event and got the ID it made sure is one and then looked at completed and ensure that it was true all right so let's talk about the test all right it looks like I've had an error let's go back to this code we could see I forgot the underscore here let's run it again all right it passes awesome okay so I'm gonna remove this space save this now let's go to the client-side application and wire up the check boxes to toggle the tasks so go back to the app J's file and I'll create a new function down here I will call it a toggle completed I believe this is the same name as the smart contract function so below create task we'll say a toggle completed I say sync positive function and we'll do is similarly to create task we will say the app is loading say Const task ID and actually inside of here this is gonna be on a on click event whenever we click this checkbox we're gonna you know have an event listener that calls this function so I'm going to pass in the actual event itself will just use Eve for short and that events going to contain the name of this checkbox which the name value is going to be set to the actual task ID so we'll say e target and now I'll say await when actually gonna call the smart contract function to toggle this task is completed say app got to-do lists toggle completed I'm gonna pass in the task ID all right and then just like the create task function whenever that's finished I'm just gonna reload the webpage semicolon or sorry yeah comment there okay no errors but if you remember in the previous sections I commented this out so I'm gonna put I'm going to re-enable this this is where we actually wire up the onclick handler to do this so now whenever we're rendering the tasks out we found you know the check box now we want to actually add the event handler whenever it's clicked to call this function so everything looks good all right let's try it out I'll try to check this off the list see if it works all right let's look at a problem here all right we do have a problem and I'm gonna see if you can guess what it is it's something I forgot to do in the previous step and I'm actually gonna leave this in the recording because it kind of shows you the nature of blotching development and all the things you need to do do you know what it is yet well I'll tell you we forgot to run the migrations yeah so we added a new function of the smart contract and it worked on the tests but we didn't actually deploy a new copy of the smart contract to the blockchain with this new function so in order to do that we'll run truffle migrate - test reset to deploy a new copy of the smart contract to the blockchain and whenever we do that we're gonna want to refresh our webpage to pick up that change alright so let's try that again sorry guys I forgot that step like I said I wanted to leave that in the video just to show you you know something you might forget to do and hopefully that'll help you remember all right so we refresh the page now we see that our other task is gone now why did that happen well that's because you know whenever we deploy you copy the smart contract all the state of the smart contract is gone right it's a new smart contract whenever we redeploy so all the old tasks we had in the smart contract have disappeared so we'll add a new one let's say task number one quite a few will just sign these really fast task number two it's a task number three all right so now it's actually toggle one is completed and we see the meta mask confirmation pop-up will sign it firm and there we go we've actually successfully checked off task number one from the list and we can see that it was added to you know the list down here below so we can you know actually do the to-do item on task number two we can go to DAP University calm all right let me see it awesome we went there and now we can go here and check that off the list because we actually did it confirm and there we go all right so that's it guys that's actually the end of this tutorial you've successfully created your own to-do list on aetherium power buy smart contracts and you've created this clients that application to interact with it so congratulations so I hope you all liked this tutorial again be sure to subscribe to the channel if you haven't already and also don't forget you can download my courses for free on my website over here at DAP university comm ford slash free download you can just sign up for my email list to you know get my courses downloaded for free and also you you know keep us me on Twitter and stuff like that for more daily updates so also guys I'm releasing a premium course like a full decentralized blockchain development course sometime soon so you'll want to sign up to that email us to find out more updates about that it's gonna be really extensive it's gonna be really awesome you're gonna want to learn about it so just stay in touch and also by the time this videos out you'll be able to find an article to accompany this video which you can follow along step-by-step it'll be somewhere on my website and I'll probably in the video description below you can see other articles on my website here like you know this is the ultimate aetherium dap tutorial which i released last year which is a pretty popular tutorial that shows you how to build your first centralized application you know you can code your own cryptocurrency on aetherium you know building a RC 20 token stuff like that I've got some other deep dives on topics like you know web 3j s which we talked about some in this tutorial you know a lot more lessons on solidity how to develop smart contracts I kind of go into more features at the language and things like that so this is a huge resource with a lot of free stuff a lot of good information I also have some tutorials on like how to build a real world ICO and things like that this is like a greener production ready I see OGG use in the real world this is pretty advanced you know and also if you're looking for somebody to work on your blockchain projects you know I am available my email address is down below I did a lot of you know block check and development a lot of consultation and advising for people who are launching blushing startups icos things like that I've got a complete solution for launching and I see oh like I said you can reach out to me via email my email is on my website and also in the description below some buttons here you can contact me on the website I like set my Twitter's here or things like that so again I hope you all liked this tutorial until next time thanks for watching DAP University

Channel: freeCodeCamp.org

Views: 1,606,597

Keywords: ethereum developer, ethereum solidity, dapp ethereum, ethereum app, ethereum development, ethereum dapps, ethereum application, ethereum tutorial, ethereum mist, decentralized applications, ethereum web3, dapp, ethereum contracts, solidity, programming ethereum, ethereum programming language, ethereum coding, ethereum contract, ethereum code, ethereum virtual machine, ico

Id: coQ5dg8wM2o

Length: 91min 6sec (5466 seconds)

Published: Fri Jun 28 2019