NEAR Tutorial, Part 1

Build and explore the basic hello world app

Time to set up some starter code to make the hello world app

    cd /
    mkdir near-learning
    mkdir tutorial1
    npx create-near-app --help
    npx create-near-app myFirstApp
    cd myFirstApp
    yarn dev 

Same thing explained in more detail 5 minutes of this video:video

At this point you've got a boiler plate code opening up in your browser with a login/logout setup and some contracts that change the greeting. Time to open up those files and poke around a bit.

For WSL2 (windows subsystem for linux) you can access to home directory from file explorer like this :


Your files are going to be in home/username.

Open the folder up in your favorite code editor. You're going to want to look first in for an overview of the code, the commands you just ran and how to do a full deployment, for now we can stick to a development version.

Then you're going to want to peek into the src folder to see all the front end code. Lots of stuff there, but don't worry we're going to simplify things.

Before we're done poking around we'll want to take a peek at the file where the contract is written in assembly: contract/assembly/index.ts

There's two functions in our contract getGreeting and setGreeting.

One last file to take a peek at neardev/dev-account.env in this file we have interestingly enough our CONTRACT_NAME! If you compare the nearby file dev-account you'll notice both the account and the CONTRACT_NAME are the same, that's because (as you might have read in the file) every contract has it's own account, when you deploy a contract 'for real' you'll make a sub-account on top of your .testnet account.

This is interesting because if you remember we can use near-cli to call contract functions from the command line, so let's try that:

    near view CONTRACT_NAME getGreeting '{"accountId": "YOURNAME.testnet"}'

*Make sure you switch out CONTRACT_NAME for what you found in neardev/dev-account.env and YOURNAME for whatever username you set up for testnet, okay?

And voila from the command-line you've called a contract function that in the boiler plate code is being called inside the Javascript code using near-js-api,

which is not surprising seeing as near-cli is just calling the near-api-js! docs

So with that in mind we can imagine our contract floating free out there on the NEAR protocol and think about how to write a fun little HTML5 hello-world mini-game that connects us back to the contract functions that came with our boiler plate code. Which is basically what I did for js13kgames even though I didn't really understand how I did it at the time, it seemed to work and that was good enough. So let's have some fun!

Next tutorial

Next we're going to start with a blank html file and make our own front end for an HTML5 mini-game!

NEAR tutorial 2