NEAR Protocol 🛠 Getting Started with the NEAR Javascript SDK - Dorian Crutcher

foreign [Applause] [Music] guys it's hit six so I think we can get started uh thank you guys for showing up my name is Dorian Crutcher can you guys hear me okay is that good um so yeah I'll be teaching guys how to build a smart contract on near in JavaScript using our JavaScript SDK so again my name is Dorian Crutcher I work in the developer relations team for near I'm actually the host of the web series called Blockheads and nearbytes uh Blockheads is kind of a way to learn how to build applications on near um just like you know a quick way to yeah again just like tutorial videos and whatnot it's really fun and your bites is just like a quick look into developer space within your ecosystem so it's like a little news channel of like quick little bites of your information it's really cool really fun so go on our YouTube channel Shameless plug go subscribe and check it out um so if you uh by the way if um I'm always on our Discord channel to answer developer questions if you go on to near.chat you can join our Discord Channel if you ever have any questions on billing button here we have office hours every day from 11AM Pacific Standard Time to 12 p.m and 4 AM Pacific Standard Time to 5 00 a.m sorry p.m yeah am for European friends um and fun fact of me I live here in San Francisco and I play dodgeball so with that let's get started so what is near uh if you guys are not familiar with it near is a layer one blockchain with a block production time of one second um it's also a proof of stake blockchain certified um carbon neutral by South pulse or an environmentally friendly blockchain uh we're very proud of that and also we are almost infinitely scalable through our charting mechanism called Nightshade I'm going to talk more about that in a little bit um nearest also comes with uh this evm compatible layer called Aurora so if you're a slowly developer and you are interested in utilizing a technology that allows for fast transaction times uh like low transaction fees and like near infinite scalability you can use Aurora to like actually deploy silly smart contracts onto near and also exchange assets to and from then your blockchain to ethereum um so story time so near uh was actually originally supposed to be an AI company building on blockchain what it was for I'm not entirely sure to be honest but um the founders Ilya and Alex uh who worked at Google and Microsoft um in their hunt for various blockchain couldn't really find one that was actually easy to develop on and also easy for uh end users to onboard onto uh so they decided to repurpose near into uh something that can like be developer focused founder focused for scalability and uh easy for um uh its end users to onboard onto the way we accomplished that is by offering various Technologies for the builders to build and write smart contracts like we have a smart contract libraries for rust we have one that we're going to be teaching you today for JavaScript um so that way you don't like learn a whole new language to write a smart contract and build your census application you can just you know use what you know and get started right and today uh we have our um for end users where you have our primary feature of our near wallet which I'll show you guys in a minute too it's like a really easy like you know way to um essentially like have users sign in and sign up your application and interact within your blockchain and then for uh Founders again it's near infinitely scalable so as blockchain grows you shouldn't see a decrease in transaction speed or sharp increase return fees and again it's supposed to grow with the company so it's really really cool so yeah that's 2017 uh 2018 is running pivoted blockchain uh 2019 is when near built in mainnet in 2020 is when we ship the mainnet um and then after that uh near Inc actually split into various companies such as linear Inc which turned to Pagoda which is our development branch and your foundation which is our uh which is our um uh non-profit branch and then Aurora which is our evm layer essentially and our hope is to become like the primary entry point of web3 builders so why JavaScript like why um JavaScript is one of our smart contract languages well we believe that JavaScript is the language of mass adoption currently there are around 20 million developers that currently can read and write JavaScript code um and actually I'm just kind of curious how many of you guys know JavaScript Here In This Crowd like raise your hand if you guys know JavaScript how many guys are learning JavaScript also like okay so we have like okay so we have a few people we know it people are learning it awesome um so yeah if you're if you know JavaScript it makes it really easy for developers to like onboard into web 3 web 3 space um so essentially this also allows you to build a full decentralized application in one single familiar language so you have to spend uh months learning like a whole different language for your smart contracts you can just use what you know and yeah begin building so with that again you can build test deploy all in one stack and what is that stack well I'm gonna explain to you now so we have near sdkjs which is our library to write smart contracts in JavaScript we have workspaces Js which is essentially a way to test your decentralized application locally on your computer so that way you don't have to like deploy it to our test net to um like you know interact with your smart contract and actually run the entire simulated node on your computer and also modify the environment of that node so block Heights uh Epoch number anything you want it's really really handy we also have near CLI which allows you to interact within your blockchain from your terminal it's a wrapper around this next tool called near api.

