Build 3 JavaScript dApps in 26 minutes on NEAR Protocol

Captions as YouTube publishes them, usually machine-generated, so product and people names can be misheard.

1. 0:07

   hey everybody uh welcome to this workshop where we're going to be going over web3 for web developers i'll start off by introducing myself i'm austin baggio i'm a product manager here at pagoda the team that builds near builds the protocol and all the tools and i'm joined with ben who uh you'll hear from a little bit later and um today and before we get started i'd just like to draw everyone's attention to this qr code in this link where you'll have

2. 0:31

   access to the slides all the repos that we're going to be going through examples getting started our help on discord and all that fun stuff so go ahead and scan that but what we're going to be covering today is just a really brief overview of what is near why you would potentially want to use it um and some of the developer resources and then as well we're going to jump into nearing javascript and how we've built a javascript suite in order to

3. 0:57

   make it as easy as possible for developers to get started building on near and then ben's going to take it away and we're going to do a live coding session where we're going to dive into a couple of examples build an application uh and and go through the the super quick uh create new app getting started flow so um what is near mirza layer one proof-of-stake blockchain it's a dynamically started proof-of-stake blockchain and and the major focus is on

4. 1:19

   scalability obviously with sharding and usability um we really never want to compromise on decentralization we've just launched chunk only validators which helps massively increase the decentralization of the protocol and something we always love to talk about is that we're completely carbon neutral why you'd want to build on near super fast transactions incredibly low fees and built right into the protocol for all the smart contract developers out

5. 1:43

   there is the 30 gas fee royalty so it's built completely into the protocol you don't have to do anything so the success of your application really helps to actually generate some revenue for you and for the ethereum audience we are evm compatible with aurora and you can get assets across using our rainbow bridge um so we also have a massive suite of developer tools we have documentation

6. 2:07

   that we've just recently updated we have examples we have our discord where engineers like bannon are the teams that actually built the sdks and the tools and everything are in answering questions regularly we also have our youtube where we have whiteboard series and we have deep dives into other contracts and examples and we have our community updates so um you can check those out and if you'd like a more guided experience you can head over to the near certified

7. 2:32

   developer course that's run by the near foundation where there's actually instructors or there's self-guided and it'll help step through and go from zero all the way through to a near certified developer so super quickly um a lot of people know javascript it's about 20 million people that know javascript and and currently a lot of the layer one blockchains are using solidity or rust and that's about

8. 2:56

   two and a half million developers so opening up to javascript um really makes a lot of people web three developers and that's because we've just recently introduced the new uh javascript sdk and it's part of the near tool kit in order to build um smart uh smart contracts and blockchain applications on near so what does this actually mean in practice uh one of the things that we love so much about building our javascript applications is that we can

9. 3:20

   just install packages via npm and the javascript sdk is is is no different it's a simple install via npm you can interact with uh you can interact with the contracts using our cli you can build and deploy with our cli and you can write that you can literally write the contracts in javascript or in typescript um and you can test it with our workspaces framework which is a testing framework that's also uh that there's also a javascript implementation of so the entire scope of your application can all be written in

10. 3:53

    javascript um great so just one last opportunity i just thought i'd flash this qr code before i pass it over to ben who's gonna take us through a live coding example so so ben i'll pass it over to you thanks so much for that austin hey everybody my name is ben kirk i'm developer relations here at pagoda and today we're going to be going through some live coding for some javascript

11. 4:17

    smart contracts so the very first thing that we're going to do is we're going to look at a super basic status message smart contract where you can store retrieve and change a status message on chain at that point when that's finished we're going to go ahead and we're going to code a simple smart contract from scratch it's a coin flipping example where you can pass in either heads or tails and the contract will keep track of how many points each player has

12. 4:42

    at that point then we're gonna go ahead and we're gonna deploy it and we're gonna actually interact with it with a s with a front end and then once all of that is finished i'm gonna teach you how you can build a dap in under 30 seconds with create new app so let's get started i'm going to go ahead and i'm going to share my screen austin let me know when you can when you can see this perfect awesome so i'm over here at the js sdk workshop

13. 5:08

    links and what we're gonna go through is actually this workshop example project so this is the repo that we're gonna be working off of if you're following along at home there's two things that you can do one is we've got a git pod link here so you can open it up in the browser and you can interact and follow along from there or you can clone the repository and do everything locally in this case i'm going to go ahead and i'm going to

14. 5:31

    clone the repo and that's how we're going to go through the the example here so in my terminal i'm going to run a git clone on this then i'm going to cd into the directory after that i'm going to open it up in vs code and we're going to look at the the project structure here so there's a couple things to note first off we've got a front-end folder this is where all of our front-end code will live react app is super basic super

