Placeholder Image

Subtitles section Play video

  • 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 is powered by a theory.

  • Um, smart contracts.

  • I'll show you how to create your first Ethereum smart contract with a solidity programming language or right tests against the smart contract deployed 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 could download my courses for free on the Web site over dap university dot com forward slash free download.

  • I've got a link to that data the description below and also on my website.

  • You can find a fooling article to accompany this video.

  • You can actually fall that step by step and 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 Blockchain application power by smart contract actually works.

  • The hat is a Blockchain work And how does a Blockchain application work?

  • Well, I've chosen a to do list for this tutorial because that's really common way to learn any new technology, and I want to use that to show you how a blotch 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 works as a blotch in application.

  • So put my white board up here to demonstrate.

  • Normally, whenever you access a Web application, look 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 clients.

  • I've files like html CSS and JavaScript, you know, contains all of the back end code for the server, right in the business logic, you mart right?

  • And any data that story application is stored in the database, right?

  • And pretty much any other to do list tutorial that's out there is going to show you how to write your clients at application and HTML CSS and JavaScript.

  • And then it's gonna show you how to basically use a business logic on a Web back end that creates reads, writes updates to do's.

  • 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 wet application.

  • So how would you build a to do list on a Blockchain?

  • Well, it work a little bit differently.

  • So instead of connecting directly to a server, you know, we're gonna access our to do list via browser, and we're gonna, you know, connect to client side application that we will build.

  • This will just be a simple client application on a Web server.

  • But this client application isn't gonna talk to a Web back end in a database.

  • Instead, it's gonna actually talk directly to the block chain and on the block chain.

  • We're gonna have code that's gonna be written with ethereum 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 block chain itself.

  • And that's fundamentally how AH black shin application would work and how it's different from a traditional Web application.

  • So that might bring up a lot of questions, like how to be connected.

  • A Blockchain.

  • And how does the Blockchain work?

  • What even is a block shape?

  • Well, pause here and tell you a little more about that.

  • So what even is a Blockchain, right?

  • Our clients?

  • That application's 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 I'll talk to one another.

  • It's a distributed network, so there's actually different Computers are machines that talk to one another, and we can connect to an individual node on the block chain in order to use it.

  • That's what our Web applications doing here, so all of the nose on the network participate in running the network.

  • They all contain a copy of the code on the block chain and all of the data on the block chain and all of the data on the bloc chance contained in bundles of records called blocks which are chained together to make up the block chain and all of the nose on the network also participate in ensuring that the date on the block chain the public ledger is secure and unchangeable.

  • And that's what makes the block shame so powerful.

  • And so what about the code on the block chain?

  • Well, all the code on the block chain is contained in smart contracts.

  • So smart contracts are basically just programs that run on the block chain, and they're gonna be the building blocks of blocking applications.

  • And that's why we're gonna build our to do list out.

  • We're gonna write a smart contract that will contain all the tasks and a to do list and allow us to, you know, add new ones and complete them and things like that.

  • So smart contracts were written in a programming language called solidity, and all the code in the smart contract is immutable, Which that means is unchangeable.

  • Whenever we deployed to the block shame we won't be ableto update that code.

  • 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 Lis for a reason.

  • Whenever it's all in the Blockchain, we know that no one will change it.

  • And therefore, we know that to do list will behave the same way every time.

  • And sometimes I actually think about smart contracts.

  • Kind of like micro service is on the web.

  • They're on the block chain and they read and write data from the block chain 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 h e mails CSS and JavaScript and that client applications going talk directly to the Blockchain.

  • And that's why we're gonna put our smart contract will create a to do list within Ethereum Smart contract written solidity and will compile it and deployed to the Blockchain.

  • It will also connect to the Blockchain network with our personal account within Ethereum wallet in our browser, and I'll show you how to get that set up in this tutorial as well.

  • So now you see now block Shame, works and how we can build our to do list application on the block chain.

  • So let's jump in to start programming.

  • Here's a preview of the application that will develop in this tutorial.

  • This will be a to do list power by an Ethereum smart contract or will be ableto 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 on your computer.

  • You can see if you have no installed by going to your terminal and having no dash V you can install know with the package manager like home brew or you condone it directly from the Know 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 could head over to truffle framework dot com for a slash Kanosh, download it and quit this download link and whatever 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 or anyone can connect to it.

  • But it runs on our computer.

  • It's, you know, a closed network and ganache, basically, you know, is a process that runs on a computer that spins up this block chain and runs on a server.

  • So we can use this to develop smart contracts.

  • We can run tests against ST Week or on scripts against the network develop applications.

  • Actually, talk to this block chain is really helpful, and it's an invaluable tool.

  • And the Blockchain developer toolkit.

  • So, um, if you opened a Nagy, you'll see 10 accounts listed here.

  • These are the addresses to each account on the side, and you'll see you know, these balances, you'll see 100 ether.

  • And this is the Ethereum Cryptocurrency that each account has and is 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 trouble framework.

  • We're going to use the truffle framework to develop a theory.

  • Um, smart contracts with the solidity programming language.

  • You could install truffle by going to your terminal and typing in P M install dash G truffle at 50.2.

  • 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 develop smart contracts.

  • Right.

  • Tests against smart contracts deploys mark contracts to the Blockchain.

  • It gives his development console, and it also allows us to develop client side applications inside of our project.

  • So it does a lot, and I'm gonna show off all those features in this tutorial.

  • The next dependency is the meta mask extension for Google Chrome.

  • Remember that the Ethereum Blockchain is a network and we need a special browser extension in order to connect to that network.

  • And that's where mega mass comes into play.

  • Metal mask will allow us to connect to the block chain with our personal account and actually interact with the smart contract that will develop in this tutorial you could install madam asked 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 could also see the little Fox icon in your extensions tab.

  • Now let's create the project.

  • I'll start by quitting a directory for a project like this E th just stands for theory.

  • Um, so I'll enter into that newly created directory, and now, once we're inside of here will 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 dot two.

  • So it's not.

  • Go ahead and check out the dependency section is video to see how to install the specific version of truffle.

  • So now we'll initialize Any trouble project like this will just say truffle, innit?

  • All right.

  • And now we've successfully unboxing your trouble project, and now I'm gonna actually create a package dot Jason file in order to, you know, pull in some development dependencies for the project.

  • Those a touch package that Jason.

  • All right.

  • And now I'm gonna open this product inside of sublime text.

  • That's the text editor I'm using.

  • So let's go to the package of Jason File.

  • We can actually see the product director over here and could see the newly created package at Jason File.

  • And it's empty.

  • I'm gonna paste in the contents of this file that will use for this tutorial.

  • And you can actually get this package that Jason filed by cloning this repositories on the get, huh?

  • Blink and the description down below.

  • All right, so here's the dependencies for the project was gonna go and say this.

  • Like I said, I just paid to these in here, and you can see we have a few dependencies like the bootstrap framework will use this for building out.

  • Um, the clients at application.

  • We got some dependencies for testing this mark on tracks a server for running the clients at 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 sort of say in P M Install.

  • All right, it's another installed.

  • Now let's go back and you're a project and actually create the smart contract file that will use to build a 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 network, and I'll explain that here a little bit and now create a new file inside this directory called to Do List that soul so you can see that do list is capitalized to do list, and it's in the same project directory here.

  • So now it's actually create the smart contract that will manage that to do list for the application.

  • The first thing you want to do inside this file is actually declare their version of the solidity.

  • Programming lingers that we want to use.

  • We'll do that like this was a problema solidity.

  • Who's a carrot?

  • Most say version 0.5 dot zero, and we'll end this line with a cynical in.

  • All right 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 car tracked to do list to the same name of the file said to do list.

  • And we followed that with some opening and closing curly braces and inside of years were actually write all of the code for the smart contract.

  • Now go ahead above the font ups that you often see this little better.

  • So the first thing that will do inside of here is just keep track of the number of tasks that air in the to do list, and we'll store this values that the smart contract is a way to kind of get started.

  • And just make sure that everything is set up properly in our project will deploy this simple, smart contract to the block chain and actually see if we can connect to it before we 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 variable, it will be a special kind of variable insulated D called a state variable and weaken.

  • Declare a state variable like this will say you ent task count.

  • So state variables inside of solidity are actually written to the block chain.

  • And that's what they're called ST Variables that actually represent the state of this smart contract on the block chain.

  • And the state of this smart contract is gonna change anytime this task count 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, not necessarily like a function or something like that.

  • We'll see that Maur as we continue on through this tutorial, But initially we can set this value to zero like this.

  • All right, well, just say equals zero.

  • And we can also create a way to read this value from the smart contract with a key word called Public.

  • All right.

  • 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 solidity kind of just magically gives us a function whenever we use this public key word.

  • All right, that's all do for a basic smart contract.

  • In order to set this project up and actually deploy this to the block chain and make sure that everything's set up correctly, we'll come back and, you know, build this out.

  • Threats, tutorial.

  • But for now, we just want to do a simple check to make sure everything works properly.

  • Now, let's actually compiled this smart contract before it goes to the block chain and make sure that we wrote 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 the project.

  • If you go to the bill directory and then contracts will see migrations and to do lists that Jason.

  • So this is actually a Jason Representation, the smart contract that's created by truffle, and it contains some information that's useful to us.

  • This is the smart contract A B I itch.

  • The abstract binary interface will actually use this later in the tutorial when we talk to our ah smart contract and JavaScript.

  • We could see the bite code that was created by the smart contract.

  • This is actually the bike go that gets run on the Ethereum 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 the smart contract on the block chain, we want to create a few more files.

  • And I kind of give you a tour of the rest of the project structure here as we do that, in order to connect to the block, shame will actually need toe update this truffle dash config file.

  • All right, but I'm actually gonna just pay some code inside of here again.

  • You can get this code from the repositories for this project to get Hub Repo that I've got done a description below.

  • He just checked out that link.

  • All right, I'm gonna say this.

  • 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.

  • Um, that's actually connecting to ganache.

  • So this is local hosts, and this is the portly ganache is running on while we're here.

  • Let's go ahead and actually make sure that ganache is running.

  • So you get open ganache.

  • Fine.

  • Wherever you installed it, make sure it's open and we can see that the port is 75.

  • 45.

  • Right?

  • And we could see its local host 127.0 dot 1475 45.

  • So now that we have this filled out, um, this is actually talking to the local block game.

  • Now, let's create a migration file in order to get the smart contract onto the block.

  • Chaim.

  • So if you go to your migration directory, you'll see a file inside of here.

  • It's called initial migrations.

  • You want to copy the contents of this?

  • Actually, could a new file in this same directory, I'll call it too?

  • Will say deploy contracts dot Js.

  • Okay, what's inside of this directory?

  • Well, these air migrations gonna pace this code in here.

  • So what is the 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 are 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 the migration.

  • Whatever you're deploying a smart contract, the Blockchain you're actually changing the Blockchain state.

  • Remember, the Blockchain basically is just a big database.

  • In one sense, whenever you put the smart contact on the block chain, you're upping 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 runnin.

  • So make sure your starts the number two and inside of year.

  • But we'll do exactly change this change migrations to be to do list.

  • So to do list from artifacts require truffle creates a artifact out of this to do list that Jason that we saw a second ago.

  • And that's gonna be just a abstraction of the smart contract that it understands order to put in the Blockchain.

  • Now it's actually run the migration and deploy the smart contract to the block chain.

  • So first again, make sure that ganache is running.

  • Make sure that you, you know, configure this correctly and we'll run the migration like this.

  • But it's a truffle.

  • My great.

  • All right.

  • It looks like it was successful.

  • So 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 what?

  • This first account will see That the balance of ether.

  • You know, the Ethereum Cryptocurrency balance has actually gone down by a little bit.

  • That's because deploying smart contractor the Blockchain actually costs ether.

  • It cost gas.

  • And we can see that this account has done that.

  • It actually paid the gas fee in order to deploy the smart contract to the Blockchain and truffle by default uses the first account inside this wallet and her to pay those fees.

  • Now it's open the truffle consul in order to check the smart contract that we deployed the Blockchain like this'll say truffle console.

  • Now we retrieve the smart contract from the block chain like this will say to do lists equals await 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 contractor, deployed copy of it from the block chain and assigned it to this variable to do lists.

  • And you'll see this await key word here.

  • So explain that we must interact with the block chain in an asynchronous fashion.

  • And if you ever developed other JavaScript applications, you would know that there's a lot of strategies for handling a synchronous actions, right?

  • You can use promises.

  • There's a lot of different ways to do it.

  • But with trouble, Version five actually been able to use the A sink await pattern inside the console, which is really nice.

  • You could just do things in a simple one line like this.

  • Basically, this is just saying, you know, wait for this finished results and whatever the result is a scientist variable.

  • So we can actually look at that.

  • We say to do lists.

  • All right, you could actually see the result is a smart contract here, and I'll just pull this up so you could see let's actually get the address.

  • The contract will say to do list address.

  • All right.

  • And we could see this is the address of the smart contractors 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 contracts was a to do list dot count, but this is Itasca County.

  • Thinks what we call it.

  • All right, we got zero.

  • And now truffle actually stores that as a big number.

  • Whenever retrieve it, we could convert your number like this.

  • We could just say, uh, task account signed to a variable and say, Oh, wait, All right.

  • It was a task Count to number and it's you that 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, created new trouble project, you know, connected to a Blockchain, and actually to put the smart contract on the block chain 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 repositories.

  • I'll say, get in it.

  • And inside, if you're actually gonna create a getting your file, you don't really have to fall along with the steps.

  • But I'm just going to do them so that you all can see I'm gonna do inside of here is critics 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 get ad.

  • I'm not sure all these errors are sorry.

  • I'm gonna get commit.

  • I'll say project set up.

  • All right, that's it.

  • For the first part of this tutorial, we've actually set the project up in the next section.

  • We're actually gonna list out the tasks in the to do list.

  • Now it's list out the tasks inside of this to do list.

  • I'll show you the steps that will follow.

  • First will list the tasks in the smart contract, and then we'll do that in the console.

  • And next, we'll actually wire up the client side application, enlist 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 to do lists and what you write the code to list out the tasks that to do list year.

  • So first we need a way to actually model the task.

  • We'll do that with something called a struck Solidity allows us to define our own data types of Struck's, and we can create a new struck like this.

  • You could say struck tw Task follows with curly braces.

  • Unless to 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 end.

  • This is an unsigned integer, which basically just means that it's an imager.

  • Ah, that can't be negative, right?

  • So energies could be positive or negative with a minus sign.

  • A sign in front of it were a positive sign, and solidity allows us to define this struck task here.

  • And we could give us an attributes like this.

  • We can say you went I d this will be the idea of the task.

  • This is gonna be an unsigned imager, which basically just means an imager.

  • That can't be negative.

  • Right?

  • If it was a negative energy, we have a sign in front of it may be a sign imager, but this is unsigned.

  • And the next thing will be a string and will say the content.

  • This will just be, you know, the texts.

  • And next will be a Boolean, and that will be completed.

  • And that will represent the check box.

  • 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 a to do list with this data structure.

  • And now I need a place to put these tasks.

  • So where will they go?

  • Well, we effectively wanna put these in storage on the block chain.

  • So how do we do that?

  • How do we access those storage?

  • We need to create a new state variable in like we did here with task count, remember, Task count is getting written to storage to state variable.

  • It's 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 very well called tasks here.

  • But we don't want to be, you know, unsigned manager.

  • 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 will say you went It's a task.

  • Okay, Now, mapping and 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 data type for the key, which is an unscientific er and the task which is, you know, this struck that we defined here, and essentially this eyes going to be kind of like a database for us.

  • It'll have a U.

  • N an unsigned manager.

  • That will be the i d.

  • Essentially of the task that will store here.

  • So we can you look for task, you know, 123 and a return the tasks okay.

  • And we also want to make this public just like we did with a task count, 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 block chain in this case will be able to use this task I d reference here and store the task like this.

  • So now I need a way to actually put this task struck inside of this mapping do that will create a function called create task funk function Create task and inside of here will provides a single argument which will just be the content of the task itself.

  • So it's a string memory, say content.

  • It's too 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 idee of the task gonna create.

  • Right?

  • So that's why we're using task count and you see the each task struck has an i d.

  • It will want to increment this task count value anytime are creating a new task to put inside of this mapping.

  • So they're like this, so it is a task count.

  • 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 will have a new task count, which, if this is zero in the first time we call this, it'll change to one.

  • And that means the first task that we 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, maybe three.

  • So now it's actually put inside the mapping you don't like.

  • This was the tasks that will reference the mapping and we'll say task account.

  • We can actually reference it by, uh, you know, the key, which would be the inside energy here I want to say equals and we'll create a new task would do that like this.

  • We just say, you know, tasks.

  • Copy this and we say task count.

  • We just provide the arguments for the structure of the I.

  • D.

  • The content and completed the task count is a new i d.

  • The content is the content being passed in use from the function, and it's a new task, so it's not completed yet.

  • So let us say false.

  • All right now we have a way to actually put tasks inside that to do list, which will need as a prerequisite in orderto list tasks.

  • You know, we'll need some tasks inside of the to do list or 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 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, whatever 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 initialized functions out of a class or some sort of object, you know, maybe in it or knew something like that, you've seen a constructor before.

  • So basically, this is just going to be a function that's called whenever this smart contract is run for the first time, which in this case, is upon deployment.

  • All right, 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 would have, say, create task task, and we'll just pass in.

  • Ah, check out ap university dot com.

  • All right, see me going 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'll be something there forced 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 right tests and things like that.

  • All right.

  • Now let's actually compile a smart contract to make sure it worked with you say, truffle pile.

  • I'm asking syntax errors or something like that and we'll see.

  • All right, It worked.

  • So now it's actually open.

  • The console to Seaver worked was a truffle consul.

  • 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 he acts.

  • Need to migrate are smart gun tracks will say truffle migrate was gonna pass in the reset flag.

  • Just be safe here in case you had ganache already running.

  • So where's the reset flag do?

  • Well, that would deploy a new copy of the smart contract to the Blockchain if an existing one, um, was already there so I could go.

  • You know, we change our smart contract code here.

  • So he added new functions or something like that.

  • You could migrate with the reset flag to deploy new copy.

  • I'm gonna do that in case you have ganache warning already.

  • All right, now it's open the trouble console.

  • So do you like this truffle console?

  • And it will do is actually list out.

  • That's to do items.

  • So first, I will get a copy of the duelists.

  • Will say to do list equals, await to do list are deployed.

  • All right, let's make sure the addresses they're set to do this address hoops misspelled them.

  • Okay, Now it's actually list out the items.

  • Well, it explains why he was mapping.

  • We want to call this tasks function has provided by solidity to list out the task in the to do list.

  • And remember, we declare this public.

  • So solidity gave us a tasks function for free to references, 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, natively to know how big it is inside the smart contract, Um, and so you can't get away over it and you can't just return the entire thing.

  • You actually have a reference the items out one by one, and that's why we're using the task account counter cash here.

  • So we know this task count is one.

  • That means there's only one task that to do list, and we would just have to call this function one time to get that task, and we would pass in the I D, which would be one in this case, and it would return the task five or 10.

  • We would have to do this 10 times would call this function once with one, and they would return.

  • Task number one would call it the second time with two, and that would return task number two, etcetera, etcetera.

  • Until we get 10.

  • Which case it turned task number 10.

  • That's how we would do that.

  • And if you're doing that on the client side, we would use a four loop or something like that which will get to you whenever we reached that section.

  • So for now, inside the console, we could just reference, you know, the only to do item inside of your the only task is this one.

  • So we can say, uh, task equals await to do lists dot tasks.

  • I will say one.

  • All right, let's see what task?

  • She bumped us up.

  • All right, there you go.

  • So there is the task.

  • We could see the content.

  • Check out dap university dot com.

  • We can see that's completed as false.

  • We can see the idea is one.

  • It's a big number, but we can actually do that inside here because a task i d to number writes one task content.

  • Sorry.

  • Is that a function Justin attributes?

  • All right, so now we've actually migrated this smart contractor, the Blockchain, and we've been able to list tasks inside the console.

  • Now let's create the clients at application and actually Lu stout the tasks there.

  • So in order to do that, we need to create some new files.

  • First, will create a directory to store the clients.

  • I've files will just say, uh, this it's a source.

  • So we see a new director.

  • He came up here and we'll get a new file inside of here called index dot ish, you know?

  • Sorry.

  • Say touch.

  • Ah, source.

  • Next html and we'll create an app dot Js file to stroll the JavaScript code touch source.

  • Um, apogee s okay.

  • Stepping over the project.

  • And see, we have empty Abdel.

  • Just file an empty index dot html file and another file we actually want to create is, um B s config file.

  • Sobieski and FIG sends for browser sink, configuration of and browser sink is something that we use a za part of light server.

  • So if you go to your package, uh, Jason file, you'll see this light server dependency.

  • So this is the Web server that we're gonna use order to run the clients that 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 Jason files are.

  • We also want to tell it where our node modules are to pull out some dependencies for building out the front end.

  • Still didn't like this will actually create a new file.

  • Say touch.

  • Yes.

  • Stash config dot Uh, it was Jason.

  • Okay, So inside of this file, I'm actually a paste in some code.

  • Um, and you can actually get this configuration from the project from get hub down a description below the pace is inside of here.

  • And don't worry too much about this.

  • This is all just proprietary.

  • Ah, browser sink configuration space.

  • We were 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, exposed all of these directories to our our Web server route, and then also we're going to mask vendor with node modules.

  • So any node modules that existence our project weaken reference those of the vendor route.

  • All right, there's a server configuration, and now we actually want to fill in the index dot html file now likewise inside of here.

  • I don't 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 get have linked down below.

  • Gonna paste this in like this will do is actually build out the Java script part.

  • But I don't want spend too much time writing the HTML.

  • All right, some of paces in here.

  • I explained.

  • You know what's going on?

  • Um, basically, you were pulling in the Twitter bootstrap framework to write the front ends.

  • We don't have to write up into CSS and you I elements ourself.

  • Um, you know, we could see this.

  • Ah, vendor.

  • Bootstrap.

  • That was what I showed you a second ago and B s config.

  • That's how I got this vendor here and we could see some basics.

  • CSS has just written inside the head tag and yeah, we got some mark up.

  • Essentially, we have ah, simple loader to show whatever the applications loading oh, form that allows us to create a new to do item.

  • And we will actually, um have a way to list out the tasks here.

  • So for now, I'm going to just, uh, comment out this form.

  • I think they get a run, otherwise, All right.

  • And let's actually just see if we can start the server.

  • So I'll start serving our new tab.

  • Say, uh, in P m.

  • Run, Dev, I believe is the command, right?

  • Yep.

  • That worked.

  • So you can see.

  • Ah, that we basically got something, right?

  • Well, he's loading.

  • That's fine.

  • If you open your consul, I'm sure you'll see some errors or something like that.

  • Yeah.

  • Feel the resource.

  • That's okay.

  • Don't worry about that just yet.

  • We will wire this up to actually work, but for now, it's wanted to make sure that the server is working properly.

  • That we could see bootstrap, right?

  • We should this knave bar up here, we see the DAB University to do list, actually.

  • Click through this link.

  • It'll take you to my website.

  • It's pretty cool.

  • Um, yeah.

  • So it's still in the project that actually list out the two DUIs in this client side application.

  • The dullest, the to do items we essentially want to fill in this unaltered list.

  • Got to hear.

  • We have a list for the tasks and then the completed tasks.

  • So if we have an uncompleted task will go in this list.

  • And whenever we complete them, it'll go here.

  • But for now, they're all uncompleted civil.

  • Stay in this task list.

  • All right?

  • So in order to do that, when you do several things inside this app that Js file this is where we'll actually create.

  • Um, you know, our JavaScript app that talked to the block.

  • Jame, the first thing we'll do is actually created an app like this.

  • Sap his object.

  • Okay, Ammo crate.

  • Ah, load function and actually call this a sink.

  • We're gonna use a lot of a sink functions inside this tutorial.

  • Um, I've been using a lot of a single weight pattern loading data from the Blockchain.

  • It seems to be pretty helpful.

  • So we'll fill this in and then never to load the app.

  • Just actually do this Council log, uploading.

  • And in order to load the app whenever the product loads will just say say, window when it loads Well, just, uh, passing a function.

  • Say, after a blood actually did me to put that sex object you like this?

  • All right, so it's reload.

  • All right, so we see the ABS 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.

  • Well, to see the tasks right here, I'll be able to focus on the code.

  • What?

  • We're doing this.

  • The first thing I want to do inside this load function is actually, uh, say await ap dot load Web three.

  • We want to load the Web three library in order to connect to the Blockchain.

  • Now, when we love Web three, I'm actually 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 gonna be the browser extension that we use to connect to our DAP are blocked An application, um, to talk to the block chain with Webb three Js and men pass actually suggests a way to do that.

  • So I'm not going to reinvent the wheel here.

  • I'm just gonna do it.

  • Madam asked 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.

  • Um, just another This works and it's inside of the get help depository and you can find the code and link with the link in the description below.

  • So let me pause because I don't feel like a fully explained Web three Js very well on what's going on here.

  • Okay, 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 block chain.

  • And so we use meta mask for right, and then our client side application needs to actually connect to the block chain.

  • And that's what Web three Js is for.

  • So inside of our project will use the Web three Js library to talk to the ethereum Blockchain.

  • It'll actually allow us to connects to it and you know, reading right data from the block chain inside of the AB and then met a mask will allow us to communicate with that Clients at application with Webb three Js and allow us to, you know, interact with it via our browser.

  • So what we did here was just loaded up Web three Js, you know, loaded our Blockchain connection.

  • Essentially, we even call this, like, connect to block chain if we want to do, um And now well, actually use our browser to connects to it with meta mask.

  • So it's actually do that?

  • I will.

  • Um Well, gosh, let's actually find the private key here.

  • We'll show the key.

  • Copy it.

  • All right.

  • We're gonna met a mask and make sure you open this V m already.

  • And what you want to do is connect the private network, which is local host 75 45.

  • Right.

  • So you might see the main ethereum network first, but you want to change networks to local host 75 45 year, and what you want to do is click this accounts menu.

  • You want to import account and you want to paste in the private key.

  • It's like type private key in black paste and then import Alright.

  • Already done this step.

  • So I'm not going to do it will click cancel whenever you've imported the account, you know, from ganache you want to use this?

  • Make sure use the 1st 1 because that's the account that we deploy the smart contract with.

  • You'll actually be connected with that account to the block chain.

  • Right?

  • So here's your Blockchain account, and then you can add it to your wallet and met a mask to connect to the block chain with your Web browser.

  • And you'll specify the Blockchain by, you know, picking this local block, jen, that we have running with ganache.

  • Okay, so refresh that.

  • All right.

  • And you've got, um, your account connected to the network.

  • Now let's take that account.

  • Um, from ganache.

  • This one right here, Let's show it in our application to prove that we're actually connected to the block.

  • Shame with it.

  • All right, so I'll just say load, account like this.

  • Great load account function.

  • Say load account.

  • This would be a sink, and I'll say Apthe account equals Web three.

  • Each counts zero.

  • Good.

  • So, Webb three here I was set by ah love with three and it has e th object that's gonna contain all the accounts which will be an array.

  • Would you get the 1st 1 which will be the account that we're connected with inside a minute mask and inside the load function, I'll say await load account, apt upload account.

  • Okay, say that.

  • And now inside of the index dot html file.

  • Um, you'll see that we have a place for the account here.

  • This will be the, ah, pleasure.

  • We can actually add the account.

  • We'll do that in a second.

  • For now, it's actually just console that log and see if it worked properly.

  • All right?

  • Yep.

  • There we go.

  • We could sit here.

  • We're gonna verify that's the same account and let him ask.

  • So hee 9 to 5.

  • And that's you.

  • 95.

  • All right, So you successfully retrieved the account from Metta Mask and actually stick inside the project in a little bit.

  • Okay, so we'll just clean that up now.

  • It's actually load this smart contract from the block chain.

  • This will be the to do lists, um, that we created so that we can list out the tasks from the to do lists.

  • I want to do that.

  • We'll say load.

  • Contract.

  • So a sink positive function on inside of here, the first thing we'll do is actually pull out.

  • Um the smart contract.

  • Jason, file that Constance to do list equals await.

  • It was a Jake query.

  • Get Jason, it's me to do list.

  • Okay?

  • So if you remember inside the B s convict file, we exposed the build contracts directory to the root of our projects.

  • We can call this do you list at Jason file were actually pulling out this file right here.

  • We can log it. 00:48:28.660 -

everybody.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it