js which allows you to interact with the near blockchain with your by plugging it into your front-end application your backend node script or again your CLI your terminal and we have our wallet selector too so near has a variety of wallets that allow you to sign in or sign out of application on linear blockchain so we have our native one which is my nearwall.com we also have a whole bunch of other ones like the math wallet Ledger wallet and a whole slew of things so we try to open it up for as many wallets as possible for this particular Workshop I have a little QR code giving you resources to learn more about our near SDK JS and how to build on it we're gonna be running through the workshop example project that we have listed here so if you guys want to take a picture of this you can or you guys can find me afterwards I can give this to you again so like see a few cameras going up so like wait till those go back down cool um cool if you guys need this again I'll be happy to give it to you so yeah with that let's code [Music] so the very first thing I want to show you guys is essentially um a way to get your application off the ground very quickly so if you are familiar at all with uh create react app it's a way to like quickly uh you know load in a project structure so you can like have like an application like ready to go uh create we have this similar tool called create new app which will essentially give you a smart contract template a front-end template with any uh you know with a framework such as like react as our primary one or just vanilla.js or wait long need to plug into your framework or even no front-end at all and um also lets you uh set up the scaffolding for our two different like uh smart contract languages which would be JavaScript and rust so um I know better than to trust like uh conference Wi-Fi so like I really like load it beforehand um but just show you guys what that would look like you can just simply type in npx to make this a little bigger there we go make it nice and big uh so npx creates near app then at latest and then it gives you this like really easy prompt to run through so select your smart contract language I would choose typescript to essentially compiles down to JavaScript um for your smart contract range it's just to you know essentially be more deliberate for your uh for your you know your uh typing of your variables while you're running your smart contract so just type type script our front-end framework could be react.js and then you can just simply give your project a name but then you're you know often ready to go so if I were to again I already ran this beforehand so I don't like load in all dependencies and uh risk you know like getting stuck on like conference Wi-Fi uh so I'm gonna make this bigger too um and then just do code dot actually I think I already opened it yeah there we go so here uh it's essentially like what you would get for um there we go for your scaffolding for your project so you have contract you have front end you have integration tests like all pre-built in I'm gonna go through the smart contract really quick just to show you guys what that looks like so I go to source and go to contract.ts um make that a little smaller close this out and you can see like uh just a very very basic smart contract for near right here um essentially all it does is allow you to store information on the blockchain like in the form of a string and then retrieve information to then be inserted into the application that comes with this template uh and yeah so it's really simple all we're doing here is saying it's like modifying this preset hello to different strings retrieving that and displaying it to our application uh just to go over these like really uh quick basic tools up here we have near bindgen near bindgen essentially acts as the glue around your smart contract to make it so that the near blockchain can actually interpret what you're writing um it comes with this like handy little like uh it only comes with like one like little field here called um require init so like if your smart contract has some metadata that you have to they want the user developer to input in before they actually use the application you can just you know set this to True essentially initialization functions are functions I only get called once if you try to call them again if there was an error um but we don't really need that right now for this particular example so that's all nearby agendas again it's the glue that makes your smart contract readable to the near blockchain then we have this uh import for this tool called near comes with a whole bunch of like functions that will help aid you and your smart contract writing we have near.