15. 5:56

    simple and it has our connection to the near blockchain where i'll talk a little bit more about that later and then we've got the source folder this houses the actual code for our smart contract we've got a package.json which is where we'll have the dependency and this is how you can actually interact with and get started all you need in this file is the is the near sdkjs package here let's go and

16. 6:20

    let's let's open that source folder and let's look at the contract the first thing that you'll note here is that it's written in typescript now you can either write this in typescript or you can write it in javascript it doesn't matter at the end of the day the sdk will compile everything down into javascript and then finally to wasm so it doesn't really matter me personally i like typescript so that you know when you're writing smart contracts obviously you

17. 6:43

    don't want to be running into any bugs and so typescript just helps me have that one extra layer of a sanity check but that's that so let's look at the contract here at first glance it looks eerily familiar to any other class that you've seen before when writing a regular typescript or javascript code you've got a constructor you've got some methods right it's a class it's pretty simple now the only thing that's different is

18. 7:07

    we've got some imports here and those are coming from the sdk itself so what do they do the very first thing that we have is this nearby decorator you can think of that essentially as the glue that allows all of the code to interact with the runtime it's a little bit of magic behind the scenes but all you need to know is you need to put that decorator here and everything will work smoothly and then we've got this near contract

19. 7:31

    parent class this essentially just allows it to fit in the correct format such that it can be compiled down to webassembly and then we've got some called and view decorators what do these do so you'll notice here we've got two methods set greeting and view greeting you could think of the view decorator as a getter and you can think of the call decorator as a setter the call decorator allows you to change

20. 7:55

    the state on chain and the view decorator allows you to query for that information or for any information from on chain at no cost so what is this doing we've got this field in our contract my greeting it's of type string the constructor will essentially just default this field to a to a default message in this case we've got hello web3 world and then we can view the current greeting which returns a string return this dot my greeting and then we've got a setter where you

21. 8:27

    pass in a message that's of type string and it sets this.migrating equal to that message so let's get started the very first thing that we're going to need to do is we're going to install all of the dependencies so let's run an npm install which will download all of the dependencies including the sdk that we're using for the smart contract and once that's done we're actually going to go and we're going to build the contract

22. 8:51

    so we'll just wait for this to finish and here we have it so now let's run the build command so we'll do an npm run build contract if we open up the package.json we'll see what that does all it's doing is it's running the near sdkjs and build command and it's pointing it to our contract file what this will do behind the scenes is it'll create a build folder here and it'll put the wasm into that folder so once it's done here it's done we have the contract.wasm this is the file that we're actually going to go ahead and

23. 9:28

    deploy to the blockchain so let's go ahead and let's do that now there's two ways you can go about deploying a contract on chain one way is you could go to wallet.testnet.near.org you could create the account and then you can log into your local machine with that account or what you can do which is often more more used when developing is you can run what's called a dev deploy this allows you to bypass that account

24. 9:53

    creation process where you can quickly deploy to a to an account that's created on the fly it's known as a dev account so we'll do that here we'll do a near dev deploy and then we'll pass in the path to our contract and so what this is doing is creating an account and deploying to it all at the same time just so that you don't have to go through that account creation process and you'll see here that the account id is this dev dash 16603 it's essentially that's the account id of the uh of the dev account

25. 10:24

    and if we open up the explorer this is a handy dandy tool that a lot of developers use to look at you know the status of a transaction and the execution plan so here we see that the status is successful and that the contract was deployed great so now we have the contract on chain and let's go ahead and let's run the initialization function so for ease of development uh i may or may not have gotten rid of the the dev account here but uh we can get it from here so for ease of development rather than having to copy and paste

26. 10:55

    that dev account every single time we run any functions let's just export an environment variable so we'll run export js contract and we'll set it equal to our dev account from there we'll call the init function near call jscontract and then we'll do init and we'll sign it with that dev account itself so if you remember that initialization function we'll set the default message on the contract so if we look at the

27. 11:20

    explorer here it was successful and we called the method init great so now if we go ahead and we go to our contract and we view the greeting it should return hello web3 world because that was the default message that was populated in the constructor so we'll do a near view and then we'll do js contract we'll do a view greeting and here we go hello web3 world amazing so we deployed the contract and

28. 11:49

    we and we called the init function and now we got that that default message there so let's go ahead now and we'll actually change it so run a near call on a js contract and we'll do a set greeting in this case we'll pass in that the message is go team and we'll sign the transaction as that dev account so once again if we open up the explorer we'll see that it was successful and that we passed in that message and called the method set greeting in this contract

