Intro to NEAR [Content]

Intro to NEAR.

Quick summary

In this tutorial, we’ll learn the core concept behind NEAR and its ecosystem. We’d discuss its features, compatible stacks, case studies and how to get started. We’d be building a DApp dice game. We’d be using NEAR protocol for storing, managing and deploying our application; by doing this, we’d master the use of NEAR in building DApps.

Note: All code and resources used in this post are from NEAR in minutes, you can find it here

Introduction

This tutorial will help readers interested in developing decentralized applications with NEAR and its ecosystem. This article requires a basic understanding of blockchain.

What is NEAR

NEAR is an open-source blockchain infrastructure with smart contract functionality created for developers to create, manage and deploy decentralized applications.

Built by the NEAR collective, NEAR has a wallet for storing its tokens which is called NEAR wallet; NEAR tokens can be used to pay for transaction fees or even staked by holders as transaction validators.

NEAR is focused on creating a user and developer-friendly platform, to do this, NEAR wallet features readable account names instead of cryptographic wallet addresses and with NEAR, new users can interact with DApps without a wallet.

In this tutorial, we will use NEAR to develop a decentralized dice application with wallet functionalities. Users will be able to place a bet on dice and if they fail, their entire stake goes to the game and if they win, half the current bounty goes to them.

Core Concept and Features of NEAR

One of the issues that have faced the blockchain community is scalability, which is the ability of a blockchain to handle a large number of transactions. NEAR protocol fixed this by introducing Sharding.

Sharding reduces the computational load by splitting a network into shards, with this every node in a network is not required to run all the code in a network, only the code that is relevant in a shard, by doing this, NEAR scales the network’s capacity as the number of nodes in the network increases. NEAR achieves this with a process known as Nightshade, a Rainbow bridge means the entire platform is compatible with Ethereum.

NEAR uses a Proof-of-Stake system to achieve consensus. With proof of stake, nodes that want to be a part of the transaction validation must stake NEAR tokens to be considered, other token holders who have no interest in operating a node can assign their stake to validators of their choice. NEAR chooses validators every epoch, that’s 12 hours. A single shard on NEAR contains 100 seats and to be a validator, you must have at least 1 seat. The cost of each seat is determined by the total amount of NEAR tokens staked at the time.

NEAR token also known as NEAR cryptocurrency is a token that is used for staking, paying transaction fees and collateral for exchange on the NEAR blockchain. NEAR also provides support for tokens from other chains including NFTs, with NEAR you can transfer ERC-20 tokens from Ethereum to NEAR.

Case studies for NEAR

Organizations like Flux, an open market protocol is built on the NEAR protocol. Other organizations like Paras, an NFT marketplace is built on NEAR’s performant infrastructure. With NEAR, Mintbase has made minting NFTs cheaper, faster and more scalable for its end users.

Getting started in NEAR

There are a number of guides to get started in NEAR. Development on NEAR happens in two batches, that is the development of “Smart contracts”, that is the backend of your blockchain application. On the NEAR blockchain, all smart contracts must be compiled to WASM.

NEAR currently supports two languages for developing smart contracts, namely AssemblyScript and Rust. NEAR also provides you with an examples page to explore Smart contracts and deploy faster. it’s important to note that AssemblyScript is not recommended for financial use cases.

NEAR also provides create-near-app, a CLI tool for starting near applications using a package manager. In the next section, let’s look at some NEAR blockchain concepts.

Building your first NEAR application

In this section, we are going to build a NEAR dice application with NEAR blockchain and Vue.js for our user interface.

Our application will feature a homepage where users can see the status of the entire playground without logging in. A user can log in with their NEAR account, they can then buy any number of dice. With dice, users can guess a number, if a dice point is equal to his guess, half the jackpot would belong to the said user, else the amount the user paid for the dice is added to the jackpot.

Initializing Application with NEAR

First, let’s create a NEAR blockchain application with rust for our smart contracts, Vue.js for our frontend. To do this, run the code block below:

Using NPX

npx create-near-app --contract=rust --frontend=vue near-dice-app

OR using Yarn

yarn create-near-app --contract=rust --frontend=vue near-dice-app

The above code will create a bar NEAR application using the near-create-app package Navigate into the project directory with the command below

cd near-dice-app

Writing A Smart Contract for DApp

In this section, we will write a smart contract for our application. it’s important to note that this will be a fully decentralized application with no dedicated backend architecture. All of our user information and accounts will be handled by NEAR blockchain.

Writing Rust Smart Contract for Near dice Dapp

To write a smart contract, navigate into the contract folder in your project director, inside it, open the src directory and inside this folder, open your lib.rs file. This file will house all of our smart contracts. You can see the link to the contract here on GitHub