log which essentially allows you to return logs both to the console and to the in your blockchain so if you're writing specific events this is where it's like that's the tool you use or if you're just like debugging you want to see like what your contracts are turning you can use near.log for that we have significant ID which turns the name of the last account that signed a transaction on uh or that you're particularly calling to that contract random C which returns like a random string and you know a whole lot more so I'm going to go back to the contract we have call and view so a call method is essentially a way to change or add information to the blockchain this will essentially um this will incur what's called a a transaction fee in the form of gas and gas on near is essentially the cost of the computation that goes into a transaction so again uh change methods or call methods same thing uh will occur a small gas fee which is typically less than a penny um a view method is a simply way to query information from the blockchain which incurs no gas fee or no transaction fee so you can call a view method basically as much as you want so you can see down here we have our view method called get greeting that just simply retrieves this string and we have this uh call method or change method called SEC reading which accepts a parameter column message which is a type string which will essentially uh update or change the string so again that changes the information of the blockchain you can see this class here which acts as your state for the blockchain so this class is one field called greeting which is of type string which is by default set to hello and that's what we're updating with the smart contract so if I run uh oops let's see there we go so here we have a whole bunch of like handy little scripts for our smart contracts so if I run uh not there there we go package.json yeah so if I run yarn deploy that's going to create what's called a Dev account deploy there we go a Dev account on here so Dev account is simply um an account that's like meant to be used for your development environment like so it's like it's like a way it's like a randomly generated account on our test net meant to be like you have something you can like throw away something you can use to manipulate it's Auto funded with 200 test tokens which are just like fake near tokens so you don't have to like Risk using actual real near you can make as many Dev accounts as you want um they're meant just for uh to be disposable essentially so you can see uh it gives you like a link to our Explorer showing you um this is also actually really cool tool we have a Explorer for near so you can get information about transaction this particular one just shows that this contract has been deployed to this developer account and also shows you information about how much gas was attached how much gas was actually used a deposit value of near which is the amount of mirror gets sent to the contract account and more so great we have our developer account and we have deployed our smart contract to that developer account before we continue I just want to say one little note all accounts on near essentially are created with MP smart contract so if you were to create an account right now on near you would create an account with an empty blank smart contract as smart contracts get compiled down to bosom files those walls and files get deployed onto an account and then populate populate said smart contract so that's all we're doing let's say we're deploying a smart contract onto an account um so awesome so I'm gonna take their account name and show you like what like our CLI tool is so if you remember one of our handy tools is near CLI so I can set the contract name it's a contract ID as the developer account name and then using your CLI I can actually retrieve information from the blockchain and display it onto the account so near view um let's see contract ID and then get greeting get greeting and then if I go back to um our actual like smart contract you can see that get greeting has no parameters in it so we're not accepting any arguments whereas like set greeting does so I'm just going to put it in an empty stringified object into my CLI and just hit you know enter and there we go you can see our preset hello so we just retrieve some information from the blockchain let's preset in our smart contract now let's just say I want to update or change this information I could do near call contract ID and then it'd be set greeting then I have memory of a scroll so I'm just going to go back to our smart contract and I can see oh we have a argument called message and that message is of type string so let's include our stringified object type in message oops almost messed up message and then just do I don't know hi Dorian and then there we go and then because this is a call method or change method I actually have to assign this transaction so I can pay for the gas fees that are associated with it so I can put in account ID and then my uh the account I have loaded onto my computer is called uh you know blockhead.testnet after some web series I heard about like from some guy named Dorian oh no we should check it out test net it's going to hit blockhead.testnet so it's doing a account function call and it's cool so it gave me it's like empty strings I don't have a log telling me I'm giving me more information about it I just want to hit this go to Explorer I can see it succeeded which is really good um now if I go up two more times get greeting and then I've updated the information on that on a blockchain um so that's really cool so now like uh if I go down here let's see close this out if I go to the actual like front-end code uh in the front end folder here you can go to uh this wall interface you can see um with our wallet sector I have two particular like welds loaded in my near uh icon URL and then The Ledger wallet so uh my near wallet is like as our own native wallet that we have I'm available for on our blockchain um and then again there's like a whole slew of different like wallet options if you go to the actual like repo you can actually see like what other options there are I'm not gonna go too deep into like what's happening here but like we have a handy dandy sign-in function for signing into your application or signing out of your application you also have like uh this like view method and call method like uh structures so you can like simply call this method um in your actual application to make it a little bit easier on you to like actually like while you're running your smart contract to um to build it out uh you can see the contract ID here the method name the argument parameters kind of like similar to what we put in our CLI uh you can actually attach prepaid gas onto onto a method so you can prepay for your gas um it can also attach a deposit and then essentially a deposit is like and amount of near that you're sending directly to the contract account or the account that has a contract deployed onto it so like if you're dealing with the marketplace you can send near directly to that Marketplace to say buy your nft or something um if I were to run yarn start it says app is starting it gives you this like you know nice neat little like front end for your application you can sign in shows you the my near wallet model and then it'll redirect you to my nearwallet.