29. 12:18

    now if we go ahead and we and we query for that state again it should be go team and there we have it awesome so now what we have is we have a contract it's been deployed we've interacted with it using the near cli and and the contract was fairly straightforward so at this point what we're going to do is we're going to go ahead and we're going to code our own contract from scratch so if you're following along you can do a git checkout on the skeleton branch

30. 12:46

    so here we see that it's a new contract but everything is hasn't been filled in yet and it's up to you to do that so what is this contract this contract is a coin flipping contract where the user can can pass in a side and they can call the method flip coin that side is either heads or tails if they get it right the contract keeps track of this points field which is essentially essentially

31. 13:09

    just a mapping of an account id to a number of points that they have if they got it right we'll increment their points and if they got it wrong we'll decrement their points we've included a super simple random number generator function here that returned either true or false and that's how we know what uh what outcome actually happened and then finally we've just got this this getter here view points where you

32. 13:33

    can pass in the player and it returns the amount of points that that player has so let's get started so the first thing that we're going to want to do is we're going to want to we're going to code the viewpoints function so what does this do we pass in the player so the very first thing that we're going to want to do is just check if they don't exist or actually we'll check if they do exist so we'll do this.points

33. 13:56

    but has own property at the player so if they do exist what we're going to do is we're going to return this up points at the player if they don't exist we'll just return null there we have it so that's a super simple function the logic is fairly straightforward but this allows us to query how many points someone has now what we're going to do is we're going to code that flip coin function

34. 14:21

    so there's one more thing that we've introduced or imported from the near sdkjs everything else is the same we've got the near contract nearby gen the call decorator the view decorator but now we've got this near object what does this do often times when you're doing development or in the runtime of your contract there's a lot of information that you might need in your contract for example who called the function how much near

35. 14:46

    did they attach something like that so we'll use this object to our advantage to get the person who called this function so let's do it we'll do a let player is equal to near.predecessor account id this is essentially just who called the function and then we'll do we'll check if that player exists yet so we'll do if they don't exist so if not this up points but has own property at the player so if they don't exist all we're going to do is set them to zero

36. 15:19

    and then what we're going to do is we're going to log logging is often really really important for debugging or for just getting important information that you can view in the explorer and again that comes from that near object so we'll do a near.log in this case we'll say player chose the side and then what we're going to do is we're going to get the random number so we'll use that generate random number function to our advantage and we'll say let random number is equal to generate random number this is either true or

37. 15:54

    false because we're writing the smart contract we have full authority over what this means so in this case what we'll do is we'll set false to heads and true details so we'll say let outcome equal to if the random number is equal to false then we'll do heads but if it's not we'll do tails now we have the outcome and we have the side that they chose so we'll do is we'll do if the side is equal to the outcome then we'll do this.points at the player

38. 16:28

    we'll do plus equals one and then what we're going to do is we're going to log again so we'll say this player got a point right now what we're going to do is else we'll do pissed off points at the player in this case let's set it so that if they're at 0 already they can't lose any more points because you know that's just demoralizing so we'll say if this.points at the player is equal to zero

39. 16:58

    then we'll just set them equal to zero and we'll keep them there but else we'll subtract one from their points and then we'll do near.log you lost a point missing so that's the flipping coin function it's super simple and we use that generate random number function so now what we're going to do is we're going to go ahead and we're going to build and deploy now we've written a super simple script that you can use so you don't have to run that dev deploy you don't have to

40. 17:23

    initialize or anything like that all you can do is run that mpm run deploy so we'll do mpm run deploy so what this will do is it'll build the contract it'll do a dev deploy and then it'll also call that initialization function all for us so we don't have to keep writing that in the terminal here so here you can see that it's building the contract it's deploying so it's starting that deployment in this case on dev-16603

41. 17:54

    call the init function and then we should be we should be good to go and there we have it so once again let's copy this dev account and we'll export it to an environment variable just for ease of development so we'll do export js contract there's this contract here and then what we're going to do let's call the viewpoints function so we'll do near view on the contract and we'll do viewpoints in this case we'll pass in the player as the current contract in this case it should return null because that player

42. 18:34

    doesn't exist yet and there we have it everything's good to go so now let's go ahead and actually flip a coin so to do that we'll do a near call on the js contract and we'll do flip coin in this case let's call uh the side as tails for now and we'll sign it under that dev account so it's doing the function call and you'll see here our logs so it said the contract chose tails and we lost a point unfortunate so now if we view our points again it should be zero

43. 19:10

    and there we go we've got zero points we didn't go negative because uh because we didn't want to do that so let's go ahead and let's flip a coin again we lost a point luck is not on my side today let's go again there we go we got a point now if we view our points again you'll see here that we got one point because all those other times we just defaulted it to zero because we didn't want it to go negative but now this is the first time we've won a point so now we have one point and there we have it that's our contract

