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
in there, too 