com or testnet.mineyourwalt.com and you can simply sign in with your application so this is what your your end user would see essentially just like a very easy way to sign in and sign diver application no crazy like uh cryptographic key pairs you have to figure out how to understand like I'm from Riverside like no one from Riverside we're gonna going to want to learn how to uh understand what cryptographic is they just want to sign in like a Facebook application right so like this is Riverside level usability which is great so I'm going to hit next hit connect and here we go so I'm signing to my application uh and one quick note about signing in when you're signing into an application I'm creating what's called function call access key for this output for this particular application it says uh function call access key um I'm sorry on near there are two types of access Keys we have full access keys and function call Access Keys full access Keys give an application full Reign Over your account it can send all your new tokens it can deploy contracts onto an account it can make more keys which is kind of cool a function call access key has restricted permissions to a particular account meaning it can't do that and it like it can't like do these things without your explicit permission to do so it also has a limited budget for gas transactions like a with a function clock access key would be called um like calling a particular method it only go up to about like 0.25 near worth of transaction fees before you have to create a new one so so it's a it's a whole key meant to protect your users it's really really cool um cool so again let's see they already signed in we're just gonna go wrong yeah sign in I think it might have like changed this off screen or something let's see connect yeah I think it might have like I think I've actually modified this during office hours so um yeah I think it might broken this actual application my bad but um yeah but let's just move on to like our next example which is like I think a much cooler much more like robust example too so if I were to go to um let's see so I have this really cool example called our coin flip example I'm going to go over here so now we know the structure of like a particular like a project on near we have our front end we have our contract we have integration tests so we've seen this before so it's pretty cool um so if you go into our smart contract in contract typescript or contract.ts uh and again TI suggests typescript you can write this in just Auto script if you want but I would recommend using typescript for your smart contracts it's just a little more deliberate I'm providing smart contracts um you can see um like here's a little bit more of like a complex like smart contract right we have like this function called flip coin we have this other function called points of like what's going on here it's crazy you also have this like new uh imported like a tool from the new sdkjs so this uh additional thing is called collection uh so on near we have a variety of collections ranging from vectors to look up maps to an ordered maps to look up sets to unordered sets it's just uh they're just simply data structures that allow you to organize your information much easier onto the near blockchain so an ordered map for example is simply something that has a key value pair right so uh give it a key in this particular game we're flipping a coin guessing heads or tails the uh key in this case is the account name and the value is the points associated with that account so if you guess correctly your points go up if you guess incorrectly your points go down by one um that's it so you can see here we're uh essentially instantiating this like collection by saying points of type unordered map equals its new instance of this unordered map with this prefix called points the only point of this prefix is just to um differentiate this data structure from other data structures that you may use like if I were to um if I were to like to avoid data collisions on the blockchain so far to copy this and make a new unordered map I have to give it a new prefix or I'll still throw an error and like give me a screen about like a potential data Collision so uh again like the game is just a coin flip guessing game so we have one type called side this is a custom type that gives you either heads or tails we have this function called simulate coin flip which is which uh essentially returns um a side or a string of heads or tails we have that tool I mentioned earlier called random seed and this random seed simply returns a random string constructed from our blockchain and then like uh you can get the character code edit Ram string and do character code modulo 2 to either like guess heads or tails they'll give you like a one or zero meaning true or false so if it's true it's heads if it's false it's tails and that's really it so this returns either heads or tails so that's the simulation of that coin flip um then we have our actual like call function which is flip coin which takes a argument called player guess and that player guess is of type side meaning their guess has to be either heads or tails and also return a value of type side so essentially the player um which is like processor account ID that's the name of the player um gets called here and safety is the values that's the name of the player just gets saved here you can get the outcome of the simulated coin flip and then here you can collect the current Player points so this dot points DOT get well it would simply return the point value from a Nord map as a number and like if they guess correctly then they get one point and like if they guess incorrectly they get zero they lose a point or if they are at zero they won't go below zero using this conditional statement here and after that they take the updated point value and set it to or and set the new value in that unordered map so you have the Player points or player name as a key and a new updated point value as the value you know simply just return the outcome to the console then you have a view method here which is points of so points of this particular player it just simply retrieves uh retrieves the points that the current points of the player has or if that player does not exist in the United map it will simply return zero um that's potentially an entire smart contract so let's play a game Let's Play coin flip so we'll do yarn deploy there we go let's see so it's building the smart contract it's pulling it onto our Dev account which we should get pretty soon again conference Wi-Fi it's wonderful [Music] hmm cool so I could run yarn start s so here's our near token one side you have the near logo the other side we have the founder of near which is you know our co-founder of Vino which is Ilia uh I was so happy when my co-worker made this I think it's the coolest thing um so I'm going to sign in choose blockhead27.