44. 19:48

    we deployed it we built it we interacted with it on chain but we interacted with it using the near cli so now what we're going to do is we're actually going to go ahead and we're going to use the front end to do this so let's go let's run an mpm run start which will build the contract it'll deploy it'll init and then it'll spin up a quick front end so while that's building let's go ahead and let's actually talk about the contract or the front end code itself so in this folder

45. 20:14

    everything is a super basic react app that you've seen before right you've got your your index.js you've got like your html you've got your app where we've got some state it's essentially just a super simple react app but what's different now is we've got this one file here called mirror api what this is doing is it's using the library near apijs to establish a connection with the near blockchain from

46. 20:38

    there it has that wallet connection and you can do things like sign in sign out you can view blockchain state you can call smart contracts so you can do all of this that we've we've defined here in these functions and you can use that in your app so while this is building hopefully it's it's almost done here you can see it's just doing that initialization function actually while that's going let's uh

47. 21:08

    let's let's create let's create a uh a wallet here but this is the front end let's sign out and let's go ahead and let's create a new near wallet so we'll go to wallet.testnet.nerd.org create an account in this case we could say js workshop testing for example so we'll reserve the account id we'll get the passphrase in this case everyone watching you feel free to feel free to take the seed phrase here it doesn't matter this is all uh fake money but uh but yeah this is our account that we're

48. 21:40

    creating and then we'll get some uh some test that money here when it's done and we'll be rich there we go we've got a thousand bucks and then let's sign into the account that we just created so js workshop testing and we'll connect to our dap there we have it so my points how is it getting this again if we go to that near api we can look at this function here view blockchain state so what it does is it gets the wallet connection gets the account object and then what it's going

49. 22:13

    to do is it's going to do a view function similar to what we did in the cli where you pass on the contract you pass in the method in this case viewpoints and then as the args we're saying that the player is the current wallet connections account id and that's how it's getting that state now what happens if we choose heads or tails in this case we had we didn't have a ton of luck on tails so let's go heads for now so while that's going behind the

50. 22:36

    scenes what it's doing is it's calling this function call smart contract function it passes the message and here you can see we've got a log message args we've passed in heads and what it's doing is it's getting that account object similar to that view state function but this time instead of doing account dot view function it does account that function call in this case again you pass in the contract you pass

51. 23:00

    in the method and then the args are the is exactly what we want to pass so the side as the message arcs and then we attach some gas so we go back here we'll see we chose heads and we got a point so there we go now we've got one point now let's go heads maybe again because luck seems to be on my side and there we go we got another point that's great so so that's a super simple front end that is interacting with a javascript smart contract that we deployed to the blockchain

52. 23:33

    and and that's about it so if you want to get started there's this super simple handy dandy command that you can run so we'll cd out of here and it's it's called create new app so if you have npx what you can do is you can do an mpx create new app just like this and you can select your smart contract language either javascript rust or assembly script in this case we'll do javascript you can select the template right so

53. 23:58

    either react or vanilla javascript or maybe even just no front end in this case maybe we'll do react and then you can you can give it a name in this case we'll say js workshop uh testing or something like that and then you can either install the dependencies or not in this case we'll do no and uh and i've already run this command behind the scenes and installed all of the dependencies so we'll cd into that

54. 24:20

    directory with all of the dependencies installed and then let's open it up with vs code so this is what's generated from that command again you've got the contract you've got the front end everything is fairly similar where you've got the actual typescript contract it's a similar concept from the example we just went through it's a greeting function or contract and then we've got the front end with you know the app.js we've got

55. 24:45

    that near api file here with sign in sign out set greeting get greeting it's fairly similar to what we've done and then all you need to do to actually get started is run an npm run deploy which will deploy the contract build it and everything and then once that's done which is the same command that we've been running up to this point then all you need to do is run an npm run start

56. 25:08

    and it'll deploy the contract or deploy the front end for you so i'm not gonna go through and do that uh right now but uh but that's just how you get started in under 30 seconds to create your own decentralized application so uh so yeah that's that's it for me and i'll pass it on to uh to austin awesome i'll just wrap this up quickly thanks ben for uh showing us all that and and going through a live example um hopefully we are able to communicate how easy it is to get started using the new

57. 25:35

    javascript sdk um and really the reason why we're doing this is so that you can spend less time learning new languages and more time building your apps so um you can find us on discord again that uh the link that we had shared earlier that has the workshop uh the workshop resources um it's the best place to just find all the content you need to get started otherwise reach straight out to us and happy hacking thanks again

58. 25:58

    thank you everybody