Blockchain Tutorial For Developers: Step-By-Step Guide (Ethereum, Solidity, Web3.js)

today I want to give you a hands-on introduction to how blockchain works as a developer and it doesn't matter if you're an experienced developer or if you're just learning to code I'm going to teach you blockchain from square one we're going to build a blockchain social network where you get paid to post you've gotten cryptocurrency rewards for creating great content our guide you step-by-step to build the full application from start to finish we'll set up a blockchain they'll develop smart contracts for the social network and we'll create a client-side website so that anyone can connect to the application and post to the social network and you might be thinking I don't even know what a blockchain is or how it works that's okay I'm gonna clarify all these kinds of questions at the beginning before we start coding so if you're new around here hey I'm Gregory from DAP university on this channel I teach you how to become a blockchain developer so if that's something that you're interested in click the like button down below and click Subscribe that really helps these videos get found so that more people can learn to become blockchain developers all right so before we start building the application let's answer a few questions like what is a blockchain and how does it work so if you're familiar with these things already feel free to skip ahead but not let's get started what is a blockchain I'll use an analogy to explain how a blockchain works let's look at a bank suppose that Alice wants to send money to Bob with a wire transfer all of her money is stored inside a bank account which has two primary purposes it keeps track of how much money she has and it provides an online portal that allows her to perform the wire transfer to Bob behind the scenes the bank has two primary technical features that make this possible a database the bank maintains a database ledger of all Alice's transactions to determine her account balance and transaction history and a network the bank uses a network to process wire transfers so that funds can be sent from her account to Bob's blockchain presents an alternative to this model by eliminating the need for a bank altogether instead of sending money to Bob via wire transfer she could send him cryptocurrency directly with a blockchain much like a bank the blockchain gives her a place to safely store her funds and send money to Bob it replaces the two primary technical features of a bank a database it also keeps track of how much money Alice has and a network Alice can connect to a blockchain in order to send money when she does the blockchain processes her transaction and moves the funds from her account to Bob's because it serves both of these roles you could think of a blockchain as both a network and a database at the same time let's examine both of these concepts further a blockchain has appeared to peer network meaning it's a system of nodes or computers that all talk to one another it is responsible for processing transactions so that Alice can send money to Bob she simply needs to connect to a node on the network in order to initiate her transaction and the blockchain handles the rest behind the scenes which we'll see more of in the next section now let's examine how blockchain functions like a database each node on the network maintains a copy of all the data on the blockchain for example they all know how much money Alice has in her account instead of a bank storing all this data inside a central database the blockchain stores are redundant Leon each node in the network this makes it virtually impossible to tamper with the data for example alice cannot manipulate her account balance because all of the other nodes know exactly how much money she really has and really quickly it's important to note that blockchain and cryptocurrency are not the same thing bitcoin is a cryptocurrency but blockchain is the underlying technology behind Bitcoin block chains can be used for other purposes besides cryptocurrency which I'll demonstrate throughout this tutorial now how does a blockchain work let's continue on with the example from the previous section suppose Alice wants to send some Bitcoin to Bob in order to do this Alice and Bob each need an account on the Bitcoin blockchain their accounts are much like their usernames Alice must know Bob's username or account address in order to send a cryptocurrency to him next Alice needs a Bitcoin wallet in order to send the transaction in this scenario her wallet reflects that she owns ten Bitcoin this is called her account balance being very generous she decides to send one Bitcoin to Bob through this three-step process first she enters Bob's account address as the recipient then she specifies that she wants to send one Bitcoin to Bob finally she signs the transaction in order to make it official in this last step Alice signs the transaction with her private key if her account address is like her username then her private key is a lot like her password it's sensitive data stored inside her Bitcoin wallet which she won't share with anyone else her private key allows her to create digital signatures that authorize her transactions on the blockchain like sending one Bitcoin to Bob at this point alice has done everything she needs in order to complete the transaction the rest is processed behind the scenes on the Bitcoin blockchain let's see how that works after Alice's transaction has been signed it is sent to the Bitcoin network a select group of nodes called miners process her transaction and record it to the blockchain these Bitcoin miners must solve a mathematical puzzle called a proof-of-work problem in order to record Alice's transaction each miner competes with one another to solve a cryptographic puzzle where they must correctly guess a random encrypted number called Ananse the miner that guesses this number first submits their answer or proof of work and this authorizes them to record the trends action to the blockchain and receive a Bitcoin reward for winning the mining competition whenever they record it they create a new transaction record on the blockchain groupings of these transactions are called blocks which get changed together to make up the blockchain and during the mining process the network reaches consensus meaning that each node verifies that they have the same valid data as everyone else this is called the consensus algorithm effectively each node says yes I have a valid copy of alice's transaction if they all agree the transaction is complete and the cryptocurrency gets transferred from alice's account to bob's when Bob checks his wallet he'll see that he now has one Bitcoin so why do we need blockchain well let's continue on with our banking example here are some reasons Alice might choose to use a blockchain to store and send money one reason is transaction speed suppose Alice and Bob live in different countries an international wire transfer could take days to complete instead Alice can send Bob Bitcoin in a matter of minutes also transaction fees let's say Bob is a merchant and Alice wants to pay him money for a very expensive service maybe ten thousand dollars if Alice paid Bob with a credit card Bob would incur a transaction fee around two percent or two hundred dollars but because Bob is Alice's friend she pays him a Bitcoin to save him money now Bob incurs no transaction fees and Alice only pays a few extra dollars to send money to Bob there's no third parties they don't need to sign any documents or wait for clearance in order to send money another reason is transparency instead of a bank storing all of her data she can verify her account balance and transaction history on a secure Network also security traditional databases and IT systems can be very vulnerable to attack in blockchain it's virtually impossible to hack the public ledger in order to change alice's account balance or transaction history and finally anti fraud because blockchain transactions are publicly verifiable they enable companies to build anti-fraud solutions that make it very hard to fake transactions or embezzle funds now let's talk about how to become a blockchain developer up until now we've discussed how to send money with the blockchain now I want to focus on how to use blockchain to actually build applications unfortunately bitcoin is quite limited in this area so we'll look at a different block chain called aetherium instead in addition to sending cryptocurrency aetherium allows developers to create decentralized applications or adapts that run on the blockchain theory ohm achieves this with smart contracts which are programs that run on the blockchain let's see how these apps work first let's look at how a web application works and then we'll compare and contrast the two normally when you use a web application use a web browser to load a web page and that talks to a central web server over a network all the code for this app lives inside the central server and all the data is housed inside a central database anytime you transact with this application you must interact directly with the central server this presents a few problems the application creators could change the code on the server or the data in the database at any time because they have full control we can eliminate these problems by using the blockchain instead here's how it works we can use our browser to load a web page and that talks directly to the blockchain instead of a back-end server and database we can sort all of the application code and data on a blockchain instead of this central server this is a fully transparent and trustworthy way of knowing that the application code and data won't change but why is that all of the backend code for the application will be made up of smart contracts these are the building blocks of blockchain applications all of the code for the smart contracts is immutable or unchangeable once the code is put on the blockchain no one can update it or tamper with it and we know that it will work the same way every single time smart contracts are written in a programming language called solidity which looks a lot like JavaScript they're in charge of reading and writing data to and from the blockchain and executing any business logic that we program they work a lot like a micro service on the web also they're called Smart contracts because they represent an unchangeable Digital covenant or agreement all of the data for the application will be stored as transaction records inside of blocks on the blockchain as we saw earlier each node on the network maintains a copy of all this data to ensure that it is secure and unchanged so that's how a blockchain application works from a high-level and the next section we'll get a closer look by building one together step by step here's the blockchain app or DAP that we're going to build this is a blockchain social Network powered by smart contracts where you get paid to post other users can tip your status updates with cryptocurrency so that you're rewarded for creating great content will even curate the newsfeed so that the most tipped posts appear at the top instead of relying upon an algorithm that nobody understands this is a much better news feed because our social network is censorship resistant which means that no third parties can tell us what we can and can't post and they also can't limit what we can see inside of our newsfeed we'll also create a slick mobile-friendly user interface where everyone gets a fancy icon automatically for their account 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 type of 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 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 or 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 one 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 alright 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 shuffle by going to your terminal and typing NPM install - gee truffle at 5.0 dot 5 and it's important that you use that exact version in order to follow along with this tutorial but 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 it 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 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 that you have all your dependencies installed let's go ahead and start building the project find wherever you downloaded the ganache personal blockchain and open it once you see a screen like this click QuickStart and after that's finished loading you'll have a blockchain running this will be the development blockchain that we'll use to create our smart contracts this blockchain comes with ten accounts and each of these accounts comes pre mined with 100 fake either each of these accounts is going to represent all the users on our network in this case anyone who can post on the social network and give tips the account addresses are going to be like the username on the blockchain and the private keys are going to be like their password and also don't get too excited because this ether isn't actually worth anything on the real aetherium network because all the ether on this blockchain just stays inside of ganache the next thing we want to do is create the files for the project there are a few different ways to do this you could do it natively with the truffle suite by creating a new truffle project like this you could say a truffle in it and this will create a new truffle project for you but instead of doing that I'm going to use a template that I created to help us get started fast all right you can find that on my github and I'll put a link down the description below this is just github.com /jp diversity forward slash starter kit so we can use this by copying this URL going back to the terminal and type in git clone and then paste in the URL all right hit space and we'll create the project like this we'll say social - network and this is going to create our project for us now we can enter into that newly created directory like this we'll say CD social network alright I'll just check out the files that are in here I'll say LS - oh that's how you list all the files inside of this directory now I'll open it in my text editor like this I'm using sublime text and I've configured a shortcut of my system to where I can open sublime text like this I'll say subl dot alright that just opens sublime text in the current directory alright there we go so here you can see on the side there are some files already created the first file look at is this trifle - config file this is the file we use to configure the trumple project like tell it the blockchain we want to connect to this is how we tell our troubled project that we want to connect to the ganache instance that we just set up right and tell it that ganache is running on port 75 45 on localhost you can see that right here alright and while I'm looking at this file I want to mention something all right this this project works slightly differently from a standard truffle project I've actually customized this to put the smart contracts in a specific folder you can see I have a source folder here that's because I want to put my smart contracts and there ABI is inside of a directory that can be exposed to the client-side application which we're also going to build inside this project and don't worry if you don't understand that just yet I'll explain that when we get there but just in case you have worked on other truffle projects before just understand that I'm going to be doing things slightly differently but you shouldn't have any trouble following along with me step-by-step in this tutorial so inside of this source directory we have a place for the smart contracts we can see a existing smart contract inside of here all right this is the migrations smart contract that comes with a standard truffle project this simply is a smart contract that allows you to put new ones on the blockchain so we'll create our new social network smart contract here momentarily we can also see a some files for the front end which we're going to build and react j/s so you can see main app that J's component will customize this here and we'll create more code inside of here to actually interact with the blockchain and build out the client side application so let's go ahead and start the development server just to make sure that the project was installed correctly and actually before we do that we need to install our node modules because if we have a package.json file here that includes all of the dependencies that we need in order to build this project so they don't have to create them one by one all right this is one of the reasons I've used the starter kit is to save a lot of time so let's go ahead and install our dependencies I'll just say npm install alright that worked and I'll make a mention while I'm here if you see some extra output here you might just have some warnings right if as long as you see this success message down here it's okay you know your dependencies installed correctly it's certainly not ideal to have a lot of warnings but you know we can try to fix those as we go on now that the dependencies are installed let's go ahead and start the development server I'm going to open a new tab here so that I can have you know a server running and then a tab to work in and so I'm gonna run the server like this I'll say NPM run start alright so it looks like it already opened up a new tab for me my web browser I'll go ahead and pull that onto my screen here and there we go there's the starter kit that comes with our project alright so this starter kit gave us a lot of stuff for free we have a front end framework so that we don't write a lot of CSS we have some UI that we can just simply customize for our purposes in this project right we have a navbar I've got some nice-looking fonts and you know some styles for our text and links even got a logo here and also we have the react.js framework that we can use to write javascript to power this front-end application and talk to the smart contracts all right you know react is a component based library that's gonna save us a lot of time and headaches in order to develop the project and don't worry if you don't know much about react I'm going to show you everything step-by-step in this video now I'm going to close this out because we verified that it's set up properly alright let's go ahead and kill this and I'm gonna go back to my project and start creating the smart contract and I go back to my truffle project and start creating the smart contract and see if we can deploy a basic copy to ganache just to make sure that our projects set up you know that this is talking to the blockchain correctly and that we can indeed actually create a new smart contract so in order to do that I'll go to the source directory and find the contracts directory I'll open this migration contract again and I'll create a new file here alright and I'll call this social capital s social capital n Network dot Sol all right that's the extension that we use for the solidity programming language that we'll use to create the etherium smart contract all right so this is the file that we'll use to write the social network smart contract and there's one thing we need to do before we write any other solidity code we need to tell this file what version of solidity that we're going to use and we do that just like this all right we say pragma solidity we use a caret and we say 0.50 that basically just means any version of solidity that's version 0.5 dot 0 or greater all right now we're going to create the smart contract like this we'll use the contract keywords that contract and say social network and then we'll use some opening curly braces and we'll put the rest of the remaining code inside of here now inside of here I just want to implement some really basic behavior to ensure that we can actually create smart contracts put them on the blockchain and interact them in the console right I don't want to do anything fancy I just want to make sure that the project is set up properly so what I'll do is create a variable and a sign of value to it and then try to read that value from the blockchain all right so I'll do that like this I'll create a new variable called say name all right and we can you know create the variable like this but in solidity you must declare the type of the variable before you create it so I'll say string alright it's a string name that's the next thing and we need a semicolon after each line so I'll put a semicolon there alright now I want to set the value of this variable I'm going to do this inside of a constructor function alright a constructor function is a function that gets run whenever this smart contract is initialized or created that's basically whenever it's put on the blockchain and we can create the constructor function like this as a constructor all right that's the special keyword for this function and we can put the code for it inside of here and we'll just set the variable value we'll say name I'll say equals say DAP University social network all right and then we need to also add a semicolon at the end of this line just like we did here right so next we need to modify this constructor function with a special keyword called public alright so what does that mean it essentially means that solidity needs to understand this function is accessible to the public interface for the smart contract essentially this function can get called outside of it and it is going to get called outside of it whenever this contract is deployed to the blockchain that's when this constructor function runs okay now solidity supports other types of functions inside the smart contract that wouldn't necessarily be public but this one needs to be public all right so we have created a way to store the name and we have set the value for the name inside the constructor function that's going to get called once and only once when the smart contract has run so now we need a way to actually read this you know we have the variable value but we can't read it yet we do that just like this we say string public name all right and what that does is give us a special function for free inside a solidity that will return this value okay so whenever we talk to the smart contract here in a minute we'll be able to read this name value with a function called name even though we haven't explicitly defined a name function it's going to give us one for free also this variable is special because it's called a state variable which is different from a local variable which you might just see inside of a function instead this state variable belongs to this entire smart contract and it's special because its value gets stored on the blockchain itself it doesn't just stay in memory so whenever we write this name value you know daap university of social network the value of this variable is actually going to get written to the blockchain all right so that's all we need to do for our basic test okay so let's go to our terminal and see if this compiles will just say truffle compile all right I'll go and bump this up a little bit see if there's any errors in our code alright it looks like it worked so there are no syntax errors with our solidity code so we can see that a new file is created here inside of source abis and we can see a social network JSON file so this contains a ABI which is essentially just a JSON description of how the smart contract works inside this file essentially it's just you know describes the functions and the the values and all the behavior that's associated with a smart contract okay so the next thing I want to do is put this smart contract on the blockchain we want to put it on ganache let's see here ganache right here so we need one more file in order to do that we're going to create a migration file so at the top level of your project go inside the migrations folder and you'll see a file called one underscore initial migrations okay so I'm gonna create a new file inside this same directory we'll call it to underscore deploy underscore contracts alright so this is going to create a new file that's going to get run whenever we will put new smart contours on the blockchain and I'll explain what a migration file is so if you've ever you know used another development framework maybe you've built a mobile app or you've built some other web application or really any kind of app that uses a database you've probably seen some sort of migration file and a migration just means that you're moving something from one state to another alright that can be moving data from one state to another from one place to another in this case we're putting our smart contract on the blockchain we're moving it to a new place and it also means that we're updating the blockchains state from one state to another so that's what a migration file is it creates new smart contracts in the blockchain so I'm going to copy the code from this initial one and just paste it in here as a starting point and I'm going to edit it so I'm going to highlight all the instances of migrations and type in social network all right this is the same name as the smart contract all right which is coming from here all right social network and truffle uses something called artifacts to get this value all right and the artifacts essentially come from these files inside of this a be eyes directory okay so this is this is the artifact that truffle uses in order to create the deployer right here in order to do this migration and I'll also note that this file is numbered because truffle has to know which order to run these migrations in okay now that we've created that let's go ahead and run the migrations and put this smart contract on our ganache personal blockchain I'll go to the terminal and from the project directory I'll I'll run truffle migrate alright it worked so we can see that the smart contract was put on our development blockchain now let's try to interact with it in the console I'm going to open the console like this I'll say truffle console you now we have access to a JavaScript runtime environment where we can interact with the smart contract that's deployed to our network okay so essentially we can write JavaScript inside of here to interact with the smart contract which we wrote in solidity and I'll show you how we do that I will fetch the smart contract from the blockchain and it's a few ways that we can do this essentially we want to use this let's see here social network value so I'll just copy this and say social network okay and we can say deployed all right and we can see a return value here so what this does is get a deployed copy of the smart contract from the blockchain now there's one problem all these calls to the blockchain are asynchronous which means we have to wait for them to finish right and because about JavaScript works I can't really just assign this to a variable I can't say contract equals social network deployed that's not actually going to return the value because JavaScript is going to return a promise here because it has to wait for this to finish so there's a few ways to handle this one way would be to do this dot deployed and then pass in a callback function say then write and say you know contract and then contract equals see he's a contract okay that's one way of doing it but I'm actually going to use the async/await pattern so there's a lot of ways to do this in JavaScript but I'm going to propose the async/await pattern because I'm going to use this heavily inside of the test suite whenever we write tests with a smart contract as well so in this case I'll say say contract equals a weight social network dot deployed all right and now I can fetch the value like this okay we can see it's the same value that was returned but this is just a shorter way of doing it and this is a pattern that I'm going to use repeatedly whenever we develop this smart contract on the on the client side and also in the tests okay all right so we have a copy of the smart contract we can inspect the address on the blockchain contract to address oops sorry two S's there we go there's a unique address of the smart contract this tells us where it's located on the blockchain if you have this address and the ABI you can you know interact with it the next thing we want to do is I try to read the name just like we set here all right and we can also fetch that value like this we can say name equals a weight contract dot name because we also have to wait for this to finish because it because it's an asynchronous call so name equals a weight contract name all right you'll notice this says undefined here we simply need to return the name by retyping the variable say name hit enter there you go awesome DAP universities social network so it worked the value is set whenever the contract was deployed to the blockchain and we can successfully read the name with this public variable value you can see that solidity gave us this reader function dot name for free all right so we successfully set the entire project up we've started a blockchain right that has some accounts with some ether we've created a client-side web site which we're going to develop later but you know we started this web server here we've you know started our smart contract and we have deployed to the blockchain and we talked to the smart contract inside the truffle console so congratulations you're off to a great start in the next section we're going to continue building out this smart contract and actually set up a test suite that's going to allow us to iterate on it and add new features all right so let's go ahead and go to that next section now let's continue building out the smart contract for our social network I'm going to do this by writing the source code here you know with solidity inside this file and then I'm also going to simultaneously write tests that check that our code actually works while we're developing it and I'll do that in a separate file written in JavaScript just like we used here in the console so let me explain why I'm doing this it's going to save us time you know writing tests while we write the source code means we don't have to go back to the console and check that our code works every single time you know I showed you how to use the console here by you know checking the name but let's say we added another function and we wanted to make sure that that function worked and also the name worked well we don't want to have to go back to the console and you know call the name again and then call the function and keep doing that every time we you know change our behavior we're gonna automate this process by creating a new test file that can you know ensure that our code works while we're building new functionality and I'll put that file inside of a new directory I'll go to my terminal and I'm gonna exit the console so exit okay so I'll create a new directory for our tests I'll say mkdir I'll say test ford slash alright you can see my editor that a new test directory was created here now I'll create a new file for the test I'll say touch tests forward slash capital S social capital in network is alright so now we see a new file and this is where we'll actually write all of our tests so I'm going to use two tabs here and you know you do a two column layout up with the source code here for the smart contract and then I'll write the the test in this side we're going to write our tests in JavaScript and we're gonna do that with the help of two libraries that come bundled with the truffle project the first is the mocha testing framework this is going to allow us to write test examples which we'll see here in a minute and we're also going to use the chai assertion library all right this is going to allow us to write test assertions you can see like you know assert equal all right so we'll see plenty of examples of this but just know that we're using these two libraries while writing our tests and also I'll mention another reason why testing is so important it's critical to ensure that our smart contract code is perfect before we deploy it to a blockchain remember that you can't actually update smart contract code once it's on a blockchain all right once you've deployed it it's there forever and you can't change it and that's what makes it a smart contract it's it's immutable it's unchangeable so we want to ensure that we don't have any bug before we put them on the blockchain and our tests are going to help us do just that so let's get started first inside this file I'll import the smart contract just like we did in the migration file I'll do this I'll say Const social-network equals artifacts that require and then we'll say social network does so again you can just copy this line I'll see here from the migration file alright this is the same okay that's gonna bring the smart contract into this file next I want to require the chai assertion library I'll do that like this I'll say require chai all right and then I'm going to use require chai as promised this is also inside of our package that JSON file and I'm going to call should okay so this is the same thing as just putting these all in the same line but I'm gonna break it up so that's easier to read all right so now we can create the skeleton for our test by saying contract all right and then pass in social network just the name and we'll pass it a callback function like this and then we will write all of the code for the tests inside of here okay this callback function has a variable which is going to contain all the accounts that were provided to us by ganache so this variable is going to be an array that's going to be all of these accounts right here okay and we can use those accounts as examples inside the test okay so let's go ahead and run a basic test to see if the smart contract was deployed to the blockchain first we'll say let social network to keep a copy of it this is the variable that we'll use to represent the deployed smart contract and let's say describe deployment all right and then I'll pass in a function and what I want to do here is create an example and just say it deploys successfully alright then I'll also pass at a function here all right so how do we check to see that it was deployed successfully well remember inside the console we returned the address so we want to do is assume that if the address is there then it deployed okay remember from the console we did that just like this we said social network equals a weight social network dot deployed all right now we've already declared social network here with let's so we can assign this variable value all right but in order to use this a weight keyword it has to be called inside of an asynchronous function hence the async await pattern we didn't have to call the async keyword inside the truffle console it just works natively but inside this test suite we have to add an async keyword here they're also going to put it here alright this is going to allow us to use this awake keyword and type this function otherwise it's gonna blow up on us alright so now let's check for this address just like we talked about I will say Const address equals a weight social network lowercase social network address okay and then now we want to make sure that the address is not blank I'm gonna do that just like this I'll say assert not equal address 0x0 all right when we've a blank address and then I'm also going to check to make sure it's not an empty string it's not null and it's not undefined so I'll do it just like this boom so that's how we write the assertions just assert not equal passing the first value and then compare with the second value so address right here and then 0x 0 it's not empty string it's not null it's not undefined all right so now let's just run the test and see if it works go to the terminal and say truffle tests all right it works boom we've got our working test suite yeah let's continue creating some more tests first I'm going to create a new example like this say it has a name just like we did here and then I'll pass another function async and say con snai m-- equals a weight social network name and they say assert equal all right not not equal but equal to name unless a DAP University social network all right so we got one problem we don't have an instance of social network yet so I'm going to remove this because I don't want have to do this every time like I might have to say you know this which I don't want to do I want to do it twice as I continue writing more you know test examples outside of this later so what I'm going to do now is say before they sink and then pass in social network equals away social narrative deployed and then removed from here this is gonna reduce duplication and it's gonna allow us to you know keep checking this variable value after we create more you know specs or tests after this deployment description okay so I'll say that go back to the terminal and like run the tests all right it passes awesome so we have our test suite set up so now let's go ahead and continue building out the rest of the smart contract let's make a quick list and everything we want the smart contract to do okay we'll say it must create posts all right these are the social media posts and then it also must list all the posts all right and then it also must tip posts okay these are the three core functions that we want the smart contract to do okay allow people to post see all the posts people have created and then allow other users to you know tip the post with cryptocurrency and make those posts you know appear more relevant okay and then you know whenever the tips are created the authors will receive the tips so in order to do that let's go ahead and just write this out as a list over here in our tests I will just say describe posts posts so I'm gonna give us some space here I'll pass in this asynchronous function all right and it here I want to create you know two examples or sorry three examples that you know describe all the behavior right we'll just say it creates the posts it lists all the posts and it tips the posts all right boom there we go those are the three core examples that we're going to use whenever we're developing out the smart contract and this describes exactly what the behavior is going to be right this list is just you know moved over here it creates posts and lists posts and it allows users to tip posts so let's focus on this first part it allows you know users to create posts okay so the first thing we want to do is create a function that allows users to do this so let's hit enter and say function all right that's the keyword that we use inside solidity let's say create post alright so here's you know just a basic function structure but we need more than just this you know we could write all the code for creating the post inside of here but we need some content we need an argument okay so whenever someone creates it they're going to have a variable called content that's just gonna be some sort of string like this you know if you're posting your status on a social network that would be the content of the post and we'll put that inside here like this say string content okay so this is going to be a local variable that's different from this state variable right this is just an argument passed into the function and we'll have access to inside if you're just like this all right content so you'll notice this looks slightly different from the state variable it has an underscore that's just a naming convention used when writing solidity code that comes from other languages as well to let you know that this is a local variable and not a state variable okay so it's nothing special you don't necessarily have to have this here but I do it just so that it's easy to read and know that this is a local variable not a state variable so next we also need something called memory here all right this is just a modifier that solidity requires us to use whenever passing this in and we also want to be able to call this function outside the smart contract so currently you know if we try to call this from our test or in the console it wouldn't work because we have to declare it public just like this all right so once we pass in the content for our post we need to actually you know create a post itself so how do we do that well I'm going to do something called a struct in solidity so solidity allows us to create our own data structures like this we can use a struct keyword alright and then we can call it anything we want to so I'm just going to say posts and then we can use some curly braces just like this and we can define all of the attributes before the posts that's really simple you just say you int ID all right this is going to be the unique identifier for the post just like an ID inside of a database and this is going to be a string content all right that's we're going to store this value here all right then next I'll say you int tip amount all right this is going to be the amount of tips that someone can give and this we can update this and then next we want to say we want to keep track of who the post author is in this case this is going to be an aetherium address just like the username so we'll say address author okay so um you know make a mention of this that you went just stands for an unsigned integer that means this has to be an integer value that can't be negative that's what unsigned means right so you know an integer could be like one a signed integer might be negative one because as the sign in front of it but we don't want it to do that right and then you know string is pretty self-explanatory and like I said address is just like the addresses we saw anga nosh these are like the users on the network okay so that's how we model the post we create a struct that has an ID as Content tip amount and author that's all the data we need to store a post now we have this we can actually create a new post inside of the function just like this I'm gonna move these tests over momentarily and give us some more space here to work with so we could create a new post just like this just say post all right and then this is going to allow us to pass in all these arguments the ID the content the tip amount and the author all right so we can just say right now I'll just hard code and say ID equals 1 we're gonna change this momentarily but I just want to show you how this works so we say ID say contents there's gonna be the content passed in here and then the tip amount whenever we start is going to be 0 so I got I got to do that as well say 1 all right so ID 1 content tip amount is 0 and then the author so who is the author well solidity gives us access to a global variable called message or msg and this has this allows us had to read some other arguments one of which is sender all right that's how we find out the person who is calling this function so this is a special argument essentially inside this function that we don't pass in here right you don't you know see it but we can actually declare who the sender is who's calling this function I'll show you that the test here in a second and that's gonna you know tell us who the actual post author is whoever called this function all right so that's how you create a new post struct so we need a place to put this actually stored on the blockchain you know this just instantiates it whenever we you know create this it just you know gives us a new post but it doesn't actually save it so how do we do that well we're gonna use something called a mapping all right so solidity allows us to create something called mapping like this and mapping and a mapping is essentially just a key value store that allows us to store data okay and because I'm declaring this mapping here it's going to be a key value store that you know actually writes information to the blockchain itself this is going to kind of help us treat this smart contract like a database with the blockchain so it works a lot like an associative array or a hash in other programming languages so you can say you int and then say posts all right so this is the key this is the value the U nth is going to be the ID of the post just like this right here and then the value is actually going to be a post struct all right so that's how we'll store this on the blockchain and we can add the post to the mapping by first creating a post variable alright just like this so mapping posts is going to be a structure that stores post like this u int posts right we can also declare this public so that we can fetch posts from the mapping later just like we did with name alright this is going to be a give us a reader function or we can pull this information out of here like name posts so they could have a post function pass an ID return the post so now let's actually add this post to the mapping after we've created it which is that just like this we could say posts equals post like this and then say posts and then we want to give it the ID where this post is going to get stored in this case you know the first time we call this function to be one alright just that one this is the same ID and then we'd say let's just let's be explicit about this ID equals one let's say ID all right just so you see where it's coming from and we just passing the post like this all right and so sorry I want to change that so post equals the new credit post and I put the post inside the mapping just like this the key is the ID all right the same ID here and then the value is gonna be this post itself that we just created all right so that's all the basics that you need in order to actually create the post so I'm gonna change this a little bit because we don't want to just hard code this ID we actually want to you know create a new ID anytime a post is you know creative I'm gonna do this with the counter cash which will look like this we'll just create a new variable at the top so under name I'll say you int it's gonna be an unsigned integer public post count alright and this is going to initially equal 0 so what this will do is keep track of the number of posts that get added to this mapping alright and I'll do that like this I'll say post count and I'll increase the value by one whenever we call this function alright so the first time we call it post count is initially going to be zero all right and after we increment it it's going to be one and then we can use that value as the ID like this all right and then also here so the post count essentially will be the ID once we've updated it right here and then every time we call this function it'll increase right the next time it'll be two the next time would be three and so on and so forth all right so I'll say increment post count and that's what this plus plus means it means just add one to whatever the previous value was the first time it'll be zero that'll be one then two etc etc all right then next I will say create the post and now what I want to do is you know make this a lot simpler instead of doing this on two lines I'm going to do it on one line all right so we've got post count here and instead of a sign this value to post first I'm gonna do it in one shot just like this say boom done alright so this will just create the post struct and add it to the mapping all in one line so here's the post mapping here's the ID which is the key and then the value which is the post just like this boom done that creates the post and saves it on the blockchain all in one line alright awesome so let's go ahead and write some basic tests for this we're gonna add a few more lunch this function but I want to focus on the test suite for one minute just to make sure that you know we can get this rolling so first I'm going to call this function inside the create post example all right I'm going to say social network all right we have a copy of this already because we created it here inside this you know before hook right so say social network create posts right just like we did here with name and then I'm going to pass in the value for the content all right so I'll say this is my first post okay so that's you know basically how you would all functions on solidity but we need to specify who the author is okay so remember I talked about this msg keyword here msu got sender we need to know who's actually sending this function so we do that with function metadata and from the client perspective right inside JavaScript we pass in a function metadata after the regular arguments right this function just takes one regular argument but it takes an optional object after that and this is where we'll add all the function metadata okay so we'll say from and this value right here from is going to correspond to MSG dot sender all right so from equals MSG got sender on the solidity side all right so here how do we pass in the address for this well if you remember a minute ago I talked about the accounts getting included inside of here right you can see all of the accounts in ganache right here right so I can also break this out you know we could read account like this we can set accounts 0 we could fetch it out of the array but instead of doing that I'm going to actually specify the account that's gonna be called here with a specific variable so I'll use an array here instead and I'll list out 3 different accounts that we're always going to refer to inside of this test example all right I'll say deployer this is gonna be the account that actually deploys the smart contract to the blockchain I'll say author alright this is gonna be a person who creates posts and then I'll say tipper this is going to be a person that you know creates tips on posts so social network create post this is my first post from author boom so that's gonna be the address of the person who's creating the post and that's exactly is going to correspond to msg does send her right here which is gonna get saved as the author value inside of this post mapping all right so let's call that inside of our tests by saying a weight all right and then we'll say result equals that and in order to access this value on down the line I'll say let results okay and then next I want to ensure that the post was created so I'll say post count equals a weight post count all right we can say post count here and so essentially we're going to dig into this result and see you know that it was created and that the post count increased so that's those are the two conditions we're going to check whenever you know it creates the post so how do we do that so first let's just do a basic check that the post count was increased so just say success and we'll say assert equal post count equals one because remember it was initially zero but now we want to make sure it's one good and I'm gonna go ahead and just do one pain here so say that on the test it's a truffle test oops let's look we had a little problem here I forgot to finish writing this line so post count equals a weight social network dot post count all right sorry about that so let's say that go back to the terminal run truffle test again all right it passes so this is a little misleading these aren't really passing so I'm going to comment them out for now just coming out like this all right that way we won't have this me slitting information whenever you run the new tests okay so the post count was increase so now we want to actually dig into the post and you know actually ensure that the values are set correctly so we need to write some more code in order to do this so solidity allows us to create something called events all right they get triggered whenever we call them so I'm going to trigger a new event here and we're creating this event to track the values that were stored inside of the post okay these events can be triggered from solidity smart contracts and subscribe to by external consumers the external consumers can listen for them and get the information from the event and you know do stuff with that information and that's exactly what we're gonna do inside of our tests we're gonna subscribe to the event and read its values and check that the data is correct and that's exactly what was you know in the post so let's create a new event inside of solidity like this it's pretty easy we just use the event keyword say event post created all right we use open closed parenthesis with a semicolon and then I'm going to use new lines here so I'll say you int ID it's gonna be the same values but we'll use commas instead of semicolons I will say string content say you int tip amount and we'll say address author all right so we can trigger the event pretty easily inside solidity we'll just say emits post created all right as a post count say content zero msg sender it's basically the exact same you know values we passed into the function so let's just run the test again and make sure everything works we didn't break anything all right it works so now we can go back to the test and log out this result and this result is going to contain the information for the event itself that will allow us to verify the data from the post so I'll just do this I'll say console dot log let's see here results all right so I'll save that and see what it looks like whenever you run the tests and this will show you the structure of the result we can kind of inspect it and then see the information we want to pull out of the result in order to verify it alright so here's a result this is an object that has a transaction you know it has a receipt and we want to dig into this receipt to get this value here the logs alright the logs is going to contain this event post created that we just added in such solidity and this events going to contain all the data from the post self okay and that's exactly what we want to do in order to verify the data so like I said it's an event so result is sorry it's a it's an object so to say oops sorry result logs all right let's see logs here logs all right and the logs has as an array we get the first item out of the logs all right so this is your base index array and then args and this is going to be the event does it cost event boom now the event is going to have also to quite log the event and show you what it's inside of it so I'll do that again on the tests alright so here's the values that are inside the event it's got the ID the content the tip amount and the author all right so we can inspect all those values just like this we can inspect that the ID is correct that the first that the contents correct that tip amount and the author do that just like this boom done the cert equal event dydee to number all right because it's a big number in JavaScript post count to number ID is correct all right so post counts here and here's the event ID event content we want to be this is my first post that tip amount it should be zero event author should be the same author that created it all right so save that run the pote run the tests all right it passes so the next thing we want to do is add a final bit of behavior to this function we want to ensure that the post actually has you know some content inside of it we don't want somebody just creating blank posts on the blockchain all right so we can do that like this we can say we can kind of failure case this is a success case and we say failure right here post must have content so they await a social network that create posts let's just copy this and we'll take this off and will you do empty content from author and we should say should be rejected this should fail okay so currently it won't fail but we want to create the test where it will so we'll go to the source code and use something in solidity called a requirement okay so we'll say require valid content all right so there's a special function in solidity called require and whenever this function is called it checks for true or false okay so if it's true then this is okay okay this function won't do anything else and the rest of this will continue execution but if this evaluates to false this will stop execution and none of this code is going to get called okay and also any gas that gets used in calling this function will be refunded back to the caller I'm gonna make a mention of gas here in a minute I know we haven't talked about it much but I'll revisit that topic here in a second okay so essentially we want to do is require the the content is valid we wanted to create an expression that's going to evaluate to true if it is valid and false if it's not valid so that's pretty easy we can just say bytes content all right this just takes the content which is a string and converts it to a bytes array and say length I'm gonna say is greater than 0 boom essentially we're just checking that this string actually has some content inside of it if it does as a bytes array it's greater than 0 then it'll be true this function will continue execution and if it's not it'll be false and it will stop and none of these you know will be executed so let's run the test see if it works alright it passes all right so that's it for this section we've done a lot of work so far you've created a new function inside the smart contract to create posts you've learned about mappings and you know structs and said solidity and all kinds of good stuff right we've written tests you covered a lot of ground so you should be really proud of yourself all right we're gonna revisit some of this code in the next section talk about gas refactor some of this and we're gonna move on to listing out the posts and also creating tips all right so let's go on to that next section all right so let's go back into this smart contract right in the last section we created posts with this function we want to do a few things inside this section we want to continue out our tests we want to you know list the posts and then allow users to create posts so we'll create you know a function for that also inside this smart contract okay so while I'm here I want to clean things up a little bit and make a mention of a few things at the end of the last section I mentioned gas so this is a topic we haven't talked about much yet in the tutorial so what is gas well I'll explain it this way anytime you write new information to the blockchain itself you have to pay a gas fee alright so anytime you send in cryptocurrency from one account to another you must pay a transaction fee for doing this likewise any time you create a smart contract or you call a function that actually updates the blockchain itself you also have to pay a gas fee so whenever you're calling functions inside solidity there's you know two types there's reads and there's writes so reads are free but rights cost gas because they actually change the blockchain and any time you're sending cryptocurrency from one account to another they also have a transaction fee associated with it and they cost gas alright that's what you know this is it's basically a transaction fee paid in ether the you know theorems native cryptocurrency and you must have ether in order to you know create transactions on the etherium network okay and so you know if you notice if you open ganach you'll see that the balances have gone down right so there's ninety-nine point eight five ether ninety-nine point nine eighty three they used to be a hundred well why is that well this first account right here is the deployer right if you go to our test you'll see this is the deployer this is the first account in the list right this is deployer this is the tipper the second account in the list or sorry the author second account and then this is going to be the tipper all right so the tipper hasn't created any transactions yet all right but the author has so whenever the author was creating his post he created a transaction on the blockchain alright and this cost a gas feed same for the deployer which happened every single time that this function was called it also had to pay a gas fee and that's why this account balance has gone down he is less ether than the rest of these okay and then as soon as we create the tip functionality the tippers account balance is also going to go down by the tip amount and also the gas fee now is how the test let's go ahead and do a little cleanup so you'll notice that I used it before hook here before we you know did the deployment I'm going to do the same thing for the post okay so just before this you know creates post I'm gonna move this up a line just like this and I'll use it before hook I'll say boom before async the result is equal to this right so we'll track the result in the post count inside of here and so rather than doing it here inside example because we want to use these values result and post count and inside these examples like this all right so I'll I'm coming this out and now inside of here we'll be able to access you know the result and the post count as well so now I wanted to test for this for listing posts we're gonna call the post function okay just like this this post function right here and we're gonna pass in the post count from this right here and we're gonna you know read all the values and ensure that the post has you know the correct values just like this ID content tip amount and author so I'll say Const post equals a weight social network posts all right passing the post count to be the latest posts and now we can inspect the values like this we'll just copy this right here and then paste it in here boom so instead of event we'll say post post dot ID to number is equal to the post count alright that the content is equal to the content tip amount and author okay so save that run the tests go to the terminal say trouble tests alright it should be a new example for creating or started listing the posts awesome lists all the posts perfect so this is just a way of fetching one post and when we create the client-side application and we actually list out all of the posts what we'll do is use the post count and use a loop to check each post individually will call this post function and fetch it with this function just like this that's because we have to do it that way which I'll revisit later because in solidity there's no way to know how big this mapping is natively and there's no way to iterate over either we can't just say like posts or post each we can't just return it we have to know how many are inside of there and then fetch each one out individually with this post function and I'll show you how to do that whenever we create the client side app later but for now we know that we can fetch a single post and if we can fetch one we can fetch all of them all right so let's go ahead and move on to the last part of the smart contract for the social network let's do the tipping functionality so this is the example we're going to use here ok so inside if you're want to create a new function called create tip or a tip post I should say say function tip posts say you int ID we're going to pass in the ID of the post we want to issue a tip for and we'll write all the function code inside of here this post is also going to be public just like the other one because we want to be able to call it from the test and call it from the client-side application all right and this this this function is do a few things first needs to fetch the posts then it needs to fetch the owner from the posts or the author I should say increment the tip amount on the post whenever the tip comes in I should update the posts it should pay the author and then finally it should trigger an event that's a lot of stuff and tell you well it's actually pay the author up here before we increment the tip amount so let's see how that works first we're going to fetch the post from the blockchain alright so we can fetch it out of this mapping right you could say posts you posts and then pass in the ID right here right that's how I read it just like we write it and then we're actually gonna store a copy of this in memory okay so what they like this will say post memory post equals post ID right so this will do is create a new copy of it and we will you know update these values and that won't actually affect the post on the blockchain okay it won't affect it until we reassign this value here later okay so we'll update the post so go ahead and do it now before I manipulate it will just say posts ID equals posts all right so we're gonna fetch the post create a copy and then put it back on the blockchain later but in the meantime we're gonna you know fetch the author pay the author to increment the tip amount that's going to change the post itself and then we're gonna put it back here all right so we can simply get the author like this the address author equals post author pretty simple all right and then you know we can increment the tip amount and also pay the author okay so let's do that we'll say post tip amount equals post dot tip amount plus you know this value so we need to add the actual tip that's coming in well how do we do that all right this is really confusing because all we have here is one argument so far we just have the ID of the post that we want to pass in so where's the actual tip where's the cryptocurrency itself right we're tipping this post with ether aetherium cryptocurrency but how do you like tell this function that you want to tip ether there's no argument for the amount that's because solidity allows you to use some more function metadata just like this to track the amount of ether they get sent in whenever this function is called okay so we can say msg value all right this is going to be the actual amount of ether that gets sent in and we can update it just like this it's a post tip amount is equal to post tip amount plus the amount of ether or aetherium cryptocurrency that's sent them whenever this function is called so if you go back to the test we're gonna be able to say value just like we did from right so that's another example of metadata or you can say like this value equals no ether okay all right we'll see that here in a minute when we go back to tests but for now we can also pay the author address and we passing the author and then we'll call a function called transfer so this is a solidity code that tells us to send ether to this author right here inside this function I'm gonna say msg value let's say pay the author by sending them ether okay boom done and then lastly we want to trigger an event just like we did here so post created we want to say you know post tipped all right so we'll create a new event just like that we'll just copy this post created and paste it below so post tipped and we use the exact same arguments id content tip amount and author so there's one more thing we need to do in order to pay the author we need to change how this function works in order to create a function and solidity that accepts ether we have to call it payable it's a payable right we add that modifier right here that will allow the user to send in aetherium cryptocurrency whenever they create this transaction which we'll see here in a minute all right likewise we also need to say that this address for the author is also payable okay we're gonna do that in a few different places first we'll do it here we'll say payable address payable author right we'll also do it here inside of the posts so address payable this is a special data strata type address payable author and then also address payable author here alright that should be everywhere that we need to change order to actually pay the author here right so let's save that and go back to our tests let's write a test to see this works and I want to go ahead and call the tip function and you know basically tell it how it how it works so I'll say results equals a weight social network dot tip posts and then I'll pass in the latest one so we'll say post count all right and then we're gonna pass in the metadata so we need to tell it who's going to do this so previously we did you know from author I'm gonna copy this and paste it here in this case it's going to be from the tipper alright so I'll copy that and paste it here and next we want to send in some etherium cryptocurrency with this you know metadata that's going to get interpreted here as msg F value so just like this was from went to MSG dot sender in JavaScript value is going to correspond to MSG dot value right and that's what this message function that metadata is okay so now we want to tell it how much ether we want to send in so let's uh tip the post you know one ether will just be really generous and give him an entire you know one unit of aetherium cryptocurrency now we don't want to just say one right that's that's not actually ether so why is that well solidity uses something called way to store all ether values all right let me explain what that is so one ether can be divided into eighteen decimal places all right that means one followed by 18 zeros all right so essentially like a US dollar can be divided by you know two decimal places it's one followed by you know two zeros to determine how many cents or how many pennies make up one dollar this is a similar kind of thing this is how many way make up one ether this is sort of like a really tiny penny aetherium this is the smallest unit of the theorem cryptocurrency itself okay so all the values inside a solidity for if there are stored in way that's because we don't use any floating-point numbers to store on the blockchain right we just use integers all right so if you're gonna do that you can't store any decimal places you have to store you know basically numbers like integer values so that's why we use way so anytime we see something like MSG value this is not going to be an ether value it's going to be a way value so if you want to say one either you know one ether is going to be one ether is going to equal you know one followed by eighteen decimal places one two three four five six seven eight nine 10 11 12 13 14 15 16 17 18 way all right so if we send one ether and when this function is called we're sending in exactly that many way okay so there are some utilities that help us do this so you can't just say one here is value you actually need to say you know this 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 but that's kind of crazy right we don't want to do this every time we want to just say one ether inside of our tests so luckily there are some helpers that we can use we can use the web 3 library which is included inside this test suite we're gonna use web 3 more a lot when we create the client-side application and you're already using web 3 under the hood we can say web 3.8 ills that too way all right we say 1 and ether right and that's gonna convert this to the way value and give us you know 1 followed by 18 decimal places without us having to write all that out ourselves which would be kind of ridiculous all right so that's how we tip the post we tell it the post we want a tip we tell it who the tipper is and then we tell how much cryptocurrency they want to send in this case it's one ether which is gonna be 18 or you know one followed by 18 decimal places way all right so after the tip is issued we're going to you know guarantee its success just like this all right say success and instead of you know the post count changing we're just going to you know dig into the logs and check that the ID of the tip was you know correct all that kind of stuff so that's fine ideas we'll just use this same template from this will say ID content so tip amount is going to change alright so we'll just be explicit about it in this case just that you can see what's happening we'll say 1 followed by 18 decimal places 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 that's the tip amount all right tip - correct and then the author is also correct so the tip amount should have changed forever this happened all right okay so let's just save this and that'll be our first check so I'll say trouble tests you alright it looks like we had a little bit of a compilation issue so I'll go back to the source code and yeah I forgot to do this post's underscore alright save that for the test again alright we have one more problem it says can I read property args I'm undefined so I know what this is but I'm gonna reason through it for a second just that you all can understand so this says that args is undefined well that's because there's no actual event listed here that's because we forgot to trigger it inside this function right we sell it we left a note for ourselves trigger the event and we created it but we never actually called it okay so we got to trigger the event and we'll just say you know post tips alright and boom post tipped passing the count the content tip amount and author save that run the tests alright it passes so we're getting really close the next thing we want to do is check that the author actually receive the tips so what I'm gonna do is essentially check the authors cryptocurrency balance in their wallet before the tip was issued and then also check it after the tip was issued and compare the two and just make sure that the new tip amount is bigger than the old one all right so I'll just say track author balance before purchase I made this a little faster but I'll explain it I just want to move on I say boom all right so let the old author balance equal this so we'll say web 3/8 get balanced that's how you check the balance of someone's wallet all right passing the author and then we're gonna convert it to a big number alright in JavaScript like this web 3 details big number all the other balance all right and then what we want to do is check that the author actually receive the funds after you know this success so we'll say success so remove this too say bum so new author balance so here's the Olaf have balance do you have the balance same thing we just check the balance the author again all right just like we did here and then now we're going to you know factor in the tip amount say bone let tip amount equals this web three utils two way one either and I guess we could you know refactor this up here but we'll just leave it for now and now what we'll do is say expected balance equals these two things added together boom old author balance add tip amount alright so you can pause this on your screen if you want to try to make sense of this more but finally what we want to do is compare the two the new author balance and the expected balance and we want to say that they're equal boom like this new author balance to string all right we're gonna course these two strings and say expect is equal to the expected author balance all right so you can pause this and take a look if you want to alright so I'll run the test alright passes finally I want to insure one more test case we want to fail safe failure so and sure so say tries to tip a post that does not exist so essentially we want to do is ensure that a valid ID is passed and whenever the tip post function is called so today just like this boom well tip post 99 which doesn't exist yet we'll do it from the tipper we'll pass them one ether and this should be rejected all right this transaction should not go through because post 99 doesn't exist we'll do that inside of our smart contract all right with a require state with a require function just like this so it require bytes constantly that's true right for create posts we're gonna do a similar thing here for tip post boom require that the ID passed in is greater than zero and it's less than or equal to the post count all right so if it's if it's outside this range we'll consider it invalid and we won't let you issue a tip for it okay all right so that should be it let's clear out the space do the same thing for our test all right clear out this space all right and then trouble tests see the pass all right it passes congratulations that completes our smart contract and the test suite as well all right so now that this is done let's go ahead and deploy this smart contract to the blockchain and get ready to build the client-side application we can deploy the smart contract like this say truffle migrate - - reset and what the reset flag is going to do is put a new copy on the blockchain all right remember you can't update smart contract code all you can do is create a new copy of the smart contract and that's exactly what this just did it put a new copy on the smart on the blockchain and updated the address inside our truffle project to point to the new copy not the old one okay so now you should have everything that you need in order to start building out the client side portion of the application that we're gonna do in the next section so congratulations you've done a lot of good hard work you know we've got a complete smart contract that we can use to power the social network on the blockchain so this is great now we're gonna go ahead and build a client-side application to use this and build out all the user facing features so I'll catch you in the next section now let's start building out the client-side application for this project up until now we've just been creating these smart contracts that go on the blockchain all right that's effectively our back-end part of this application now let's work on the front-end which is going to be the website that talks to the smart contracts on the blockchain and allows users to add posts to the social network see all the posts and also issue tips for the posts okay so a few quick things first things first if you're checking out this point of video make sure you have all your dependencies installed you can just do NPM install to make sure everything is there and also make sure that your blockchain is running this is ganache right make sure this is open and connected to your project and lastly make sure you have your server started and well I guess also make sure you've migrated your smart contracts as well remember we did that in the last video with truffle migrate - - reset okay so let's go take a look at the website again make sure you start your server NPM run start they should open your browser to the project so here's where we left off last time remember this is all the boilerplate code that comes with our starter kit and what we want to do is start you know modifying this code to build out our social network website again we've got the bootstrap templating framework so that we don't have to write a lot of CSS ourselves and we're also using react tjs which I'm going to you know walk you through step by step in this video so I'm gonna go and open up the project code in sublime text and we'll go to the source directory the components directory and go to app KS okay and let's bump this up so you can read it this is the main javascript file that's going to that we're going to edit alright so this is you know react this is a react component so react is a component based library that allows us to write JavaScript in these reusable components in this case an app is a component and you know it mixes JavaScript which is you know this right here with HTML code which is this right here right you can put HTML inside this JavaScript code that's how it renders this on to the page all right and you can also see javascript is rendered here inside these curly braces and yeah that's how it works so everything inside the return is the HTML that gets rendered on to the page from this render function okay whatever's returned from render gets put on the page so let's go ahead and edit this the first thing I want to do is connect this application to the blockchain all right we effectively want to turn this basic web app into a blockchain app so how do we get this app to talk to the blockchain well we use the web 3 J's library right that's gonna be one part we need to turn our app into a blockchain app that's what what through j/s is going to do and then we also need to turn our browser into a blockchain browser and that's what meta Mask is going to do all right so I'll walk you through setting up both of those we need to connect the app to the blockchain with what 2 GS and then the browser with meta mask so the first thing we'll do is instantiate a connection of web 3 inside the JavaScript application ok we're going to connect to ganach our personal blockchain and I'll show you how to do that so the first thing that we do is just import the web 3 J s ly brer e we've installed it inside of our dependencies in the package that JSON file so we import web 3 like this alright and once we're inside of here we can just load our connection to the blockchain inside of a special function okay so I'm gonna create a function called load web 3 this will be an async function so I'll say async load web 3 and inside of here I want to write all the code that actually takes the connection from meta mask all right you know this thing here and wires it up to our web 3 and reads it inside of this web 3 connection inside of our app ok so there's no reason to reinvent how you do this meta mask actually tells us how to do this and I've got a link right here from an article put out by meta mask that you recommends the best way of doing this all right so you can essentially just copy and paste this inside of your own project but I'm gonna do it basically that way and also just kind of clean it up a little bit while I paste their idea and so feel free to check out my completed code on github in order to get this implementation but this is essentially what meta math tells you to do so don't worry if you don't completely understand this that's okay essentially all it does is it looks for an aetherium provider inside your window and if it doesn't have one it basically creates a new one with web 3 and if it can't find meta mask it'll basically say hey there's no Matta mask here please install it ok alright so it that's pretty basic don't worry if you don't understand everything inside of there but that's how it works so we've defined this function but we want to call it whenever this component is loaded so react has some special functions that do some magic one of them is called component we'll mount this what's an async component mount alright and inside of here we actually want to call this web 3 load web 3 we'll say this okay so essentially what this says is like whenever this components gonna mount to the Dom the virtual Dom inside of react we want to call this function where we Lobo 3 and we want to wait for it to happen before we do anything else all right that's exactly what this does so let's go and do that I'll say this and we'll go back to the page we can say let's just say here yeah go back to pay age refresh take a look and awesome no errors so now we have web 3 connected to our app and our app is now a blockchain application so let's try such some actual data from the blockchain the first thing I want to do is fetch the account from meta mask ok so remember how daps work or how blockchain apps work is you don't login necessarily with a username and password you basically have your username which is your account inside of your wallet and your browser like this with meta mask so meta mess essentially is your user management your app doesn't do the user management so we can fetch the account information directly from the wallet with web 3 so I'll show you how to do that right now so here's the function inside the web 3 documentation we're gonna use web 3 the eath namespace and we're say get accounts alright so this is a function we're going to use and what this is going to do is return an array of accounts that are available to us from meta masks alright so you can see the example here call web 3 eath get accounts they're using a promise or using a promise chain in and then but we're gonna use async await but anyways this is what it returns right this array of accounts so in our case we want to get the first account inside this array and that's going to be our user of the social network who's logged in using the app so I had to do that right now go back to the application and I'm going to create a new function called load blockchain data so async load blockchain data alright and the first piece of data we want to load is actually the account itself so first we're going to get the web 3 connection which we created so we said window dot web 3 right equals this so we'll say Const web 3 equals window dot web 3 all right and then we want to load the account all right so we're going to use the function we just saw in the documentation Const accounts equals a weight web 3/8 get accounts all right so let's just lock that value to the console console that log counts and let's see what comes back okay so nothing yet and I know why it's because we define this function but we didn't call it right we said low blockchain data but we need to add this to this component wheel mount function so after we load the fit web three efforts finish because we wait we load the blockchain data so oh wait this load lock chain data all right save that try again all right there we go we could see an account listed now you may not see an account just yet and if you do it may not be the right one so a couple things to check out first you want to disable privacy mode or if you if you do have privacy mode enabled you want to connect to the application so here's an article I can put a link to this in the description and I'll go ahead and copy it and paste it in my notes right now if you have trouble with your accounts you might want to reference this because privacy mode inside of meta masks might be part of your problem but another thing is you may not actually have imported your account from ganache just yet so I'm gonna go ahead and do that now so open ganache and let's see here I'm gonna take the first three accounts just like we use from our test and I'm going to import the private keys into meta masks so these are like the passwords so we'll copy these and don't use these accounts for real cryptocurrency because I've shown them on-screen but I'm gonna copy the first one I'm gonna go to madam ask alright and I'm going to import a count private key paste in the private key import and this says I already have done this so that's okay I'm gonna do it again for each one all right coppy you all right so once you've successfully imported all these I'm gonna go ahead and rename them just so that we know which each account is so the first one is going to be the deployer the second one is going to be the post creator and the third one's gonna be the tipper so I'll do that right now I'll rename this go to settings and see your details see deployer alright and then I'll go to this one edit this one as well is a post creator and then the last one tipper alright save that now you should have meta mask properly configured and I'm going to go ahead and go back to the post creator because the primary account that I want to use in order to interact with the application so I'll refresh the page and this address should be the same as the account that's you know number two inside of ganache if you imported these in the correct order all right so that should verify that you are actually connected to ganache you've imported into meta mask and that's the account alright now I want to actually list this account out on the page so that we can see you know which account were signed in with whenever we use the application alright so what I'm gonna do is actually store the address after we fetch it from web 3 right here okay so I'm going to use a reacts state object okay so react has basically a state that belongs to a component and this state kind of tells us you know what state the applications in that's really bad explanation but I think you'll get the idea when I start implementing it alright so we can define a state inside of our component like this alright that's what it looks like so these components have a constructor function as well and they take something called props which are essentially you know properties for the component just it's just an object and we want to call super on this so don't worry if you don't understand that completely this is just what react tells us to do but this is what the state object looks like it's called this dot state and it's just an object right it has some values in it and this value that we want to set is the account so we'll store the account here and we'll read this later all right so we can store the account like this after we've fetched it with web 3 we'll just assign it to the state so react has a special function for doing that it'll say this set state all right and we'll just account is accounts zero all right so let me explain that right that counts was an array that came back from this function and we just want the first account in the list that's the one that we're connected to Mehta mask with alright and then we just assign this set state and we pass in you know the account and just say it's the first one okay now because we've done that we'll have access to this account with a state object anywhere inside this component and we can also pass it down to other components all right so right now I'm gonna show you how to do that I'll go to this nav bar all right let's see here so up here at the top we're gonna create a new section for the address so inside the nav bar just after this link all right I'm gonna paste in a second that we're gonna use to hold the account just like this alright so this is just a list item alright that is going to show the account so I can show you what that looks like all right there we go so this is just the component all right really component it's a bootstrap way of doing things where we can just add something to the navbar that's gonna go on the right-hand side and we can put the account there so let's go back to the browser so you can see your account goes here as small gray text right so what we actually wanna do is display the etherium address right here so we can just say we can use some curly braces to execute JavaScript inside of here like this and say this state account say that back to page and boom there we go we can see the account listed right there all right so now what I want to do is actually take this component and put it inside its own file we're using one big you know react component right now and I want to break this up into smaller files so you know react components are able to render other react components so I'll create a new file here in the same directory called navbar capital n navbar is alright and so what we want to do is create a new react component inside of here just like the other one alright so it's pretty straightforward boom we just add the new content like this alright feel free to go ahead and pause the video right now if you want to take an in-depth look at this but what it does is it works just like the other component does we just import react and component alright and we give it a name navbar and it has a basic render function just like the other component and we put all the HTML and JavaScript for the navbar inside here so we'll go back to our navbar find this you know nav element and wanted to copy it or cut it actually and paste it inside of here alright so I'll do that and inside of here what I want to do is render it out so in order to do that we have to import that component we just created go to the top of the file and I'll see here let's do it just after this say import navbar all right and now we want to render the navbar out on the page and we'll do it just like this let's go down find where the navbar was before all right it's just above the container and we'll do this I'll just say navbar okay then actually we want to do that okay so that would render it out but if we do that we'll notice that you know it doesn't know what this dot state dot account is all right it's gonna it's gonna break it so the state object from this component is not accessible inside of this component all right so we have to pass down that value some other way so we do that like this we say account all right we could just tell this component what the accounts gonna be and we can say this state account right which is what we use originally and that'll pass this account variable down here so we read that account variable inside this component not with this state account but with this dot props account all right so props is just a shortcut for a shorthand for the component properties and that's the same thing we saw here inside the constructor props right component properties see there's just variable values all right so and that these are props right here like that's what that's what this looks like okay all right so let's save that go back to the page and there we go boom we've got the address so that's gonna be like our user name on the blockchain so the next thing I want to do is use a cool avatar for the blockchain users all right this is something new for this tutorial if you guys have seen my other tutorials before this is gonna be a new trick just for you all okay so what I want to do is use something called identic cons so identic cons are gonna be a way that we can actually generate cool you know avatars for the users based on their aetherium address okay what it does is it gives you a function that will generate a new identity conference um sort of data right and this data will spit out you know a cool image like this and in this case we can just use a unique image for each of theorum address that we create all right that's gonna be our avatar on the blockchain so I'm gonna install it in the project because we haven't installed it yet normally you would just do NPM install the tekonsha s - just saved but I'm gonna specify the version someone go to the package.json file and let's see here I'm gonna say and paste this in so you want to get this from my project this is identical is version 2.3 s3 alright so I'm gonna save that in order to reinstall this we need to stop the server and say npm install alright it worked so again we got some warnings and some errors here but it actually added the package I realize these aren't ideal guys sorry about that but it's working alright so we'll start the server again with NPM run start alright let's go back to our page make sure everything is still working after installing the packages yep oh good okay so now let's add the identic on for the user in the nav bar so we'll just import the newly created live or the newly added library I should say all right so I have to react will import identic on all right just like this and we'll add the it will add the image to the account like this so identic on tells us that we need to do like this I'll see here we've given an image with a width and a height and we use data as a source and we concatenate the string so I'm not gonna do it like this this is kind of a crazy way of doing it that won't work for our react project I'll show you how to do it custom for our purpose all right so let's see here say image and then press a class name say ml - that's just a bootstrap utility say with us - 30 and then height equals 30 and then sorry I'll pull this up I will say source all right so we want to do what authentic Khan told us to do and you know use this alright that's the basic source that it tells us to use but we actually want to pass the data in after that so see source data image yada yada yada this is telling you to add strings together we were using es6 so we can actually interpolate that's what these little back ticks do all right so I'm just gonna use dollar and execute JavaScript inside of here and and this is a little this is probably not the best way of doing this but I'm gonna do it all in line just so that you see how it works so that's a new identity on and they say this dot props account all right and then they tell us to give us a size so this is for 20 we're using 30 all right it's a 30 and then say to string all right so that's kind of funny-looking and we also need to give our image a closing tag here all right I'm going to give this new line right yeah that's kind of crazy looking but it's just easier to read I could put this inside of a new function or something like that certainly refactor this to make it look better but that's the gist of how this works okay we're just creating a new image with a source and we create a new identity on with the etherium address that we're passing in with this prop stock account okay so lastly we only want to do this if an account actually exists or else it'll break so we'll say this props account so if it exists basically we're going to do is use a ternary operator which is just saying if this is true then do this if not then do something else that's always pseudocode but get the idea so if it does exist we want to render out the image alright so we'll copy this all right and we'll format it and if not we just want to let's give it an empty span tag all right it's probably better way of doing that but that's the idea okay so save that go back to the page and see if it worked boom there we go awesome so we can see our fancy new avatar here on the blockchain this is going to be our avatar for this particular user that we're logged in with alright so that's it for this section guys you've connected your app to the blockchain you have a blotching based application you've connected with meta mask you've got your accounts imported we can see our account on the page and you have a cool new avatar that represents your user on the blockchain so I hope you'll like this video I hope that's a cool new trick to any of you who've been watching this channel for a while you think you'll like this in the next video we're going to go ahead and start creating posts so we can list them out on the page and then we'll continue on tipping and stuff like that and build out the full social network in the next video so welcome back we're gonna continue building out the client-side application in this tutorial and the last one we you know wired up this application to the blockchain with web through j/s we imported our accounts into meta mask and we listed out our account on the page right here with this cool new identic on avatar that's generated based on the etherium address alright so what we're going to do now is continue building out the social network we want to show all the posts on the page we want to create new posts and we want to be able to add tips to posts all right so there's a little bit of ground work to do first let's go ahead and create a post so we can list it out on the page on the social network I'm gonna go to my terminal open the truffle console as always make sure you have ganache running the blockchain and make sure you've migrated your smart contracts to the network before doing this all right so I'm gonna get the social network contract will say no network I'll say social network equals oh wait social network dot deployed all right social network all right there it is I'll say social network create posts say oh wait and I'll say this is my first post all right boom there we go so we have a post now let's go try to list this post out on the page for the project okay so we need to actually import our smart contract into this app when we do that okay so let's see here we want to fetch it from this file alright so inside the source directory we see a source a bis and we have the social network JSON file here alright so let's do that well import it just like this go just below app dot CSS import boom so import social network right capitals s capital n from this file right here so dot dot means go up or directory into the api's folder and then use the social network JSON file okay alright so now that we have that we can talk to the smart contract and we're going to use web 3j s to get an instance of the smart contract in JavaScript inside this app so when we do that we're going to use this web 3d 'the contract okay so this is an example basically we'll just do this alright and then it needs two pieces of information alright it needs the JSON interface which is the API and the address so we have both of those pieces of information inside that file alright go to social dinner JSON here's the API right and then the address is see here yeah address is here boom so you'll notice that the address is nested way down in this file under this networks key alright so there's multiple networks that could potentially be deployed to so it could be deployed to ganache it could be to a test Network it could be to the actual main aetherium network but in this case we just want to find this address so we need to open this file figure out what network we're on and then find the address you want so you have those two pieces of information we'll be able to do this and you know create instance at the smart contract that we can use in JavaScript all right so let's do that go to app KS and inside load blockchain data we've already loaded the account now we want to do is we need three pieces of information we need the address we need ABI all right but in order to get the address we also need the network ID right because inside this file this is the network ID so we can find the actual address all right so we can get the network ID with web 3 like this it costs network ID equals weight web 3d that get ID all right and I'll console.log that go back to terminal or sorry the browser 777 right that's right we needed to find that information to go here all right and then now we want to do is fetch the data the network data right this is the network data right here networks 5777 so we do that like this we say social network dot networks right that's just the key and then pass a network ID all right so that's going to be sorry this information right here so that's going to tell us what the actual address is so essentially like if that information exists we want to instantiate the smart contract with a J s and if it doesn't we'll just say that the social network contract has not been deployed in the blockchain all right so we'll just run this again we'll set console that log network ID I'll show you what that looks like all right so here it is if we change networks and go to the main Network maybe right say may net refresh the page then BOOM it'll break right social network contract not deployed to detective network that makes sense because we have it put on the main net we've only put it on ganache okay so we'll go back to Kadosh I'm sorry refresh the page and it works alright so basically if the smart contract is detective we're going to do some more stuff we're going to take all the info that we have and create an instance of it like this alright so inside of here we'll say this will say Const social network oops the lowercase social network equals web three eath contract we'll say capital social network dot ABI all right that's the API and then network data address okay so that should give us everything that we need in order to create the smart contract say console.log social network oops got a problem here work data is not defined here let's call this network data right boom there we go here's the smart contract awesome so this is everything that we need in order to call methods on it we'll be able to do things like call the solidity functions that we coded previously right we'll be able to say you know like let's see we'll be able to call create posts we'll be able to call tip posts with web bridge is right I'll show you that here we'll be able to use this syntax with web page is right you see my contract methods my method so this could be any method that we created like a you know create post cut my contract my methods create posts right and then pass in all the parameters just like we did our test but be slightly different because we're using web three j/s directly okay so let's see here let's go ahead and do that let's say let's get the post count because we want to do that in order to list out all the posts on the page it should be one in this case but before we do that let's go ahead and say this does set state I'll see your social network and we want to save a copy of this on the react state object so that we can use this smart contract later okay so we'll update this as well social network equals it's the default value here can just be else isn't what I didn't put here it'll Espino oops sorry all right so also really quickly this is just a short cut inside es6 for this right if you have a key and a value that are the same name and so I have an object you can just do that for shortcut okay so this is distant set state we're going to store the social network contract for later next let's actually get the post count as a Const post count equals weight social network methods alright so go back here we've got methods and let's say we'll say post count and then that's not actually going to call the method that's just going to return it okay if we want to actually call it we say dot call okay and then we can just say this set state post count and then initially we'll just say post count going to be zero all right Celso console.log it save it go back to the terminal refresh and there we go boom so it's a big number which is okay that's what we expect but we got the value back all right let me explain another thing really quickly you know inside web 3 there are call methods and there are send methods all right you can see this right here we have to do my contract you know methods my method call all right and then also there's you can do send on other methods so call methods are essentially functions that just read information from the blockchain they don't cost them in gas all right but send methods write data to the blockchain and they do cost gas and you have to sign these transactions with your account we'll see that later but I want to go ahead and make that distinction right now there's call functions and then there's send functions okay that's what we had to do duck call here all right so now we've got the post count so we need the post count in order to understand how many posts we have before we list them out on the page right remember earlier when we built this social network smart contract I mentioned that like you can't just get all the posts by saying you know social network posts and call the function and then get them all back right you actually have to pass in and in a key which is gonna correspond to this key right here the ID and you have to read them out individually one by one so you call posts pass in one that's gonna give you back this post with ID of one it's a post dot two it's gonna return post number two okay and we can you know loop through those in JavaScript with a for loop and just fetch each one out individually because we know how many posts there are with this post counter cash all right so we'll do it just like this a load posts all right and we'll say for VAR i equals 1 i is less than or equal to post count all right and then I plus plus okay this is just a for loop that's gonna you know loop over every single number from one all the way up to the complete number of posts that we have in this case we just have one so just gonna run one time but if we had ten posts it would run 10 times you know 1 2 3 4 5 6 7 8 9 10 until it's less than or equal to this right or until it's equal this alright so inside of here let's just fetch the post don't say Const post equals oh wait social network methods posts pass in the ID which in this case is gonna be one is it call alright it's gonna fetch the post out from the blockchain just calling this function right here alright posts right and then we're gonna store it inside a state so we'll say this set state alright and we're gonna write the posts so initially we want posts just to be an empty array posts equals empty right just like this alright alright this does it state posts and instead of just you know updating that actual array right we want to use the es6 spread operator which is like this done to that this state that posts let's say posts all right so essentially this just creates a new array all right and it uses the old posts and adds the new post to the end of that array all right so that look might look a little confusing but just trust me that's how you kind of do it with es6 and react all right so after this I will just say console.log and we'll say posts right whoops so I'll say post sequel to this state that posts all right there we go boom so there's all the posts there we go awesome we could see data coming back from the blockchain in our browser we did it correctly yay all right so here's the ID this is my first post and we can see the author you can see the tip amount boom perfect so now we're cooking with fire let's go ahead and try to list out some of this information on the page while we're here all right so let's just do it like this let's take let's let's just use a loop and put them out on the page down here so I'm gonna use a bootstrap card in order to model these posts all right this is what this looks like inside bootstrap you can basically create a card with a header and a body and it can support a button all right so I'm gonna take something like this and kind of modify it for the post that we're gonna show on the page so I'm gonna go back to the application and find all the this content inside of here and go ahead and remove it okay so essentially I'm gonna go back to this page find the main component Ursa the main element find this you know div class name and then take out all this stuff right so you should have this left all right we're gonna put new content inside of here so I'm gonna do is loop through each post and render out one of these bootstrap cards that I showed you right here on the page all right so at this point this should be empty I'm gonna put you know one of these on here for each each post so we can loop through all the posts like this boom all right say this dot state dot posts right then map over it and then we're gonna have two values the post and then the key so the key is essentially going to be the index and that's what's what we need in order to tell react to each element that it renders out to the page is unique all right so we want to use a return here and I'm just gonna paste in the basic content for the cars jab content right say boat all right done so essentially this is just going to be a boilerplate card right it's gonna have a header and it's gonna have a body alright we'll change this in a minute and it's gonna have a footer okay and also while we're here I'm going to change some CSS bootstrap utilities so instead of using let's see your D flex and text center we're going to use C or ml auto and M are Auto and then we'll say also style equals max with 500 pixels alright so let's go to the page and see that looks like oh there we go so that's what our basic posts can look like it's gonna have a header it's kind of a body and a footer so we can go and fill out these items the headers just going to be the post author so I'll fill that in like this say post author alright the body is going to be the post content post content all right above this back up and then the footer is going to be tips so say to do tips I guess we can go ahead and fill in we can go ahead and sell the tips we just won't wire it up yet boom we can add tips like this all right so this will just be a list item that will have the number of tips and then a button to create the tip all right so these don't work yet they're not wired up but we'll just take a look and see we have boom there we go there's our first posts so there's the author there's the post content there's a number of tips and a button to tip which is not gonna do anything yet so let's make some changes making good progress let's actually list out the number of tips on the posts still do that like this say tips instead of just you know telling it it's got one let's actually read the number because a window dot web 3 diet utils this should look pretty familiar X we do this and the test in the previous videos so from way it'll say post tip amount to string and we'll say ether all right boom so 0 that's what we expect all right and then this is the button we use later to actually tip the posts but it's not gonna work yet until we get there okay all right so lastly we want to show the identic on for the author all right we're gonna use an image just like we did in the navbar so I'll just copy this image and then go back into the post and I'll paste it just before the author all right so see here author paste this in alright it's kind of kind of messy sorry guys but you get the idea alright pull this back alright put that over one more so instead of margin-left to we're gonna say margin right - and then we also want to import identic on at the top so we'll go back to the net bar important icon let's do it here and we're going to remove the logo we don't need it anymore all right and let's Oh problem hash of at least 15 characters is required that's a few problems here this should be state alright but sometimes the accounts gonna be not what we expect but let's just give it a try all right so it still works awesome all right so there we go very is our skeleton for our posts and as we add more posts inside of here it's gonna create more cards below this and we'll see a huge list of them and then above this we're gonna create a form to create new posts and then we'll be able to tip them eventually so let's go ahead and move on to that next section that's we're going to show you how to create new ones alright so I'll catch you in that next video alright this section of the tutorial we're gonna continue on building out the client-side application for this social network that's warning on the blockchain alright so in the last video we listed out the post on the page we just have one post so far so in this video we're gonna create a new forum that's going to allow us to submit posts to the smart contract we're actually be able to sign the transaction with meta masks and put the post on the blockchain so really quickly before we start I made a mistake in the last video that I want to correct whenever I show this identic on Avatar I did it for the current account and it really should be for the author of this post which is different you can see all right so let's fix that so instead of this state that account this should be post author all right that's my fault sorry guys save that go back to the page and boom there we go we should see a different identity on this is the one for the person who actually created the post all right so here's who here's the account we're logged in with and here's the author of the post it's two different people alright awesome cool so now that that's fixed let's move on and create a form so in order to do that I'm gonna go ahead and create a new component just like we did for our navbar so we put the navbar information inside of its own component we're gonna put all the content for the page also inside if it's a own component so it's a little bit of refactoring here I'm going to take this navbar and do this ok new file and say main is I'm just gonna paste in a bar code and take out all the HTML all right and change navbar to main alright so that's going to be our boilerplate for the main code so I'll take all of the HTML that we wrote in the last section let's see sorry from a piace s and I'm gonna minimize it copy it or cut it actually and paste it here and boom just put everything inside the return statement all right that should be all we need to do except for changing a few things see you're so anything that says this state well well it seems that a second all right let's import the main component go back to app J s all right right below navbar just copy this paste it change it to main all right and right below the nav bar we'll copy this and say main and we don't necessarily need the account but we do need the posts all right so we'll say posts this state DAP posts and because we're converting this to props we need to reference these with props inside the component so go back to main j/s and find anything it says this state all right this does state that posts just one thing and changed your props this got props got posts alright say that go back to the page and it still works awesome very cool so it's going to be a parent why we did this momentarily alright basically whenever we submit our form we're gonna have to like show that the field is loading so let's go ahead and do that I'm gonna create a loading state for the application alright so essentially what I want to do is show that the app is loading if we're waiting on the blockchain for information and if not we're gonna show the content alright so what I can do is say like let's say it's change our state say loading let me say true alright and what I'm gonna do is say here I'm going to use some JavaScript and say this state downloading it's a question mark it's true we're going to do one thing and if not where's another say div id equals loader say class name equals text I'm sorry text center loading all right and if not then we're gonna render out this main right so right now I've hard coded loading to true all right and if when it's true we're gonna show the loader yeah but when it's false we're gonna show the content so let's uh let's do that and it looks like we can't see it so I'm gonna say say mt5 all right perfect there we go I just added some margin so whenever the apps loading we're gonna show this and when it's not we're gonna show the content okay so I can say you know loading the false all right whenever it's done it's gonna show the page so we're essentially going to you know set the state to loading whenever we're you know fetching information from the blockchain so I'll show you what I mean by that we're gonna set this to true by default all right but whenever we actually are fetching information from the blockchain we're going to you know update that it finished and simultaneously we're going to and likewise we're gonna you know tell the page that it's loading whenever we like submit new information to the blockchain alright so this does set state all right posts and then we're gonna say you know this set state loading false all right say we should see a little flash here all right boom you see that so whenever we're talking the blockchain it's gonna say loading and when it's done it's going to show the content on the page all right so that's gonna be helpful for us whenever we decide to create a form all right I'm going to go back inside of our main component and just above this section where we you know list all the posts I'm gonna paste in a basic form here all right well done all right so essentially this is just an HTML form that has you know an input inside of it that's going to be the content of the post will have a placeholder and then a button that will submit it alright so let's save that go back to the page and there we go you can see that we can do that right here so I'm using this for spaces find out the best way to do this but it works so save it and go back boom there we go two spaces all right what's on your mind we'll just say this is my second post all right it won't do anything yet all right that's because we haven't wired it up to go to the blockchain yet all right so let's go ahead and do that let's fill this out click share and we should be able to sign this transact with meta mask and put it on the network so we need to call the smart contract function for this this is let's see here is a source contracts social network we want to call the create post function so how do I do that well we could do it with the web 3 J s smart contract that we instantiate it here alright we go back to our documentation and see you know my methods we want to do send alright because this actually creates a transaction and puts it on the blockchain so my contract methods create post will pass on the content and then we'll pass in some options which there's going to be the account that's going to do it so what create a new function just for this alright we'll go back to our app J s component and we'll do this say just below blotching data above constructor let's say create post all right this would be the name or a Content sorry and here we're going to basically get the social network so this state social network right that's here and we same methods and say create posts and pass it the content alright so remember this doesn't call the function we have to actually call send like this cent and I'm gonna pass in the account who's actually going to create this transaction in this case we want to use our meta mask account so this would be from this state account okay that's who's going to actually create the post assign the transaction and put it on the blockchain all right so we can see from the documentation that you could do that like this you can pass in a callback function or you can do then write or you can say on or once okay and after it's finished you know once it's actually submitted we want to tell the loading is false so say this set state loading true and then it will say once receipt say seat Vista set state loading false all right that's how we create the post now we want to call this function inside the form so in order to do that we have to access this function from this component right here so how do we do that well gonna pass it down so here main say posts and then a/c creepos I'm going to say this dot C or this create posts anyway let's put it below the posts right but in order to access that we need to bind it to this so we'll say just like this we'll go inside the constructor and say boom disk create post find this all right so let's go back to our browser make sure we don't have any big errors since nothing it's got some warnings this is basically just like HTML stuff no big deal alright so go back to main jjs and we're gonna actually call the create post function whenever we submit the form so we're gonna use an on submit handler to do this so essentially you know you can listen to events inside of react like this say on submit so the submit event will be triggered whenever the form is submitted we'll pass in a function this will be the event all right and inside of here we'll say event.preventdefault that'll keep it from reloading the page and then inside if you're we can call this create post all right then pass in the content but what's the content all right how do we get that well react has something called refs which will allow us to get the content from this input so I'm gonna do that like this I'll say boom all right ref equals input so this stop post content right it equals the input of this here so I can say Const content equals this nut post content that value that'll read it from refs right so content content boom done awesome alright so I think that's everything that we need in order to put this post on the blockchain let's give it a try refresh the page oh so empty handler on submit big nerd alright I see their problem guys I made two typos here so this is not spelled correctly set state and also set state okay so save that go back to page try this again this is my second post sure all right so meta mask confirmation popped up off my screen which I can see here I'll click confirm all right and let's see if it works all right boom is done and we can see our second post all right there we go we can see I have two different posts from two different authors and this is the same avatar and the address is the one that we're connected with the guy so you've successfully been able to create posts I'll put my third post in this is my third post click share see madam asked confirmation pop-up again click confirm and boom awesome we've got three total posts very cool alright so that's it for this section we've been able to successfully create posts in the next video we're going to update post by tipping them alright we're going to wire this button up so that anybody can come in and tip the posts and we're going to sort the posts to where the highest tipped posts appear at the top alright and that's gonna make our social network you know kind of rewards-based alright so I'll catch you in that next video all right so now we're in the last section in this part you know we've been building out this client-side application for our blockchain social network and you know we've created posts we've listed out all the posts we show the authors with these cool identic ons you know these avatars and in this section we're going to actually allow people to tip the posts so that you know they can reward the authors and we'll just allow them to tip you know 0.1 ether and we're going to wire this up so the button can do it they're gonna send some cryptocurrency to the author and we're could also go sort these posts so that the most tipped post appears at the top all right so we'll go back to our code we'll go to the main component and we're going to create a new button here alright so if you go to main this span that says tip you know 0.1 eighth we're actually gonna wire this button up to you know do that so just like the form in the last section we use an on submit handler right here on submit in this case we're gonna use an on click Handler so whenever the button gets clicked we'll call this function so we can just say like on click equals some JavaScript say event okay and then inside of here we want to call the tip function okay so we don't have it yet all right remember we called it inside of here with the form submission but we haven't you know we haven't actually done it yet so let's go back to the app yes file and just like create posts will say tip posts tip post and in this case we want to know the ID of the post that we're going to tip say ID and we'll say tip amount okay and just like the previous function will say this sad state living true alright and then when it's done we'll stop loading but what we'll call the function just like we did here this state social network tip post all right and we're going to pass in the ID because that's how the function works on the blockchain all right we can just see out here tip post ID right and now we need to pass it the actual tip amount okay so we're gonna do this a lot like we did on the tests but we're going to use the send method and say send from this state that account and we also need to pass in the value which is the tip amount all right so value tip I'm out I remember this is the function metadata that is specifies how much cryptocurrencies going in this is gonna be some aetherium cryptocurrency and the value is actually going to be expressed and you know way like we did in the tests all right so after that's done I'll say once receipt receipt passing the function this.set state loading false awesome a little more work to do we'll go to the constructor function and say you know this step tipo stile by this alright and then likewise will say tip post equals this tip posts awesome now we should have access to this value down inside this main component alright so let's see here now we want to use the tip post function inside this onclick handler so we'll say we need to actually get the tip amount first so and we also need the tip we need the ID of the posts so we need a few pieces of information inside of here we need the tip post function we need the ID of the posts and we also need tip amount okay so the post ID we're gonna just pull it off the button so in this case we'll just say name equals post ID okay and we can pull that off here so the post ID will be I'll see your event that target name that be the ID and the tip amount let's let's always tip just like we said here zero point one ether so that's that's what the minute that's the tip amount will be so say let tip amount equals window web 3.8 is two-way zero point one and then say ether all right then the actual function call will be this props tip post and then we'll pass in the ID all right and then we'll pass in the tip mount yeah that should work so there's the function there's tip amount and that should work all right let's try it let's go back to the page refresh let's see if we can actually tip a post let's let's make the third post the the highest so click that oops this date social network tip post is not a function so it looks like I had an error here guys my fault so we'll go back here and go to at that J yes methods dot tip posts my fault guys refresh the page let's try it again so tip the bottom one all right let's look another issue all right I think I said the issue is so if we go back here I think you know it's reading Madi from the target I think that it believes the target is the span so we want the target with a button so let's take that out remove this span here we don't need it anyway so save it go back to page right it still looks the same so also while I'm here let's go ahead and change to the tipper account all right so go to tipper all right tipper had this all right so let's try to tip the post yes all right now I got I met a mass confirmation popping up that's what we want so let's confirm all right there we go awesome boom it worked so we can see the tips here at the bottom so 0.1 ether on this post none on this one and on this one so I'll tell you what I just did it's so that transaction error happens sometimes meta mask a cache is your account data and need to go into settings see here settings and just reset the account I'll see advanced reset all right this is safe to do this is not gonna like lose any data on the blockchain it just resets the data inside of meta masks you'll lose your your transaction history like this receipt log here but that's just inside the app it doesn't affect anything on the blockchain so that fixed it alright awesome so this is the the post so let's tip it again let's tip another one tip this what's kind of having a ray of tips confirm all right so this one as well point one east now two and let's hit this one a little bit more clicking firm awesome so now we have three different posts with tips this one has the most this one has the middle and this one has the least or no tips at all so what I want to do now is actually sort these two where the highest tipped post appears first in the list and the lowest tips post appears at the bottom all right that's gonna link our social network basically you know show show more quality content at the top all right so let's see here let's go back to fjs and we're gonna sort the posts after we read them out of the blockchain alright so we'll just say we've loaded the posts here now sort the posts say sort posts show highest tipped posts first so this set state posts this state posts a sort and then we're do a and then B this is I sort and then we're gonna do is say we want the the highest tip first so we'll say be tip amount - a tip I'm out all right let's just say that and then that should update it so we take the current posts we sort them we reset it back to the original all right so save that let's go back to page and see if it works okay so one little problem here oh and I don't even need these curly braces here right sorry I would if I did I would have to do a return but I'm not going to so I'm just gonna do there's a single arrow function by itself just a one-liner save that go back here alright and there we go we can see the posters sort of like we want them to the most tipped posts at the top and the least tip to post the bottom and the middle ones in the middle awesome so there you go guys you have a complete decentralized social network backed on the blockchain powered by smart contracts with a website that can use it you can create posts you can sign transactions and put them on the blockchain you can tip the post with cryptocurrency and the most tipped posts appear at the top so we can actually curate you know crowdsource better posts by people paying to see better posts at the top of the newsfeed so congratulations now you've come a really long way from absolute beginner knowing nothing about blockchain all the way to building something like this so pat yourself on the back all right so I hope you really liked this tutorial again check out the code check out the article on my website and you know if you're serious about becoming a blockchain developer you need to join my free training on my website over at Daffy diversity com forward slash boot camp alright until next time thanks for watching DAP University

Channel: Dapp University

Views: 104,274

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: nvw27RCTaEw

Length: 165min 8sec (9908 seconds)

Published: Wed Dec 11 2019