Skip to main content

Hello NEAR

Hello NEAR! is a friendly decentralized App that stores a greeting message. It is one of the simplest smart contracts you can create in NEAR, and the perfect gateway to introduce yourself in the world of smart contracts.

img


Starting Hello NEARโ€‹

You have two options to start Hello NEAR. The first and recommended is to use the app through Gitpod (a web-based interactive environment). The second option is to start the project locally by using create-near-app, our node-based utility.

Gitpodโ€‹

Both our Rust and AssemblyScript implementation are available in gitpod. When selecting one, a new tab will open in your browser with a web-based IDE. Give it a minute to compile and deploy the contract, and then a frontend will pop-up for you to interact with the app (make sure the pop-up window is not blocked).

๐ŸŒ JavaScript๐Ÿฆ€ Rust๐Ÿš€ AssemblyScript
Open in GitpodOpen in GitpodOpen in Gitpod

Create Near App (node)โ€‹

Hello NEAR can be created locally with the help of create-near-app. Follow the snippet bellow to create a local project, compile and deploy it in the testnet network. When done, a browser window should open.

npx create-near-app

Interacting With Hello NEARโ€‹

Go ahead and login with your NEAR account. If you don't have one, you will be able to create one in the moment. Once logged in, change the greeting and see how our Hello NEAR app greets you!

img Frontend of Hello NEAR


Structure of a dAppโ€‹

Now that you understand what the dApp does, let us take a closer look to its structure:

  1. The frontend code lives in the /frontend folder.
  2. The smart contract code is in the /contract folder.
  3. The compiled smart contract can be found in /out/main.wasm.
  4. The account's name in which the contract was deployed is in /neardev/dev-account.

Contractโ€‹

The contract presents 2 methods: set_greeting and get_greeting. The first one stores a String in the contract's parameter message, while the second one retrieves it. By default, the contract returns the message "Hello".

contract/src/lib.rs
loading...

Frontendโ€‹

The frontend is composed by a single HTML file (/index.html). This file defines the components displayed in the screen.

The website's logic lives in /assets/js/index.js, which communicates with the contract through /assets/js/near/utils.js. You will notice in /assets/js/index.js the following code:

frontend/assets/js/index.js
loading...

It indicates our app, when it starts, to check if the user is already logged in and execute either signedInFlow() or signedOutFlow().


Testingโ€‹

When writing smart contracts it is very important to test all methods exhaustively. In this project you have two types of tests: unit and integration. Before digging in them, go ahead and perform the tests present in the dApp through the command yarn test.

Unit testโ€‹

Unit tests check individual functions in the smart contract. They are written in the same language as the smart contract is. For AssemblyScript, you will find the test in the __tests__ folder. If your contract is in Rust you will find the tests at the bottom of each .rs file.

contract/src/lib.rs
loading...

Integration testโ€‹

Integration tests are generally written in javascript. They automatically deploy your contract and execute methods on it. In this way, integration tests simulate interactions from users in a realistic scenario. You will find the integration tests for hello-near in integration-tests/.

integration-tests/ts/main.ava.ts
loading...

Moving Forwardโ€‹

A nice way to learn is by trying to expand the contract. Modify it so that you store one greeting message per user. For this, you will need to use knowledge from the environment and storage sections. You can also use the guest book example, since it does something similar.