Inside it, we imported a number of packages from our NEAR SDK, some include:

  • borsh: this is a reusable crate needed for internal state serialization when writing contracts on NEAR.
  • alloc: this is needed for our contract for memory allocation
  • json_types: this helps us define our JSON types, in our case we defined U64 and U128 which wrap an integer into a struct and implement JSON serialization.
  • serde: serde is used for external JSON serialization
  • Collections::{Vector, LookupMap}: vector collection creates an iterable implementation of a vector while lookupMap creates a non-iterable implementation of a map

You can learn more about these structures and collections on NEAR’s official Rust SDK documentation.

To calculate a fraction of our reward fee, we created a struct RewardFeeFraction and inside it, we initialized our numerators and denominators, to make them accessible from external modules, we initialized them with the pub keyword.

To calculate our RewardFeeFraction, we used the impl keyword to calculate if the denominator is a positive number if its less than 0. we throw an error “Denominator must be a positive number”, we also did the same for the numerator, however, it’s important to note that the numerator is the reward fee for players.

we created a struct to define the types for the WinnerInfo, we defined the user to have the winner accountId, the amount will be the balance. We then defined a new struct for HumanReadableWinnerInfo, HumanReadableDiceResult, HumanReadableContractInfo.

In our NearDice struct, we added an owner_id which will be the AccountId of the user, we initialized our dice_numbr as a type of u8, and our rolling_fee is set to Balance which is the number of NEAR tokens needed for dice to be rolled once, the jack_pod struct is set to balance, it tasks the half of Staked NEAR tokens to be added as the jack_pod amount, the owner_pod struct enables a user to withdraw their balance to their NEAR wallets, our accounts struct records the deposit by a specific user for buying a dice, the win_history will render the info any winner.

Building Application Frontend - Vue.js

To build our frontend, navigate into your project directory and install the dependencies we’d need in our project below:

yarn add bootstrap bootstrap-vue vue-loading-overlay

In the code block above, we installed bootstrap, bootstrap-vue and vue-loading-overlay, which provides styling support for Vue.js with bootstrap.

We’ll need a dice component that will feature dice for players to buy, guess and roll a dice. We’d also need to connect our NEAR account and add a feature to buy more than one dice, let’s do this in the section below;

Building Dice Component

This component will contain a Dice component, different sides of our dice and logic for rolling dice by a user. Navigate to your components directory inside the src folder of our project, inside the components folder, create a new file called Dice.vue.

Here is a GitHub link to the component

First, we created all six sides of dice in the code block above, using Vue template syntax.

Building Notifications Component

This component will expect a networkId, msg and contractID prop, inside it, we’d be using props to assign types to our component. We’d use a child component to add the user’s contractId.

You can find a GitHub link to the component here

Creating LogIn and LogOut Helper Function

In the code block below, we will create a helper function to get a user’s accountId, contract, and wallet connection. We will import these packages from near-api.js. Here is a link to the helper functions on GitHub.

Building a SignedOut Component

This component will feature a signout button to enable a user to sign out of the application. You can see the GitHub link to the component here.

Building a Signed-In Component

This component will feature our homepage, a loading page for when a user rolls a dice, it will also feature a list of top players of the game. Here is a Github link to the component

If done correctly, you can start your application dev server by running the command below

yarn dev

Our application should look like the image below

Conclusion

In this post, we’ve learnt NEAR blockchain, the core concepts of NEAR and a few case studies under the chain. It’s important to note that this project was first built by a NEAR certified demo student, you can find the demo here. You can take this further by seeing the NEAR documentation here and build more with NEAR, let me know what you build.

RESOURCES

10 Likes

I like this article, I followed up with the article and have now built my first near app :grinning:

Thanks @fortune for this

2 Likes

Now there’s a simplified intro to follow on building with Near.

I love this article.

Simplified intro…
I love this article

Wonderful intro and explanation, for someone getting into the blockchain space this helped me understand certain terminologies I’ve come across before now.

Great intro! Bookmarked and will be referencing! Love Love love this! Highly informative!

1 Like

Woow… This is very informative. Nice job Fortune :+1:

Wow…wonderful tutorial. As a Vue.js developer, this was really helpful in my transition to building this kind of applications.

Thank you!!.

Nice Intro. Good job.

1 Like

Awesome stuff!

This is a great intro for anyone who’d like a mid-level introduction to the technical side of NEAR.

My only feedback is:

  • There are a handful of typos and grammatical errors - nothing that can’t be fixed in a flash

  • The title - ‘Intro to NEAR’ - as an end user, and not a developer, I’d expect to be provided with a more higher level overview of NEAR, the ecosystem, and its benefits, rather than diving into tech. Could maybe use an alternative title like ‘Building Your First NEAR dAPP’

Really looking forward to seeing your contributions to the NEAR Wiki if you choose to drop some :fire: in there, too :tada:

3 Likes

Hi David,

Thanks for your feedback, I’d be sure to run this on grammaly and fix the typos, also I’d be sure to fix the title to something more advanced

Thanks once again.

3 Likes