# Intro to NEAR \[Content\] **URL:** \ **Category:** Content\ **Tags:** community\ **Created:** [August 4, 2021, 10:09pm UTC](https://gov.near.org/t/intro-to-near-content/4175 "2021-08-04T22:09:04Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![fortune](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/fortune/32/3153_2.png) [@fortune](https://gov.near.org/u/fortune)\ **Post date:** [August 4, 2021, 10:09pm UTC](https://gov.near.org/t/intro-to-near-content/4175/1 "2021-08-04T22:09:05Z")
# 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](https://github.com/Learn-NEAR/NCD-01--dice)** ## **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](https://near.org/) 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](https://near.org/papers/nightshade/). [Sharding](https://near.org/papers/nightshade/) 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](https://near.org/downloads/Nightshade.pdf), a [Rainbow bridge](https://near.org/blog/eth-near-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](https://near.org/blog/near-token-supply-and-distribution/) 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](https://docs.near.org/docs/validator/economics) 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](https://www.gemini.com/cryptopedia/erc20-token-standard-ethereum) from Ethereum to NEAR. **Case studies for NEAR** Organizations like [Flux](https://near.org/how-flux-built-a-fast-inexpensive-and-decentralized-open-market-protocol-on-near/), an open market protocol is built on the NEAR protocol. Other organizations like [Paras](https://near.org/is-paras-id-the-highest-quality-nft-market-on-the-web/), 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](https://near.org/get-started/) in NEAR. Development on NEAR happens in two batches, that is the development of “[Smart](https://docs.near.org/docs/develop/contracts/overview)[contracts](https://docs.near.org/docs/develop/contracts/overview)”, that is the backend of your blockchain application. On the NEAR blockchain, all smart contracts must be compiled to [WASM](https://webassembly.org/). NEAR currently supports two languages for developing smart contracts, namely [AssemblyScript](https://www.assemblyscript.org/) and [Rust](https://www.rust-lang.org/). NEAR also provides you with an [examples page](http://near.dev/) 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](https://github.com/near/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](https://docs.near.org/docs/tutorials/contracts/intro-to-rust) and [Vue.js](https://vuejs.org/) 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](https://github.com/near/create-near-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](https://github.com/Learn-NEAR/NCD-01--dice/blob/main/contract/src/lib.rs) 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](https://github.com/near/near-sdk-rs/blob/master/HELP.md). To calculate a fraction of our reward fee, we created a [struct](https://doc.rust-lang.org/book/ch05-01-defining-structs.html) RewardFeeFraction and inside it, we initialized our numerators and denominators, to make them accessible from external modules, we initialized them with the [pub](https://doc.rust-lang.org/std/keyword.pub.html) keyword. To calculate our RewardFeeFraction, we used the [impl](https://doc.rust-lang.org/std/keyword.impl.html) 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](https://github.com/Learn-NEAR/NCD-01--dice/blob/main/src/components/Dice.vue) to the component First, we created all six sides of dice in the code block above, using Vue [template](https://vuejs.org/v2/guide/syntax.html) 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](https://github.com/Learn-NEAR/NCD-01--dice/blob/main/src/components/Notification.vue) **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](https://github.com/Learn-NEAR/NCD-01--dice/blob/main/src/utils.js). ## 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](https://github.com/Learn-NEAR/NCD-01--dice/blob/main/src/components/SignedOut.vue). ## 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](https://github.com/Learn-NEAR/NCD-01--dice/blob/main/src/components/SignedIn.vue) 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 ![](https://europe1.discourse-cdn.com/flex005/uploads/gov_near/original/2X/a/a36d9888d14c0de832efd79d063a5eea8ed46deb.png) ## 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](https://www.youtube.com/watch?v=zPH_1MhfJeY). You can take this further by seeing the NEAR documentation [here](https://docs.near.org/docs/develop/basics/getting-started) and build more with NEAR, let me know what you build. **RESOURCES** - [NEAR Rust Smart Contract Basics](https://hackmd.io/@nearly-learning/contract-basics-rust) - [NEAR SDK documentation](https://github.com/near/sdk-docs) - [NEAR Learning Forum](https://hackmd.io/@nearly-learning/near-201) - [NEAR for senior developers](https://hackmd.io/@nearly-learning/near-201) - [NEAR Learning Products](http://gov.near.org/c/education/learning-products/58) ---
**Author:** ![Origho-precious](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/origho-precious/32/3221_2.png) [@Origho-precious](https://gov.near.org/u/Origho-precious)\ **Post date:** [August 4, 2021, 10:32pm UTC](https://gov.near.org/t/intro-to-near-content/4175/2 "2021-08-04T22:32:22Z")
I like this article, I followed up with the article and have now built my first near app 😀 Thanks @fortune for this ---
**Author:** ![ikehakinyemi](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/ikehakinyemi/32/3175_2.png) [@ikehakinyemi](https://gov.near.org/u/ikehakinyemi)\ **Post date:** [August 4, 2021, 10:35pm UTC](https://gov.near.org/t/intro-to-near-content/4175/3 "2021-08-04T22:35:23Z")
Now there’s a simplified intro to follow on building with Near. I love this article. ---
**Author:** ![Natasha](https://avatars.discourse-cdn.com/v4/letter/n/df705f/32.png) [@Natasha](https://gov.near.org/u/Natasha)\ **Post date:** [August 4, 2021, 11:46pm UTC](https://gov.near.org/t/intro-to-near-content/4175/4 "2021-08-04T23:46:11Z")
Simplified intro… I love this article ---
**Author:** ![MelvinManni](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/melvinmanni/32/4305_2.png) [@MelvinManni](https://gov.near.org/u/MelvinManni)\ **Post date:** [August 5, 2021, 12:03am UTC](https://gov.near.org/t/intro-to-near-content/4175/5 "2021-08-05T00:03:43Z")
Wonderful intro and explanation, for someone getting into the blockchain space this helped me understand certain terminologies I’ve come across before now. ---
**Author:** ![mizzleinetimi](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/mizzleinetimi/32/4307_2.png) [@mizzleinetimi](https://gov.near.org/u/mizzleinetimi)\ **Post date:** [August 5, 2021, 12:30am UTC](https://gov.near.org/t/intro-to-near-content/4175/6 "2021-08-05T00:30:44Z")
Great intro! Bookmarked and will be referencing! Love Love love this! Highly informative! ---
**Author:** ![icode247](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/icode247/32/4311_2.png) [@icode247](https://gov.near.org/u/icode247)\ **Post date:** [August 5, 2021, 5:12am UTC](https://gov.near.org/t/intro-to-near-content/4175/7 "2021-08-05T05:12:09Z")
Woow… This is very informative. Nice job Fortune 👍 ---
**Author:** ![uma-victor1](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/uma-victor1/32/4313_2.png) [@uma-victor1](https://gov.near.org/u/uma-victor1)\ **Post date:** [August 5, 2021, 5:22am UTC](https://gov.near.org/t/intro-to-near-content/4175/8 "2021-08-05T05:22:55Z")
Wow…wonderful tutorial. As a Vue.js developer, this was really helpful in my transition to building this kind of applications. Thank you!!. ---
**Author:** ![Kaka](https://avatars.discourse-cdn.com/v4/letter/k/58f4c7/32.png) [@Kaka](https://gov.near.org/u/Kaka)\ **Post date:** [August 5, 2021, 6:46am UTC](https://gov.near.org/t/intro-to-near-content/4175/9 "2021-08-05T06:46:19Z")
Nice Intro. Good job. ---
**Author:** ![David\_NEAR](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/david_near/32/43414_2.png) [@David\_NEAR](https://gov.near.org/u/David_NEAR)\ **Post date:** [August 5, 2021, 6:35pm UTC](https://gov.near.org/t/intro-to-near-content/4175/10 "2021-08-05T18:35:30Z")
**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](http://gov.near.org/t/establishing-near-wiki/3409/37) if you choose to drop some 🔥 in there, too 🎉 ---
**Author:** ![fortune](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/fortune/32/3153_2.png) [@fortune](https://gov.near.org/u/fortune)\ **Post date:** [August 5, 2021, 6:42pm UTC](https://gov.near.org/t/intro-to-near-content/4175/11 "2021-08-05T18:42:18Z")
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.