---
title: 'Near Tutorial 101'
disqus: hackmd
---
Near Tutorial 101 👏
===
## Table of Contents
[TOC]
## Prerequisites
If you are a total beginner to this, start here!
1. Node >= 12 `node -v`
2. Near-CLI `npm install near-cli -g`
3. YARN `npm install --global yarn`
4. NEAR account on testnet, please create one https://wallet.testnet.near.org/, Also remember your accountId it will be something like **`bedeawi.testnet`**
## What we will learn
1. What's a SmartContract 📜
2. How to deploy a SmartContract
3. How to test the deployed SmartContract
4. How to call it from the Frontend
Demo Project
---
Let's start by cloning a basic example from the near examples something easy like a simple counter example available https://github.com/near-examples/counter
```
git clone https://github.com/near-examples/counter.git NearRiddleGame
```
Now Let's get authorized on Near so we can deploy from our terminal, go to your project directory and type `near login`
```
> cd NearRiddleGame
> near login
Please authorize NEAR CLI on at least one of your accounts.
If your browser doesn't automatically open, please visit this URL
https://wallet.testnet.near.org/login/?referrer=NEAR+CLI&public_key=ed25519%3A7ntUJNDQmuUkUwbtqMJZEicAZCY7WmchBy43918u2n7s&success_url=http%3A%2F%2F127.0.0.1%3A5000
Please authorize at least one account at the URL above.
Which account did you authorize for use with NEAR CLI?
Enter it here (if not redirected automatically):
```
your browser should pop-up and you will have a screen where you need to login via your testnet near account, click next and follow the UI
## Installing the dependecies
now run `yarn` to install project dependencies
```
> yarn
```
Currently our counter contract is ready and we can deploy it to the testnet but we will need an account for that, we can either use your main account like mine `bedeawi.testnet` or you can use sub-account or dev-account, We will use the sub-accounts for this time.
To create a sub-account we will need to give it a name like `SUBACCOUNT.bedeawi.testnet` or `counter.bedeawi.testnet` and we will need to give it some Near from our account, in the terminal type the command below to create your account.
```shell=
near create-account counter.bedeawi.testnet --masterAccount bedeawi.testnet --initialBalance 20
```
The `--initialBalance` flag means that the created account will have only a balance of 20 Near and those will be deducted from your main account 🤑
Now we have our sub-account ready let's use it in the configuration to tell our code where to deploy the contract, Open the project in your favorite editor and go to `src/config.js` and edit the first line
```javascript=
const CONTRACT_NAME = "counter.bedeawi.testnet";
```
Now let's have a look on our cloned project tree
as you can see we have 2 main folders the `assembly` folder for our SmartContract Code and the `src` folder for our frontend HTML + CSS code.
Why not we check the contract code in the `assembly/main.ts`
the file has 4 functions
1. incrementCounter
2. decrementCounter
3. getCounter
4. resetCounter
that means that our SmartContract or Backend will have those 4 functionalites lets start it and see.
## Running the Project
Now your project is ready, type `yarn start` in your terminal to start it
```
> yarn start
```
Project is built successfully and it's ready to be tested
#### Check it from terminal
##### Checking the current Value of the counter
```shell
❯ near call counter.bedeawi.testnet getCounter '' --accountId bedeawi.testnet
Scheduling a call: counter.bedeawi.testnet.getCounter()
Doing account.functionCall()
Transaction Id 2iQWeVPDmfJGdSPbWYQ7P62nTvrZoKLPkegfiuJHXQFT
0
```
Explanation:
1. `near` using the near cli
2. `call` call command to call a contract
3. `counter.bedeawi.testnet` the contract account we used to deploy it.
4. `getCounter` is the function in the contract in the assembly/main.ts
5. `''` no parameters needed as this function doesn't require any
6. `--accountId bedeawi.testnet` this is the account calling the contract
As you can see here the value returned is 0 👏 let's try adding 2
##### Incrementing the value by 2
```
❯ near call counter.bedeawi.testnet incrementCounter '{"value":2}' --accountId bedeawi.testnet
```
Explanation:
1. `near` using the near cli
2. `call` call command to call a contract
3. `counter.bedeawi.testnet` the contract account we used to deploy it.
4. `incrementCounter` is the function in the contract in the assembly/main.ts
5. `'{"value":2}'` here this function requires a parameter named `value` to be sent to increment our counter with.
6. `--accountId bedeawi.testnet` this is the account calling the contract
Our Counter value is now 2 👏, let's go check it from the UI
#### Check it from UI
Make sure you have a terminal with `yarn start` running
```
> yarn start
```
Now open your browser and open `http://localhost:1234`
you should see this, so login and start incrementing the counter.
What is written in our Javascript let's check it, open `src/main.js`
```javascript=
let nearConfig = getConfig(process.env.NODE_ENV || "development");
//getting the configuration for Near either testnet or mainnet or betanet or other, currenlty it will go to development which is testnet
window.nearConfig = nearConfig;
//Assigning the nearConfig to the window
// Connects to NEAR and provides `near`, `walletAccount` and `contract` objects in `window` scope
async function connect() {
// Initializing connection to the NEAR node.
window.near = await nearAPI.connect(Object.assign(nearConfig, { deps: { keyStore: new nearAPI.keyStores.BrowserLocalStorageKeyStore() }}));
// Needed to access wallet login
window.walletAccount = new nearAPI.WalletConnection(window.near);
// Initializing our contract APIs by contract name and configuration.
window.contract = await near.loadContract(nearConfig.contractName, {
viewMethods: ['getCounter'],
changeMethods: ['incrementCounter', 'decrementCounter', 'resetCounter'],
sender: window.walletAccount.getAccountId()
});
//Any method which doesn't do an actual change should be placed in the view methods array, if it changes a value like the increment or the decrement or reset it should be placed in the changeMethods array.
}
```
now you can call your contract from anywhere in the Javascript via your contract variable like
```javascript=
window.contract.incrementCounter(10).then(doSomething);
```
As you can see the incrementCounter function is a promise so you need to chain it with .then and then dosSomething when it's a success or fail, May be get the current counts 😉
## Appendix and FAQ
:::info
**Find this document incomplete?** Leave a comment!
:::
###### tags: `Near` `NearSDK` `AssemblyScript` `SmartContract`
Sign in with Wallet
Connect another wallet