testine hit connect and then now we can play our games you can see I play their game for uh despite your account before but uh let's yeah let's you know let's have some audience participation so if it's heads raise your hand if you think it's heads I want you to raise your hand so you have one two three four five so many to count like we also have most people here thinking it's heads okay if it's tails and you guys win a prize which is you know I guess my respect so good job so I'm gonna hit heads oh my God I think the Tails won good job guys okay let's try again let's see if we can let's see if uh the people who lost can like make up for their uh for their loss right so like uh who now thinks it's tails ooh okay we have like a few Tails let's see okay oh the Tails won oh my gosh okay I think the heads are losing one more time let's go for uh let's go for one more who thinks it's Tails again I have one two okay one two people okay so two people loyal to Tails we're gonna choose Tails one more time okay well okay I think we know who the winners are uh I'll let you guys like deal with your shame yourself but like uh thank you guys so much for playing this game and for checking out this Workshop we have a bounty here for those of you are building uh near uh I think till prize is like 10K split into three different sections for first it's 5K second place is uh 3K in third place is 2K for anyone building on the near SDK JS uh so you're building an application on your stick kgs you're using New Year to kgs then you're eligible to apply for the Bounty um if you have any questions I'll be here you know after his workshop and also we also have people at Thea near booth go over there pick up some swag uh another movie came to the workshop and uh yeah thank you guys so much if can I ask if I can answer your questions I'll be here foreign question there uh so it was near like developing like contract templates essentially yeah so we have a few contract templates like in a form of like examples on our GitHub repo for new Dash examples we also have a uh nft Zero to Hero tutorial so if you want an nft smart contract template you can simply go to near org look up the Zero to Hero tutorial and it'll lead you to the GitHub repo Forge said smart contract um I think Nera Dev is actually where you can go for our like actual like example code so go to near.dev to see like our different examples too I can also if you have questions for a particular template you can find me I can help you with your uh with your search yes for python um we actually yeah I think like a few of our community members are making python we don't have one internally in Pagoda that we're making just yet um but like it's definitely like something I like it's been in rather high demand so I knew I've hear a variety of community like in depth you know like initiatives to try and make the python repo we don't have one currently any other questions yes um so if you're deploying your contract can you still play an ethereum contract um so for so if you're pulling into your contract uh each contract account could only accept like one was a file at a time if you want to deploy like a slightly smart contract that's a little bit of a different process and you have to go to um Aurora it's like if you go to like a search like Aurora I always forget what it is like Aurora near there is aurora.dev essentially this is the tool you could use to like deploy a silly a smart contract essentially um like I haven't I don't have much experience with Lady myself but like from my understand it's as easy as like changing the end point uh to like um for your like silly smart contract deployment to like went to an input you could find in like their developer documentation here so yeah check out everywhere it's really really cool we also have some awesome swag I wish they were here any other questions cool well thank you guys so much I appreciate your time you guys are amazing